/* =========================================================
   Redovar Home
========================================================= */


/* =========================================================
   Base
========================================================= */

main {
  overflow: clip;
}


section {
  scroll-margin-top:
    calc(
      var(--header-h)
      +
      20px
    );
}


h1,
h2,
h3,
p {
  text-wrap: pretty;
}


h2 {
  margin: 0;

  color:
    var(--light-text);

  font-size:
    clamp(
      38px,
      4vw,
      60px
    );

  line-height:
    .96;

  letter-spacing:
    -.055em;

  font-weight:
    500;
}


section p {
  margin:
    20px
    0
    0;

  max-width:
    590px;

  color:
    var(--light-secondary);

  font-size:
    clamp(
      15px,
      1.2vw,
      17px
    );

  line-height:
    1.68;
}


/* =========================================================
   Buttons
========================================================= */

.button {
  min-height:
    44px;

  padding:
    0
    16px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    var(--radius);

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    background-color
    150ms
    ease,
    color
    150ms
    ease,
    transform
    150ms
    ease;
}


.button:active {
  transform:
    translateY(
      1px
    );
}


.button--terracotta {
  background:
    var(--redovar-terracotta);

  color:
    #FFFFFF;
}


.button--terracotta:hover,
.button--terracotta:focus-visible {
  background:
    #A83D0D;
}


/* =========================================================
   Quiet reveals
========================================================= */

.motion-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 450ms ease,
    transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   Hero
========================================================= */

.hero {
  position:
    relative;

  min-height:
    100svh;

  padding-top:
    var(--header-h);

  overflow:
    hidden;

  background:
    var(--dark-bg);

  color:
    var(--dark-text);

  isolation:
    isolate;
}


/* =========================================================
   Hero background
========================================================= */

.hero-image-layer,
.hero-shade {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;
}


.hero-image-layer {
  z-index:
    -3;

  background-image:
    var(--hero-background-image);

  background-size:
    cover;

  background-position:
    center
    38%;

  background-repeat:
    no-repeat;

  transform:
    scale(
      1.001
    );
}


.hero-shade {
  z-index:
    -2;

  background:
    linear-gradient(
      90deg,
      rgba(6, 6, 6, .76)
      0%,
      rgba(6, 6, 6, .57)
      37%,
      rgba(6, 6, 6, .18)
      72%,
      rgba(6, 6, 6, .07)
      100%
    );
}


/* =========================================================
   Hero grid
========================================================= */

.hero-shell {
  min-height:
    calc(
      100svh
      -
      var(--header-h)
    );

  padding-top:
    clamp(
      76px,
      8vw,
      126px
    );

  padding-bottom:
    clamp(
      76px,
      8vw,
      126px
    );

  display:
    grid;

  grid-template-columns:
    minmax(
      390px,
      .8fr
    )
    minmax(
      500px,
      1.2fr
    );

  gap:
    clamp(
      42px,
      5vw,
      82px
    );

  align-items:
    center;
}


/* =========================================================
   Hero copy
========================================================= */

.hero-copy {
  max-width:
    790px;
}


.hero h1 {
  margin:
    0;

  max-width:
    790px;

  color:
    #F6F6F3;

  font-size:
    clamp(
      60px,
      6.3vw,
      96px
    );

  line-height:
    .92;

  letter-spacing:
    -.064em;

  font-weight:
    500;
}


.hero-description {
  margin-top:
    29px !important;

  max-width:
    540px !important;

  color:
    rgba(
      245,
      245,
      243,
      .67
    ) !important;

  font-size:
    clamp(
      16px,
      1.25vw,
      18px
    ) !important;

  line-height:
    1.66 !important;
}


/* =========================================================
   Hero actions
========================================================= */

.hero-actions {
  margin-top:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  flex-wrap:
    wrap;
}


.hero-link {
  position:
    relative;

  padding:
    8px
    0;

  color:
    rgba(
      245,
      245,
      243,
      .80
    );

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    550;
}


.hero-link::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    2px;

  width:
    100%;

  height:
    1px;

  background:
    var(--redovar-terracotta);

  transform:
    scaleX(
      .3
    );

  transform-origin:
    left
    center;

  transition:
    transform
    220ms
    var(--ease);
}


.hero-link:hover::after,
.hero-link:focus-visible::after {
  transform:
    scaleX(
      1
    );
}


/* =========================================================
   Hero product
========================================================= */

.hero-side {
  min-width:
    0;

  display:
    grid;

  place-items:
    center;
}


.hero-side img {
  width:
    min(
      100%,
      650px
    );

  height:
    auto;

  display:
    block;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0
      28px
      60px
      rgba(
        0,
        0,
        0,
        .18
      )
    );
}


/* =========================================================
   Shared large statement
========================================================= */

.statement-title {
  max-width:
    1180px;

  font-size:
    clamp(
      46px,
      4vw,
      76px
    );

  line-height:
    .9;

  letter-spacing:
    -.064em;

  text-align:
    center;
}


