/* Download page (Figma frame 8171:13020). Prefix: dl- */

/* ---------- 01 Hero (8171:54626) ---------- */
.dl-hero .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--hero-top);
  padding-bottom: var(--sp-10);
  text-align: center;
}
.dl-hero__title { width: 100%; }
.dl-hero__support { width: 620px; margin-top: var(--sp-5); }
.dl-hero .wrap > .dl-cta { margin-top: var(--sp-6); }
.dl-options {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  width: 100%;
  margin-top: 36px;
  text-align: left;
}

/* ---------- Download CTA (click to start) (8176:13313) ---------- */
.dl-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  flex-shrink: 0;
}
.dl-cta--l { width: 232px; }
.dl-cta--m { width: 191px; }
.dl-cta__state {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), filter 200ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0s;
}
.dl-cta--l .dl-cta__state { align-items: center; }
.dl-cta--m .dl-cta__state { align-items: flex-start; }
.dl-cta__btn { width: 100%; }
.dl-cta__req {
  display: flex;
  align-items: center;
  height: 28px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  white-space: pre;
}
.dl-cta__started {
  opacity: 0;
  filter: blur(2px);
  visibility: hidden;
  transition-delay: 0s, 0s, 200ms;
}
.dl-cta.is-started .dl-cta__ready {
  opacity: 0;
  filter: blur(2px);
  visibility: hidden;
  transition-delay: 0s, 0s, 200ms;
}
.dl-cta.is-started .dl-cta__started {
  opacity: 1;
  filter: none;
  visibility: visible;
  transition-delay: 0s;
}
.dl-cta__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  background: var(--surface-selected);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--text-primary);
  white-space: nowrap;
}
.dl-cta--l .dl-cta__status {
  height: 46px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.09px;
}
.dl-cta--m .dl-cta__status {
  height: 36px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.dl-cta__check {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}
.dl-cta--l .dl-cta__check { width: 20px; height: 20px; }
.dl-cta--m .dl-cta__check { width: 16px; height: 16px; }
.dl-cta__check img { position: absolute; }
/* icon/check Group: top 25%, left/right 16.67%, bottom 29.17%, then the stroke overhang */
.dl-cta--l .dl-cta__check img { left: 2.333px; top: 4px; }
.dl-cta--m .dl-cta__check img { left: 1.667px; top: 3px; }
.dl-cta__retry {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}
.dl-cta__retry p {
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 22px;
}

/* ---------- Download option cards (8190:13342) ---------- */
.dl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 384px;
  height: 673px;
  overflow: hidden;
  background: var(--bg-raised);
  border-radius: var(--r-xl);
}
/* Figma strokes are drawn inside, above the children */
.dl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-subtle);
  border-radius: inherit;
  pointer-events: none;
}
.dl-card--recommended::after { border: 0; box-shadow: inset 0 0 0 1.5px var(--accent); }
.dl-card__stage {
  position: relative;
  flex-shrink: 0;
  width: 384px;
  height: 248px;
  overflow: hidden;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
}
.dl-card__device { position: absolute; top: 24px; }
.dl-card__device--monitor { left: 66px; }
.dl-card__device--macbook { left: 33px; }
.dl-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-5);
  overflow: hidden;
}
.dl-card__lockup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.dl-card__name {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
}
.dl-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  overflow: hidden;
}
.pmark .dl-icon img { position: absolute; width: auto; height: auto; }
.dl-icon--puzzle img,
.dl-icon--globe img { left: 0.5px; top: 0.5px; }
.dl-icon--monitor img { left: 0.5px; top: 1.25px; }
.dl-chip {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--accent-tint);
  color: var(--text-accent);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
  white-space: nowrap;
}
.dl-specs {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dl-spec {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.dl-spec dt {
  flex-shrink: 0;
  width: 112px;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.dl-spec dd {
  flex: 1 0 0;
  min-width: 1px;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 26px;
}
.dl-card__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--sp-3);
}

/* Device / Browser window (extension) (8171:54634) */
.dl-browser {
  position: absolute;
  left: 67px;
  top: 24px;
  width: 250.602px;
  height: 200px;
}
.dl-browser p {
  position: absolute;
  white-space: nowrap;
  line-height: normal;
}
.dl-browser__window {
  position: absolute;
  left: 0;
  top: 0;
  width: 250.602px;
  height: 183.133px;
  overflow: hidden;
  background: #f4f5f7;
  border-radius: 6.747px;
  filter: blur(0.482px);
  box-shadow: 0 15.422px 38.554px rgba(0, 0, 0, 0.6), 0 1.928px 5.783px rgba(0, 0, 0, 0.35);
}
.dl-browser__tabstrip { position: absolute; left: 0; top: 0; width: 250.602px; height: 18.313px; background: #1c1c1f; }
.dl-browser__ctl { position: absolute; top: 6.75px; }
.dl-browser__ctl--1 { left: 7.71px; }
.dl-browser__ctl--2 { left: 15.42px; }
.dl-browser__ctl--3 { left: 23.13px; }
.dl-browser__tab { position: absolute; left: 36.63px; top: 3.86px; width: 81.928px; height: 14.458px; background: #2a2b2f; border-radius: 3.855px 3.855px 0 0; }
.dl-browser__tab-label { left: 43.37px; top: 7.23px; color: #e6e6e8; font-size: 5.3px; font-weight: 500; }
.dl-browser__toolbar { position: absolute; left: 0; top: 18.31px; width: 250.602px; height: 18.313px; background: #2a2b2f; }
.dl-browser__address { position: absolute; left: 36.63px; top: 22.17px; width: 167.711px; height: 10.602px; background: #1c1c1f; border-radius: 5.301px; }
.dl-browser__url { left: 44.34px; top: 24.1px; color: #a4a4a4; font-size: 5.3px; }
.dl-browser__ext-icon { position: absolute; left: 212.05px; top: 23.61px; width: 7.711px; height: 7.711px; background: #6b6c72; border-radius: 1.928px; }
.dl-browser__secpath-icon {
  position: absolute;
  left: 225.54px;
  top: 20.24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.976px;
  height: 13.976px;
  background: #e2e8f0;
  border-radius: 3.494px;
}
.dl-browser__page { position: absolute; left: 0; top: 36.63px; width: 250.602px; height: 146.506px; overflow: hidden; background: #1c1c1f; }
.dl-browser__brand { left: 23.13px; top: 22.17px; color: var(--text-primary); font-size: 6.27px; font-weight: 600; }
.dl-browser__heading { left: 23.13px; top: 41.45px; color: var(--text-secondary); font-size: 5.78px; font-weight: 500; }
.dl-browser__label { left: 23.13px; color: #6b6f78; font-size: 4.82px; }
.dl-browser__label--email { top: 59.76px; }
.dl-browser__label--password { top: 89.64px; }
.dl-browser__field { position: absolute; left: 23.13px; width: 106.024px; height: 16.386px; background: #131315; border-radius: 3.855px; box-shadow: inset 0 0 0 0.482px #3b3b3b; }
.dl-browser__field--email { top: 67.47px; }
.dl-browser__field--password { top: 97.35px; }
.dl-browser__signin { position: absolute; left: 23.13px; top: 129.16px; width: 106.024px; height: 16.386px; background: #3b3b3b; border-radius: 3.855px; }
.dl-browser__value { left: 28.92px; color: var(--text-primary); font-size: 5.3px; }
.dl-browser__value--email { top: 71.81px; }
.dl-browser__value--password { top: 101.69px; }
.dl-browser__signin-label { left: 66.99px; top: 133.49px; color: var(--text-primary); font-size: 5.3px; font-weight: 500; }
.dl-browser__popup {
  position: absolute;
  left: 134.94px;
  top: 41.45px;
  width: 111.807px;
  height: 156.627px;
  overflow: hidden;
  background: #131315;
  border-radius: 7.711px;
  box-shadow: 0 15.422px 38.554px rgba(0, 0, 0, 0.6), 0 1.928px 5.783px rgba(0, 0, 0, 0.35);
}
/* sub-pixel inside strokes (0.723px / 0.482px), drawn above the children like Figma */
.dl-browser__window::after,
.dl-browser__popup::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.dl-browser__window::after { box-shadow: inset 0 0 0 0.723px #3a3b3f; }
.dl-browser__popup::after { box-shadow: inset 0 0 0 0.482px #3a3b3f; }
.dl-browser__popup img {
  position: absolute;
  left: 0;
  top: 0;
  width: 111.807px;
  height: 156.627px;
  object-fit: cover;
}
.dl-browser__caret { position: absolute; left: 227.95px; top: 38.07px; width: 8.193px; height: 4.819px; }
.dl-browser__caret img { position: absolute; left: 6.7%; top: 0; }

/* ---------- 02 Install on Windows (8172:13208) ---------- */
.dl-install .wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}
.dl-install__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.dl-install__title { width: 690px; }
.dl-install__support { width: 408px; }

/* Install · steps (auto-advancing) (8415:60922) */
.dl-steps {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  width: 100%;
}
.dl-step {
  --ease-step: cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 1px;
  overflow: hidden;
}
.dl-step__crop {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: var(--bg-raised);
  border-radius: var(--r-lg);
  opacity: 0.55;
  transition: opacity 450ms var(--ease-step);
}
.dl-step__crop::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-strong);
  border-radius: inherit;
  pointer-events: none;
}
.dl-step__img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}
.dl-step__img--open,
.dl-step__img--signin { left: 0; top: 0; width: 384px; height: 300px; }
.dl-step__img--connect { left: -579px; top: -130px; width: 1100px; height: 712px; }
.dl-step__progress {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 1px;
}
.dl-step__fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  border-radius: 1px;
  transition: width 450ms var(--ease-step), background-color 450ms var(--ease-step);
}
.dl-step__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
}
.dl-step__head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.09px;
  white-space: nowrap;
}
.dl-step__num { color: var(--text-tertiary); transition: color 450ms var(--ease-step); }
.dl-step__title { color: var(--text-secondary); transition: color 450ms var(--ease-step); }
.dl-step__body {
  color: var(--text-tertiary);
  font-size: 14px;
  line-height: 22px;
  transition: color 450ms var(--ease-step);
}
.dl-step.is-active .dl-step__crop { opacity: 1; }
.dl-step.is-active .dl-step__num { color: var(--text-accent); }
.dl-step.is-active .dl-step__title { color: var(--text-primary); }
.dl-step.is-active .dl-step__body { color: var(--text-secondary); }
.dl-step.is-done .dl-step__fill { width: 100%; background: rgba(255, 255, 255, 0.32); }
.dl-step.is-running .dl-step__fill { width: 100%; transition: width 4s linear; }

/* ---------- 03 Questions (8172:56593) ---------- */
.dl-questions .wrap {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}
.dl-questions__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  flex-shrink: 0;
  width: 384px;
}
.dl-questions__help {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}
.dl-questions__contact {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 24px;
}

/* FAQ item (6781:334) */
.dl-faq {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 1px;
}
.dl-faq__item {
  --faq-ease: cubic-bezier(0.23, 1, 0.32, 1);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--alpha-100);
}
.dl-faq__header {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  width: 100%;
}
.dl-faq__q {
  flex: 1 0 0;
  min-width: 1px;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
}
.dl-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
.dl-faq__icon img { position: absolute; }
.dl-faq__plus { left: 3.166px; top: 3.166px; }
.dl-faq__minus { left: 3.166px; top: 9px; display: none; }
.dl-faq__item.is-open .dl-faq__plus { display: none; }
.dl-faq__item.is-open .dl-faq__minus { display: block; }
.dl-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 200ms var(--faq-ease), opacity 200ms var(--faq-ease);
}
.dl-faq__item.is-open .dl-faq__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transition-duration: 250ms;
}
.dl-faq__inner { overflow: hidden; min-height: 0; }
.dl-faq__a {
  width: 640px;
  padding-top: var(--sp-3);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 24px;
}

/* ---------- 04 Final CTA (8171:13154) ---------- */
.dl-final { padding-bottom: var(--sp-10); }
.dl-final__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-9) 0;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
}
.dl-final__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1200px;
  padding-left: 40px;
  overflow: hidden;
  background: var(--bg-raised);
  border-radius: var(--r-xl);
}
.dl-final__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.dl-final__copy {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  min-width: 1px;
}
.dl-final__title { width: 562px; }
.dl-final__ctas {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.dl-final__visual {
  position: relative;
  flex-shrink: 0;
  width: 556px;
  height: 513px;
}
.dl-final__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.dl-final__photo img {
  position: absolute;
  left: -6.21%;
  top: -63.93%;
  width: 106.29%;
  height: 172.77%;
  max-width: none;
}
.dl-final__float {
  position: absolute;
  display: flex;
  padding: 8px;
  overflow: hidden;
  background: rgba(19, 19, 21, 0.6);
  border: 0.958px solid #131315;
  border-radius: 9.526px;
}
.dl-final__float--vpn { left: 214px; top: 347px; }
.dl-final__float--vault { left: 254px; top: 427px; }
.dl-final__float-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 261.704px;
  padding: 0 9.526px;
  background: var(--bg-base);
  border-radius: 7.145px;
  filter: drop-shadow(0 4px 4.4px rgba(47, 47, 47, 0.4));
}
.dl-final__float--vault .dl-final__float-inner { padding: 4.763px 9.526px; }
.dl-final__float-row {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: space-between;
  min-width: 1px;
}
.dl-final__float--vpn .dl-final__float-row { padding: 7.667px 0; }
.dl-final__float-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
}
.dl-final__float-text--gap { gap: 2px; }
.dl-final__float-title {
  color: var(--neutral-200);
  font-size: 11.908px;
  font-weight: 500;
  line-height: 19.168px;
  letter-spacing: -0.1533px;
}
.dl-final__float-sub {
  color: var(--text-tertiary);
  font-size: 10.717px;
  line-height: 15.335px;
  letter-spacing: -0.115px;
}
.dl-final__float-icon {
  display: flex;
  align-items: center;
  padding: 6px;
  background: var(--accent-tint);
  border-radius: 4px;
}

