body {
  background:#f3edfb;
  color:#362450;
  font-family:Outfit,Arial,sans-serif
}
.brand {
  color:#663cb8;
  font-weight:500;
  letter-spacing:-1.1px
}
.brand svg {
  width:32px
}
.top {
  min-height:87px
}
.top nav {
  font-size:12px;
  color:#8e7da5
}
.top nav .source-link {
  color:#634c83;
  border:1px solid #d6c5e8;
  border-radius:25px;
  padding:0 15px;
  min-height:36px
}
.hero-f {
  text-align:center;
  padding:38px 0 0
}
.hero-f .kicker {
  color:#a18ab8;
  letter-spacing:1.6px;
  font-size:9px
}
.hero-f h1 {
  font-family:Fraunces,Georgia,serif;
  font-size:67px;
  line-height:1.08;
  letter-spacing:-2.8px;
  font-weight:500;
  margin:22px auto 22px;
  max-width:900px
}
.hero-f h1 em {
  font-style:normal;
  color:#8c60be
}
.hero-f>p.sub-f {
  font-size:15px;
  color:#7a608f;
  line-height:1.8;
  max-width:545px;
  margin:0 auto
}
.translator {
  position:relative;
  display:grid;
  grid-template-columns:1fr .7fr 1fr;
  gap:34px;
  align-items:center;
  margin:38px 0 15px;
  padding:43px 37px;
  min-height:270px;
  border-radius:22px;
  background:#e8ddf5;
  border:1px solid #e1d2ee
}
.translator:before {
  content:'';
  position:absolute;
  left:20%;
  right:20%;
  height:0;
  top:50%;
  transform:translateY(-50%);
  border-top:2px dashed #c2aedb;
  z-index:0
}
.sample-panel {
  position:relative;
  background:#faf8fe;
  border:1px solid #ddd0ed;
  border-radius:11px;
  padding:22px 23px;
  text-align:left;
  min-width:0;
  z-index:1;
  box-shadow:0 8px 25px #603a9308
}
.sample-panel .panel-label {
  font-size:8px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#87709b;
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
  gap:8px
}
.sample-panel .panel-label svg {
  width:12px;
  height:12px
}
.bytes {
  display:flex;
  gap:8px;
  justify-content:center;
  margin:24px 0 18px
}
.byte {
  font:19px monospace;
  color:#8b70ad;
  padding:13px 10px;
  border-radius:6px;
  background:#eee6f8;
  border:1px solid #dfd0ef;
  min-width:0
}
.byte.exponent {
  background:#efe5d9;
  color:#a68c6c;
  border-color:#e9dac5
}
.sample-panel .panel-note {
  font-size:9px;
  line-height:1.7;
  color:#8b749f;
  min-height:30px
}
.translation-core {
  position:relative;
  z-index:1;
  --orb-size:115px;
  align-self:stretch;
  display:grid;
  place-items:center
}
.translation-caption {
  position:absolute;
  top:calc(50% + var(--orb-size) / 2 + 28px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  width:max-content
}
.translation-core .brand-orb {
  width:var(--orb-size);
  height:var(--orb-size);
  background:#7750ba;
  box-shadow:0 0 0 12px #f3edfb,0 0 0 13px #dbcaee;
  color:#f3edfb;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:0;
  transition:transform .25s
}
.brand-orb svg {
  width:62px;
  height:62px
}
.translation-core b {
  font-size:14px;
  font-weight:500;
  color:#79579e;
  margin-top:0
}
.translation-core span {
  font-size:8px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#b7a1ca
}
.sample-panel.output {
  background:#f7f9e9;
  border-color:#d7dfbd
}
.output .panel-label {
  color:#9aa681
}
.weight-reading {
  font-family:Fraunces,Georgia,serif;
  font-size:68px;
  letter-spacing:-4px;
  color:#637943;
  line-height:1.1;
  margin:20px 0 17px;
  text-align:center
}
.weight-reading span {
  font:16px Outfit,Arial,sans-serif;
  color:#9baa81;
  letter-spacing:0;
  margin-left:6px
}
.output .panel-note {
  color:#9aa67e
}
.demo-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:21px;
  margin:17px 0 0;
  flex-wrap:wrap
}
.demo-controls label {
  font-size:11px;
  color:#7b6190
}
.demo-controls select {
  border:1px solid #d6c4e7;
  border-radius:20px;
  background:#f6f1fc;
  font-size:11px;
  color:#9272ac;
  min-height:36px;
  padding:0 30px 0 13px
}
.demo-controls button {
  border:0;
  min-height:36px;
  border-radius:22px;
  padding:0 15px;
  background:#d9c6ef;
  font-size:11px;
  color:#6b458a
}
.demo-controls .selected-sample {
  font-size:9px;
  color:#7b6190
}
.demo-note {
  font-size:9px;
  color:#8d76a0;
  line-height:1.7;
  margin-top:15px;
  text-align:center
}
.hero-f .btn {
  background:#7047ac;
  color:#fff;
  border-radius:25px;
  margin:26px 0 40px;
  font-size:12px;
  padding:0 23px;
  gap:25px
}
.proof-f {
  border-top:1px solid #dfd1eb;
  border-bottom:1px solid #dfd1eb;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:65px;
  padding:22px 0;
  font-size:11px;
  color:#a389b8
}
.proof-f b {
  font-weight:500;
  color:#897099
}
.explanation-f {
  padding:65px 0;
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:90px
}
.explanation-f h2 {
  font-family:Fraunces,Georgia,serif;
  font-size:39px;
  font-weight:500;
  letter-spacing:-1.2px;
  line-height:1.2
}
.explanation-f p {
  font-size:14px;
  line-height:1.9;
  color:#7c6390
}
.explanation-f p+p {
  margin-top:17px
}
.device-section-f {
  background:#ede3f7;
  padding:46px 0 55px
}
.device-section-f .section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:30px
}
.device-section-f h2 {
  font-family:Fraunces,Georgia,serif;
  font-size:36px;
  letter-spacing:-1px;
  font-weight:500
}
.device-section-f .section-heading p {
  font-size:11px;
  color:#ac92bf;
  line-height:1.8;
  max-width:300px
}
.device-bubbles {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px
}
.device-bubble {
  text-align:center;
  min-width:0;
  display:block
}
.bubble-art {
  border:1px solid #e3d7ec;
  border-radius:50%;
  width:150px;
  height:150px;
  background:#f7f1fc;
  display:grid;
  place-items:center;
  margin:0 auto 16px;
  transition:background .2s
}
.device-bubble:hover .bubble-art {
  background:#fff
}
.bubble-art .hardware {
  width:155px;
  height:116px
}
.device-bubble h3 {
  font-size:15px;
  font-weight:500;
  color:#8a68a4;
  letter-spacing:-.2px
}
.device-bubble p {
  font-size:9px;
  color:#b29bc4;
  line-height:1.8;
  margin-top:5px
}
.device-bubble span {
  font-size:8px;
  color:#a78bb9;
  display:block;
  margin-top:7px
}
.start-f {
  padding:55px 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px
}
.start-f .kicker {
  color:#ac92bf;
  font-size:9px;
  margin-bottom:17px
}
.start-f h2 {
  font-family:Fraunces,Georgia,serif;
  font-size:30px;
  font-weight:500;
  letter-spacing:-.7px;
  line-height:1.2
}
.start-f p {
  font-size:12px;
  color:#7c6390;
  line-height:1.9;
  margin:16px 0
}
.start-f code {
  display:block;
  background:#e9ddf4;
  border:1px solid #dccae9;
  border-radius:8px;
  padding:17px;
  font:11px monospace;
  color:#a084b8
}
.join-f {
  border:1px solid #d8c5e8;
  border-radius:16px;
  text-align:center;
  padding:36px 20px 31px;
  margin-bottom:47px;
  background:#eee4f8
}
.join-f h2 {
  font-family:Fraunces,Georgia,serif;
  font-size:35px;
  font-weight:500;
  letter-spacing:-1px;
  line-height:1.2
}
.join-f p {
  font-size:12px;
  color:#7b6190;
  line-height:1.9;
  max-width:550px;
  margin:16px auto
}
.join-f .btn {
  border-radius:25px;
  background:#7047ac;
  color:#fff;
  font-size:12px
}
.foot {
  border-top:1px solid #ddcde9;
  color:#ac91c1
}
.foot .brand {
  font-size:22px
}
.foot .brand svg {
  height:27px;
  width:27px
}
@media(max-width:1050px) and (min-width:751px) {
  .translator {
  gap:20px;
  padding:35px 20px;
  grid-template-columns:1fr .55fr 1fr
}
.byte {
  font-size:16px;
  padding:10px 7px
}
.sample-panel {
  padding:18px
}
.translation-core {
  --orb-size:90px
}
.brand-orb svg {
  height:50px;
  width:50px
}
.bubble-art {
  width:115px;
  height:115px
}
.bubble-art .hardware {
  width:125px;
  height:95px
}
.proof-f {
  gap:35px
}

}
@media(max-width:750px) {
  .hero-f {
  padding:26px 0 0
}
.hero-f h1 {
  font-size:44px;
  letter-spacing:-1.8px;
  line-height:1.12;
  margin:20px auto
}
.hero-f>p.sub-f {
  font-size:13px;
  max-width:320px
}
.hero-f .kicker {
  font-size:8px;
  letter-spacing:1.3px
}
.translator {
  grid-template-columns:1fr;
  gap:27px;
  margin:29px 0 15px;
  padding:23px 23px 26px;
  border-radius:17px
}
.translator:before {
  left:50%;
  right:auto;
  top:20%;
  bottom:20%;
  width:0;
  height:auto;
  border-top:0;
  border-left:2px dashed #c2aedb;
  transform:translateX(-50%)
}
.sample-panel {
  padding:19px 21px;
  max-width:320px;
  width:100%;
  justify-self:center
}
.sample-panel .panel-label {
  margin-bottom:14px
}
.bytes {
  margin:19px 0 14px
}
.byte {
  font-size:20px;
  padding:12px 10px;
  flex:1;
  text-align:center
}
.sample-panel .panel-note {
  min-height:0;
  font-size:8px
}
.translation-core {
  --orb-size:77px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px
}
.translation-caption {
  position:static;
  gap:6px
}
.translation-core .brand-orb {
  width:77px;
  height:77px;
  box-shadow:0 0 0 8px #f3edfb,0 0 0 9px #dbcaee;
  margin:4px 0
}
.brand-orb svg {
  width:43px;
  height:43px
}
.translation-core b {
  font-size:12px
}
.translation-core span {
  font-size:7px
}
.weight-reading {
  font-size:60px;
  margin:15px 0 10px
}
.demo-controls {
  gap:10px 16px
}
.demo-controls label {
  font-size:10px
}
.demo-controls select {
  font-size:10px
}
.demo-controls .selected-sample {
  width:100%;
  font-size:8px
}
.demo-note {
  font-size:8px;
  max-width:300px;
  margin:13px auto 0
}
.hero-f .btn {
  margin:23px 0 29px;
  gap:20px;
  width:100%
}
.proof-f {
  flex-wrap:wrap;
  gap:15px 25px;
  font-size:9px;
  padding:20px 0
}
.explanation-f {
  grid-template-columns:1fr;
  gap:24px;
  padding:38px 0
}
.explanation-f h2 {
  font-size:32px;
  max-width:300px
}
.explanation-f p {
  font-size:12px
}
.device-section-f {
  padding:35px 0
}
.device-section-f .section-heading {
  align-items:start;
  flex-direction:column;
  gap:15px
}
.device-section-f h2 {
  font-size:31px
}
.device-section-f .section-heading p {
  font-size:10px
}
.device-bubbles {
  grid-template-columns:1fr 1fr;
  gap:25px 12px
}
.bubble-art {
  height:125px;
  width:125px
}
.bubble-art .hardware {
  height:105px;
  width:145px
}
.device-bubble h3 {
  font-size:14px
}
.device-bubble:last-child {
  grid-column:1/-1
}
.start-f {
  grid-template-columns:1fr;
  gap:32px;
  padding:37px 0
}
.start-f h2 {
  font-size:29px
}
.start-f code {
  font-size:10px
}
.join-f {
  padding:28px 20px;
  margin-bottom:30px
}
.join-f h2 {
  font-size:29px
}
.join-f p {
  font-size:11px
}

}