/* =========================================================
   Gradient script
========================================================= */

.gradient-script {
  display:
    inline-block;

  padding:
    0
    .05em
    .06em;

  font-family:
    "Allura",
    cursive;

  font-size:
    1.13em;

  line-height:
    .82;

  font-weight:
    400;

  letter-spacing:
    -.02em;

  color:
    var(--redovar-terracotta);

  background:
    linear-gradient(
      100deg,
      #A83D0D
      0%,
      var(--redovar-terracotta)
      25%,
      #874963
      47%,
      #4568C9
      66%,
      var(--redovar-blue)
      84%,
      #A83D0D
      100%
    );

  background-size:
    240%
    100%;

  background-position:
    var(
      --gradient-position,
      0%
    )
    50%;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;

  will-change:
    background-position;
}


/* =========================================================
   Belief
========================================================= */

.belief-section {
  padding:
    clamp(
      128px,
      13vw,
      216px
    )
    0;

  background:
    #FFFFFF;
}


.belief-inner {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;
}


/* =========================================================
   Belief arrow
========================================================= */

.belief-toggle {
  width:
    58px;

  height:
    58px;

  margin-top:
    42px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    var(--light-surface);

  cursor:
    pointer;

  transition:
    background-color
    180ms
    ease,
    transform
    180ms
    var(--ease);
}


.belief-toggle:hover,
.belief-toggle:focus-visible {
  background:
    #ECEEF3;

  transform:
    translateY(
      2px
    );
}


.belief-toggle img {
  width:
    20px;

  height:
    20px;

  display:
    block;

  object-fit:
    contain;

  transition:
    transform
    360ms
    var(--ease);
}


.belief-inner.is-open
.belief-toggle img {
  transform:
    rotate(
      180deg
    );
}


/* =========================================================
   Belief arrow prompt
========================================================= */

.belief-toggle.is-prompting {
  animation:
    beliefArrowPrompt
    920ms
    var(--ease)
    both;
}


@keyframes beliefArrowPrompt {

  0% {
    transform:
      translateY(
        0
      );
  }

  28% {
    transform:
      translateY(
        7px
      );
  }

  52% {
    transform:
      translateY(
        -2px
      );
  }

  72% {
    transform:
      translateY(
        4px
      );
  }

  100% {
    transform:
      translateY(
        0
      );
  }

}


/* =========================================================
   Belief reveal
========================================================= */

.belief-reveal {
  width:
    100%;

  display:
    grid;

  grid-template-rows:
    0fr;

  opacity:
    0;

  transition:
    grid-template-rows
    520ms
    var(--ease),
    opacity
    360ms
    ease;
}


.belief-reveal-inner {
  overflow:
    hidden;
}


.belief-reveal p {
  margin:
    32px
    auto
    0 !important;

  max-width:
    720px !important;

  color:
    var(--light-secondary) !important;

  font-size:
    clamp(
      18px,
      1.8vw,
      25px
    ) !important;

  line-height:
    1.45 !important;

  letter-spacing:
    -.025em;

  text-align:
    center;
}


.belief-inner.is-open
.belief-reveal {
  grid-template-rows:
    1fr;

  opacity:
    1;
}


/* =========================================================
   Staff Device
========================================================= */

.device-section {
  position:
    relative;

  padding:
    clamp(
      118px,
      11vw,
      180px
    )
    0;

  background:
    var(--light-surface);
}


/* =========================================================
   Device grid
========================================================= */

.device-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      390px,
      1fr
    )
    minmax(
      390px,
      .9fr
    );

  gap:
    clamp(
      80px,
      10vw,
      160px
    );

  align-items:
    start;
}


/* =========================================================
   Left — pinned Device
========================================================= */

.device-image-wrap {
  position:
    sticky;

  top:
    calc(
      var(--header-h)
      +
      36px
    );

  height:
    calc(
      100svh
      -
      var(--header-h)
      -
      72px
    );

  min-height:
    540px;

  display:
    grid;

  place-items:
    center;

  align-self:
    start;

  overflow:
    visible;
}


/* =========================================================
   Device image
========================================================= */

.device-image-wrap img {
  width:
    min(
      100%,
      620px
    );

  height:
    min(
      78svh,
      790px
    );

  max-width:
    100%;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  transform:
    none;

  filter:
    drop-shadow(
      0
      30px
      54px
      rgba(
        0,
        0,
        0,
        .08
      )
    );
}


/* =========================================================
   Right — scrolling content
========================================================= */

.device-copy {
  min-width:
    0;

  padding-top:
    4px;
}


/* =========================================================
   Intro
========================================================= */

.device-intro {
  margin-bottom:
    clamp(
      54px,
      6vw,
      78px
    );
}


.device-intro h2 {
  max-width:
    680px;
}


.device-intro p {
  margin:
    20px
    0
    0;

  max-width:
    500px;

  color:
    var(--light-secondary);

  font-size:
    clamp(
      15px,
      1.2vw,
      17px
    );

  line-height:
    1.68;
}


