/* Why SecPath page (Figma frame 8322:15431) */

/* SCROLL_TO puts the section's top at the top of the viewport (the fixed nav overlaps its top padding). */
.why-sec,
.why-cta { scroll-margin-top: calc(var(--nav-h) * -1); }

/* ---------- 01 Hero (8322:15432) ---------- */

.why-hero .wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-7);
  height: 458px;
  padding-top: var(--hero-top);
}
.why-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  flex-shrink: 0;
  width: 690px;
}
.why-hero__intro .t-body-l { width: 560px; }
.why-hero__ctas {
  display: flex;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
}

/* Questions (click to jump) — Topic link instances (8261:13995): Default / Hover */
.why-jump {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  flex-shrink: 0;
  width: 384px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.why-jump__link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: color 0.15s ease-out;
}
.why-jump__link:hover { color: var(--text-primary); }

/* ---------- Shared section anatomy (02–05) ---------- */

.why-sec .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-8);
  padding-top: var(--sp-10);
  padding-bottom: var(--sp-10);
}
.why-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}
.why-head .t-h1 { width: 690px; }
.why-head .t-body-l { width: 408px; }

/* Spec row (6797:1510) */
.why-spec {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  width: 100%;
  height: 60px;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.why-spec__label {
  flex-shrink: 0;
  width: 160px;
  color: var(--text-tertiary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.why-spec__value {
  flex: 1 0 0;
  min-width: 1px;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}
.why-spec__link { color: var(--text-accent); }

/* ---------- 02 Who is behind SecPath (8323:15566) ---------- */

.why-facts {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  width: 100%;
}
.why-facts__col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  min-width: 1px;
}

/* ---------- 03 What can SecPath see (8323:15593) ---------- */

.why-see { background: var(--bg-raised); }
.why-see__answers {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  width: 100%;
}
.why-see__col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 1px;
}
.why-screen {
  position: relative;
  flex-shrink: 0;
  width: 588px;
  height: 360px;
  overflow: hidden;
  background: var(--bg-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--depth-mid);
}
.why-screen img {
  position: absolute;
  left: 0;
  width: 100%;
}
.why-screen--vpn img { top: -5.86%; height: 105.74%; }
.why-screen--vault img { top: -16.61%; height: 125.22%; }
.why-screen__hairline {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}
.why-see__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  height: 76px;
}
.why-see__facts {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ---------- 04 What does it protect (8323:15633) ---------- */

.why-protect__cols {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  width: 100%;
}
.why-protect__col {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  min-width: 1px;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
.why-protect__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
/* Product lockup (6795:1327) */
.why-lockup {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
}
.why-protect__list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.why-protect__list li {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 26px;
}
/* Pending slot · Cloud Storage */
.why-pending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 153px;
  background: rgba(13, 12, 14, 0.6);
  border: 1px dashed var(--border-pending);
  border-radius: var(--r-lg);
}

/* ---------- 05 Is it easy every day (8323:15750) ---------- */

.why-easy__apps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  width: 100%;
}
.why-desk {
  position: relative;
  width: 1200px;
  height: 640px;
}
.why-desk__monitor { position: absolute; left: 40px; top: 0; }
.why-desk__macbook { position: absolute; left: 532px; top: 227.2px; }

