.page-products{
  --page-color-red: #FF3B30;
  --page-color-blue: #0A84FF;
  --page-color-yellow: #FFD60A;
  --page-color-green: #30D158;
  --page-color-deep-teal: #0F4C5C;
  --page-color-wine: #722F37;
  --page-color-indigo: #4B0082;
  --page-color-light-gray: #F2F4F8;
  --page-color-ink: #1A1A2E;
  --page-color-slate: #4A4A5A;
  --page-color-white: #FFFFFF;
  --page-color-grid: #D1D5DB;
  --page-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  overflow-x: hidden;
  background-color: var(--page-color-light-gray);
  font-family: var(--font-body);
  color: var(--page-color-ink);
}

.page-products .container{
  width: min(var(--container-main), 100% - 2 * var(--container-gutter));
  margin-inline: auto;
}

.page-products .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .8rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--page-color-slate);
}

.page-products .eyebrow::before{
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--page-color-red);
}

.page-products .breadcrumbs{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--page-color-slate);
  margin-bottom: 1.5rem;
}

.page-products .breadcrumbs a{
  color: var(--page-color-blue);
  text-decoration: none;
}

.page-products .breadcrumbs a:hover{
  text-decoration: underline;
}

.page-products .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform var(--page-ease-out) .2s, box-shadow var(--page-ease-out) .2s, background-color var(--page-ease-out) .2s;
}

.page-products .btn--primary{
  background: var(--page-color-red);
  color: var(--page-color-white);
  box-shadow: 4px 4px 0 rgba(255, 59, 48, .25);
}

.page-products .btn--primary:hover{
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(255, 59, 48, .3);
}

.page-products .btn--ghost{
  border-color: var(--page-color-blue);
  color: var(--page-color-blue);
  background: rgba(10, 132, 255, .06);
}

.page-products .btn--ghost:hover{
  background: rgba(10, 132, 255, .12);
  transform: translateY(-2px);
}

.page-products .tag{
  display: inline-block;
  padding: .2rem .55rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--page-color-light-gray);
  color: var(--page-color-slate);
  border: 1px solid var(--page-color-grid);
  text-transform: uppercase;
}

.page-products .tag--live{
  background: var(--page-color-red);
  border-color: var(--page-color-red);
  color: var(--page-color-white);
}

.page-products .tag--new{
  background: var(--page-color-yellow);
  border-color: var(--page-color-yellow);
  color: var(--page-color-ink);
}

.page-products__hero{
  position: relative;
  background: var(--page-color-deep-teal);
  color: var(--page-color-white);
  padding: 2rem 0 4rem;
  overflow: hidden;
}

.page-products__hero::before{
  content: "DOWNLAD";
  position: absolute;
  top: 1.8rem;
  right: -1rem;
  font-family: var(--font-heading);
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 900;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .05);
  writing-mode: vertical-rl;
  text-transform: uppercase;
  pointer-events: none;
}

.page-products__hero-inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.page-products__hero-copy{
  max-width: 34rem;
}

.page-products__hero h1{
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}

.page-products__hero-lead{
  font-size: clamp(1rem, 2.4vw, 1.125rem);
  line-height: 1.7;
  color: rgba(242, 244, 248, .85);
  margin: 0 0 2rem;
}

.page-products__hero-lead span{
  color: var(--page-color-yellow);
  font-weight: 700;
}

.page-products__hero-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-products__hero-visual{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0 0 1rem;
}

.page-products__phone-frame{
  position: relative;
  width: min(240px, 62vw);
  aspect-ratio: 7 / 14.5;
  background: var(--page-color-ink);
  border: 3px solid var(--page-color-white);
  border-radius: 28px;
  box-shadow: 0 0 0 2px var(--page-color-deep-teal), 0 0 0 4px var(--page-color-grid), 8px 14px 0 rgba(0, 0, 0, .3);
  overflow: hidden;
  transform: rotate(2deg);
}

.page-products__phone-frame::after{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 22px;
  background: var(--page-color-ink);
  border-radius: 0 0 14px 14px;
  z-index: 3;
}

.page-products__phone-screen{
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page-products__phone-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page-products__phone-antenna{
  position: absolute;
  right: -1.2rem;
  top: 52%;
  width: 3px;
  height: 90px;
  background: var(--page-color-yellow);
  z-index: 2;
}

.page-products__phone-antenna::after{
  content: "";
  position: absolute;
  top: -16px;
  left: -6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--page-color-red);
}

