/* =========================================================
  HARDWARE PAGE
========================================================= */

main {
  overflow: clip;
}

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

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


/* =========================================================
  INDEX-MATCHED SECTION TITLES
========================================================= */

main h2 {
  margin:
    0;

  color:
    var(--light-text);

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

  line-height:
    .96;

  letter-spacing:
    -.055em;

  font-weight:
    500;
}


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

.hardware-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,
    transform
    150ms
    ease;
}

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

.hardware-button--terracotta {
  background:
    var(
      --redovar-terracotta,
      #C44A17
    );

  color:
    #FFFFFF;
}

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

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

  background:
    transparent;

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

.hardware-button--outline:hover,
.hardware-button--outline:focus-visible {
  background:
    transparent;

  color:
    var(--redovar-terracotta);

  border:
    1px
    solid
    var(--redovar-terracotta);
}


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

.hardware-hero {
  position:
    relative;

  min-height:
    112svh;

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

  overflow:
    hidden;

  background:
    #111111;

  color:
    #F5F5F3;

  isolation:
    isolate;
}


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

.hardware-hero-media {
  position:
    absolute;

  inset:
    0;

  z-index:
    -3;

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

  background-size:
    cover;

  background-position:
    center
    58%;

  background-repeat:
    no-repeat;

  transform:
    scale(
      1.001
    );
}


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

