:root {
  --font-sans:
    "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono",
    "Courier New", monospace;
  --fs-2xs: clamp(0.64rem, 0.08vw + 0.62rem, 0.72rem);
  --fs-xs: clamp(0.72rem, 0.12vw + 0.69rem, 0.82rem);
  --fs-sm: clamp(0.88rem, 0.16vw + 0.84rem, 0.98rem);
  --fs-base: clamp(0.96rem, 0.18vw + 0.92rem, 1.06rem);
  --fs-lg: clamp(1.04rem, 0.24vw + 0.98rem, 1.18rem);
  --fs-xl: clamp(1.18rem, 0.34vw + 1.1rem, 1.38rem);
  --fs-2xl: clamp(1.38rem, 0.9vw + 1.18rem, 1.72rem);
  --fs-3xl: clamp(1.62rem, 1.6vw + 1.24rem, 2.3rem);
  --fs-4xl: clamp(2rem, 2.8vw + 1.35rem, 3.2rem);
  --fs-5xl: clamp(2.35rem, 3.8vw + 1.5rem, 4rem);
  --fs-hero: clamp(2rem, 4.4vw + 1rem, 4.5rem);
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  --lh-tight: 1.08;
  --lh-snug: 1.42;
  --lh-normal: 1.62;
  --lh-relaxed: 1.74;
  --ls-heading: 0.018em;
  --ls-ui: 0.05em;
  --ls-label: 0.085em;
  --ls-wide: 0.12em;
  --ls-widest: 0.18em;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-section: clamp(44px, 5.8vw, 80px);
  --sp-gutter: clamp(14px, 3.2vw, 40px);
  --sp-card: clamp(14px, 1.8vw, 24px);
  --card-min-fluid: clamp(16rem, 30vw, 20rem);
  --card-min-compact: clamp(14rem, 26vw, 18rem);
  --card-min-wide: clamp(18rem, 34vw, 22rem);
  --section-pad-y: clamp(28px, 8.4vw, 36px);
  --section-pad-y-tight: clamp(18px, 5vw, 24px);
  --section-title-gap: 8px;
  --section-lead-gap: 14px;
  --section-title-max: 11ch;
  --section-lead-max: 27ch;
  --tt-slant: skewX(-12deg);
  --tt-unslant: skewX(12deg);
  --tt-slant-sm: skewX(-8deg);
  --tt-unslant-sm: skewX(8deg);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-normal: 260ms;
  --dur-slow: 400ms;
  --trans-colors:
    color var(--dur-fast), background-color var(--dur-fast),
    border-color var(--dur-fast);
  --trans-surface:
    transform var(--dur-normal) var(--ease-out-expo),
    box-shadow var(--dur-fast), border-color var(--dur-fast),
    background-color var(--dur-fast);
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --bw-thin: 1px;
  --bw-base: 2px;
  --bw-thick: 4px;
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-backdrop: 400;
  --z-modal: 500;
  --nav-height: 72px;
}





*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height, 72px);
  text-rendering: optimizeLegibility;
}
body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  letter-spacing: 0.002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: var(--trans-colors);
}
body.page--home,
body.page--tt-fuel,
body.page--tt-uno {
  padding-top: var(--nav-height, 72px);
}
a,
button,
input,
select,
textarea,
label {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  background: none;
  border: none;
}
img,
video,
svg {
  inline-size: min(100%, 100vw);
  height: auto;
  display: block;
}
ul,
ol {
  list-style: none;
}
:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}
::selection {
  background: var(--color-accent-alpha-md);
}
.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: calc(var(--z-modal) + 1);
  padding: 10px 14px;
  background: var(--color-surface-invert);
  color: var(--color-text-inverse);
  border: var(--bw-thin) solid var(--color-accent);
  border-radius: var(--radius-md);
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible {
  transform: translateY(0);
}


.container {
  width: min(100%, 1160px);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.section {
  padding-block: var(--section-pad-y);
}
.section + .section {
  padding-top: var(--section-pad-y-tight);
  position: relative;
}
.section + .section::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--chrome-edge);
  box-shadow: var(--chrome-edge-shadow);
  pointer-events: none;
}
.section--alt {
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    var(--color-rgba-255-255-255-0) 100%
  );
}

.section__title {
  font-size: clamp(1.48rem, 3vw, 3.35rem);
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 1.03;
  margin-bottom: var(--section-title-gap);
  align-items: center;
  text-align: center;
  width: min(100%, var(--section-title-max));
  margin-inline: auto;
  text-wrap: balance;
}
.heading-accent {
  color: var(--color-accent);
}

.section__lead {
  font-size: clamp(0.98rem, 0.5vw + 0.9rem, 1.18rem);
  color: var(--color-text-secondary);
  width: min(100%, var(--section-lead-max));
  margin: 0 auto var(--section-lead-gap);
  line-height: var(--lh-relaxed);
  text-align: center;
  text-wrap: pretty;
}

@media (min-width: 376px) {
  :root {
    --section-pad-y: clamp(30px, 8vw, 40px);
    --section-pad-y-tight: clamp(20px, 5vw, 26px);
    --section-title-gap: 10px;
    --section-lead-gap: 16px;
    --section-title-max: 11.5ch;
    --section-lead-max: 29ch;
  }
}

@media (min-width: 481px) {
  :root {
    --section-pad-y: clamp(34px, 7.2vw, 44px);
    --section-pad-y-tight: clamp(22px, 4.8vw, 28px);
    --section-title-gap: 10px;
    --section-lead-gap: 18px;
    --section-title-max: 12ch;
    --section-lead-max: 31ch;
  }
}

@media (min-width: 641px) {
  :root {
    --section-pad-y: clamp(38px, 6.8vw, 50px);
    --section-pad-y-tight: clamp(24px, 4.6vw, 32px);
    --section-title-gap: 12px;
    --section-lead-gap: 20px;
    --section-title-max: 13ch;
    --section-lead-max: 33ch;
  }
}

@media (min-width: 768px) {
  :root {
    --section-pad-y: clamp(38px, 5.2vw, 52px);
    --section-pad-y-tight: clamp(24px, 3.4vw, 32px);
    --section-title-gap: clamp(10px, 1.4vw, 15px);
    --section-lead-gap: clamp(14px, 1.5vw, 20px);
    --section-title-max: 14ch;
    --section-lead-max: 54ch;
  }
}

@media (min-width: 1025px) {
  :root {
    --section-pad-y: clamp(44px, 5vw, 62px);
    --section-pad-y-tight: clamp(28px, 3.4vw, 38px);
    --section-title-gap: clamp(11px, 1.3vw, 17px);
    --section-lead-gap: clamp(15px, 1.5vw, 22px);
    --section-title-max: 14.5ch;
    --section-lead-max: 56ch;
  }
}

@media (min-width: 1101px) {
  .section {
    min-height: calc(100dvh - var(--nav-height, 72px));
    display: flex;
    align-items: center;
  }
  .section + .section {
    padding-top: var(--section-pad-y);
  }
}

@media (min-width: 1281px) {
  :root {
    --section-pad-y: clamp(46px, 5vw, 68px);
    --section-pad-y-tight: clamp(28px, 3vw, 40px);
    --section-title-gap: clamp(12px, 1.2vw, 18px);
    --section-lead-gap: clamp(16px, 1.6vw, 24px);
    --section-title-max: 15ch;
    --section-lead-max: 58ch;
  }
}





header {
  display: contents;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: normal;
  align-items: center;
  column-gap: var(--sp-3);
  padding: 0 var(--sp-gutter);
  height: var(--nav-height);
  background: var(--color-surface-overlay);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-nav);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  pointer-events: none;
  background: var(--chrome-edge);
  box-shadow:
    inset 0 1px 0 var(--color-rgba-255-255-255-0p7),
    inset 0 -1px 0 var(--color-rgba-62-68-74-0p5),
    0 1px 0 var(--color-rgba-255-255-255-0p18);
}
.nav--open {
  z-index: calc(var(--z-backdrop) + 10);
}

.nav__logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  flex-shrink: 0;
  grid-column: 2;
  justify-content: center;
  justify-self: center;
  width: min(56vw, 190px);
  margin-inline: auto;
  z-index: 1;
}

.nav__logo-img {
  display: block;
  width: auto;
  height: clamp(22px, 7vw, 30px);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  grid-column: 3;
  justify-self: end;
  position: relative;
  z-index: 2;
}

.nav__links {
  display: flex;
  position: fixed;
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  width: min(92vw, 300px);
  align-items: stretch;
  gap: 0;
  flex-direction: column;
  background: var(--color-nav-panel);
  border-left: var(--bw-thin) solid var(--color-border);
  box-shadow: var(--shadow-modal);
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-normal) var(--ease-out-expo);
  z-index: 1;
  visibility: hidden;
}
.nav--open .nav__links {
  transform: translateX(0);
  visibility: visible;
}

.nav__link {
  display: flex;
  width: 100%;
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  white-space: nowrap;
  transition: var(--trans-colors);
  padding: var(--sp-4) 0;
  border-bottom: var(--bw-thin) solid var(--color-border);
  position: relative;
}
.nav__link:hover {
  color: var(--color-accent);
}
.nav__link::after {
  display: none;
  content: "";
}
.nav__link:hover::after,
.nav__link--active::after {
  transform: scaleX(1);
}
.nav__link--active {
  color: var(--color-accent);
}
.nav__link--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.nav__link--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  padding: 10px 30px;
  margin-top: var(--sp-4);
  font-weight: var(--fw-black);
  transform: var(--tt-slant);
  transition:
    background-color var(--dur-fast),
    box-shadow var(--dur-fast),
    transform var(--dur-normal) var(--ease-out-expo);
  box-shadow: 5px 5px 0 var(--color-accent-alpha-md);
}
.nav__link--cta span {
  display: block;
  transform: var(--tt-unslant);
}
.nav__link--cta:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-accent);
  transform: var(--tt-slant);
  box-shadow: 3px 3px 0 var(--color-accent-alpha-md);
}


.nav__dropdown {
  position: relative;
}

.nav__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--color-text-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--sp-2) 0;
  transition: var(--trans-colors);
}
.nav__dropdown-trigger::after {
  content: "\25BE";
  font-size: 0.7rem;
  transition: transform var(--dur-normal) var(--ease-out-expo);
}
.nav__dropdown-trigger:hover {
  color: var(--color-accent);
}
.nav__dropdown-trigger:focus-visible,
.nav__dropdown-link:focus-visible,
.nav__link:focus-visible,
.nav__theme:focus-visible,
.nav__toggle:focus-visible {
  outline-offset: 4px;
}

.nav__dropdown-menu {
  display: block;
  position: static;
  min-width: 180px;
  background: var(--color-surface-raised);
  border: 0;
  box-shadow: none;
  border-radius: var(--radius-lg);
  padding: 0 0 0 var(--sp-3);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--dur-normal) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
  z-index: var(--z-dropdown);
}
.nav__dropdown--open .nav__dropdown-menu {
  max-height: 200px;
  opacity: 1;
}
.nav__dropdown--open .nav__dropdown-trigger::after {
  transform: rotate(180deg);
}

.nav__dropdown-link {
  display: block;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: var(--bw-thin) solid var(--color-border);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  transition: var(--trans-colors);
}

.nav__dropdown-link:hover {
  background: var(--color-surface);
  color: var(--color-accent);
}


.nav__toggle {
  display: inline-flex;
  width: 48px;
  height: 48px;
  border: var(--bw-thin) solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--trans-colors);
}
.nav__toggle:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.nav__toggle-icon,
.nav__toggle-icon::before,
.nav__toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition:
    transform var(--dur-fast),
    opacity var(--dur-fast);
  content: "";
}
.nav__toggle-icon {
  position: relative;
}
.nav__toggle-icon::before {
  position: absolute;
  top: -6px;
  left: 0;
}
.nav__toggle-icon::after {
  position: absolute;
  top: 6px;
  left: 0;
}

.nav--open .nav__toggle-icon {
  background: var(--color-transparent);
}
.nav--open .nav__toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}
.nav--open .nav__toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}


.nav__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: var(--sp-2);
  border: var(--bw-thin) solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: var(--trans-colors);
}
.nav__theme:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.nav-backdrop {
  position: fixed;
  inset: var(--nav-height) 0 0;
  background: var(--color-rgba-13-13-13-0p42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal);
  z-index: calc(var(--z-sticky) + 5);
}
body.nav-drawer-open {
  overflow: hidden;
}
body.nav-drawer-open .nav-backdrop {
  opacity: 1;
  pointer-events: auto;
}


@media (min-width: 431px) {
  .nav__logo {
    width: min(58vw, 210px);
  }
  .nav__logo-img {
    height: clamp(24px, 6vw, 34px);
  }
}


@media (min-width: 641px) {
  .nav__logo {
    width: min(56vw, 220px);
  }
  .nav__links {
    width: min(86vw, 320px);
    padding: var(--sp-6) var(--sp-5) var(--sp-8);
  }
}