/* Browser window · extension (8081:5685) */
.why-browser {
  position: absolute;
  left: 825.6px;
  top: 0;
  width: 374.4px;
  height: 298.8px;
}
.why-browser__window {
  position: absolute;
  left: 0;
  top: 0;
  width: 374.4px;
  height: 273.6px;
  overflow: hidden;
  background: #f4f5f7;
  border: 1.08px solid #3a3b3f;
  border-radius: 14px;
  box-shadow: 0 23.04px 57.6px rgba(0, 0, 0, 0.6), 0 2.88px 8.64px rgba(0, 0, 0, 0.35);
  filter: blur(1.08px);
}
.why-browser__window > * { position: absolute; }
.why-browser__tabstrip { left: 0; top: 0; width: 374.4px; height: 27.36px; background: #1c1c1f; }
.why-browser__ctl { top: 10.08px; }
.why-browser__ctl--1 { left: 11.52px; }
.why-browser__ctl--2 { left: 23.04px; }
.why-browser__ctl--3 { left: 34.56px; }
.why-browser__tab {
  left: 54.72px;
  top: 5.76px;
  width: 122.4px;
  height: 21.6px;
  background: #2a2b2f;
  border-radius: 5.76px 5.76px 0 0;
}
.why-browser__tab-label,
.why-browser__url,
.why-browser__t {
  line-height: normal;
  white-space: nowrap;
}
.why-browser__tab-label { left: 64.8px; top: 10.8px; color: #e6e6e8; font-size: 7.92px; font-weight: 500; }
.why-browser__toolbar { left: 0; top: 27.36px; width: 374.4px; height: 27.36px; background: #2a2b2f; }
.why-browser__address {
  left: 54.72px;
  top: 33.12px;
  width: 250.56px;
  height: 15.84px;
  background: #1c1c1f;
  border-radius: 11px;
}
.why-browser__url { left: 66.24px; top: 36px; color: var(--text-secondary); font-size: 7.92px; font-weight: 400; }
.why-browser__ext-icon {
  left: 316.8px;
  top: 35.28px;
  width: 11.52px;
  height: 11.52px;
  background: #6b6c72;
  border-radius: 4px;
}
.why-browser__secpath-icon {
  left: 336.96px;
  top: 30.24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20.88px;
  height: 20.88px;
  background: #e2e8f0;
  border-radius: 5.22px;
}
.why-browser__secpath-icon img { width: 12.96px; height: 14.91px; }
.why-browser__page {
  left: 0;
  top: 54.72px;
  width: 374.4px;
  height: 218.88px;
  overflow: hidden;
  background: #1c1c1f;
}
.why-browser__page > * { position: absolute; }
.why-browser__t--email-label { left: 34.56px; top: 89.28px; color: #6b6f78; font-size: 7.2px; }
.why-browser__t--pass-label { left: 34.56px; top: 133.92px; color: #6b6f78; font-size: 7.2px; }
.why-browser__field {
  left: 34.56px;
  width: 158.4px;
  height: 24.48px;
  background: var(--bg-raised);
  border: 0.72px solid var(--neutral-800);
  border-radius: 8px;
}
.why-browser__field--email { top: 100.8px; }
.why-browser__field--pass { top: 145.44px; }
.why-browser__signin {
  left: 34.56px;
  top: 192.96px;
  width: 158.4px;
  height: 24.48px;
  background: var(--neutral-800);
  border-radius: 8px;
}
.why-browser__t--title { left: 34.56px; top: 33.12px; color: var(--text-primary); font-size: 9.36px; font-weight: 600; }
.why-browser__t--sub { left: 34.56px; top: 61.92px; color: var(--text-secondary); font-size: 8.64px; font-weight: 500; }
.why-browser__t--email { left: 43.2px; top: 107.28px; color: var(--text-primary); font-size: 7.92px; }
.why-browser__t--dots { left: 43.2px; top: 151.92px; color: var(--text-primary); font-size: 7.92px; }
.why-browser__t--btn { left: 100.08px; top: 199.44px; color: var(--text-primary); font-size: 7.92px; font-weight: 500; }
.why-browser__popup {
  position: absolute;
  left: 201.6px;
  top: 61.92px;
  width: 167.04px;
  height: 234px;
  overflow: hidden;
  background: var(--bg-raised);
  border: 0.72px solid #3a3b3f;
  border-radius: 16px;
  box-shadow: 0 23.04px 57.6px rgba(0, 0, 0, 0.6), 0 2.88px 8.64px rgba(0, 0, 0, 0.35);
}
.why-browser__popup img {
  position: absolute;
  left: -0.72px;
  top: -0.72px;
  width: 167.04px;
  height: 234px;
  object-fit: cover;
}
.why-browser__caret {
  position: absolute;
  left: 340.56px;
  top: 56.88px;
  width: 12.24px;
  height: 7.2px;
}
.why-browser__caret img {
  position: absolute;
  top: 0;
  left: 6.7%;
}

/* Captions (8323:15761) */
.why-captions {
  display: flex;
  align-items: flex-start;
  gap: var(--gutter);
  width: 100%;
}
.why-caption {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  min-width: 1px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-strong);
}
.why-caption .t-h4 { white-space: nowrap; }
.why-caption__space { width: 8px; }
.why-caption__space--12 { height: 12px; }
.why-caption__space--4 { height: 4px; }
.why-caption__nolink { cursor: default; }

/* ---------- 06 What if it’s not for me (8322:15534) — CTA · closing ---------- */

.why-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: var(--sp-10);
}
.why-cta__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-9) 0;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
}
.why-cta__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);
}
.why-cta__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;
}
.why-cta__text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  min-width: 1px;
}
.why-cta__title { width: 562px; }
.why-cta__email { color: var(--blue-400); }
.why-cta__ctas {
  display: flex;
  gap: var(--sp-3);
}
.why-cta__visual {
  position: relative;
  flex-shrink: 0;
  width: 556px;
  height: 513px;
}
.why-cta__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.why-cta__photo img {
  position: absolute;
  top: -63.93%;
  left: -6.21%;
  width: 106.29%;
  height: 172.77%;
}
.why-glass {
  position: absolute;
  display: flex;
  padding: 8px;
  overflow: hidden;
  background: rgba(19, 19, 21, 0.6);
  border: 0.958px solid var(--bg-raised);
  border-radius: 9.526px;
}
.why-glass--vpn { left: 214px; top: 347px; }
.why-glass--vault { left: 254px; top: 427px; }
.why-glass__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 261.704px;
  padding: 7.667px 9.526px;
  background: var(--bg-base);
  border-radius: 7.145px;
  filter: drop-shadow(0 4px 4.4px rgba(47, 47, 47, 0.4));
}
.why-glass__row--vault { padding: 4.763px 9.526px; }
.why-glass__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
}
.why-glass__info--gap { gap: 2px; }
.why-glass__title {
  color: var(--neutral-200);
  font-size: 11.908px;
  font-weight: 500;
  line-height: 19.168px;
  letter-spacing: -0.1533px;
}
.why-glass__sub {
  color: var(--text-tertiary);
  font-size: 10.717px;
  font-weight: 400;
  line-height: 15.335px;
  letter-spacing: -0.115px;
}
.why-glass__icon {
  display: flex;
  align-items: center;
  padding: 6px;
  background: var(--accent-tint);
  border-radius: 4px;
}
.why-glass__icon img { width: 20px; height: 20px; }