.page-products__phone-coord{
  position: absolute;
  bottom: -1.6rem;
  left: -2.4rem;
  font-family: var(--font-heading);
  font-size: .5625rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--page-color-yellow);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.page-products__hero-ring{
  position: absolute;
  inset: 10% 0 0 0;
  border: 1px dashed rgba(48, 209, 88, .45);
  width: 150%;
  height: 150%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.page-products__hero-speed{
  position: absolute;
  top: 14%;
  right: -10%;
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .24em;
  color: var(--page-color-green);
  transform: rotate(-90deg);
  text-transform: uppercase;
  white-space: nowrap;
}

.page-products__hero-grid{
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(209, 213, 219, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(209, 213, 219, .16) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(135deg, transparent 18%, #000 72%);
  -webkit-mask-image: linear-gradient(135deg, transparent 18%, #000 72%);
  pointer-events: none;
  z-index: 1;
}

.page-products[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--page-ease-out), transform .6s var(--page-ease-out);
}

.page-products[data-revealed="true"]{
  opacity: 1;
  transform: none;
}

.page-products__download{
  position: relative;
  padding: 4rem 0;
  background: var(--page-color-white);
}

.page-products__download::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--page-color-red) 0 25%, var(--page-color-yellow) 25% 30%, var(--page-color-blue) 30% 70%, var(--page-color-green) 70% 75%, var(--page-color-indigo) 75% 100%);
}

.page-products__download-panel{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  border: 2px solid var(--page-color-grid);
  background:
    linear-gradient(135deg, rgba(10, 132, 255, .04) 0 15%, transparent 15% 100%),
    var(--page-color-white);
  padding: 2rem 1.5rem;
  position: relative;
}

.page-products__download-panel::before{
  content: "QS-APP-2024";
  position: absolute;
  top: .5rem;
  right: .75rem;
  font-family: var(--font-heading);
  font-size: .625rem;
  letter-spacing: .16em;
  color: rgba(26, 26, 46, .3);
  text-transform: uppercase;
}

.page-products__download-left h2{
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.page-products__download-desc{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--page-color-slate);
  margin: 0 0 1.75rem;
}

.page-products__download-meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.page-products__meta-item{
  padding: .9rem 1rem;
  border: 1px solid var(--page-color-grid);
  border-top: 3px solid var(--page-color-red);
  background: var(--page-color-light-gray);
}

.page-products__meta-label{
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--page-color-slate);
  margin-bottom: .3rem;
}

.page-products__meta-value{
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--page-color-ink);
  font-variant-numeric: tabular-nums;
}

.page-products__store-btns{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.page-products__store-btn{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1.2rem;
  background: var(--page-color-ink);
  color: var(--page-color-white);
  text-decoration: none;
  border: 1px solid var(--page-color-ink);
  border-left: 4px solid var(--page-color-yellow);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.25;
  transition: transform var(--page-ease-out) .2s, background-color var(--page-ease-out) .2s;
}

.page-products__store-btn small{
  display: block;
  font-size: .625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  letter-spacing: .06em;
}

.page-products__store-btn:hover{
  transform: translateX(4px);
  background: var(--page-color-blue);
  border-color: var(--page-color-blue);
}

.page-products__download-right{
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-products__qr-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 1.5rem;
  border: 2px dashed var(--page-color-blue);
  background: var(--page-color-white);
  position: relative;
}

.page-products__qr-wrap::before{
  content: "SCAN ME";
  position: absolute;
  top: -.7rem;
  left: 1rem;
  background: var(--page-color-white);
  padding: 0 .4rem;
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--page-color-blue);
}

.page-products__qr{
  position: relative;
  width: 150px;
  height: 150px;
  background: var(--page-color-white);
  border: 2px solid var(--page-color-ink);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}

.page-products__qr-grid{
  width: 100%;
  height: 100%;
  background:
    linear-gradient(30deg, transparent 0 12%, var(--page-color-ink) 12% 18%, transparent 18% 30%, var(--page-color-ink) 30% 36%, transparent 36% 48%, var(--page-color-ink) 48% 52%, transparent 52% 64%, var(--page-color-ink) 64% 70%, transparent 70% 82%, var(--page-color-ink) 82% 88%, transparent 88% 100%),
    linear-gradient(90deg, transparent 0 10%, var(--page-color-ink) 10% 16%, transparent 16% 28%, var(--page-color-ink) 28% 34%, transparent 34% 46%, var(--page-color-ink) 46% 52%, transparent 52% 68%, var(--page-color-ink) 68% 74%, transparent 74% 88%, var(--page-color-ink) 88% 94%, transparent 94% 100%),
    linear-gradient(60deg, transparent 0 20%, var(--page-color-ink) 20% 26%, transparent 26% 40%, var(--page-color-ink) 40% 46%, transparent 46% 60%, var(--page-color-ink) 60% 64%, transparent 64% 78%, var(--page-color-ink) 78% 84%, transparent 84% 100%);
  opacity: .8;
}

