/* Approved A. Native images stay whole, with their original aspect ratios. */
.ivsa-page {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 28px 40px 18px;
  background: #121c19;
  color: #f0f3e9;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ivsa-page *,
.ivsa-page *::before,
.ivsa-page *::after { box-sizing: border-box; }
.ivsa-page :where(h1, p, figure) { margin: 0; }
.ivsa-page :where(header, div, figure, figcaption, p, a) { min-width: 0; }
.ivsa-page a { color: inherit; text-decoration: none; }
.ivsa-page a:focus-visible { outline: 2px solid #c2b8ff; outline-offset: 5px; }

.ivsa-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 454px;
  align-items: start;
  gap: 50px;
}

.ivsa-heading h1 {
  font-size: 64px;
  font-weight: 550;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.ivsa-heading h1 span { color: #d0f5a5; white-space: nowrap; }
.ivsa-intro {
  padding-top: 3px;
  color: #bcc9be;
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -.012em;
}

.ivsa-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 330px;
  column-gap: 18px;
  align-items: start;
  margin-top: 22px;
  min-width: 0;
}

.ivsa-overview { grid-column: 1; grid-row: 1; }
.ivsa-figure-heading {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 22px;
  margin-bottom: 12px;
}

.ivsa-callout {
  display: block;
  width: fit-content;
  max-width: 100%;
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -.025em;
}
.ivsa-callout--overview { color: #d0f5a5; }
.ivsa-callout--settings { color: #c2b8ff; }

.ivsa-page .ivsa-screen-link {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: #97aa9c;
  font-size: 11px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}
.ivsa-screen-link > span { font-size: 14px; line-height: 1; }
.ivsa-page .ivsa-screen-link:hover { color: #f0f3e9; }

.ivsa-native-link {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 9px;
  cursor: zoom-in;
  box-shadow: 0 14px 34px #050c083b;
}
.ivsa-native-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.ivsa-native-link--settings { box-shadow: 0 14px 36px #02090566, 0 0 0 1px #c2b8ff38; }

.ivsa-audience-note {
  position: relative;
  z-index: 3;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin-top: 286px;
}
.ivsa-audience-note > span {
  display: block;
  margin-top: 4px;
  color: #b6c5b8;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -.012em;
}

.ivsa-mode-note {
  position: relative;
  z-index: 3;
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}
.ivsa-settings {
  grid-column: 3;
  grid-row: 1;
  margin-top: 52px;
}
.ivsa-settings-heading {
  gap: 10px;
  min-height: 18px;
  color: #d0cbe8;
  font-size: 12px;
  line-height: 18px;
}
.ivsa-daily-note {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 17px auto 0;
  text-align: center;
}
.ivsa-daily-note > span {
  display: block;
  color: #c2c0d3;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -.015em;
}

.ivsa-page .ivsa-connectors {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ivsa-wire { --ivsa-wire-color: #d0f5a5; }
.ivsa-wire--plan,
.ivsa-wire--settings { --ivsa-wire-color: #c2b8ff; }
.ivsa-wire-halo,
.ivsa-wire-stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.ivsa-wire-halo { stroke: #121c19; stroke-width: 3.4px; stroke-opacity: .68; }
.ivsa-wire-stroke { stroke: var(--ivsa-wire-color); stroke-width: 1.1px; }
.ivsa-wire--plan .ivsa-wire-stroke { stroke-width: 1.35px; }
.ivsa-wire-dot { fill: #121c19; stroke: var(--ivsa-wire-color); stroke-width: 1.2px; }

.ivsa-footer { margin-top: 12px; }
.ivsa-page .ivsa-footer .ivsa-screen-link { color: #879d8b; }
.ivsa-page .ivsa-footer .ivsa-screen-link:hover { color: #f0f3e9; }

@container reader (max-width: 1300px) {
  .ivsa-page { padding: 24px 28px 18px; }
  .ivsa-heading { grid-template-columns: minmax(0, 1fr) 326px; gap: 32px; }
  .ivsa-heading h1 { font-size: clamp(44px, 4.85cqw, 60px); }
  .ivsa-intro { padding-top: 2px; font-size: 14.5px; line-height: 1.45; }
  .ivsa-stage { grid-template-columns: minmax(0, 1fr) 132px 280px; column-gap: 16px; margin-top: 18px; }
  .ivsa-figure-heading { gap: 12px; margin-bottom: 10px; }
  .ivsa-callout { font-size: 15px; line-height: 20px; }
  .ivsa-audience-note { margin-top: 212px; }
  .ivsa-audience-note > span { font-size: 12px; }
  .ivsa-settings { margin-top: 40px; }
  .ivsa-settings-heading { font-size: 11px; }
  .ivsa-daily-note { margin-top: 14px; }
  .ivsa-daily-note > span { font-size: 12px; }
}

@container reader (max-width: 850px) {
  .ivsa-page { padding: 28px; }
  .ivsa-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ivsa-heading h1 { font-size: clamp(44px, 7cqw, 58px); }
  .ivsa-intro { max-width: 620px; font-size: 16px; line-height: 1.5; }
  .ivsa-stage { grid-template-columns: minmax(0, 1fr); column-gap: 0; margin-top: 28px; }
  .ivsa-overview { grid-column: 1; grid-row: 1; }
  .ivsa-callout { font-size: 17px; line-height: 22px; }
  .ivsa-audience-note { grid-column: 1; grid-row: 2; width: fit-content; margin-top: 24px; }
  .ivsa-audience-note > span { font-size: 13px; }
  .ivsa-mode-note { grid-column: 1; grid-row: 3; justify-self: center; margin-top: 36px; }
  .ivsa-settings { grid-column: 1; grid-row: 4; justify-self: center; width: 100%; max-width: 420px; margin-top: 16px; }
  .ivsa-settings-heading { font-size: 12px; }
  .ivsa-daily-note { margin-top: 20px; }
  .ivsa-daily-note > span { font-size: 13px; }
  .ivsa-footer { margin-top: 28px; }
}

@container reader (max-width: 600px) {
  .ivsa-page { padding: 24px 20px 28px; }
  .ivsa-heading h1 { font-size: clamp(34px, 9.6cqw, 46px); }
  .ivsa-heading h1 span { white-space: normal; }
  .ivsa-heading { gap: 14px; }
  .ivsa-intro { font-size: 15px; }
  .ivsa-stage { margin-top: 24px; }
  .ivsa-callout { font-size: 15px; line-height: 20px; }
  .ivsa-figure-heading { gap: 10px; }
  .ivsa-page .ivsa-screen-link { font-size: 10px; gap: 5px; }
  .ivsa-settings-heading { font-size: 11px; }
  .ivsa-mode-note { margin-top: 32px; }
  .ivsa-audience-note { max-width: calc(100% - 36px); }
}