@media (min-width: 1101px) {
  .nav {
    position: fixed;
    display: flex;
    justify-content: space-between;
    column-gap: 0;
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
  }
  .nav__logo {
    position: static;
    grid-column: auto;
    justify-content: flex-start;
    justify-self: start;
    width: auto;
    margin-inline: 0;
  }
  .nav__logo-img {
    height: clamp(28px, 3vw, 40px);
    width: auto;
  }
  .nav__actions {
    grid-column: auto;
    justify-self: auto;
    gap: var(--sp-3);
  }
  .nav__links {
    position: static;
    width: auto;
    align-items: center;
    gap: var(--sp-5);
    flex-direction: row;
    background: var(--color-transparent);
    border-left: 0;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    transform: none;
    transition: none;
    visibility: visible;
  }
  .nav__link {
    display: inline-flex;
    width: auto;
    padding-block: 10px;
    padding-inline: 0;
    border-bottom: 0;
    font-size: var(--fs-xs);
  }
  .nav__link::after {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-normal) var(--ease-out-expo);
  }
  .nav__link--cta {
    margin-top: 0;
    padding: 5px 32px;
  }
  .nav__dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    border: var(--bw-thin) solid var(--color-border);
    box-shadow: var(--shadow-dropdown);
    padding: 0;
    max-height: none;
    opacity: 1;
    transition: none;
  }
  .nav__dropdown:hover .nav__dropdown-menu,
  .nav__dropdown:focus-within .nav__dropdown-menu {
    display: block;
  }
  .nav__dropdown--open .nav__dropdown-menu {
    display: block;
  }
  .nav__dropdown-link {
    border-bottom: 0;
  }
  .nav__toggle {
    display: none;
  }
}





.breadcrumb {
  padding: var(--sp-4) var(--sp-gutter);
  border-bottom: var(--bw-thin) solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  color: var(--color-text-secondary);
  transition: color var(--dur-fast);
}
.breadcrumb__link:hover {
  color: var(--color-accent);
}
.breadcrumb__current {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  color: var(--color-text-primary);
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  padding: 18px 45px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  line-height: var(--lh-snug);
  text-decoration: none;
  transform: var(--tt-slant);
  border: none;
  cursor: pointer;
  min-height: 52px;
  box-shadow: var(--shadow-btn);
  border-radius: var(--radius-sm);
  transition:
    transform var(--dur-normal) var(--ease-out-expo),
    box-shadow var(--dur-fast),
    background-color var(--dur-fast),
    opacity var(--dur-fast);
  -webkit-tap-highlight-color: var(--color-transparent);
  white-space: nowrap;
}
.btn__inner {
  display: block;
  transform: var(--tt-unslant);
}
.btn:hover:not(:disabled) {
  background: var(--color-accent-hover);
  transform: var(--tt-slant) translate(-2px, -2px);
  box-shadow: var(--shadow-btn-hover);
}
.btn:active:not(:disabled) {
  transform: var(--tt-slant) translate(1px, 1px);
  box-shadow: none;
}
.btn--ghost {
  background: var(--color-rgba-255-255-255-0p68);
  color: var(--color-text-primary);
  border: var(--bw-thin) solid var(--color-border);
  box-shadow: none;
}
.btn--ghost:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-raised);
}
.btn--sm {
  padding: 10px 24px;
  font-size: var(--fs-2xs);
  min-height: 40px;
}
.btn--lg {
  padding: 22px 56px;
  font-size: var(--fs-base);
  min-height: 60px;
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: var(--tt-slant);
  box-shadow: none;
}

.page--home .btn:not(.btn--ghost),
.page--home .nav__link--cta,
.page--tt-uno .nav__link--cta {
  position: relative;
  background: linear-gradient(
    180deg,
    var(--color-hex-ff7c78) 0%,
    var(--color-hex-f54040) 14%,
    var(--color-hex-d82225) 54%,
    var(--color-hex-8f0d13) 100%
  );
  box-shadow:
    10px 10px 0 var(--color-rgba-157-22-27-0p18),
    inset 0 1px 0 var(--color-rgba-255-255-255-0p34),
    inset 0 -2px 0 var(--color-rgba-79-8-12-0p42);
  border: 1px solid var(--color-rgba-124-12-17-0p34);
}
.page--home .btn:not(.btn--ghost)::before,
.page--home .nav__link--cta::before,
.page--tt-uno .nav__link--cta::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 12%;
  height: 34%;
  background: radial-gradient(
    ellipse at top center,
    var(--color-rgba-255-255-255-0p26) 0%,
    var(--color-rgba-255-255-255-0p12) 40%,
    var(--color-rgba-255-255-255-0p03) 66%,
    var(--color-rgba-255-255-255-0) 100%
  );
  border-radius: inherit;
  filter: blur(1.5px);
  pointer-events: none;
}
.page--home .btn:not(.btn--ghost):hover:not(:disabled),
.page--home .nav__link--cta:hover,
.page--tt-uno .nav__link--cta:hover {
  background: linear-gradient(
    180deg,
    var(--color-hex-ff8c86) 0%,
    var(--color-hex-ff5d59) 12%,
    var(--color-hex-e42a2e) 54%,
    var(--color-hex-9f1218) 100%
  );
  box-shadow:
    15px 15px 0 var(--color-rgba-157-22-27-0p22),
    inset 0 1px 0 var(--color-rgba-255-255-255-0p38),
    inset 0 -2px 0 var(--color-rgba-79-8-12-0p46);
}


.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: var(--color-surface-raised);
}
.table,
.table thead,
.table tbody,
.table tr,
.table th,
.table td {
  display: block;
  width: 100%;
}
.table {
  border-collapse: collapse;
  min-width: 0;
  background: var(--color-surface-raised);
}
.table thead {
  display: none;
}
.table tbody {
  display: grid;
  gap: var(--sp-4);
}
.table tbody tr {
  border: var(--bw-thin) solid var(--color-border);
  background: var(--color-surface-raised);
}
.table tbody tr:nth-child(even) {
  background: var(--color-surface-raised);
}
.table th,
.table td {
  padding: var(--sp-4);
  border-bottom: var(--bw-thin) solid var(--color-border);
  vertical-align: top;
  text-align: left;
  font-size: var(--fs-sm);
}
.table td:last-child {
  border-bottom: 0;
}
.table td:first-child {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  font-size: var(--fs-xs);
  background: var(--color-surface);
  border-bottom: var(--bw-thin) solid var(--color-border);
}
.table td[data-label]::before {
  content: attr(data-label);
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.table--comparison th,
.table--comparison td {
  text-align: center;
  vertical-align: middle;
}
.table--comparison {
  display: table;
  min-width: 300px;
  table-layout: fixed;
}
.table--comparison thead {
  display: table-header-group;
}
.table--comparison tbody {
  display: table-row-group;
}
.table--comparison tr {
  display: table-row;
}
.table--comparison th,
.table--comparison td {
  display: table-cell;
  width: 50%;
  padding: 9px 7px;
  font-size: 0.7rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.table--comparison th {
  background: var(--color-surface-invert);
  color: var(--color-text-inverse);
  font-size: 0.6rem;
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
}
.table--comparison tbody tr {
  border: 0;
  background: var(--color-transparent);
}
.table--comparison tbody tr:nth-child(even),
.table--comparison tbody tr:nth-child(even) td {
  background: var(--color-surface);
}
.table--comparison td {
  border-bottom: var(--bw-thin) solid var(--color-border);
  background: var(--color-surface-raised);
}
.table--comparison td:last-child {
  border-bottom: var(--bw-thin) solid var(--color-border);
}
.table--comparison tbody tr:last-child td {
  border-bottom: 0;
}
.table--comparison td:first-child {
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
}
.table--comparison td[data-label]::before {
  display: none;
  content: none;
}
.comparison-status {
  display: inline-block;
  margin-right: 0.45rem;
  font-weight: var(--fw-black);
}
.comparison-status--positive {
  color: var(--color-success-text);
}
.comparison-status--negative {
  color: var(--color-hex-dc2626);
}

@media (min-width: 321px) {
  .table--comparison th,
  .table--comparison td {
    display: table-cell;
    width: 50%;
    padding: 12px 10px;
    font-size: 0.99rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .table--comparison th {
    font-size: 0.68rem;
    padding: 12px 10px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}


@media (min-width: 641px) {
  .table-wrap {
    overflow-x: auto;
    border: var(--bw-thin) solid var(--color-border);
  }
  .table {
    display: table;
    min-width: 520px;
  }
  .table thead {
    display: table-header-group;
  }
  .table tbody {
    display: table-row-group;
  }
  .table tr {
    display: table-row;
  }
  .table th,
  .table td {
    display: table-cell;
    width: auto;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-sm);
  }
  .table thead th {
    background: var(--color-surface-invert);
    color: var(--color-text-inverse);
    font-size: var(--fs-xs);
    font-weight: var(--fw-black);
    text-transform: uppercase;
    letter-spacing: var(--ls-ui);
  }
  .table tbody tr {
    border: 0;
  }
  .table tbody tr:nth-child(even) {
    background: var(--color-surface);
  }
  .table tbody tr:last-child td {
    border-bottom: 0;
  }
  .table td:first-child {
    background: var(--color-transparent);
    border-bottom: var(--bw-thin) solid var(--color-border);
  }
  .table td[data-label]::before {
    display: none;
    content: none;
  }
  .table--comparison th,
  .table--comparison td {
    width: 50%;
  }
}

.table.table--comparison tbody tr > td {
  background: var(--color-surface-raised);
}
.table.table--comparison tbody tr:nth-child(even) > td {
  background: var(--color-surface);
}
.table.table--comparison tbody tr:last-child > td {
  border-bottom: 0;
}


.form-group {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.form-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  color: var(--color-text-primary);
}
.form-label--required::after {
  content: " *";
  color: var(--color-accent);
}

.input,
.textarea,
.select {
  width: 100%;
  background: var(--color-input-bg);
  color: var(--color-input-text);
  border: var(--bw-thin) solid var(--color-input-border);
  border-radius: var(--radius-none);
  padding: 14px var(--sp-4);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  line-height: var(--lh-normal);
  min-height: 52px;
  appearance: none;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast);
}
.input::placeholder,
.textarea::placeholder {
  color: var(--color-input-placeholder);
}
.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--color-input-border-hover);
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 3px var(--color-border-focus);
}
.textarea {
  resize: vertical;
  min-height: 120px;
  padding-top: var(--sp-3);
}
.select-wrap {
  position: relative;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-30%);
  border-left: 5px solid var(--color-transparent);
  border-right: 5px solid var(--color-transparent);
  border-top: 6px solid var(--color-input-placeholder);
  pointer-events: none;
}
.select {
  cursor: pointer;
  padding-right: 44px;
}
.select:disabled,
.input:disabled,
.textarea:disabled {
  background: var(--color-input-bg-disabled);
  color: var(--color-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}


.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-rgba-13-13-13-0p72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  padding-top: max(12px, env(safe-area-inset-top));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-normal);
}
.modal-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: 100%;
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface-raised);
  border: var(--bw-thin) solid var(--color-border);
  box-shadow: var(--shadow-modal);
  border-radius: 18px;
  transform: translateY(20px) scale(0.97);
  transition: transform var(--dur-normal) var(--ease-out-expo);
}
.modal-overlay--visible .modal {
  transform: translateY(0) scale(1);
}
.modal-overlay--sheet {
  align-items: flex-end;
  padding: 0;
}
.modal--sheet {
  width: 100%;
  max-height: calc(100dvh - 8px);
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transform: translateY(100%);
}
.modal-overlay--visible .modal--sheet {
  transform: translateY(0);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: var(--bw-thin) solid var(--color-border);
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  flex-shrink: 0;
}
.modal__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.modal__mark {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-hex-fff);
  font-weight: var(--fw-black);
  font-style: italic;
  letter-spacing: 0.06em;
  font-size: var(--fs-sm);
  transform: var(--tt-slant-sm);
}
.modal__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
}
.modal__close {
  width: 44px;
  height: 44px;
  border: var(--bw-thin) solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  transition: var(--trans-colors);
  flex-shrink: 0;
}
.modal__close:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-muted);
}
.modal__body {
  padding: var(--sp-5);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}
.modal__footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: var(--bw-thin) solid var(--color-border);
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-shrink: 0;
  flex-wrap: wrap;
  flex-direction: column;
}
.modal__footer > * {
  width: 100%;
}
.terms-link {
  text-decoration: underline;
}


