/*
 * ELARIS LANDING PAGE — PLAIN CSS
 *
 * No framework, preprocessor, compilation or build step.
 * The sections below preserve the original cascade and responsive behavior.
 * Brand variables and light-theme tokens are in the Product Brand section.
 */

/* ==========================================================================
   1. SELF-HOSTED BRAND FONTS
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/ibm-plex-mono-400.woff') format('woff');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/ibm-plex-sans-400.woff') format('woff');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/ibm-plex-sans-600.woff') format('woff');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/ibm-plex-sans-arabic-400.woff') format('woff');
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/ibm-plex-sans-arabic-600.woff') format('woff');
}
@font-face {
  font-family: 'Kufam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/kufam-400.woff') format('woff');
}
@font-face {
  font-family: 'Kufam';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/kufam-600.woff') format('woff');
}

/* ==========================================================================
   2. PAGE FOUNDATION, ORIGINAL COMPOSITION AND MOTION
   ========================================================================== */

:root {
  --bg: #10120f;
  --surface: #1b1e1a;
  --surface-2: #22261f;
  --line: #32372e;
  --ink: #f4f5ee;
  --muted: #a5ac9f;
  --lime: #c6fe21;
  --accent: #c7bea5;
  --soft: #737e69;
  --body: Elaris, Arial, sans-serif;
  --mono: 'Elaris Mono', monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  -webkit-tap-highlight-color: transparent;
}
button,
a {
  touch-action: manipulation;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
a {
  color: inherit;
  text-decoration: none;
}
p,
h1,
h2,
h3 {
  margin: 0;
}
button {
  border: 0;
}
img {
  display: block;
  max-width: 100%;
}
svg {
  overflow: visible;
}
::selection {
  background: var(--selection-bg, #c6fe21);
  color: #191b17;
  text-shadow: none;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
input:focus-visible,
select:focus-visible {
  outline-offset: 2px;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.icon {
  display: inline-block;
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shell {
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
}
.section-space {
  padding-block: 124px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 400 10px/1.5 var(--mono);
  letter-spacing: 1.6px;
}
.section-number {
  color: var(--lime);
  margin-inline-end: 4px;
}
.muted-heading {
  color: var(--muted);
}
h2 {
  font-size: clamp(38px, 4.1vw, 62px);
  letter-spacing: -2.7px;
  font-weight: 400;
  line-height: 1.04;
}
h3 {
  font-weight: 400;
}
.lime-text {
  color: var(--lime);
}
.skip {
  position: fixed;
  top: 12px;
  inset-inline-start: 12px;
  background: var(--lime);
  color: var(--bg);
  z-index: 100;
  padding: 14px 20px;
  transform: translateY(-150%);
}
.skip:focus {
  transform: none;
}
.reading-progress {
  height: 2px;
  position: fixed;
  inset: 0 0 auto;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 80;
  pointer-events: none;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #10120fed;
  border-bottom: 1px solid #ffffff0b;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.header-inner {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: none;
}
.brand img {
  height: auto;
  width: 108px;
}
.brand > span {
  font: 9px/1.3 var(--mono);
  letter-spacing: 1px;
  color: var(--muted);
  max-width: 65px;
  padding-inline-start: 21px;
  border-inline-start: 1px solid var(--line);
}
.desktop-nav {
  display: flex;
  gap: 34px;
  margin-inline-start: auto;
  margin-inline-end: 30px;
}
.desktop-nav a,
.footer-links a {
  font-size: 13px;
  color: var(--muted);
  transition: color 0.2s;
  }
@media (hover: hover) and (pointer: fine) {
  .desktop-nav a:hover,
  .footer-links a:hover {
    color: var(--lime);
  }
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.language-control {
  display: flex;
  align-items: center;
  gap: 3px;
}
.language-control > .icon {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.language-control select {
  background: none;
  border: 0;
  color: var(--ink);
  padding: 12px 2px;
  min-height: 44px;
  font-size: 12px;
  width: 48px;
  cursor: pointer;
}
.language-control option {
  background: var(--surface);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 56px;
  padding: 17px 25px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  transition:
    background 0.25s,
    box-shadow 0.25s,
    transform 0.35s var(--ease);
  position: relative;
}
.btn-lime {
  background: var(--lime);
  color: #182010;
  box-shadow: inset 0 1px 0 #ffffff66;
  }
@media (hover: hover) and (pointer: fine) {
  .btn-lime:hover {
    background: #e8ffb1;
    box-shadow: 0 0 30px #c6fe2119;
    transform: translateY(-2px);
  }
}
.btn .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
  }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .icon {
    transform: translate(2px, -2px);
  }
}
.btn-small {
  min-height: 42px;
  padding: 12px 16px;
  gap: 18px;
  font-size: 12px;
  border-radius: 6px;
}
.icon-button {
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex: none;
  transition:
    background 0.2s,
    color 0.2s;
  }
@media (hover: hover) and (pointer: fine) {
  .icon-button:hover {
    background: var(--surface-2);
    color: var(--lime);
  }
}
.menu-toggle {
  display: none;
}
.mobile-nav {
  padding: 18px 24px 28px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.mobile-nav > a {
  display: block;
  padding: 12px 0;
}
.mobile-nav > .btn {
  margin-top: 10px;
  width: 100%;
}
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(#b0bfa805 1px, transparent 1px),
    linear-gradient(90deg, #b0bfa805 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(90deg, transparent, #000 80%);
}
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  gap: 12px;
  align-items: center;
  padding-top: 34px;
  padding-bottom: 47px;
}
.hero-copy {
  position: relative;
  z-index: 3;
  padding-block: 50px 24px;
}
.hero-copy > .eyebrow {
  color: #c1cbb6;
  margin-bottom: 35px;
  font-size: 9px;
  letter-spacing: 1.35px;
}
.status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px #c6fe2144;
  flex: none;
  position: relative;
}
.status-dot:after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--lime);
  animation: dot-pulse 3s ease-out infinite;
}
.hero h1 {
  font-size: clamp(72px, 7.5vw, 110px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -6px;
  margin-inline-start: -4px;
}
.title-line {
  display: block;
  padding-block: 2px 8px;
  overflow: hidden;
}
.title-line > span {
  display: inline-block;
  animation: title-in 1.3s var(--ease) both;
}
.title-line:nth-child(2) > span {
  animation-delay: 0.16s;
}
.hero-description {
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 415px;
  margin-top: 27px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  margin-top: 34px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 13px;
  position: relative;
  padding-block: 7px;
  line-height: 1.6;
}
.text-link > span:not(.play-icon) {
  background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
  transition: background-size 0.3s;
  }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover > span:not(.play-icon) {
    background-size: 100% 1px;
  }
}
.text-link .icon {
  width: 17px;
  height: 17px;
}
.play-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #626e56;
  border-radius: 50%;
  font-size: 8px;
  padding-inline-start: 2px;
  color: var(--lime);
}
.availability {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  margin-top: 19px;
}
.android-mark {
  width: 15px;
  height: 16px;
  display: block;
}
.android-mark svg {
  width: 100%;
  height: 100%;
  fill: var(--muted);
  stroke: var(--muted);
  stroke-width: 1.5;
}
.android-mark circle {
  fill: var(--bg);
  stroke: none;
}
.hero-bottom {
  display: flex;
  align-items: center;
  gap: 17px;
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #919c87;
  margin-top: 66px;
}
.tiny-star {
  font-size: 18px;
  color: var(--lime);
}
.hero-enter {
  animation: reveal-up 1s var(--ease) both;
  animation-delay: 0.25s;
}
.hero-description.hero-enter {
  animation-delay: 0.4s;
}
.hero-actions.hero-enter {
  animation-delay: 0.5s;
}
.availability.hero-enter {
  animation-delay: 0.6s;
}
.hero-bottom.hero-enter {
  animation-delay: 0.7s;
}
.studio {
  height: 690px;
  position: relative;
  perspective: 1200px;
  isolation: isolate;
  direction: ltr;
  --px: 0;
  --py: 0;
}
.studio-halo {
  position: absolute;
  inset: 60px 20px 40px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, #6b7c3218 0, transparent 62%);
  z-index: -1;
}
#silver-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
}
.studio-coordinate {
  position: absolute;
  z-index: 1;
  font: 8px var(--mono);
  letter-spacing: 1.2px;
  color: #78836d;
}
.coord-top {
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.coord-side {
  right: -10px;
  top: 45%;
  writing-mode: vertical-rl;
}
.phone-rig {
  position: absolute;
  top: 56px;
  left: 50%;
  width: 278px;
  margin-left: -139px;
  transform: rotateX(calc(5deg + var(--py) * -3deg)) rotateY(calc(-11deg + var(--px) * 6deg))
    rotateZ(3deg);
  transition: transform 0.6s var(--ease);
  transform-style: preserve-3d;
  animation: phone-arrive 1.8s var(--ease) both;
}
.phone {
  height: 578px;
  background: linear-gradient(
    125deg,
    #92988a 0%,
    #31362e 3%,
    #0a0c0a 8%,
    #353b30 45%,
    #7f8875 49%,
    #171b15 55%
  );
  padding: 8px;
  border-radius: 42px;
  box-shadow:
    -15px 25px 55px #0007,
    1px 1px 0 #acb49c,
    6px 0 0 #293024,
    9px 0 0 #020502;
  position: relative;
}
.phone:after {
  content: '';
  position: absolute;
  top: 106px;
  right: -10px;
  height: 49px;
  width: 3px;
  background: #6b7561;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 -45px 0 -1px #5a6550;
}
.phone-screen {
  background: #161a14;
  height: 100%;
  border: 1px solid #8c96752b;
  border-radius: 34px;
  padding: 9px 15px;
  overflow: hidden;
  position: relative;
  color: #edf0e7;
  direction: inherit;
  font-family: Elaris, Arial, sans-serif;
}
.phone-status {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  font-size: 10px;
  position: relative;
}
.phone-status > b {
  font-weight: 700;
}
.camera {
  background: #080a07;
  width: 69px;
  height: 21px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
  top: 0;
}
.camera:after {
  content: '';
  position: absolute;
  right: 11px;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #18221f;
  box-shadow: inset 0 0 2px #7aa7b5;
}
.phone-status > span:last-child {
  font-size: 8px;
  letter-spacing: -1px;
}
.battery {
  color: #c9d0bf;
  font-size: 15px;
  vertical-align: middle;
  letter-spacing: 0;
  margin-left: 3px;
}
.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 19px 0 17px;
  gap: 8px;
}
.app-top p {
  font-size: 9px;
  color: #9ba78e;
  margin-bottom: 2px;
}
.app-top h3 {
  font-size: 21px;
  letter-spacing: -0.4px;
}
.app-avatar {
  display: grid;
  place-items: center;
  border: 1px solid #525d45;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 11px;
  color: var(--lime);
}
.sales-card {
  background: var(--lime);
  color: #26321d;
  border-radius: 12px;
  padding: 14px 14px 10px;
  overflow: hidden;
  position: relative;
}
.card-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
}
.card-label .icon {
  width: 15px;
  height: 15px;
}
.sales-amount {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 41px;
  letter-spacing: -2px;
  margin-top: 10px;
  line-height: 1.1;
}
.sales-amount small {
  font-size: 12px;
  letter-spacing: 0;
}
.sales-spark {
  margin: 5px -14px 0;
  height: 49px;
}
.sales-spark svg {
  height: 100%;
  width: 100%;
  overflow: visible;
}
.chart-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: chart-draw 2.8s 1s var(--ease) forwards;
}
.sales-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  border-top: 1px solid #5b76262e;
  padding-top: 6px;
}
.sales-meta > span:last-child {
  font-size: 13px;
}
.app-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 11px;
}
.app-metrics > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 5px;
  padding: 10px;
  border: 1px solid #414b34;
  border-radius: 9px;
  background: #20261b;
}
.app-metrics .icon {
  width: 14px;
  height: 14px;
  color: #a7b297;
}
.app-metrics b {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}
.app-metrics span {
  grid-column: 1/-1;
  font-size: 8px;
  color: #9fac91;
}
.app-section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin-top: 20px;
  margin-bottom: 8px;
}
.app-section-label b {
  font-weight: 400;
}
.app-section-label > span {
  color: #a8b59a;
  font-size: 8px;
}
.app-product {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #323c29;
  padding: 7px 0;
}
.product-art {
  background: #252c20;
  border-radius: 6px;
  width: 39px;
  height: 42px;
  flex: none;
}
.product-art svg {
  width: 100%;
  height: 100%;
}
.app-product > div {
  flex: 1;
}
.app-product b {
  font-size: 10px;
  font-weight: 400;
}
.app-product small {
  display: block;
  font: 8px var(--mono);
  color: #a5b197;
  margin-top: 4px;
}
.stock-dot {
  width: 5px;
  height: 5px;
  background: var(--lime);
  border-radius: 50%;
  margin-inline: 8px;
}
.app-bottom {
  position: absolute;
  inset-inline: 12px;
  bottom: 13px;
  padding: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #242d1e;
  border: 1px solid #586448;
  border-radius: 40px;
  box-shadow: 0 -7px 20px #0d130b;
  gap: 7px;
}
.app-bottom > .icon {
  width: 16px;
  height: 16px;
  color: #b7c5aa;
}
.app-bottom .selected {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--lime);
  font-size: 8px;
  background: #384629;
  padding: 8px 9px;
  border-radius: 20px;
}
.app-bottom .icon {
  width: 16px;
  height: 16px;
}
.app-add {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--lime);
  color: #202b17;
  display: grid;
  place-items: center;
}
.float-card {
  position: absolute;
  z-index: 5;
  background: #22281fe8;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #5e6c4b66;
  border-radius: 11px;
  box-shadow: 0 18px 40px #0004;
  animation: float 6s ease-in-out infinite;
}
.sale-float {
  display: flex;
  align-items: center;
  gap: 11px;
  bottom: 151px;
  left: -7px;
  padding: 13px 15px;
  width: 251px;
  animation-delay: -2s;
  transform: translateZ(30px);
}
.float-icon {
  width: 31px;
  height: 31px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #c6fe2119;
  color: var(--lime);
}
.float-icon .icon {
  width: 16px;
  height: 16px;
}
.sale-float > div {
  flex: 1;
}
.sale-float > div > span {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 3px;
}
.sale-float b {
  font: 16px var(--mono);
  color: var(--lime);
  white-space: nowrap;
}
.sale-float b small {
  font-size: 10px;
}
.float-time {
  font: 8px var(--mono);
  color: #a0ab93;
  align-self: flex-start;
  padding-top: 4px;
}
.weight-float {
  right: -4px;
  top: 153px;
  width: 168px;
  padding: 16px;
}
.weight-float > .eyebrow {
  font-size: 7px;
  letter-spacing: 0.8px;
  color: var(--accent);
  display: block;
  line-height: 1.5;
}
.weight-float > strong {
  display: block;
  font: 35px/1.3 var(--mono);
  letter-spacing: -2px;
  margin-top: 7px;
}
.weight-float > strong > small {
  font-size: 17px;
  margin-left: 5px;
  color: var(--muted);
}
.weight-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 21px;
  margin: 9px 0;
}
.weight-line i {
  width: 1px;
  height: 9px;
  background: #617b68;
}
.weight-line i:nth-child(5n + 1) {
  height: 17px;
  background: var(--accent);
}
.weight-line i:nth-child(8) {
  height: 25px;
  background: var(--lime);
}
.weight-caption {
  font-size: 8px;
  color: var(--muted);
  line-height: 1.6;
  display: block;
}
.studio-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}
.demo-caption {
  font: 8px var(--mono);
  letter-spacing: 0.2px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}
