/* =========================================================
   SOFTWARE PAGE
========================================================= */


/* =========================================================
   BASE
========================================================= */

main {
  overflow:
    clip;
}

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

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


/* =========================================================
   HOMEPAGE TITLE SYSTEM
========================================================= */

main h2 {
  margin:
    0;

  color:
    var(--light-text);

  font-size:
    clamp(
      42px,
      4.7vw,
      68px
    );

  line-height:
    .96;

  letter-spacing:
    -.055em;

  font-weight:
    500;
}


/* =========================================================
   BUTTONS
========================================================= */

.software-button {
  min-height:
    44px;

  padding:
    0
    17px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    var(--radius);

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    600;

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

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

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

  color:
    #FFFFFF;
}

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

.software-button--outline {
  border:
    1px
    solid
    var(--redovar-blue);

  background:
    transparent;

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

.software-button--outline:hover,
.software-button--outline:focus-visible {
  border-color:
    var(--redovar-terracotta);

  background:
    transparent;

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


/* =========================================================
   HERO
========================================================= */

.software-hero {
  position:
    relative;

  min-height:
    112svh;

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

  overflow:
    hidden;

  background:
    #111111;

  color:
    #F5F5F3;

  isolation:
    isolate;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.software-hero::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    -3;

  pointer-events:
    none;

  background-image:
    url("../../assets/images/hero-software.PNG");

  background-size:
    cover;

  background-position:
    center
    58%;

  background-repeat:
    no-repeat;

  transform:
    scale(
      1.001
    );
}


/* =========================================================
   HERO OVERLAY
========================================================= */

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

  position:
    absolute;

  inset:
    0;

  z-index:
    -2;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      rgba(9, 9, 9, .84)
      0%,
      rgba(9, 9, 9, .70)
      28%,
      rgba(9, 9, 9, .40)
      50%,
      rgba(9, 9, 9, .15)
      72%,
      rgba(9, 9, 9, .08)
      100%
    ),
    linear-gradient(
      180deg,
      rgba(7, 7, 7, .22)
      0%,
      rgba(7, 7, 7, .06)
      55%,
      rgba(7, 7, 7, .20)
      100%
    );
}


/* =========================================================
   HERO INNER
========================================================= */

.software-hero-inner {
  min-height:
    calc(
      112svh
      -
      var(--header-h)
    );

  padding-top:
    clamp(
      54px,
      5vw,
      82px
    );

  padding-bottom:
    clamp(
      72px,
      8vw,
      116px
    );

  display:
    flex;

  align-items:
    flex-start;
}


/* =========================================================
   HERO COPY
========================================================= */

.software-hero-copy {
  width:
    min(
      100%,
      790px
    );

  padding-top:
    clamp(
      18px,
      2vw,
      32px
    );
}

.software-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;
}

.software-hero-copy > p {
  margin:
    29px
    0
    0;

  max-width:
    540px;

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

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

  line-height:
    1.66;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

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

  display:
    flex;

  align-items:
    center;

  gap:
    24px;

  flex-wrap:
    wrap;
}

.software-text-link {
  position:
    relative;

  padding:
    8px
    0;

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

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    550;
}

.software-text-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);
}

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


/* =========================================================
   LAPTOP OPENING SEQUENCE
========================================================= */

.software-product {
  position:
    relative;

  min-height:
    200svh;

  background:
    #FFFFFF;

  isolation:
    isolate;
}


/* =========================================================
   STICKY VIEWPORT
========================================================= */

.software-product-sticky {
  position:
    sticky;

  top:
    var(--header-h);

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

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

  background:
    #FFFFFF;
}


/* =========================================================
   LAPTOP SHELL
========================================================= */

.software-product-shell {
  width:
    100%;

  display:
    grid;

  place-items:
    center;
}


/* =========================================================
   LAPTOP STAGE
========================================================= */

.software-product-stage {
  position:
    relative;

  width:
    min(
      88vw,
      1180px
    );

  height:
    min(
      72svh,
      740px
    );

  display:
    grid;

  place-items:
    center;

  isolation:
    isolate;

  pointer-events:
    none;
}