/* =========================================================
   Feature stack
========================================================= */

.device-features {
  display:
    grid;

  gap:
    12px;
}


/* =========================================================
   Feature card
========================================================= */

.device-feature {
  min-height:
    clamp(
      112px,
      8vw,
      128px
    );

  padding:
    clamp(
      20px,
      2vw,
      24px
    );

  display:
    grid;

  grid-template-columns:
    30px
    minmax(
      0,
      1fr
    );

  gap:
    16px;

  align-items:
    center;

  border:
    0;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;

  transition:
    transform
    220ms
    var(--ease),
    background-color
    220ms
    ease;
}


.device-feature:hover {
  transform:
    translateY(
      -3px
    );

  background:
    #FDFDFC;
}


.device-feature > img {
  width:
    22px;

  height:
    22px;

  display:
    block;

  object-fit:
    contain;

  filter:
    brightness(
      0
    );

  opacity:
    .72;
}


.device-feature > div {
  min-width:
    0;
}


.device-feature strong {
  display:
    block;

  color:
    var(--light-text);

  font-size:
    clamp(
      15px,
      1.25vw,
      18px
    );

  line-height:
    1.2;

  letter-spacing:
    -.025em;

  font-weight:
    500;
}


.device-feature span {
  display:
    block;

  margin-top:
    7px;

  max-width:
    460px;

  color:
    var(--light-secondary);

  font-size:
    12px;

  line-height:
    1.55;
}


/* =========================================================
   Device — 1100
========================================================= */

@media (max-width: 1100px) {

  .device-grid {
    grid-template-columns:
      minmax(
        340px,
        .9fr
      )
      minmax(
        390px,
        1.1fr
      );

    gap:
      70px;
  }


  .device-image-wrap img {
    width:
      min(
        100%,
        540px
      );
  }

}


/* =========================================================
   Device — 900
========================================================= */

@media (max-width: 900px) {

  .device-grid {
    grid-template-columns:
      1fr;

    gap:
      62px;
  }


  .device-image-wrap {
    position:
      relative;

    top:
      auto;

    height:
      auto;

    min-height:
      500px;

    align-self:
      auto;
  }


  .device-image-wrap img {
    width:
      min(
        100%,
        620px
      );

    height:
      auto;

    max-height:
      680px;
  }


  .device-copy {
    padding-top:
      0;
  }


  .device-intro {
    margin-bottom:
      52px;
  }

}


/* =========================================================
   Device — 700
========================================================= */

@media (max-width: 700px) {

  .device-section {
    padding:
      110px
      0;
  }


  .device-grid {
    gap:
      50px;
  }


  .device-image-wrap {
    min-height:
      420px;
  }


  .device-image-wrap img {
    max-height:
      490px;
  }


  .device-intro {
    margin-bottom:
      44px;
  }


  .device-feature {
    min-height:
      128px;

    padding:
      26px;

    grid-template-columns:
      28px
      minmax(
        0,
        1fr
      );

    gap:
      19px;
  }

}


/* =========================================================
   Device — 520
========================================================= */

@media (max-width: 520px) {

  .device-image-wrap {
    min-height:
      350px;
  }


  .device-image-wrap img {
    max-height:
      410px;
  }


  .device-features {
    gap:
      9px;
  }


  .device-feature {
    min-height:
      118px;

    padding:
      23px;
  }


  .device-feature strong {
    font-size:
      16px;
  }


  .device-feature span {
    font-size:
      11px;
  }

}


/* =========================================================
   Plans change
========================================================= */

.system-section {
  padding:
    clamp(
      122px,
      11vw,
      184px
    )
    0;

  background:
    #FFFFFF;
}


/* =========================================================
   System head
========================================================= */

.system-head {
  display:
    grid;

  grid-template-columns:
    minmax(
      520px,
      1.18fr
    )
    minmax(
      320px,
      .82fr
    );

  column-gap:
    clamp(
      80px,
      10vw,
      170px
    );

  align-items:
    end;
}


.system-head h2 {
  max-width:
    760px;

  font-size:
    clamp(
      38px,
      4vw,
      60px
    );
}


.system-title-line {
  display:
    block;

  white-space:
    nowrap;
}


.system-title-line--soft {
  color:
    var(--light-soft);
}


.system-head > p {
  width:
    min(
      100%,
      420px
    );

  margin:
    0
    0
    5px;

  justify-self:
    end;

  color:
    var(--light-secondary);

  font-size:
    clamp(
      17px,
      1.45vw,
      20px
    );

  line-height:
    1.6;
}


/* =========================================================
   System sequence
========================================================= */

.system-sequence {
  margin-top:
    clamp(
      64px,
      7vw,
      96px
    );
}


/* =========================================================
   System cards
========================================================= */

.system-cards {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    clamp(
      34px,
      4vw,
      66px
    )
    minmax(
      0,
      1fr
    )
    clamp(
      34px,
      4vw,
      66px
    )
    minmax(
      0,
      1fr
    );

  gap:
    0;

  align-items:
    stretch;
}


