/* 3R SOFT VI, source palette #004698 / #0c0c0c. */
:root {
  --ink:#0c0c0c;
  --blue:#004698;
  --blue-hover:#003c83;
  --blue-dark:#004698;
  --blue-tint:#edf3fa;
  --red:#004698;
  --nav-h:68px;
  --maxw:1280px;
  --gray:#666b73;
  --bg-alt:#f5f6f8}

.brand-svg {
  width:132px;
  height:25px;
  display:block;
  color:#0c0c0c}
.brand-svg--mark {
  width:32px;
  height:32px}
.brand-svg--wordmark {
  width:108px;
  height:22px}
.brand-svg--logo-mono {
  color:inherit}

.skip-link {
  position:fixed;
  top:-60px;
  left:20px;
  z-index:200;
  background:#fff;
  padding:12px}
.skip-link:focus {
  top:8px}

.nav {
  background:rgba(255,255,255,.91)}
.nav__links {
  gap:12px}
.nav__links a {
  font-size:13px}
.nav__actions {
  gap:23px}
.account-link {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px}
.account-link i {
  font-size:18px}
.nav__inner {
  gap:45px}
.lang {
  border:0}
.lang a {
  padding:4px 7px;
  font-size:10px}
.lang a.is-active {
  background:transparent;
  color:var(--ink)}
.lang a:not(.is-active) {
  color:#777}
.brand {
  flex-shrink:0}
.micro-label {
  display:block;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.18em;
  font-weight:650;
  color:var(--blue)}
.muted {
  color:var(--gray)}
.small {
  font-size:13px!important;
  line-height:1.6}
.text-link {
  color:var(--blue);
  font-size:15px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:14px}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px}
.btn {
  font-size:14px;
  padding:12px 24px}
.btn--sm {
  padding:8px 17px;
  font-size:12px}
.tap-actions {
  display:flex;
  gap:26px;
  align-items:center;
  flex-wrap:wrap}
.tap-hero {
  margin-top:var(--nav-h);
  padding:58px 24px 24px;
  text-align:center;
  background:radial-gradient(ellipse at 50% 60%,#fff 35%,#f8f9fb 85%);
  overflow:hidden;
  position:relative}
.hero-copy {
  position:relative;
  z-index:1}
.tap-hero h1 {
  font-size:clamp(56px,7.5vw,100px);
  letter-spacing:-.065em;
  margin:16px 0 10px;
  line-height:1.05;
  font-weight:650}
.tap-tagline {
  font-size:clamp(20px,2.5vw,30px);
  font-weight:400;
  letter-spacing:-.03em}
.tap-hero .tap-actions {
  justify-content:center;
  margin-top:25px}
.tap-status {
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--gray);
  font-size:11px}
.tap-hero-image {
  display:block;
  width:min(690px,85vw);
  margin:15px auto -4px}
.tap-hero-image img {
  width:100%;
  height:auto}
.hero-foot {
  display:flex;
  justify-content:center;
  gap:38px;
  padding:15px 0 7px;
  color:#75797e;
  font-size:10px;
  letter-spacing:.015em}
.hero-fallback {
  padding:130px 24px}
.hero-fallback h1 {
  max-width:1000px;
  margin:25px auto 40px;
  font-size:60px}
.product-intro {
  padding-block:80px 50px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px}
.product-intro h2 {
  font-size:clamp(28px,3.2vw,42px);
  margin-top:14px;
  max-width:650px}
.status {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:30px;
  padding:5px 10px;
  background:#edf0f3;
  color:#59616a;
  font-size:10px;
  font-weight:600;
  line-height:1.5;
  white-space:nowrap}
.status::before {
  content:none}
.status--application,.status--public,.status--reviewing {
  background:#edf3fc;
  color:#004698}
.status--approved,.status--active,.status--available {
  background:#edf7ef;
  color:#247440}
.status--pending,.status--preorder {
  background:#fff5df;
  color:#865c14}
.status--rejected,.status--disabled {
  background:#fbeeee;
  color:#a24242}
.badge-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap}
.portal-page {
  padding-top:calc(var(--nav-h) + 64px);
  padding-bottom:90px;
  min-height:66vh}
.page-heading {
  margin-bottom:50px;
  max-width:870px}
.page-heading h1 {
  font-size:clamp(40px,5vw,64px);
  letter-spacing:-.05em;
  margin:18px 0}
.page-heading h2 {
  font-size:clamp(36px,4vw,52px);
  letter-spacing:-.045em;
  margin:16px 0}
.page-heading>p {
  font-size:20px;
  color:var(--gray);
  max-width:640px}
.product-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.product-card {
  background:var(--bg-alt);
  border-radius:24px;
  padding:34px 36px;
  display:flex;
  flex-direction:column;
  overflow:hidden}
.product-card h2 {
  font-size:32px;
  margin:12px 0}
.product-card-copy>p {
  font-size:15px;
  color:var(--gray);
  max-width:420px;
  margin-bottom:18px;
  min-height:46px}
.product-card-image {
  height:325px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:25px 0}
.product-card-image img {
  max-height:100%;
  width:100%;
  object-fit:contain;
  transition:transform .5s}
.product-card-image:hover img {
  transform:scale(1.025)}
.product-subnav {
  margin-top:var(--nav-h);
  border-bottom:1px solid var(--line-2);
  background:rgba(255,255,255,.95);
  position:sticky;
  top:var(--nav-h);
  z-index:30}
.product-subnav>.container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:58px}
.product-subnav strong {
  font-size:16px;
  letter-spacing:-.04em}
.product-subnav .container>div {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:12px}
.product-stage {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:30px;
  align-items:center;
  padding-block:88px 105px;
  min-height:600px}
.product-stage h1 {
  font-size:clamp(45px,5.6vw,72px);
  letter-spacing:-.055em;
  margin:20px 0}
.product-stage-copy>p {
  font-size:19px;
  line-height:1.5;
  color:var(--gray);
  max-width:440px}
.product-stage .badge-row {
  margin:22px 0}
.product-stage .tap-actions {
  margin-top:28px}
.product-stage-image {
  width:100%}
.availability {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:36px;
  padding-top:22px;
  border-top:1px solid var(--line-2);
  max-width:470px}
.availability dt {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gray);
  margin-bottom:8px}
.availability dd {
  font-size:12px}
.story-section {
  padding-block:90px}
.story-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.story-card {
  position:relative;
  border-radius:24px;
  overflow:hidden;
  min-height:600px;
  background:#010814}
.story-card img {
  height:100%;
  width:100%;
  object-fit:cover}
.story-card>div {
  position:absolute;
  inset:36px 36px auto}
.story-card h3 {
  font-size:32px;
  max-width:360px;
  color:#fff;
  letter-spacing:-.035em}
.story-card p {
  font-size:14px;
  max-width:380px;
  margin-top:18px;
  line-height:1.65;
  color:#c0ccda}
.sdk-band {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding-block:100px}
.sdk-band h2 {
  font-size:clamp(36px,4vw,52px);
  letter-spacing:-.04em;
  margin:20px 0}
.sdk-band p {
  color:var(--gray);
  font-size:18px;
  margin-bottom:30px}
.code-art {
  border-radius:28px;
  background:#f3f6fb;
  min-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  gap:25px}
.code-art>b {
  font:500 110px/1 monospace;
  letter-spacing:-.1em}
.code-art>span {
  font:10px monospace;
  letter-spacing:.1em}
.early-access {
  text-align:center;
  background:var(--bg-alt);
  padding:90px 24px}
.early-access h2 {
  font-size:clamp(32px,4vw,50px);
  margin:20px 0}
.early-access p {
  max-width:660px;
  margin:0 auto 28px;
  color:var(--gray);
  font-size:17px}
.developer-hero {
  padding:calc(var(--nav-h) + 75px) 24px 60px;
  text-align:center;
  background:#f4f6fa}
.developer-hero h1 {
  font-size:clamp(44px,6vw,76px);
  max-width:800px;
  margin:25px auto;
  letter-spacing:-.055em}
.developer-hero p {
  max-width:670px;
  margin:auto;
  color:var(--gray);
  font-size:18px}
.developer-symbol {
  font:300 clamp(85px,13vw,165px)/1.1 monospace;
  color:#cedaea;
  letter-spacing:-.1em;
  margin:38px auto}
.developer-symbol span {
  color:#004698}
.developer-note {
  font-size:12px!important;
  max-width:600px!important}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:55px}
.step-number {
  color:#8ca3c0;
  font-size:12px;
  font-weight:600}
.steps h2 {
  font-size:22px;
  margin:20px 0 12px;
  line-height:1.15}
.steps p {
  font-size:15px;
  color:var(--gray);
  line-height:1.65}
.sdk-list {
  margin-top:80px}
.sdk-list article {
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  padding:32px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px}
.sdk-list h2 {
  font-size:30px;
  margin:12px 0 16px}
.account-entry {
  padding-top:calc(var(--nav-h) + 60px);
  padding-bottom:85px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:90px;
  align-items:center;
  min-height:80vh}
.account-intro h1 {
  font-size:clamp(42px,5vw,64px);
  letter-spacing:-.055em;
  max-width:540px;
  margin:20px 0}
.account-intro p {
  color:var(--gray);
  font-size:18px;
  max-width:420px}
.account-intro img {
  width:90%;
  margin-top:30px}
.account-form {
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:20px;
  padding:34px;
  display:flex;
  flex-direction:column;
  gap:20px;
  font-size:14px}
.account-form h2 {
  font-size:25px;
  margin-bottom:3px}
.account-form h1 {
  font-size:32px;
  letter-spacing:-.04em}
.account-form .field {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:7px}
.account-form label {
  font-size:12px;
  font-weight:550;
  color:var(--ink)}
.account-form input,.account-form select,.account-form textarea {
  font:inherit;
  background:#fafbfc;
  border:1px solid #dce0e6;
  border-radius:9px;
  padding:12px 13px;
  width:100%;
  min-height:44px;
  color:var(--ink);
  outline-offset:2px}
.account-form input:focus,.account-form select:focus,.account-form textarea:focus {
  background:#fff;
  outline:2px solid #00469833;
  border-color:var(--blue)}
.account-form textarea {
  resize:vertical}
.account-form small {
  color:var(--gray);
  font-size:11px}
.account-form [data-company-fields] {
  display:grid;
  gap:20px}
.account-form [data-company-fields][hidden] {
  display:none}
.form-foot {
  font-size:12px;
  text-align:center;
  color:var(--gray);
  line-height:1.8}
.form-foot a {
  color:var(--blue)}
.account-form .btn {
  width:100%}
.form-alert {
  font-size:13px;
  line-height:1.6;
  margin:0 0 10px;
  border-radius:10px;
  padding:13px 16px}
.form-alert--err {
  background:#fff1ee;
  color:#993e2c}
.form-alert--ok {
  background:#eff7f1;
  color:#24643a}
.centered-form {
  max-width:470px;
  margin:20px auto}
.account-identity {
  display:flex;
  flex-direction:column;
  gap:6px}
.application-kind {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px}
.account-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:38px}
.account-heading h1 {
  font-size:42px;
  letter-spacing:-.045em;
  margin:14px 0}
.account-heading p {
  font-size:13px}
.verify-banner {
  background:#f0f4fb;
  border:1px solid #dde6f3;
  border-radius:16px;
  padding:26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  margin-bottom:35px}
.verify-banner h2 {
  font-size:19px}
.verify-banner p {
  font-size:13px;
  color:var(--gray);
  margin-top:8px}
.account-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:30px;
  align-items:start}
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:20px}
.section-title h2 {
  font-size:23px}
.section-title h3 {
  font-size:23px;
  margin-top:9px}
.profile-form {
  background:#fafbfc;
  padding:28px}
.profile-form input,.profile-form select {
  background:#fff}
.empty-state {
  padding:50px 28px;
  border:1px dashed #d5dde8;
  border-radius:18px;
  text-align:center;
  color:var(--gray);
  font-size:15px}
.empty-state h3 {
  font-size:24px;
  color:var(--ink);
  max-width:420px;
  margin:auto}
.empty-state p {
  font-size:14px;
  line-height:1.7;
  margin:15px auto 25px;
  max-width:430px}
.empty-state .text-link {
  margin:15px}
.empty-symbol {
  font-size:35px;
  color:var(--blue);
  margin-bottom:25px}
.application-card {
  padding:25px;
  border:1px solid var(--line-2);
  border-radius:16px;
  margin-bottom:18px}
.application-purpose {
  font-size:14px;
  line-height:1.7;
  margin:15px 0;
  overflow-wrap:anywhere}
.review-note {
  background:#f5f7fb;
  border-radius:10px;
  padding:18px;
  font-size:13px;
  margin:18px 0;
  overflow-wrap:anywhere}
.review-note p {
  margin-top:8px}
.application-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:start;
  margin-top:35px}
.application-layout .page-heading>img {
  margin:30px 0;
  max-height:290px;
  object-fit:contain}
.footer {
  background:#f7f8fa}
.footer__brand .brand {
  margin-bottom:4px}
.footer__col h5 {
  font-size:12px}
.footer__col a {
  font-size:12px}
.wa-fab {
  width:44px;
  height:44px;
  bottom:22px;
  right:22px;
  box-shadow:0 4px 16px #0001}
.wa-fab i {
  font-size:23px}

@media(min-width:1600px) {
  .tap-hero-image {
  width:760px}
}

@media(max-width:1050px) {
  .nav__inner {
  gap:22px}
.nav__links {
  gap:0}
.nav__actions {
  gap:14px}
.account-link span {
  display:none}
.account-entry {
  gap:45px}
.story-card {
  min-height:500px}
.story-card>div {
  inset:26px 24px auto}
.story-card h3 {
  font-size:27px}
.story-card p {
  font-size:13px}
.application-layout {
  gap:40px}
.sdk-band {
  gap:40px}
}

@media(max-width:820px) {
  .nav__links {
  display:none}
.nav__burger {
  display:flex}
.nav__inner {
  gap:15px}
.brand-svg {
  width:119px;
  height:22px}
.tap-hero {
  padding-top:48px}
.tap-hero-image {
  width:min(620px,100%);
  margin-top:30px}
.hero-foot {
  gap:15px;
  flex-wrap:wrap;
  font-size:9px}
.product-intro {
  padding-block:55px 25px}
.product-intro .text-link {
  flex-shrink:0;
  font-size:12px}
.product-stage {
  padding-block:45px 55px;
  grid-template-columns:1fr}
.product-stage-copy {
  text-align:center}
.product-stage-copy>p {
  margin:auto}
.product-stage .badge-row,.product-stage .tap-actions {
  justify-content:center}
.availability {
  margin-inline:auto;
  text-align:left}
.product-stage-image {
  max-width:580px;
  margin:auto}
.product-subnav .container>div {
  gap:16px}
.product-subnav .container>div>a:first-child {
  display:none}
.account-entry {
  grid-template-columns:1fr;
  padding-top:calc(var(--nav-h) + 40px);
  max-width:600px;
  gap:30px}
.account-intro img {
  display:none}
.account-intro h1 {
  font-size:42px}
.account-intro p {
  font-size:16px}
.account-form {
  padding:26px}
.account-grid {
  grid-template-columns:1fr}
.verify-banner {
  align-items:flex-start;
  flex-direction:column}
.profile-form {
  max-width:none}
.product-card {
  padding:25px}
.product-card h2 {
  font-size:27px}
.product-card-image {
  height:220px}
.product-card-copy p {
  font-size:13px}
.product-subnav {
  position:static}
.steps {
  gap:30px}
.steps h2 {
  font-size:20px}
.sdk-band {
  padding-block:65px}
.sdk-band p {
  font-size:15px}
.code-art {
  min-height:260px}
.code-art>b {
  font-size:80px}
.story-section {
  padding-block:65px}
.story-card {
  min-height:480px}
.story-grid {
  gap:16px}
.story-card h3 {
  font-size:25px}
.story-card p {
  font-size:12px}
.story-card>div {
  inset:24px 20px auto}
.application-layout {
  grid-template-columns:1fr;
  gap:15px}
.application-layout .page-heading img {
  display:none}
.application-layout .page-heading {
  margin-bottom:15px}
}

@media(max-width:560px) {
  .portal-page {
  padding-top:calc(var(--nav-h) + 40px);
  padding-bottom:60px}
.tap-hero h1 {
  font-size:56px}
.tap-tagline {
  font-size:20px}
.tap-hero .tap-actions {
  gap:18px}
.tap-actions .btn {
  font-size:12px;
  padding:11px 20px}
.tap-actions .text-link {
  font-size:13px}
.tap-status {
  font-size:10px}
.tap-hero-image {
  width:112%;
  max-width:none;
  margin:28px -6% 5px}
.hero-foot {
  gap:8px;
  flex-direction:column}
.product-intro {
  align-items:start;
  flex-direction:column;
  gap:20px}
.product-grid,.story-grid,.sdk-band,.steps {
  grid-template-columns:1fr}
.product-card-image {
  height:270px}
.story-card {
  min-height:unset;
  height:570px}
.story-card img {
  object-fit:cover}
.story-card>div {
  inset:30px 26px auto}
.story-card h3 {
  font-size:30px}
.story-card p {
  font-size:13px}
.sdk-band {
  gap:35px}
.steps {
  gap:35px}
.steps article {
  padding-bottom:25px;
  border-bottom:1px solid var(--line-2)}
.steps h2 {
  margin-top:12px}
.sdk-list {
  margin-top:25px}
.sdk-list article {
  align-items:start;
  flex-direction:column}
.account-heading {
  align-items:flex-start}
.account-heading h1 {
  font-size:30px;
  overflow-wrap:anywhere}
.account-heading p {
  font-size:11px;
  overflow-wrap:anywhere}
.account-heading .btn {
  padding:8px 12px;
  font-size:11px;
  white-space:nowrap}
.account-form {
  border-radius:15px;
  padding:24px}
.account-entry {
  padding-inline:20px}
.section-title {
  align-items:flex-start}
.section-title h2 {
  font-size:20px}
.section-title .text-link {
  font-size:11px!important}
.application-card .section-title {
  flex-direction:column;
  gap:12px}
.early-access {
  padding:60px 20px}
.product-subnav strong {
  font-size:14px}
.page-heading h1 {
  font-size:40px}
.page-heading>p {
  font-size:17px}
.product-stage h1 {
  font-size:54px}
.product-stage-copy>p {
  font-size:17px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  animation:none!important;
  transition:none!important}
.reveal {
  opacity:1!important;
  transform:none!important}
}


.captcha-message {
  font-size:12px;
  line-height:1.6;
  color:#6e6e73;
  flex-basis:100%;
  margin:8px 0}
.turnstile-slot:empty {
  display:none}
.turnstile-slot {
  max-width:100%;
  grid-column:1/-1}
.captcha-message[hidden] {
  display:none}
form[aria-busy=true] button[type=submit] {
  opacity:.65;
  cursor:wait}


.tap-hero-image img {
  mix-blend-mode:multiply}

/* The company remains software-led;
   hardware is one secondary feature. */
.company-hero {
  padding-top:calc(var(--nav-h) + 95px);
  padding-bottom:75px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:65px;
  align-items:center;
  overflow:visible}
.company-hero h1 {
  font-size:clamp(42px,4.5vw,63px);
  line-height:1.06;
  letter-spacing:-.045em;
  margin:23px 0}
.company-hero h1 span {
  color:var(--blue)}
.company-hero-copy>p {
  font-size:17px;
  color:var(--gray);
  line-height:1.65;
  max-width:530px}
.company-hero .tap-actions {
  margin-top:30px;
  gap:24px}
.company-hero-copy>.company-note {
  font-size:11px;
  margin-top:25px}
.software-preview {
  display:block;
  border:1px solid #e2e7ee;
  border-radius:15px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 60px -20px #17365720;
  transform:perspective(1200px) rotateY(-5deg);
  transition:transform .4s}
.software-preview:hover {
  transform:perspective(1200px) rotateY(0)}
.software-caption {
  padding:14px 17px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.02em;
  border-bottom:1px solid #edf0f3;
  background:#fafbfd}
.software-caption>span:last-child {
  margin-left:auto}
.software-dot {
  width:6px;
  height:6px;
  background:#004698;
  border-radius:100%}
.software-preview img {
  width:100%}
.business-pillars {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
  padding-bottom:35px}
.business-pillars>a {
  display:flex;
  gap:14px;
  align-items:center;
  border-top:1px solid #e1e6ed;
  padding:25px 0}
.business-pillars>a>span {
  font-size:10px;
  color:#9aa7b7;
  align-self:flex-start;
  margin-top:4px}
.business-pillars>a>div {
  flex:1}
.business-pillars b {
  font-size:14px;
  font-weight:600}
.business-pillars p {
  font-size:12px;
  color:var(--gray);
  margin-top:6px}
.hardware-feature {
  padding-block:clamp(36px,5vw,64px)}
.hardware-feature-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
  background:#f6f7f9;
  border-radius:24px;
  padding:35px 60px}
.hardware-feature h2 {
  font-size:38px;
  letter-spacing:-.04em;
  margin:18px 0 12px}
.hardware-feature p {
  font-size:18px;
  color:var(--gray)}
.hardware-feature .badge-row {
  margin:18px 0 20px}
.hardware-feature-art {
  display:block;
  height:260px}
.hardware-feature-art img {
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:multiply}
.hardware-feature .micro-label {
  font-size:9px}

@media(max-width:1000px) {
  .company-hero {
  gap:35px;
  padding-top:calc(var(--nav-h) + 65px)}
.company-hero h1 {
  font-size:47px}
.company-hero-copy>p {
  font-size:15px}
.company-hero .tap-actions {
  gap:17px}
.hardware-feature-inner {
  padding:30px 35px}
.business-pillars {
  gap:20px}
.business-pillars b {
  font-size:12px}
}

@media(max-width:760px) {
  .company-hero {
  grid-template-columns:1fr;
  padding-top:calc(var(--nav-h) + 48px);
  gap:40px;
  padding-bottom:40px}
.company-hero h1 {
  font-size:48px}
.company-hero-copy {
  max-width:570px}
.software-preview {
  transform:none}
.business-pillars {
  grid-template-columns:1fr;
  gap:0}
.business-pillars>a {
  padding:19px 0}
.business-pillars b {
  font-size:14px}
.hardware-feature-inner {
  grid-template-columns:1fr;
  padding:30px;
  gap:12px}
.hardware-feature-art {
  height:210px}
.hardware-feature h2 {
  font-size:32px}
.hardware-feature p {
  font-size:16px}
}

/* Hardware detail: full-bleed product art with alpha, never a cropped shadow plane. */
.hardware-hero {
  background:#060709;
  text-align:center;
  overflow:hidden;
  padding-top:70px;
  color:#f5f5f7}
.hardware-hero-title .micro-label {
  color:#a2afc6;
  font-size:14px;
  letter-spacing:.08em}
.hardware-hero-title h1 {
  font-size:clamp(45px,5.2vw,76px);
  letter-spacing:-.055em;
  color:#f5f5f7;
  max-width:880px;
  margin:24px auto 18px;
  padding-inline:24px}
.hardware-hero-title>p {
  font-size:13px;
  color:#9197a3}
.hardware-hero-render {
  max-width:1300px;
  margin:-25px auto -80px;
  position:relative;
  z-index:0}
.hardware-hero-render img {
  width:100%;
  height:auto;
  display:block;
  filter:none;
  mix-blend-mode:normal}
.hardware-hero-bottom {
  position:relative;
  z-index:1;
  padding:0 24px 65px}
.hardware-hero-bottom .badge-row,.hardware-hero-bottom .tap-actions {
  justify-content:center}
.hardware-hero-bottom .badge-row {
  margin-bottom:20px}
.hardware-hero-bottom .status {
  background:#202329;
  color:#b5bdcb}
.hardware-hero-bottom .text-link {
  color:#a9c9f5}
.hardware-hero-bottom>p {
  font-size:11px;
  color:#808793;
  margin-top:21px}
.hardware-release-note {
  display:flex;
  flex-direction:column;
  gap:6px}
.text-link>.fa-solid {
  margin-left:.35em;
  font-size:.8em}
.hardware-design {
  background:#000;
  color:#fff;
  overflow:hidden;
  padding-top:65px}
.hardware-design .micro-label {
  color:#8d98ac}
.hardware-design h2 {
  font-size:clamp(46px,6.3vw,88px);
  letter-spacing:-.055em;
  color:#f5f5f7;
  margin:24px 0;
  line-height:1.02}
.hardware-design p {
  font-size:20px;
  line-height:1.5;
  color:#8f98a7;
  max-width:440px}
.profile-render {
  width:min(100%,1500px);
  margin:-70px auto -10px}
.hardware-highlights {
  padding-block:110px 80px}
.hardware-highlights .section-title {
  margin-bottom:38px}
.hardware-highlights .section-title h2 {
  font-size:44px;
  letter-spacing:-.045em}
.hardware-highlights .section-title>span {
  font-size:11px;
  color:var(--gray)}
.hardware-panels {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px}
.hardware-panel {
  border-radius:26px;
  background:#f5f5f7;
  overflow:hidden;
  min-height:580px;
  position:relative}
.hardware-panel>div {
  position:relative;
  z-index:1;
  padding:40px 40px 0}
.hardware-panel h3 {
  font-size:48px;
  letter-spacing:-.04em;
  margin:15px 0}
.hardware-panel p {
  color:var(--gray);
  font-size:16px;
  max-width:300px}
.hardware-panel>img {
  width:100%;
  margin-top:-30px}
.nfc-panel>img {
  width:88%;
  margin:0 auto -55px}
.usb-panel {
  background:#e9edf3}
.usb-panel>img {
  max-width:none;
  width:140%;
  margin:80px -20% 0}
.hardware-specs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  padding-block:35px 95px;
  border-bottom:1px solid var(--line-2)}
.hardware-specs h2 {
  font-size:36px;
  letter-spacing:-.04em}
.hardware-specs dl>div {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  border-top:1px solid var(--line-2);
  padding:20px 0;
  font-size:13px}
.hardware-specs dt {
  color:var(--gray)}
.hardware-specs dd {
  font-weight:500}
.sdk-product-art {
  position:relative;
  background:#f5f6f8;
  border-radius:28px;
  overflow:hidden;
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center}
.sdk-product-art img {
  height:110%;
  width:auto;
  transform:rotate(-18deg);
  opacity:.9}
.sdk-product-art>span {
  position:absolute;
  bottom:24px;
  left:30px;
  font:14px monospace;
  color:#004698}
.product-card-image img,.account-intro img,.application-layout .page-heading>img {
  mix-blend-mode:multiply}
.product-card-image img.hwd-app-icon,
.product-stage-image.hwd-app-icon {
  aspect-ratio:1;
  border-radius:22%;
  object-fit:cover;
  mix-blend-mode:normal;
  box-shadow:0 16px 40px -20px rgba(7,28,58,.18)}
.product-card-image img.hwd-app-icon {
  height:min(100%,280px);
  width:auto;
  max-width:100%}
.product-stage-image.hwd-app-icon {
  width:min(80%,360px);
  height:auto;
  justify-self:center}

@media(max-width:820px) {
  .hardware-hero {
  padding-top:48px}
.hardware-hero-render {
  margin:0 auto -45px;
  width:110%;
  max-width:none;
  left:-5%}
.hardware-design h2 {
  font-size:64px}
.profile-render {
  margin:-20px auto 0;
  max-width:none;
  width:120%;
  margin-left:-10%}
.hardware-highlights {
  padding-block:65px}
.hardware-highlights .section-title h2 {
  font-size:34px}
.hardware-panel>div {
  padding:28px 25px 0}
.hardware-panel h3 {
  font-size:35px}
.hardware-panel p {
  font-size:14px}
.hardware-panel {
  min-height:430px}
.hardware-specs {
  gap:30px}
.sdk-product-art {
  height:300px}
}

@media(max-width:560px) {
  .hardware-hero-title h1 {
  font-size:43px;
  margin:20px auto;
  max-width:380px}
.hardware-hero-title>p {
  font-size:11px}
.hardware-hero-render {
  width:160%;
  left:-30%;
  margin:5px auto -10px}
.hardware-hero-bottom {
  padding-bottom:45px}
.hardware-hero-bottom>p {
  font-size:10px}
.hardware-design {
  padding-top:35px}
.hardware-design h2 {
  font-size:46px}
.hardware-design p {
  font-size:16px;
  max-width:300px}
.profile-render {
  width:160%;
  margin-left:-30%;
  margin-top:0}
.hardware-panels {
  grid-template-columns:1fr}
.hardware-panel {
  min-height:520px}
.hardware-panel>div {
  padding:33px 30px 0}
.hardware-panel h3 {
  font-size:42px}
.usb-panel>img {
  margin-top:50px}
.hardware-highlights .section-title {
  align-items:center}
.hardware-highlights .section-title h2 {
  font-size:32px;
  max-width:250px}
.hardware-specs {
  grid-template-columns:1fr;
  gap:25px;
  padding-block:0 60px}
.hardware-specs h2 {
  font-size:30px}
.hardware-specs dl>div {
  font-size:12px}
.sdk-product-art {
  height:330px}
}

.hardware-hero-render {
  will-change:transform}
.hardware-hero-title {
  position:relative;
  z-index:2}
.hardware-feature-art img {
  mix-blend-mode:normal}

/* Product opening: a pinned stage driven by normal document scrolling. */
.tap-scroll,.hardware-specs {
  scroll-margin-top:58px}
.tap-scroll {
  --tap-top:calc(var(--nav-h) + 58px);
  background:#000;
  color:#f5f5f7;
  position:relative}
.tap-scroll.is-enhanced {
  height:calc(330vh - var(--tap-top));
  height:calc(100svh + 230svh - var(--tap-top))}
.tap-scroll-stage {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  min-height:620px;
  height:calc(100vh - var(--tap-top));
  height:calc(100svh - var(--tap-top));
  max-height:1100px;
  padding:32px 24px 22px;
  text-align:center;
  overflow:hidden}
.tap-scroll.is-enhanced .tap-scroll-stage {
  position:sticky;
  top:var(--tap-top);
  min-height:0;
  max-height:none}
.tap-scroll-heading {
  position:relative;
  z-index:1}
.tap-scroll-heading .micro-label {
  color:#a2afc6;
  font-size:12px;
  letter-spacing:.12em}
.tap-scroll-heading h1 {
  font-size:clamp(32px,4.1vw,62px);
  line-height:1.06;
  letter-spacing:-.05em;
  color:inherit;
  margin:13px auto 12px;
  max-width:950px}
.tap-scroll-art {
  position:relative;
  width:100%;
  min-height:0;
  max-width:1400px;
  overflow:hidden;
  margin:0 auto}
.tap-scroll-art img,.tap-scroll-art video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:block}
.tap-scroll-art img,.tap-scroll-art video {
  transform:scale(1.32) translateY(-4%);
  transform-origin:center}
.tap-scroll-art video {
  pointer-events:none;
  visibility:hidden}
.tap-scroll.is-ready video {
  visibility:visible}
.tap-scroll.is-ready .tap-scroll-poster {
  visibility:hidden}
.tap-scroll-guide {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  color:#9ba1ac;
  font-size:11px}
.tap-scroll-guide [hidden] {
  display:none!important}
.tap-scroll-guide [data-tap-retry] {
  color:#a9c9f5;
  text-decoration:underline;
  text-underline-offset:3px;
  min-height:44px;
  padding:8px 0}
.tap-scroll-guide .fa-arrow-down {
  margin-inline:4px}
.tap-scroll-guide a {
  color:#a9c9f5;
  padding:8px 0}
.tap-scroll-offer {
  background:#000;
  text-align:center;
  padding-top:48px;
  padding-bottom:64px}
@media(max-width:820px) {
  .product-subnav {
    position:sticky}
  .tap-scroll-stage {
    padding:27px 18px 18px}
  .tap-scroll-heading h1 {
    max-width:600px}
}
@media(max-width:600px) {
  .tap-scroll.is-enhanced {
    height:calc(250vh - var(--tap-top));
    height:calc(250svh - var(--tap-top))}
  .tap-scroll-heading h1 {
    font-size:36px;
    max-width:355px}
  .tap-scroll-art {
    width:calc(100% + 36px);
    margin-left:-18px}
  .tap-scroll-guide {
    font-size:10px;
    gap:14px}
  .tap-scroll-guide a {
    display:inline-flex;
    align-items:center;
    min-height:44px}
}
@media(max-height:650px) and (prefers-reduced-motion:no-preference) {
  .tap-scroll.is-enhanced .tap-scroll-stage {
    padding-top:14px;
    padding-bottom:10px}
  .tap-scroll-heading h1 {
    font-size:30px;
    margin-block:7px}
  .tap-scroll-heading .micro-label {
    display:none}
}