.accent-dot {
  display: inline-block;
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}
.motion-toggle {
  width: 30px;
  height: 30px;
  color: var(--muted);
  font-size: 13px;
}
.pause-symbol {
  line-height: 1;
  font-family: Arial, sans-serif;
}
.trade-strip {
  border-block: 1px solid var(--line);
  overflow: hidden;
  background: #161a13;
  padding-block: 25px;
  position: relative;
  direction: ltr;
}
.trade-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: trade-scroll 38s linear infinite;
}
.trade-group {
  display: flex;
  align-items: center;
  flex: none;
}
.trade-group > span {
  font-size: 23px;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.trade-group > i {
  font-size: 28px;
  font-style: normal;
  color: var(--lime);
  margin-inline: 44px;
}
.trade-strip:focus-within .trade-track {
  animation-play-state: paused;
}
.section-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 62px;
}
.section-top .eyebrow {
  color: var(--muted);
  margin-bottom: 25px;
}
.section-top h2 {
  max-width: 820px;
}
.section-intro {
  max-width: 215px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  padding-bottom: 4px;
}
.experience-layout {
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 74px;
  align-items: center;
}
.workflow-tabs {
  display: grid;
}
.workflow-tab {
  border-top: 1px solid var(--line);
  background: none;
  text-align: start;
  display: grid;
  grid-template-columns: 23px 1fr 20px;
  gap: 14px;
  align-items: start;
  padding: 24px 0;
  color: var(--muted);
  position: relative;
  min-height: 86px;
}
.workflow-tab:last-child {
  border-bottom: 1px solid var(--line);
}
.workflow-tab:before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: -1px;
  height: 1px;
  width: 0;
  background: var(--lime);
  transition: width 0.8s var(--ease);
}
.workflow-tab.active:before {
  width: 100%;
}
.tab-number {
  font: 10px var(--mono);
  padding-top: 8px;
  color: #8e9a82;
}
.workflow-tab strong {
  font-size: 23px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.5px;
  transition: color 0.3s;
}
.workflow-tab > .icon {
  margin-top: 6px;
  width: 17px;
  height: 17px;
  opacity: 0;
  transform: translate(-5px, 5px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.workflow-tab.active strong {
  color: var(--ink);
}
.workflow-tab.active > .icon {
  opacity: 1;
  transform: none;
  color: var(--lime);
  }
@media (hover: hover) and (pointer: fine) {
  .workflow-tab:hover strong {
    color: var(--lime);
  }
}
.tab-description {
  font-size: 13px;
  line-height: 1.7;
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.5s var(--ease),
    opacity 0.5s,
    margin 0.5s;
}
.active .tab-description {
  max-height: 110px;
  opacity: 1;
  margin-top: 14px;
}
.workspace-frame {
  min-width: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #434c39;
  background: radial-gradient(at 90% 0%, #313d2438, transparent 60%), #1a2016;
  box-shadow: 0 28px 60px -30px #0005;
  position: relative;
}
.workspace-chrome {
  border-bottom: 1px solid #414b343b;
  padding: 17px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.window-dots {
  display: flex;
  gap: 5px;
}
.window-dots > i {
  width: 5px;
  height: 5px;
  background: #5f6d51;
  border-radius: 50%;
}
.workspace-chrome > span {
  font: 8px var(--mono);
  letter-spacing: 1px;
  color: #a9b69a;
}
.secure-dot {
  width: 5px;
  height: 5px;
  background: var(--lime);
  border-radius: 50%;
}
#workspace-preview {
  padding: 28px 30px;
  min-height: 365px;
  outline-offset: -4px;
}
.workspace-note {
  font: 8px var(--mono);
  letter-spacing: 0.2px;
  color: #a4b095;
  border-top: 1px solid #414b343b;
  padding: 13px 30px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.panel-arrive {
  animation: panel-in 0.55s var(--ease);
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}
.panel-eyebrow {
  font: 8px var(--mono);
  color: #a6b698;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.panel-head h3 {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -1px;
}
.panel-chip {
  font: 8px var(--mono);
  color: var(--lime);
  background: #c6fe2112;
  border: 1px solid #c6fe2125;
  border-radius: 20px;
  padding: 7px 9px;
  white-space: nowrap;
}
.inventory-overview {
  display: flex;
  gap: 22px;
  margin-bottom: 20px;
  padding-block: 0 19px;
  border-bottom: 1px solid var(--line);
}
.inventory-overview b {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  display: block;
  letter-spacing: -0.5px;
}
.inventory-overview b small {
  font-size: 12px;
  color: var(--muted);
}
.inventory-overview span {
  font: 8px var(--mono);
  color: #a1af94;
  display: block;
  margin-top: 2px;
}
.inventory-overview > div + div {
  border-inline-start: 1px solid #47533b;
  padding-inline-start: 24px;
}
.inventory-table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  font-size: 11px;
}
.inventory-table thead {
  font: 8px var(--mono);
  color: #a1af94;
}
.inventory-table th {
  font-weight: 400;
  text-align: start;
  padding-block: 0 10px;
}
.inventory-table th:last-child,
.inventory-table td:last-child {
  text-align: end;
}
.inventory-table td {
  padding-block: 9px;
  border-top: 1px solid #39472e77;
}
.inventory-table .table-piece {
  display: flex;
  align-items: center;
  gap: 11px;
}
.table-piece .product-art {
  width: 35px;
  height: 37px;
  background: #303c25;
}
.table-piece small {
  display: block;
  color: #9eac90;
  font: 8px var(--mono);
  margin-top: 3px;
}
.inventory-table td:last-child {
  font: 10px var(--mono);
  white-space: nowrap;
}
.receipt-demo {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 23px;
  align-items: center;
  margin-top: 20px;
}
.receipt-jewel {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse, #4c5a3e52, transparent 70%);
  min-height: 240px;
  position: relative;
}
.receipt-jewel svg {
  width: 170px;
  height: 170px;
  filter: drop-shadow(0 8px 9px #0005);
}
.jewel-tag {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  font: 8px var(--mono);
  border: 1px solid #526243;
  border-radius: 25px;
  padding: 5px 10px;
  white-space: nowrap;
  color: var(--muted);
}
.receipt-paper {
  background: #eef3e7;
  color: #28351f;
  transform: rotate(3deg);
  padding: 20px 15px;
  box-shadow: 0 13px 25px #0002;
  position: relative;
}
.receipt-paper:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 6px;
  background:
    linear-gradient(135deg, transparent 33.333%, #eef3e7 0, #eef3e7 66.667%, transparent 0),
    linear-gradient(225deg, transparent 33.333%, #eef3e7 0, #eef3e7 66.667%, transparent 0);
  background-position: top;
  background-size: 10px 10px;
  transform: rotate(180deg);
}
.receipt-paper > p {
  text-align: center;
  font: 8px var(--mono);
  letter-spacing: 2px;
  margin-bottom: 20px;
}
.receipt-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9px;
  padding-block: 7px;
  border-bottom: 1px dashed #9eae90;
}
.receipt-line b {
  font: 9px var(--mono);
  white-space: nowrap;
}
.receipt-total {
  font-size: 23px;
  line-height: 1.2;
  margin-top: 18px;
  letter-spacing: -0.7px;
  text-align: center;
}
.receipt-total small {
  font-size: 11px;
}
.receipt-confirm {
  font: 7px var(--mono);
  color: #4e653c;
  text-align: center;
  margin-top: 7px;
}
.catalogue-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 26px;
}
.catalogue-piece {
  background: #303c2555;
  padding: 13px 10px 10px;
  border: 1px solid #50643a44;
  border-radius: 9px;
  text-align: center;
}
.catalogue-piece svg {
  width: 100%;
  height: 115px;
}
.catalogue-piece h4 {
  font-size: 10px;
  font-weight: 400;
  margin: 8px 0 4px;
}
.catalogue-piece p {
  color: var(--muted);
  font: 8px var(--mono);
}
.catalogue-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #46523d;
  padding-top: 16px;
  margin-top: 20px;
  gap: 12px;
}
.catalogue-footer p {
  font: 9px var(--mono);
  color: var(--muted);
}
.qr-art {
  display: block;
  width: 31px;
  height: 31px;
  fill: var(--lime);
}
.catalogue-footer > span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-chips {
  display: flex;
  gap: 6px;
  font: 8px var(--mono);
  color: var(--lime);
}
.share-chips > span {
  border: 1px solid #63744f;
  padding: 6px 8px;
  border-radius: 20px;
}
.precision-section {
  background: #edf0e5;
  color: #222b1c;
  padding-block: 88px;
  position: relative;
  overflow: hidden;
}
.precision-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 105px;
  align-items: center;
}
.precision-shell > * {
  min-width: 0;
}
.precision-copy > .eyebrow {
  font-size: 9px;
  color: #4c5d40;
  margin-bottom: 28px;
  letter-spacing: 1.1px;
}
.precision-copy .section-number {
  color: #556f3b;
}
.precision-copy h2 {
  font-size: clamp(44px, 4.6vw, 68px);
}
.precision-soft {
  color: #77836d;
}
.precision-copy > p:not(.eyebrow) {
  max-width: 350px;
  font-size: 16px;
  line-height: 1.7;
  margin-top: 24px;
  color: #58634f;
}
.precision-object {
  width: min(420px, 100%);
  max-width: 100%;
  margin-top: 15px;
}
.precision-object > svg {
  display: block;
  width: 100%;
  height: auto;
  animation: precision-float 6s ease-in-out infinite;
}
.example-note {
  font: 9px/1.7 var(--mono);
  color: #607050;
  display: block;
  max-width: 340px;
  margin-top: -4px;
}
.calculator {
  background: #fffef9;
  border: 1px solid #d7ddce;
  border-radius: 15px;
  padding: 29px 28px 23px;
  box-shadow: 0 25px 70px -40px #46552a66;
  color-scheme: light;
  min-width: 0;
}
.calc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #536543;
}
.live-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 7px;
  color: #63754f;
}
.live-pill i {
  width: 4px;
  height: 4px;
  background: #618c34;
  border-radius: 50%;
  display: inline-block;
}
.material-options {
  display: flex;
  gap: 5px;
  background: #edf0e7;
  border-radius: 7px;
  padding: 4px;
  margin-top: 23px;
  margin-bottom: 24px;
}
.material-options button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 5px;
  color: #647157;
  background: transparent;
  font-size: 12px;
  flex: 1;
  border: 1px solid transparent;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.material-options button.active {
  background: #fffef9;
  border-color: #d2d9c6;
  color: #283a1a;
  box-shadow: 0 1px 3px #283a1a0a;
}
.material-options i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #b4bdb0;
}
.silver-swatch {
  background: linear-gradient(135deg, #fff, #aab4a3, #eaf2e5);
}
.gold-swatch {
  background: linear-gradient(135deg, #f5e8bd, #bb995c, #e0ca96);
  border-color: #bba778 !important;
}
.calc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px 18px;
}
.calc-fields > div {
  min-width: 0;
}
.calc-fields label {
  font-size: 11px;
  color: #627050;
  display: block;
  margin-bottom: 8px;
}
.input-wrap {
  position: relative;
}
.input-wrap input {
  background: #fffef9;
  color: #25351c;
  border: 1px solid #cdd5c2;
  border-radius: 7px;
  min-height: 52px;
  width: 100%;
  padding: 12px 34px 10px 13px;
  direction: ltr;
  appearance: textfield;
  font: 20px var(--mono);
  letter-spacing: -0.7px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.input-wrap input:focus {
  outline: 0;
  border-color: #678a3e;
  box-shadow: 0 0 0 3px #a3c77d30;
}
.input-wrap input[aria-invalid='true'] {
  border-color: #a54b38;
}
.input-wrap input::-webkit-inner-spin-button,
.input-wrap input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.input-wrap > span {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  font: 10px var(--mono);
  color: #768369;
  pointer-events: none;
}
.rate-field {
  grid-column: 1/-1;
}
.rate-field .input-wrap input {
  padding-right: 72px;
}
.calc-error {
  font-size: 11px;
  color: #a03f2d;
  line-height: 1.5;
  margin-top: 12px;
}
.weight-breakdown {
  margin-top: 25px;
}
.weight-bar {
  height: 4px;
  display: flex;
  gap: 3px;
}
.weight-bar > span {
  border-radius: 5px;
  transition: width 0.5s var(--ease);
}
#metal-bar {
  background: #6a8d43;
  width: 95.294%;
}
#stone-bar {
  background: #b5c9d9;
  width: 4.706%;
}
.breakdown-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 8px var(--mono);
  color: #6d7b60;
  margin-top: 8px;
  flex-wrap: wrap;
}
.breakdown-labels > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.breakdown-labels i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
  background: #6a8d43;
  margin-inline-end: 2px;
}
.breakdown-labels > span + span i {
  background: #89aac4;
}
.calc-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 24px;
}
.calc-results > div {
  border-radius: 7px;
  background: #edf0e7;
  padding: 16px 13px;
  min-width: 0;
}
.calc-results .result-sale {
  background: #ddf6b6;
}
.calc-results > div > span {
  font-size: 10px;
  color: #566a40;
  display: block;
}
.calc-results strong {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font: 28px/1.2 var(--mono);
  margin-top: 9px;
  letter-spacing: -1.2px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.calc-results small {
  font-size: 10px;
  letter-spacing: 0;
}
.calc-results > div > .result-formula {
  font: 7px/1.6 var(--mono);
  color: #667957;
  margin-top: 10px;
}
.calc-footnote {
  font-size: 9px;
  line-height: 1.6;
  color: #718163;
  margin-top: 18px;
}
.confidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.confidence-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 37px 35px;
  background: linear-gradient(130deg, #20251b55, #181c15);
  overflow: hidden;
  min-width: 0;
}
.confidence-card > div:last-child {
  border-top: 1px solid var(--line);
  padding-top: 26px;
}
.confidence-card .eyebrow {
  font-size: 8px;
  color: #b7c0ac;
  margin-bottom: 14px;
}
.confidence-card h3 {
  font-size: 28px;
  letter-spacing: -0.8px;
  margin-bottom: 11px;
}
.confidence-card p:not(.eyebrow) {
  font-size: 13px;
  color: var(--muted);
  max-width: 400px;
  line-height: 1.8;
}
.sync-art {
  height: 258px;
  position: relative;
  display: grid;
  place-items: center;
  direction: ltr;
}
.sync-center {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(145deg, #414f35, #1b2613);
  border: 1px solid #718c5d66;
  box-shadow:
    0 0 50px #99cd4812,
    inset 0 1px 0 #e7ffca22;
}
.sync-center .icon {
  width: 31px;
  height: 31px;
  color: var(--lime);
}
.sync-ring {
  position: absolute;
  border: 1px solid #50653e55;
  border-radius: 50%;
  width: 155px;
  height: 155px;
}
.ring-two {
  width: 238px;
  height: 238px;
  border-style: dashed;
  border-color: #40523255;
  animation: orbit-spin 90s linear infinite;
}
.sync-node {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #15200e;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 15px #c6e99a22;
}
.node-one {
  top: 64px;
  left: calc(50% + 40px);
  animation: node-glow 4s infinite;
}
.node-two {
  top: 152px;
  left: calc(50% - 76px);
  width: 8px;
  height: 8px;
  background: var(--accent);
  animation: node-glow 4s -1.3s infinite;
}
.node-three {
  top: 211px;
  left: calc(50% + 55px);
  width: 7px;
  height: 7px;
  animation: node-glow 4s -2.6s infinite;
}
.sync-label {
  position: absolute;
  bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1b2415;
  padding: 7px 11px;
  border: 1px solid #4b663533;
  border-radius: 30px;
  font: 8px var(--mono);
  letter-spacing: 0.8px;
  color: #b7c7a8;
}
.sync-label .status-dot {
  width: 4px;
  height: 4px;
}
.sync-label .status-dot:after {
  display: none;
}
.language-art {
  height: 258px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  direction: ltr;
  gap: 6px;
  isolation: isolate;
}
.language-art button {
  position: relative;
  z-index: 2;
  border: 1px solid #65734f99;
  padding: 12px 19px;
  border-radius: 9px;
  background: #323d28;
  color: #dceaca;
  font-size: 23px;
  letter-spacing: -0.7px;
  line-height: 1.4;
  box-shadow: 0 9px 30px #0002;
  transition:
    transform 0.45s var(--ease),
    background 0.3s;
}
.language-art button:first-of-type {
  transform: translateY(-32px) rotate(-9deg);
  z-index: 1;
}
.language-art button:nth-of-type(2) {
  transform: translateY(7px) rotate(4deg);
  z-index: 2;
  background: #d8f2b4;
  color: #344d1e;
  border-color: #deefcf;
}
.language-art button:last-of-type {
  transform: translateY(45px) rotate(-7deg);
  z-index: 3;
  font-family: 'Elaris Arabic', Arial, sans-serif;
  font-size: 21px;
  color: var(--accent);
  background: #23302d;
  border-color: #567b75;
  }
@media (hover: hover) and (pointer: fine) {
  .language-art button:hover {
    transform: translateY(-6px) rotate(0);
    z-index: 5;
    background: var(--lime);
    color: #293e19;
  }
}
.language-orbit {
  width: 280px;
  height: 150px;
  border: 1px solid #637b4750;
  border-radius: 50%;
  position: absolute;
  transform: rotate(-28deg);
}
.language-orbit:after {
  content: '';
  position: absolute;
  inset: -28px;
  border: 1px dashed #50623a55;
  border-radius: 50%;
}
.story {
  border-block: 1px solid var(--line);
  background: #161a13;
  padding-block: 95px;
}
.story-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 105px;
  align-items: center;
}
.story-art {
  height: 367px;
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(at 50% 50%, #6c9f3021, transparent 62%);
  isolation: isolate;
  direction: ltr;
}
.story-art > img {
  width: 120px;
  height: auto;
  transform: rotate(-12deg);
  animation: brand-float 9s ease-in-out infinite;
  filter: drop-shadow(0 0 20px #b5e55a10);
}
.story-orbit {
  position: absolute;
  width: 330px;
  height: 232px;
  border: 1px solid #788b5c55;
  border-radius: 50%;
  transform: rotate(-28deg);
}
.story-orbit:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  left: 44px;
  top: 28px;
  box-shadow: 0 0 12px #c7bea544;
}
.story-orbit.orbit-two {
  transform: rotate(34deg);
  width: 300px;
  height: 300px;
  border-style: dashed;
  border-color: #5e704044;
}
.story-orbit.orbit-two:after {
  left: auto;
  right: 14px;
  top: 78px;
  width: 3px;
  height: 3px;
  background: var(--lime);
}
.story-location {
  position: absolute;
  bottom: 10px;
  left: 8px;
  font: 8px/1.8 var(--mono);
  letter-spacing: 1px;
  color: #a4b28f;
}
.story-star {
  position: absolute;
  right: 8px;
  top: 10px;
  font-size: 26px;
  color: #a8bc8a;
}
.story-copy .eyebrow {
  color: var(--muted);
  margin-bottom: 27px;
}
.story-copy h2 {
  font-size: clamp(38px, 3.9vw, 57px);
}
.story-copy > p:not(.eyebrow) {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 25px;
  max-width: 430px;
}
.story-copy > p.story-principle {
  color: #d5dec9;
  font-size: 17px;
  margin-top: 19px;
}
.story-copy .text-link {
  color: var(--lime);
  margin-top: 25px;
  font-size: 12px;
}
.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.23fr;
  gap: 110px;
}
.faq-layout .eyebrow {
  color: var(--muted);
  margin-bottom: 26px;
}
.faq-contact {
  color: var(--lime);
  font-size: 12px;
  margin-top: 32px;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 23px;
  padding: 26px 0;
  line-height: 1.4;
  font-size: 17px;
}
.faq-list summary::-webkit-details-marker {
  display: none;
  }
@media (hover: hover) and (pointer: fine) {
  .faq-list summary:hover {
    color: var(--lime);
  }
}
.faq-plus {
  width: 14px;
  height: 14px;
  position: relative;
  flex: none;
}
.faq-plus:before,
.faq-plus:after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 1px;
  background: var(--lime);
  transition: transform 0.3s;
}
.faq-plus:after {
  transform: rotate(90deg);
}
details[open] .faq-plus:after {
  transform: rotate(0);
}
.faq-answer {
  padding: 0 29px 25px 0;
  animation: reveal-up 0.4s var(--ease);
}
.faq-answer p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 490px;
}
.final-cta {
  background: #1b2515;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #5a723537;
  border-bottom: 1px solid #5a723537;
  text-align: center;
  isolation: isolate;
  padding-block: 88px 95px;
}
.cta-inner > .eyebrow {
  color: #bdcfa8;
  justify-content: center;
  font-size: 9px;
  margin-bottom: 30px;
}
.cta-inner h2 {
  font-size: clamp(65px, 7.8vw, 112px);
  line-height: 0.97;
  letter-spacing: -5px;
  position: relative;
  display: inline-block;
}
.cta-inner h2 > span:nth-child(3) {
  position: absolute;
  right: -95px;
  top: 9px;
  font-size: 66px;
  color: var(--lime);
  animation: star-turn 20s linear infinite;
}
.cta-inner > p:not(.eyebrow) {
  color: #b5c4a5;
  font-size: 15px;
  max-width: 365px;
  line-height: 1.75;
  margin: 28px auto;
}
.cta-inner > .btn {
  margin-top: 6px;
  min-width: 235px;
}
.cta-note {
  display: block;
  font-size: 10px;
  color: #a4b58f;
  margin-top: 18px;
}
.cta-orbits {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0.35;
  direction: ltr;
}
.cta-orbits > i {
  position: absolute;
  width: 120%;
  height: 180%;
  border: 1px solid #809a5060;
  border-radius: 50%;
  transform: rotate(-30deg);
}
.cta-orbits > i:nth-child(2) {
  width: 100%;
  height: 140%;
  transform: rotate(30deg);
  border-style: dashed;
  opacity: 0.7;
}
.cta-orbits > i:nth-child(3) {
  width: 130%;
  height: 110%;
  transform: rotate(10deg);
}
footer {
  padding-top: 63px;
  padding-bottom: 25px;
  background: #0e110d;
}
.footer-main {
  display: grid;
  grid-template-columns: 1.7fr 0.65fr 0.65fr;
  gap: 45px;
  padding-bottom: 53px;
}
.footer-main .brand img {
  width: 100px;
}
.footer-main p {
  font-size: 12px;
  line-height: 1.8;
  max-width: 230px;
  color: #96a189;
  margin-top: 20px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding-top: 3px;
}
.footer-links a {
  font-size: 12px;
  align-self: flex-start;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font: 9px/1.7 var(--mono);
  color: #8d9b7d;
}
.font-credit {
  font-size: 8px;
  color: #8d9b7d;
  }
@media (hover: hover) and (pointer: fine) {
  .font-credit:hover {
    color: var(--lime);
  }
}
dialog {
  position: fixed;
  color: var(--ink);
  background: #1a2116;
  border: 1px solid #65794e66;
  border-radius: 18px;
  padding: 0;
  width: min(465px, calc(100% - 24px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  box-shadow: 0 40px 120px #0008;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}
dialog[open] {
  animation: dialog-in 650ms var(--ease);
}
dialog::backdrop {
  background: #080e08c9;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dialog-content {
  padding: 37px;
  position: relative;
}
.dialog-close {
  position: absolute;
  top: 16px;
  inset-inline-end: 16px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  color: var(--muted);
}
.dialog-close .icon {
  width: 18px;
  height: 18px;
}
.dialog-brand {
  width: 29px;
  height: auto;
  margin-bottom: 25px;
}
.dialog-content .eyebrow {
  font-size: 8px;
  color: var(--lime);
  letter-spacing: 1px;
  margin-bottom: 15px;
}
.dialog-content h2 {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.1px;
  max-width: 320px;
}
.dialog-content > p:not(.eyebrow) {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 17px;
}
.dialog-field {
  margin-top: 20px;
}
.dialog-field label {
  font-size: 11px;
  color: #c0cdb4;
  display: block;
  margin-bottom: 8px;
}
.dialog-field label small {
  font-size: 10px;
  color: var(--muted);
}
.dialog-field input {
  color: var(--ink);
  background: #202a19;
  border: 1px solid #526642;
  border-radius: 6px;
  min-height: 47px;
  padding: 12px;
  width: 100%;
  font-size: 13px;
}
.dialog-field input::placeholder {
  color: #8d9f7a;
}
.dialog-field input:focus {
  outline: 1px solid var(--lime);
  border-color: var(--lime);
}
.dialog-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
}
.dialog-note .icon {
  width: 15px;
  height: 15px;
  color: var(--lime);
  margin-top: 1px;
}
.dialog-content form > .btn {
  width: 100%;
  margin-top: 20px;
  font-size: 12px;
  min-height: 49px;
}
#form-status {
  font-size: 11px;
  line-height: 1.7;
  color: var(--lime);
  margin-top: 15px;
}
#wa-fallback {
  font-size: 11px;
  color: var(--accent);
  margin-top: 8px;
}
.dialog-open {
  overflow: hidden;
}
.noscript-note {
  padding: 20px;
  text-align: center;
  background: var(--lime);
  color: var(--bg);
  font-size: 14px;
}
.noscript-note a {
  text-decoration: underline;
}
html.enhanced[data-motion='on'] [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 950ms var(--ease-fluid), translate 1150ms var(--ease-fluid), transform 850ms var(--ease-fluid), border-color 500ms ease, box-shadow 850ms var(--ease-fluid);
  transition-delay: var(--reveal-delay, 0ms);
}
html.enhanced[data-motion='on'] [data-reveal].revealed { opacity: 1; translate: 0 0; }
html[data-motion='off'] {
  scroll-behavior: auto;
}
html[data-motion='off'] *,
html[data-motion='off'] *:before,
html[data-motion='off'] *:after {
  animation: none !important;
  transition-duration: 0.01ms !important;
}
html[data-motion='off'] .chart-line {
  stroke-dashoffset: 0;
}
html[data-motion='off'] [data-reveal] {
  translate: none;
  opacity: 1;
  transform: none;
}
@keyframes title-in {
  from {
    transform: translateY(110%) rotate(2deg);
  }
  to {
    transform: translateY(0) rotate(0);
  }
}
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(17px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes phone-arrive {
  from {
    opacity: 0;
    translate: 35px 50px;
    rotate: 7deg;
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes chart-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -9px;
  }
}
@keyframes dot-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  75%,
  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}