.system-card {
  min-width:
    0;

  min-height:
    280px;

  padding:
    clamp(
      30px,
      3vw,
      42px
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    72px;

  border-radius:
    var(--radius);

  background:
    #F3F3F0;

    transform:
  translate3d(
    var(
      --system-card-x,
      0px
    ),
    0,
    0
  );

will-change:
  transform;

}


.system-card-icon {
  width:
    24px;

  height:
    24px;

  display:
    block;

  object-fit:
    contain;

  opacity:
    .72;

  filter:
    brightness(
      0
    );
}


.system-card h3 {
  margin:
    0;

  color:
    var(--light-text);

  font-size:
    clamp(
      27px,
      2.4vw,
      36px
    );

  line-height:
    1;

  letter-spacing:
    -.045em;

  font-weight:
    500;
}


.system-card p {
  margin:
    17px
    0
    0;

  max-width:
    350px;

  color:
    var(--light-secondary);

  font-size:
    13px;

  line-height:
    1.62;
}


/* =========================================================
   System connectors
========================================================= */

.system-connector {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  height:
    2px;

  align-self:
    center;

  overflow:
    hidden;
}


.system-connector::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    50%;

  border-top:
    2px
    dashed
    #D8D8D3;

  transform:
    translateY(
      -50%
    );
}


.system-connector > span {
  position:
    absolute;

  left:
    0;

  top:
    50%;

  width:
    0;

  height:
    0;

  border-top:
    2px
    dashed
    var(--redovar-terracotta);

  transform:
    translateY(
      -50%
    );

  will-change:
    width;
}


.system-connector--one > span {
  animation:
    systemConnectorOne
    5.8s
    linear
    infinite;
}


.system-connector--two > span {
  animation:
    systemConnectorTwo
    5.8s
    linear
    infinite;
}


@keyframes systemConnectorOne {

  0%,
  8% {
    width:
      0;
  }

  34% {
    width:
      100%;
  }

  92% {
    width:
      100%;
  }

  100% {
    width:
      0;
  }

}


@keyframes systemConnectorTwo {

  0%,
  40% {
    width:
      0;
  }

  68% {
    width:
      100%;
  }

  92% {
    width:
      100%;
  }

  100% {
    width:
      0;
  }

}


/* =========================================================
   Blue final card
========================================================= */

.system-card--blue {
  background:
    var(--redovar-blue);
}


.system-card--blue
.system-card-icon {
  opacity:
    .88;

  filter:
    brightness(
      0
    )
    invert(
      1
    );
}


.system-card--blue h3 {
  color:
    #FFFFFF;
}


.system-card--blue p {
  color:
    rgba(
      255,
      255,
      255,
      .72
    );
}


/* =========================================================
   Console
========================================================= */

.console-section {
  position:
    relative;

  padding:
    clamp(
      122px,
      11vw,
      184px
    )
    0;

  overflow:
    hidden;

  background:
    var(--light-hover);
}


/* =========================================================
   Console head
========================================================= */

.console-head {
  display:
    grid;

  grid-template-columns:
    minmax(
      420px,
      1fr
    )
    minmax(
      380px,
      .8fr
    );

  gap:
    clamp(
      70px,
      10vw,
      160px
    );

  align-items:
    end;
}


.console-head > p {
  margin:
    0
    0
    5px;

  max-width:
    540px;

  font-size:
    clamp(
      16px,
      1.35vw,
      19px
    );

  line-height:
    1.65;
}


/* =========================================================
   Console motion area
========================================================= */

.console-pin-track {
  position:
    relative;

  height:
    auto;

  margin-top:
    clamp(
      96px,
      9vw,
      138px
    );
}


.console-image-shell {
  position:
    relative;

  top:
    auto;

  height:
    auto;

  min-height:
    0;

  display:
    grid;

  place-items:
    center;

  overflow:
    visible;
}


.console-image {
  width:
    min(
      90%,
      1200px
    );

  min-height:
    clamp(
      500px,
      54vw,
      790px
    );

  margin-inline:
    auto;

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;

  transform:
    translate3d(
      0,
      var(
        --console-jump-y,
        86px
      ),
      0
    )
    scale(
      var(
        --console-jump-scale,
        .985
      )
    );

  transform-origin:
    center
    center;

  backface-visibility:
    hidden;

  will-change:
    transform;
}


.console-image img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  transform:
    none;

  transform-origin:
    center;
}


/* =========================================================
   Console — 1100
========================================================= */

@media (max-width: 1100px) {

  .console-image {
    width:
      min(
        92%,
        1100px
      );
  }

}


/* =========================================================
   Console — 900
========================================================= */

@media (max-width: 900px) {

  .console-head {
    grid-template-columns:
      1fr;

    gap:
      38px;
  }


  .console-head > p {
    margin:
      0;
  }


  .console-pin-track {
    margin-top:
      78px;
  }


  .console-image-shell {
    position:
      relative;

    top:
      auto;

    height:
      auto;
  }


  .console-image {
    width:
      96%;

    min-height:
      500px;
  }

}