/* toggol (333:9826 Default / 333:9828 Variant2) — Dissolve 300ms ease-out */
.why-toggle {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 24px;
  border-radius: 44px;
}
.why-toggle__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px;
  border-radius: 44px;
  transition: opacity 0.3s ease-out;
}
.why-toggle__state--off { align-items: flex-start; background: var(--text-tertiary); }
.why-toggle__state--on { align-items: flex-end; background: var(--blue-400); opacity: 0; }
.why-toggle.is-on .why-toggle__state--on { opacity: 1; }
.why-toggle.is-on .why-toggle__state--off { opacity: 0; }
.why-toggle__knob {
  width: 28px;
  height: 20px;
  background: #fcfcfc;
  border-radius: 22px;
}

/* Ecosystem reference (8322:15536) */
.why-eco {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.why-eco__step {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-3);
}
.why-eco__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  white-space: nowrap;
}
.why-eco__product {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.why-eco__connector {
  position: relative;
  flex: 1 0 0;
  min-width: 1px;
  height: 0;
}
.why-eco__connector img {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
}

/* Fixed-size visual stages (desk scene 1200×640, CTA visual 556×513); below 1440 scaled to their box (see why.js). */
.why-desk__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1200px;
  height: 640px;
}
.why-cta__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 556px;
  height: 513px;
}

/* ==========================================================================
   Responsive (Figma has only the 1440 frame; below it the same layout reflows).
   Breakpoints: fluid <=1439, laptop <=1279, tablet <=1023, phone <=767.
   ========================================================================== */