/* =========================================================
   LAPTOP FRAMES
========================================================= */

.software-product-frame {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  margin:
    auto;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  opacity:
    0;

  user-select:
    none;

  -webkit-user-drag:
    none;

  pointer-events:
    none;

  backface-visibility:
    hidden;

  transform:
    none;

  transform-origin:
    center;

  will-change:
    opacity;
}


/* =========================================================
   FRAME 01
========================================================= */

.software-product-frame--1 {
  opacity:
    1;
}


/* =========================================================
   FRAME 02
========================================================= */

.software-product-frame--2 {
  opacity:
    0;
}


/* =========================================================
   FRAME 03
========================================================= */

.software-product-frame--3 {
  opacity:
    0;
}


/* =========================================================
   INTRO
========================================================= */

.software-intro {
  position:
    relative;

  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

  overflow:
    hidden;

  background:
    var(--light-hover);

  --intro-gradient-x:
    24%;

  --intro-gradient-y:
    40%;

  --intro-gradient-x-alt:
    76%;

  --intro-gradient-y-alt:
    60%;

  --intro-left-x:
    -10px;

  --intro-right-x:
    10px;

  --intro-connector-width:
    66px;
}


/* =========================================================
   INTRO GRID
========================================================= */

.software-intro-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      360px,
      .78fr
    )
    minmax(
      520px,
      1.22fr
    );

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

  align-items:
    start;
}


/* =========================================================
   INTRO HEADING
========================================================= */

.software-section-heading {
  max-width:
    650px;
}


/* =========================================================
   INTRO CARDS
========================================================= */

.software-intro-cards {
  position:
    relative;

  display:
    grid;

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

  column-gap:
    46px;

  align-items:
    stretch;
}


/* =========================================================
   INTRO CARD
========================================================= */

.software-intro-card {
  position:
    relative;

  min-height:
    220px;

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

  display:
    flex;

  align-items:
    flex-end;

  overflow:
    hidden;

  border-radius:
    var(--radius);

  background:
    radial-gradient(
      circle
      at
      var(--intro-gradient-x)
      var(--intro-gradient-y),
      rgba(
        11,
        54,
        154,
        .09
      )
      0%,
      rgba(
        11,
        54,
        154,
        0
      )
      44%
    ),
    radial-gradient(
      circle
      at
      var(--intro-gradient-x-alt)
      var(--intro-gradient-y-alt),
      rgba(
        196,
        74,
        23,
        .07
      )
      0%,
      rgba(
        196,
        74,
        23,
        0
      )
      46%
    ),
    #FFFFFF;

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

  will-change:
    transform;
}


/* =========================================================
   SECOND INTRO CARD
========================================================= */

.software-intro-card:last-child {
  background:
    radial-gradient(
      circle
      at
      var(--intro-gradient-x)
      var(--intro-gradient-y),
      rgba(
        196,
        74,
        23,
        .07
      )
      0%,
      rgba(
        196,
        74,
        23,
        0
      )
      44%
    ),
    radial-gradient(
      circle
      at
      var(--intro-gradient-x-alt)
      var(--intro-gradient-y-alt),
      rgba(
        11,
        54,
        154,
        .085
      )
      0%,
      rgba(
        11,
        54,
        154,
        0
      )
      46%
    ),
    #FFFFFF;
}


/* =========================================================
   INTRO MEET / SPREAD
========================================================= */

.software-intro-card:first-child {
  transform:
    translate3d(
      var(--intro-left-x),
      0,
      0
    );
}

.software-intro-card:last-child {
  transform:
    translate3d(
      var(--intro-right-x),
      0,
      0
    );
}


/* =========================================================
   INTRO HOVER
========================================================= */

.software-intro-card:first-child:hover {
  transform:
    translate3d(
      var(--intro-left-x),
      -3px,
      0
    );
}

.software-intro-card:last-child:hover {
  transform:
    translate3d(
      var(--intro-right-x),
      -3px,
      0
    );
}


/* =========================================================
   INTRO COPY
========================================================= */