/* =========================================================
   Console — 700
========================================================= */

@media (max-width: 700px) {

  .console-pin-track {
    margin-top:
      66px;
  }


  .console-image {
    width:
      100%;

    min-height:
      400px;
  }

}


/* =========================================================
   Console — 520
========================================================= */

@media (max-width: 520px) {

  .console-pin-track {
    margin-top:
      56px;
  }


  .console-image {
    min-height:
      300px;
  }

}


/* =========================================================
   Console reduced motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .console-pin-track {
    height:
      auto;
  }


  .console-image-shell {
    position:
      relative;

    top:
      auto;

    height:
      auto;

    overflow:
      visible;
  }


  .console-image {
    transform:
      none !important;
  }


  .console-image img {
    transform:
      none !important;
  }

}


/* =========================================================
   Phone-free by design
========================================================= */

.focus-section {
  padding:
    clamp(
      132px,
      12vw,
      202px
    )
    0;

  background:
    #111111;

  color:
    #F5F5F3;
}


.focus-head {
  display:
    grid;

  grid-template-columns:
    minmax(
      400px,
      .95fr
    )
    minmax(
      400px,
      1.05fr
    );

  gap:
    clamp(
      80px,
      11vw,
      170px
    );

  align-items:
    end;
}


.focus-head h2 {
  color:
    #F5F5F3;

  font-size:
    clamp(
      40px,
      4.5vw,
      64px
    );

  line-height:
    .92;
}


.focus-head > p {
  margin:
    0
    0
    6px;

  max-width:
    550px;

  color:
    rgba(
      245,
      245,
      243,
      .61
    );

  font-size:
    clamp(
      17px,
      1.5vw,
      20px
    );

  line-height:
    1.62;
}


/* =========================================================
   Focus cards
========================================================= */

.focus-cards {
  margin-top:
    clamp(
      70px,
      7vw,
      104px
    );

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


.focus-card {
  min-height:
    250px;

  padding:
    clamp(
      28px,
      3vw,
      38px
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    64px;

  border-radius:
    var(--radius);

  background:
    rgba(
      255,
      255,
      255,
      .055
    );

  transform:
    translate3d(
      var(
        --focus-card-x,
        0px
      ),
      0,
      0
    );

  will-change:
    transform;
}


.focus-icon {
  width:
    48px;

  height:
    48px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      .085
    );
}


.focus-icon img {
  width:
    21px;

  height:
    21px;

  display:
    block;

  object-fit:
    contain;

  opacity:
    .67;

  filter:
    brightness(
      0
    )
    saturate(
      100%
    )
    invert(
      100%
    );
}


.focus-card h3 {
  margin:
    0;

  color:
    #FFFFFF;

  font-size:
    clamp(
      25px,
      2.3vw,
      34px
    );

  line-height:
    1;

  letter-spacing:
    -.043em;

  font-weight:
    500;
}


.focus-card p {
  margin:
    12px
    0
    0;

  color:
    rgba(
      245,
      245,
      243,
      .48
    );

  font-size:
    12px;

  line-height:
    1.55;
}


.focus-closing {
  margin-top:
    68px;
}


.focus-closing p {
  margin:
    0;

  max-width:
    700px;

  color:
    #FFFFFF;

  font-size:
    clamp(
      28px,
      3.2vw,
      46px
    );

  line-height:
    1.04;

  letter-spacing:
    -.047em;

  font-weight:
    500;
}


/* =========================================================
   Real world
========================================================= */

.reliability-section {
  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

  background:
    var(--light-surface);
}


.reliability-head {
  margin-bottom:
    clamp(
      64px,
      7vw,
      100px
    );
}


.reliability-head h2 {
  max-width:
    980px;
}


/* =========================================================
   Reliability stack
========================================================= */

.reliability-stack {
  display:
    grid;

  gap:
    14px;
}


.reliability-card {
  min-height:
    440px;

  padding:
    clamp(
      34px,
      4vw,
      56px
    );

  border-radius:
    var(--radius);
}


/* =========================================================
   Offline card
========================================================= */

.reliability-card--offline {
  display:
    grid;

  grid-template-columns:
    minmax(
      350px,
      .9fr
    )
    minmax(
      460px,
      1.1fr
    );

  gap:
    clamp(
      60px,
      9vw,
      140px
    );

  align-items:
    center;

  background:
    #FFFFFF;
}


.reliability-card-copy h3,
.reuse-head h3 {
  margin:
    0;

  color:
    var(--light-secondary);

  font-size:
    clamp(
      40px,
      4.3vw,
      64px
    );

  line-height:
    .94;

  letter-spacing:
    -.055em;

  font-weight:
    500;
}


.reliability-card-copy p,
.reuse-head p {
  max-width:
    470px;
}


/* =========================================================
   Sync panel
========================================================= */

.sync-panel {
  padding:
    12px;

  border-radius:
    var(--radius);

  background:
    #F3F3F0;

  transition:
    background-color
    240ms
    ease;
}


.sync-status-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;
}