.vehicle-selector {
  display: grid;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.vehicle-selector--compact {
  margin-bottom: var(--sp-4);
}
.vehicle-selector__label {
  font-size: var(--fs-2xs);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-2);
}
.paypal-cart {
  display: flex;
  justify-content: center;
  padding-top: var(--sp-3);
  border-top: var(--bw-thin) solid var(--color-border);
}
.paypal-cart form {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  width: 100%;
}
.paypal-cart .btn {
  width: 100%;
  min-width: 0;
}
.paypal-cart__submit {
  padding: 14px 24px;
  min-width: min(100%, 260px);
  width: min(100%, 260px);
  background: linear-gradient(
    180deg,
    var(--color-hex-fdd46a) 0%,
    var(--color-hex-f5bf3a) 52%,
    var(--color-hex-df9f1f) 100%
  );
  color: var(--color-hex-2b1d00);
  border: 1px solid var(--color-hex-d29a26);
  box-shadow:
    0 1px 0 var(--color-rgba-255-255-255-0p55) inset,
    0 -1px 0 var(--color-rgba-0-0-0-0p08) inset,
    0 8px 18px var(--color-rgba-223-159-31-0p22);
  transform: none;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.page--home .paypal-cart .paypal-cart__submit.btn:not(.btn--ghost),
.page--home .paypal-cart .paypal-cart__submit.btn:not(.btn--ghost):hover:not(:disabled) {
  background: linear-gradient(180deg, #ffc439 0%, #f5b800 100%);
  color: #111820;
  border: 1px solid #d8a800;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -1px 0 rgba(0, 0, 0, 0.08) inset,
    0 6px 14px rgba(255, 196, 57, 0.28);
}
.page--home .paypal-cart .paypal-cart__submit.btn:not(.btn--ghost)::before {
  display: none;
}
.page--home .paypal-cart .paypal-cart__submit.btn:not(.btn--ghost):hover:not(:disabled) {
  transform: translateY(-1px);
}
.paypal-cart__submit .btn__inner {
  transform: none;
}
.paypal-cart__submit:hover:not(:disabled) {
  background: linear-gradient(
    180deg,
    var(--color-hex-ffe08b) 0%,
    var(--color-hex-f7ca55) 52%,
    var(--color-hex-e3aa2c) 100%
  );
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 var(--color-rgba-255-255-255-0p58) inset,
    0 -1px 0 var(--color-rgba-0-0-0-0p08) inset,
    0 10px 20px var(--color-rgba-223-159-31-0p26);
}
.paypal-cart__submit:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 var(--color-rgba-255-255-255-0p45) inset,
    0 -1px 0 var(--color-rgba-0-0-0-0p1) inset,
    0 4px 10px var(--color-rgba-223-159-31-0p22);
}
.paypal-cart__submit:disabled {
  background: linear-gradient(
    180deg,
    var(--color-hex-f7dfa5) 0%,
    var(--color-hex-efc96f) 52%,
    var(--color-hex-dcb55b) 100%
  );
  color: var(--color-rgba-43-29-0-0p68);
  border-color: var(--color-hex-d5b26a);
  opacity: 0.65;
  transform: none;
  box-shadow: none;
}
.paypal-cart img[width="1"][height="1"] {
  pointer-events: none;
}
.paypal-cart__price {
  margin-bottom: 12px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  text-align: center;
}
.buy-modal__product-name {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  text-align: center;
  text-wrap: balance;
}
.buy-modal__vehicle-selector {
  width: 100%;
}
.buy-modal__vehicle-selector .form-group,
.buy-modal__vehicle-selector .select-wrap {
  width: 100%;
}
.buy-modal__vehicle-selector .select {
  text-align: center;
  text-align-last: center;
}
.buy-modal__vehicle-selector .select option {
  text-align: center;
}
.form-group--flush {
  margin-bottom: 0;
}
.modal__helper {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-6);
}


.modal--buy {
  height: fit-content;
  max-height: calc(100dvh - 24px);
  align-self: center;
}
.modal--buy .modal__body {
  flex: 0 0 auto;
  overflow-y: visible;
  padding-bottom: 8px;
}
.modal--buy .modal__helper {
  margin-bottom: var(--sp-3);
}
.modal--buy .buy-modal__product-name {
  margin-bottom: var(--sp-3);
}
.modal--buy .vehicle-selector {
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.modal--buy .vehicle-selector__label {
  margin-bottom: 0;
}
.modal--buy .buy-modal__vehicle-selector .form-group {
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.modal--buy .buy-modal__vehicle-selector .select {
  min-height: 44px;
  padding-block: 8px;
}
.modal--buy .paypal-cart {
  padding-top: var(--sp-3);
  margin-bottom: 0;
}
.modal--buy .paypal-cart form {
  position: relative;
  gap: 0;
  margin: 0;
}
.modal--buy .paypal-cart img[width="1"][height="1"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
#contact-drawer .modal__body {
  flex: 0 0 auto;
  overflow-y: visible;
  padding: var(--sp-3) var(--sp-4);
}
#contact-drawer .form-group {
  margin-bottom: var(--sp-2);
}
#contact-drawer .textarea {
  min-height: 80px;
}
#contact-drawer .contact-form__status {
  padding: var(--sp-3) var(--sp-4);
}

.terms-page {
  width: min(100%, 860px);
}
.terms-block {
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  border: var(--bw-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.terms-block__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
.terms-block p + p {
  margin-top: var(--sp-4);
}


@media (min-width: 768px) {
  .modal-overlay {
    padding: var(--sp-5);
    padding-top: max(var(--sp-5), env(safe-area-inset-top));
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
  }
  .modal {
    width: min(100%, 560px);
    max-height: min(calc(100dvh - 40px), 860px);
    border-radius: var(--radius-xl);
  }
  .modal-overlay--sheet {
    padding-bottom: 0;
  }
  .modal--sheet {
    width: min(100%, 720px);
    max-height: min(82dvh, 760px);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .modal__header {
    padding: var(--sp-5) var(--sp-6);
  }
  .modal__body {
    padding: var(--sp-6);
  }
  .modal__footer {
    padding: var(--sp-5) var(--sp-6);
    flex-direction: row;
    align-items: center;
  }
  .modal__footer > * {
    width: auto;
  }
  .paypal-cart {
    padding-top: var(--sp-4);
  }
  .paypal-cart form {
    width: auto;
  }
  .paypal-cart .btn {
    width: auto;
    min-width: min(100%, 260px);
  }
  .vehicle-selector {
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
  }
  
  .modal--buy {
    width: min(100%, 720px);
    height: fit-content;
    max-height: calc(100dvh - 40px);
  }
  .modal--buy .modal__header {
    padding: var(--sp-3) var(--sp-5);
  }
  .modal--buy .modal__body {
    padding: var(--sp-4) var(--sp-5) 8px;
  }
  #contact-drawer .modal {
    width: min(100%, 720px);
    height: fit-content;
  }
  #contact-drawer .modal__body {
    padding: var(--sp-3) var(--sp-6);
  }
}





.hero {
  padding: clamp(32px, 6vw, 52px) var(--sp-gutter) clamp(28px, 5vw, 40px);
  background: var(--color-bg);
  color: var(--color-text-inverse);
  border-bottom: var(--bw-thick) solid var(--color-accent);
  position: relative;
  display: block;
  overflow: clip;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center 18%,
      var(--color-rgba-10-14-20-0p18) 0%,
      var(--color-rgba-10-14-20-0p62) 42%,
      var(--color-rgba-10-14-20-0p88) 100%
    ),
    linear-gradient(
      90deg,
      var(--color-rgba-6-8-12-0p94) 0%,
      var(--color-rgba-6-8-12-0p78) 36%,
      var(--color-rgba-6-8-12-0p46) 66%,
      var(--color-rgba-6-8-12-0p24) 100%
    ),
    linear-gradient(
      180deg,
      var(--color-rgba-8-10-14-0p16) 0%,
      var(--color-rgba-8-10-14-0p62) 100%
    );
  pointer-events: none;
}
.hero > .container {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  width: min(100%, 1120px);
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-link);
  margin-bottom: var(--sp-4);
}
.hero__title {
  display: block;
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  margin: 0 auto var(--sp-3);
  width: min(100%, 10ch);
  text-align: center;
  text-wrap: balance;
  color: var(--color-hex-fcfdff);
  text-shadow:
    0 20px 46px var(--color-rgba-0-0-0-0p72),
    0 4px 12px var(--color-rgba-0-0-0-0p48);
}
.hero__title span {
  color: var(--color-accent);
}
.hero__lead {
  display: block;
  font-size: 0.92rem;
  color: var(--color-rgba-255-255-255-0p9);
  width: min(100%, 33ch);
  margin: 0 auto var(--sp-4);
  padding: clamp(14px, 1.8vw, 20px) clamp(18px, 2.4vw, 28px);
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 2px 8px var(--color-rgba-0-0-0-0p5);
  background: linear-gradient(
    180deg,
    var(--color-rgba-12-16-22-0p54) 0%,
    var(--color-rgba-12-16-22-0p36) 100%
  );
  border: 1px solid var(--color-rgba-255-255-255-0p14);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: var(--sp-4);
  width: min(100%, 18.5rem);
  margin-inline: auto;
}
.hero__cta .btn {
  width: min(100%, 320px);
}
.hero__highlights {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  border-top: 1px solid var(--color-rgba-255-255-255-0p16);
  padding-top: var(--sp-5);
  width: min(100%, 1040px);
  margin-inline: auto;
  text-align: center;
}
.hero__highlight {
  padding: clamp(16px, 1.6vw, 22px);
  border-left: 3px solid var(--color-accent);
  background: linear-gradient(
    180deg,
    var(--color-rgba-12-16-22-0p54) 0%,
    var(--color-rgba-12-16-22-0p36) 100%
  );
  box-shadow: 0 18px 40px var(--color-rgba-0-0-0-0p24);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-top: 1px solid var(--color-rgba-255-255-255-0p14);
  border-right: 1px solid var(--color-rgba-255-255-255-0p08);
  border-bottom: 1px solid var(--color-rgba-255-255-255-0p08);
  border-radius: var(--radius-md);
}
.hero__highlight-title {
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  margin-bottom: 8px;
  font-size: clamp(0.82rem, 0.45vw + 0.74rem, 0.98rem);
  line-height: 1.15;
  color: var(--color-hex-fff);
}
.hero__highlight-body {
  font-size: clamp(0.78rem, 0.26vw + 0.72rem, 0.9rem);
  color: var(--color-rgba-255-255-255-0p84);
  line-height: 1.55;
  text-wrap: pretty;
}
.hero-backdrop {
  background-color: var(--color-hex-0c1118);
}

@media (min-width: 768px) {
  .hero {
    padding: clamp(56px, 8vw, 104px) var(--sp-gutter) clamp(42px, 6vw, 76px);
  }

  .hero > .container {
    gap: var(--sp-3);
  }

  .hero__title {
    font-size: var(--fs-hero);
    margin-bottom: clamp(10px, 1.4vw, 18px);
    width: min(100%, 13.5ch);
  }

  .hero__lead {
    font-size: clamp(1.02rem, 1vw + 0.96rem, 1.22rem);
    color: var(--color-rgba-247-249-252-0p98);
    width: min(100%, 58ch);
    margin-bottom: var(--sp-6);
    line-height: 1.68;
  }

  .hero__cta {
    margin-bottom: var(--sp-5);
    width: min(100%, 19.5rem);
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero__highlights {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, var(--card-min-compact)), 1fr)
    );
    gap: var(--sp-4);
    margin-top: var(--sp-4);
  }
}


@media (min-width: 768px) and (orientation: landscape) {
  .hero__image {
    object-position: center;
  }
  .hero {
    padding-block: clamp(28px, 5vw, 40px);
  }
  .hero__lead {
    width: min(100%, 42ch);
  }
}


@media (min-width: 1101px) {
  .hero__image {
    object-position: center;
  }
  .hero {
    padding-block: clamp(22px, 3.2vh, 36px);
    min-height: calc(100dvh - var(--nav-height, 72px));
    display: flex;
    align-items: center;
  }

  .hero > .container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "title title title title title title title title title title title title"
      "lead lead lead lead lead lead lead lead lead lead lead lead"
      "button button button button button button button button button button button button"
      "highlights highlights highlights highlights highlights highlights highlights highlights highlights highlights highlights highlights";
    column-gap: clamp(20px, 3vw, 36px);
    row-gap: var(--sp-2);
    align-items: start;
    justify-items: start;
  }

  .hero__title {
    grid-area: title;
    font-size: clamp(2.35rem, 4.1vw, 4rem);
    width: min(100%, 12.25ch);
    margin-inline: 0;
    margin-bottom: var(--sp-3);
    text-align: left;
  }

  .hero__lead {
    grid-area: lead;
    width: min(100%, 44ch);
    margin-inline: 0;
    margin-bottom: var(--sp-3);
    padding: clamp(12px, 1.6vw, 16px) clamp(18px, 2vw, 24px);
    line-height: 1.45;
    text-align: left;
  }

  .hero__cta {
    grid-area: button;
    justify-content: flex-start;
    width: min(100%, 16rem);
    margin: 0;
  }

  .hero__highlights {
    grid-area: highlights;
    margin-top: 0;
    padding-top: var(--sp-3);
    width: 100%;
    margin-inline: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero__highlight {
    padding: clamp(12px, 1.4vw, 18px);
  }
}

@media (min-width: 1101px) and (max-height: 900px) {
  .hero {
    padding-block: clamp(16px, 2.4vh, 26px);
  }
  .hero > .container {
    row-gap: 6px;
  }
  .hero__title {
    font-size: clamp(2.1rem, 3.6vw, 3.55rem);
    margin-bottom: var(--sp-2);
  }
  .hero__lead {
    margin-bottom: var(--sp-2);
    padding-block: 10px;
    line-height: 1.38;
  }
  .hero__cta {
    width: min(100%, 15rem);
  }
  .hero__highlights {
    padding-top: var(--sp-2);
  }
  .hero__highlight {
    padding: 10px 14px;
  }
  .hero__highlight-body {
    font-size: 0.78rem;
    line-height: 1.35;
  }
}