@keyframes trade-scroll {
  to {
    transform: translateX(-50%);
  }
}
@keyframes panel-in {
  from {
    opacity: 0;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes precision-float {
  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}
@keyframes orbit-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes node-glow {
  50% {
    opacity: 0.35;
    box-shadow: 0 0 16px #c6fe2155;
  }
}
@keyframes brand-float {
  50% {
    transform: translateY(-10px) rotate(-7deg);
  }
}
@keyframes star-turn {
  to {
    transform: rotate(180deg);
  }
}
@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
[lang='fr'] .hero h1 {
  font-size: clamp(63px, 6.1vw, 91px);
  letter-spacing: -4.7px;
}
[lang='fr'] .hero-actions {
  gap: 20px;
}
[lang='fr'] .hero-actions .btn {
  padding-inline: 19px;
  gap: 16px;
}
[lang='fr'] .hero-description {
  font-size: 17px;
}
[lang='fr'] .workflow-tab strong {
  font-size: 21px;
}
[lang='fr'] .brand > span {
  font-size: 8px;
}
[lang='ar'] {
  --body: 'Elaris Arabic', Arial, sans-serif;
}
[lang='ar'] body {
  line-height: 1.8;
}
[lang='ar'] .eyebrow {
  font-family: var(--body);
  letter-spacing: 0;
  font-size: 11px;
}
[lang='ar'] h1,
[lang='ar'] h2,
[lang='ar'] h3 {
  letter-spacing: -0.8px;
  line-height: 1.5;
}
[lang='ar'] .hero h1 {
  font-size: clamp(61px, 6.5vw, 91px);
  line-height: 1.35;
  letter-spacing: -2px;
}
[lang='ar'] .title-line {
  padding-block: 0;
}
[lang='ar'] .hero-description {
  line-height: 1.9;
  font-size: 16px;
}
[lang='ar'] h2 {
  font-size: clamp(35px, 3.7vw, 53px);
}
[lang='ar'] .btn {
  font-size: 12px;
  line-height: 1.6;
}
[lang='ar'] .btn-small {
  font-size: 10px;
}
[lang='ar'] .brand > span {
  font-family: var(--body);
  letter-spacing: 0;
  font-size: 8px;
  max-width: 90px;
}
[lang='ar'] .desktop-nav a {
  font-size: 11px;
}
[lang='ar'] .hero-bottom {
  font-family: var(--body);
  letter-spacing: 0;
  font-size: 9px;
}
[lang='ar'] .hero-copy > .eyebrow {
  font-size: 10px;
  margin-bottom: 20px;
}
[lang='ar'] .hero-copy {
  padding-top: 20px;
}
[lang='ar'] .hero-bottom {
  margin-top: 37px;
}
[lang='ar'] .hero-description {
  margin-top: 15px;
}
[lang='ar'] .hero-actions {
  margin-top: 26px;
  gap: 20px;
}
[lang='ar'] .phone-screen {
  direction: rtl;
  font-family: var(--body);
}
[lang='ar'] .app-top h3 {
  font-size: 17px;
  line-height: 1.6;
}
[lang='ar'] .app-top p {
  font-size: 7px;
}
[lang='ar'] .app-top {
  margin: 12px 0;
}
[lang='ar'] .card-label {
  font-size: 8px;
}
[lang='ar'] .sales-amount {
  font-family: Elaris, sans-serif;
  direction: ltr;
  justify-content: flex-end;
}
[lang='ar'] .sales-meta {
  font-size: 7px;
}
[lang='ar'] .app-metrics span {
  font-size: 7px;
}
[lang='ar'] .app-section-label {
  font-size: 9px;
  margin-top: 13px;
}
[lang='ar'] .app-product b {
  font-size: 8px;
}
[lang='ar'] .app-bottom .selected {
  font-size: 7px;
}
[lang='ar'] .float-card {
  direction: rtl;
}
[lang='ar'] .weight-float > .eyebrow {
  font-size: 8px;
}
[lang='ar'] .weight-float > strong {
  direction: ltr;
  text-align: right;
}
[lang='ar'] .weight-float > strong,
[lang='ar'] .sale-float b {
  font-family: var(--mono);
}
[lang='ar'] .weight-caption {
  font-size: 8px;
}
[lang='ar'] .float-time {
  font-family: var(--body);
  font-size: 7px;
  max-width: 25px;
}
[lang='ar'] .sale-float > div > span {
  font-size: 8px;
}
[lang='ar'] .demo-caption {
  font-family: var(--body);
  font-size: 8px;
}
[lang='ar'] .trade-group > span {
  font-size: 19px;
  direction: rtl;
}
[lang='ar'] .workflow-tab strong {
  font-size: 20px;
  letter-spacing: 0;
}
[lang='ar'] .tab-description {
  font-size: 12px;
  line-height: 1.9;
}
[lang='ar'] .workflow-tab .icon {
  transform: scaleX(-1);
}
[lang='ar'] .panel-head h3 {
  font-size: 22px;
}
[lang='ar'] .panel-eyebrow,
[lang='ar'] .panel-chip {
  font-family: var(--body);
  font-size: 8px;
  letter-spacing: 0;
}
[lang='ar'] .inventory-table {
  font-size: 10px;
}
[lang='ar'] .inventory-table thead {
  font-family: var(--body);
  font-size: 9px;
}
[lang='ar'] .receipt-paper {
  transform: rotate(-3deg);
}
[lang='ar'] .receipt-line {
  font-size: 8px;
}
[lang='ar'] .receipt-line b {
  font-size: 8px;
}
[lang='ar'] .catalogue-piece h4 {
  font-size: 9px;
}
[lang='ar'] .precision-copy > .eyebrow {
  font-size: 10px;
}
[lang='ar'] .precision-copy h2 {
  font-size: clamp(38px, 3.8vw, 55px);
}
[lang='ar'] .precision-copy > p:not(.eyebrow) {
  font-size: 14px;
  line-height: 1.9;
}
[lang='ar'] .example-note {
  font-family: var(--body);
  font-size: 9px;
}
[lang='ar'] .calculator .calc-top {
  font-family: var(--body);
  letter-spacing: 0;
}
[lang='ar'] .calc-fields label {
  font-size: 10px;
}
[lang='ar'] .calc-results strong {
  direction: ltr;
  justify-content: flex-end;
}
[lang='ar'] .calc-results > div > .result-formula {
  font-family: var(--body);
  font-size: 8px;
}
[lang='ar'] .calc-footnote {
  font-size: 9px;
}
[lang='ar'] .confidence-card h3 {
  font-size: 23px;
  letter-spacing: 0;
}
[lang='ar'] .confidence-card p:not(.eyebrow) {
  font-size: 12px;
  line-height: 1.9;
}
[lang='ar'] .confidence-card .eyebrow {
  font-size: 9px;
}
[lang='ar'] .story-copy > p:not(.eyebrow) {
  font-size: 13px;
  line-height: 2;
}
[lang='ar'] .story-copy > p.story-principle {
  font-size: 15px;
}
[lang='ar'] .faq-list summary {
  font-size: 14px;
}
[lang='ar'] .faq-answer {
  padding-inline: 0 29px;
}
[lang='ar'] .faq-answer p {
  font-size: 12px;
  line-height: 2;
}
[lang='ar'] .cta-inner h2 {
  font-size: clamp(58px, 6.4vw, 92px);
  line-height: 1.4;
}
[lang='ar'] .cta-inner h2 > span:nth-child(3) {
  right: auto;
  left: -100px;
  font-size: 60px;
}
[lang='ar'] .cta-inner > p:not(.eyebrow) {
  font-size: 13px;
  line-height: 2;
}
[lang='ar'] .dialog-content h2 {
  font-size: 28px;
  line-height: 1.6;
}
[lang='ar'] .dialog-content .eyebrow {
  font-size: 9px;
}
[lang='ar'] .footer-bottom {
  font-family: var(--body);
  font-size: 9px;
}
[dir='rtl'] .reading-progress {
  transform-origin: right;
}
@media (min-width: 1600px) {
  .hero-layout {
    padding-block: 52px 62px;
  }
  .studio {
    height: 730px;
  }
  .phone-rig {
    top: 76px;
  }
  .sale-float {
    bottom: 170px;
  }
  .weight-float {
    top: 170px;
  }
}
@media (max-width: 1200px) {
  .shell {
    width: calc(100% - 72px);
  }
  .brand > span {
    display: none;
  }
  .desktop-nav {
    gap: 25px;
    margin-inline-end: 10px;
  }
  .hero h1 {
    font-size: clamp(70px, 7.4vw, 90px);
    letter-spacing: -4.5px;
  }
  .hero-description {
    font-size: 16px;
    max-width: 350px;
  }
  .hero-actions {
    gap: 21px;
  }
  .hero-actions .btn {
    font-size: 12px;
    padding-inline: 19px;
    gap: 16px;
  }
  .hero-actions .text-link {
    font-size: 12px;
    gap: 8px;
  }
  .studio {
    height: 640px;
  }
  .phone-rig {
    width: 252px;
    margin-left: -126px;
    top: 47px;
  }
  .phone {
    height: 548px;
  }
  .phone-screen {
    padding-inline: 12px;
  }
  .app-top h3 {
    font-size: 19px;
  }
  .sales-card {
    padding-top: 11px;
  }
  .sales-amount {
    font-size: 37px;
  }
  .app-metrics {
    margin-top: 8px;
  }
  .app-metrics > div {
    padding: 8px;
  }
  .app-section-label {
    margin-top: 15px;
  }
  .app-product {
    padding-block: 5px;
  }
  .weight-float {
    width: 145px;
    right: -8px;
    top: 154px;
    padding: 14px 12px;
  }
  .weight-float > strong {
    font-size: 31px;
  }
  .weight-float > .eyebrow {
    font-size: 6px;
  }
  .weight-caption {
    font-size: 7px;
  }
  .sale-float {
    width: 222px;
    left: -7px;
    bottom: 143px;
    padding: 11px 12px;
    gap: 8px;
  }
  .float-time {
    font-size: 7px;
  }
  .float-icon {
    width: 28px;
    height: 28px;
  }
  .sale-float b {
    font-size: 14px;
  }
  .coord-side {
    right: -15px;
  }
  .experience-layout {
    gap: 48px;
    grid-template-columns: 1fr 1.5fr;
  }
  .workflow-tab strong {
    font-size: 21px;
  }
  .precision-shell {
    gap: 62px;
  }
  .calculator {
    padding: 25px 23px;
  }
  .calc-results strong {
    font-size: 25px;
  }
  .confidence-card {
    padding-inline: 28px;
  }
  .confidence-card h3 {
    font-size: 25px;
  }
  .language-art {
    gap: 0;
  }
  .language-art button {
    font-size: 21px;
    padding-inline: 15px;
  }
  .story-layout {
    gap: 65px;
  }
  .faq-layout {
    gap: 72px;
  }
  [lang='fr'] .hero h1 {
    font-size: 6.2vw;
    letter-spacing: -3.5px;
  }
  [lang='fr'] .hero-actions {
    gap: 15px;
  }
  [lang='fr'] .hero-actions .btn {
    font-size: 11px;
    padding-inline: 15px;
  }
  [lang='fr'] .hero-description {
    font-size: 16px;
  }
  [lang='ar'] .hero h1 {
    font-size: 7vw;
  }
  [lang='ar'] .hero-description {
    font-size: 14px;
  }
  .hero-bottom {
    font-size: 8px;
    gap: 12px;
    margin-top: 51px;
  }
}
@media (max-width: 980px) {
  .shell {
    width: calc(100% - 56px);
  }
  .header-inner {
    height: 76px;
    gap: 20px;
  }
  .desktop-nav {
    gap: 22px;
  }
  .desktop-nav a {
    font-size: 12px;
  }
  .header-actions {
    gap: 13px;
  }
  .hero-layout {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-top: 16px;
    padding-bottom: 38px;
  }
  .hero-copy {
    padding-top: 20px;
  }
  .hero-copy > .eyebrow {
    font-size: 7px;
    letter-spacing: 0.7px;
    gap: 8px;
    margin-bottom: 27px;
  }
  .hero h1 {
    font-size: 7.7vw;
    letter-spacing: -3.8px;
  }
  .hero-description {
    font-size: 15px;
    max-width: 310px;
    line-height: 1.7;
    margin-top: 20px;
  }
  .hero-actions {
    gap: 15px;
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-actions .btn {
    min-height: 50px;
  }
  .availability {
    font-size: 9px;
    margin-top: 10px;
  }
  .hero-bottom {
    font-size: 7px;
    gap: 10px;
    margin-top: 35px;
    letter-spacing: 0.5px;
  }
  .studio {
    height: 605px;
  }
  .phone-rig {
    width: 233px;
    margin-left: -116px;
    top: 45px;
  }
  .phone {
    height: 516px;
    padding: 7px;
    border-radius: 36px;
  }
  .phone-screen {
    border-radius: 29px;
    padding-inline: 11px;
  }
  .phone-status {
    height: 24px;
  }
  .app-top {
    margin: 12px 0;
  }
  .app-top h3 {
    font-size: 18px;
  }
  .app-top p {
    font-size: 8px;
  }
  .app-avatar {
    height: 29px;
    width: 29px;
  }
  .sales-card {
    padding: 12px 11px 8px;
  }
  .sales-amount {
    font-size: 34px;
    margin-top: 7px;
  }
  .sales-spark {
    height: 40px;
    margin-inline: -11px;
  }
  .app-metrics > div {
    padding: 8px;
  }
  .app-metrics span {
    font-size: 7px;
  }
  .app-section-label {
    margin-top: 13px;
    font-size: 9px;
  }
  .app-product b {
    font-size: 9px;
  }
  .product-art {
    width: 34px;
    height: 37px;
  }
  .app-product small {
    font-size: 7px;
  }
  .app-bottom {
    bottom: 12px;
    inset-inline: 9px;
    padding: 6px;
  }
  .app-bottom .selected {
    font-size: 7px;
    padding: 7px;
  }
  .app-bottom .icon {
    height: 14px;
    width: 14px;
  }
  .app-add {
    height: 29px;
    width: 29px;
  }
  .weight-float {
    width: 127px;
    right: -5px;
    top: 145px;
    padding: 12px 10px;
  }
  .weight-float > .eyebrow {
    font-size: 6px;
    letter-spacing: 0.2px;
  }
  .weight-float > strong {
    font-size: 27px;
  }
  .weight-float > strong small {
    font-size: 13px;
  }
  .weight-line {
    height: 14px;
    margin: 8px 0;
  }
  .weight-caption {
    font-size: 6px;
  }
  .sale-float {
    width: 205px;
    left: -10px;
    bottom: 139px;
  }
  .sale-float > div > span {
    font-size: 8px;
  }
  .sale-float b {
    font-size: 13px;
  }
  .sale-float b small {
    font-size: 8px;
  }
  .sale-float .float-time {
    font-size: 6px;
  }
  .coord-side {
    right: -10px;
    font-size: 6px;
  }
  .coord-top {
    font-size: 7px;
    top: 12px;
  }
  .demo-caption {
    font-size: 7px;
  }
  .section-space {
    padding-block: 92px;
  }
  h2 {
    font-size: 43px;
    letter-spacing: -1.8px;
  }
  .section-top {
    margin-bottom: 43px;
  }
  .section-intro {
    font-size: 12px;
    max-width: 180px;
  }
  .experience-layout {
    gap: 30px;
    grid-template-columns: 1fr 1.35fr;
  }
  .workflow-tab {
    grid-template-columns: 19px 1fr 14px;
    gap: 10px;
    padding-block: 21px;
  }
  .workflow-tab strong {
    font-size: 19px;
    letter-spacing: -0.4px;
  }
  .tab-description {
    font-size: 12px;
  }
  .active .tab-description {
    max-height: 125px;
  }
  #workspace-preview {
    padding: 23px 21px;
    min-height: 365px;
  }
  .workspace-note {
    padding-inline: 21px;
    font-size: 7px;
  }
  .panel-head h3 {
    font-size: 25px;
  }
  .panel-chip {
    font-size: 7px;
    padding: 6px;
  }
  .inventory-table {
    font-size: 10px;
  }
  .table-piece .product-art {
    width: 27px;
    height: 31px;
  }
  .inventory-table .table-piece {
    gap: 7px;
  }
  .inventory-table td:last-child {
    font-size: 9px;
  }
  .catalogue-demo {
    gap: 6px;
  }
  .catalogue-piece {
    padding: 8px 5px;
  }
  .catalogue-piece svg {
    height: 100px;
  }
  .catalogue-piece h4 {
    font-size: 8px;
  }
  .share-chips > span {
    padding: 4px 5px;
    font-size: 7px;
  }
  .receipt-demo {
    gap: 14px;
  }
  .receipt-jewel svg {
    width: 130px;
    height: 130px;
  }
  .receipt-paper {
    padding: 17px 10px;
  }
  .receipt-total {
    font-size: 20px;
  }
  .receipt-line {
    font-size: 8px;
  }
  .receipt-line b {
    font-size: 8px;
  }
  .precision-shell {
    gap: 37px;
    grid-template-columns: 1fr 1fr;
  }
  .precision-copy h2 {
    font-size: 48px;
    letter-spacing: -2px;
  }
  .precision-copy > p:not(.eyebrow) {
    font-size: 14px;
    max-width: 300px;
  }
  .precision-copy > .eyebrow {
    font-size: 7px;
    gap: 8px;
  }
  .calculator {
    padding: 23px 19px;
  }
  .calc-top {
    font-size: 8px;
    letter-spacing: 0.3px;
    gap: 8px;
  }
  .calc-fields {
    gap: 15px 12px;
  }
  .calc-fields label {
    font-size: 10px;
  }
  .input-wrap input {
    font-size: 18px;
    padding-left: 11px;
  }
  .input-wrap > span {
    right: 10px;
  }
  .calc-results {
    gap: 7px;
  }
  .calc-results > div {
    padding: 14px 10px;
  }
  .calc-results strong {
    font-size: 23px;
  }
  .calc-results > div > .result-formula {
    font-size: 6px;
  }
  .calc-footnote {
    font-size: 8px;
  }
  .confidence-grid {
    gap: 18px;
  }
  .confidence-card {
    padding-inline: 25px;
    padding-bottom: 30px;
  }
  .confidence-card h3 {
    font-size: 23px;
  }
  .confidence-card p:not(.eyebrow) {
    font-size: 12px;
  }
  .language-art button {
    font-size: 19px;
    padding: 11px 12px;
  }
  .language-art button:last-of-type {
    font-size: 18px;
  }
  .story-layout {
    gap: 40px;
  }
  .story-art {
    height: 330px;
  }
  .story-orbit {
    width: 285px;
    height: 200px;
  }
  .story-orbit.orbit-two {
    width: 260px;
    height: 260px;
  }
  .story-art > img {
    width: 105px;
  }
  .story-copy h2 {
    font-size: 39px;
  }
  .story-copy > p:not(.eyebrow) {
    font-size: 13px;
  }
  .story-copy > p.story-principle {
    font-size: 16px;
  }
  .story-copy .eyebrow {
    font-size: 8px;
    gap: 7px;
  }
  .faq-layout {
    gap: 50px;
    grid-template-columns: 1fr 1.2fr;
  }
  .faq-list summary {
    font-size: 15px;
    padding-block: 23px;
  }
  .faq-answer p {
    font-size: 12px;
  }
  .cta-inner h2 {
    font-size: 84px;
    letter-spacing: -4px;
  }
  .cta-inner h2 > span:nth-child(3) {
    right: -73px;
    font-size: 50px;
    top: 6px;
  }
  .footer-main {
    grid-template-columns: 1.4fr 0.7fr 0.8fr;
    gap: 30px;
  }
  [lang='fr'] .hero h1 {
    font-size: 6.35vw;
    letter-spacing: -2.8px;
  }
  [lang='fr'] .hero-actions {
    gap: 12px;
  }
  [lang='fr'] .workflow-tab strong {
    font-size: 18px;
  }
  [lang='fr'] h2 {
    font-size: 40px;
  }
  [lang='ar'] .desktop-nav a {
    font-size: 10px;
  }
  [lang='ar'] .hero h1 {
    font-size: 7vw;
  }
  [lang='ar'] .hero-copy > .eyebrow {
    font-size: 8px;
  }
  [lang='ar'] .hero-actions {
    gap: 13px;
  }
  [lang='ar'] .hero-description {
    font-size: 13px;
  }
  [lang='ar'] .app-top h3 {
    font-size: 15px;
  }
  [lang='ar'] .app-top {
    margin: 9px 0;
  }
  [lang='ar'] .weight-float > .eyebrow {
    font-size: 7px;
  }
  [lang='ar'] .weight-caption {
    font-size: 6px;
  }
  [lang='ar'] .sale-float .float-time {
    font-size: 6px;
  }
  [lang='ar'] .workflow-tab strong {
    font-size: 17px;
  }
  [lang='ar'] h2 {
    font-size: 35px;
  }
  [lang='ar'] .tab-description {
    font-size: 11px;
  }
  [lang='ar'] .confidence-card h3 {
    font-size: 20px;
  }
  [lang='ar'] .cta-inner h2 {
    font-size: 70px;
  }
  [lang='ar'] .cta-inner h2 > span:nth-child(3) {
    left: -70px;
    font-size: 45px;
  }
}
@media (max-width: 760px) {
  .shell {
    width: calc(100% - 44px);
  }
  .desktop-nav,
  .header-cta {
    display: none;
  }
  .header-inner {
    height: 70px;
  }
  .brand img {
    width: 96px;
  }
  .brand > span {
    display: block;
    font-size: 8px;
    max-width: 73px;
    padding-inline-start: 16px;
  }
  .brand {
    gap: 17px;
  }
  .header-actions {
    gap: 13px;
  }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    border-color: #46513b;
  }
  .menu-toggle span {
    width: 14px;
    height: 1px;
    background: var(--ink);
    display: block;
    transition: transform 0.2s;
  }
  .menu-toggle[aria-expanded='true'] span:first-child {
    transform: translateY(3px) rotate(45deg);
  }
  .menu-toggle[aria-expanded='true'] span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }
  .hero-layout {
    grid-template-columns: 1fr;
    padding-block: 0 24px;
    gap: 0;
  }
  .hero-copy {
    padding-top: 48px;
    padding-bottom: 0;
    max-width: 600px;
  }
  .hero-copy > .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
    margin-bottom: 25px;
  }
  .hero h1 {
    font-size: clamp(74px, 13.7vw, 100px);
    letter-spacing: -4.8px;
    line-height: 0.94;
  }
  .title-line {
    padding-bottom: 10px;
  }
  .hero-description {
    font-size: 16px;
    line-height: 1.65;
    max-width: 410px;
    margin-top: 19px;
  }
  .hero-actions {
    flex-direction: row;
    align-items: center;
    margin-top: 27px;
    gap: 24px;
  }
  .hero-actions .btn {
    min-height: 52px;
    font-size: 12px;
    padding-inline: 20px;
    gap: 18px;
  }
  .hero-actions .text-link {
    font-size: 12px;
  }
  .availability {
    font-size: 10px;
    margin-top: 15px;
  }
  .hero-bottom {
    display: none;
  }
  .studio {
    height: 645px;
    width: min(590px, 100%);
    margin: 29px auto 0;
  }
  .phone-rig {
    width: 273px;
    margin-left: -136px;
    top: 39px;
  }
  .phone {
    height: 569px;
    border-radius: 40px;
    padding: 8px;
  }
  .phone-screen {
    padding: 10px 15px;
    border-radius: 32px;
  }
  .phone-status {
    height: 27px;
  }
  .app-top {
    margin: 17px 0;
  }
  .app-top h3 {
    font-size: 21px;
  }
  .app-top p {
    font-size: 9px;
  }
  .app-avatar {
    width: 32px;
    height: 32px;
  }
  .sales-card {
    padding: 14px 14px 9px;
  }
  .sales-amount {
    font-size: 40px;
    margin-top: 10px;
  }
  .sales-spark {
    height: 47px;
    margin-inline: -14px;
  }
  .app-metrics {
    margin-top: 11px;
    gap: 8px;
  }
  .app-metrics > div {
    padding: 10px;
  }
  .app-metrics span {
    font-size: 8px;
  }
  .app-section-label {
    font-size: 10px;
    margin-top: 18px;
  }
  .product-art {
    width: 38px;
    height: 40px;
  }
  .app-product {
    padding: 6px 0;
  }
  .app-product b {
    font-size: 10px;
  }
  .app-product small {
    font-size: 8px;
  }
  .app-bottom {
    inset-inline: 12px;
    bottom: 13px;
    padding: 7px;
  }
  .app-bottom .selected {
    padding: 8px;
    font-size: 8px;
  }
  .app-bottom .icon {
    width: 16px;
    height: 16px;
  }
  .app-add {
    width: 31px;
    height: 31px;
  }
  .sale-float {
    width: 242px;
    left: 0;
    bottom: 131px;
    padding: 12px 14px;
  }
  .sale-float > div > span {
    font-size: 9px;
  }
  .sale-float b {
    font-size: 15px;
  }
  .sale-float b small {
    font-size: 9px;
  }
  .sale-float .float-time {
    font-size: 7px;
  }
  .float-icon {
    width: 31px;
    height: 31px;
  }
  .weight-float {
    width: 157px;
    right: 0;
    top: 131px;
    padding: 15px 13px;
  }
  .weight-float > .eyebrow {
    font-size: 7px;
    letter-spacing: 0.5px;
  }
  .weight-float > strong {
    font-size: 33px;
  }
  .weight-float > strong small {
    font-size: 16px;
  }
  .weight-line {
    height: 20px;
    margin-block: 9px;
  }
  .weight-caption {
    font-size: 7px;
  }
  .coord-top {
    top: 4px;
    font-size: 7px;
  }
  .coord-side {
    right: -4px;
    top: 47%;
    font-size: 7px;
  }
  .studio-footer {
    bottom: -4px;
    gap: 11px;
  }
  .demo-caption {
    font-size: 7px;
  }
  .motion-toggle {
    height: 29px;
    width: 29px;
  }
  .trade-strip {
    padding-block: 21px;
  }
  .trade-group > span {
    font-size: 20px;
  }
  .trade-group > i {
    font-size: 23px;
    margin-inline: 32px;
  }
  .section-space {
    padding-block: 77px;
  }
  .section-top {
    display: block;
    margin-bottom: 40px;
  }
  .section-top .eyebrow {
    font-size: 8px;
    margin-bottom: 24px;
  }
  .section-top h2,
  h2 {
    font-size: 43px;
    letter-spacing: -1.8px;
    line-height: 1.09;
  }
  .section-intro {
    font-size: 13px;
    max-width: 300px;
    margin-top: 24px;
  }
  .experience-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .workflow-tabs {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    align-items: start;
  }
  .workflow-tab {
    display: block;
    border-bottom: none !important;
    padding-block: 18px 0;
    min-height: 145px;
  }
  .workflow-tab .tab-number {
    font-size: 8px;
    padding: 0;
    display: block;
    margin-bottom: 8px;
  }
  .workflow-tab strong {
    font-size: 17px;
    line-height: 1.2;
    letter-spacing: -0.3px;
    display: block;
  }
  .workflow-tab > .icon {
    display: none;
  }
  .tab-description {
    font-size: 11px;
    line-height: 1.6;
    max-height: none;
    opacity: 1;
    margin-top: 11px;
    max-width: 180px;
  }
  .active .tab-description {
    margin-top: 11px;
    max-height: none;
  }
  .workflow-tab:not(.active) .tab-description {
    color: #8e9b82;
  }
  .workflow-tab.active .tab-number {
    color: var(--lime);
  }
  .workspace-chrome {
    padding: 16px 20px;
  }
  #workspace-preview {
    padding: 26px;
    min-height: 365px;
  }
  .workspace-note {
    padding-inline: 26px;
  }
  .panel-head {
    margin-bottom: 22px;
  }
  .panel-head h3 {
    font-size: 29px;
  }
  .panel-chip {
    font-size: 8px;
  }
  .inventory-table {
    font-size: 12px;
  }
  .table-piece .product-art {
    width: 37px;
    height: 40px;
  }
  .inventory-table .table-piece {
    gap: 12px;
  }
  .inventory-table td:last-child {
    font-size: 11px;
  }
  .inventory-table th {
    font-size: 8px;
  }
  .inventory-overview b {
    font-size: 27px;
  }
  .inventory-table td {
    padding-block: 11px;
  }
  .catalogue-demo {
    gap: 10px;
  }
  .catalogue-piece {
    padding: 12px 9px;
  }
  .catalogue-piece svg {
    height: 126px;
  }
  .catalogue-piece h4 {
    font-size: 11px;
  }
  .catalogue-footer p {
    font-size: 9px;
  }
  .share-chips > span {
    font-size: 8px;
    padding: 6px;
  }
  .receipt-demo {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
  .receipt-jewel svg {
    width: 175px;
    height: 175px;
  }
  .receipt-paper {
    padding: 22px 18px;
  }
  .receipt-line,
  .receipt-line b {
    font-size: 10px;
  }
  .receipt-total {
    font-size: 26px;
  }
  .precision-section {
    padding-block: 65px;
  }
  .precision-shell {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .precision-copy > .eyebrow {
    font-size: 8px;
  }
  .precision-copy h2 {
    font-size: 49px;
  }
  .precision-copy > p:not(.eyebrow) {
    font-size: 15px;
    max-width: 440px;
    margin-top: 19px;
  }
  .precision-object {
    width: 260px;
    margin-top: 4px;
    margin-inline-start: -9px;
  }
  .example-note {
    margin-top: -9px;
    max-width: 390px;
    font-size: 9px;
  }
  .calculator {
    padding: 28px;
  }
  .calc-top {
    font-size: 9px;
  }
  .calc-fields label {
    font-size: 11px;
  }
  .input-wrap input {
    font-size: 22px;
    min-height: 54px;
  }
  .calc-results strong {
    font-size: 33px;
    letter-spacing: -1.4px;
  }
  .calc-results > div {
    padding: 18px 15px;
  }
  .calc-results > div > .result-formula {
    font-size: 7px;
  }
  .calc-results > div > span {
    font-size: 11px;
  }
  .calc-footnote {
    font-size: 9px;
  }
  .breakdown-labels {
    font-size: 9px;
  }
  .confidence-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .confidence-card {
    padding: 0 29px 30px;
  }
  .sync-art,
  .language-art {
    height: 248px;
  }
  .confidence-card h3 {
    font-size: 28px;
  }
  .confidence-card p:not(.eyebrow) {
    font-size: 14px;
    max-width: 470px;
  }
  .confidence-card .eyebrow {
    font-size: 8px;
  }
  .language-art button {
    font-size: 26px;
    padding: 12px 20px;
  }
  .language-art button:last-of-type {
    font-size: 24px;
  }
  .story {
    padding-block: 60px 72px;
  }
  .story-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .story-art {
    height: 295px;
    max-width: 470px;
    width: 100%;
    margin-inline: auto;
  }
  .story-orbit {
    width: 300px;
    height: 200px;
  }
  .story-orbit.orbit-two {
    width: 260px;
    height: 260px;
  }
  .story-art > img {
    width: 105px;
  }
  .story-location {
    font-size: 7px;
    left: 0;
    bottom: 0;
  }
  .story-copy h2 {
    font-size: 44px;
  }
  .story-copy > p:not(.eyebrow) {
    font-size: 15px;
    max-width: 500px;
  }
  .story-copy .eyebrow {
    font-size: 8px;
  }
  .story-copy .text-link {
    margin-top: 21px;
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 37px;
  }
  .faq-layout .eyebrow {
    font-size: 8px;
    margin-bottom: 23px;
  }
  .faq-contact {
    margin-top: 19px;
  }
  .faq-list summary {
    font-size: 16px;
    padding-block: 23px;
  }
  .faq-answer p {
    font-size: 13px;
    line-height: 1.8;
  }
  .final-cta {
    padding-block: 70px 76px;
  }
  .cta-inner > .eyebrow {
    font-size: 8px;
    letter-spacing: 0.8px;
    gap: 8px;
    margin-bottom: 27px;
  }
  .cta-inner h2 {
    font-size: clamp(62px, 11.9vw, 86px);
    letter-spacing: -3.4px;
  }
  .cta-inner h2 > span:nth-child(3) {
    right: -52px;
    top: -12px;
    font-size: 35px;
  }
  .cta-inner > p:not(.eyebrow) {
    font-size: 14px;
    max-width: 315px;
    margin-block: 23px;
  }
  .cta-inner > .btn {
    min-width: 225px;
    font-size: 13px;
  }
  .cta-note {
    font-size: 9px;
    margin-top: 17px;
  }
  .cta-orbits > i {
    width: 170%;
  }
  .cta-orbits > i:nth-child(2) {
    width: 150%;
  }
  .cta-orbits > i:nth-child(3) {
    width: 180%;
  }
  footer {
    padding-top: 44px;
  }
  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 33px 20px;
    padding-bottom: 36px;
  }
  .footer-main > div:first-child {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 25px;
  }
  .footer-main p {
    font-size: 11px;
    margin: 0;
    max-width: 210px;
  }
  .footer-main .brand img {
    width: 95px;
  }
  .footer-links {
    gap: 14px;
  }
  .footer-links a {
    font-size: 12px;
  }
  .footer-bottom {
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 8px;
    align-items: center;
  }
  .footer-bottom > span:nth-child(2) {
    order: 3;
    width: 100%;
    padding-top: 4px;
  }
  .font-credit {
    margin-inline-start: auto;
    font-size: 7px;
  }
  [lang='fr'] .hero h1 {
    font-size: clamp(62px, 11.6vw, 85px);
    letter-spacing: -3.8px;
  }
  [lang='fr'] .hero-description {
    font-size: 16px;
    max-width: 430px;
  }
  [lang='fr'] .hero-actions .btn {
    font-size: 12px;
    padding-inline: 18px;
  }
  [lang='fr'] .hero-actions {
    gap: 21px;
  }
  [lang='fr'] h2 {
    font-size: 41px;
  }
  [lang='fr'] .workflow-tab strong {
    font-size: 16px;
  }
  [lang='ar'] .hero-copy {
    padding-top: 39px;
  }
  [lang='ar'] .hero h1 {
    font-size: clamp(65px, 13vw, 85px);
    line-height: 1.4;
    letter-spacing: -1.5px;
  }
  [lang='ar'] .hero-description {
    font-size: 15px;
    max-width: 470px;
    margin-top: 13px;
  }
  [lang='ar'] .hero-copy > .eyebrow {
    font-size: 9px;
  }
  [lang='ar'] .hero-actions {
    flex-direction: row;
    gap: 24px;
  }
  [lang='ar'] .brand > span {
    font-size: 8px;
  }
  [lang='ar'] .app-top h3 {
    font-size: 17px;
  }
  [lang='ar'] .app-top {
    margin: 13px 0;
  }
  [lang='ar'] .weight-float > .eyebrow {
    font-size: 8px;
  }
  [lang='ar'] .weight-caption {
    font-size: 7px;
  }
  [lang='ar'] .sale-float .float-time {
    font-size: 7px;
  }
  [lang='ar'] .tab-description {
    font-size: 10px;
    line-height: 1.9;
  }
  [lang='ar'] .workflow-tab strong {
    font-size: 15px;
    line-height: 1.6;
  }
  [lang='ar'] .workflow-tab {
    min-height: 163px;
  }
  [lang='ar'] h2 {
    font-size: 36px;
    line-height: 1.5;
  }
  [lang='ar'] .precision-copy h2 {
    font-size: 40px;
  }
  [lang='ar'] .precision-copy > .eyebrow {
    font-size: 10px;
  }
  [lang='ar'] .confidence-card h3 {
    font-size: 24px;
  }
  [lang='ar'] .confidence-card p:not(.eyebrow) {
    font-size: 13px;
  }
  [lang='ar'] .story-copy h2 {
    font-size: 38px;
  }
  [lang='ar'] .cta-inner h2 {
    font-size: clamp(55px, 11vw, 75px);
  }
  [lang='ar'] .cta-inner h2 > span:nth-child(3) {
    left: -50px;
    top: 0;
    font-size: 35px;
  }
  [lang='ar'] .cta-inner > .eyebrow {
    font-size: 9px;
    letter-spacing: 0;
  }
  [lang='ar'] .footer-bottom {
    font-size: 8px;
  }
}
@media (max-width: 420px) {
  .shell {
    width: calc(100% - 36px);
  }
  .brand > span {
    display: none;
  }
  .header-inner {
    height: 66px;
  }
  .hero-copy {
    padding-top: 39px;
  }
  .hero h1 {
    font-size: 20.1vw;
    letter-spacing: -4px;
  }
  .hero-copy > .eyebrow {
    font-size: 7px;
    letter-spacing: 0.7px;
  }
  .hero-description {
    font-size: 15px;
  }
  .hero-actions {
    gap: 17px;
  }
  .hero-actions .btn {
    padding-inline: 16px;
    font-size: 11px;
    gap: 14px;
  }
  .hero-actions .text-link {
    font-size: 11px;
    gap: 7px;
  }
  .play-icon {
    width: 23px;
    height: 23px;
    font-size: 7px;
  }
  .availability {
    font-size: 9px;
  }
  .studio {
    height: 601px;
    margin-top: 30px;
  }
  .phone-rig {
    width: 249px;
    margin-left: -124px;
    top: 35px;
  }
  .phone {
    height: 532px;
    border-radius: 37px;
    padding: 7px;
  }
  .phone-screen {
    border-radius: 30px;
    padding: 9px 12px;
  }
  .phone-status {
    height: 25px;
  }
  .app-top {
    margin: 13px 0;
  }
  .app-top h3 {
    font-size: 19px;
  }
  .app-top p {
    font-size: 8px;
  }
  .sales-card {
    padding: 12px 12px 8px;
  }
  .sales-amount {
    font-size: 36px;
    margin-top: 8px;
  }
  .sales-spark {
    height: 41px;
    margin-inline: -12px;
  }
  .app-metrics {
    margin-top: 9px;
  }
  .app-metrics > div {
    padding: 8px;
  }
  .app-metrics span {
    font-size: 7px;
  }
  .app-section-label {
    margin-top: 15px;
    font-size: 9px;
  }
  .product-art {
    height: 37px;
    width: 35px;
  }
  .app-product b {
    font-size: 9px;
  }
  .app-product {
    padding-block: 5px;
  }
  .app-product small {
    font-size: 7px;
  }
  .app-bottom {
    inset-inline: 10px;
    bottom: 11px;
    padding: 6px;
  }
  .app-bottom .selected {
    font-size: 7px;
    padding: 7px;
  }
  .app-bottom .icon {
    width: 15px;
    height: 15px;
  }
  .app-add {
    width: 29px;
    height: 29px;
  }
  .weight-float {
    width: 124px;
    right: -5px;
    top: 123px;
    padding: 11px;
  }
  .weight-float > .eyebrow {
    font-size: 5.5px;
    letter-spacing: 0.3px;
  }
  .weight-float > strong {
    font-size: 28px;
  }
  .weight-float > strong small {
    font-size: 13px;
  }
  .weight-line {
    margin-block: 7px;
  }
  .weight-caption {
    font-size: 6px;
    line-height: 1.7;
  }
  .sale-float {
    width: 217px;
    left: -5px;
    bottom: 132px;
    padding: 11px 12px;
    gap: 8px;
  }
  .sale-float > div > span {
    font-size: 8px;
  }
  .sale-float b {
    font-size: 14px;
  }
  .float-icon {
    width: 28px;
    height: 28px;
  }
  .sale-float .float-time {
    font-size: 6px;
  }
  .coord-side {
    display: none;
  }
  .coord-top {
    font-size: 6px;
    top: 4px;
  }
  .studio-footer {
    bottom: 0;
  }
  .demo-caption {
    font-size: 6px;
  }
  .trade-group > span {
    font-size: 18px;
  }
  .trade-group > i {
    margin-inline: 25px;
    font-size: 22px;
  }
  h2,
  .section-top h2 {
    font-size: 37px;
    letter-spacing: -1.5px;
  }
  .section-top .eyebrow {
    font-size: 7px;
    gap: 8px;
  }
  .section-space {
    padding-block: 65px;
  }
  .workflow-tabs {
    gap: 9px;
  }
  .workflow-tab strong {
    font-size: 15px;
  }
  .tab-description {
    font-size: 10px;
  }
  .workflow-tab {
    min-height: 144px;
  }
  #workspace-preview {
    padding: 22px 17px;
    min-height: 350px;
  }
  .workspace-chrome {
    padding-inline: 17px;
  }
  .workspace-note {
    padding-inline: 17px;
    font-size: 6.5px;
  }
  .panel-head h3 {
    font-size: 26px;
  }
  .panel-head {
    gap: 9px;
    margin-bottom: 18px;
  }
  .panel-chip {
    font-size: 7px;
    padding: 6px;
  }
  .panel-eyebrow {
    font-size: 7px;
  }
  .inventory-table {
    font-size: 10px;
  }
  .inventory-table .table-piece {
    gap: 7px;
  }
  .table-piece .product-art {
    width: 29px;
    height: 34px;
  }
  .inventory-table td:last-child {
    font-size: 9px;
  }
  .table-piece small {
    font-size: 7px;
  }
  .inventory-overview b {
    font-size: 24px;
  }
  .inventory-overview span {
    font-size: 7px;
  }
  .inventory-overview > div + div {
    padding-inline-start: 20px;
  }
  .inventory-overview {
    gap: 20px;
  }
  .catalogue-demo {
    gap: 6px;
  }
  .catalogue-piece {
    padding: 8px 4px;
  }
  .catalogue-piece svg {
    height: 100px;
  }
  .catalogue-piece h4 {
    font-size: 9px;
  }
  .catalogue-piece p {
    font-size: 7px;
  }
  .catalogue-footer p {
    font-size: 8px;
  }
  .catalogue-footer {
    gap: 6px;
  }
  .share-chips {
    gap: 4px;
  }
  .share-chips > span {
    font-size: 6px;
    padding: 5px;
  }
  .qr-art {
    width: 25px;
    height: 25px;
  }
  .receipt-demo {
    gap: 15px;
  }
  .receipt-jewel svg {
    width: 145px;
    height: 145px;
  }
  .receipt-paper {
    padding: 18px 12px;
  }
  .receipt-line,
  .receipt-line b {
    font-size: 8px;
  }
  .receipt-total {
    font-size: 23px;
  }
  .precision-section {
    padding-block: 54px;
  }
  .precision-copy > .eyebrow {
    font-size: 7px;
    letter-spacing: 0.7px;
  }
  .precision-copy h2 {
    font-size: 42px;
  }
  .precision-copy > p:not(.eyebrow) {
    font-size: 14px;
  }
  .example-note {
    font-size: 8px;
  }
  .calculator {
    padding: 23px 19px;
  }
  .calc-top {
    font-size: 8px;
  }
  .live-pill {
    font-size: 6px;
  }
  .material-options button {
    font-size: 11px;
  }
  .calc-fields {
    gap: 15px 12px;
  }
  .calc-fields label {
    font-size: 10px;
  }
  .input-wrap input {
    font-size: 20px;
    min-height: 50px;
  }
  .calc-results > div {
    padding: 15px 10px;
  }
  .calc-results strong {
    font-size: 27px;
    letter-spacing: -1.2px;
    gap: 4px;
  }
  .calc-results > div > .result-formula {
    font-size: 6px;
  }
  .breakdown-labels {
    font-size: 8px;
  }
  .confidence-card {
    padding-inline: 23px;
  }
  .confidence-card h3 {
    font-size: 25px;
  }
  .confidence-card p:not(.eyebrow) {
    font-size: 13px;
  }
  .language-art button {
    font-size: 23px;
    padding: 10px 14px;
  }
  .language-art button:last-of-type {
    font-size: 21px;
  }
  .story-orbit {
    width: 265px;
    height: 185px;
  }
  .story-orbit.orbit-two {
    width: 240px;
    height: 240px;
  }
  .story-copy h2 {
    font-size: 38px;
  }
  .story-copy > p:not(.eyebrow) {
    font-size: 14px;
  }
  .story-location {
    font-size: 6px;
  }
  .faq-list summary {
    font-size: 15px;
    gap: 20px;
  }
  .faq-answer p {
    font-size: 12px;
  }
  .cta-inner h2 {
    font-size: 16vw;
    letter-spacing: -2.7px;
  }
  .cta-inner h2 > span:nth-child(3) {
    font-size: 28px;
    right: -36px;
    top: -10px;
  }
  .cta-inner > .eyebrow {
    font-size: 7px;
    letter-spacing: 0.4px;
    gap: 7px;
  }
  .cta-inner > p:not(.eyebrow) {
    font-size: 13px;
    max-width: 280px;
  }
  .cta-note {
    font-size: 8px;
  }
  .footer-main > div:first-child {
    gap: 20px;
  }
  .footer-main p {
    font-size: 10px;
    max-width: 166px;
  }
  .footer-main .brand img {
    width: 88px;
  }
  .footer-bottom {
    font-size: 7px;
  }
  .dialog-content {
    padding: 32px 25px;
  }
  .dialog-content h2 {
    font-size: 33px;
  }
  .dialog-content .eyebrow {
    font-size: 7px;
  }
  .dialog-content > p:not(.eyebrow) {
    font-size: 11px;
  }
  [lang='fr'] .hero h1 {
    font-size: 16.4vw;
    letter-spacing: -2.5px;
  }
  [lang='fr'] .hero-description {
    font-size: 14px;
  }
  [lang='fr'] .hero-actions .btn {
    font-size: 10px;
    padding-inline: 14px;
    gap: 11px;
  }
  [lang='fr'] .hero-actions {
    gap: 14px;
  }
  [lang='fr'] h2 {
    font-size: 36px;
  }
  [lang='fr'] .workflow-tab strong {
    font-size: 14px;
  }
  [lang='ar'] .hero h1 {
    font-size: 16.5vw;
    letter-spacing: -1px;
  }
  [lang='ar'] .hero-copy > .eyebrow {
    font-size: 8px;
  }
  [lang='ar'] .hero-description {
    font-size: 13px;
  }
  [lang='ar'] .hero-actions {
    gap: 17px;
  }
  [lang='ar'] .hero-actions .btn {
    font-size: 10px;
    gap: 12px;
  }
  [lang='ar'] .hero-actions .text-link {
    font-size: 10px;
  }
  [lang='ar'] .app-top h3 {
    font-size: 16px;
  }
  [lang='ar'] .app-top {
    margin: 10px 0;
  }
  [lang='ar'] .weight-float > .eyebrow {
    font-size: 6px;
  }
  [lang='ar'] .weight-caption {
    font-size: 6px;
  }
  [lang='ar'] .sale-float .float-time {
    font-size: 6px;
  }
  [lang='ar'] h2 {
    font-size: 32px;
  }
  [lang='ar'] .section-top h2 {
    font-size: 32px;
    line-height: 1.5;
  }
  [lang='ar'] .workflow-tab strong {
    font-size: 13px;
  }
  [lang='ar'] .tab-description {
    font-size: 9px;
  }
  [lang='ar'] .precision-copy h2 {
    font-size: 35px;
  }
  [lang='ar'] .precision-copy > .eyebrow {
    font-size: 8px;
  }
  [lang='ar'] .calc-results strong {
    font-size: 25px;
  }
  [lang='ar'] .confidence-card h3 {
    font-size: 22px;
  }
  [lang='ar'] .cta-inner h2 {
    font-size: 14vw;
  }
  [lang='ar'] .cta-inner h2 > span:nth-child(3) {
    left: -37px;
    font-size: 26px;
  }
  [lang='ar'] .cta-inner > .eyebrow {
    font-size: 8px;
  }
  [lang='ar'] .footer-bottom {
    font-size: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion='on']) {
    scroll-behavior: auto;
  }
  html:not([data-motion='on']) *,
  html:not([data-motion='on']) *:before,
  html:not([data-motion='on']) *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .chart-line {
    stroke-dashoffset: 0;
  }
  html.enhanced:not([data-motion='on']) [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}