.sync-status-card {
  min-height:
    128px;

  padding:
    20px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    28px;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;
}


.sync-status-card span {
  color:
    var(--light-soft);

  font-size:
    10px;
}


.sync-status-card strong {
  color:
    var(--light-text);

  font-size:
    clamp(
      10px,
      1.2vw,
      16px
    );

  line-height:
    1;

  letter-spacing:
    -.03em;

  font-weight:
    500;
}


.sync-panel button {
  width:
    100%;

  min-height:
    48px;

  margin-top:
    10px;

  border:
    0;

  border-radius:
    var(--radius);

  background:
    #E4EAF9;

  color:
    var(--redovar-blue);

  font-size:
    11px;

  font-weight:
    600;

  cursor:
    pointer;

  transition:
    background-color
    180ms
    ease,
    color
    180ms
    ease,
    transform
    180ms
    var(--ease);
}


.sync-panel button:hover,
.sync-panel button:focus-visible {
  background:
    #DCE4F8;
}


.sync-panel button:active {
  transform:
    translateY(
      1px
    );
}


/* =========================================================
   Offline state
========================================================= */

.sync-panel.is-offline {
  background:
    #F5E9E3;
}


.sync-panel.is-offline
.sync-status-card {
  background:
    #FFFDFC;
}


.sync-panel.is-offline button {
  background:
    #F2DDD3;

  color:
    var(--redovar-terracotta);
}


/* =========================================================
   Reuse card
========================================================= */

.reliability-card--reuse {
  background:
    var(--light-hover);
}


.reuse-head {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;
}


.reuse-head h3 {
  white-space:
    nowrap;
}


.reuse-head p {
  margin:
    0
    0
    5px;
}


.reuse-copy {
  max-width:
    none !important;
}


.reuse-copy span {
  display:
    block;

  white-space:
    nowrap;
}


/* =========================================================
   Refined card typography

   Shared by the system, focus, and reliability cards so the
   named card titles and their supporting copy read at one
   restrained scale.
========================================================= */

.system-card h3,
.focus-card h3,
.reliability-card-copy h3,
.reuse-head h3 {
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.05;
  letter-spacing: -.04em;
}


/* The two reliability-card titles carry slightly more emphasis. */
.reliability-card-copy h3,
.reuse-head h3 {
  font-size: clamp(24px, 2vw, 30px);
}


/* =========================================================
   Fleet flow
========================================================= */

.fleet-flow {
  margin-top:
    clamp(
      68px,
      7vw,
      96px
    );

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    clamp(
      22px,
      2.6vw,
      38px
    )
    minmax(
      0,
      1fr
    )
    clamp(
      22px,
      2.6vw,
      38px
    )
    minmax(
      0,
      1fr
    )
    clamp(
      22px,
      2.6vw,
      38px
    )
    minmax(
      0,
      1fr
    );

  gap:
    0;

  align-items:
    stretch;
}


.fleet-stage {
  min-width:
    0;

  min-height:
    150px;

  padding:
    22px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    36px;

  border-radius:
    var(--radius);

  background:
    rgba(
      255,
      255,
      255,
      .82
    );

  transform:
    translate3d(
      var(
        --fleet-card-x,
        0px
      ),
      0,
      0
    );

  transition:
    background-color
    220ms
    ease;

  will-change:
    transform;
}


.fleet-stage:hover {
  background:
    #FFFFFF;
}


.fleet-index {
  width:
    38px;

  height:
    38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  background:
    #E4EAF9;

  color:
    var(--redovar-blue);

  font-size:
    9px;

  line-height:
    1;

  letter-spacing:
    .04em;

  font-weight:
    600;
}


.fleet-stage > div {
  display:
    grid;

  gap:
    5px;
}


.fleet-stage strong {
  color:
    var(--light-text);

  font-size:
    14px;

  font-weight:
    550;
}


.fleet-stage > div span {
  color:
    var(--light-secondary);

  font-size:
    10px;
}


/* =========================================================
   Fleet connectors
========================================================= */

.fleet-connector {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  height:
    2px;

  align-self:
    center;

  overflow:
    hidden;
}


.fleet-connector::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    50%;

  border-top:
    2px
    dashed
    #D8D8D3;

  transform:
    translateY(
      -50%
    );
}


.fleet-connector > span {
  position:
    absolute;

  left:
    0;

  top:
    50%;

  width:
    0;

  height:
    0;

  border-top:
    2px
    dashed
    var(--redovar-terracotta);

  transform:
    translateY(
      -50%
    );

  will-change:
    width;
}


.fleet-connector--one > span {
  animation:
    fleetConnectorOne
    6.8s
    linear
    infinite;
}


.fleet-connector--two > span {
  animation:
    fleetConnectorTwo
    6.8s
    linear
    infinite;
}


.fleet-connector--three > span {
  animation:
    fleetConnectorThree
    6.8s
    linear
    infinite;
}