@media (max-width: 1439px) {
  /* 01 Hero */
  .why-hero .wrap { height: auto; padding-bottom: 20px; }
  .why-hero__intro { flex: 1 1 690px; min-width: 0; width: auto; }
  .why-hero__intro .t-body-l { width: auto; max-width: 560px; }
  .why-hero__ctas { flex-wrap: wrap; }

  /* Heading rows */
  .why-head { gap: var(--gutter); }
  .why-head .t-h1 { flex: 1 1 690px; width: auto; min-width: 0; }
  .why-head .t-body-l { flex: 0 1 408px; width: auto; }

  /* 03 screens keep their 588×360 proportion */
  .why-screen { width: 100%; height: auto; aspect-ratio: 588 / 360; }
  .why-see__text { height: auto; min-height: 76px; }

  /* 04 */
  .why-lockup { flex-wrap: wrap; }

  /* 05 desk scene */
  .why-desk { width: 100%; height: auto; aspect-ratio: 1200 / 640; }
  .why-desk__stage { transform: scale(var(--s, 1)); transform-origin: 0 0; }

  /* 06 CTA */
  .why-cta__card { width: calc(100% - 2 * var(--page-padding)); max-width: 1200px; }
  .why-cta__title { width: auto; max-width: 562px; }
  .why-cta__visual { width: 48%; max-width: 556px; height: auto; aspect-ratio: 556 / 513; }
  .why-cta__stage { transform: scale(var(--s, 1)); transform-origin: 0 0; }
  .why-cta__text { padding-right: var(--sp-5); }
}

@media (max-width: 1279px) {
  .why-jump { width: 320px; }
}

@media (max-width: 1023px) {
  .why-sec .wrap { gap: var(--sp-7); padding-top: var(--sp-9); padding-bottom: var(--sp-9); }

  /* Hero: questions under the intro */
  .why-hero .wrap { flex-direction: column; gap: var(--sp-7); padding-bottom: 0; }
  .why-hero__intro { flex: none; width: 100%; }
  .why-jump { width: 100%; max-width: 384px; }

  /* Heading rows stack */
  .why-head { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .why-head .t-h1, .why-head .t-body-l { flex: none; width: 100%; max-width: 690px; }

  /* 04: three columns -> two */
  .why-protect__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--gutter); }

  /* 06 CTA: text above the visual */
  .why-cta__band { padding: var(--sp-8) 0; }
  .why-cta__card { flex-direction: column; align-items: stretch; padding-left: 0; }
  .why-cta__text { padding: 40px 40px var(--sp-7); }
  .why-cta__visual { width: 100%; max-width: none; }
  .why-eco { flex-wrap: wrap; row-gap: var(--sp-5); }
  .why-eco__connector { min-width: 24px; }
  .why-cta { padding-bottom: var(--sp-9); }
}

@media (max-width: 767px) {
  .why-sec .wrap { gap: var(--sp-6); padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
  .why-hero__intro .t-display { overflow-wrap: anywhere; }

  /* Spec rows: one column, narrower label */
  .why-facts { flex-direction: column; gap: 0; }
  .why-facts__col { flex: none; width: 100%; }
  .why-spec { height: auto; min-height: 60px; gap: var(--sp-4); }
  .why-spec__label { width: 120px; }

  /* 03 / 04 / 05 columns stack */
  .why-see__answers { flex-direction: column; gap: var(--sp-8); }
  .why-see__col { flex: none; width: 100%; }
  .why-protect__cols { grid-template-columns: minmax(0, 1fr); }
  .why-captions { flex-direction: column; gap: var(--sp-6); }
  .why-caption { flex: none; width: 100%; }
  .why-easy__apps { gap: var(--sp-6); }

  /* 06 CTA */
  .why-cta__band { padding: var(--sp-7) 0; }
  .why-cta__card { border-radius: var(--r-lg); }
  .why-cta__text { padding: var(--sp-6) var(--sp-5); }
  .why-cta__ctas { flex-wrap: wrap; }
  .why-eco { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .why-eco__connector { flex: none; width: 24px; min-width: 0; height: 0; margin: 12px 0 12px 4px; transform: rotate(90deg); }
  .why-eco__product { flex-wrap: wrap; }
}