.hardware-hero-overlay {
  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
========================================================= */

.hardware-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
========================================================= */

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

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


/* EXACTLY THE INDEX HERO SCALE */

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

.hardware-hero h1 span {
  display:
    block;
}

.hardware-hero-copy > p {
  margin:
    24px
    0
    0;

  max-width:
    500px;

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

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

  line-height:
    1.58;
}


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

.hardware-hero-actions {
  margin-top:
    28px;

  display:
    flex;

  align-items:
    center;

  gap:
    24px;
}

.hardware-text-link {
  position:
    relative;

  padding:
    8px
    0;

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

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    550;
}

.hardware-text-link::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    2px;

  width:
    100%;

  height:
    1px;

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

  transform:
    scaleX(
      .3
    );

  transform-origin:
    left
    center;

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

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


/* =========================================================
  ESSENTIALS
========================================================= */

.hardware-essentials {
  position:
    relative;

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

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


/* =========================================================
  ESSENTIALS GRID
========================================================= */

.hardware-essentials-grid {
  display:
    grid;

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

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

  align-items:
    start;
}


/* =========================================================
  STICKY LEFT SIDE
========================================================= */

.hardware-essentials-sticky {
  position:
    sticky;

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

  align-self:
    start;
}

.hardware-section-copy {
  max-width:
    580px;
}

.hardware-section-copy p {
  margin:
    22px
    0
    0;

  max-width:
    490px;

  color:
    var(--light-secondary);

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

  line-height:
    1.68;
}


/* =========================================================
  SCROLLING SPECIFICATIONS
========================================================= */

.hardware-specs {
  display:
    grid;

  grid-template-columns:
    1fr;

  gap:
    12px;
}

.hardware-spec {
  min-height:
    clamp(
      128px,
      11vw,
      158px
    );

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

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    42px;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;

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

.hardware-spec:hover {
  transform:
    translateY(
      -3px
    );

  background:
    #FDFDFC;
}

.hardware-spec span {
  color:
    var(--light-soft);

  font-size:
    10px;

  line-height:
    1;

  letter-spacing:
    .01em;
}

.hardware-spec strong {
  max-width:
    460px;

  color:
    var(--light-text);

  font-size:
    clamp(
      18px,
      1.7vw,
      23px
    );

  line-height:
    1.18;

  letter-spacing:
    -.03em;

  font-weight:
    500;
}


/* =========================================================
  HARDWARE STORY
========================================================= */

.hardware-story {
  position:
    relative;

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

  overflow:
    hidden;

  background:
    #FFFFFF;
}


/* =========================================================
  STORY GRID
========================================================= */

.hardware-story-grid {
  display:
    grid;

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

  gap:
    clamp(
      76px,
      9vw,
      150px
    );

  align-items:
    center;
}


/* =========================================================
  STORY LIST
========================================================= */

.hardware-story-list {
  display:
    grid;

  align-self:
    center;
}


/* =========================================================
  STORY ITEM
========================================================= */

.hardware-story-item {
  position:
    relative;

  min-height:
    112px;

  padding:
    0
    0
    0
    38px;

  display:
    flex;

  align-items:
    center;

  border:
    0;

  background:
    transparent;

  color:
    #A4A4A0;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    color
    220ms
    ease;
}

.hardware-story-item:hover,
.hardware-story-item:focus-visible {
  color:
    #696965;
}

.hardware-story-item.is-complete {
  color:
    #747470;
}

.hardware-story-item.is-active {
  color:
    var(--light-text);
}

.hardware-story-item strong {
  font-size:
    clamp(
      27px,
      3vw,
      42px
    );

  line-height:
    1;

  letter-spacing:
    -.046em;

  font-weight:
    500;
}


/* =========================================================
  STORY VERTICAL STATUS RAIL
========================================================= */

.hardware-story-rail {
  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    0;

  width:
    4px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    space-around;

  pointer-events:
    none;
}

.hardware-story-rail
.status-dash {
  width:
    3px;

  height:
    7px;

  flex:
    0
    0
    7px;

  display:
    block;

  border-radius:
    999px;

  background:
    #D3D3CE;

  opacity:
    .9;

  transition:
    background-color
    110ms
    linear,
    opacity
    110ms
    linear;
}

.hardware-story-rail
.status-dash.is-on {
  background:
    var(
      --redovar-terracotta,
      #C44A17
    );

  opacity:
    1;
}


/* =========================================================
  STORY IMAGE AREA
========================================================= */

.hardware-story-image {
  position:
    relative;

  width:
    100%;

  min-height:
    clamp(
      520px,
      52vw,
      760px
    );

  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;
}


/* =========================================================
  STORY IMAGE FRAME
========================================================= */

.hardware-story-image-frame {
  position:
    absolute;

  inset:
    0;

  width:
    min(
      100%,
      850px
    );

  height:
    100%;

  max-height:
    760px;

  margin:
    auto;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;

  transform:
    translate3d(
      0,
      10px,
      0
    )
    scale(
      .992
    );

  transform-origin:
    center;

  transition:
    opacity
    520ms
    ease,
    visibility
    520ms
    ease,
    transform
    720ms
    var(--ease);

  will-change:
    opacity,
    transform;
}


/* =========================================================
  ACTIVE STORY IMAGE
========================================================= */

.hardware-story-image-frame.is-active {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translate3d(
      0,
      0,
      0
    )
    scale(
      1
    );

  z-index:
    2;
}


/* =========================================================
  PREVIOUS IMAGES
========================================================= */

.hardware-story-image-frame:not(.is-active) {
  z-index:
    1;
}


/* =========================================================
  IDENTITY
========================================================= */

.hardware-identity {
  position:
    relative;

  padding:
    clamp(
      124px,
      12vw,
      190px
    )
    0;

  overflow:
    hidden;

  background:
    #111111;

  color:
    #F5F5F3;
}

.hardware-identity h2 {
  color:
    #F5F5F3;
}


/* =========================================================
  IDENTITY TOP
========================================================= */

.hardware-identity-top {
  display:
    grid;

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

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

  align-items:
    end;
}

.hardware-identity-copy {
  max-width:
    720px;
}

.hardware-identity-copy h2 {
  max-width:
    720px;
}

.hardware-identity-copy p {
  margin:
    25px
    0
    0;

  max-width:
    520px;

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

  font-size:
    15px;

  line-height:
    1.68;
}


/* =========================================================
  IDENTITY LOGO
========================================================= */

.hardware-identity-mark {
  min-height:
    190px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  transform:
    translate3d(
      var(--hardware-identity-mark-x, 26px),
      0,
      0
    );

  will-change:
    transform;
}

@media (prefers-reduced-motion: reduce) {
  .hardware-identity-mark {
    transform: none;
  }
}

.hardware-identity-mark img {
  width:
    min(
      100%,
      400px
    );

  height:
    auto;

  display:
    block;

  object-fit:
    contain;

  object-position:
    left
    center;
}


/* =========================================================
  IDENTITY STATUS AREA
========================================================= */

.hardware-identity-rail {
  margin-top:
    clamp(
      88px,
      9vw,
      140px
    );
}

.hardware-identity-items {
  display:
    grid;

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

  gap:
    clamp(
      14px,
      2vw,
      30px
    );
}


/* =========================================================
  IDENTITY ITEM
========================================================= */

.hardware-identity-item {
  min-width:
    0;

  padding:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    inherit;

  text-align:
    center;

  cursor:
    pointer;
}


/* =========================================================
  HORIZONTAL BROKEN STATUS TRACK
========================================================= */

.hardware-identity-track {
  width:
    100%;

  height:
    5px;

  margin-bottom:
    32px;

  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  pointer-events:
    none;
}

.hardware-identity-track
.status-dash {
  height:
    3px;

  min-width:
    5px;

  flex:
    1
    1
    0;

  display:
    block;

  border-radius:
    999px;

  background:
    rgba(
      245,
      245,
      243,
      .20
    );

  transition:
    background-color
    110ms
    linear,
    opacity
    110ms
    linear;

  opacity:
    1;
}

.hardware-identity-track
.status-dash.is-on {
  background:
    var(
      --redovar-terracotta,
      #C44A17
    );
}


/* =========================================================
  IDENTITY LABEL
========================================================= */

.hardware-identity-label {
  display:
    block;

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

  font-size:
    10px;

  line-height:
    1;

  letter-spacing:
    .02em;

  transition:
    color
    220ms
    ease;
}

.hardware-identity-item:hover
.hardware-identity-label,
.hardware-identity-item:focus-visible
.hardware-identity-label {
  color:
    rgba(
      245,
      245,
      243,
      .72
    );
}

.hardware-identity-item.is-complete
.hardware-identity-label {
  color:
    rgba(
      245,
      245,
      243,
      .68
    );
}

.hardware-identity-item.is-active
.hardware-identity-label {
  color:
    rgba(
      245,
      245,
      243,
      .96
    );
}


/* =========================================================
  IDENTITY DESCRIPTION
========================================================= */

.hardware-identity-description {
  margin-top:
    0;

  display:
    grid;

  grid-template-rows:
    0fr;

  opacity:
    0;

  transform:
    translateY(
      -4px
    );

  transition:
    grid-template-rows
    520ms
    var(--ease),
    margin-top
    440ms
    var(--ease),
    opacity
    220ms
    ease,
    transform
    520ms
    var(--ease);
}

.hardware-identity-description > span {
  min-height:
    0;

  overflow:
    hidden;

  display:
    block;

  max-width:
    230px;

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

  font-size:
    14px;

  line-height:
    1.55;

  font-weight:
    500;

  text-align:
    center;
}

.hardware-identity-item.is-active
.hardware-identity-description {
  margin-top:
    15px;

  grid-template-rows:
    1fr;

  opacity:
    1;

  transform:
    none;
}

.hardware-identity-item:focus-visible {
  outline:
    1px
    solid
    rgba(
      245,
      245,
      243,
      .28
    );

  outline-offset:
    9px;
}


/* =========================================================
  PLATFORM
========================================================= */

.hardware-platform {
  position:
    relative;

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

  overflow:
    hidden;

  background:
    #FFFFFF;

  /*
    LEFT SYSTEM STACK

    Before it reaches the center:
    Redovar = slightly upward
    Android = slightly downward

    Scroll down:
    both move to 0.

    Scroll up:
    they separate again.
  */

  --platform-redovar-y:
    -14px;

  --platform-android-y:
    14px;


  /*
    RIGHT MANAGEMENT GRID

    Odd cards form the LEFT column:
    Apps
    Personal accounts

    Even cards form the RIGHT column:
    Browser
    Updates

    The columns begin slightly separated horizontally.
  */

  --platform-controls-left-x:
    -14px;

  --platform-controls-right-x:
    14px;
}


/* =========================================================
  PLATFORM HEAD
========================================================= */

.hardware-platform-head {
  display:
    grid;

  grid-template-columns:
    minmax(
      500px,
      1fr
    )
    minmax(
      320px,
      .62fr
    );

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

  align-items:
    end;
}

.hardware-platform-head h2 {
  max-width:
    780px;
}

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

  max-width:
    460px;

  color:
    var(--light-secondary);

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

  line-height:
    1.68;
}


/* =========================================================
  PLATFORM BODY
========================================================= */

.hardware-platform-grid {
  margin-top:
    clamp(
      70px,
      7vw,
      108px
    );

  display:
    grid;

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

  gap:
    clamp(
      70px,
      9vw,
      150px
    );

  align-items:
    center;
}


/* =========================================================
  SYSTEM STACK
========================================================= */

.hardware-stack {
  width:
    min(
      100%,
      560px
    );

  display:
    grid;

  gap:
    10px;
}


/* =========================================================
  SYSTEM STACK LAYERS
========================================================= */

.hardware-stack-layer {
  min-height:
    190px;

  padding:
    28px
    32px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border-radius:
    var(--radius);

  backface-visibility:
    hidden;

  transform-origin:
    center;

  will-change:
    transform;
}


/* =========================================================
  REDOVAR LAYER

  SCROLL DOWN:
  -14px → 0px
========================================================= */

.hardware-stack-layer--redovar {
  background:
    var(--redovar-blue);

  color:
    #FFFFFF;

  transform:
    translate3d(
      0,
      var(--platform-redovar-y),
      0
    );
}


/* =========================================================
  ANDROID LAYER

  SCROLL DOWN:
  +14px → 0px
========================================================= */

.hardware-stack-layer--android {
  background:
    #EDEDEA;

  color:
    var(--light-text);

  transform:
    translate3d(
      0,
      var(--platform-android-y),
      0
    );
}

.hardware-stack-layer small {
  font-size:
    10px;

  line-height:
    1;

  font-weight:
    500;
}

.hardware-stack-layer strong {
  font-size:
    clamp(
      44px,
      5vw,
      72px
    );

  line-height:
    .9;

  letter-spacing:
    -.06em;

  font-weight:
    500;
}

.hardware-stack-layer--redovar small {
  color:
    rgba(
      255,
      255,
      255,
      .62
    );
}

.hardware-stack-layer--android small {
  color:
    var(--light-secondary);
}


/* =========================================================
  MANAGEMENT CONTROLS
========================================================= */

.hardware-controls {
  display:
    grid;

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

  gap:
    12px;
}


/* =========================================================
  MANAGEMENT CARD
========================================================= */

.hardware-control-card {
  min-height:
    190px;

  padding:
    clamp(
      24px,
      2.7vw,
      32px
    );

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  gap:
    54px;

  border-radius:
    var(--radius);

  background:
    var(--light-surface);

  backface-visibility:
    hidden;

  transform-origin:
    center;

  will-change:
    transform;

  transition:
    background-color
    220ms
    ease;
}


/* =========================================================
  LEFT MANAGEMENT COLUMN

  HTML order:
  1 = Apps
  3 = Personal accounts

  Both begin slightly left and move inward together.
========================================================= */

.hardware-control-card:nth-child(odd) {
  transform:
    translate3d(
      var(--platform-controls-left-x),
      0,
      0
    );
}


/* =========================================================
  RIGHT MANAGEMENT COLUMN

  HTML order:
  2 = Browser
  4 = Updates

  Both begin slightly right and move inward together.
========================================================= */

.hardware-control-card:nth-child(even) {
  transform:
    translate3d(
      var(--platform-controls-right-x),
      0,
      0
    );
}


/* =========================================================
  MANAGEMENT HOVER

  Preserve horizontal scroll position.
  Hover only lifts the card.
========================================================= */

.hardware-control-card:nth-child(odd):hover {
  transform:
    translate3d(
      var(--platform-controls-left-x),
      -3px,
      0
    );

  background:
    #F1F1EE;
}

.hardware-control-card:nth-child(even):hover {
  transform:
    translate3d(
      var(--platform-controls-right-x),
      -3px,
      0
    );

  background:
    #F1F1EE;
}


/* =========================================================
  CONTROL ICON
========================================================= */

.hardware-control-icon {
  width:
    22px;

  height:
    22px;

  display:
    block;

  object-fit:
    contain;

  opacity:
    .76;

  filter:
    brightness(
      0
    );
}

.hardware-control-card strong {
  display:
    block;

  color:
    var(--light-text);

  font-size:
    15px;

  line-height:
    1.3;

  font-weight:
    550;
}

.hardware-control-card p {
  margin:
    8px
    0
    0;

  max-width:
    250px;

  color:
    var(--light-secondary);

  font-size:
    11px;

  line-height:
    1.55;
}


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

.hardware-closing {
  position:
    relative;

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

  overflow:
    hidden;

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

.hardware-closing-head {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;
}


/* KEEP THIS LARGE — ORIGINAL PRODUCT-MOMENT SCALE */

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

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

  line-height:
    .9;

  letter-spacing:
    -.062em;

  font-weight:
    500;
}

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

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


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

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

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

.hardware-faq-grid {
  display:
    grid;

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

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

  align-items:
    start;
}

.hardware-faq-head {
  position:
    sticky;

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

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


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

.hardware-faq-list {
  display:
    grid;

  gap:
    10px;
}

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

  border:
    0;

  border-radius:
    var(--radius);

  background:
    #FFFFFF;

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

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

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

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

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

  font-size:
    15px;

  line-height:
    1.45;

  font-weight:
    550;
}


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

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

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

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

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    11px;

  height:
    1px;

  background:
    var(--light-secondary);

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

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

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

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

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

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

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

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

  max-width:
    620px;

  color:
    var(--light-secondary);

  font-size:
    13px;

  line-height:
    1.68;
}


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

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

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


/* =========================================================
  RESPONSIVE — 1120
========================================================= */

@media (max-width: 1120px) {

  .hardware-story-grid,
  .hardware-essentials-grid,
  .hardware-platform-grid {
    gap:
      70px;
  }

  .hardware-identity-top {
    gap:
      70px;
  }

  .hardware-platform-head {
    gap:
      70px;
  }

}


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

@media (max-width: 900px) {

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

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

    padding-top:
      72px;

    padding-bottom:
      86px;
  }

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

    padding-top:
      0;
  }

  .hardware-hero-media {
    background-position:
      62%
      28%;
  }

  .hardware-hero-overlay {
    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)
      );
  }


  /* =======================================================
    STOP STICKY ON TABLET / MOBILE
  ========================================================= */

  .hardware-essentials-grid,
  .hardware-story-grid,
  .hardware-platform-grid,
  .hardware-faq-grid {
    grid-template-columns:
      1fr;
  }

  .hardware-essentials-sticky {
    position:
      static;
  }

  .hardware-essentials-grid {
    gap:
      56px;
  }

  .hardware-story-grid {
    gap:
      56px;
  }

  .hardware-identity-top {
    grid-template-columns:
      1fr;
  }

  .hardware-identity-mark {
    min-height:
      100px;
  }

  .hardware-platform-head {
    grid-template-columns:
      1fr;

    gap:
      24px;
  }

  .hardware-platform-head > p {
    margin:
      0;
  }

  .hardware-stack {
    width:
      100%;
  }

  .hardware-faq-head {
    position:
      static;
  }


  /* =======================================================
    PLATFORM MOTION OFF
  ========================================================= */

  .hardware-platform {
    --platform-redovar-y:
      0px !important;

    --platform-android-y:
      0px !important;

    --platform-controls-left-x:
      0px !important;

    --platform-controls-right-x:
      0px !important;
  }

  .hardware-stack-layer--redovar,
  .hardware-stack-layer--android,
  .hardware-control-card:nth-child(odd),
  .hardware-control-card:nth-child(even) {
    transform:
      none !important;
  }

  .hardware-control-card:hover {
    transform:
      translateY(
        -3px
      ) !important;
  }

}


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