@keyframes fleetConnectorOne {

  0%,
  6% {
    width:
      0;
  }

  27% {
    width:
      100%;
  }

  92% {
    width:
      100%;
  }

  100% {
    width:
      0;
  }

}


@keyframes fleetConnectorTwo {

  0%,
  31% {
    width:
      0;
  }

  53% {
    width:
      100%;
  }

  92% {
    width:
      100%;
  }

  100% {
    width:
      0;
  }

}


@keyframes fleetConnectorThree {

  0%,
  57% {
    width:
      0;
  }

  79% {
    width:
      100%;
  }

  92% {
    width:
      100%;
  }

  100% {
    width:
      0;
  }

}


/* =========================================================
   Final statement
========================================================= */

.final-statement {
  min-height:
    clamp(
      620px,
      70svh,
      760px
    );

  padding:
    clamp(
      128px,
      13vw,
      216px
    )
    0;

  display:
    grid;

  place-items:
    center;

  box-sizing:
    border-box;

  background:
    #FFFFFF;
}


.final-statement-inner {
  width:
    100%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.final-statement-title {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;
}


.final-statement-line {
  display:
    block;

  white-space:
    nowrap;
}


/* =========================================================
   Closing
========================================================= */

.closing {
  padding:
    clamp(
      105px,
      10vw,
      155px
    )
    0;

  background:
    var(--light-hover);
}


.closing-inner {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    50px;
}


.closing h2 {
  margin:
    0;

  max-width:
    none;

  color:
    var(--light-text);

  font-size:
    clamp(
      30px,
      3.2vw,
      46px
    );

  line-height:
    1.02;

  letter-spacing:
    -.045em;

  font-weight:
    550;
}


.closing-line {
  display:
    block;

  white-space:
    nowrap;
}


/* =========================================================
   Responsive — 1100
========================================================= */

@media (max-width: 1100px) {

  .hero-shell {
    grid-template-columns:
      minmax(
        340px,
        .83fr
      )
      minmax(
        430px,
        1.17fr
      );

    gap:
      36px;
  }


  .device-grid {
    gap:
      70px;
  }


  .system-head {
    grid-template-columns:
      minmax(
        470px,
        1.1fr
      )
      minmax(
        300px,
        .9fr
      );

    column-gap:
      70px;
  }


  .reliability-card--offline {
    gap:
      70px;
  }


  .sync-status-grid {
    grid-template-columns:
      1fr;
  }


  .sync-status-card {
    min-height:
      84px;

    flex-direction:
      row;

    align-items:
      center;
  }

}


/* =========================================================
   Responsive — 900
========================================================= */

@media (max-width: 900px) {

  .hero {
    min-height:
      auto;
  }


  .hero-shell {
    min-height:
      auto;

    grid-template-columns:
      1fr;

    gap:
      58px;

    padding-top:
      104px;

    padding-bottom:
      96px;
  }


  .hero-copy {
    max-width:
      720px;
  }


  .hero-side {
    width:
      min(
        100%,
        760px
      );

    justify-self:
      center;
  }


  .device-grid,
  .system-head,
  .console-head,
  .focus-head,
  .reliability-card--offline {
    grid-template-columns:
      1fr;
  }


  .device-grid {
    gap:
      56px;
  }


  .device-image-wrap {
    min-height:
      500px;
  }


  .system-head,
  .console-head,
  .focus-head {
    gap:
      38px;
  }


  .system-head > p {
    width:
      min(
        100%,
        470px
      );

    margin:
      0;

    justify-self:
      start;
  }


  .console-head > p,
  .focus-head > p {
    margin:
      0;
  }


  .focus-cards {
    grid-template-columns:
      1fr;
  }


  .focus-card {
    min-height:
      210px;

    gap:
      52px;

    transform:
      none;
  }


  .console-image {
    width:
      96%;

    min-height:
      500px;
  }


  .reliability-card--offline {
    gap:
      54px;
  }


  .reuse-head {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      20px;
  }


  .reuse-head p {
    margin:
      0;
  }


  .fleet-flow {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      10px;
  }


  .fleet-connector {
    display:
      none;
  }


  .fleet-stage {
    transform:
      none;
  }


  .closing-inner {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

}


/* =========================================================
   System stack — 760
========================================================= */

@media (max-width: 760px) {

  .system-cards {
    grid-template-columns:
      1fr;

    align-items:
      stretch;
  }


  .system-card {
    min-height:
      210px;

    gap:
      52px;
  }


  .system-connector {
    width:
      2px;

    height:
      38px;

    justify-self:
      center;

    align-self:
      center;

    overflow:
      hidden;
  }


  .system-connector::before {
    left:
      50%;

    right:
      auto;

    top:
      0;

    bottom:
      0;

    border-top:
      0;

    border-left:
      2px
      dashed
      #D8D8D3;

    transform:
      translateX(
        -50%
      );
  }


  .system-connector > span {
    left:
      50%;

    top:
      0;

    width:
      0;

    height:
      0;

    border-top:
      0;

    border-left:
      2px
      dashed
      var(--redovar-terracotta);

    transform:
      translateX(
        -50%
      );

    will-change:
      height;
  }


  .system-connector--one > span {
    animation:
      systemConnectorOneVertical
      5.8s
      linear
      infinite;
  }


  .system-connector--two > span {
    animation:
      systemConnectorTwoVertical
      5.8s
      linear
      infinite;
  }


  @keyframes systemConnectorOneVertical {

    0%,
    8% {
      height:
        0;
    }

    34% {
      height:
        100%;
    }

    92% {
      height:
        100%;
    }

    100% {
      height:
        0;
    }

  }


  @keyframes systemConnectorTwoVertical {

    0%,
    40% {
      height:
        0;
    }

    68% {
      height:
        100%;
    }

    92% {
      height:
        100%;
    }

    100% {
      height:
        0;
    }

  }

}


/* =========================================================
   Responsive — 700
========================================================= */

@media (max-width: 700px) {

  h2 {
    font-size:
      clamp(
        34px,
        9.5vw,
        46px
      );
  }


  .hero h1 {
    font-size:
      clamp(
        50px,
        13.5vw,
        70px
      );
  }


  .hero-shell {
    gap:
      46px;
  }


  .statement-title {
    font-size:
      clamp(
        50px,
        13.2vw,
        74px
      );
  }


  .belief-toggle {
    width:
      52px;

    height:
      52px;

    margin-top:
      34px;
  }


  .belief-reveal p {
    font-size:
      18px !important;
  }


  .device-image-wrap {
    min-height:
      420px;
  }


  .system-head h2 {
    font-size:
      clamp(
        38px,
        9.5vw,
        54px
      );
  }


  .console-image {
    width:
      100%;

    min-height:
      400px;
  }


  .focus-head h2 {
    font-size:
      clamp(
        45px,
        12vw,
        62px
      );
  }


  .sync-status-grid {
    grid-template-columns:
      1fr;
  }


  .fleet-flow {
    grid-template-columns:
      1fr
      1fr;
  }


  .reuse-head h3 {
    white-space:
      normal;
  }

}


/* =========================================================
   Responsive — 520
========================================================= */

@media (max-width: 520px) {

  .hero-shell {
    padding-top:
      82px;

    padding-bottom:
      76px;
  }


  .hero h1 {
    font-size:
      clamp(
        46px,
        13vw,
        60px
      );
  }


  .hero-description {
    font-size:
      15px !important;
  }


  .hero-actions {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      15px;
  }


  .hero-link {
    width:
      max-content;
  }


  .belief-section,
  .final-statement {
    padding:
      110px
      0;
  }


  .statement-title {
    font-size:
      clamp(
        44px,
        12.6vw,
        58px
      );
  }


  .gradient-script {
    font-size:
      1.11em;
  }


  .device-image-wrap {
    min-height:
      350px;
  }


  .device-feature {
    min-height:
      76px;
  }


  .system-head h2 {
    font-size:
      clamp(
        34px,
        8.8vw,
        44px
      );
  }


  .system-title-line {
    white-space:
      nowrap;
  }


  .system-card,
  .focus-card {
    min-height:
      190px;

    padding:
      26px;
  }


  .system-card {
    gap:
      48px;
  }


  .system-card-icon {
    width:
      22px;

    height:
      22px;
  }


  .console-image {
    min-height:
      300px;
  }


  .reliability-card {
    padding:
      28px;
  }


  .reliability-card-copy h3,
  .reuse-head h3 {
    font-size:
      clamp(
        23px,
        6vw,
        26px
      );
  }


  .sync-status-card {
    min-height:
      76px;

    padding:
      18px;
  }


  .fleet-flow {
    grid-template-columns:
      1fr;
  }


  .fleet-stage {
    min-height:
      130px;
  }


  .final-statement-line {
    white-space:
      nowrap;
  }


  .closing h2 {
    font-size:
      clamp(
        30px,
        9vw,
        40px
      );
  }

}


/* =========================================================
   Reduced motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .motion-reveal {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }


  .device-image-wrap img {
    transform:
      none !important;
  }


  .gradient-script {
    background-position:
      50%
      50% !important;
  }


  .belief-toggle.is-prompting {
    animation:
      none;
  }


  .system-connector > span {
    animation:
      none;

    width:
      100%;
  }


  .focus-card,
  .fleet-stage {
    transform:
      none !important;

    transition:
      none;
  }


  .fleet-connector > span {
    animation:
      none;

    width:
      100%;
  }


  .console-image {
    transform:
      none !important;
  }


  .console-image img {
    transform:
      none !important;
  }

  .system-card {
  transform:
    none !important;
}



}


/* =========================================================
   Reduced motion — stacked connectors
========================================================= */

@media
  (prefers-reduced-motion: reduce)
  and
  (max-width: 760px) {

  .system-connector > span {
    width:
      0;

    height:
      100%;
  }

}