.calc-results strong.long-number {
  font-size: 20px;
  letter-spacing: -0.7px;
}
.calc-results strong bdi {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 420px) {
  [lang='fr'] .hero h1 {
    font-size: 14.8vw;
  }
}
@media (max-width: 360px) {
  .language-art button {
    font-size: 21px;
    padding: 11px 10px;
  }
  .language-art button + button {
    margin-inline-start: -8px;
  }
  .language-art button:last-of-type {
    font-size: 20px;
  }
}

/* ==========================================================================
   3. PRODUCT BRAND, FEATURE SECTIONS, THEMES AND READING MODE
   ========================================================================== */

/* Elaris: graphite, electric lime and muted champagne; dark is the flagship. */
:root {
  --bg: #10120f;
  --surface: #1b1e1a;
  --surface-2: #252a23;
  --line: #394034;
  --ink: #f4f5ee;
  --muted: #b5bcaf;
  --lime: #c6fe21;
  --accent: #c7bea5;
  --gold: #e0be6e;
  --silver: #c3cad4;
  --gain: #4ccfb0;
  --loss: #f28ba8;
  --success: #62d58f;
  --warning: #f6c453;
  --danger: #f27c72;
  --body: 'IBM Plex Sans', 'IBM Plex Sans Arabic', Arial, sans-serif;
  --display: Kufam, 'IBM Plex Sans Arabic', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --card: #1b1e1a;
  --inset: #151914;
  --brand-link: #c7bea5;
}
:root[lang='ar'] {
  --body: 'IBM Plex Sans Arabic', 'IBM Plex Sans', Arial, sans-serif;
}
:root[data-theme='light'] {
  --bg: #f5f6f0;
  --surface: #fff;
  --surface-2: #e8ece2;
  --line: #c5cdbd;
  --ink: #191b17;
  --muted: #526048;
  --card: #fff;
  --inset: #edf0e7;
  --brand-link: #65583c;
  --accent: #65583c;
  --gain: #0b6e5f;
  --loss: #b03a5b;
  --success: #18794e;
  --warning: #946200;
  --danger: #ba1a1a;
  color-scheme: light;
}
.brand-v3 {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
}
.brand-v3 h1,
.brand-v3 h2,
.brand-v3 h3,
.brand-v3 .sales-amount,
.brand-v3 .inventory-overview b {
  font-family: var(--display);
  font-weight: 400;
}
.brand-v3 h2 {
  font-size: clamp(33px, 3.8vw, 53px);
  line-height: 1.25;
  letter-spacing: -1.5px;
}
.brand-v3 .muted-heading {
  color: var(--muted);
}
.brand-v3 .section-space {
  padding-block: 104px;
}
.brand-v3 .section-top {
  margin-bottom: 44px;
}
.brand-v3 .section-top .eyebrow {
  margin-bottom: 20px;
}
.brand-v3 .eyebrow {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--brand-link);
}
.brand-v3 .section-number {
  color: var(--brand-link);
  font-size: 17px;
}
.brand-v3 .section-intro {
  font-size: 16px;
  line-height: 1.7;
  max-width: 260px;
}
.brand-v3 .text-link {
  font-size: 15px;
  color: var(--brand-link);
}
.brand-v3 .brand > span {
  font-size: 9px;
  color: var(--muted);
}
.brand-v3 .brand img {
  width: 106px;
}
.brand-v3 .site-header {
  background: #10120ff2;
  border-color: var(--line);
}
.brand-v3 .header-inner {
  height: 84px;
  gap: 20px;
}
.brand-v3 .header-actions {
  gap: 11px;
}
.brand-v3 .desktop-nav {
  gap: 26px;
  margin-inline-end: 12px;
}
.brand-v3 .desktop-nav a {
  font-size: 14px;
}
.brand-v3 .icon-button {
  border-color: var(--line);
  color: var(--muted);
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .icon-button:hover {
    color: var(--ink);
    background: var(--surface-2);
  }
}
.brand-v3 .theme-toggle .icon {
  width: 17px;
  height: 17px;
}
.brand-v3 .comfort-toggle {
  font-size: 15px;
  letter-spacing: -1px;
  font-family: var(--body);
}
.brand-v3 .comfort-toggle[aria-pressed='true'] {
  color: var(--brand-link);
  border-color: var(--brand-link);
}
.brand-v3 .btn {
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  min-height: 54px;
}
.brand-v3 .btn-lime {
  background: var(--lime);
  color: #191b17;
  box-shadow: none;
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .btn-lime:hover {
    background: #d4ff59;
    box-shadow: 0 0 28px #c6fe2117;
  }
}
.brand-v3 .btn-outline {
  color: var(--ink);
  border: 1px solid var(--line);
  background: transparent;
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .btn-outline:hover {
    border-color: var(--brand-link);
    background: var(--surface-2);
    transform: translateY(-2px);
  }
}
.brand-v3 .header-cta {
  font-size: 13px;
  min-height: 42px;
  padding: 10px 16px;
  gap: 14px;
}
.brand-v3 .language-control select {
  font-family: var(--body);
  font-size: 13px;
  width: 48px;
}
.brand-v3 .mobile-nav {
  background: var(--card);
  border-color: var(--line);
}
.brand-v3 .hero-copy {
  padding-top: 35px;
}
.brand-v3 .hero-copy > .eyebrow {
  font-size: 10px;
  letter-spacing: 0.9px;
  margin-bottom: 28px;
  max-width: 460px;
}
.brand-v3 .hero h1 {
  font-size: clamp(62px, 6.5vw, 90px);
  line-height: 1.08;
  letter-spacing: -3.8px;
}
.brand-v3 .title-line {
  padding-bottom: 4px;
}
.brand-v3 .lime-text {
  color: var(--accent);
}
.brand-v3 .hero-description {
  font-size: 18px;
  line-height: 1.75;
  max-width: 470px;
  margin-top: 25px;
}
.brand-v3 .hero-actions {
  gap: 22px;
  flex-wrap: wrap;
}
.brand-v3 .hero-actions .text-link {
  font-size: 14px;
  max-width: 210px;
}
.brand-v3 .play-icon {
  border-color: var(--brand-link);
  color: var(--brand-link);
}
.brand-v3 .availability {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 17px;
}
.brand-v3 .hero-bottom {
  font-size: 10px;
  color: var(--muted);
  margin-top: 44px;
  gap: 14px;
}
.brand-v3 .tiny-star {
  color: var(--accent);
}
.brand-v3 .studio-coordinate {
  color: #a4b197;
}
.brand-v3 .phone-screen {
  font-family: var(--body);
  background: #10120f;
}
.brand-v3 .app-top h3 {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.4;
}
.brand-v3 .app-top p {
  color: #c1c9ba;
}
.brand-v3 .sales-card {
  background: #1b1e1a;
  color: #f4f5ee;
  border: 1px solid #3d4836;
}
.brand-v3 .card-label {
  color: #b5bcaf;
}
.brand-v3 .sales-amount {
  font-size: 36px;
  letter-spacing: -1.5px;
  line-height: 1.2;
}
.brand-v3 .sales-amount small {
  color: #b5bcaf;
}
.brand-v3 .sales-spark .chart-line {
  stroke: #c7bea5;
}
.brand-v3 .sales-meta {
  border-color: #414c39;
  color: #c7cfbd;
}
.brand-v3 .app-metrics > div {
  background: #1b1e1a;
  border-color: #3d4836;
}
.brand-v3 .app-metrics span {
  color: #b5bcaf;
}
.brand-v3 .app-bottom {
  background: #1b1e1a;
  border-color: #4b5942;
}
.brand-v3 .app-bottom .selected {
  background: #c7bea517;
  color: #c7bea5;
}
.brand-v3 .app-add {
  background: #c6fe21;
  color: #191b17;
}
.brand-v3 .app-avatar {
  color: #c7bea5;
  border-color: #c7bea555;
}
.brand-v3 .float-card {
  background: #1b1e1af2;
  border-color: #57644b77;
}
.brand-v3 .float-icon {
  color: #4ccfb0;
  background: #4ccfb01a;
}
.brand-v3 .sale-float b {
  color: #4ccfb0;
}
.brand-v3 .weight-float > .eyebrow {
  color: #c7bea5;
  font-size: 8px;
  letter-spacing: 0.4px;
}
.brand-v3 .weight-float > strong {
  font-family: var(--display);
  font-size: 32px;
}
.brand-v3 .weight-line i:nth-child(8) {
  background: #c7bea5;
}
.brand-v3 .demo-caption,
.brand-v3 .workspace-note {
  font-size: 10px;
  line-height: 1.5;
}
.brand-v3 .studio-footer {
  gap: 10px;
}
.brand-v3 .trade-strip {
  background: var(--card);
  border-color: var(--line);
}
.brand-v3 .trade-group > span {
  font-size: 23px;
}
.brand-v3 .trade-group > i {
  color: var(--brand-link);
}
.brand-v3 .workflow-tab {
  color: var(--muted);
}
.brand-v3 .workflow-tab strong {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.45;
  letter-spacing: -0.6px;
}
.brand-v3 .tab-description {
  font-size: 16px;
  line-height: 1.65;
}
.brand-v3 .active .tab-description {
  max-height: 180px;
}
.brand-v3 .workflow-tab.active strong {
  color: var(--ink);
}
.brand-v3 .workflow-tab.active:before {
  background: var(--brand-link);
}
.brand-v3 .workflow-tab.active > .icon {
  color: var(--brand-link);
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .workflow-tab:hover strong {
    color: var(--brand-link);
  }
}
.brand-v3 .workspace-frame {
  background: var(--card);
  border-color: var(--line);
}
.brand-v3 .workspace-chrome,
.brand-v3 .workspace-note {
  border-color: var(--line);
}
.brand-v3 .workspace-chrome > span,
.brand-v3 .workspace-note {
  color: var(--muted);
}
.brand-v3 .secure-dot {
  background: var(--brand-link);
}
.brand-v3 #workspace-preview {
  min-height: 400px;
}
.brand-v3 .panel-head h3 {
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: -0.7px;
}
.brand-v3 .panel-eyebrow {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.6;
}
.brand-v3 .panel-chip {
  color: var(--brand-link);
  background: #c7bea50b;
  border-color: #c7bea544;
  font-size: 10px;
  white-space: normal;
  max-width: 100px;
  text-align: center;
}
.brand-v3 .inventory-overview span {
  color: var(--muted);
  font-size: 11px;
}
.brand-v3 .inventory-overview b {
  font-size: 25px;
}
.brand-v3 .inventory-overview > div + div {
  border-color: var(--line);
}
.brand-v3 .inventory-table {
  font-size: 14px;
}
.brand-v3 .inventory-table thead {
  color: var(--muted);
  font-size: 11px;
}
.brand-v3 .inventory-table td {
  border-color: var(--line);
}
.brand-v3 .inventory-table td:last-child {
  font-size: 12px;
}
.brand-v3 .table-piece small {
  color: var(--muted);
  font-size: 10px;
}
.brand-v3 .table-piece .product-art {
  background: var(--inset);
}
.brand-v3 .jewel-tag {
  font-size: 10px;
  border-color: var(--line);
}
.brand-v3 .receipt-jewel {
  background: radial-gradient(ellipse, #c7bea50c, transparent 70%);
}
.brand-v3 .catalogue-piece {
  background: var(--inset);
  border-color: var(--line);
}
.brand-v3 .catalogue-piece h4 {
  font-size: 13px;
  line-height: 1.5;
}
.brand-v3 .catalogue-piece p {
  font-size: 10px;
}
.brand-v3 .catalogue-footer {
  border-color: var(--line);
}
.brand-v3 .catalogue-footer p {
  font-size: 10px;
}
.brand-v3 .share-chips {
  color: var(--brand-link);
  font-size: 9px;
}
.brand-v3 .share-chips > span {
  border-color: var(--line);
}
.brand-v3 .qr-art {
  fill: var(--brand-link);
}
.feature-lead {
  font-size: 18px;
  color: var(--muted);
  line-height: 1.8;
}
.problem-section {
  border-bottom: 1px solid var(--line);
}
.problem-section > .shell > .eyebrow {
  margin-bottom: 28px;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px;
}
.problem-grid article + article {
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 38px;
}
.problem-icon {
  display: block;
  color: var(--brand-link);
  margin-bottom: 24px;
}
.problem-icon > .icon {
  width: 28px;
  height: 28px;
}
.problem-grid h3 {
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.6px;
  max-width: 340px;
}
.problem-grid p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 15px;
  max-width: 340px;
}
.how-steps {
  padding: 24px 0 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  border-top: 1px solid var(--line);
  margin: 45px 0 0;
}
.how-steps li {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
}
.step-count {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font: 11px var(--mono);
  color: var(--brand-link);
  flex: none;
}
.trust-section {
  background: var(--inset);
  border-block: 1px solid var(--line);
}
.trust-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;
  gap: 70px;
  align-items: center;
}
.trust-copy > .feature-lead {
  font-size: 18px;
}
.trust-benefits {
  display: grid;
  gap: 28px;
  margin-top: 35px;
}
.trust-benefits article {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.trust-benefits article > span {
  color: var(--brand-link);
  padding-top: 4px;
}
.trust-benefits h3 {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.25px;
}
.trust-benefits p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 6px;
}
.verification-scene {
  background: var(--card);
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 24px;
  min-width: 0;
}
.demo-label {
  font: 10px/1.7 var(--mono);
  letter-spacing: 0.4px;
  color: var(--muted);
}
.verification-scene > .demo-label {
  margin-bottom: 25px;
  text-align: center;
}
.verification-pair {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
  align-items: center;
  min-height: 360px;
}
.trust-receipt {
  position: relative;
  background: #f4f5ee;
  color: #191b17;
  padding: 24px 18px 20px;
  transform: rotate(-4deg);
  box-shadow: 0 12px 25px #0002;
  border-radius: 5px 5px 0 0;
  direction: inherit;
}
.trust-receipt:after {
  content: '';
  position: absolute;
  bottom: -6px;
  inset-inline: 0;
  height: 7px;
  background:
    linear-gradient(135deg, transparent 33.33%, #f4f5ee 0, #f4f5ee 66.66%, transparent 0),
    linear-gradient(225deg, transparent 33.33%, #f4f5ee 0, #f4f5ee 66.66%, transparent 0);
  background-size: 10px 10px;
  transform: rotate(180deg);
}
.receipt-logo {
  width: 89px;
  height: auto;
  filter: brightness(0);
  margin-inline: auto;
}
.trust-receipt > p {
  font-size: 12px;
  text-align: center;
  color: #526048;
  margin-top: 15px;
}
.receipt-id {
  font: 10px var(--mono);
  display: block;
  text-align: center;
  color: #5e6a56;
  margin-top: 6px;
}
.receipt-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.7;
  border-block: 1px dashed #b6c0aa;
  padding-block: 15px;
  margin-block: 17px 12px;
}
.receipt-piece .icon {
  width: 16px;
  height: 16px;
}
.receipt-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font: 11px var(--mono);
}
.receipt-data > bdi:last-child {
  font-size: 19px;
  letter-spacing: -1px;
}
.receipt-qr {
  margin: 19px auto 0;
  width: 54px;
  height: 54px;
  position: relative;
}
.receipt-qr svg {
  height: 100%;
  width: 100%;
  fill: #191b17;
}
.scan-line {
  display: none;
  position: absolute;
  height: 2px;
  background: #65583c;
  inset-inline: -10px;
  top: -6px;
  box-shadow: 0 0 10px #c7bea5;
}
.is-verified .scan-line {
  display: block;
  animation: receipt-scan 2.5s var(--ease) both;
}
.verification-output {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 22px 17px;
  min-width: 0;
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
}
.verify-shield {
  color: var(--brand-link);
  display: inline-flex;
}
.verify-shield .icon {
  width: 30px;
  height: 30px;
}
.verification-output h3 {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.4px;
}
.verification-output > p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
}
.verification-output[data-state='issued'] .verify-shield,
.verification-output[data-state='issued'] h3 {
  color: var(--success);
}
.verification-output[data-state='cancelled'] .verify-shield,
.verification-output[data-state='cancelled'] h3 {
  color: var(--danger);
}
.verification-output[data-state='corrected'] .verify-shield,
.verification-output[data-state='corrected'] h3 {
  color: var(--warning);
}
.record-trail {
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.record-trail h4 {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
  margin: 0 0 10px;
}
.record-trail ol {
  margin: 0;
  padding-inline-start: 15px;
}
.record-trail li {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  padding-block: 3px;
}
.record-trail li::marker {
  color: var(--brand-link);
}
.receipt-state {
  display: flex;
  gap: 5px;
  background: var(--inset);
  padding: 4px;
  border-radius: 10px;
  margin-top: 25px;
}
.receipt-state button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  flex: 1;
  min-height: 44px;
  font-size: 12px;
  padding: 8px 6px;
  line-height: 1.6;
}
.receipt-state button.active {
  background: var(--card);
  border-color: var(--line);
  color: var(--brand-link);
}
.brand-v3 .verify-button {
  margin-top: 16px;
  width: 100%;
  font-size: 14px;
  min-height: 49px;
  gap: 10px;
}
.verify-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 11px;
  text-align: center;
}
.brand-v3 .precision-section {
  background: #f5f6f0;
  color: #191b17;
}
.brand-v3 .precision-copy h2 {
  font-size: clamp(37px, 4vw, 57px);
}
.brand-v3 .precision-copy > .eyebrow {
  color: #65583c;
  font-size: 10px;
}
.brand-v3 .precision-soft {
  color: #5e6a55;
}
.brand-v3 .precision-copy > p:not(.eyebrow) {
  font-size: 17px;
  color: #526048;
  line-height: 1.8;
  max-width: 410px;
}
.brand-v3 .example-note {
  font-size: 12px;
  color: #526048;
  max-width: 410px;
}
.brand-v3 .calculator {
  border-radius: 24px;
  background: #fff;
  border-color: #c5cdbd;
  color: #191b17;
}
.brand-v3 .calc-fields {
  gap: 17px 16px;
}
.brand-v3 .making-field {
  grid-column: 1/-1;
}
.brand-v3 .calc-fields label {
  font-size: 14px;
  color: #526048;
}
.brand-v3 .input-wrap input {
  background: #fff;
  color: #191b17;
  font: 22px var(--mono);
  border-color: #b5c0aa;
}
.brand-v3 .input-wrap > span {
  font-size: 11px;
  color: #526048;
}
.brand-v3 .making-field input {
  padding-right: 60px;
}
.brand-v3 .calc-top {
  color: #526048;
  font-size: 10px;
}
.brand-v3 .live-pill {
  color: #526048;
  font-size: 8px;
}
.brand-v3 .material-options {
  background: #edf0e7;
}
.brand-v3 .material-options button {
  font-size: 14px;
  color: #526048;
}
.brand-v3 .material-options button.active {
  background: #fff;
  border-color: #bdc8b2;
  color: #191b17;
}
.brand-v3 .calc-results {
  gap: 10px;
}
.brand-v3 .calc-results > div {
  background: #edf0e7;
  padding: 19px 14px;
}
.brand-v3 .calc-results > div.result-sale {
  background: #eee9dc;
}
.brand-v3 .calc-results > div > span {
  font-size: 13px;
  color: #3f5230;
}
.brand-v3 .calc-results strong {
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: -1px;
}
.brand-v3 .calc-results > div > .result-formula {
  font-family: var(--body);
  font-size: 11px;
  color: #526048;
}
.brand-v3 .calc-footnote {
  font-size: 13px;
  color: #526048;
  line-height: 1.7;
}
.brand-v3 .breakdown-labels {
  font-size: 11px;
  color: #526048;
}
.brand-v3 .calc-error {
  font-size: 14px;
}
.brand-v3 .calc-results strong.long-number {
  font-size: 20px;
}
.tools-intro {
  font-size: 17px;
  color: var(--muted);
  margin: -13px 0 36px;
  max-width: 640px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.tool-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px 21px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  transition:
    border-color 0.3s,
    transform 0.5s var(--ease);
  }
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover {
    border-color: #c7bea577;
    transform: translateY(-3px);
  }
}
.tool-card h3 {
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.4px;
  margin-block: 21px 14px;
}
.tool-card > p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 24px;
}
.tool-card details {
  border-top: 1px solid var(--line);
  padding-top: 15px;
  margin-top: auto;
}
.tool-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--brand-link);
  min-height: 32px;
  line-height: 1.6;
}
.tool-card summary::-webkit-details-marker {
  display: none;
}
.tool-card summary > span:last-child {
  font-size: 20px;
  transition: transform 0.3s;
}
.tool-card details[open] summary > span:last-child {
  transform: rotate(45deg);
}
.tool-card details > p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 17px;
}
.tool-art {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--inset);
  border-radius: 11px;
  position: relative;
  overflow: hidden;
  direction: ltr;
}
.metal-chip {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font: 14px var(--mono);
  flex: none;
}
.gold-chip {
  color: var(--gold);
}
.silver-chip {
  color: var(--silver);
}
.tool-art-1 .gold-chip {
  transform: rotate(-15deg);
}
.tool-art-1 .silver-chip {
  transform: rotate(12deg);
}
.tool-jewel {
  width: 80px;
  height: 80px;
}
.scan-corner {
  position: absolute;
  inset: 12px 24%;
  border: 1px solid #c7bea577;
  border-radius: 7px;
}
.tool-art-3 {
  flex-direction: column;
  align-items: flex-start;
  padding-inline: 24%;
}
.payment-line {
  width: 64%;
  height: 5px;
  background: var(--line);
  display: block;
  border-radius: 3px;
}
.payment-line.short {
  width: 43%;
}
.payment-check {
  position: absolute;
  right: 22%;
  top: 27px;
  border: 1px solid var(--success);
  color: var(--success);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
}
.tool-art-4 > .icon,
.tool-art-8 > .icon {
  width: 30px;
  height: 30px;
  color: var(--brand-link);
}
.round-path {
  position: absolute;
  border: 1px dashed #c7bea555;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  animation: orbit-spin 40s linear infinite;
}
.weight-equation {
  font: 18px var(--mono);
  color: var(--silver);
  letter-spacing: -0.7px;
}
.weight-equation small {
  font-size: 12px;
}
.pin-dots {
  font: 13px var(--mono);
  letter-spacing: 3px;
  color: var(--brand-link);
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 30px;
}
.tool-art-7 {
  gap: 8px;
  align-items: flex-end;
  padding: 16px 24px;
}
.mini-bar {
  width: 13px;
  height: var(--h);
  background: var(--line);
  border-radius: 4px 4px 0 0;
}
.mini-bar.highlight {
  background: var(--accent);
}
.share-rays {
  position: absolute;
  width: 72px;
  height: 72px;
  border: 1px solid #c7bea530;
  border-radius: 18px;
  transform: rotate(25deg);
}
.customer-section {
  background: var(--inset);
  border-block: 1px solid var(--line);
}
.customer-layout {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 105px;
  align-items: center;
}
.customer-copy > .eyebrow {
  margin-bottom: 22px;
}
.customer-copy h2 {
  margin-bottom: 25px;
}
.customer-tabs {
  display: grid;
  margin-top: 30px;
  gap: 8px;
}
.customer-tabs button {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 54px;
  padding: 12px 17px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: start;
  font-size: 16px;
  transition:
    background 0.25s,
    border-color 0.25s;
}
.customer-tabs button .icon {
  width: 20px;
  height: 20px;
}
.customer-tabs button.active {
  background: #c7bea50d;
  border-color: #c7bea588;
  color: var(--brand-link);
  }