@media (max-width: 700px) {

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


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

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

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

    padding-top:
      62px;

    padding-bottom:
      74px;
  }

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

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

  .hardware-hero-media {
    background-position:
      68%
      28%;
  }


  /* =======================================================
    ESSENTIALS
  ========================================================= */

  .hardware-spec {
    min-height:
      138px;
  }


  /* =======================================================
    STORY
  ========================================================= */

  .hardware-story-item {
    min-height:
      94px;

    padding-left:
      32px;
  }

  .hardware-story-item strong {
    font-size:
      clamp(
        24px,
        7vw,
        32px
      );
  }

  .hardware-story-image {
    min-height:
      410px;
  }

  .hardware-story-image-frame {
    max-height:
      410px;
  }


  /* =======================================================
    IDENTITY
  ========================================================= */

  .hardware-identity-items {
    gap:
      10px;
  }

  .hardware-identity-track {
    margin-bottom:
      24px;

    gap:
      3px;
  }

  .hardware-identity-description > span {
    font-size:
      12px;
  }


  /* =======================================================
    PLATFORM
  ========================================================= */

  .hardware-controls {
    grid-template-columns:
      1fr
      1fr;
  }


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

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

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

    flex-direction:
      column;
  }

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


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

  .hardware-faq-grid {
    gap:
      54px;
  }

}


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