.app-feature,
.testimonial,
.why-item,
.product-card,
.info-grid__item,
.step {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: var(--trans-surface);
}
.app-feature:hover,
.app-feature:active,
.app-feature:focus-within,
.testimonial:hover,
.testimonial:active,
.testimonial:focus-within,
.why-item:hover,
.why-item:active,
.why-item:focus-within,
.product-card:hover,
.product-card:active,
.product-card:focus-within,
.info-grid__item:hover,
.info-grid__item:active,
.info-grid__item:focus-within,
.step:hover,
.step:active,
.step:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
  border-top-color: var(--color-border-accent-active);
}

.product-card:hover::before,
.product-card:active::before,
.product-card:focus-within::before {
  background: var(--color-border-accent-active);
}


.dyno-note {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: var(--sp-8);
}


.install-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-4);
  counter-reset: step;
}
.step {
  flex: 0 1 var(--card-min-fluid);
  width: min(100%, var(--card-min-fluid));
  padding: 20px 18px;
  border: var(--bw-thin) solid var(--color-border);
  border-top: var(--bw-thick) solid var(--color-accent);
  position: relative;
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  display: flex;
  flex-direction: column;
  height: 100%;
}
.step__num {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-black);
  font-style: italic;
  color: var(--color-accent-alpha-md);
  line-height: 1;
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
}
.step__title {
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
  font-size: clamp(1.12rem, 0.55vw + 1rem, 1.35rem);
  text-align: center;
  text-wrap: balance;
}
.step__body {
  font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1rem);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}
#install .step__num {
  color: var(--color-accent-alpha-lg);
}
#install .step__title {
  color: var(--color-text-primary);
}
#install .step__body {
  color: var(--color-text-secondary);
  text-align: center;
}


.app-features {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--card-min-fluid)), 1fr)
  );
  grid-auto-rows: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
  justify-items: center;
}
.app-feature {
  padding: 20px 18px;
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  border: var(--bw-thin) solid var(--color-border);
  border-top: var(--bw-thick) solid var(--color-accent);
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  text-align: center;
  width: min(100%, var(--card-min-fluid));
  margin-inline: auto;
}
.app-feature__title {
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
  font-size: clamp(1.05rem, 0.55vw + 0.95rem, 1.28rem);
  text-align: center;
  text-wrap: balance;
}
.app-feature__body {
  font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1rem);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
  flex-grow: 1;
}
#features .app-features {
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  #features .app-features {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 860px) {
  #features .app-features {
    grid-template-columns: repeat(4, 1fr);
  }
}
#fine-tuning .app-feature {
  min-width: 0;
}

.app-dl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 16px);
  margin-top: var(--sp-6);
}
.app-dl__btn {
  display: inline-flex;
  align-items: center;
  width: min(100%, 160px);
}
.app-dl__btn--google {
  width: min(100%, 139px);
}
.app-dl__btn img {
  width: 100%;
  height: auto;
}
@media (min-width: 481px) {
  .app-dl__btn {
    width: min(100%, 180px);
  }
  .app-dl__btn--google {
    width: min(100%, 156px);
  }
}


.testimonials-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.testimonial {
  flex: 0 1 var(--card-min-fluid);
  width: min(100%, var(--card-min-fluid));
  padding: 20px 18px;
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  border: var(--bw-thin) solid var(--color-border);
  border-top: var(--bw-thick) solid var(--color-accent);
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .step {
    padding: clamp(20px, 2.4vw, 26px) clamp(18px, 2vw, 22px);
  }
  .app-feature,
  .testimonial {
    padding: clamp(20px, 2.4vw, 24px);
  }
  .app-features {
    justify-items: stretch;
  }
  .app-feature {
    width: auto;
    margin-inline: 0;
  }
}
.testimonial__quote {
  font-size: clamp(1rem, 0.55vw + 0.92rem, 1.18rem);
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: clamp(10px, 1.4vw, 18px);
  line-height: 1.5;
  text-wrap: pretty;
}
.testimonial__quote::before {
  content: "\201C";
  font-size: 2.5rem;
  line-height: 0.5;
  color: var(--color-accent);
  display: block;
  margin-bottom: 10px;
}
.testimonial__meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: var(--bw-thin) solid var(--color-border);
  width: 100%;
  font-size: clamp(0.64rem, 0.1vw + 0.6rem, 0.74rem);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

@media (min-width: 721px) {
  .testimonial__quote {
    margin-bottom: var(--sp-5);
  }
}

.why-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.why-item {
  padding: var(--sp-5);
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  border: var(--bw-thin) solid var(--color-border);
  border-top: var(--bw-thick) solid var(--color-accent);
  flex: 0 1 var(--card-min-fluid);
  width: min(100%, var(--card-min-fluid));
}
.why-item__title {
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
  text-align: center;
}
.why-item__body {
  font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1rem);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  text-align: center;
}


.products-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.product-card {
  flex: 0 1 var(--card-min-wide);
  width: min(100%, var(--card-min-wide));
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  border: var(--bw-thin) solid var(--color-border);
  padding: var(--sp-8) var(--sp-6);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  text-align: center;
}
.product-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--bw-thick);
  background: var(--color-accent);
}
.product-card__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  color: var(--color-accent);
  margin-bottom: var(--sp-4);
  text-align: center;
}
.product-card__body {
  font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1rem);
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-6);
  text-align: center;
  line-height: var(--lh-relaxed);
}
.product-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
  align-items: center;
}
.product-card__list li {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: var(--lh-relaxed);
}
.product-card__link {
  color: var(--color-text-link);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  text-decoration: none;
  text-align: center;
}
.product-card__link:hover {
  color: var(--color-text-link-hover);
}
#products .product-card__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 14px 20px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  line-height: var(--lh-snug);
  text-decoration: none;
  transform: var(--tt-slant);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-btn);
  transition:
    transform var(--dur-normal) var(--ease-out-expo),
    box-shadow var(--dur-fast),
    background-color var(--dur-fast),
    opacity var(--dur-fast);
}
#products .product-card__link:hover {
  color: var(--color-text-on-accent);
  background: var(--color-accent-hover);
  transform: var(--tt-slant) translate(-2px, -2px);
  box-shadow: var(--shadow-btn-hover);
}
#products .product-card__link:active {
  transform: var(--tt-slant) translate(1px, 1px);
  box-shadow: none;
}

.cta {
  text-align: center;
  padding: clamp(64px, 10vw, 120px) var(--sp-gutter);
  background: var(--color-surface-invert);
  color: var(--color-text-inverse);
  border-top: var(--bw-thick) solid var(--color-accent);
}
.cta__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-tight);
  margin-bottom: var(--sp-5);
}
.cta__lead {
  font-size: var(--fs-lg);
  color: var(--color-rgba-255-255-255-0p88);
  width: min(100%, 660px);
  margin: 0 auto var(--sp-10);
  line-height: var(--lh-relaxed);
}
.cta__actions,
.cta .hero__cta {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-inline: auto;
  justify-content: center;
  gap: var(--sp-3);
}

@media (min-width: 1101px) {
  .cta {
    min-height: calc(100dvh - var(--nav-height, 72px));
    display: flex;
    align-items: center;
  }
  .cta > .container {
    width: min(100%, 1160px);
  }
}





.product-intro {
  position: relative;
  overflow: hidden;
  min-height: calc(100dvh - var(--nav-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 48px) var(--sp-gutter) clamp(28px, 6vw, 44px);
  background:
    linear-gradient(
      180deg,
      var(--color-rgba-16-10-12-0p22) 0%,
      var(--color-rgba-16-10-12-0p08) 100%
    ),
    var(--color-hex-120c0e);
  color: var(--color-text-primary);
}
.product-intro > .container {
  position: relative;
  z-index: 1;
}
.product-intro__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  height: 100%;
}
.product-intro__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--color-rgba-12-10-12-0p42) 0%,
    var(--color-rgba-12-10-12-0p18) 24%,
    var(--color-rgba-12-10-12-0) 58%,
    var(--color-rgba-255-246-242-0p08) 100%
  );
}
.product-intro__backdrop-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(1px) saturate(0.96) brightness(0.82);
  transform: scale(1.02);
}
.product-intro__title {
  font-size: clamp(2.15rem, 4vw, 3.6rem);
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  line-height: 1.04;
  margin: 0 auto var(--sp-6);
  width: min(100%, 12ch);
  text-align: center;
  text-wrap: balance;
  color: var(--color-hex-ffffff);
  text-shadow: none;
}
.product-intro__logo {
  display: block;
  width: min(100%, clamp(16rem, 72vw, 30rem));
  max-height: clamp(8rem, 26vw, 18rem);
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}
.product-intro__layout {
  display: grid;
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  width: min(100%, 860px);
  margin-inline: auto;
  justify-items: center;
  text-align: center;
}
.product-intro__copy {
  position: relative;
  z-index: 1;
  width: min(100%, 44rem);
}
.product-intro__body {
  width: min(100%, 44rem);
  padding: clamp(16px, 2.2vw, 24px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-rgba-255-255-255-0p14);
  background: linear-gradient(
    180deg,
    var(--color-rgba-22-14-16-0p6) 0%,
    var(--color-rgba-22-14-16-0p42) 100%
  );
  box-shadow: 0 18px 40px var(--color-rgba-0-0-0-0p28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: relative;
  overflow: hidden;
}
.product-intro__lead {
  font-size: clamp(0.96rem, 0.45vw + 0.9rem, 1.14rem);
  color: var(--color-rgba-255-255-255-0p92);
  width: min(100%, 36ch);
  margin-inline: auto;
  line-height: var(--lh-relaxed);
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 1px 8px var(--color-rgba-0-0-0-0p5);
}
.product-intro__lead + .product-intro__lead {
  margin-top: var(--sp-4);
}
.product-intro__media {
  display: block;
  width: min(100%, 720px);
  margin: 0 0 var(--sp-8);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-rgba-255-255-255-0p14);
  background: var(--color-rgba-255-255-255-0p04);
  box-shadow: var(--shadow-lg);
}
.product-intro__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
}


@media (min-width: 768px) {
  .product-intro {
    padding: clamp(40px, 6vw, 72px) var(--sp-gutter) clamp(32px, 5vw, 56px);
  }
}

@media (min-width: 1101px) {
  .product-intro {
    padding: clamp(40px, 6vw, 72px) var(--sp-gutter) clamp(32px, 5vw, 56px);
    min-height: calc(100dvh - 3rem);
  }
  .product-intro__backdrop::after {
    background: linear-gradient(
      90deg,
      var(--color-rgba-12-8-10-0p82) 0%,
      var(--color-rgba-20-12-14-0p62) 28%,
      var(--color-rgba-34-22-26-0p24) 52%,
      var(--color-rgba-255-247-243-0p06) 76%,
      var(--color-rgba-255-247-243-0) 100%
    );
  }
  .product-intro__backdrop-image {
    filter: none;
    transform: none;
  }
  .product-intro__layout {
    width: min(100%, 860px);
    justify-items: start;
    text-align: left;
  }
  .product-intro__copy {
    width: auto;
  }
  .product-intro__body {
    width: min(100%, 62ch);
    max-width: 100%;
    border: 1px solid var(--color-rgba-255-255-255-0p12);
    background: linear-gradient(
      180deg,
      var(--color-rgba-24-18-20-0p56) 0%,
      var(--color-rgba-24-18-20-0p34) 100%
    );
    box-shadow:
      0 22px 50px var(--color-rgba-0-0-0-0p24),
      inset 0 1px 0 var(--color-rgba-255-255-255-0p08);
  }
  .product-intro__title {
    color: var(--color-hex-fff7f4);
    text-align: left;
    margin-inline: 0;
    width: 100%;
  }
  .product-intro__logo {
    width: clamp(18rem, 34vw, 30rem);
    max-height: clamp(8rem, 20vw, 18rem);
    margin-inline: 0;
  }
  .product-intro__lead {
    width: min(100%, 62ch);
    margin-inline: 0;
    color: var(--color-rgba-255-244-240-0p9);
    text-align: left;
  }
  .product-highlights {
    justify-content: flex-start;
  }
}


.info-panel,
.info-panel--fuel {
  width: 100%;
  margin-inline: auto;
  padding: 16px 14px;
  border: var(--bw-thin) solid var(--color-border);
  border-top: var(--bw-thick) solid var(--color-accent);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  box-shadow: var(--shadow-card);
}
.info-panel p {
  font-size: 0.96rem;
}
@media (min-width: 481px) {
  .info-panel,
  .info-panel--fuel {
    width: min(100%, 860px);
    padding: clamp(20px, 3vw, 30px);
    border-radius: var(--radius-xl);
  }
}