@media (hover: hover) and (pointer: fine) {
  .customer-tabs button:hover {
    background: var(--card);
  }
}
.customer-wallet-note {
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
  margin-top: 25px;
}
.customer-preview-shell {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 25px;
  padding: 24px 30px 30px;
  min-width: 0;
  max-width: 560px;
  width: 100%;
  justify-self: end;
  box-shadow: 0 22px 60px -35px #0005;
}
.customer-preview-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 21px;
  border-bottom: 1px solid var(--line);
  font: 11px var(--mono);
  letter-spacing: 0.5px;
}
.customer-app-icon {
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(150deg, #494337, #191b17);
  width: 37px;
  height: 37px;
  flex: none;
}
.customer-app-icon img {
  width: 21px;
  height: auto;
  filter: none !important;
}
.customer-preview-top > .demo-label {
  font-size: 9px;
  margin-inline-start: auto;
  max-width: 160px;
  text-align: end;
}
#customer-preview {
  padding-top: 27px;
  min-height: 455px;
  outline-offset: 8px;
}
.customer-panel-label {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 18px;
}
.box-value {
  display: flex;
  align-items: baseline;
  gap: 11px;
  font-family: var(--display);
  font-size: 57px;
  line-height: 1.3;
  letter-spacing: -2.5px;
  direction: ltr;
  justify-content: flex-start;
}
.box-value small {
  font: 15px var(--mono);
  letter-spacing: 0;
  color: var(--muted);
}
.estimate-label {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
  line-height: 1.8;
}
.box-jewels {
  display: flex;
  justify-content: center;
  gap: 15px;
  height: 99px;
  margin-block: 21px 6px;
  background: radial-gradient(ellipse, #c7bea509, transparent 68%);
}
.box-jewels svg {
  height: 90px;
  width: 90px;
  filter: drop-shadow(0 7px 5px #0003);
}
.box-weight {
  color: var(--muted);
  font: 12px/1.8 var(--mono);
  text-align: center;
  margin-bottom: 21px;
}
.box-cost {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  color: var(--muted);
}
.box-cost bdi {
  font: 14px var(--mono);
  color: var(--ink);
  white-space: nowrap;
}
.value-change {
  font-size: 14px;
  line-height: 1.8;
  margin-top: 10px;
}
.value-change.loss {
  color: var(--loss);
}
.customer-spark {
  height: 47px;
  width: 100%;
  color: var(--brand-link);
  display: block;
  margin-block: 15px;
}
.customer-demo-note {
  font-size: 14px;
  line-height: 1.85;
  color: var(--muted);
}
.layaway-visual {
  display: flex;
  justify-content: center;
  margin: 5px 0 23px;
}
.payment-donut {
  position: relative;
  width: 157px;
  height: 157px;
  display: grid;
  place-items: center;
}
.payment-donut svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.payment-donut circle {
  fill: none;
  stroke-width: 10;
}
.donut-track {
  stroke: var(--line);
}
.donut-value {
  stroke: var(--brand-link);
  stroke-linecap: round;
  animation: donut-fill 1.5s var(--ease) both;
}
.payment-donut > span {
  font: 33px var(--display);
  direction: ltr;
  letter-spacing: -1px;
}
.payment-donut small {
  font: 15px var(--mono);
  color: var(--muted);
  margin-inline-start: 3px;
}
.layaway-info {
  display: grid;
  gap: 7px;
  font-size: 15px;
  margin-top: 23px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.layaway-info p:last-child {
  color: var(--muted);
}
.owned-boundary {
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--inset);
  margin-top: 20px;
}
.published-price {
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  padding-block: 23px;
}
.published-price .metal-chip {
  width: 53px;
  height: 53px;
}
.published-price > div {
  flex: 1;
}
.published-price > div > span {
  font-size: 14px;
  color: var(--muted);
}
.published-price strong {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 9px;
  font: 33px/1.4 var(--display);
  letter-spacing: -1px;
  margin-top: 6px;
}
.published-price strong small {
  font: 12px var(--mono);
  letter-spacing: 0;
  color: var(--muted);
}
.price-update {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 12px/1.6 var(--mono);
  color: var(--muted);
  margin-block: 23px;
}
.price-demo-label {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 20px;
}
.traditions-intro {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.8;
  max-width: 670px;
  margin-top: -10px;
  margin-bottom: 40px;
}
.traditions-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.rental-story {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--card);
  padding: 30px;
}
.rental-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 165px;
  background: radial-gradient(ellipse, #c7bea50a, transparent 70%);
}
.rental-art > svg {
  width: 145px;
  height: 145px;
  transform: rotate(-14deg);
  animation: float 8s ease-in-out infinite;
}
.rental-arc {
  width: 240px;
  height: 100px;
  border: 1px solid #c7bea54d;
  border-radius: 50%;
  position: absolute;
  z-index: -1;
  transform: rotate(18deg);
}
.rental-story h3 {
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: -0.6px;
  margin-top: 15px;
}
.rental-story > p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  margin-top: 15px;
}
.rental-story ol {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.rental-story li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.rental-story li > span:first-child {
  font: 10px var(--mono);
  color: var(--brand-link);
}
.tradition-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.tradition-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 23px;
  border-bottom: 1px solid var(--line);
  font-size: 17px;
  line-height: 1.75;
}
.tradition-list li:first-child {
  border-top: 1px solid var(--line);
}
.tradition-list .icon {
  width: 20px;
  height: 20px;
  margin-top: 5px;
  color: var(--brand-link);
}
.brand-v3 .confidence-grid {
  gap: 22px;
}
.brand-v3 .confidence-card {
  border-radius: 22px;
  background: var(--card);
  border-color: var(--line);
  padding-inline: 30px;
}
.brand-v3 .confidence-card > div:last-child {
  border-color: var(--line);
}
.brand-v3 .confidence-card .eyebrow {
  font-size: 10px;
  color: var(--brand-link);
}
.brand-v3 .confidence-card h3 {
  font-size: 25px;
  line-height: 1.5;
  letter-spacing: -0.6px;
}
.brand-v3 .confidence-card p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.85;
  max-width: none;
}
.brand-v3 .sync-center {
  background: var(--inset);
  border-color: var(--line);
}
.brand-v3 .sync-center .icon {
  color: var(--brand-link);
}
.brand-v3 .sync-node {
  background: var(--accent);
}
.brand-v3 .sync-label {
  background: var(--inset);
  color: var(--muted);
  border-color: var(--line);
}
.brand-v3 .sync-label .status-dot {
  background: var(--success);
}
.brand-v3 .language-art button {
  font-family: var(--body);
  background: var(--inset);
  color: var(--ink);
  border-color: var(--line);
}
.brand-v3 .language-art button:nth-of-type(2) {
  background: #494337;
  color: #eee9dc;
  border-color: #c7bea555;
}
.brand-v3 .language-art button:last-of-type {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  background: var(--inset);
  color: var(--brand-link);
  border-color: #c7bea555;
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .language-art button:hover {
    background: var(--surface-2);
    color: var(--brand-link);
  }
}
.comfort-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding-top: 38px;
  margin-top: 38px;
  border-top: 1px solid var(--line);
}
.comfort-panel h3 {
  font-size: 23px;
  line-height: 1.5;
  letter-spacing: -0.4px;
}
.comfort-panel p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 670px;
  margin-top: 13px;
}
.comfort-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 230px;
}
.brand-v3 .comfort-actions .btn {
  font-size: 13px;
  padding: 12px 18px;
  min-height: 46px;
}
.brand-v3 .story {
  background: var(--inset);
  border-color: var(--line);
}
.brand-v3 .story-copy h2 {
  font-size: clamp(33px, 3.4vw, 49px);
}
.brand-v3 .story-copy > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.85;
}
.brand-v3 .story-copy > p.story-principle {
  font-size: 17px;
  color: var(--ink);
}
.brand-v3 .story-copy .text-link {
  font-size: 14px;
  color: var(--brand-link);
}
.brand-v3 .story-art {
  background: radial-gradient(at 50% 50%, #c7bea50e, transparent 62%);
}
.brand-v3 .story-art > img {
  width: 120px;
  filter: none;
}
.brand-v3 .story-location {
  color: var(--muted);
  font-size: 10px;
}
.brand-v3 .story-star {
  color: var(--brand-link);
}
.brand-v3 .brand-lore {
  font-size: 19px;
  line-height: 1.6;
  margin-top: 30px;
  letter-spacing: -0.3px;
}
.brand-v3 .story-copy > p.brand-lore-copy {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}
.privacy-section {
  border-bottom: 1px solid var(--line);
}
.privacy-section > .shell > .eyebrow {
  margin-bottom: 22px;
}
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  margin-top: 45px;
}
.privacy-grid article > .icon {
  color: var(--brand-link);
  width: 27px;
  height: 27px;
  margin-bottom: 20px;
}
.privacy-grid h3 {
  font-size: 21px;
  line-height: 1.5;
  letter-spacing: -0.4px;
}
.privacy-grid p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--muted);
  margin-top: 14px;
}
.brand-v3 .faq-list summary {
  font-size: 17px;
  padding-block: 25px;
}
.brand-v3 .faq-answer p {
  font-size: 16px;
  line-height: 1.85;
}
.brand-v3 .faq-plus:before,
.brand-v3 .faq-plus:after {
  background: var(--brand-link);
}
.brand-v3 .faq-contact {
  font-size: 15px;
}
.brand-v3 .final-cta {
  background: var(--inset);
  border-color: var(--line);
}
.brand-v3 .cta-inner h2 {
  font-size: clamp(55px, 6.5vw, 92px);
  line-height: 1.2;
  letter-spacing: -3.5px;
}
.brand-v3 .cta-inner h2 > span:nth-child(3) {
  color: var(--accent);
  font-size: 55px;
  right: -80px;
  top: 0;
}
.brand-v3 .cta-inner > .eyebrow {
  font-size: 11px;
  color: var(--brand-link);
}
.brand-v3 .cta-inner > p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.8;
  max-width: 490px;
  color: var(--muted);
}
.brand-v3 .cta-note {
  font-size: 13px;
  color: var(--muted);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.8;
}
.brand-v3 .cta-orbits {
  opacity: 0.4;
}
.brand-v3 .cta-orbits > i {
  border-color: #c7bea533;
}
.brand-v3 footer {
  background: var(--bg);
}
.brand-v3 .footer-main p {
  font-size: 15px;
  color: var(--muted);
  max-width: 320px;
}
.brand-v3 .footer-links a {
  font-size: 14px;
}
.brand-v3 .footer-bottom {
  font-size: 11px;
  color: var(--muted);
}
.brand-v3 .font-credit {
  font-size: 10px;
  color: var(--muted);
}
.brand-v3 dialog {
  background: var(--card);
  border-color: var(--line);
  border-radius: 23px;
}
.brand-v3 .dialog-content h2 {
  font-size: 31px;
  line-height: 1.4;
  letter-spacing: -0.6px;
}
.brand-v3 .dialog-content > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.75;
}
.brand-v3 .dialog-content .eyebrow {
  font-size: 10px;
  color: var(--brand-link);
}
.brand-v3 .dialog-field label {
  font-size: 14px;
  color: var(--ink);
}
.brand-v3 .dialog-field input {
  background: var(--inset);
  color: var(--ink);
  border-color: var(--line);
  font-size: 16px;
  min-height: 50px;
}
.brand-v3 .dialog-field input::placeholder {
  color: var(--muted);
}
.brand-v3 .dialog-field label small {
  font-size: 12px;
  color: var(--muted);
}
.brand-v3 .dialog-note {
  font-size: 13px;
}
.brand-v3 .dialog-note .icon {
  color: var(--brand-link);
}
.brand-v3 #form-status {
  font-size: 14px;
  color: var(--brand-link);
}
.brand-v3 #wa-fallback {
  font-size: 14px;
}
.brand-v3 .dialog-content form > .btn {
  font-size: 14px;
}
.brand-v3 .noscript-note {
  background: var(--card);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
/* Light mode retains black/white marks; Lime is confined to dark primary actions. */
:root[data-theme='light'] .brand-v3 .site-header {
  background: #f5f6f0f5;
}
:root[data-theme='light'] .brand-v3 .brand img,
:root[data-theme='light'] .brand-v3 .story-art > img,
:root[data-theme='light'] .brand-v3 .dialog-brand {
  filter: brightness(0);
}
:root[data-theme='light'] .brand-v3 .btn-lime {
  background: #191b17;
  color: #f4f5ee;
}
:root[data-theme='light'] .brand-v3 .btn-lime .icon {
  color: #c6fe21;
  }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme='light'] .brand-v3 .btn-lime:hover {
    background: #2c3525;
  }
}
:root[data-theme='light'] .brand-v3 .hero .lime-text {
  color: #65583c;
}
:root[data-theme='light'] .brand-v3 .hero-grid {
  opacity: 0.7;
  background-image:
    linear-gradient(#5260480a 1px, transparent 1px),
    linear-gradient(90deg, #5260480a 1px, transparent 1px);
}
:root[data-theme='light'] .brand-v3 .hero-copy > .eyebrow {
  color: #65583c;
}
:root[data-theme='light'] .brand-v3 .studio-halo {
  background: radial-gradient(ellipse, #c7bea511, transparent 70%);
}
:root[data-theme='light'] .brand-v3 .studio-coordinate {
  color: #526048;
}
:root[data-theme='light'] .brand-v3 .float-card {
  background: #fffffff0;
  border-color: #b7c4ad;
  box-shadow: 0 12px 35px #23301817;
}
:root[data-theme='light'] .brand-v3 .sale-float b,
:root[data-theme='light'] .brand-v3 .float-icon {
  color: #0b6e5f;
}
:root[data-theme='light'] .brand-v3 .float-icon {
  background: #0b6e5f10;
}
:root[data-theme='light'] .brand-v3 .weight-float > .eyebrow {
  color: #65583c;
}
:root[data-theme='light'] .brand-v3 .float-time {
  color: #526048;
}
:root[data-theme='light'] .brand-v3 .weight-line i {
  background: #8c9a80;
}
:root[data-theme='light'] .brand-v3 .weight-line i:nth-child(5n + 1),
:root[data-theme='light'] .brand-v3 .weight-line i:nth-child(8) {
  background: #65583c;
}
:root[data-theme='light'] .brand-v3 .tab-number {
  color: #526048;
}
:root[data-theme='light'] .brand-v3 .workflow-tab:not(.active) .tab-description {
  color: #526048;
}
:root[data-theme='light'] .brand-v3 .gold-chip {
  color: #8a6112;
}
:root[data-theme='light'] .brand-v3 .silver-chip,
:root[data-theme='light'] .brand-v3 .weight-equation {
  color: #5e6a7a;
}
:root[data-theme='light'] .brand-v3 .customer-tabs button.active {
  background: #eee9dc;
  border-color: #65583c;
}
:root[data-theme='light'] .brand-v3 .sync-ring {
  border-color: #b5c7a8;
}
:root[data-theme='light'] .brand-v3 .sync-label {
  color: #526048;
}
:root[data-theme='light'] .brand-v3 .language-art button:nth-of-type(2) {
  background: #eee9dc;
  color: #65583c;
  border-color: #c7bea5;
}
:root[data-theme='light'] .brand-v3 .language-orbit,
:root[data-theme='light'] .brand-v3 .language-orbit:after {
  border-color: #b5c7a8;
}
:root[data-theme='light'] .brand-v3 .story-orbit {
  border-color: #a8bd9c;
}
:root[data-theme='light'] .brand-v3 .story-orbit.orbit-two {
  border-color: #b8c9ae;
}
:root[data-theme='light'] .brand-v3 .mini-bar {
  background: #c5cdbd;
}
:root[data-theme='light'] .brand-v3 .mini-bar.highlight {
  background: #65583c;
}
:root[data-theme='light'] .brand-v3 .dialog-field input:focus {
  outline-color: #65583c;
  border-color: #65583c;
}
/* Arabic is a first-class layout with Western figures kept isolated. */
:root[lang='ar'] .brand-v3 h1,
:root[lang='ar'] .brand-v3 h2,
:root[lang='ar'] .brand-v3 h3 {
  letter-spacing: 0;
}
:root[lang='ar'] .brand-v3 h2 {
  font-size: clamp(31px, 3.5vw, 49px);
  line-height: 1.6;
}
:root[lang='ar'] .brand-v3 .hero h1 {
  font-size: clamp(58px, 6.1vw, 85px);
  line-height: 1.45;
}
:root[lang='ar'] .brand-v3 .eyebrow {
  font-family: var(--body);
  letter-spacing: 0;
  font-size: 13px;
}
:root[lang='ar'] .brand-v3 .hero-description {
  font-size: 18px;
  line-height: 1.95;
}
:root[lang='ar'] .brand-v3 .hero-copy > .eyebrow {
  font-size: 12px;
}
:root[lang='ar'] .brand-v3 .hero-actions {
  gap: 18px;
}
:root[lang='ar'] .brand-v3 .hero-actions .btn {
  font-size: 14px;
}
:root[lang='ar'] .brand-v3 .hero-actions .text-link {
  font-size: 13px;
}
:root[lang='ar'] .brand-v3 .availability {
  font-size: 12px;
}
:root[lang='ar'] .brand-v3 .btn {
  font-family: var(--body);
}
:root[lang='ar'] .brand-v3 .workflow-tab strong {
  font-size: 20px;
  line-height: 1.7;
}
:root[lang='ar'] .brand-v3 .tab-description {
  font-size: 16px;
  line-height: 1.9;
}
:root[lang='ar'] .brand-v3 .phone-screen {
  font-family: var(--body);
}
:root[lang='ar'] .brand-v3 .app-top h3 {
  font-size: 16px;
}
:root[lang='ar'] .brand-v3 .sales-amount {
  font-family: var(--display);
  font-size: 32px;
}
:root[lang='ar'] .brand-v3 .weight-float > .eyebrow {
  font-size: 9px;
}
:root[lang='ar'] .brand-v3 .demo-caption {
  font-family: var(--body);
  font-size: 10px;
}
:root[lang='ar'] .brand-v3 .precision-copy h2 {
  font-size: clamp(34px, 3.7vw, 52px);
}
:root[lang='ar'] .brand-v3 .precision-copy > p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.9;
}
:root[lang='ar'] .brand-v3 .calc-fields label {
  font-size: 13px;
}
:root[lang='ar'] .brand-v3 .calc-results strong {
  font-family: var(--display);
  font-size: 25px;
}
:root[lang='ar'] .brand-v3 .calc-results > div > .result-formula {
  font-size: 11px;
}
:root[lang='ar'] .brand-v3 .calc-footnote {
  font-size: 13px;
}
:root[lang='ar'] .brand-v3 .trust-receipt {
  transform: rotate(4deg);
}
:root[lang='ar'] .brand-v3 .box-value {
  justify-content: flex-end;
}
:root[lang='ar'] .brand-v3 .customer-panel-label,
:root[lang='ar'] .brand-v3 .box-weight {
  font-family: var(--body);
}
:root[lang='ar'] .brand-v3 .confidence-card h3 {
  font-size: 23px;
}
:root[lang='ar'] .brand-v3 .confidence-card p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.95;
}
:root[lang='ar'] .brand-v3 .story-copy > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 1.95;
}
:root[lang='ar'] .brand-v3 .faq-list summary {
  font-size: 16px;
}
:root[lang='ar'] .brand-v3 .faq-answer p {
  font-size: 16px;
  line-height: 1.95;
}
:root[lang='ar'] .brand-v3 .cta-inner h2 {
  font-size: clamp(50px, 6.2vw, 86px);
  line-height: 1.5;
}
:root[lang='ar'] .brand-v3 .cta-inner h2 > span:nth-child(3) {
  right: auto;
  left: -80px;
  top: 4px;
  font-size: 47px;
}
:root[lang='ar'] .brand-v3 .cta-inner > p:not(.eyebrow) {
  font-size: 17px;
}
:root[lang='ar'] .brand-v3 .dialog-content h2 {
  font-size: 28px;
  line-height: 1.6;
}
:root[lang='ar'] .brand-v3 .dialog-content > p:not(.eyebrow) {
  font-size: 16px;
}
:root[lang='ar'] .brand-v3 .brand-lore {
  font-size: 20px;
}
:root[lang='fr'] .brand-v3 .hero h1 {
  font-size: clamp(55px, 5.2vw, 76px);
  letter-spacing: -2.8px;
}
:root[lang='fr'] .brand-v3 .hero-description {
  font-size: 18px;
}
:root[lang='fr'] .brand-v3 .hero-actions .btn {
  font-size: 14px;
}
:root[lang='fr'] .brand-v3 .hero-actions .text-link {
  font-size: 13px;
}
:root[lang='fr'] .brand-v3 .workflow-tab strong {
  font-size: 20px;
}
:root[lang='fr'] .brand-v3 .cta-inner h2 {
  font-size: clamp(50px, 5.8vw, 81px);
  letter-spacing: -2.5px;
}
@keyframes receipt-scan {
  0% {
    top: -6px;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 60px;
    opacity: 0;
  }
}
@keyframes donut-fill {
  from {
    stroke-dasharray: 0 100;
  }
  to {
    stroke-dasharray: 60 100;
  }
}
@media (max-width: 1250px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .tool-card {
    display: grid;
    grid-template-columns: 115px 1fr;
    gap: 0 22px;
    padding: 26px;
  }
  .tool-art {
    grid-row: 1/4;
    height: 100px;
  }
  .tool-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
  }
  .tool-card > p {
    margin-bottom: 20px;
  }
  .tool-card details {
    grid-column: 1/-1;
    margin-top: 0;
  }
  .trust-layout {
    gap: 40px;
  }
  .verification-scene {
    padding: 23px 19px;
  }
  .verification-pair {
    gap: 15px;
  }
  .trust-receipt {
    padding-inline: 14px;
  }
  .customer-layout {
    gap: 65px;
  }
  .brand-v3 .hero h1 {
    font-size: 6.7vw;
  }
  .brand-v3 .hero-description {
    font-size: 17px;
  }
  .brand-v3 .hero-actions {
    gap: 20px;
  }
  .brand-v3 .hero-actions .text-link {
    max-width: 205px;
    font-size: 13px;
  }
  .brand-v3 .hero-actions .btn {
    font-size: 14px;
  }
  .brand-v3 .hero-bottom {
    font-size: 9px;
    gap: 10px;
  }
  .brand-v3 .hero-copy > .eyebrow {
    font-size: 9px;
  }
  .brand-v3 .desktop-nav {
    gap: 21px;
  }
  .brand-v3 .desktop-nav a {
    font-size: 13px;
  }
  .brand-v3 .comfort-toggle {
    display: none;
  }
  .brand-v3 .sales-amount {
    font-size: 32px;
  }
  .brand-v3 .demo-caption {
    font-size: 9px;
  }
  .brand-v3 .weight-float > .eyebrow {
    font-size: 7px;
  }
  .brand-v3 .weight-float > strong {
    font-size: 28px;
  }
  .brand-v3 .experience-layout {
    gap: 40px;
  }
  .brand-v3 .workflow-tab strong {
    font-size: 20px;
  }
  .brand-v3 .tab-description {
    font-size: 16px;
  }
  .brand-v3 .panel-head h3 {
    font-size: 24px;
  }
  .brand-v3 .section-intro {
    font-size: 16px;
    max-width: 220px;
  }
  .brand-v3 .confidence-card h3 {
    font-size: 23px;
  }
  .brand-v3 .precision-shell {
    gap: 55px;
  }
  .brand-v3 .inventory-table {
    font-size: 13px;
  }
  :root[lang='fr'] .brand-v3 .hero h1 {
    font-size: 5.3vw;
  }
  :root[lang='fr'] .brand-v3 .hero-actions .btn {
    font-size: 13px;
  }
  :root[lang='ar'] .brand-v3 .hero h1 {
    font-size: 6.6vw;
  }
}
@media (max-width: 980px) {
  .brand-v3 .desktop-nav,
  .brand-v3 .header-cta {
    display: none;
  }
  .brand-v3 .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
  }
  .brand-v3 .menu-toggle span {
    width: 14px;
    height: 1px;
    background: var(--ink);
    display: block;
  }
  .brand-v3 .header-inner {
    height: 76px;
  }
  .brand-v3 .comfort-toggle {
    display: grid;
  }
  .brand-v3 .brand > span {
    display: none;
  }
  .brand-v3 .hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
  }
  .brand-v3 .hero h1 {
    font-size: 6.8vw;
    letter-spacing: -2.6px;
  }
  .brand-v3 .hero-description {
    font-size: 17px;
    line-height: 1.7;
    max-width: 340px;
  }
  .brand-v3 .hero-copy > .eyebrow {
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  .brand-v3 .availability {
    font-size: 12px;
    max-width: 300px;
  }
  .brand-v3 .hero-bottom {
    font-size: 8px;
    line-height: 1.7;
    margin-top: 30px;
    max-width: 280px;
    flex-wrap: wrap;
  }
  .brand-v3 .hero-actions .text-link {
    max-width: 300px;
  }
  .problem-grid {
    gap: 25px;
  }
  .problem-grid article + article {
    padding-inline-start: 25px;
  }
  .problem-grid h3 {
    font-size: 19px;
  }
  .how-steps {
    gap: 17px;
  }
  .how-steps li {
    font-size: 14px;
  }
  .trust-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .trust-copy > .feature-lead {
    max-width: 740px;
  }
  .trust-benefits {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
  .trust-benefits article {
    display: block;
  }
  .trust-benefits article > span {
    display: block;
    margin-bottom: 13px;
  }
  .trust-benefits h3 {
    font-size: 18px;
  }
  .trust-benefits p {
    font-size: 16px;
  }
  .verification-scene {
    max-width: 680px;
    width: 100%;
    margin-inline: auto;
    padding: 30px;
  }
  .verification-pair {
    gap: 35px;
    grid-template-columns: 0.9fr 1.1fr;
  }
  .trust-receipt {
    padding: 28px;
  }
  .verification-output {
    padding: 27px 22px;
  }
  .verification-output h3 {
    font-size: 21px;
  }
  .verification-output > p {
    font-size: 16px;
  }
  .brand-v3 .section-space {
    padding-block: 82px;
  }
  .brand-v3 .section-top {
    align-items: flex-start;
  }
  .brand-v3 h2 {
    font-size: 38px;
    line-height: 1.3;
  }
  .brand-v3 .section-intro {
    font-size: 16px;
  }
  .brand-v3 .experience-layout {
    gap: 25px;
  }
  .brand-v3 .workflow-tab strong {
    font-size: 18px;
  }
  .brand-v3 .tab-description {
    font-size: 15px;
  }
  .brand-v3 .panel-head h3 {
    font-size: 22px;
  }
  .brand-v3 #workspace-preview {
    padding-inline: 20px;
    min-height: 395px;
  }
  .brand-v3 .inventory-table {
    font-size: 12px;
  }
  .brand-v3 .inventory-table td:last-child {
    font-size: 11px;
  }
  .brand-v3 .inventory-table .table-piece {
    gap: 7px;
  }
  .brand-v3 .table-piece small {
    font-size: 9px;
  }
  .brand-v3 .panel-chip {
    font-size: 9px;
    padding: 6px;
    max-width: 80px;
  }
  .brand-v3 .workspace-note {
    font-size: 9px;
  }
  .brand-v3 .precision-shell {
    gap: 35px;
  }
  .brand-v3 .precision-copy h2 {
    font-size: 44px;
  }
  .brand-v3 .precision-copy > p:not(.eyebrow) {
    font-size: 16px;
  }
  .brand-v3 .calc-results strong {
    font-size: 23px;
  }
  .brand-v3 .calc-fields label {
    font-size: 13px;
  }
  .customer-layout {
    gap: 40px;
    grid-template-columns: 1fr 1fr;
  }
  .customer-preview-shell {
    padding: 20px 23px 25px;
  }
  .customer-preview-top > .demo-label {
    font-size: 8px;
  }
  .box-value {
    font-size: 44px;
    gap: 9px;
    letter-spacing: -2px;
  }
  .box-value small {
    font-size: 13px;
  }
  .customer-panel-label {
    font-size: 16px;
  }
  .box-cost {
    font-size: 13px;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .value-change {
    font-size: 13px;
  }
  .customer-demo-note {
    font-size: 14px;
  }
  .box-jewels {
    gap: 9px;
  }
  .box-jewels svg {
    width: 72px;
    height: 83px;
  }
  .customer-wallet-note {
    font-size: 15px;
  }
  .customer-copy > .feature-lead {
    font-size: 17px;
  }
  .traditions-layout {
    gap: 35px;
  }
  .rental-story {
    padding: 25px;
  }
  .rental-story h3 {
    font-size: 21px;
  }
  .tradition-list li {
    font-size: 16px;
    padding-block: 22px;
  }
  .brand-v3 .confidence-card {
    padding-inline: 25px;
  }
  .brand-v3 .confidence-card h3 {
    font-size: 22px;
  }
  .brand-v3 .confidence-card p:not(.eyebrow) {
    font-size: 16px;
  }
  .comfort-panel {
    gap: 30px;
  }
  .comfort-actions {
    min-width: 200px;
  }
  .privacy-grid {
    gap: 30px;
  }
  .privacy-grid h3 {
    font-size: 20px;
  }
  .brand-v3 .faq-layout {
    gap: 45px;
  }
  .brand-v3 .faq-list summary {
    font-size: 16px;
  }
  .brand-v3 .cta-inner h2 {
    font-size: 74px;
  }
  .brand-v3 .cta-inner h2 > span:nth-child(3) {
    font-size: 41px;
    right: -65px;
  }
  .brand-v3 .footer-main p {
    font-size: 14px;
  }
  :root[lang='fr'] .brand-v3 .hero h1 {
    font-size: 5.45vw;
    letter-spacing: -2.4px;
  }
  :root[lang='fr'] .brand-v3 .hero-description {
    font-size: 17px;
  }
  :root[lang='ar'] .brand-v3 .hero h1 {
    font-size: 6.7vw;
  }
  :root[lang='ar'] .brand-v3 .hero-description {
    font-size: 17px;
  }
  :root[lang='ar'] .brand-v3 .workflow-tab strong {
    font-size: 17px;
  }
  :root[lang='ar'] .brand-v3 .cta-inner h2 {
    font-size: 68px;
  }
}
@media (max-width: 760px) {
  .brand-v3 .header-inner {
    height: 70px;
  }
  .brand-v3 .brand img {
    width: 94px;
  }
  .brand-v3 .header-actions {
    gap: 9px;
  }
  .brand-v3 .icon-button {
    height: 35px;
    width: 35px;
  }
  .brand-v3 .menu-toggle {
    height: 35px;
    width: 35px;
  }
  .brand-v3 .hero-copy {
    padding-top: 42px;
  }
  .brand-v3 .hero-copy > .eyebrow {
    font-size: 9px;
    letter-spacing: 0.6px;
    line-height: 1.8;
    margin-bottom: 23px;
  }
  .brand-v3 .hero h1 {
    font-size: clamp(52px, 12.5vw, 86px);
    letter-spacing: -2.5px;
    line-height: 1.15;
  }
  .brand-v3 .hero-description {
    max-width: 540px;
    font-size: 18px;
    line-height: 1.8;
    margin-top: 23px;
  }
  .brand-v3 .hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-top: 27px;
  }
  .brand-v3 .hero-actions .btn {
    font-size: 14px;
    padding-inline: 22px;
    gap: 18px;
  }
  .brand-v3 .hero-actions .text-link {
    font-size: 14px;
    max-width: 190px;
  }
  .brand-v3 .availability {
    font-size: 13px;
    max-width: 450px;
  }
  .brand-v3 .hero-bottom {
    display: none;
  }
  .brand-v3 .studio {
    margin-top: 32px;
  }
  .brand-v3 .sales-amount {
    font-size: 35px;
  }
  .brand-v3 .app-top h3 {
    font-size: 18px;
  }
  .brand-v3 .weight-float > .eyebrow {
    font-size: 8px;
  }
  .brand-v3 .weight-float > strong {
    font-size: 30px;
  }
  .brand-v3 .trade-group > span {
    font-size: 20px;
  }
  .brand-v3 .section-space {
    padding-block: 68px;
  }
  .brand-v3 .eyebrow {
    font-size: 10px;
    letter-spacing: 0.6px;
  }
  .brand-v3 .section-top .eyebrow {
    font-size: 10px;
    margin-bottom: 18px;
  }
  .brand-v3 h2 {
    font-size: 37px;
    line-height: 1.35;
    letter-spacing: -1.3px;
  }
  .brand-v3 .section-top h2 {
    font-size: 37px;
  }
  .brand-v3 .section-intro {
    font-size: 16px;
    max-width: 500px;
    margin-top: 22px;
  }
  .problem-grid {
    grid-template-columns: 1fr;
    gap: 27px;
  }
  .problem-grid article {
    display: grid;
    grid-template-columns: 33px 1fr;
    gap: 0 16px;
  }
  .problem-grid article + article {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-top: 1px solid var(--line);
    padding-top: 28px;
  }
  .problem-icon {
    grid-row: 1/3;
    margin: 5px 0 0;
  }
  .problem-grid h3 {
    font-size: 22px;
    max-width: none;
  }
  .problem-grid p {
    margin-top: 10px;
    max-width: none;
    font-size: 16px;
  }
  .how-steps {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 31px;
    padding-top: 27px;
  }
  .how-steps li {
    font-size: 16px;
  }
  .brand-v3 .workflow-tabs {
    gap: 12px;
  }
  .brand-v3 .workflow-tab {
    min-height: 210px;
  }
  .brand-v3 .workflow-tab strong {
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -0.5px;
  }
  .brand-v3 .tab-description,
  .brand-v3 .active .tab-description {
    font-size: 14px;
    line-height: 1.75;
    max-height: none;
    margin-top: 11px;
  }
  .brand-v3 .workflow-tab:not(.active) .tab-description {
    color: var(--muted);
  }
  .brand-v3 .workflow-tab .tab-number {
    font-size: 10px;
  }
  .brand-v3 .experience-layout {
    gap: 30px;
  }
  .brand-v3 #workspace-preview {
    padding: 25px;
    min-height: 385px;
  }
  .brand-v3 .panel-head h3 {
    font-size: 24px;
  }
  .brand-v3 .inventory-table {
    font-size: 14px;
  }
  .brand-v3 .inventory-table td:last-child {
    font-size: 12px;
  }
  .brand-v3 .inventory-table .table-piece {
    gap: 11px;
  }
  .brand-v3 .panel-chip {
    font-size: 10px;
    max-width: 100px;
  }
  .brand-v3 .table-piece small {
    font-size: 10px;
  }
  .brand-v3 .catalogue-piece h4 {
    font-size: 13px;
  }
  .brand-v3 .catalogue-footer p {
    font-size: 10px;
  }
  .brand-v3 .share-chips > span {
    font-size: 9px;
  }
  .trust-benefits {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .trust-benefits article {
    display: flex;
    gap: 15px;
  }
  .trust-benefits article > span {
    margin-bottom: 0;
    flex: none;
  }
  .trust-benefits h3 {
    font-size: 19px;
  }
  .trust-benefits p {
    font-size: 16px;
  }
  .verification-scene {
    padding: 25px;
  }
  .verification-pair {
    gap: 23px;
  }
  .trust-receipt {
    padding: 23px 17px;
  }
  .verification-output {
    padding: 22px 18px;
  }
  .verification-output h3 {
    font-size: 19px;
  }
  .verification-output > p {
    font-size: 15px;
  }
  .brand-v3 .precision-copy h2 {
    font-size: 43px;
  }
  .brand-v3 .precision-copy > .eyebrow {
    font-size: 10px;
  }
  .brand-v3 .precision-copy > p:not(.eyebrow) {
    font-size: 17px;
    max-width: 520px;
  }
  .brand-v3 .example-note {
    font-size: 12px;
    max-width: 500px;
  }
  .brand-v3 .precision-object {
    width: 285px;
  }
  .brand-v3 .calculator {
    padding: 27px;
  }
  .brand-v3 .calc-fields label {
    font-size: 14px;
  }
  .brand-v3 .calc-results strong {
    font-size: 30px;
  }
  .brand-v3 .calc-results > div > .result-formula {
    font-size: 12px;
  }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .tool-card {
    grid-template-columns: 108px 1fr;
    gap: 0 23px;
    padding: 25px;
  }
  .tool-card h3 {
    font-size: 22px;
    line-height: 1.5;
  }
  .tool-card > p {
    font-size: 16px;
  }
  .tool-card details {
    padding-top: 13px;
  }
  .tool-card details > p {
    font-size: 16px;
  }
  .tool-card summary {
    font-size: 15px;
    min-height: 36px;
  }
  .tool-art {
    height: 108px;
  }
  .tools-intro {
    font-size: 17px;
    line-height: 1.8;
    margin-top: -9px;
  }
  .customer-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .customer-preview-shell {
    max-width: 560px;
    justify-self: center;
    padding: 25px 29px 29px;
  }
  .customer-copy > .feature-lead {
    font-size: 18px;
  }
  .customer-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .customer-tabs button {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 15px 13px;
    font-size: 14px;
    line-height: 1.6;
    min-height: 106px;
    gap: 12px;
  }
  .customer-wallet-note {
    font-size: 16px;
  }
  .box-value {
    font-size: 57px;
  }
  .box-cost {
    flex-direction: row;
    align-items: center;
    font-size: 14px;
  }
  .box-cost bdi {
    font-size: 15px;
  }
  .value-change {
    font-size: 15px;
  }
  .customer-demo-note {
    font-size: 16px;
  }
  .customer-panel-label {
    font-size: 17px;
  }
  .box-weight {
    font-size: 13px;
  }
  .customer-preview-top > .demo-label {
    font-size: 9px;
  }
  .box-jewels {
    gap: 15px;
    height: 107px;
  }
  .box-jewels svg {
    width: 92px;
    height: 96px;
  }
  #customer-preview {
    min-height: 455px;
  }
  .estimate-label {
    font-size: 15px;
  }
  .price-demo-label {
    font-size: 14px;
  }
  .traditions-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .traditions-intro {
    font-size: 18px;
    line-height: 1.8;
  }
  .rental-story {
    padding: 28px;
  }
  .rental-story h3 {
    font-size: 23px;
  }
  .rental-story > p {
    font-size: 16px;
  }
  .rental-story li {
    font-size: 16px;
  }
  .tradition-list li {
    font-size: 17px;
  }
  .comfort-panel {
    display: block;
    padding-top: 29px;
    margin-top: 29px;
  }
  .comfort-panel h3 {
    font-size: 24px;
  }
  .comfort-panel p {
    font-size: 16px;
  }
  .comfort-actions {
    margin-top: 23px;
    justify-content: flex-start;
    min-width: 0;
  }
  .brand-v3 .comfort-actions .btn {
    font-size: 14px;
    min-height: 47px;
  }
  .brand-v3 .confidence-card h3 {
    font-size: 24px;
  }
  .brand-v3 .confidence-card p:not(.eyebrow) {
    font-size: 16px;
  }
  .brand-v3 .confidence-card {
    padding-inline: 28px;
  }
  .brand-v3 .confidence-card .eyebrow {
    font-size: 10px;
  }
  .brand-v3 .story-copy h2 {
    font-size: 38px;
  }
  .brand-v3 .story-copy > p:not(.eyebrow) {
    font-size: 16px;
  }
  .brand-v3 .story-location {
    font-size: 9px;
  }
  .brand-v3 .brand-lore {
    font-size: 20px;
  }
  .privacy-grid {
    grid-template-columns: 1fr;
    gap: 29px;
    margin-top: 35px;
  }
  .privacy-grid article {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 0 16px;
  }
  .privacy-grid article > .icon {
    grid-row: 1/3;
    width: 24px;
    height: 24px;
    margin-top: 5px;
  }
  .privacy-grid h3 {
    font-size: 22px;
  }
  .privacy-grid p {
    margin-top: 11px;
    font-size: 16px;
  }
  .brand-v3 .faq-list summary {
    font-size: 17px;
  }
  .brand-v3 .faq-answer p {
    font-size: 16px;
  }
  .brand-v3 .faq-layout .eyebrow {
    font-size: 10px;
  }
  .brand-v3 .cta-inner h2 {
    font-size: clamp(47px, 10.9vw, 73px);
    line-height: 1.3;
    letter-spacing: -2px;
  }
  .brand-v3 .cta-inner h2 > span:nth-child(3) {
    font-size: 32px;
    right: -42px;
    top: -9px;
  }
  .brand-v3 .cta-inner > .eyebrow {
    font-size: 10px;
    line-height: 1.8;
    max-width: 420px;
    margin-inline: auto;
    letter-spacing: 0.5px;
  }
  .brand-v3 .cta-inner > p:not(.eyebrow) {
    font-size: 17px;
    max-width: 440px;
  }
  .brand-v3 .cta-inner > .btn {
    font-size: 15px;
  }
  .brand-v3 .cta-note {
    font-size: 12px;
    max-width: 460px;
  }
  .brand-v3 .footer-main p {
    font-size: 14px;
    max-width: 230px;
  }
  .brand-v3 .footer-main > div:first-child {
    align-items: flex-start;
    gap: 25px;
  }
  .brand-v3 .footer-links a {
    font-size: 15px;
  }
  .brand-v3 .footer-bottom {
    font-size: 11px;
  }
  .brand-v3 .font-credit {
    font-size: 10px;
  }
  .brand-v3 .dialog-content h2 {
    font-size: 28px;
  }
  .brand-v3 .dialog-content > p:not(.eyebrow) {
    font-size: 16px;
  }
  :root[lang='fr'] .brand-v3 .hero h1 {
    font-size: clamp(42px, 10.4vw, 72px);
    letter-spacing: -2px;
  }
  :root[lang='fr'] .brand-v3 .hero-description {
    font-size: 18px;
  }
  :root[lang='fr'] .brand-v3 .hero-actions {
    gap: 19px;
  }
  :root[lang='fr'] .brand-v3 .hero-actions .btn {
    font-size: 14px;
  }
  :root[lang='fr'] .brand-v3 .hero-actions .text-link {
    font-size: 13px;
    max-width: 200px;
  }
  :root[lang='fr'] .brand-v3 .workflow-tab strong {
    font-size: 16px;
  }
  :root[lang='fr'] .brand-v3 .cta-inner h2 {
    font-size: clamp(42px, 8.4vw, 65px);
    letter-spacing: -1.6px;
  }
  :root[lang='ar'] .brand-v3 .hero h1 {
    font-size: clamp(55px, 11.8vw, 80px);
    line-height: 1.5;
  }
  :root[lang='ar'] .brand-v3 h2,
  :root[lang='ar'] .brand-v3 .section-top h2 {
    font-size: 35px;
    line-height: 1.6;
  }
  :root[lang='ar'] .brand-v3 .hero-description {
    font-size: 18px;
    line-height: 1.95;
  }
  :root[lang='ar'] .brand-v3 .hero-copy > .eyebrow {
    font-size: 12px;
  }
  :root[lang='ar'] .brand-v3 .hero-actions .text-link {
    max-width: 210px;
    font-size: 14px;
  }
  :root[lang='ar'] .brand-v3 .workflow-tab strong {
    font-size: 16px;
    line-height: 1.8;
  }
  :root[lang='ar'] .brand-v3 .tab-description {
    font-size: 14px;
    line-height: 1.9;
  }
  :root[lang='ar'] .brand-v3 .workflow-tab {
    min-height: 220px;
  }
  :root[lang='ar'] .brand-v3 .precision-copy h2 {
    font-size: 38px;
  }
  :root[lang='ar'] .brand-v3 .confidence-card h3 {
    font-size: 24px;
  }
  :root[lang='ar'] .brand-v3 .story-copy h2 {
    font-size: 36px;
  }
  :root[lang='ar'] .brand-v3 .cta-inner h2 {
    font-size: clamp(45px, 10vw, 69px);
  }
  :root[lang='ar'] .brand-v3 .cta-inner h2 > span:nth-child(3) {
    left: -43px;
    font-size: 32px;
  }
}
@media (max-width: 540px) {
  .verification-pair {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .trust-receipt {
    max-width: 260px;
    width: 100%;
    margin-inline: auto;
    padding: 24px;
  }
  .verification-output {
    min-height: 250px;
    padding: 24px;
  }
  .verification-output h3 {
    font-size: 21px;
  }
  .verification-output > p {
    font-size: 16px;
  }
  .verification-pair {
    min-height: 0;
  }
  .receipt-state button {
    font-size: 13px;
  }
  .verification-scene > .demo-label {
    font-size: 9px;
  }
  .tool-card {
    grid-template-columns: 76px 1fr;
    gap: 0 20px;
    padding: 23px;
  }
  .tool-art {
    height: 82px;
  }
  .tool-card h3 {
    font-size: 20px;
    line-height: 1.5;
  }
  .tool-card > p {
    grid-column: 1/-1;
    margin-top: 4px;
  }
  .tool-card details {
    grid-column: 1/-1;
  }
  .tool-card h3 {
    align-self: center;
    min-height: 82px;
    margin-bottom: 16px;
  }
  .tool-art {
    grid-row: auto;
  }
  .metal-chip {
    width: 31px;
    height: 31px;
    font-size: 10px;
  }
  .tool-art-1 {
    gap: 4px;
  }
  .tool-art-2 .scan-corner {
    inset: 8px 6px;
  }
  .weight-equation {
    font-size: 10px;
  }
  .weight-equation small {
    font-size: 8px;
  }
  .tool-art-3 {
    padding-inline: 16px;
  }
  .payment-check {
    right: 15px;
    width: 23px;
    height: 23px;
    font-size: 12px;
  }
  .pin-dots {
    font-size: 9px;
    letter-spacing: 1px;
    padding: 9px 5px;
  }
  .tool-art-7 {
    padding: 18px 8px;
    gap: 5px;
  }
  .mini-bar {
    width: 8px;
  }
  .tool-art-8 > .icon {
    width: 26px;
    height: 26px;
  }
  .share-rays {
    width: 50px;
    height: 50px;
  }
  .customer-preview-shell {
    padding: 23px;
  }
  .box-value {
    font-size: 48px;
    letter-spacing: -2px;
  }
  .box-value small {
    font-size: 13px;
  }
  .customer-preview-top > .demo-label {
    font-size: 8px;
    max-width: 135px;
  }
  .box-cost {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .brand-v3 .hero-actions .text-link {
    max-width: 175px;
  }
  .brand-v3 .hero-actions {
    gap: 17px;
  }
  .brand-v3 .hero h1 {
    font-size: 13vw;
  }
  .brand-v3 .hero-description {
    font-size: 17px;
  }
  .brand-v3 .workflow-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }
  .brand-v3 .workflow-tab {
    min-height: 0;
    padding-block: 20px;
    display: grid;
    grid-template-columns: 22px 1fr 20px;
    gap: 12px;
  }
  .brand-v3 .workflow-tab:last-child {
    border-bottom: 1px solid var(--line) !important;
  }
  .brand-v3 .workflow-tab .tab-number {
    margin: 7px 0 0;
  }
  .brand-v3 .workflow-tab strong {
    font-size: 19px;
  }
  .brand-v3 .tab-description {
    font-size: 16px;
    line-height: 1.75;
    display: block;
    max-width: none;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
  }
  .brand-v3 .workflow-tab.active .tab-description {
    max-height: 190px;
    opacity: 1;
    margin-top: 13px;
  }
  .brand-v3 .workflow-tab > .icon {
    display: block;
    margin-top: 7px;
  }
  .brand-v3 #workspace-preview {
    padding: 23px 18px;
    min-height: 380px;
  }
  .brand-v3 .panel-head h3 {
    font-size: 21px;
  }
  .brand-v3 .panel-head {
    gap: 10px;
  }
  .brand-v3 .inventory-table {
    font-size: 12px;
  }
  .brand-v3 .inventory-table td:last-child {
    font-size: 11px;
  }
  .brand-v3 .inventory-table .table-piece {
    gap: 8px;
  }
  .brand-v3 .table-piece .product-art {
    width: 28px;
    height: 34px;
  }
  .brand-v3 .panel-chip {
    font-size: 9px;
    padding: 6px;
    max-width: 85px;
  }
  .brand-v3 .inventory-overview b {
    font-size: 23px;
  }
  .brand-v3 .inventory-overview span {
    font-size: 10px;
  }
  .brand-v3 .inventory-overview > div + div {
    padding-inline-start: 17px;
  }
  .brand-v3 .inventory-overview {
    gap: 18px;
  }
  .brand-v3 .workspace-note {
    padding-inline: 18px;
    font-size: 9px;
  }
  .brand-v3 .catalogue-demo {
    gap: 7px;
  }
  .brand-v3 .catalogue-piece h4 {
    font-size: 11px;
  }
  .brand-v3 .catalogue-piece p {
    font-size: 9px;
  }
  .brand-v3 .catalogue-footer p {
    font-size: 9px;
  }
  .brand-v3 .share-chips > span {
    font-size: 8px;
    padding: 5px;
  }
  .brand-v3 .trade-group > span {
    font-size: 18px;
  }
  .brand-v3 .calc-results > div {
    padding: 17px 11px;
  }
  .brand-v3 .calc-results strong {
    font-size: 26px;
  }
  .brand-v3 .calc-results > div > span {
    font-size: 12px;
  }
  .brand-v3 .calc-results > div > .result-formula {
    font-size: 11px;
  }
  .brand-v3 .calculator {
    padding: 24px 20px;
  }
  .brand-v3 .calc-fields label {
    font-size: 13px;
  }
  .brand-v3 .input-wrap input {
    font-size: 20px;
  }
  .brand-v3 .example-note {
    font-size: 12px;
  }
  .brand-v3 .footer-main > div:first-child {
    display: block;
  }
  .brand-v3 .footer-main p {
    margin-top: 18px;
    max-width: 300px;
  }
  .brand-v3 .dialog-content {
    padding: 33px 25px;
  }
  :root[lang='fr'] .brand-v3 .hero h1 {
    font-size: 10.8vw;
    letter-spacing: -1.8px;
  }
  :root[lang='fr'] .brand-v3 .hero-description {
    font-size: 17px;
  }
  :root[lang='fr'] .brand-v3 .hero-actions .text-link {
    max-width: 180px;
  }
  :root[lang='ar'] .brand-v3 .hero h1 {
    font-size: 13.3vw;
  }
  :root[lang='ar'] .brand-v3 .hero-description {
    font-size: 17px;
  }
  :root[lang='ar'] .brand-v3 .workflow-tab {
    min-height: 0;
  }
  :root[lang='ar'] .brand-v3 .workflow-tab strong {
    font-size: 18px;
  }
  :root[lang='ar'] .brand-v3 .tab-description {
    font-size: 16px;
  }
  :root[lang='ar'] .brand-v3 .hero-actions .text-link {
    max-width: 180px;
    font-size: 13px;
  }
}
@media (max-width: 380px) {
  .brand-v3 .comfort-toggle {
    display: none;
  }
  .brand-v3 .header-actions {
    gap: 8px;
  }
  .brand-v3 .hero h1 {
    font-size: 13.8vw;
    letter-spacing: -1.8px;
  }
  .brand-v3 h2,
  .brand-v3 .section-top h2 {
    font-size: 31px;
  }
  .brand-v3 .hero-description {
    font-size: 17px;
  }
  .brand-v3 .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .brand-v3 .hero-actions .text-link {
    max-width: none;
  }
  .brand-v3 .availability {
    font-size: 12px;
  }
  .brand-v3 .weight-float > .eyebrow {
    font-size: 6.5px;
  }
  .brand-v3 .weight-float > strong {
    font-size: 25px;
  }
  .brand-v3 .demo-caption {
    font-size: 8px;
  }
  .brand-v3 .tool-card {
    padding: 20px;
    gap: 0 16px;
  }
  .brand-v3 .tool-card h3 {
    font-size: 19px;
  }
  .brand-v3 .panel-head h3 {
    font-size: 20px;
  }
  .brand-v3 .inventory-table {
    font-size: 11px;
  }
  .brand-v3 .inventory-table td:last-child {
    font-size: 10px;
  }
  .brand-v3 .table-piece small {
    font-size: 9px;
  }
  .brand-v3 .inventory-overview b {
    font-size: 21px;
  }
  .brand-v3 .panel-chip {
    font-size: 8px;
    max-width: 75px;
  }
  .brand-v3 .catalogue-footer {
    flex-wrap: wrap;
  }
  .brand-v3 .workspace-note {
    font-size: 8px;
  }
  .customer-preview-shell {
    padding: 21px 18px;
  }
  .customer-tabs button {
    padding: 13px 10px;
    font-size: 13px;
  }
  .box-value {
    font-size: 42px;
  }
  .box-jewels {
    gap: 3px;
  }
  .box-jewels svg {
    width: 72px;
    height: 85px;
  }
  .box-weight {
    font-size: 11px;
  }
  .customer-preview-top > .demo-label {
    max-width: 100px;
  }
  .brand-v3 .precision-copy h2 {
    font-size: 37px;
  }
  .brand-v3 .calculator {
    padding: 22px 17px;
  }
  .brand-v3 .calc-results strong {
    font-size: 22px;
  }
  .brand-v3 .calc-results > div > span {
    font-size: 11px;
  }
  .brand-v3 .calc-top {
    font-size: 9px;
  }
  .brand-v3 .calc-fields label {
    font-size: 12px;
  }
  .brand-v3 .cta-inner h2 {
    font-size: 12.6vw;
  }
  .brand-v3 .cta-inner h2 > span:nth-child(3) {
    font-size: 25px;
    right: -25px;
    top: -15px;
  }
  .brand-v3 .cta-inner > .eyebrow {
    font-size: 9px;
  }
  .brand-v3 .confidence-card {
    padding-inline: 22px;
  }
  .brand-v3 .confidence-card h3 {
    font-size: 22px;
  }
  .brand-v3 .privacy-grid h3 {
    font-size: 20px;
  }
  .brand-v3 .rental-story {
    padding: 23px;
  }
  .rental-arc {
    width: 210px;
  }
  .verification-scene {
    padding: 22px 18px;
  }
  .brand-v3 .receipt-state button {
    font-size: 12px;
  }
  :root[lang='fr'] .brand-v3 .hero h1 {
    font-size: 11.1vw;
    letter-spacing: -1.4px;
  }
  :root[lang='fr'] .brand-v3 .cta-inner h2 {
    font-size: 10.8vw;
    letter-spacing: -1.1px;
  }
  :root[lang='ar'] .brand-v3 h2,
  :root[lang='ar'] .brand-v3 .section-top h2 {
    font-size: 30px;
  }
  :root[lang='ar'] .brand-v3 .cta-inner h2 {
    font-size: 12vw;
  }
  :root[lang='ar'] .brand-v3 .cta-inner h2 > span:nth-child(3) {
    font-size: 24px;
    left: -25px;
  }
  :root[lang='ar'] .brand-v3 .hero h1 {
    font-size: 14.8vw;
  }
}
/* Reading mode changes real page copy, without distorting illustrative phones. */
:root[data-comfort='large'] .brand-v3 .hero-description,
:root[data-comfort='large'] .brand-v3 .feature-lead,
:root[data-comfort='large'] .brand-v3 .section-intro,
:root[data-comfort='large'] .brand-v3 .tool-card > p,
:root[data-comfort='large'] .brand-v3 .tool-card details > p,
:root[data-comfort='large'] .brand-v3 .trust-benefits p,
:root[data-comfort='large'] .brand-v3 .problem-grid p,
:root[data-comfort='large'] .brand-v3 .tradition-list li,
:root[data-comfort='large'] .brand-v3 .rental-story > p,
:root[data-comfort='large'] .brand-v3 .confidence-card p:not(.eyebrow),
:root[data-comfort='large'] .brand-v3 .comfort-panel p,
:root[data-comfort='large'] .brand-v3 .story-copy > p:not(.eyebrow),
:root[data-comfort='large'] .brand-v3 .privacy-grid p,
:root[data-comfort='large'] .brand-v3 .faq-answer p,
:root[data-comfort='large'] .brand-v3 .customer-wallet-note {
  font-size: 20px;
  line-height: 1.9;
}
:root[data-comfort='large'] .brand-v3 .faq-list summary,
:root[data-comfort='large'] .brand-v3 .tool-card summary {
  font-size: 19px;
}
:root[data-comfort='large'] .brand-v3 .tool-card h3,
:root[data-comfort='large'] .brand-v3 .privacy-grid h3 {
  font-size: 24px;
}
@media (prefers-reduced-motion: reduce) {
  .donut-value {
    stroke-dasharray: 60 100;
  }
  html:not([data-motion='on']) .scan-line {
    display: none !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .desktop-nav a:hover,
  .brand-v3 .footer-links a:hover {
    color: var(--brand-link);
  }
}
:root[data-theme='light'] .brand-v3 .status-dot {
  background: #65583c;
  box-shadow: none;
}
:root[data-theme='light'] .brand-v3 .status-dot:after {
  border-color: #65583c;
}
:root[data-theme='light'] .brand-v3 .reading-progress {
  background: #65583c;
}
:root[data-theme='light'] .brand-v3 .tiny-star {
  color: #65583c;
}
/* ==========================================================================
   5. FOCUSED VISITOR JOURNEY — CHAMPAGNE ACCENT
   ========================================================================== */
.brand-v3 .hero h1,
:root[lang='fr'] .brand-v3 .hero h1 {
  font-size: clamp(43px, 4.6vw, 68px);
  line-height: 1.15;
  letter-spacing: -2.5px;
}
:root[lang='ar'] .brand-v3 .hero h1 {
  font-size: clamp(46px, 5.2vw, 72px);
  line-height: 1.35;
  letter-spacing: 0;
}
.brand-v3 .hero-tagline {
  margin-top: 28px;
  font-size: 16px;
  color: var(--muted);
}
.brand-v3 .hero-bottom { margin-top: 18px; }
.brand-v3 .availability { font-size: 14px; }
.brand-v3 .play-icon .icon { width: 15px; height: 15px; }
.brand-v3 .header-inner { gap: 22px; }
.brand-v3 .desktop-nav { gap: 22px; }
.brand-v3 .section-space { padding-block: 76px; }
.brand-v3 .trust-layout { align-items: start; gap: 45px; }
.brand-v3 .trust-section .section-top { margin-bottom: 32px; }
.brand-v3 .workflow-section { border-bottom: 1px solid var(--line); }
.workflow-section .eyebrow { margin-bottom: 18px; }
.workflow-section .how-steps {
  border: 0;
  margin-top: 32px;
  padding-top: 0;
  gap: 32px;
}
.workflow-section .how-steps li { align-items: start; }
.workflow-section .step-count { width: 42px; height: 42px; font-size: 13px; }
.workflow-section h3 { font-size: 21px; line-height: 1.5; margin-bottom: 10px; }
.workflow-section li p { font-size: 16px; line-height: 1.75; color: var(--muted); }
.brand-v3 .integrated-tools { padding-top: 64px; }
.brand-v3 .integrated-tools .section-top { margin-bottom: 28px; }
.brand-v3 .integrated-tools h2 { font-size: clamp(28px, 3vw, 40px); }
.deep-dive {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  overflow: clip;
  scroll-margin-top: 110px;
}
.deep-dive > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 20px 24px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--brand-link);
  list-style: none;
  cursor: pointer;
}
.deep-dive > summary::-webkit-details-marker { display: none; }
.deep-dive > summary::after { content: '+'; font-size: 25px; flex: none; }
.deep-dive[open] > summary::after { content: '−'; }
.deep-dive[open] > summary { border-bottom: 1px solid var(--line); }
.deep-dive > .feature-grid { padding: 24px; }
.brand-v3 .deep-dive .precision-section,
.brand-v3 .deep-dive .traditions-section { padding: 32px 24px; border: 0; }
.deep-dive .shell { width: 100%; max-width: none; padding-inline: 0; }
.brand-v3 .deep-dive .section-top { margin-bottom: 24px; }
.brand-v3 .deep-dive h2 { font-size: clamp(28px, 3vw, 40px); }
.brand-v3 .integrated-privacy { padding-top: 52px; border: 0; }
.brand-v3 .integrated-privacy h2 { font-size: 32px; }
.integrated-privacy .privacy-grid { margin-top: 28px; }
.founder-note {
  display: flex;
  gap: 24px;
  align-items: start;
  margin-top: 48px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--inset);
}
.founder-note > img { flex: none; }
:root[data-theme='light'] .founder-note > img { filter: invert(1); }
.founder-note h3 { font-size: 23px; line-height: 1.5; margin-top: 10px; }
.founder-note p:not(.eyebrow) { color: var(--muted); font-size: 16px; line-height: 1.75; margin-top: 12px; max-width: 780px; }
.founder-note .text-link { color: var(--brand-link); font-size: 16px; margin-top: 16px; }
.verification-output > p,
.record-trail h4,
.record-trail li { font-size: 14px; }
.brand-v3 .demo-caption { font-size: 12px; }
@media (max-width: 980px) {
  .brand-v3 .hero h1,
  :root[lang='fr'] .brand-v3 .hero h1 { font-size: clamp(43px, 6vw, 62px); }
  .brand-v3 .section-space { padding-block: 60px; }
  .workflow-section .how-steps { gap: 22px; }
  .workflow-section h3 { font-size: 19px; }
}
@media (max-width: 700px) {
  .brand-v3 .hero h1,
  :root[lang='fr'] .brand-v3 .hero h1 {
    font-size: clamp(30px, 8.5vw, 54px);
    letter-spacing: -1.3px;
    line-height: 1.2;
  }
  :root[lang='ar'] .brand-v3 .hero h1 { font-size: clamp(36px, 10vw, 60px); letter-spacing: 0; }
  .brand-v3 .hero-copy { padding-top: 24px; }
  .brand-v3 .hero-description { font-size: 18px; line-height: 1.65; }
  .brand-v3 .hero-actions { gap: 16px; }
  .brand-v3 .hero-actions .text-link { font-size: 15px; max-width: none; }
  .brand-v3 .hero-tagline { margin-top: 22px; }
  .brand-v3 .hero-bottom { margin-top: 14px; }
  .brand-v3 .section-space { padding-block: 48px; }
  .workflow-section .how-steps { grid-template-columns: 1fr; gap: 24px; }
  .workflow-section h3 { font-size: 21px; margin-bottom: 5px; }
  .brand-v3 .integrated-tools { padding-top: 40px; }
  .brand-v3 .trust-layout { gap: 28px; }
  .deep-dive > summary { padding: 18px; font-size: 16px; }
  .deep-dive > .feature-grid { padding: 16px; }
  .brand-v3 .deep-dive .precision-section,
  .brand-v3 .deep-dive .traditions-section { padding: 24px 16px; }
  .brand-v3 .integrated-privacy { padding-top: 36px; }
  .founder-note { padding: 22px; gap: 16px; margin-top: 32px; }
  .founder-note > img { width: 32px; height: auto; }
  .founder-note h3 { font-size: 21px; }
}
/* ==========================================================================
   6. CONTRAST AND FLUID MOTION
   Text and control states use theme tokens; motion stays an explicit preference.
   ========================================================================== */