.software-intro-card p {
  position:
    relative;

  z-index:
    1;

  margin:
    0;

  max-width:
    390px;

  color:
    var(--light-secondary);

  font-size:
    clamp(
      14px,
      1.12vw,
      16px
    );

  line-height:
    1.72;

  letter-spacing:
    -.012em;

  font-weight:
    450;
}


/* =========================================================
   INTRO CONNECTOR
========================================================= */

.software-intro-connector {
  position:
    absolute;

  top:
    50%;

  left:
    50%;

  z-index:
    2;

  width:
    var(--intro-connector-width);

  height:
    12px;

  display:
    flex;

  flex-direction:
    row;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    0;

  pointer-events:
    none;

  transform:
    translate(
      -50%,
      -50%
    );

  transform-origin:
    center;
}


/* =========================================================
   INTRO DASH
========================================================= */

.software-intro-loader-dash {
  width:
    4px;

  height:
    2px;

  flex:
    0
    0
    4px;

  display:
    block;

  border-radius:
    999px;

  background:
    #CDCDC7;

  opacity:
    .82;

  animation:
    softwareIntroDashFlow
    1.65s
    ease-in-out
    infinite;

  will-change:
    background-color,
    opacity,
    transform;
}


/* =========================================================
   INTRO DASH STAGGER
========================================================= */

.software-intro-loader-dash:nth-child(1) {
  animation-delay:
    0s;
}

.software-intro-loader-dash:nth-child(2) {
  animation-delay:
    .09s;
}

.software-intro-loader-dash:nth-child(3) {
  animation-delay:
    .18s;
}

.software-intro-loader-dash:nth-child(4) {
  animation-delay:
    .27s;
}

.software-intro-loader-dash:nth-child(5) {
  animation-delay:
    .36s;
}

.software-intro-loader-dash:nth-child(6) {
  animation-delay:
    .45s;
}

.software-intro-loader-dash:nth-child(7) {
  animation-delay:
    .54s;
}

.software-intro-loader-dash:nth-child(8) {
  animation-delay:
    .63s;
}


/* =========================================================
   INTRO HORIZONTAL FLOW
========================================================= */

@keyframes softwareIntroDashFlow {

  0%,
  16%,
  100% {
    background:
      #CDCDC7;

    opacity:
      .82;

    transform:
      scaleX(
        1
      );
  }

  28%,
  48% {
    background:
      var(
        --redovar-terracotta,
        #C44A17
      );

    opacity:
      1;

    transform:
      scaleX(
        1.2
      );
  }

  62% {
    background:
      #CDCDC7;

    opacity:
      .82;

    transform:
      scaleX(
        1
      );
  }

}


/* =========================================================
   FEATURES
========================================================= */

.software-features {
  position:
    relative;

  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

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

.software-features-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      340px,
      .72fr
    )
    minmax(
      540px,
      1.28fr
    );

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

  align-items:
    start;
}


/* =========================================================
   PINNED FEATURE HEADING
========================================================= */

.software-features-head {
  position:
    sticky;

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

  max-width:
    560px;

  align-self:
    start;
}

.software-features-head p {
  margin:
    22px
    0
    0;

  max-width:
    390px;

  color:
    var(--light-secondary);

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

  line-height:
    1.68;
}


/* =========================================================
   FEATURE LIST
========================================================= */

.software-feature-list {
  display:
    grid;

  gap:
    12px;
}


/* =========================================================
   FEATURE WHITE CARD
========================================================= */

.software-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;
}

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

  background:
    #FDFDFC;
}


/* =========================================================
   FEATURE ICON
========================================================= */

.software-feature-icon {
  width:
    22px;

  height:
    22px;

  display:
    block;

  object-fit:
    contain;

  opacity:
    .75;

  filter:
    brightness(
      0
    );
}

.software-feature-icon-emergency {
  filter:
    invert(21%)
    sepia(92%)
    saturate(2890%)
    hue-rotate(357deg)
    brightness(87%)
    contrast(89%);

  opacity:
    1;
}


/* =========================================================
   FEATURE COPY
========================================================= */

.software-feature h3 {
  margin:
    0;

  color:
    var(--light-text);

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

  line-height:
    1.2;

  letter-spacing:
    -.028em;

  font-weight:
    500;
}