@media (max-width: 520px) {

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

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

    padding-top:
      48px;
  }

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

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

    flex-direction:
      column;

    gap:
      14px;
  }

  .hardware-hero-media {
    background-position:
      72%
      28%;
  }

  .hardware-story-image {
    min-height:
      360px;
  }

  .hardware-story-image-frame {
    max-height:
      360px;
  }


  /* =======================================================
    ESSENTIALS
  ========================================================= */

  .hardware-spec {
    min-height:
      126px;

    padding:
      24px;
  }


  /* =======================================================
    IDENTITY
  ========================================================= */

  .hardware-identity-items {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );

    gap:
      6px;
  }

  .hardware-identity-track {
    margin-bottom:
      20px;

    gap:
      2px;
  }

  .hardware-identity-track
  .status-dash {
    min-width:
      2px;

    height:
      2px;
  }

  .hardware-identity-label {
    font-size:
      9px;
  }

  .hardware-identity-description > span {
    max-width:
      110px;

    font-size:
      11px;

    line-height:
      1.45;
  }

  .hardware-identity-item.is-active
  .hardware-identity-description {
    margin-top:
      12px;
  }


  /* =======================================================
    PLATFORM
  ========================================================= */

  .hardware-stack-layer {
    min-height:
      150px;

    padding:
      24px;
  }

  .hardware-controls {
    grid-template-columns:
      1fr;
  }

  .hardware-control-card {
    min-height:
      160px;

    padding:
      24px;
  }


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

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


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

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

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

    padding:
      22px;
  }

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

}


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

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

  .hardware-reveal {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }

  .hardware-story-image img {
    transform:
      none !important;

    transition:
      none !important;
  }

  .status-dash {
    transition:
      none !important;
  }

  .hardware-identity-description {
    transition:
      none;
  }

  .hardware-spec,
  .hardware-control-card,
  .hardware-faq-list details {
    transition:
      none;
  }


  /* =======================================================
    PLATFORM
  ========================================================= */

  .hardware-platform {
    --platform-redovar-y:
      0px !important;

    --platform-android-y:
      0px !important;

    --platform-controls-left-x:
      0px !important;

    --platform-controls-right-x:
      0px !important;
  }

  .hardware-stack-layer,
  .hardware-control-card {
    transform:
      none !important;
  }

}