:root {
  --ease-fluid: cubic-bezier(0.22, 1, 0.36, 1);
  --ease: var(--ease-fluid);
  --control-line: #7d8772;
  --hover-ink: #f4f5ee;
  --action-hover: #d4ff59;
  --hover-surface: #292f25;
}
:root[data-theme='light'] {
  --control-line: #78816d;
  --hover-ink: #403820;
  --action-hover: #30372a;
  --hover-surface: #e6eadd;
}
.brand-v3 .skip { color: #191b17; }
.brand-v3 :is(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--brand-link);
  outline-offset: 5px;
}
.brand-v3 :is(.btn-outline, .icon-button, .customer-tabs button, .dialog-field input) {
  border-color: var(--control-line);
}
.brand-v3 .input-wrap input { border-color: #78816d; }
.brand-v3 .dialog-field input::placeholder { opacity: 1; color: var(--muted); }
.brand-v3 .precision-section {
  --ink: #191b17;
  --muted: #526048;
  --brand-link: #65583c;
  --accent: #65583c;
  --control-line: #78816d;
  --hover-ink: #403820;
  --hover-surface: #e6eadd;
}
.brand-v3 .precision-section .section-number { color: var(--brand-link); }
.brand-v3 :is(.faq-list summary, .font-credit):focus-visible {
  color: var(--brand-link);
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 :is(.faq-list summary, .font-credit):hover {
    color: var(--brand-link);
  }
}
.brand-v3 .btn {
  isolation: isolate;
  overflow: hidden;
  transition: transform 650ms var(--ease-fluid), border-color 450ms ease, box-shadow 650ms ease;
}
.brand-v3 .btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 50% 50% 0 0;
  background: var(--hover-surface);
  transform: translateY(105%) scaleX(0.82);
  transition: transform 650ms var(--ease-fluid), border-radius 650ms var(--ease-fluid);
  pointer-events: none;
}
.brand-v3 .btn-lime::before { background: var(--action-hover); }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .btn-lime:hover { background: var(--lime); }
  :root[data-theme='light'] .brand-v3 .btn-lime:hover { background: #191b17; }
  .brand-v3 .btn-outline:hover { background: transparent; color: var(--ink); }
}
.brand-v3 .btn:focus-visible::before { transform: translateY(0) scaleX(1); border-radius: inherit; }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .btn:hover::before { transform: translateY(0) scaleX(1); border-radius: inherit; }
}
.brand-v3 .btn:focus-visible {
  transform: translateY(-2px);
  border-color: var(--brand-link);
  box-shadow: 0 8px 24px #0000000d;
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .btn:hover {
    transform: translateY(-2px);
    border-color: var(--brand-link);
    box-shadow: 0 8px 24px #0000000d;
  }
}
.brand-v3 .btn-lime:focus-visible { border-color: transparent; }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .btn-lime:hover { border-color: transparent; }
}
.brand-v3 .btn:active { transform: translateY(0) scale(0.985); transition-duration: 160ms; }
.brand-v3 .btn .icon { transition: transform 650ms var(--ease-fluid); }
.brand-v3 .btn:focus-visible .icon { transform: translate(2px, -2px); }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .btn:hover .icon { transform: translate(2px, -2px); }
}
.brand-v3 :is(.text-link, .desktop-nav a, .footer-links a, .font-credit) {
  transition: color 350ms ease;
}
.brand-v3 :is(.text-link, .desktop-nav a, .footer-links a):focus-visible { color: var(--hover-ink); }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 :is(.text-link, .desktop-nav a, .footer-links a):hover { color: var(--hover-ink); }
}
.brand-v3 .text-link > span:not(.play-icon) { transition: background-size 650ms var(--ease-fluid); }
.brand-v3 .icon-button {
  transition: color 350ms ease, border-color 350ms ease, background-color 450ms ease, transform 600ms var(--ease-fluid);
}
.brand-v3 .icon-button:focus-visible {
  color: var(--ink);
  border-color: var(--brand-link);
  background: var(--hover-surface);
  transform: scale(1.045);
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .icon-button:hover {
    color: var(--ink);
    border-color: var(--brand-link);
    background: var(--hover-surface);
    transform: scale(1.045);
  }
}
.brand-v3 .icon-button:disabled { transform: none; }
.brand-v3 .tool-card {
  transition: border-color 500ms ease, transform 850ms var(--ease-fluid), box-shadow 850ms var(--ease-fluid);
}
.brand-v3 .tool-card:has(:focus-visible) {
  border-color: var(--brand-link);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px #0000000d;
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .tool-card:hover {
    border-color: var(--brand-link);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px #0000000d;
  }
}
.brand-v3 :is(.deep-dive > summary, .tool-card summary, .faq-list summary) {
  transition: color 350ms ease, background-color 500ms ease;
}
.brand-v3 :is(.deep-dive > summary, .tool-card summary):focus-visible {
  color: var(--hover-ink);
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 :is(.deep-dive > summary, .tool-card summary):hover {
    color: var(--hover-ink);
  }
}
.brand-v3 .deep-dive > summary:focus-visible { background: var(--hover-surface); }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .deep-dive > summary:hover { background: var(--hover-surface); }
}
.brand-v3 :is(.customer-tabs button, .receipt-state button, .material-options button) {
  transition: color 350ms ease, background-color 650ms var(--ease-fluid), border-color 500ms ease, transform 650ms var(--ease-fluid);
}
.brand-v3 :is(.customer-tabs button, .receipt-state button):focus-visible {
  color: var(--hover-ink);
  border-color: var(--brand-link);
  background: var(--hover-surface);
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 :is(.customer-tabs button, .receipt-state button):hover {
    color: var(--hover-ink);
    border-color: var(--brand-link);
    background: var(--hover-surface);
  }
}
.brand-v3 .material-options button:focus-visible {
  color: #191b17;
  border-color: #65583c;
  background: #e6eadd;
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .material-options button:hover {
    color: #191b17;
    border-color: #65583c;
    background: #e6eadd;
  }
}
.brand-v3 .language-art button {
  transition: color 350ms ease, background-color 500ms ease, transform 850ms var(--ease-fluid);
}
.brand-v3 .language-art button:focus-visible {
  color: var(--hover-ink);
  background: var(--hover-surface);
  transform: translateY(-3px) rotate(0);
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .language-art button:hover {
    color: var(--hover-ink);
    background: var(--hover-surface);
    transform: translateY(-3px) rotate(0);
  }
}
/* Entrances have a soft settle; the stable workflow row can replay on return. */
html.enhanced[data-motion='on'] [data-reveal] {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 950ms var(--ease-fluid), translate 1150ms var(--ease-fluid), transform 850ms var(--ease-fluid), border-color 500ms ease, box-shadow 850ms var(--ease-fluid);
  transition-delay: var(--reveal-delay, 0ms);
}
html.enhanced[data-motion='on'] [data-reveal].revealed { opacity: 1; translate: 0 0; }
html[data-motion='on'] .hero-enter { animation-duration: 1250ms; animation-timing-function: var(--ease-fluid); }
html[data-motion='on'] .title-line > span { animation-duration: 1500ms; }
html[data-motion='on'] .float-card { animation-duration: 11s; }
html[data-motion='on'] .studio-halo { animation: liquid-halo 19s ease-in-out infinite; }
html[data-motion='on'] .panel-arrive { animation: liquid-panel 700ms var(--ease-fluid) both; }
html[data-motion='on'] dialog::backdrop { animation: veil-in 500ms ease both; }
.workflow-section .how-steps { position: relative; }
.workflow-section .how-steps::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -18px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-link), var(--line));
  transform-origin: left;
}
:root[dir='rtl'] .workflow-section .how-steps::before { transform-origin: right; }
html[data-motion='on'] .workflow-section .how-steps::before { transform: scaleX(0); transition: transform 1600ms var(--ease-fluid); }
html[data-motion='on'] .workflow-section.is-in-view .how-steps::before { transform: scaleX(1); }
.workflow-section .step-count { background: var(--card); border-color: var(--control-line); }
html[data-motion='on'] .workflow-section li.revealed .step-count { animation: liquid-seal 1300ms var(--ease-fluid) both; animation-delay: var(--reveal-delay, 0ms); }
.brand-v3 .scan-line { display: block; top: -6px; opacity: 0; animation: none; background: #65583c; box-shadow: none; }
html[data-motion='off'] .scan-line { display: none; }
html[data-motion='on'] .trade-track { animation-duration: 52s; animation-play-state: paused; }
html[data-motion='on'] .trade-strip.is-in-view .trade-track { animation-play-state: running; }
html[data-motion='off'] .trade-track { transform: none; }
@keyframes liquid-halo {
  0%, 100% { transform: translate3d(-2%, 1%, 0) scale(0.96) rotate(-4deg); }
  50% { transform: translate3d(2%, -1%, 0) scale(1.07) rotate(4deg); }
}
@keyframes liquid-panel {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes liquid-seal {
  0% { transform: scale(0.86); border-radius: 38% 62% 58% 42%; }
  65% { border-radius: 52% 48% 46% 54%; }
  100% { transform: scale(1); border-radius: 50%; }
}
@keyframes veil-in { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   7. TACTILE HOVERS AND A COHERENT LIGHT / DARK REVEAL
   Inspired by the E.F Productions ripple and Serena Congiu's quiet motion.
   ========================================================================== */
/* Buttons retain the gentler rising fill from the earlier motion pass. */
.brand-v3 .theme-toggle .icon {
  transform: rotate(0deg) scale(1);
  transition: transform 980ms var(--ease-fluid);
}
:root[data-theme='light'] .brand-v3 .theme-toggle .icon { transform: rotate(90deg) scale(0.92); }
.brand-v3 .tool-card { position: relative; isolation: isolate; overflow: hidden; }
.brand-v3 .tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at var(--glint-x, 50%) var(--glint-y, 30%), #c7bea50f, transparent 68%);
  opacity: 0;
  transition: opacity 800ms var(--ease-fluid);
  pointer-events: none;
}
.brand-v3 .tool-card:has(:focus-visible)::before { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .tool-card:hover::before { opacity: 1; }
}
.brand-v3 .tool-card:has(:focus-visible) { transform: translateY(-3px); }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .tool-card:hover { transform: translateY(-3px); }
}
.brand-v3 :is(.desktop-nav a, .footer-links a) { position: relative; }
.brand-v3 :is(.desktop-nav a, .footer-links a)::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -5px;
  height: 1px;
  background: var(--brand-link);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 650ms var(--ease-fluid);
  pointer-events: none;
}
:root[dir='rtl'] .brand-v3 :is(.desktop-nav a, .footer-links a)::after { transform-origin: right; }
.brand-v3 :is(.desktop-nav a, .footer-links a):focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 :is(.desktop-nav a, .footer-links a):hover::after { transform: scaleX(1); }
}
.brand-v3 :is(.workflow-tab, .customer-tabs button, .receipt-state button, .deep-dive > summary, .faq-list summary) {
  isolation: isolate;
  position: relative;
}
.brand-v3 :is(.workflow-tab, .customer-tabs button, .receipt-state button, .deep-dive > summary, .faq-list summary)::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: var(--hover-surface);
  opacity: 0;
  transform: scaleX(0.94);
  transform-origin: left;
  transition: opacity 650ms var(--ease-fluid), transform 900ms var(--ease-fluid);
  pointer-events: none;
}
.brand-v3 :is(.workflow-tab, .customer-tabs button, .receipt-state button, .deep-dive > summary, .faq-list summary):focus-visible::after {
  opacity: 1;
  transform: scaleX(1);
  }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 :is(.workflow-tab, .customer-tabs button, .receipt-state button, .deep-dive > summary, .faq-list summary):hover::after {
    opacity: 1;
    transform: scaleX(1);
  }
}
:root[dir='rtl'] .brand-v3 :is(.workflow-tab, .customer-tabs button, .receipt-state button, .deep-dive > summary, .faq-list summary)::after { transform-origin: right; }
/* Deep-dive summaries keep their visible plus/minus separate from the fill. */
.brand-v3 .deep-dive > summary::after {
  content: '+';
  position: static;
  inset: auto;
  z-index: auto;
  border-radius: 0;
  background: none;
  opacity: 1;
  transform: none;
  font-size: 25px;
}
.brand-v3 .deep-dive[open] > summary::after { content: '−'; transform: rotate(180deg); }
.brand-v3 .deep-dive > summary:focus-visible::after { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .deep-dive > summary:hover::after { transform: none; }
}
.brand-v3 .deep-dive[open] > summary:focus-visible::after { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .brand-v3 .deep-dive[open] > summary:hover::after { transform: rotate(180deg); }
}
.brand-v3 .workflow-tab::after,
.brand-v3 .faq-list summary::after { border-radius: 10px; }
.brand-v3 .workflow-tab:before { transition: width 1000ms var(--ease-fluid); }
.brand-v3 .workflow-tab strong { transition: color 450ms ease; }
.brand-v3 .tab-description { transition: max-height 740ms var(--ease-fluid), opacity 600ms ease, margin 740ms var(--ease-fluid); }
.brand-v3 .workflow-tab > .icon { transition: opacity 650ms ease, transform 850ms var(--ease-fluid); }
.brand-v3 .faq-plus:before,
.brand-v3 .faq-plus:after { transition: transform 740ms var(--ease-fluid); }
/* Each snapshot keeps its original foreground/background pairs throughout. */
/* Stay transparent to input even while skipTransition tears down its overlay. */
::view-transition,
::view-transition-group(root),
::view-transition-image-pair(root),
::view-transition-old(root),
::view-transition-new(root) { pointer-events: none; }
:root[data-theme-transition='running']::view-transition-group(root),
:root[data-theme-transition='running']::view-transition-old(root),
:root[data-theme-transition='running']::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
:root[data-theme-transition='running']::view-transition-image-pair(root) { isolation: isolate; }
:root[data-theme-transition='running']::view-transition-old(root) { z-index: 1; }
:root[data-theme-transition='running']::view-transition-new(root) {
  z-index: 2;
  animation: theme-reveal 850ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes theme-reveal {
  from { clip-path: circle(0px at var(--theme-origin-x) var(--theme-origin-y)); }
  to { clip-path: circle(var(--theme-radius) at var(--theme-origin-x) var(--theme-origin-y)); }
}

/* The wipe carries the palette change; color interpolation would briefly reduce contrast. */
:root[data-theme-transition] body,
:root[data-theme-transition] body *,
:root[data-theme-transition] body *::before,
:root[data-theme-transition] body *::after {
  transition-property: transform, translate, scale, opacity, clip-path !important;
}
/* Keep capture work light and prevent moving decorations inside frozen snapshots. */
:root[data-theme-transition='running'] body *,
:root[data-theme-transition='running'] body *::before,
:root[data-theme-transition='running'] body *::after {
  animation-play-state: paused !important;
}

/* Touch feedback is momentary; selected tabs and open panels keep their own states. */
.brand-v3 :is(.icon-button, .customer-tabs button, .receipt-state button, .material-options button):active {
  transform: scale(0.97);
  transition-duration: 160ms;
}
@media (max-width: 980px) {
  .brand-v3 .header-actions .icon-button,
  .brand-v3 .motion-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
  }
  .brand-v3 .tool-card summary,
  .brand-v3 .material-options button { min-height: 44px; }
}
@media (max-width: 360px) {
  .brand-v3 .header-inner { gap: 8px; }
  .brand-v3 .header-actions { gap: 5px; }
  .brand-v3 .language-control { gap: 4px; }
}