.software-feature p {
  margin:
    8px
    0
    0;

  max-width:
    520px;

  color:
    var(--light-secondary);

  font-size:
    12px;

  line-height:
    1.58;
}


/* =========================================================
   WEB + DEVICE
========================================================= */

.software-pair {
  position:
    relative;

  padding:
    clamp(
      132px,
      12vw,
      202px
    )
    0;

  overflow:
    hidden;

  background:
    #111111;

  color:
    #F5F5F3;

  /*
    Cards begin only slightly separated.
    Scroll down:
    -18px / +18px → 0px / 0px.

    Scroll up:
    0px / 0px → -18px / +18px.
  */

  --pair-left-x:
    -18px;

  --pair-right-x:
    18px;

  --pair-gradient-position:
    50%;
}

.software-pair-head {
  max-width:
    840px;
}

.software-pair-head h2 {
  color:
    #F5F5F3;
}


/* =========================================================
   PAIR GRID
========================================================= */

.software-pair-grid {
  position:
    relative;

  margin-top:
    clamp(
      70px,
      7vw,
      104px
    );

  display:
    grid;

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

  gap:
    10px;

  overflow:
    visible;
}


/* =========================================================
   PAIR CARDS

   IMPORTANT:
   Only horizontal movement.

   No vertical rise.
   No one-time reveal.
   JavaScript updates these values on every scroll frame.
========================================================= */

.software-pair-item {
  min-height:
    300px;

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

  display:
    flex;

  flex-direction:
    column;

  border-radius:
    var(--radius);

  overflow:
    hidden;

  backface-visibility:
    hidden;

  transform-origin:
    center;

  will-change:
    transform;
}


/* =========================================================
   LEADERSHIP
========================================================= */

.software-pair-item--web {
  background:
    #191919;

  color:
    #F5F5F3;

  transform:
    translate3d(
      var(--pair-left-x),
      0,
      0
    );
}


/* =========================================================
   STAFF
========================================================= */

.software-pair-item--device {
  background:
    var(--redovar-blue);

  color:
    #FFFFFF;

  transform:
    translate3d(
      var(--pair-right-x),
      0,
      0
    );
}

.software-pair-item > span {
  color:
    rgba(
      245,
      245,
      243,
      .46
    );

  font-size:
    10px;

  line-height:
    1;
}

.software-pair-item--device > span {
  color:
    rgba(
      255,
      255,
      255,
      .58
    );
}


/* =========================================================
   PAIR COPY
========================================================= */

.software-pair-copy {
  margin-top:
    auto;
}

.software-pair-copy h3 {
  margin:
    0;

  color:
    inherit;

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

  line-height:
    .98;

  letter-spacing:
    -.047em;

  font-weight:
    500;
}

.software-pair-copy p {
  margin:
    18px
    0
    0;

  max-width:
    470px;

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

  font-size:
    13px;

  line-height:
    1.62;
}

.software-pair-item--device
.software-pair-copy p {
  color:
    rgba(
      255,
      255,
      255,
      .69
    );
}


/* =========================================================
   PAIR STATEMENT
========================================================= */

.software-pair-line {
  margin:
    clamp(
      66px,
      7vw,
      96px
    )
    auto
    0;

  max-width:
    960px;

  text-align:
    center;

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

  line-height:
    1.12;

  letter-spacing:
    -.043em;

  font-weight:
    500;

  color:
    #FFFFFF;

  background:
    linear-gradient(
      90deg,
      var(--redovar-blue)
      0%,
      #FFFFFF
      50%,
      var(--redovar-terracotta)
      100%
    );

  background-size:
    220%
    100%;

  background-position:
    var(--pair-gradient-position)
    50%;

  background-repeat:
    no-repeat;

  will-change:
    background-position;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  -webkit-text-fill-color:
    transparent;
}


/* =========================================================
   CHANGES
========================================================= */

.software-changes {
  position:
    relative;

  padding:
    clamp(
      124px,
      11vw,
      188px
    )
    0;

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


/* =========================================================
   CHANGES GRID
========================================================= */

.software-changes-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      340px,
      .72fr
    )
    minmax(
      520px,
      1.28fr
    );

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

  align-items:
    start;
}