/* toggol (333:9826 Default / 333:9828 Variant2) — click swaps variants with a 300ms dissolve */
.dl-toggle {
  position: relative;
  display: grid;
  flex-shrink: 0;
  width: 46px;
  height: 24px;
}
.dl-toggle__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px;
  border-radius: 44px;
  transition: opacity 300ms ease-out;
}
.dl-toggle__face--off { align-items: flex-start; background: var(--text-tertiary); }
.dl-toggle__face--on { align-items: flex-end; background: var(--blue-400); opacity: 0; }
.dl-toggle.is-on .dl-toggle__face--on { opacity: 1; }
.dl-toggle.is-on .dl-toggle__face--off { opacity: 0; }
.dl-toggle__knob {
  width: 28px;
  height: 20px;
  background: #fcfcfc;
  border-radius: 22px;
}

/* Ecosystem reference (8171:13156) */
.dl-eco {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.dl-eco__step {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-3);
}
.dl-eco__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  white-space: nowrap;
}
.dl-eco__label {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12px;
}
.dl-eco__product {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.dl-eco__product.is-muted { color: var(--text-secondary); }
.dl-eco__connector {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  height: 0;
}
.dl-eco__connector img {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
}

/* ==========================================================================
   Responsive (below the 1440 Figma frame). Desktop rules above are untouched.
   ========================================================================== */
@media (max-width: 1279px) {
  .dl-hero__support { width: 100%; max-width: 620px; }
  .dl-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .dl-card { width: auto; height: auto; min-height: 673px; }
  .dl-card__stage { width: 100%; }
  /* the three devices are centred in their 384px stage at desktop; keep them centred */
  .dl-browser,
  .dl-card__device { left: 50%; transform: translateX(-50%); }
  .dl-card__body { flex: 1 0 auto; }
  .dl-card__action { margin-top: auto; }

  .dl-install__title { width: auto; }
  .dl-install__support { width: 100%; max-width: 408px; }
  .dl-step__crop { height: auto; aspect-ratio: 384 / 300; }
  .dl-step__img--open,
  .dl-step__img--signin { width: 100%; height: 100%; }
  .dl-step__img--connect { left: -150.78%; top: -43.33%; width: 286.46%; height: 237.33%; }

  .dl-final__card { width: calc(100% - 2 * var(--page-padding)); max-width: 1200px; }
  .dl-final__title { width: 100%; max-width: 562px; }
  .dl-final__copy { padding-right: var(--sp-6); }
}

@media (max-width: 1023px) {
  .dl-hero .wrap { padding-bottom: var(--sp-9); }
  .dl-options { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
  .dl-card { min-height: 0; }

  .dl-install .wrap,
  .dl-questions .wrap { padding-top: var(--sp-9); padding-bottom: var(--sp-9); }
  .dl-install .wrap { gap: var(--sp-7); }
  .dl-install__head { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .dl-install__support { max-width: 620px; }

  .dl-questions .wrap { flex-direction: column; gap: var(--sp-7); }
  .dl-questions__heading { width: 100%; }
  .dl-faq { width: 100%; flex: none; }
  .dl-faq__a { width: 100%; max-width: 640px; }

  .dl-final { padding-bottom: var(--sp-9); }
  .dl-final__band { padding: var(--sp-8) 0; }
  .dl-final__card { flex-direction: column; align-items: stretch; padding-left: 0; }
  .dl-final__copy { padding: 40px 40px var(--sp-7); }
  .dl-final__visual { width: 100%; height: auto; aspect-ratio: 556 / 513; }
  /* floating cards keep their desktop spot, anchored to the right edge of the photo */
  .dl-final__float--vpn { left: auto; right: 11.22%; top: 67.64%; transform-origin: right top; }
  .dl-final__float--vault { left: auto; right: 4.03%; top: 83.24%; transform-origin: right top; }
}

@media (max-width: 767px) {
  .dl-card__lockup { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .dl-hero .wrap,
  .dl-install .wrap,
  .dl-questions .wrap { padding-bottom: var(--sp-8); }
  .dl-install .wrap,
  .dl-questions .wrap { padding-top: var(--sp-8); }
  .dl-options { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .dl-cta__req { flex-wrap: wrap; justify-content: center; align-self: center; width: max-content; max-width: calc(100vw - 2 * var(--page-padding)); height: auto; min-height: 28px; text-align: center; }
  .dl-cta__req > span { white-space: pre; }

  .dl-steps { flex-direction: column; gap: var(--sp-7); }
  .dl-step { flex: none; width: 100%; }

  .dl-faq__q { font-size: 18px; }

  .dl-final { padding-bottom: var(--sp-8); }
  .dl-final__band { padding: var(--sp-7) 0; }
  .dl-final__copy { padding: var(--sp-6) var(--sp-5) var(--sp-6); }
  .dl-final__ctas { flex-wrap: wrap; }
  .dl-final__float { transform: scale(0.6); }

  /* Ecosystem strip: steps stack, connectors turn vertical */
  .dl-eco { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .dl-eco__connector { flex: none; width: 32px; height: 24px; }
  .dl-eco__connector img { left: 4px; top: 11.5px; width: 24px; transform: rotate(90deg); }
  .dl-eco__product { flex-wrap: wrap; }
}

@media (max-width: 379px) {
  /* the MacBook (318px) and browser (251px) mockups are wider than the card here */
  .dl-browser,
  .dl-card__device { transform: translateX(-50%) scale(0.85); transform-origin: center top; }
}