/* The app illustration follows the same complete palettes as the page. */
:root {
  --selection-bg: #c6fe21;
  --app-line: #3d4836;
  --app-selected: #c7bea517;
  --app-add-bg: #c6fe21;
  --app-add-ink: #191b17;
  --app-stock: #c6fe21;
  --app-art-bg: #252c20;
  --app-art-brightness: 1;
  --app-nav-shadow: #0d130b;
}
:root[data-theme='light'] {
  --selection-bg: #ded6bf;
  --app-line: #c5ccbe;
  --app-selected: #eee9dc;
  --app-add-bg: #191b17;
  --app-add-ink: #c6fe21;
  --app-stock: #65583c;
  --app-art-bg: #e5e8df;
  --app-art-brightness: 0.55;
  --app-nav-shadow: #23301812;
}
.brand-v3 .phone-screen {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--app-line);
  color-scheme: inherit;
}
.brand-v3 .phone-screen :is(.sales-card, .app-metrics > div, .app-bottom) {
  background: var(--card);
  color: var(--ink);
  border-color: var(--app-line);
}
.brand-v3 .phone-screen :is(.battery, .app-top p, .card-label, .sales-amount small, .sales-meta, .app-metrics span, .app-metrics .icon, .app-section-label > span, .app-product small, .app-bottom > .icon) {
  color: var(--muted);
}
.brand-v3 .phone-screen :is(.sales-meta, .app-product) { border-color: var(--app-line); }
.brand-v3 .phone-screen .app-avatar {
  color: var(--brand-link);
  border-color: var(--control-line);
}
.brand-v3 .phone-screen .sales-spark .chart-line { stroke: var(--brand-link); }
.brand-v3 .phone-screen #chart-fill stop { stop-color: var(--brand-link); }
.brand-v3 .phone-screen .app-bottom { box-shadow: 0 -7px 20px var(--app-nav-shadow); }
.brand-v3 .phone-screen .app-bottom .selected {
  color: var(--brand-link);
  background: var(--app-selected);
}
.brand-v3 .phone-screen .app-add { background: var(--app-add-bg); color: var(--app-add-ink); }
.brand-v3 .phone-screen .stock-dot { background: var(--app-stock); }
.brand-v3 .phone-screen .product-art { background: var(--app-art-bg); }
.brand-v3 .phone-screen .product-art svg { filter: brightness(var(--app-art-brightness)); }