@media (min-width: 1101px) {
  .info-panel,
  .info-panel--fuel {
    width: 100%;
  }
  .info-panel,
  .section__prose {
    text-align: left;
  }
  #products .product-card {
    text-align: left;
    align-items: flex-start;
  }
  #products .product-card__title,
  #products .product-card__body,
  #products .product-card__list li {
    text-align: left;
  }
  #products .product-card__list {
    align-items: flex-start;
  }
}


.info-panel--accent {
  background:
    radial-gradient(
      circle at top right,
      var(--color-rgba-230-46-46-0p08),
      var(--color-transparent) 30%
    ),
    linear-gradient(
      180deg,
      var(--color-surface-raised) 0%,
      var(--color-surface) 100%
    );
}
.page--tt-uno .info-panel--accent {
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  border-top-color: var(--color-border);
}
.page--tt-uno .section__prose.info-panel,
.page--tt-uno .info-panel.info-panel--uno {
  width: min(100%, 860px);
}
.info-panel p:last-child {
  margin-bottom: 0;
}
.info-panel--uno {
  padding: clamp(24px, 4vw, 36px);
}

@media (min-width: 481px) {
  .info-panel p {
    font-size: inherit;
  }
}


.product-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--sp-5);
  list-style: none;
  justify-content: center;
}
.product-highlights__item {
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  font-weight: var(--fw-black);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  width: auto;
  background: var(--color-rgba-18-24-32-0p68);
  color: var(--color-hex-eff7ff);
  border: 1px solid var(--color-rgba-255-255-255-0p1);
  box-shadow: 0 12px 28px var(--color-rgba-0-0-0-0p24);
  text-align: center;
  padding: 10px 12px;
  transform: var(--tt-slant-sm);
}
.product-highlights__label {
  display: block;
  transform: var(--tt-unslant-sm);
}


.section__prose {
  width: 100%;
  text-align: center;
}
.section__prose p {
  margin-bottom: var(--sp-4);
  color: var(--color-text-secondary);
  font-size: clamp(0.98rem, 0.22vw + 0.94rem, 1.06rem);
  line-height: 1.72;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .product-highlights {
    justify-content: center;
    margin-bottom: var(--sp-5);
  }
  .section__prose {
    width: min(100%, 66ch);
  }
}

@media (min-width: 1101px) {
  .product-highlights {
    justify-content: flex-start;
  }
}


.product-intro__quotes--symptoms {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-6) 0;
}
.product-intro__quote {
  padding: var(--sp-4) var(--sp-5);
  border-left: var(--bw-thick) solid var(--color-accent);
  background: var(--color-surface);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-text-secondary);
}


.info-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--card-min-compact)), 1fr)
  );
  grid-auto-rows: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.info-grid__item {
  padding: 20px 18px;
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  border: var(--bw-thin) solid var(--color-border);
  border-top: var(--bw-thick) solid var(--color-accent);
  text-align: center;
}
.info-grid--compat {
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .info-grid--compat {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .info-grid__item {
    padding: var(--sp-6);
  }
}
.info-grid__item--compat {
  padding: clamp(20px, 2.4vw, 24px);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.info-grid__title {
  font-weight: var(--fw-black);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-3);
  font-size: clamp(1.05rem, 0.55vw + 0.95rem, 1.28rem);
  text-align: center;
  color: var(--color-text-primary);
  text-wrap: balance;
}
.info-grid__body {
  font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1rem);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  text-align: center;
}
.info-grid__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.info-grid__list-item {
  font-size: clamp(0.95rem, 0.2vw + 0.9rem, 1rem);
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  text-align: center;
  text-wrap: pretty;
}
.info-grid__list-item::before {
  content: none;
}





.faq__list {
  display: grid;
  gap: var(--sp-4);
  container-type: inline-size;
}
.faq__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 0 var(--sp-5);
}
.faq__control {
  width: auto;
}


@container (min-width: 42rem) {
  .faq__control {
    min-width: 160px;
  }
}


.faq__item {
  border: var(--bw-thin) solid var(--color-border);
  border-left: var(--bw-thick) solid var(--color-border-strong);
  background: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    border-color var(--dur-fast),
    box-shadow var(--dur-fast),
    transform var(--dur-fast);
}
.faq__item:hover {
  border-color: var(--color-border-strong);
  border-left-color: var(--color-border-accent-active);
  box-shadow: var(--shadow-card);
}
.faq__item[open] {
  border-left-color: var(--color-border-accent-active);
}
.faq__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-6);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
}
.faq__summary::-webkit-details-marker {
  display: none;
}
.faq__summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex-shrink: 0;
  border: var(--bw-thin) solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 1.1rem;
  font-weight: var(--fw-black);
  line-height: 1;
  transition:
    transform var(--dur-normal) var(--ease-out-expo),
    background var(--dur-fast),
    border-color var(--dur-fast),
    color var(--dur-fast);
}
.faq__item[open] .faq__summary::after {
  content: "-";
  border-color: var(--color-border-accent-active);
  color: var(--color-border-accent-active);
  background: var(--faq-open-summary-indicator-bg);
}
.faq__summary:hover::after,
.faq__summary:focus-visible::after {
  border-color: var(--color-border-accent-active);
}
.faq__body {
  padding: 0 var(--sp-6) var(--sp-6);
  border-top: var(--bw-thin) solid var(--color-border);
  color: var(--color-text-secondary);
}
.faq__body p {
  padding-top: var(--sp-5);
  font-size: 1rem;
  line-height: var(--lh-relaxed);
}





.contact__info {
  width: min(100%, 400px);
}
.contact-form {
  width: 100%;
}
.contact-form__note {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
}
.contact-form__required {
  color: var(--color-accent);
  font-weight: var(--fw-black);
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.contact__panel {
  display: grid;
  gap: var(--sp-5);
}
.contact__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.contact__actions > * {
  width: 100%;
}
.contact-form__status {
  display: none;
  padding: var(--sp-6);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-align: center;
}
.contact-form__status--visible {
  display: block;
}
.contact-form__status--success {
  border: var(--bw-thin) solid var(--color-success-border);
  background: var(--color-success-bg);
  color: var(--color-success-text);
}
.contact-form__status--error {
  border: var(--bw-thin) solid var(--color-danger-border);
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}


@media (min-width: 1101px) {
  .contact__actions {
    justify-content: flex-end;
    gap: var(--sp-4);
  }
  .contact__actions > * {
    width: auto;
  }
}


.footer {
  background: var(--color-surface-invert);
  color: var(--color-text-inverse);
  padding: var(--sp-10) var(--sp-gutter);
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  inset: -120px auto auto 60%;
  width: 280px;
  height: 280px;
  background: radial-gradient(
    circle,
    var(--color-rgba-230-46-46-0p18),
    var(--color-transparent) 70%
  );
  pointer-events: none;
}
.footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: var(--chrome-edge);
  box-shadow: var(--chrome-edge-shadow);
  pointer-events: none;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}
.footer__copy {
  font-size: var(--fs-xs);
  color: var(--tt-neutral-300);
  font-family: var(--font-mono);
  text-align: center;
  width: 100%;
}





.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


@media print {
  :root {
    --color-bg: var(--color-hex-ffffff);
    --color-surface: var(--color-hex-ffffff);
    --color-surface-raised: var(--color-hex-ffffff);
    --color-surface-overlay: var(--color-hex-ffffff);
    --color-surface-invert: var(--color-hex-ffffff);
    --color-text-primary: var(--color-hex-000000);
    --color-text-secondary: var(--color-hex-222222);
    --color-text-inverse: var(--color-hex-000000);
    --color-border: var(--color-hex-cfcfcf);
  }
  body {
    background: var(--color-hex-ffffff) !important;
    color: var(--color-hex-000000) !important;
  }
  .nav,
  .nav-backdrop,
  .cta,
  .modal-overlay,
  .btn,
  .nav__actions,
  .nav__toggle,
  .nav__theme,
  .skip-link {
    display: none !important;
  }
  .hero,
  .product-intro,
  .section,
  .section--alt,
  .footer {
    background: var(--color-hex-ffffff) !important;
    color: var(--color-hex-000000) !important;
    box-shadow: none !important;
  }
  .section,
  .product-intro,
  .footer {
    padding: 24px 0 !important;
    border: 0 !important;
    clip-path: none !important;
  }
  .container {
    width: 100%;
    padding-inline: 0;
  }
  a,
  a:visited {
    color: var(--color-hex-000000) !important;
    text-decoration: underline;
  }
  .faq__item,
  .app-feature,
  .step,
  .product-card,
  .terms-block,
  .info-panel {
    break-inside: avoid;
    box-shadow: none !important;
  }
}




:root {
  --tt-red-50: #fff0f0;
  --tt-red-100: #ffd6d6;
  --tt-red-200: #ffaaaa;
  --tt-red-300: #ff7575;
  --tt-red-400: #f54040;
  --tt-red-500: #e62e2e;
  --tt-red-600: #cc1f1f;
  --tt-red-700: #a81515;
  --tt-red-800: #7a0e0e;
  --tt-red-900: #4d0808;
  --tt-neutral-0: #ffffff;
  --tt-neutral-50: #f8f9fa;
  --tt-neutral-100: #f0f0f0;
  --tt-neutral-150: #e8e8e8;
  --tt-neutral-200: #e0e0e0;
  --tt-neutral-300: #cccccc;
  --tt-neutral-400: #999999;
  --tt-neutral-500: #666666;
  --tt-neutral-600: #444444;
  --tt-neutral-700: #2a2a2a;
  --tt-neutral-750: #212121;
  --tt-neutral-800: #1a1a1a;
  --tt-neutral-900: #0d0d0d;
  --tt-neutral-950: #070707;
  --tt-green-50: #ebfff1;
  --tt-green-200: #86efac;
  --tt-green-500: #12b76a;
  --tt-green-600: #0d9e57;
  --tt-green-700: #067647;
  --tt-amber-50: #fff7df;
  --tt-amber-200: #fcd34d;
  --tt-amber-500: #f79009;
  --tt-amber-700: #b54708;
  --tt-blue-50: #eff6ff;
  --tt-blue-500: #3b82f6;
  --tt-blue-700: #1d4ed8;
  --tt-gold-400: #ffc439;
  --tt-gold-500: #f2b827;
}