.page-products__qr-mark{
  position: absolute;
  width: 44px;
  height: 44px;
  background: var(--page-color-red);
  color: var(--page-color-white);
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .04em;
  z-index: 2;
}

.page-products__qr-dot{
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--page-color-ink);
  z-index: 2;
}

.page-products__qr-dot--tl{top: 2px; left: 2px;}
.page-products__qr-dot--tr{top: 2px; right: 2px;}
.page-products__qr-dot--bl{bottom: 2px; left: 2px;}
.page-products__qr-dot--br{bottom: 2px; right: 2px;}

.page-products__qr-label{
  font-weight: 800;
  font-size: .9375rem;
  color: var(--page-color-ink);
}

.page-products__qr-sub{
  font-size: .75rem;
  color: var(--page-color-slate);
}

.page-products__features{
  padding: 5rem 0;
  background: var(--page-color-light-gray);
  position: relative;
}

.page-products__features::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(209, 213, 219, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(209, 213, 219, .35) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}

.page-products__section-head{
  margin-bottom: 2.5rem;
}

.page-products__section-head h2{
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
  max-width: 32rem;
}

.page-products__filter{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2.5rem;
}

.page-products__filter .filter-btn{
  padding: .5rem 1.1rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 700;
  background: var(--page-color-white);
  color: var(--page-color-slate);
  border: 1px solid var(--page-color-grid);
  cursor: pointer;
  transition: background-color var(--page-ease-out) .2s, color var(--page-ease-out) .2s, border-color var(--page-ease-out) .2s;
}

.page-products__filter .filter-btn:hover{
  border-color: var(--page-color-blue);
  color: var(--page-color-blue);
}

.page-products__filter .filter-btn[data-active="true"]{
  background: var(--page-color-blue);
  border-color: var(--page-color-blue);
  color: var(--page-color-white);
}

.page-products__feature-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-products__feature-card[data-hidden="true"]{
  display: none;
}

.page-products__feature-card{
  background: var(--page-color-white);
  border: 1px solid var(--page-color-grid);
  position: relative;
  transition: border-color var(--page-ease-out) .25s, box-shadow var(--page-ease-out) .25s;
}

.page-products__feature-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0%, transparent 80%, rgba(75, 0, 130, .06) 80%, rgba(75, 0, 130, .06) 100%);
  pointer-events: none;
}

.page-products__feature-card:hover{
  border-color: var(--page-color-indigo);
  box-shadow: 6px 6px 0 rgba(75, 0, 130, .12);
}

.page-products__feature-card--live{
  border-top: 4px solid var(--page-color-red);
}

.page-products__feature-card--smart{
  border-top: 4px solid var(--page-color-yellow);
}

.page-products__feature-card--cached{
  border-top: 4px solid var(--page-color-blue);
}

.page-products__feature-card--multiview{
  border-top: 4px solid var(--page-color-green);
}

.page-products__feature-card--stats{
  border-top: 4px solid var(--page-color-wine);
}

.page-products__feature-card--nav{
  border-top: 4px solid var(--page-color-indigo);
}

.page-products__feature-inner{
  padding: 1.5rem;
  height: 100%;
}

.page-products__feature-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .8rem;
}

.page-products__feature-num{
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 900;
  color: var(--page-color-slate);
  letter-spacing: .1em;
  border: 1px solid var(--page-color-grid);
  padding: .2rem .5rem;
}

.page-products__feature-card--live .page-products__feature-num{color: var(--page-color-red); border-color: rgba(255,59,48,.4);}
.page-products__feature-card--smart .page-products__feature-num{color: #B8860B; border-color: rgba(255,214,10,.7);}
.page-products__feature-card--cached .page-products__feature-num{color: var(--page-color-blue); border-color: rgba(10,132,255,.4);}
.page-products__feature-card--multiview .page-products__feature-num{color: var(--page-color-green); border-color: rgba(48,209,88,.5);}
.page-products__feature-card--stats .page-products__feature-num{color: var(--page-color-wine); border-color: rgba(114,47,55,.4);}
.page-products__feature-card--nav .page-products__feature-num{color: var(--page-color-indigo); border-color: rgba(75,0,130,.4);}

.page-products__feature-inner h3{
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 800;
  margin: 0 0 .5rem;
}

.page-products__feature-inner p{
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--page-color-slate);
  margin: 0 0 1.25rem;
}