/* Preserve the approved Translator composition with production navigation
   and the selected Open Port identity. */
.marketing .hero-f .kicker { color: #866b9d; }
.marketing .hero-f .sub-f { color: #785f8d; }
.marketing .sample-panel .panel-label { color: #8b749e; font-size: 9px; }
.marketing .sample-panel .panel-note { color: #8b749e; font-size: 11px; line-height: 1.8; }
.marketing .sample-panel.output .panel-label,
.marketing .sample-panel.output .panel-note { color: #7a895c; }
.marketing .byte { color: #76568f; }
.marketing .byte.exponent { color: #8c704f; }
.marketing .translation-core span { color: #9476ae; }
.marketing .translation-core .brand-orb svg { width: 58px; height: 58px; }
.marketing .demo-controls label { color: #8c709e; }
.marketing .demo-controls .selected-sample { font-size: 10px; color: #9277a6; }
.marketing .demo-controls select,
.marketing .demo-controls button { min-height: 44px; }
.marketing .demo-note { font-size: 10px; color: #947ca5; }
.marketing .device-bubble p { font-size: 11px; color: #977ba9; }
.marketing .device-bubble span { font-size: 10px; color: #8c6e9f; line-height: 1.8; }
.marketing .device-section-f .fine { color: #977ca9; text-align: center; margin-top: 25px; }
.marketing .bubble-art img { object-fit: contain; }
.marketing .proof-f { color: #8d729e; }
.marketing .start-f p { color: #856a96; }
.marketing .foot .brand { opacity: 1; }
.marketing .foot p { color: #856c95; opacity: 1; }
.marketing .foot > div { color: #856c95; }
.marketing .start-f code { overflow-x: auto; white-space: nowrap; }
.marketing .hero-f .btn { text-decoration: none; }

@media (max-width: 750px) {
  .marketing .translation-core .brand-orb svg { width: 40px; height: 40px; }
  .marketing .sample-panel .panel-label { font-size: 8px; }
  .marketing .sample-panel .panel-note { font-size: 10px; }
  .marketing .demo-controls .selected-sample { max-width: 300px; margin: 0 auto; font-size: 9px; }
  .marketing .device-bubble p { font-size: 10px; }
  .marketing .device-bubble span { font-size: 9px; }
  .marketing .hero-f h1 { font-size: clamp(38px, 10.8vw, 44px); }
  .marketing .foot { padding: 27px 0; }
}

/* Keep the native select interaction, with a consistently inset indicator. */
.marketing .demo-controls select {
  appearance: none;
  padding-inline: 16px 40px;
  background-image: url('/assets/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 12px;
  cursor: pointer;
}
.marketing .demo-controls select:focus-visible { outline: 3px solid #f6ab28; outline-offset: 4px; }
@media (forced-colors: active) {
  .marketing .demo-controls select { appearance: auto; background-image: none; }
}