:root {
  --color-hex-000000: #000000;
  --color-hex-0c1118: #0c1118;
  --color-hex-0f1419: #0f1419;
  --color-hex-0f1722: #0f1722;
  --color-hex-0f172a: #0f172a;
  --color-hex-120c0e: #120c0e;
  --color-hex-160f11: #160f11;
  --color-hex-16a34a: #16a34a;
  --color-hex-1a0000: #1a0000;
  --color-hex-1b2128: #1b2128;
  --color-hex-203244: #203244;
  --color-hex-213446: #213446;
  --color-hex-222222: #222222;
  --color-hex-22c55e: #22c55e;
  --color-hex-262b35: #262b35;
  --color-hex-2b1d00: #2b1d00;
  --color-hex-33404c: #33404c;
  --color-hex-3a2321: #3a2321;
  --color-hex-475569: #475569;
  --color-hex-64748b: #64748b;
  --color-hex-7a1919: #7a1919;
  --color-hex-7d8b9b: #7d8b9b;
  --color-hex-8c1d1d: #8c1d1d;
  --color-hex-8f0d13: #8f0d13;
  --color-hex-9f1218: #9f1218;
  --color-hex-aeb7c3: #aeb7c3;
  --color-hex-c5cad3: #c5cad3;
  --color-hex-cbd5e1: #cbd5e1;
  --color-hex-cfcfcf: #cfcfcf;
  --color-hex-d29a26: #d29a26;
  --color-hex-d5b26a: #d5b26a;
  --color-hex-d7dde5: #d7dde5;
  --color-hex-d82225: #d82225;
  --color-hex-dbe2ea: #dbe2ea;
  --color-hex-dc2626: #dc2626;
  --color-hex-dcb55b: #dcb55b;
  --color-hex-df9f1f: #df9f1f;
  --color-hex-dfe7ef: #dfe7ef;
  --color-hex-e11d48: #e11d48;
  --color-hex-e3aa2c: #e3aa2c;
  --color-hex-e42a2e: #e42a2e;
  --color-hex-ef4444: #ef4444;
  --color-hex-efc96f: #efc96f;
  --color-hex-eff7ff: #eff7ff;
  --color-hex-f54040: #f54040;
  --color-hex-f5bf3a: #f5bf3a;
  --color-hex-f5f7fa: #f5f7fa;
  --color-hex-f5f8fc: #f5f8fc;
  --color-hex-f6d365: #f6d365;
  --color-hex-f7ca55: #f7ca55;
  --color-hex-f7dfa5: #f7dfa5;
  --color-hex-fcfdff: #fcfdff;
  --color-hex-fdd46a: #fdd46a;
  --color-hex-ff5d59: #ff5d59;
  --color-hex-ff7c78: #ff7c78;
  --color-hex-ff8c86: #ff8c86;
  --color-hex-ffe08b: #ffe08b;
  --color-hex-fff: #fff;
  --color-hex-fff7f4: #fff7f4;
  --color-hex-ffffff: #ffffff;
  --color-rgba-0-0-0-0p08: rgba(0, 0, 0, 0.08);
  --color-rgba-0-0-0-0p1: rgba(0, 0, 0, 0.1);
  --color-rgba-0-0-0-0p14: rgba(0, 0, 0, 0.14);
  --color-rgba-0-0-0-0p24: rgba(0, 0, 0, 0.24);
  --color-rgba-0-0-0-0p28: rgba(0, 0, 0, 0.28);
  --color-rgba-0-0-0-0p48: rgba(0, 0, 0, 0.48);
  --color-rgba-0-0-0-0p5: rgba(0, 0, 0, 0.5);
  --color-rgba-0-0-0-0p72: rgba(0, 0, 0, 0.72);
  --color-rgba-10-14-20-0p18: rgba(10, 14, 20, 0.18);
  --color-rgba-10-14-20-0p62: rgba(10, 14, 20, 0.62);
  --color-rgba-10-14-20-0p88: rgba(10, 14, 20, 0.88);
  --color-rgba-10-22-36-0p1: rgba(10, 22, 36, 0.1);
  --color-rgba-10-22-36-0p16: rgba(10, 22, 36, 0.16);
  --color-rgba-10-22-36-0p18: rgba(10, 22, 36, 0.18);
  --color-rgba-12-10-12-0: rgba(12, 10, 12, 0);
  --color-rgba-12-10-12-0p18: rgba(12, 10, 12, 0.18);
  --color-rgba-12-10-12-0p42: rgba(12, 10, 12, 0.42);
  --color-rgba-12-16-22-0p36: rgba(12, 16, 22, 0.36);
  --color-rgba-12-16-22-0p54: rgba(12, 16, 22, 0.54);
  --color-rgba-12-18-28-0p06: rgba(12, 18, 28, 0.06);
  --color-rgba-12-18-28-0p16: rgba(12, 18, 28, 0.16);
  --color-rgba-12-8-10-0p82: rgba(12, 8, 10, 0.82);
  --color-rgba-124-12-17-0p34: rgba(124, 12, 17, 0.34);
  --color-rgba-13-13-13-0p42: rgba(13, 13, 13, 0.42);
  --color-rgba-13-13-13-0p72: rgba(13, 13, 13, 0.72);
  --color-rgba-13-19-26-0p76: rgba(13, 19, 26, 0.76);
  --color-rgba-14-20-28-0p34: rgba(14, 20, 28, 0.34);
  --color-rgba-14-20-28-0p56: rgba(14, 20, 28, 0.56);
  --color-rgba-148-163-184-0p22: rgba(148, 163, 184, 0.22);
  --color-rgba-148-163-184-0p3: rgba(148, 163, 184, 0.3);
  --color-rgba-148-163-184-0p32: rgba(148, 163, 184, 0.32);
  --color-rgba-148-163-184-0p36: rgba(148, 163, 184, 0.36);
  --color-rgba-148-163-184-0p5: rgba(148, 163, 184, 0.5);
  --color-rgba-148-163-184-0p55: rgba(148, 163, 184, 0.55);
  --color-rgba-15-23-42-0p12: rgba(15, 23, 42, 0.12);
  --color-rgba-15-23-42-0p82: rgba(15, 23, 42, 0.82);
  --color-rgba-157-22-27-0p18: rgba(157, 22, 27, 0.18);
  --color-rgba-157-22-27-0p22: rgba(157, 22, 27, 0.22);
  --color-rgba-16-10-12-0p08: rgba(16, 10, 12, 0.08);
  --color-rgba-16-10-12-0p22: rgba(16, 10, 12, 0.22);
  --color-rgba-168-21-21-0p24: rgba(168, 21, 21, 0.24);
  --color-rgba-18-24-32-0p66: rgba(18, 24, 32, 0.66);
  --color-rgba-18-24-32-0p68: rgba(18, 24, 32, 0.68);
  --color-rgba-20-12-14-0p62: rgba(20, 12, 14, 0.62);
  --color-rgba-20-24-29-0p84: rgba(20, 24, 29, 0.84);
  --color-rgba-21-42-62-0p12: rgba(21, 42, 62, 0.12);
  --color-rgba-22-14-16-0p08: rgba(22, 14, 16, 0.08);
  --color-rgba-22-14-16-0p18: rgba(22, 14, 16, 0.18);
  --color-rgba-22-14-16-0p42: rgba(22, 14, 16, 0.42);
  --color-rgba-22-14-16-0p6: rgba(22, 14, 16, 0.6);
  --color-rgba-223-159-31-0p22: rgba(223, 159, 31, 0.22);
  --color-rgba-223-159-31-0p26: rgba(223, 159, 31, 0.26);
  --color-rgba-223-231-239-0p08: rgba(223, 231, 239, 0.08);
  --color-rgba-223-231-239-0p22: rgba(223, 231, 239, 0.22);
  --color-rgba-230-46-46-0p08: rgba(230, 46, 46, 0.08);
  --color-rgba-230-46-46-0p1: rgba(230, 46, 46, 0.1);
  --color-rgba-230-46-46-0p18: rgba(230, 46, 46, 0.18);
  --color-rgba-230-46-46-0p24: rgba(230, 46, 46, 0.24);
  --color-rgba-233-240-245-0: rgba(233, 240, 245, 0);
  --color-rgba-233-240-245-0p08: rgba(233, 240, 245, 0.08);
  --color-rgba-238-245-250-0p9: rgba(238, 245, 250, 0.9);
  --color-rgba-238-245-250-0p92: rgba(238, 245, 250, 0.92);
  --color-rgba-239-68-68-0p88: rgba(239, 68, 68, 0.88);
  --color-rgba-239-68-68-0p9: rgba(239, 68, 68, 0.9);
  --color-rgba-24-12-14-0p18: rgba(24, 12, 14, 0.18);
  --color-rgba-24-18-20-0p34: rgba(24, 18, 20, 0.34);
  --color-rgba-24-18-20-0p56: rgba(24, 18, 20, 0.56);
  --color-rgba-24-40-56-0p44: rgba(24, 40, 56, 0.44);
  --color-rgba-241-245-249-0p74: rgba(241, 245, 249, 0.74);
  --color-rgba-243-248-251-0p82: rgba(243, 248, 251, 0.82);
  --color-rgba-247-249-252-0p98: rgba(247, 249, 252, 0.98);
  --color-rgba-248-250-252-0p74: rgba(248, 250, 252, 0.74);
  --color-rgba-248-250-252-0p84: rgba(248, 250, 252, 0.84);
  --color-rgba-248-250-252-0p88: rgba(248, 250, 252, 0.88);
  --color-rgba-255-244-240-0p9: rgba(255, 244, 240, 0.9);
  --color-rgba-255-246-242-0p08: rgba(255, 246, 242, 0.08);
  --color-rgba-255-247-243-0: rgba(255, 247, 243, 0);
  --color-rgba-255-247-243-0p06: rgba(255, 247, 243, 0.06);
  --color-rgba-255-247-243-0p74: rgba(255, 247, 243, 0.74);
  --color-rgba-255-247-243-0p9: rgba(255, 247, 243, 0.9);
  --color-rgba-255-255-255-0: rgba(255, 255, 255, 0);
  --color-rgba-255-255-255-0p03: rgba(255, 255, 255, 0.03);
  --color-rgba-255-255-255-0p04: rgba(255, 255, 255, 0.04);
  --color-rgba-255-255-255-0p05: rgba(255, 255, 255, 0.05);
  --color-rgba-255-255-255-0p08: rgba(255, 255, 255, 0.08);
  --color-rgba-255-255-255-0p1: rgba(255, 255, 255, 0.1);
  --color-rgba-255-255-255-0p12: rgba(255, 255, 255, 0.12);
  --color-rgba-255-255-255-0p14: rgba(255, 255, 255, 0.14);
  --color-rgba-255-255-255-0p16: rgba(255, 255, 255, 0.16);
  --color-rgba-255-255-255-0p18: rgba(255, 255, 255, 0.18);
  --color-rgba-255-255-255-0p26: rgba(255, 255, 255, 0.26);
  --color-rgba-255-255-255-0p34: rgba(255, 255, 255, 0.34);
  --color-rgba-255-255-255-0p38: rgba(255, 255, 255, 0.38);
  --color-rgba-255-255-255-0p45: rgba(255, 255, 255, 0.45);
  --color-rgba-255-255-255-0p55: rgba(255, 255, 255, 0.55);
  --color-rgba-255-255-255-0p58: rgba(255, 255, 255, 0.58);
  --color-rgba-255-255-255-0p65: rgba(255, 255, 255, 0.65);
  --color-rgba-255-255-255-0p68: rgba(255, 255, 255, 0.68);
  --color-rgba-255-255-255-0p7: rgba(255, 255, 255, 0.7);
  --color-rgba-255-255-255-0p72: rgba(255, 255, 255, 0.72);
  --color-rgba-255-255-255-0p8: rgba(255, 255, 255, 0.8);
  --color-rgba-255-255-255-0p84: rgba(255, 255, 255, 0.84);
  --color-rgba-255-255-255-0p88: rgba(255, 255, 255, 0.88);
  --color-rgba-255-255-255-0p9: rgba(255, 255, 255, 0.9);
  --color-rgba-255-255-255-0p92: rgba(255, 255, 255, 0.92);
  --color-rgba-255-255-255-0p94: rgba(255, 255, 255, 0.94);
  --color-rgba-27-33-40-0p8: rgba(27, 33, 40, 0.8);
  --color-rgba-27-33-40-0p96: rgba(27, 33, 40, 0.96);
  --color-rgba-34-22-26-0p24: rgba(34, 22, 26, 0.24);
  --color-rgba-37-99-235-0p45: rgba(37, 99, 235, 0.45);
  --color-rgba-43-29-0-0p68: rgba(43, 29, 0, 0.68);
  --color-rgba-51-65-85-0p92: rgba(51, 65, 85, 0.92);
  --color-rgba-6-8-12-0p24: rgba(6, 8, 12, 0.24);
  --color-rgba-6-8-12-0p46: rgba(6, 8, 12, 0.46);
  --color-rgba-6-8-12-0p78: rgba(6, 8, 12, 0.78);
  --color-rgba-6-8-12-0p94: rgba(6, 8, 12, 0.94);
  --color-rgba-62-68-74-0p5: rgba(62, 68, 74, 0.5);
  --color-rgba-70-81-94-0p38: rgba(70, 81, 94, 0.38);
  --color-rgba-70-81-94-0p5: rgba(70, 81, 94, 0.5);
  --color-rgba-71-163-255-0: rgba(71, 163, 255, 0);
  --color-rgba-71-163-255-0p1: rgba(71, 163, 255, 0.1);
  --color-rgba-71-85-105-0p8: rgba(71, 85, 105, 0.8);
  --color-rgba-71-85-105-0p88: rgba(71, 85, 105, 0.88);
  --color-rgba-79-8-12-0p42: rgba(79, 8, 12, 0.42);
  --color-rgba-79-8-12-0p46: rgba(79, 8, 12, 0.46);
  --color-rgba-8-10-14-0p16: rgba(8, 10, 14, 0.16);
  --color-rgba-8-10-14-0p62: rgba(8, 10, 14, 0.62);
  --color-rgba-84-38-32-0p12: rgba(84, 38, 32, 0.12);
  --color-rgba-9-12-16-0: rgba(9, 12, 16, 0);
  --color-rgba-9-12-16-0p12: rgba(9, 12, 16, 0.12);
  --color-rgba-9-12-16-0p88: rgba(9, 12, 16, 0.88);
  --color-rgba-96-110-126-0p58: rgba(96, 110, 126, 0.58);
  --color-rgba-96-110-126-0p6: rgba(96, 110, 126, 0.6);
  --color-transparent: transparent;
}


:root {
  --color-bg: var(--tt-neutral-0);
  --color-surface: #f5f6f8;
  --color-surface-raised: var(--tt-neutral-0);
  --color-surface-overlay: rgba(255, 255, 255, 0.92);
  --color-surface-invert: var(--tt-neutral-800);
  --color-accent: var(--tt-red-600);
  --color-accent-hover: var(--tt-red-700);
  --color-accent-muted: var(--tt-red-50);
  --color-accent-alpha-sm: rgba(230, 46, 46, 0.08);
  --color-accent-alpha-md: rgba(230, 46, 46, 0.14);
  --color-accent-alpha-lg: rgba(230, 46, 46, 0.22);
  --color-text-primary: var(--tt-neutral-800);
  --color-text-secondary: #353535;
  --color-text-muted: #555555;
  --color-text-inverse: var(--tt-neutral-0);
  --color-text-accent: var(--tt-red-600);
  --color-text-on-accent: #ffffff;
  --color-text-link: var(--tt-red-600);
  --color-text-link-hover: var(--tt-neutral-800);
  --color-border: #d5d7dc;
  --color-border-strong: #b8bdc7;
  --color-border-accent: var(--tt-red-600);
  --color-border-accent-active: var(--tt-green-500);
  --color-focus-ring: var(--tt-red-600);
  --color-border-focus: rgba(230, 46, 46, 0.28);
  --color-success-bg: var(--tt-green-50);
  --color-success-border: var(--tt-green-200);
  --color-success-text: var(--tt-green-700);
  --color-warning-bg: var(--tt-amber-50);
  --color-warning-border: var(--tt-amber-200);
  --color-warning-text: var(--tt-amber-700);
  --color-danger-bg: var(--tt-red-50);
  --color-danger-border: var(--tt-red-200);
  --color-danger-text: var(--tt-red-700);
  --color-info-bg: var(--tt-blue-50);
  --color-info-border: #bfdbfe;
  --color-info-text: var(--tt-blue-700);
  --color-input-bg: var(--tt-neutral-0);
  --color-input-bg-disabled: var(--tt-neutral-100);
  --color-input-text: var(--tt-neutral-800);
  --color-input-placeholder: var(--tt-neutral-400);
  --color-input-border: var(--tt-neutral-200);
  --color-input-border-hover: var(--tt-neutral-300);
  --color-input-border-focus: var(--tt-red-500);
  --color-nav-panel: var(--tt-neutral-0);
  --faq-open-summary-indicator-bg: color-mix(in srgb, var(--color-border-accent-active) 12%, var(--color-surface-raised));
}