.page-products__feature-img{
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--page-color-grid);
  object-fit: cover;
}

.page-products__feature-svg{
  color: var(--page-color-blue);
  display: block;
  margin: .5rem 0 0;
}

.page-products__nav-diagram{
  display: flex;
  gap: .4rem;
  margin-top: 1rem;
  padding: .8rem;
  border: 1px solid var(--page-color-grid);
  background: var(--page-color-light-gray);
}

.page-products__nav-diagram-item{
  flex: 1;
  text-align: center;
  padding: .55rem .2rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--page-color-slate);
  border: 1px solid transparent;
}

.page-products__nav-diagram-item--active{
  background: var(--page-color-red);
  color: var(--page-color-white);
  font-weight: 800;
}

.page-products__compat{
  padding: 4rem 0;
  background: var(--page-color-ink);
  position: relative;
  overflow: hidden;
}

.page-products__compat::before{
  content: "COMPATIBILITY";
  position: absolute;
  right: -2rem;
  bottom: 30%;
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  color: rgba(255, 255, 255, .06);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.page-products__compat::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  border-left: 2px solid var(--page-color-yellow);
  border-bottom: 2px solid var(--page-color-yellow);
  pointer-events: none;
}

.page-products__compat-banner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

.page-products__compat-copy .eyebrow{
  color: rgba(242, 244, 248, .7);
}

.page-products__compat-copy h2{
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 900;
  color: var(--page-color-white);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.page-products__compat-desc{
  color: rgba(242, 244, 248, .8);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 34rem;
}

.page-products__compat-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.page-products__compat-item{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.2rem 1.25rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}

.page-products__compat-icon{
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--page-color-white);
  font-family: var(--font-heading);
  font-size: .625rem;
  font-weight: 900;
  color: var(--page-color-white);
  letter-spacing: .04em;
}

.page-products__compat-item strong{
  display: block;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--page-color-white);
}

.page-products__compat-item span:not(.page-products__compat-icon):not(.page-products__compat-status){
  font-size: .8125rem;
  color: rgba(242, 244, 248, .7);
}

.page-products__compat-status{
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--page-color-green);
  border: 1px solid rgba(48, 209, 88, .5);
  padding: .3rem .55rem;
  white-space: nowrap;
}

.page-products__versions{
  padding: 5rem 0;
  background: var(--page-color-white);
}

.page-products__timeline{
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.page-products__timeline::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 2px;
  background: linear-gradient(180deg, var(--page-color-red) 0%, var(--page-color-yellow) 20%, var(--page-color-blue) 45%, var(--page-color-green) 70%, var(--page-color-indigo) 100%);
}

.page-products__timeline-item{
  position: relative;
  padding-left: 2.5rem;
}

.page-products__timeline-marker{
  position: absolute;
  left: 0;
  top: 1rem;
  width: 20px;
  height: 20px;
  border: 2px solid var(--page-color-white);
  border-radius: 50%;
  background: var(--page-color-blue);
  box-shadow: 0 0 0 2px var(--page-color-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-products__timeline-item:nth-child(1) .page-products__timeline-marker{background: var(--page-color-red); box-shadow: 0 0 0 2px var(--page-color-red);}
.page-products__timeline-item:nth-child(2) .page-products__timeline-marker{background: var(--page-color-yellow); box-shadow: 0 0 0 2px var(--page-color-yellow);}
.page-products__timeline-item:nth-child(3) .page-products__timeline-marker{background: var(--page-color-green); box-shadow: 0 0 0 2px var(--page-color-green);}
.page-products__timeline-item:nth-child(4) .page-products__timeline-marker{background: var(--page-color-blue); box-shadow: 0 0 0 2px var(--page-color-blue);}
.page-products__timeline-item:nth-child(5) .page-products__timeline-marker{background: var(--page-color-indigo); box-shadow: 0 0 0 2px var(--page-color-indigo);}
.page-products__timeline-item:nth-child(6) .page-products__timeline-marker{background: var(--page-color-wine); box-shadow: 0 0 0 2px var(--page-color-wine);}

.page-products__timeline-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--page-color-white);
}

.page-products__timeline-card{
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--page-color-grid);
  border-left: 3px solid var(--page-color-blue);
  background: var(--page-color-light-gray);
  transition: border-color var(--page-ease-out) .2s, transform var(--page-ease-out) .2s;
}