/* =========================================================
   CHANGES PINNED HEADING
========================================================= */

.software-changes-head {
  position:
    sticky;

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

  align-self:
    start;

  max-width:
    580px;
}


/* =========================================================
   CHANGES STACK
========================================================= */

.software-changes-cards {
  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    0;
}


/* =========================================================
   CHANGES CARD
========================================================= */

.software-changes-card {
  min-height:
    230px;

  padding:
    clamp(
      30px,
      3.2vw,
      40px
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  align-items:
    flex-start;

  gap:
    56px;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;

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

.software-changes-card:hover {
  transform:
    translateY(
      -3px
    );

  background:
    #FDFDFC;
}


/* =========================================================
   CHANGES ICON
========================================================= */

.software-changes-icon {
  width:
    46px;

  height:
    46px;

  flex:
    0
    0
    46px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;
}

.software-changes-icon img {
  width:
    19px;

  height:
    19px;

  display:
    block;

  object-fit:
    contain;

  opacity:
    .72;
}

.software-changes-icon--blue {
  background:
    rgba(
      11,
      54,
      154,
      .08
    );
}

.software-changes-icon--terracotta {
  background:
    rgba(
      196,
      74,
      23,
      .09
    );
}


/* =========================================================
   CHANGES COPY
========================================================= */

.software-changes-card p {
  margin:
    0;

  max-width:
    470px;

  color:
    var(--light-secondary);

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

  line-height:
    1.7;

  letter-spacing:
    -.012em;

  font-weight:
    450;
}

.software-changes-copy span {
  display:
    block;
}

.software-changes-copy span + span {
  margin-top:
    2px;
}

.software-changes-card--strong p {
  max-width:
    430px;

  color:
    var(--light-text);

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

  line-height:
    1.62;

  letter-spacing:
    -.016em;

  font-weight:
    500;
}


/* =========================================================
   CHANGES BROKEN LOADER
========================================================= */

.software-changes-connector {
  width:
    14px;

  height:
    62px;

  margin:
    0
    auto;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    3px;

  pointer-events:
    none;

  overflow:
    visible;
}


/* =========================================================
   CHANGES DASH
========================================================= */

.software-changes-loader-dash {
  width:
    3px;

  height:
    5px;

  flex:
    0
    0
    5px;

  display:
    block;

  border-radius:
    999px;

  background:
    #CDCDC7;

  opacity:
    .82;

  animation:
    softwareChangesDashFlow
    1.65s
    ease-in-out
    infinite;

  will-change:
    background-color,
    opacity,
    transform;
}


/* =========================================================
   CHANGES DASH STAGGER
========================================================= */

.software-changes-loader-dash:nth-child(1) {
  animation-delay:
    0s;
}

.software-changes-loader-dash:nth-child(2) {
  animation-delay:
    .09s;
}

.software-changes-loader-dash:nth-child(3) {
  animation-delay:
    .18s;
}

.software-changes-loader-dash:nth-child(4) {
  animation-delay:
    .27s;
}

.software-changes-loader-dash:nth-child(5) {
  animation-delay:
    .36s;
}

.software-changes-loader-dash:nth-child(6) {
  animation-delay:
    .45s;
}

.software-changes-loader-dash:nth-child(7) {
  animation-delay:
    .54s;
}

.software-changes-loader-dash:nth-child(8) {
  animation-delay:
    .63s;
}


/* =========================================================
   CHANGES FLOW
========================================================= */

@keyframes softwareChangesDashFlow {

  0%,
  16%,
  100% {
    background:
      #CDCDC7;

    opacity:
      .82;

    transform:
      scaleY(
        1
      );
  }

  28%,
  48% {
    background:
      var(
        --redovar-terracotta,
        #C44A17
      );

    opacity:
      1;

    transform:
      scaleY(
        1.12
      );
  }

  62% {
    background:
      #CDCDC7;

    opacity:
      .82;

    transform:
      scaleY(
        1
      );
  }

}


/* =========================================================
   CLOSING PRODUCT MOMENT
========================================================= */

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

  background:
    #FFFFFF;
}

.software-closing-inner {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;
}

.software-closing h2 {
  max-width:
    1000px;

  font-size:
    clamp(
      54px,
      7.5vw,
      106px
    );

  line-height:
    .9;

  letter-spacing:
    -.062em;

  font-weight:
    500;
}

.software-closing-actions {
  margin-top:
    46px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


/* =========================================================
   FAQ
========================================================= */

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

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

.software-faq-grid {
  display:
    grid;

  grid-template-columns:
    minmax(
      300px,
      .66fr
    )
    minmax(
      560px,
      1.34fr
    );

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

  align-items:
    start;
}

.software-faq-head {
  position:
    sticky;

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

.software-faq-head h2 {
  max-width:
    480px;
}


/* =========================================================
   FAQ LIST
========================================================= */

.software-faq-list {
  display:
    grid;

  gap:
    10px;
}

.software-faq-list details {
  overflow:
    hidden;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;

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

.software-faq-list details:hover {
  transform:
    translateY(
      -2px
    );
}


/* =========================================================
   FAQ SUMMARY
========================================================= */

.software-faq-list summary {
  min-height:
    92px;

  padding:
    25px
    28px;

  display:
    grid;

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

  gap:
    28px;

  align-items:
    center;

  list-style:
    none;

  cursor:
    pointer;
}

.software-faq-list summary::-webkit-details-marker {
  display:
    none;
}

.software-faq-list summary > span:first-child {
  color:
    var(--light-text);

  font-size:
    15px;

  line-height:
    1.45;

  font-weight:
    550;
}


/* =========================================================
   FAQ SYMBOL
========================================================= */

.software-faq-symbol {
  position:
    relative;

  width:
    38px;

  height:
    38px;

  display:
    block;

  justify-self:
    end;

  border-radius:
    50%;

  background:
    var(--light-surface);

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

.software-faq-list details:hover
.software-faq-symbol {
  background:
    #ECEEF3;
}

.software-faq-symbol::before,
.software-faq-symbol::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    11px;

  height:
    1px;

  background:
    var(--light-secondary);

  transform:
    translate(
      -50%,
      -50%
    );
}

.software-faq-symbol::after {
  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      90deg
    );

  transition:
    opacity
    150ms
    ease,
    transform
    180ms
    ease;
}

.software-faq-list
details[open]
.software-faq-symbol {
  transform:
    rotate(
      180deg
    );
}

.software-faq-list
details[open]
.software-faq-symbol::after {
  opacity:
    0;

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(
      0deg
    );
}


/* =========================================================
   FAQ ANSWER
========================================================= */

.software-faq-answer {
  padding:
    0
    84px
    30px
    28px;
}

.software-faq-answer p {
  margin:
    0;

  max-width:
    620px;

  color:
    var(--light-secondary);

  font-size:
    13px;

  line-height:
    1.68;
}


/* =========================================================
   QUIET REVEALS
========================================================= */

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

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


/* =========================================================
   RESPONSIVE — 1100
========================================================= */

@media (max-width: 1100px) {

  .software-intro-grid,
  .software-features-grid,
  .software-changes-grid {
    gap:
      70px;
  }

}


/* =========================================================
   RESPONSIVE — 900
========================================================= */

@media (max-width: 900px) {


  /* =======================================================
     HERO
  ======================================================== */

  .software-hero {
    min-height:
      760px;
  }

  .software-hero-inner {
    min-height:
      760px;

    padding-top:
      72px;

    padding-bottom:
      86px;
  }

  .software-hero-copy {
    width:
      min(
        100%,
        610px
      );

    padding-top:
      0;
  }

  .software-hero::before {
    background-position:
      62%
      28%;
  }

  .software-hero::after {
    background:
      linear-gradient(
        90deg,
        rgba(8, 8, 8, .83)
        0%,
        rgba(8, 8, 8, .65)
        48%,
        rgba(8, 8, 8, .25)
        100%
      ),
      linear-gradient(
        180deg,
        rgba(8, 8, 8, .18),
        rgba(8, 8, 8, .18)
      );
  }


  /* =======================================================
     LAPTOP
  ======================================================== */

  .software-product {
    min-height:
      185svh;
  }

  .software-product-stage {
    width:
      min(
        92vw,
        1040px
      );

    height:
      min(
        68svh,
        660px
      );
  }


  /* =======================================================
     STACKED MAIN GRIDS
  ======================================================== */

  .software-intro-grid,
  .software-features-grid,
  .software-changes-grid,
  .software-faq-grid {
    grid-template-columns:
      1fr;

    gap:
      56px;
  }


  /* =======================================================
     INTRO
  ======================================================== */

  .software-intro-cards {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    column-gap:
      46px;
  }


  /* =======================================================
     STICKY SECTIONS RETURN TO NORMAL FLOW
  ======================================================== */

  .software-features-head,
  .software-changes-head,
  .software-faq-head {
    position:
      static;

    top:
      auto;
  }


  /* =======================================================
     PAIR
  ======================================================== */

  .software-pair {
    --pair-left-x:
      0px !important;

    --pair-right-x:
      0px !important;
  }

  .software-pair-item--web,
  .software-pair-item--device {
    transform:
      none !important;
  }

}


/* =========================================================
   RESPONSIVE — 700
========================================================= */

@media (max-width: 700px) {


  /* =======================================================
     HOMEPAGE MOBILE H2 SCALE
  ======================================================== */

  main h2 {
    font-size:
      clamp(
        38px,
        10.5vw,
        54px
      );
  }


  /* =======================================================
     HERO
  ======================================================== */

  .software-hero {
    min-height:
      720px;
  }

  .software-hero-inner {
    min-height:
      720px;

    padding-top:
      62px;

    padding-bottom:
      74px;
  }

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

  .software-hero-copy > p {
    max-width:
      390px;
  }

  .software-hero::before {
    background-position:
      68%
      28%;
  }


  /* =======================================================
     LAPTOP
  ======================================================== */

  .software-product {
    min-height:
      170svh;
  }

  .software-product-stage {
    width:
      96vw;

    height:
      min(
        62svh,
        560px
      );
  }


  /* =======================================================
     INTRO
  ======================================================== */

  .software-intro {
    --intro-left-x:
      0px !important;

    --intro-right-x:
      0px !important;

    --intro-connector-width:
      54px !important;
  }

  .software-intro-cards {
    grid-template-columns:
      1fr;

    column-gap:
      0;

    row-gap:
      10px;
  }

  .software-intro-card {
    min-height:
      190px;

    transform:
      none !important;
  }

  .software-intro-card:first-child:hover,
  .software-intro-card:last-child:hover {
    transform:
      translateY(
        -3px
      ) !important;
  }

  .software-intro-connector {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    width:
      54px;

    height:
      12px;

    margin:
      0
      auto;

    transform:
      none;
  }


  /* =======================================================
     FEATURES
  ======================================================== */

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

    padding:
      22px;

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

    gap:
      16px;
  }


  /* =======================================================
     PAIR
  ======================================================== */

  .software-pair-grid {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }

  .software-pair-item {
    min-height:
      250px;
  }

  .software-pair-line {
    max-width:
      620px;

    font-size:
      clamp(
        28px,
        7.2vw,
        38px
      );
  }


  /* =======================================================
     CHANGES
  ======================================================== */

  .software-changes-card {
    min-height:
      205px;
  }


  /* =======================================================
     CLOSING
  ======================================================== */

  .software-closing h2 {
    font-size:
      clamp(
        54px,
        13vw,
        78px
      );
  }

  .software-closing-actions {
    width:
      min(
        100%,
        390px
      );

    flex-direction:
      column;
  }

  .software-closing-actions
  .software-button {
    width:
      100%;
  }

}


/* =========================================================
   RESPONSIVE — 520
========================================================= */

@media (max-width: 520px) {


  /* =======================================================
     HERO
  ======================================================== */

  .software-hero {
    min-height:
      700px;
  }

  .software-hero-inner {
    min-height:
      700px;

    padding-top:
      48px;
  }

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

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

    flex-direction:
      column;

    gap:
      14px;
  }

  .software-hero::before {
    background-position:
      72%
      28%;
  }


  /* =======================================================
     LAPTOP
  ======================================================== */

  .software-product {
    min-height:
      160svh;
  }

  .software-product-stage {
    width:
      98vw;

    height:
      min(
        57svh,
        460px
      );
  }


  /* =======================================================
     INTRO
  ======================================================== */

  .software-intro {
    --intro-connector-width:
      48px !important;
  }

  .software-intro-card {
    min-height:
      170px;

    padding:
      25px;
  }

  .software-intro-card p {
    font-size:
      14px;

    line-height:
      1.68;
  }

  .software-intro-connector {
    width:
      48px;
  }


  /* =======================================================
     FEATURES
  ======================================================== */

  .software-feature-list {
    gap:
      9px;
  }

  .software-feature {
    min-height:
      108px;

    padding:
      19px;
  }

  .software-feature h3 {
    font-size:
      16px;
  }

  .software-feature p {
    font-size:
      11px;
  }


  /* =======================================================
     PAIR
  ======================================================== */

  .software-pair-item {
    min-height:
      225px;

    padding:
      26px;
  }

  .software-pair-copy h3 {
    font-size:
      28px;
  }

  .software-pair-line {
    margin-top:
      56px;

    font-size:
      28px;
  }


  /* =======================================================
     CHANGES
  ======================================================== */

  .software-changes-card {
    min-height:
      180px;

    padding:
      26px;

    gap:
      44px;
  }

  .software-changes-card p {
    font-size:
      15px;

    line-height:
      1.68;
  }

  .software-changes-card--strong p {
    font-size:
      16px;
  }

  .software-changes-icon {
    width:
      42px;

    height:
      42px;

    flex-basis:
      42px;
  }

  .software-changes-icon img {
    width:
      18px;

    height:
      18px;
  }

  .software-changes-connector {
    height:
      48px;
  }


  /* =======================================================
     CLOSING
  ======================================================== */

  .software-closing h2 {
    font-size:
      clamp(
        52px,
        14vw,
        68px
      );
  }


  /* =======================================================
     FAQ
  ======================================================== */

  .software-faq-list {
    gap:
      8px;
  }

  .software-faq-list summary {
    min-height:
      82px;

    padding:
      22px;
  }

  .software-faq-answer {
    padding:
      0
      68px
      25px
      22px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .software-product {
    min-height:
      auto;

    padding:
      clamp(
        72px,
        7vw,
        108px
      )
      0;
  }

  .software-product-sticky {
    position:
      relative;

    top:
      auto;

    min-height:
      auto;
  }

  .software-product-stage {
    height:
      min(
        72svh,
        740px
      );
  }

  .software-product-frame--1,
  .software-product-frame--2 {
    opacity:
      0 !important;
  }

  .software-product-frame--3 {
    opacity:
      1 !important;
  }


  /* =======================================================
     INTRO
  ======================================================== */

  .software-intro {
    --intro-left-x:
      0px !important;

    --intro-right-x:
      0px !important;

    --intro-connector-width:
      46px !important;
  }

  .software-intro-card {
    transform:
      none !important;

    transition:
      none;
  }

  .software-intro-loader-dash {
    animation:
      none !important;

    background:
      var(
        --redovar-terracotta,
        #C44A17
      );

    opacity:
      1;

    transform:
      none;
  }


  /* =======================================================
     PAIR
  ======================================================== */

  .software-pair {
    --pair-left-x:
      0px !important;

    --pair-right-x:
      0px !important;

    --pair-gradient-position:
      50% !important;
  }

  .software-pair-item {
    transform:
      none !important;
  }


  /* =======================================================
     CHANGES
  ======================================================== */

  .software-changes-loader-dash {
    animation:
      none !important;

    background:
      var(
        --redovar-terracotta,
        #C44A17
      );

    opacity:
      1;

    transform:
      none;
  }


  /* =======================================================
     REVEALS / HOVERS
  ======================================================== */

  .software-reveal {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }

  .software-feature,
  .software-changes-card,
  .software-faq-list details {
    transition:
      none;
  }

}