:root {
  --shadow-btn: 10px 10px 0px var(--color-accent-alpha-md);
  --shadow-btn-hover: 15px 15px 0px var(--color-accent-alpha-md);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.16);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.22);
  --shadow-dropdown: 0 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-nav: 0 2px 16px rgba(0, 0, 0, 0.06);
  --chrome-edge: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(229, 233, 238, 0.92) 24%,
    rgba(158, 166, 175, 0.9) 50%,
    rgba(247, 248, 250, 0.9) 74%,
    rgba(80, 86, 94, 0.9) 100%
  );
  --chrome-edge-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 6px rgba(0, 0, 0, 0.14);
}


:root {
  --image-fallback-bg-start: #14181f;
  --image-fallback-bg-end: #2a3038;
  --image-fallback-border: #f24f4f;
  --image-fallback-text: #f8f9fb;
  --dyno-gauge-control-hit: var(--color-transparent);
  --dyno-gauge-control-icon: #ffffff;
}

@supports (color: oklch(0.62 0.23 25)) {
  :root {
    --color-accent: oklch(0.52 0.22 25);
    --color-accent-hover: oklch(0.46 0.2 25);
    --color-text-link: oklch(0.5 0.2 25);
    --color-input-border-focus: oklch(0.52 0.22 25);
  }
  [data-theme="dark"] {
    --color-accent: oklch(0.68 0.22 24);
    --color-accent-hover: oklch(0.73 0.2 24);
    --color-text-link: oklch(0.78 0.16 22);
    --color-input-border-focus: oklch(0.68 0.22 24);
  }
}


[data-theme="dark"] {
  --color-bg: #0b0d10;
  --color-surface: #14181d;
  --color-surface-raised: #1b2128;
  --color-surface-overlay: rgba(11, 13, 16, 0.92);
  --color-surface-invert: var(--tt-neutral-50);
  --color-accent: #ff5a5f;
  --color-accent-hover: #ff7575;
  --color-accent-muted: rgba(255, 90, 95, 0.12);
  --color-accent-alpha-sm: rgba(255, 90, 95, 0.1);
  --color-accent-alpha-md: rgba(255, 90, 95, 0.16);
  --color-accent-alpha-lg: rgba(255, 90, 95, 0.24);
  --color-text-primary: #f5f7fa;
  --color-text-secondary: #d7dde5;
  --color-text-muted: #aeb7c3;
  --color-text-inverse: var(--tt-neutral-900);
  --color-text-accent: #ff7575;
  --color-text-on-accent: #ffffff;
  --color-text-link: #ff8b8f;
  --color-text-link-hover: #ffffff;
  --color-border: #2d3640;
  --color-border-strong: #46515e;
  --color-border-accent: #ff5a5f;
  --color-border-accent-active: #4ade80;
  --color-focus-ring: #ff8b8f;
  --color-border-focus: rgba(255, 90, 95, 0.34);
  --color-success-bg: rgba(18, 183, 106, 0.12);
  --color-success-border: rgba(18, 183, 106, 0.28);
  --color-success-text: #4ade80;
  --color-warning-bg: rgba(247, 144, 9, 0.12);
  --color-warning-border: rgba(247, 144, 9, 0.28);
  --color-warning-text: #fbbf24;
  --color-danger-bg: rgba(255, 90, 95, 0.14);
  --color-danger-border: rgba(255, 90, 95, 0.28);
  --color-danger-text: #ffaaaa;
  --color-info-bg: rgba(59, 130, 246, 0.12);
  --color-info-border: rgba(59, 130, 246, 0.28);
  --color-info-text: #93c5fd;
  --color-input-bg: #151a20;
  --color-input-bg-disabled: #222933;
  --color-input-text: #f5f7fa;
  --color-input-placeholder: #7c8896;
  --color-input-border: #36414d;
  --color-input-border-hover: #4a5664;
  --color-input-border-focus: #ff5a5f;
  --color-nav-panel: #11161b;
  --shadow-btn: 10px 10px 0px rgba(255, 90, 95, 0.18);
  --shadow-btn-hover: 15px 15px 0px rgba(255, 90, 95, 0.24);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-card-hover: 0 14px 36px rgba(0, 0, 0, 0.46);
  --shadow-modal: 0 28px 72px rgba(0, 0, 0, 0.68);
  --shadow-dropdown: 0 12px 28px rgba(0, 0, 0, 0.42);
  --shadow-nav: 0 6px 24px rgba(0, 0, 0, 0.36);
}


[data-theme="dark"] .section--alt {
  background: linear-gradient(
    180deg,
    rgba(27, 33, 40, 0.82) 0%,
    rgba(11, 13, 16, 0) 100%
  );
}
[data-theme="dark"] .nav {
  background: rgba(11, 13, 16, 0.86);
  border-bottom-color: rgba(70, 81, 94, 0.8);
}
[data-theme="dark"] .btn--ghost {
  background: rgba(27, 33, 40, 0.82);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
[data-theme="dark"] .btn--ghost:hover:not(:disabled) {
  background: rgba(38, 46, 56, 0.95);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .hero__lead {
  color: rgba(245, 247, 250, 0.94);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.42);
}
[data-theme="dark"] .cta__lead {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .cta {
  background: linear-gradient(
    180deg,
    rgba(20, 24, 29, 0.96) 0%,
    rgba(11, 13, 16, 1) 100%
  );
  color: var(--color-text-primary);
  border-top-color: var(--color-accent);
}
[data-theme="dark"] .cta__title {
  color: var(--color-text-primary);
}
[data-theme="dark"] .cta .btn--ghost {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .cta .btn--ghost:hover:not(:disabled) {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-accent);
}
[data-theme="dark"] .product-intro {
  color: #f5f7fa;
}
[data-theme="dark"] .product-intro__title {
  color: #f5f7fa;
}
[data-theme="dark"] .product-highlights__item {
  color: #ffffff;
}
[data-theme="dark"] #install .step {
  background: linear-gradient(
    180deg,
    var(--color-surface-raised) 0%,
    var(--color-surface) 100%
  );
  border-color: var(--color-border-strong);
  border-top-color: var(--color-accent);
}
[data-theme="dark"] #install .step__num {
  color: rgba(255, 117, 117, 0.72);
}
[data-theme="dark"] #install .step__body {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .hero__highlight {
  background: linear-gradient(
    180deg,
    rgba(27, 33, 40, 0.78) 0%,
    rgba(17, 22, 27, 0.72) 100%
  );
  border-top-color: rgba(255, 255, 255, 0.08);
  border-right-color: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .hero__highlight-body {
  color: rgba(245, 247, 250, 0.86);
}
[data-theme="dark"] .table-wrap,
[data-theme="dark"] .table {
  background: var(--color-surface-raised);
}
[data-theme="dark"] .table thead th {
  background: #0f1419;
  color: #f5f7fa;
}
[data-theme="dark"] .table tbody tr:nth-child(even) {
  background: #171d24;
}
[data-theme="dark"] .table.table--comparison tbody tr > td {
  background: var(--color-surface-raised);
}
[data-theme="dark"] .table.table--comparison tbody tr:nth-child(even) > td {
  background: #171d24;
}
[data-theme="dark"] .modal,
[data-theme="dark"] .modal--sheet {
  background: var(--color-surface-raised);
}
[data-theme="dark"] .modal__header,
[data-theme="dark"] .modal__footer {
  background: linear-gradient(180deg, #202730 0%, #1b2128 100%);
}
[data-theme="dark"] .modal__close {
  background: #151a20;
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
[data-theme="dark"] .faq__item {
  background: #1b2128;
}
[data-theme="dark"] .faq__summary::after {
  background: #151a20;
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
[data-theme="dark"] .faq__item[open] .faq__summary::after {
  background: color-mix(
    in srgb,
    var(--color-border-accent-active) 14%,
    #151a20
  );
}
[data-theme="dark"] .footer {
  background: #0f1419;
  border-top-color: rgba(96, 110, 126, 0.28);
}
[data-theme="dark"] .footer__copy {
  color: #d7dde5;
}





.dyno-showcase {
  display: grid;
  gap: 1.5rem;
}


.dyno-card {
  --tt-bg: var(--color-bg);
  --tt-surface: var(--color-surface-raised);
  --tt-surface-lite: var(--color-surface);
  --dyno-card-chart-bg: var(--color-surface-raised);
  --dyno-card-chart-grid: var(--color-border);
  --dyno-card-chart-axis: var(--color-border-strong);
  --tt-border: var(--color-border);
  --tt-border-strong: var(--color-border-strong);
  --tt-text: var(--color-text-primary);
  --tt-muted: var(--color-text-muted);
  --tt-red: var(--color-accent);
  --tt-red-dark: var(--color-accent-hover);
  --tt-gold: var(--tt-gold-500);
  --tt-stock-line: var(--color-text-muted);
  --tt-soft-shadow: var(--shadow-card);
}
.dyno-card *,
.dyno-card *::before,
.dyno-card *::after {
  box-sizing: border-box;
}
.dyno-card__panel {
  width: min(100%, 1000px);
  margin: 0 auto;
  background: var(--tt-surface);
  color: var(--tt-text);
  border: 1px solid var(--tt-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--tt-soft-shadow);
  overflow: hidden;
}
.dyno-card__header {
  padding: 22px 20px 14px;
  text-align: center;
  border-bottom: 1px solid var(--tt-border);
  background: linear-gradient(
    180deg,
    var(--tt-surface) 0%,
    var(--tt-surface-lite) 100%
  );
}
.dyno-card__eyebrow {
  display: block;
  color: var(--tt-red);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.dyno-card__title {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  transform: skew(-10deg);
}
.dyno-card__body {
  padding: 20px 20px 24px;
}
.dyno-card__controls {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 20px;
}
.dyno-card__presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.dyno-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tt-surface-lite);
  border: 1px solid var(--tt-border);
  color: var(--tt-text);
  padding: 8px 16px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transform: skew(-10deg);
  flex: 1;
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast),
    color var(--dur-fast);
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: var(--color-transparent);
}
.dyno-card__button:focus-visible,
.dyno-card__slider:focus-visible {
  outline: 3px solid var(--color-input-border-focus);
  outline-offset: 4px;
}
.dyno-card__button span {
  display: inline-block;
  transform: skew(10deg);
}
.dyno-card__button--active {
  background: var(--tt-red);
  border-color: var(--tt-red-dark);
  box-shadow: 0 8px 18px var(--color-accent-alpha-md);
  color: var(--color-text-on-accent);
}
.dyno-card__stats {
  display: flex;
  gap: 32px;
  justify-content: space-evenly;
  align-items: flex-start;
}
.dyno-card__stat-label {
  color: var(--tt-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dyno-card__stat-value {
  font-size: 2rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: 0;
}
.dyno-card__stat-value--red {
  color: var(--tt-red);
}
.dyno-card__stat-value--gold {
  color: var(--tt-gold);
}
.dyno-card__chart {
  width: 100%;
  height: 260px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  background: var(--dyno-card-chart-bg);
  border: 1px solid var(--tt-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--color-rgba-255-255-255-0p58);
}
.dyno-card__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.dyno-card__grid-line {
  stroke: var(--dyno-card-chart-grid);
}
.dyno-card__axis-line {
  stroke: var(--dyno-card-chart-axis);
}
.dyno-card__tick-label,
.dyno-card__axis-label {
  fill: var(--tt-muted);
}
.dyno-card__svg [data-tt-baseline] {
  stroke: var(--tt-stock-line);
}
.dyno-card__area-stop,
.dyno-card__live-line,
.dyno-card__live-glow {
  stop-color: var(--tt-gold);
  stroke: var(--tt-gold);
}
.dyno-card__legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding-top: 4px;
}
.dyno-card__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tt-muted);
}
.dyno-card__legend-dot {
  width: 20px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.dyno-card__legend-dot--stock {
  background: var(--tt-stock-line);
}
.dyno-card__legend-dot--active {
  background: var(--tt-gold);
}
.dyno-card__slider-wrap {
  width: 100%;
  margin-top: 16px;
  padding: 4px 4px 0;
}
.dyno-card__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--tt-surface-lite);
  border-radius: 999px;
  outline: none;
  box-shadow: inset 0 1px 3px var(--color-rgba-0-0-0-0p14);
  cursor: pointer;
}
.dyno-card__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tt-red);
  border: 3px solid var(--tt-surface);
  box-shadow: 0 4px 12px var(--color-accent-alpha-lg);
  cursor: pointer;
}
.dyno-card__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tt-red);
  border: 3px solid var(--tt-surface);
  cursor: pointer;
}
[data-theme="dark"] .dyno-card {
  --dyno-card-chart-bg: var(--color-surface);
  --dyno-card-chart-grid: var(--color-border);
  --dyno-card-chart-axis: var(--color-border-strong);
  --tt-stock-line: var(--color-text-muted);
  --tt-soft-shadow: var(--shadow-card);
}
[data-theme="dark"] .dyno-card__chart {
  box-shadow: inset 0 1px 0 var(--color-rgba-255-255-255-0p05);
}