.page-products__timeline-item:nth-child(1) .page-products__timeline-card{border-left-color: var(--page-color-red);}
.page-products__timeline-item:nth-child(2) .page-products__timeline-card{border-left-color: var(--page-color-yellow);}
.page-products__timeline-item:nth-child(3) .page-products__timeline-card{border-left-color: var(--page-color-green);}
.page-products__timeline-item:nth-child(4) .page-products__timeline-card{border-left-color: var(--page-color-blue);}
.page-products__timeline-item:nth-child(5) .page-products__timeline-card{border-left-color: var(--page-color-indigo);}
.page-products__timeline-item:nth-child(6) .page-products__timeline-card{border-left-color: var(--page-color-wine);}

.page-products__timeline-card:hover{
  transform: translateX(4px);
}

.page-products__timeline-head{
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.page-products__timeline-version{
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--page-color-ink);
  background: var(--page-color-white);
  border: 1px solid var(--page-color-grid);
  padding: .18rem .55rem;
}

.page-products__timeline-card h3{
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 800;
  margin: 0 0 .4rem;
}

.page-products__timeline-card p{
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--page-color-slate);
  margin: 0;
}

.page-products__cta{
  padding: 5rem 0;
  background: var(--page-color-light-gray);
  position: relative;
  overflow: hidden;
}

.page-products__cta::before{
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(10, 132, 255, .25);
  transform: rotate(45deg);
}

.page-products__cta-panel{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.5rem 2rem;
  background: var(--page-color-wine);
  color: var(--page-color-white);
  border: 2px solid var(--page-color-wine);
  box-shadow: 10px 10px 0 rgba(114, 47, 55, .3);
}

.page-products__cta-copy .eyebrow{
  color: rgba(255, 255, 255, .75);
}

.page-products__cta-copy .eyebrow::before{
  background: var(--page-color-yellow);
}

.page-products__cta-copy h2{
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.page-products__cta-copy p{
  color: rgba(255, 255, 255, .85);
  line-height: 1.7;
  font-size: .9375rem;
  margin: 0;
}

.page-products__cta-copy a{
  color: var(--page-color-yellow);
  text-decoration: none;
  font-weight: 700;
}

.page-products__cta-copy a:hover{
  text-decoration: underline;
}

.page-products__cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-products__cta .btn--primary{
  background: var(--page-color-white);
  color: var(--page-color-wine);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .2);
}

.page-products__cta .btn--primary:hover{
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .25);
}

.page-products__cta .btn--ghost{
  border-color: rgba(255, 255, 255, .7);
  color: var(--page-color-white);
  background: transparent;
}

.page-products__cta .btn--ghost:hover{
  background: rgba(255, 255, 255, .12);
}

@media (min-width: 640px){
  .page-products__feature-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .page-products__download-meta{
    grid-template-columns: repeat(4, 1fr);
  }

  .page-products__compat-list{
    grid-template-columns: 1fr;
  }

  .page-products__timeline{
    gap: 1.25rem;
  }
}

@media (min-width: 900px){
  .page-products__hero{
    padding: 3rem 0 6rem;
  }

  .page-products__hero-inner{
    grid-template-columns: 1.15fr .85fr;
    gap: 3rem;
    align-items: center;
  }

  .page-products__hero-visual{
    justify-content: flex-end;
    padding-right: 3rem;
  }

  .page-products__phone-frame{
    width: min(258px, 32vw);
  }

  .page-products__hero-speed{
    right: -6%;
  }

  .page-products__download-panel{
    grid-template-columns: 1.2fr .8fr;
    gap: 2rem;
    padding: 3rem;
  }

  .page-products__download-right{
    border-left: 2px dashed var(--page-color-grid);
  }

  .page-products__qr-wrap{
    margin: 0 auto;
  }

  .page-products__feature-grid{
    grid-template-columns: repeat(3, 1fr);
  }

  .page-products__compat-banner{
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
  }

  .page-products__compat-list{
    grid-template-columns: 1fr;
  }

  .page-products__timeline{
    gap: 1.5rem;
  }

  .page-products__timeline-item{
    padding-left: 3rem;
  }

  .page-products__timeline::before{
    left: 11px;
  }

  .page-products__cta-panel{
    grid-template-columns: 1fr auto;
    padding: 3.5rem 3rem;
  }
}

@media (min-width: 1200px){
  .page-products__compat-list{
    grid-template-columns: 1fr 1fr;
  }

  .page-products__download-panel{
    grid-template-columns: 1.3fr .7fr;
  }
}