/* V6: the approved motion composition, with warm metal accents and the app's hierarchy. */
:root[data-theme='light'] { --gold:#8a6112; }
html[data-motion='on'] .trade-track,
html[data-motion='on'] .trade-strip.is-in-view .trade-track {
  animation: trade-scroll 52s linear infinite;
  animation-play-state: running;
  will-change: transform;
}
.trade-group { min-width:100vw; justify-content:space-around; }
html[data-motion='off'] .trade-track { animation:none; transform:none; }
.market-reference { border:1px solid var(--control-line);border-radius:24px;background:var(--card);padding:25px;margin-block:28px 15px; }
.market-heading,.market-actions { display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; }
.market-heading .eyebrow { font-size:10px; margin:0; }
.metal-seal { color:var(--gold);font-size:28px;line-height:1; }
.market-number { display:flex;align-items:baseline;gap:12px;margin-top:15px;color:var(--ink); }
.market-number bdi { font:400 clamp(40px,4vw,58px)/1.2 var(--body);letter-spacing:-2px; }
.market-number small { font:11px var(--mono);color:var(--muted); }
.market-reference .market-date { margin-top:8px;font:11px/1.6 var(--mono);color:var(--muted); }
.market-reference > p:not(.market-date) { font:13px/1.7 var(--body);color:var(--muted);margin-block:8px 18px; }
.price-history svg { display:block;width:100%;height:115px;margin-top:5px; }
.market-actions a { font-size:13px; }
.refresh-reference,.reference-mode button { min-height:44px;padding:10px 14px;background:var(--surface);border:1px solid var(--control-line);color:var(--brand-link);border-radius:30px;font-size:12px;transition:background 650ms var(--ease),color 650ms var(--ease); }
.refresh-reference:disabled { opacity:.65; }
.reference-mode { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px; }
.reference-mode>span { font-size:11px;color:var(--muted); }
.reference-mode button { padding:8px 12px;font-size:11px;flex-shrink:0; }
.brand-v3 #precision.precision-section {
  /* This paper-colored interlude keeps a complete local palette in either page theme. */
  --card:#fff;--surface:#ecefe7;--line:#cad0c3;--gold:#8a6112;--app-selected:#eee9dc;
  border-block:1px solid var(--line);
}
.brand-v3 #precision .precision-shell { align-items:start; }
.brand-v3 #precision .precision-copy>p:not(.eyebrow) { max-width:490px; }
.brand-v3 #precision .precision-copy h2 { font-size:clamp(34px,4.1vw,57px); }
.brand-v3 #precision .precision-copy>.example-note { font-size:12px;line-height:1.7; }
.brand-v3 #precision .calc-fields { gap:18px; }
.brand-v3 #precision .material-options button { min-width:55px; }
.brand-v3 #precision .calc-footnote { line-height:1.8;font-size:12px; }
.brand-v3 .phone-app { height:calc(100% - 35px);overflow:auto;scrollbar-width:none;padding-bottom:80px;overscroll-behavior:contain; }
.phone-app::-webkit-scrollbar { display:none; }
.phone-app .app-top { margin-top:8px; }
.brand-v3 .phone-price { margin-top:16px; }
.phone-price .gold-label { color:var(--gold);border:1px solid var(--gold);border-radius:20px;padding:2px 6px;font:8px var(--mono); }
.phone-price-chart { height:37px;width:100%;display:block;margin-top:7px; }
.phone-price-chart path { stroke:var(--gold);stroke-width:2;fill:none;stroke-linejoin:round; }
.phone-price .phone-price-caption { font:8px/1.6 var(--body);color:var(--muted);margin-top:7px; }
.phone-quick { display:flex;gap:7px;margin-top:12px; }
.phone-quick>* { display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 5px;min-height:44px;flex:1;color:var(--brand-link);background:var(--card);border:1px solid var(--app-line);border-radius:12px;font:9px var(--body); }
.phone-quick .icon { width:13px;height:13px; }
.brand-v3 .phone-app .app-metrics b { font-size:20px; }
.brand-v3 .phone-app .app-metrics>div { border-radius:14px; }
.brand-v3 .phone-app .app-section-label { margin-top:15px; }
.brand-v3 .phone-product { width:100%;background:transparent;text-align:start;min-height:53px; }
.phone-piece-info { flex:1; }
.brand-v3 .phone-product .stock-dot { background:var(--success); }
.brand-v3 .phone-screen .app-bottom { padding:5px;gap:3px;inset-inline:10px;bottom:10px; }
.brand-v3 .app-bottom button { min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:30px;background:transparent;color:var(--muted);font:8px var(--body);padding:6px; }
.brand-v3 .app-bottom button span { display:none; }
.brand-v3 .phone-screen .app-bottom button.selected { background:#2f3f17;color:#c6fe21; }
.brand-v3 .app-bottom button.selected span { display:inline; }
.brand-v3 .phone-screen .app-bottom button.app-add { background:var(--app-add-bg);color:var(--app-add-ink);width:44px;flex:none; }
:root[data-theme='light'] .brand-v3 .phone-screen .app-bottom button.selected { background:#191b17;color:#f5f6f0; }
:root[data-theme='light'] .brand-v3 .phone-screen .app-bottom button.selected .icon { color:#c6fe21; }
.sample-sale { padding:8px 0; }
.sample-sale .panel-eyebrow { line-height:1.7; }
.sample-sale h3 { font-size:27px;letter-spacing:-.6px;margin-block:10px 20px; }
.sample-piece { display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line); }
.sample-piece .product-art { width:70px;height:70px; }
.sample-piece b { font-size:16px; }
.sample-piece small { display:block;color:var(--muted);font:12px var(--mono);margin-top:8px; }
.sample-total { margin-block:24px 12px;display:flex;flex-direction:column;gap:8px; }
.sample-total>span,.sample-payment { color:var(--muted);font-size:13px; }
.sample-total strong { font:400 38px/1.3 var(--body);letter-spacing:-1px; }
.sample-total strong small { font-size:12px;letter-spacing:0; }
.sample-action { width:100%;margin-top:23px;min-height:48px;border-radius:30px;background:var(--lime);color:#191b17;font:600 13px var(--body);padding:12px 17px;transition:transform 650ms var(--ease); }
:root[data-theme='light'] .sample-action { background:#191b17;color:#f5f6f0; }
.sample-action.secondary { background:var(--surface);color:var(--ink);border:1px solid var(--control-line); }
.sample-proof { padding:15px;border:1px solid var(--success);border-radius:16px;margin-top:18px;color:var(--success); }
.sample-proof small { display:block;font:10px/1.8 var(--mono);margin-top:7px;color:var(--muted); }
.phone-app .sample-sale h3 { font-size:19px;margin-bottom:15px; }
.phone-app .sample-sale .panel-eyebrow { font-size:8px; }
.phone-app .sample-piece { gap:9px;padding-bottom:14px; }
.phone-app .sample-piece .product-art { width:47px;height:47px; }
.phone-app .sample-piece b { font-size:11px; }
.phone-app .sample-piece small { font-size:9px;margin-top:4px; }
.phone-app .sample-total { margin-top:17px; }
.phone-app .sample-total>span,.phone-app .sample-payment { font-size:9px; }
.phone-app .sample-total strong { font-size:30px; }
.phone-app .sample-action { font-size:10px;margin-top:15px; }
.phone-app .sample-proof { font-size:10px;padding:10px; }
.phone-app .sample-proof small { font-size:8px; }
.brand-v3 .demo-add-piece { min-width:44px;min-height:44px;border:1px solid var(--control-line);border-radius:50%;color:var(--brand-link);background:var(--card);margin-inline-start:12px;vertical-align:middle; }
.origin-map { display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-top:35px;margin-top:28px;border-top:1px solid var(--line); }
.origin-map h3 { font-size:30px;line-height:1.3;letter-spacing:-.8px;margin-block:15px; }
.origin-map p:not(.eyebrow) { color:var(--muted);font-size:16px;margin-block:15px; }
.origin-map .text-link { font-size:14px; }
.origin-map iframe { width:100%;height:280px;border:1px solid var(--control-line);border-radius:24px;background:var(--card); }
.roadmap-section { background:var(--surface);border-block:1px solid var(--line); }
.roadmap-heading { max-width:720px; }
.roadmap-heading h2 { font-size:clamp(34px,4vw,56px);line-height:1.2;letter-spacing:-1.5px; }
.roadmap-heading .feature-lead { margin-top:18px;max-width:650px;font-size:17px;color:var(--muted); }
.roadmap-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px; }
.roadmap-card { background:var(--card);border:1px solid var(--control-line);border-radius:24px;padding:26px; }
.roadmap-card-top { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:27px; }
.roadmap-number { font:11px var(--mono);color:var(--muted); }
.roadmap-status { font:10px var(--mono);color:var(--brand-link);background:var(--app-selected);border:1px solid var(--control-line);padding:7px 10px;border-radius:30px; }
.roadmap-card h3 { font-size:21px;line-height:1.35;letter-spacing:-.4px; }
.roadmap-card p { color:var(--muted);font-size:14px;line-height:1.8;margin-top:13px; }
@media(hover:hover) and (pointer:fine){
  .refresh-reference:hover,.reference-mode button:hover,.phone-quick>*:hover { background:var(--app-selected);color:var(--brand-link); }
  .sample-action:hover { transform:translateY(-2px); }
}
@media(max-width:1000px){.roadmap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.origin-map{gap:25px}.brand-v3 #precision .precision-copy h2{font-size:39px}}
@media(max-width:650px){
  .brand-v3 .studio{height:680px}
  .roadmap-grid{grid-template-columns:1fr}.roadmap-card{padding:23px}.roadmap-card-top{margin-bottom:18px}.roadmap-card h3{font-size:21px}.roadmap-heading .feature-lead{font-size:15px}.origin-map{grid-template-columns:1fr;gap:24px}.origin-map h3{font-size:27px}.origin-map iframe{height:270px}.market-reference{padding:21px}.brand-v3 #precision .precision-copy h2{font-size:34px}.reference-mode{align-items:flex-start;flex-wrap:wrap}.reference-mode button{font-size:11px}.brand-v3 #precision .calc-fields{gap:15px 10px}.brand-v3 #precision .input-wrap{min-width:0}.brand-v3 .demo-add-piece{display:block;margin-inline-start:0;margin-top:8px}.trade-group{min-width:max-content}
}
@media(prefers-reduced-motion:reduce){html:not([data-motion='on']) .trade-track{animation:none}}
@media(max-width:430px){.brand-v3 .studio{height:650px}}