@media (min-width: 600px) {
  .dyno-card__chart {
    height: 340px;
  }
}
@media (min-width: 900px) {
  .dyno-card__chart {
    height: 420px;
  }
}
@media (min-width: 541px) {
  .dyno-card__controls {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .dyno-card__presets {
    justify-content: flex-start;
  }
  .dyno-card__stats {
    justify-content: flex-end;
  }
  .dyno-card__button {
    flex: 0 0 auto;
  }
}


.dyno {
  padding: clamp(1.25rem, 3vw, 2.5rem) 0 5rem;
}
.dyno__shell {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 0.55rem;
  background: var(--color-rgba-255-255-255-0p72);
  border: 1px solid var(--color-rgba-148-163-184-0p32);
  border-radius: 20px;
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 45px var(--color-rgba-15-23-42-0p12);
}
.dyno__controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 0.35rem 0.35rem 0.9rem;
}
.dyno__presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.dyno__preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 135px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  transform: skew(-10deg);
  transition:
    background var(--dur-fast),
    border-color var(--dur-fast),
    box-shadow var(--dur-fast),
    color var(--dur-fast);
  user-select: none;
  -webkit-tap-highlight-color: var(--color-transparent);
}
.dyno__preset span {
  display: inline-block;
  transform: skew(10deg);
}
.dyno__preset--active {
  background: var(--color-accent);
  border-color: var(--color-accent-hover);
  box-shadow: 0 8px 18px var(--color-accent-alpha-md);
  color: var(--color-text-on-accent);
}
.dyno__preset:focus-visible {
  outline: 3px solid var(--color-input-border-focus);
  outline-offset: 4px;
}
.dyno__stats {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  gap: clamp(18px, 5vw, 32px);
  text-align: center;
}
.dyno__stat-label {
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dyno__stat-value {
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}
.dyno__stat-value--red {
  color: var(--color-accent);
}
.dyno__stat-value--gold {
  color: var(--tt-gold-500);
}
.dyno__chart {
  position: relative;
  background: var(--color-rgba-255-255-255-0p8);
  border: 1px solid var(--color-rgba-148-163-184-0p22);
  border-radius: 16px;
  padding: 0.4rem;
  overflow: hidden;
}
.dyno__svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800/520;
}
.dyno__gauge {
  position: absolute;
  top: 0.3rem;
  right: 0.2rem;
  width: 112px;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-transparent);
  color: var(--color-hex-0f172a);
  box-shadow: none;
  pointer-events: none;
}
.dyno__gauge-dial {
  width: 100%;
}
.dyno__gauge-svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;
}
.dyno__gauge-readout {
  margin-top: -1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.dyno__gauge-label {
  margin: 0;
  color: var(--color-rgba-15-23-42-0p82);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  transform: skewX(-12deg);
}
.dyno__gauge-value {
  margin: 0rem 0 0;
  font-size: 0.96rem;
  line-height: 1;
  font-weight: 800;
  display: inline-block;
  transform: skewX(-12deg);
}
.dyno__gauge-control:focus-visible {
  outline: 3px solid var(--color-rgba-37-99-235-0p45);
  outline-offset: 3px;
}
.dyno__grid-line {
  stroke: var(--color-hex-dbe2ea);
  stroke-width: 1;
}
.dyno__axis-line {
  stroke: var(--color-hex-64748b);
  stroke-width: 2;
}
.dyno__axis-label,
.dyno__tick-label {
  fill: var(--color-hex-475569);
}
.dyno__axis-label {
  font-size: 16px;
  font-weight: 700;
}
.dyno__tick-label {
  font-size: 13px;
}
.dyno__series {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dyno__series--stock {
  stroke: var(--color-hex-64748b);
}
.dyno__series--tuned {
  stroke: var(--color-hex-e11d48);
}
.dyno__marker--stock {
  fill: var(--color-hex-64748b);
  stroke: var(--color-hex-fff);
  stroke-width: 2;
}
.dyno__marker--tuned {
  fill: var(--color-hex-e11d48);
  stroke: var(--color-hex-fff);
  stroke-width: 2;
}
.dyno__delta {
  fill: var(--color-hex-16a34a);
  font-size: 17px;
  font-weight: 800;
}
.dyno__callout-line {
  fill: none;
  stroke: var(--color-hex-cbd5e1);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dyno__callout-arrowhead {
  fill: none;
  stroke: var(--color-hex-e11d48);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dyno__callout-box {
  fill: var(--color-rgba-255-255-255-0p94);
  stroke: var(--color-rgba-148-163-184-0p36);
  stroke-width: 1.5;
}
.dyno__callout-title {
  fill: var(--color-hex-e11d48);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.dyno__callout-title--mobile {
  padding: 0.6rem;
  font-size: 14px;
  line-height: 1;
  width: min(78%, 220px);
}
.dyno__callout-body {
  fill: var(--color-hex-0f172a);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.dyno__callout-body--mobile {
  font-size: 13px;
}
.dyno__gauge-arc-base {
  fill: none;
  stroke: var(--color-rgba-148-163-184-0p3);
  stroke-width: 20;
  stroke-linecap: round;
}
.dyno__gauge-arc-active {
  fill: none;
  stroke-width: 20;
  stroke-linecap: round;
}
.dyno__gauge-arc-active--warmup {
  stroke: var(--color-hex-f6d365);
}
.dyno__gauge-arc-active--mid {
  stroke: var(--color-hex-22c55e);
}
.dyno__gauge-arc-active--redline {
  stroke: var(--color-hex-ef4444);
}
.dyno__gauge-tick {
  stroke-width: 1.25;
  stroke-linecap: round;
}
.dyno__gauge-tick--major {
  stroke: var(--color-rgba-71-85-105-0p8);
  stroke-width: 2;
}
.dyno__gauge-tick--minor {
  stroke: var(--color-rgba-148-163-184-0p55);
}
.dyno__gauge-tick--redline {
  stroke: var(--color-rgba-239-68-68-0p88);
}
.dyno__gauge-number {
  text-anchor: middle;
  font-size: 1.05rem;
  font-weight: 900;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  fill: var(--color-rgba-71-85-105-0p88);
}
.dyno__gauge-number--redline {
  fill: var(--color-rgba-239-68-68-0p9);
}
.dyno__gauge-meta {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--color-rgba-51-65-85-0p92);
}
.dyno__gauge-meta--left {
  text-anchor: start;
}
.dyno__gauge-meta--right {
  text-anchor: end;
}
.dyno__gauge-needle-shadow {
  stroke: var(--color-rgba-15-23-42-0p12);
  stroke-width: 4;
  stroke-linecap: round;
}
.dyno__gauge-needle {
  stroke: var(--color-hex-e11d48);
  stroke-width: 8;
  stroke-linecap: round;
}
.dyno__gauge-center-outer {
  fill: var(--color-rgba-255-255-255-0p92);
  stroke: var(--color-rgba-148-163-184-0p5);
  stroke-width: 1.5;
}
.dyno__gauge-center-inner {
  fill: var(--color-hex-e11d48);
}
.dyno__gauge-control {
  cursor: pointer;
  fill: var(--dyno-gauge-control-hit);
}
.dyno__gauge-icon {
  fill: var(--dyno-gauge-control-icon);
  stroke: none;
  pointer-events: none;
}


@media (min-width: 376px) {
  .dyno {
    padding-inline: 1rem;
  }
  .dyno__shell {
    padding: 0.7rem;
  }
  .dyno__chart {
    padding: 0.55rem;
  }
  .dyno__svg {
    height: auto;
    aspect-ratio: 800/520;
  }
  .dyno__gauge {
    width: 132px;
    top: 0.4rem;
    right: 0.35rem;
  }
}

@media (min-width: 481px) {
  .dyno__gauge {
    width: 148px;
    top: 0.55rem;
    right: 0.45rem;
  }
  .dyno__gauge-readout {
    margin-top: -1.2rem;
  }
  .dyno__gauge-label {
    font-size: 0.72rem;
  }
  .dyno__gauge-value {
    font-size: 1.08rem;
  }
  .dyno__gauge-number {
    font-size: 1.5rem;
  }
  .dyno__gauge-meta {
    font-size: 9px;
  }
  .dyno__delta {
    font-size: 28px;
  }
  .dyno__callout-title--mobile {
    font-size: 1.5rem;
  }
  .dyno__callout-body--mobile {
    font-size: 15px;
  }
}

@media (min-width: 641px) {
  .dyno__shell {
    padding: 0.875rem;
    border-radius: 28px;
  }
  .dyno__controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .dyno__presets {
    justify-content: flex-start;
  }
  .dyno__preset {
    flex: 0 0 auto;
  }
  .dyno__stats {
    justify-content: flex-end;
  }
  .dyno__chart {
    padding: clamp(0.75rem, 2vw, 1.1rem);
    border-radius: 20px;
  }
  .dyno__gauge {
    width: 186px;
    top: 0.7rem;
    right: 0.7rem;
  }
}

@media (min-width: 901px) {
  .dyno__shell {
    padding: clamp(1rem, 2.5vw, 1.5rem);
  }
  .dyno__gauge {
    width: 220px;
    top: 1rem;
    right: 1rem;
  }
  .dyno__gauge-readout {
    margin-top: -1.9rem;
  }
  .dyno__gauge-label {
    font-size: 1rem;
  }
  .dyno__gauge-value {
    font-size: clamp(1.25rem, 1vw, 1.25rem);
  }
  .dyno__gauge-number {
    font-size: 1.5em;
  }
  .dyno__gauge-meta {
    font-size: 19px;
    letter-spacing: 0.08em;
  }
  .dyno__delta {
    font-size: 30px;
  }
}

@media (min-width: 1101px) {
  #dyno {
    padding-block: clamp(16px, 2.4vh, 24px);
  }
  #dyno .section__title {
    font-size: clamp(2rem, 3vw, 3rem);
    margin-bottom: clamp(6px, 0.9vh, 10px);
  }
  #dyno .section__lead {
    margin-bottom: clamp(8px, 1.2vh, 12px);
  }
  .dyno {
    padding: 0;
  }
  .dyno__shell {
    width: min(100%, 760px);
    padding: clamp(0.5rem, 1vw, 0.75rem);
  }
  .dyno__chart {
    padding: clamp(0.45rem, 0.9vw, 0.65rem);
  }
  .dyno__controls {
    padding: 0.25rem 0.25rem 0.65rem;
  }
  .dyno__preset {
    min-height: 34px;
    padding: 7px 12px;
    font-size: 0.66rem;
  }
  .dyno__stat-value {
    font-size: 1.35rem;
  }
  .dyno__gauge {
    width: clamp(140px, 8vw, 165px);
    top: 0.55rem;
    right: 0.55rem;
  }
}


[data-theme="dark"] .dyno__shell {
  background: var(--color-rgba-27-33-40-0p8);
  border-color: var(--color-rgba-70-81-94-0p5);
}
[data-theme="dark"] .dyno__chart {
  background: var(--color-rgba-20-24-29-0p84);
  border-color: var(--color-rgba-70-81-94-0p38);
}
[data-theme="dark"] .dyno__grid-line {
  stroke: var(--color-hex-33404c);
}
[data-theme="dark"] .dyno__axis-line {
  stroke: var(--color-hex-7d8b9b);
}
[data-theme="dark"] .dyno__axis-label,
[data-theme="dark"] .dyno__tick-label {
  fill: var(--color-hex-d7dde5);
}
[data-theme="dark"] .dyno__callout-box {
  fill: var(--color-rgba-27-33-40-0p96);
  stroke: var(--color-rgba-96-110-126-0p6);
}
[data-theme="dark"] .dyno__callout-body {
  fill: var(--color-hex-f5f7fa);
}
[data-theme="dark"] .dyno__gauge-label {
  color: var(--color-hex-c5cad3);
}
[data-theme="dark"] .dyno__gauge-number {
  fill: var(--color-hex-d7dde5);
}
[data-theme="dark"] .dyno__gauge-meta {
  fill: var(--color-hex-aeb7c3);
}
[data-theme="dark"] .dyno__gauge-center-outer {
  fill: var(--color-hex-1b2128);
  stroke: var(--color-rgba-96-110-126-0p58);
}