:root {
  color-scheme: light;
  --bg: #f3f5f8;
  --panel: #ffffff;
  --ink: #18212f;
  --muted: #697386;
  --line: #d8dde6;
  --blue: #2f6df6;
  --blue-soft: #edf3ff;
  --green: #248a57;
  --green-soft: #eaf7ef;
  --amber: #b96208;
  --amber-soft: #fff2df;
  --red: #b42318;
  --shadow: 0 14px 34px rgba(20, 30, 46, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
.topHeader a,
.lessonLink {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 14px;
  cursor: pointer;
}

.topHeader a,
.lessonLink {
  display: grid;
  place-items: center;
  text-decoration: none;
}

button.primary,
.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.dangerBtn {
  border-color: #f3b4ad;
  color: var(--red);
}

.authScreen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  background: var(--bg);
  padding: 24px;
}

body.authLocked .authScreen {
  display: grid;
}

body.authChecking .authScreen {
  display: none;
}

body.authLocked .trainingShell {
  visibility: hidden;
}

.authCard {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 24px;
}

.authCard h1,
.authCard p {
  margin: 0;
}

.authCard p,
.helperText,
.topHeader p,
.screenHeader p,
.thumbMeta,
.lessonMeta,
.lessonDescription,
.lessonNotes,
.manageHeader p,
.emptyState {
  color: var(--muted);
}

.authCard label,
.editCard label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-weight: 800;
}

.authCard input,
.editCard input,
.editCard select,
.editCard textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

.brandMark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 900;
}

.trainingShell {
  width: min(1280px, calc(100vw - 36px));
  margin: 0 auto;
  padding: 24px 0 42px;
}

.topHeader,
.screenHeader,
.manageHeader,
.courseManager header,
.editCard header,
.editCard footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.topHeader {
  margin-bottom: 18px;
}

.topHeader nav,
.manageActions {
  display: flex;
  gap: 8px;
}

.brandRow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.topHeader h1,
.topHeader p,
.screenHeader h2,
.screenHeader p,
.manageHeader h2,
.manageHeader p,
.courseManager h3,
.editCard h3 {
  margin: 0;
}

.trainingScreen,
.managePanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 18px;
}

.screenHeader {
  margin-bottom: 16px;
}

.backBtn {
  margin-bottom: 16px;
}

.thumbnailGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.thumbnailCard {
  display: grid;
  gap: 12px;
  width: 100%;
  min-height: 244px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(20, 30, 46, 0.07);
}

.thumbnailCard:hover,
.thumbnailCard:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.14), 0 10px 26px rgba(20, 30, 46, 0.1);
  outline: none;
}

.thumbnailCard.lockedTrainingCard {
  cursor: not-allowed;
  opacity: .68;
}

.thumbnailCard.lockedTrainingCard:hover,
.thumbnailCard.lockedTrainingCard:focus-visible {
  border-color: var(--line);
  box-shadow: 0 8px 20px rgba(20, 30, 46, 0.07);
}

.thumbArt {
  position: relative;
  display: grid;
  min-height: 146px;
  place-items: center;
  background: var(--thumb-bg, var(--blue-soft));
  color: var(--thumb-ink, var(--blue));
  overflow: hidden;
}

.thumbArt img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbArt::before,
.thumbArt::after {
  content: "";
  position: absolute;
  background: currentColor;
  opacity: 0.14;
}

.thumbArt::before {
  width: 74%;
  height: 16px;
  left: 13%;
  top: 34px;
}

.thumbArt::after {
  width: 42%;
  height: 58px;
  right: 12%;
  bottom: 24px;
  border-radius: 8px;
}

.thumbInitials {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #fff;
  color: var(--thumb-ink, var(--blue));
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(20, 30, 46, 0.16);
}

.thumbArt.hasThumbImage .thumbInitials {
  display: none;
}

.designedThumb {
  align-content: space-between;
  justify-items: start;
  gap: 8px;
  padding: 14px;
  isolation: isolate;
  background:
    linear-gradient(135deg, var(--thumb-bg, #f8fafc) 0%, #fff 62%),
    var(--thumb-bg, #f8fafc);
}

.designedThumb::before {
  width: 118px;
  height: 118px;
  left: auto;
  right: -34px;
  top: -34px;
  border-radius: 999px;
  background: var(--thumb-band, currentColor);
  opacity: .14;
}

.designedThumb::after {
  width: 92px;
  height: 92px;
  right: 18px;
  bottom: -38px;
  border-radius: 999px;
  background: var(--thumb-ink, currentColor);
  opacity: .09;
}

.thumbAccentBar {
  position: absolute;
  inset: auto 0 0;
  height: 6px;
  background: var(--thumb-band, currentColor);
}

.thumbBadge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  color: var(--thumb-ink, var(--blue));
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(20, 30, 46, .08);
}

.thumbIconWrap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 8px;
  background: #fff;
  color: var(--thumb-ink, var(--blue));
  box-shadow: 0 14px 26px rgba(20, 30, 46, .13);
}

.thumbIcon {
  width: 40px;
  height: 40px;
}

.thumbLabel {
  position: relative;
  z-index: 2;
  max-width: min(100%, 210px);
  color: #111827;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.06;
}

.thumbBody {
  display: grid;
  gap: 8px;
  padding: 0 14px 14px;
}

.thumbBody strong {
  font-size: 17px;
  line-height: 1.25;
}

.thumbMeta {
  font-size: 13px;
  line-height: 1.35;
}

.typePill {
  width: fit-content;
  border-radius: 999px;
  background: #eef2f7;
  color: #526071;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 4px 8px;
  text-transform: uppercase;
}

.classPillRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.trainingLockPill,
.trainingDonePill,
.trainingOpenPill {
  width: fit-content;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  text-transform: uppercase;
}

.trainingLockPill {
  background: #f1f5f9;
  color: #64748b;
}

.trainingDonePill {
  background: var(--green-soft);
  color: var(--green);
}

.trainingOpenPill {
  background: var(--blue-soft);
  color: var(--blue);
}

.typePill.folder {
  background: var(--amber-soft);
  color: var(--amber);
}

.typePill.book {
  background: var(--green-soft);
  color: var(--green);
}

.notice {
  margin-bottom: 14px;
  border: 1px solid #f6d58b;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  padding: 12px;
  font-weight: 800;
}

.emptyState {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
  padding: 18px;
}

.lessonDetail {
  display: grid;
  gap: 18px;
}

.lessonHero {
  display: grid;
  grid-template-columns: minmax(180px, 280px) 1fr;
  gap: 18px;
  align-items: stretch;
}

.lessonHero .thumbArt {
  min-height: 220px;
  border-radius: 8px;
}

.lessonCopy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.lessonCopy h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.02;
}

.lessonMeta,
.lessonDescription,
.lessonNotes {
  margin: 0;
  line-height: 1.5;
}

.lessonActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lessonNotes {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 14px;
  white-space: pre-wrap;
}

.interactiveLesson {
  display: grid;
  gap: 18px;
}

.lessonStudyContent {
  display: grid;
  gap: 18px;
}

.lessonIntro {
  margin: 0;
  border-left: 4px solid var(--blue);
  background: #f7faff;
  padding: 14px 16px;
  line-height: 1.55;
}

.lessonObjectiveGrid,
.lessonCardGrid,
.lessonChecks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.lessonObjectiveGrid article,
.lessonCardGrid article,
.lessonChecks article,
.lessonScenario,
.lessonScriptBank,
.lessonSources {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.lessonObjectiveGrid article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: start;
}

.lessonObjectiveGrid span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-weight: 900;
}

.lessonObjectiveGrid p,
.lessonCardGrid p,
.lessonScenario p,
.lessonChecks p {
  margin: 0;
  line-height: 1.45;
}

.lessonCardGrid h3,
.lessonScenario h3,
.lessonChecks h3,
.lessonScriptBank h3,
.lessonSources h3 {
  margin: 0 0 8px;
}

.lessonCardGrid small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 800;
}

.lessonAccordion {
  display: grid;
  gap: 10px;
}

.lessonAccordion article {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lessonAccordion button {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--text);
  text-align: left;
  padding: 14px;
}

.lessonAccordion button span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 900;
}

.lessonAccordion article > div {
  display: none;
  border-top: 1px solid var(--line);
  padding: 14px;
}

.lessonAccordion article.open > div {
  display: block;
}

.lessonAccordion p,
.lessonAccordion ul {
  margin: 0;
  line-height: 1.5;
}

.lessonAccordion ul {
  margin-top: 10px;
  padding-left: 20px;
}

.lessonScenario,
.lessonChecks article {
  display: grid;
  gap: 12px;
}

.lessonQuizShell {
  display: grid;
  gap: 12px;
}

.lessonQuizIntro,
.lessonQuizRetry {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
}

.lessonQuizIntro h3,
.lessonQuizIntro p,
.lessonQuizRetry strong,
.lessonQuizRetry p {
  margin: 0;
}

.lessonQuizIntro p,
.lessonQuizRetry p {
  color: var(--muted);
  line-height: 1.45;
}

.lessonQuizRetry {
  border-color: #fecaca;
  background: #fef2f2;
}

.lessonQuizRetry div,
.lessonQuizActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lessonQuizActions {
  justify-content: flex-end;
}

.lessonScenario > div,
.lessonChecks article > div {
  display: grid;
  gap: 8px;
}

.lessonScenario button,
.lessonChecks button {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--text);
  text-align: left;
  line-height: 1.35;
  padding: 10px 12px;
}

.lessonScenario button.selected,
.lessonChecks button.selected {
  border-color: #d97706;
  background: #fff7ed;
}

.lessonScenario button.correct,
.lessonChecks button.correct {
  border-color: #16a34a;
  background: #ecfdf3;
}

.lessonScenario button.incorrect,
.lessonChecks button.incorrect {
  border-color: #dc2626;
  background: #fef2f2;
}

.lessonFeedback {
  min-height: 22px;
  color: #9a3412;
  font-weight: 800;
}

.lessonFeedback.correct {
  color: #166534;
}

.lessonCompletionPanel {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  padding: 14px;
}

.lessonCompletionPanel.complete {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.lessonCompletionPanel strong,
.lessonCompletionPanel p {
  margin: 0;
}

.lessonCompletionPanel p {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.4;
}

.lessonCompletionPanel > span {
  display: grid;
  place-items: center;
  min-width: 64px;
  min-height: 46px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-weight: 900;
}

.lessonScriptBank {
  display: grid;
  gap: 10px;
}

.lessonScriptBank blockquote {
  margin: 0;
  border-left: 4px solid #111827;
  background: #f8fafc;
  padding: 12px;
  line-height: 1.45;
}

.lessonSources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.lessonSources h3 {
  flex-basis: 100%;
}

.lessonReferenceBlock {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.lessonSequenceShell {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: stretch;
}

.lessonSequenceShell > button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
}

.lessonSequenceSlides {
  min-height: 210px;
  border-radius: 8px;
  background: linear-gradient(135deg, #101828, #1d4ed8);
  color: #fff;
  overflow: hidden;
}

.lessonSequenceSlides article {
  display: none;
  gap: 12px;
  height: 100%;
  padding: 24px;
}

.lessonSequenceSlides article.active {
  display: grid;
}

.lessonSequenceSlides span {
  width: fit-content;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 900;
}

.lessonSequenceSlides h4 {
  margin: 0;
  font-size: 26px;
}

.lessonSequenceSlides p,
.lessonSequenceSlides li {
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
}

.lessonSequenceDots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.lessonSequenceDots button {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  padding: 0;
}

.lessonSequenceDots button.active {
  width: 24px;
  background: #111827;
}

.impulseCurveBlock svg {
  width: 100%;
  min-height: 260px;
  border-radius: 8px;
  background: #f8fafc;
}

.impulseCurveBlock line {
  stroke: #94a3b8;
  stroke-width: 3;
}

.impulseCurveBlock polyline {
  fill: none;
  stroke: #2563eb;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.impulseCurveBlock circle {
  fill: #111827;
  stroke: #fff;
  stroke-width: 4;
}

.impulseCurveBlock text {
  fill: #111827;
  font-size: 16px;
  font-weight: 900;
}

.breakevenFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.breakevenFormGrid > div {
  display: grid;
  gap: 10px;
  align-content: start;
}

.breakevenFormGrid h4 {
  margin: 0;
}

.breakevenInput {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(110px, 160px);
  gap: 10px;
  align-items: center;
  color: #475467;
  font-weight: 800;
}

.breakevenInput input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 900;
}

.breakevenResults {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.breakevenResults article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.breakevenResults article.highlight {
  background: #111827;
  color: #fff;
}

.breakevenResults span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.breakevenResults article.highlight span {
  color: rgba(255, 255, 255, 0.72);
}

.breakevenResults strong {
  font-size: 20px;
}

.breakevenActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.breakevenActions span {
  color: var(--muted);
  font-weight: 800;
}

.paycheckCalculatorBlock {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.paycheckCalculatorInputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.paycheckResults {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.paycheckResults article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.paycheckResults article.highlight {
  background: #111827;
  color: #fff;
}

.paycheckResults span {
  color: #667085;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.paycheckResults small {
  color: var(--muted);
  line-height: 1.35;
}

.paycheckResults article.highlight span,
.paycheckResults article.highlight small {
  color: rgba(255, 255, 255, .74);
}

.paycheckResults strong {
  font-size: 18px;
}

.lessonBlockHeader {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  justify-content: space-between;
}

.lessonBlockHeader h3,
.lessonReferenceNote h3,
.lessonFilterGrid h4,
.lessonPriceCard h4 {
  margin: 0 0 6px;
}

.lessonBlockHeader p,
.lessonReferenceNote p,
.lessonFilterGrid p,
.lessonPriceCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.lessonSelectLabel {
  display: grid;
  gap: 6px;
  min-width: 180px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lessonSelectLabel select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  padding: 8px 10px;
}

.lessonPriceResults,
.lessonFilterGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.lessonPriceCard,
.lessonFilterGrid article {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  padding: 13px;
}

.lessonPriceNumbers {
  display: grid;
  gap: 2px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  padding: 12px;
}

.lessonPriceNumbers strong {
  font-size: 24px;
}

.lessonPriceNumbers span,
.lessonPriceNumbers small {
  color: rgba(255, 255, 255, .74);
}

.lessonPriceCredit {
  border-radius: 8px;
  background: #ecfdf3;
  color: #166534 !important;
  font-weight: 900;
  padding: 9px 10px;
}

.lessonFilterGrid article > span {
  justify-self: start;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 5px 9px;
  text-transform: uppercase;
}

.lessonDefinitionList {
  display: grid;
  gap: 8px;
  margin: 0;
}

.lessonDefinitionList div {
  display: grid;
  gap: 2px;
}

.lessonDefinitionList dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lessonDefinitionList dd {
  margin: 0;
  line-height: 1.4;
}

.lessonTableWrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lessonReferenceTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  background: #fff;
}

.lessonReferenceTable th,
.lessonReferenceTable td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.lessonReferenceTable th {
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.lessonReferenceTable tr:last-child td {
  border-bottom: 0;
}

.lessonReferenceTable ul,
.lessonFilterGrid ul,
.lessonPriceCard ul,
.lessonReferenceNote ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.45;
}

.lessonFinePrint {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.lessonReferenceNote {
  background: #fff7ed;
  border-color: #fed7aa;
}

.lessonImageCallout {
  background: #f8fafc;
}

.lessonImageCallout img {
  display: block;
  width: 100%;
  max-height: 780px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.lessonNumberedBlock ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 24px;
}

.lessonNumberedBlock li {
  font-weight: 800;
  line-height: 1.45;
}

.managementTimeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.managementTimeline article {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-top: 8px solid var(--phase-color, #8fd0ea);
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
}

.managementTimeline article:nth-child(2) {
  --phase-color: #4aa5d8;
}

.managementTimeline article:nth-child(3) {
  --phase-color: #2e6e9f;
}

.managementTimeline article:nth-child(4) {
  --phase-color: #2e3a78;
}

.managementPhaseTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.managementPhaseTop span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-weight: 900;
}

.managementPhaseTop strong {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #111827;
  font-size: 12px;
  padding: 5px 9px;
}

.managementTimeline h4,
.managementTimeline p,
.managementTimeline ul {
  margin: 0;
}

.managementTimeline h4 {
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
}

.managementPhaseSubtitle {
  color: #111827 !important;
  font-weight: 900;
}

.managementTimeline ul {
  padding-left: 18px;
  line-height: 1.42;
}

.initialAgreementBlock {
  background: #f6f8fb;
}

.initialAgreementBuilder {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.initialAgreementBuilder.traineeView {
  grid-template-columns: 1fr;
}

.initialAgreementHiddenFields {
  display: none;
}

.initialAgreementSetup,
.initialAgreementPaper {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.initialAgreementSetup {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
  padding: 16px;
}

.initialAgreementSetup h4,
.initialAgreementSetup p {
  margin: 0;
}

.initialAgreementSetup p,
.initialAgreementSetup small,
.initialAgreementSetup em {
  color: var(--muted);
}

.initialAgreementSetup label {
  display: grid;
  gap: 6px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.initialAgreementSetup input,
.initialAgreementSetup select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 9px 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.initialAgreementSetup em {
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  padding: 9px 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: none;
}

.initialAgreementTwoCol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.initialAgreementSignTools {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.initialAgreementSignTools canvas {
  width: 100%;
  height: 140px;
  border: 1px dashed #98a2b3;
  border-radius: 8px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

.initialAgreementSignTools div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.initialAgreementTraineeSignTools {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
  margin: 22px 0 4px;
}

.initialAgreementTraineeSignTools label {
  display: grid;
  gap: 7px;
  color: #344054;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.initialAgreementTraineeSignTools canvas {
  width: 100%;
  height: 150px;
  border: 1px dashed #98a2b3;
  border-radius: 8px;
  background: #fff;
  cursor: crosshair;
  touch-action: none;
}

.initialAgreementTraineeSignTools small {
  color: var(--muted);
}

.initialAgreementTraineeSignTools div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.initialAgreementPaper {
  padding: clamp(18px, 3vw, 38px);
  line-height: 1.5;
}

.initialAgreementTop {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  border-bottom: 2px solid #111827;
  padding-bottom: 16px;
  margin-bottom: 18px;
}

.initialAgreementTop h3 {
  margin: 0;
  color: #111827;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.initialAgreementTop > div {
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 11px;
  font-size: 13px;
}

.initialAgreementTop strong,
.initialAgreementTop span {
  display: block;
}

.initialAgreementTop strong {
  color: #111827;
}

.initialAgreementLead {
  text-align: center;
  font-size: 18px;
}

.initialAgreementPaper ul {
  display: grid;
  gap: 8px;
  margin: 15px 0 24px;
  padding-left: 23px;
}

.initialAgreementPaper h4 {
  margin: 24px 0 10px;
  font-size: 21px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.initialAgreementUnderline {
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.initialAgreementPayBox {
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  background: #f3f6ff;
  padding: 14px;
  margin: 12px 0 18px;
}

.initialAgreementPayBox p {
  margin: 8px 0 0;
  color: #344054;
}

.initialAgreementCalendar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.initialAgreementCalendar article {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.initialAgreementCalendar article.highlight {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(47, 109, 246, .1);
}

.initialAgreementCalendar span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.initialAgreementCalendar strong {
  color: #111827;
}

.initialAgreementCalendar b {
  color: var(--blue);
  font-size: 18px;
}

.initialAgreementCalendar small {
  color: var(--muted);
  line-height: 1.35;
}

.initialAgreementSignature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(210px, .65fr);
  gap: 16px;
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 18px;
}

.initialAgreementSignatureLine {
  display: grid;
  min-height: 96px;
  border-bottom: 2px solid #111827;
  align-items: end;
  padding-bottom: 8px;
}

.initialAgreementSignatureLine span {
  color: var(--muted);
  font-style: italic;
}

.initialAgreementSignatureLine img {
  max-width: 100%;
  max-height: 82px;
  object-fit: contain;
  object-position: left bottom;
}

.initialAgreementSignature small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.initialAgreementSystemNote {
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
  padding: 11px 12px;
  margin: 20px 0 0;
  font-weight: 800;
}

@media (max-width: 720px) {
  .lessonBlockHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .lessonSelectLabel {
    min-width: 0;
  }

  .lessonCompletionPanel {
    display: grid;
  }

  .managementTimeline {
    grid-template-columns: 1fr;
  }

  .initialAgreementBuilder,
  .initialAgreementTwoCol,
  .initialAgreementCalendar,
  .initialAgreementSignature {
    grid-template-columns: 1fr;
  }

  .initialAgreementSetup {
    position: static;
  }

  .initialAgreementTop {
    display: grid;
  }

  .initialAgreementTop > div {
    min-width: 0;
  }
}

@media print {
  body.printAgreementOnly {
    background: #fff;
  }

  body.printAgreementOnly .topHeader,
  body.printAgreementOnly .backBtn,
  body.printAgreementOnly .lessonHero,
  body.printAgreementOnly .lessonIntro,
  body.printAgreementOnly .lessonObjectiveGrid,
  body.printAgreementOnly .lessonBlockHeader,
  body.printAgreementOnly .initialAgreementSetup,
  body.printAgreementOnly .initialAgreementTraineeSignTools,
  body.printAgreementOnly .initialAgreementSystemNote {
    display: none !important;
  }

  body.printAgreementOnly .trainingShell,
  body.printAgreementOnly .trainingScreen,
  body.printAgreementOnly .lessonDetail,
  body.printAgreementOnly .interactiveLesson,
  body.printAgreementOnly .initialAgreementBlock,
  body.printAgreementOnly .initialAgreementBuilder {
    display: block !important;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: #fff;
    box-shadow: none;
  }

  body.printAgreementOnly .initialAgreementPaper {
    border: 0;
    box-shadow: none;
    padding: .35in;
  }
}

.lessonSources a {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-weight: 900;
  padding: 8px 10px;
  text-decoration: none;
}

.childStrip {
  display: grid;
  gap: 10px;
}

.childStrip h3 {
  margin: 0;
}

.managePanel {
  margin-top: 18px;
}

.manageHeader {
  margin-bottom: 16px;
}

.manageLayout {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(260px, 1fr) minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 14px;
}

.courseManager,
.editCard {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.courseManager {
  display: grid;
  align-content: start;
  gap: 12px;
}

.courseList,
.itemTree {
  display: grid;
  gap: 10px;
}

.courseCard,
.itemRow {
  display: grid;
  width: 100%;
  height: auto;
  min-height: 56px;
  text-align: left;
}

.courseCard {
  gap: 4px;
}

.courseCard.active,
.itemRow.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 109, 246, 0.12);
}

.editCard {
  display: grid;
  gap: 12px;
  align-content: start;
}

.itemRow {
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  margin-left: calc(var(--depth) * 18px);
}

.typeBadge {
  width: fit-content;
  border-radius: 999px;
  background: #eef2f7;
  color: #526071;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  text-transform: uppercase;
}

.itemRow[data-type="folder"] .typeBadge {
  background: var(--amber-soft);
  color: var(--amber);
}

.itemRow[data-type="book"] .typeBadge {
  background: var(--green-soft);
  color: var(--green);
}

body:not(.ownerRole) .ownerOnly {
  display: none !important;
}

@media (max-width: 1160px) {
  .managementTimeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manageLayout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .trainingShell {
    width: min(100vw - 20px, 620px);
    padding-top: 12px;
  }

  .topHeader,
  .screenHeader,
  .manageHeader,
  .lessonHero {
    display: grid;
    grid-template-columns: 1fr;
  }

  .topHeader nav,
  .manageActions {
    flex-wrap: wrap;
  }

  .thumbnailGrid,
  .manageLayout {
    grid-template-columns: 1fr;
  }

  .lessonSequenceShell,
  .breakevenFormGrid,
  .paycheckCalculatorInputs {
    grid-template-columns: 1fr;
  }

  .lessonSequenceShell > button {
    min-height: 42px;
  }

  .breakevenInput {
    grid-template-columns: 1fr;
  }

  .itemRow {
    margin-left: 0;
  }
}

.verizonSimulator {
  display: block;
  border-radius: 8px;
  background: #f6f7f9;
  color: #111318;
}

.vzRotateLock {
  display: none;
}

.vzCanvas {
  display: grid;
  gap: 14px;
}

.vzLessonHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.vzLessonHeader h2,
.vzLessonHeader p {
  margin: 0;
}

.vzLessonHeader h2 {
  margin-top: 8px;
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.05;
}

.vzLessonHeader p {
  color: var(--muted);
}

.vzToolFrame {
  overflow: hidden;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(17, 24, 39, 0.14);
}

.vzToolTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #0f1014;
  color: #fff;
  padding: 14px 18px;
}

.vzLogoBlock,
.vzCustomerBar,
.vzStepBar,
.vzSummaryBar,
.vzToolbarActions,
.vzActionDock,
.vzLocalTabs,
.vzLineButtons,
.vzNumberChoice {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vzLogoBlock span,
.vzCustomerBar span,
.vzSummaryItem span,
.vzScreenToolbar p,
.vzLineCard p,
.vzDeviceCard span,
.vzCompareCard span,
.vzProtectionCard p,
.vzPackageCard p,
.vzPathCard p {
  color: #687386;
}

.vzLogoBlock > div {
  display: grid;
  gap: 2px;
}

.vzLogoBlock > div span {
  color: #c4cad4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.vzLogoDot {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #e4002b;
  color: #fff !important;
  font-weight: 1000;
}

.vzCustomerBar {
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 13px;
}

.vzCustomerBar span {
  color: #f5f5f5;
}

.vzStepBar {
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e8ee;
  background: #f8f9fb;
  padding: 10px 14px;
}

.vzStep {
  min-height: 36px;
  border-radius: 999px;
  border-color: #d8dde6;
  background: #fff;
  color: #303846;
  font-size: 12px;
  font-weight: 900;
}

.vzStep span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 5px;
  border-radius: 999px;
  background: #edf0f4;
}

.vzStep.complete span {
  background: #111318;
  color: #fff;
}

.vzStep.active {
  border-color: #e4002b;
  color: #e4002b;
  box-shadow: 0 0 0 3px rgba(228, 0, 43, 0.09);
}

.vzSummaryBar {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  border-bottom: 1px solid #e5e8ee;
  background: #fff;
}

.vzSummaryItem {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-right: 1px solid #e5e8ee;
  padding: 10px 14px;
}

.vzSummaryItem:last-child {
  border-right: 0;
}

.vzSummaryItem span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.vzSummaryItem strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vzStage {
  min-height: 560px;
  background: #f3f4f7;
  padding: 18px;
}

.vzEligibleLayout,
.vzTwoColumn,
.vzDetailLayout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 18px;
}

.vzEligibleCard,
.vzPanel,
.vzCompleteCard {
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
  padding: 18px;
}

.vzEligibleCard {
  display: grid;
  align-content: center;
  gap: 16px;
  min-height: 420px;
}

.vzEligibleCard h3,
.vzCompleteCard h3 {
  margin: 0;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 0.98;
  letter-spacing: 0;
}

.vzEligibleCard p,
.vzCompleteCard p {
  margin: 0;
  color: #586174;
  font-size: 17px;
  line-height: 1.45;
}

.vzStatusPill,
.vzMiniPill,
.vzDeviceBrand {
  width: fit-content;
  border-radius: 999px;
  background: #f2f4f7;
  color: #303846;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: 0;
  padding: 5px 9px;
  text-transform: uppercase;
}

.vzStatusPill {
  background: #e8f7ee;
  color: #16794b;
}

.vzCheckGrid,
.vzTotals,
.vzSpecList {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  border: 1px solid #e5e8ee;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 14px;
}

.vzCheckGrid span,
.vzTotals span,
.vzSpecList span {
  color: #687386;
}

.vzMapPreview {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background:
    linear-gradient(rgba(228, 0, 43, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228, 0, 43, 0.08) 1px, transparent 1px),
    #fff;
  background-size: 48px 48px;
}

.vzMapPreview svg {
  position: absolute;
  inset: 42px 34px;
  width: calc(100% - 68px);
  height: calc(100% - 84px);
}

.vzMapPreview path {
  fill: none;
  stroke: #e4002b;
  stroke-width: 9;
  stroke-linecap: round;
}

.vzMapPreview circle {
  fill: #fff;
  stroke: #e4002b;
  stroke-width: 5;
}

.vzMapPin,
.vzMapHome {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e4002b;
  box-shadow: 0 16px 28px rgba(228, 0, 43, 0.18);
}

.vzMapPin {
  left: 62%;
  top: 18%;
  width: 58px;
  height: 58px;
}

.vzMapPin::after {
  content: "";
  position: absolute;
  bottom: -18px;
  border: 17px solid transparent;
  border-top-color: #e4002b;
}

.vzMapHome {
  width: 24px;
  height: 24px;
  background: #111318;
}

.vzMapHome.one {
  left: 14%;
  top: 64%;
}

.vzMapHome.two {
  left: 31%;
  top: 29%;
}

.vzMapHome.three {
  right: 12%;
  bottom: 24%;
}

.vzScreenToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.vzScreenToolbar h3,
.vzScreenToolbar p,
.vzPanel h4,
.vzCompareCard h4,
.vzDeviceHero h3 {
  margin: 0;
}

.vzScreenToolbar h3 {
  font-size: 27px;
}

.vzScreenToolbar p {
  margin-top: 3px;
}

.vzPrimaryBtn,
.vzSecondaryBtn,
.vzGhostBtn,
.vzDarkBtn {
  min-height: 42px;
  border-radius: 8px;
  font-weight: 1000;
}

.vzPrimaryBtn {
  border-color: #e4002b;
  background: #e4002b;
  color: #fff;
}

.vzSecondaryBtn {
  border-color: #cfd4dc;
  background: #fff;
  color: #111318;
}

.vzGhostBtn {
  border-color: transparent;
  background: #f2f4f7;
  color: #303846;
}

.vzDarkBtn {
  border-color: #111318;
  background: #111318;
  color: #fff;
}

.vzPrimaryBtn.full,
.vzSecondaryBtn.full,
.vzDarkBtn.full {
  width: 100%;
}

.vzCountChooser,
.vzOrderPanel,
.vzFilterPanel,
.vzDeviceHero,
.vzCompleteCard {
  display: grid;
  gap: 14px;
}

.vzLineButtons {
  flex-wrap: wrap;
}

.vzLineButtons button,
.vzNumberGrid button,
.vzPlanMiniGrid button {
  min-width: 50px;
  border-radius: 8px;
  font-weight: 1000;
}

.vzLineButtons button.active,
.vzNumberGrid button.active,
.vzPlanMiniGrid button.active {
  border-color: #e4002b;
  background: #fff1f3;
  color: #e4002b;
}

.vzLineGrid,
.vzPromoGrid,
.vzPlanGrid,
.vzProtectionGrid,
.vzPackageGrid,
.vzPathGrid {
  display: grid;
  gap: 12px;
}

.vzLineGrid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 16px;
}

.vzLineCard {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #e1e5ec;
  border-radius: 8px;
  background: #fbfcfd;
  padding: 13px;
}

.vzLineNumber {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #111318;
  color: #fff;
  font-weight: 1000;
}

.vzLineCard p {
  margin: 3px 0 0;
}

.vzPromoGrid,
.vzProtectionGrid,
.vzPackageGrid,
.vzPathGrid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.vzPromoCard,
.vzProtectionCard,
.vzPackageCard,
.vzPathCard,
.vzPlanCard,
.vzDeviceCard,
.vzCompareCard {
  display: grid;
  gap: 9px;
  height: auto;
  min-height: 0;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  text-align: left;
}

.vzPromoCard.active,
.vzProtectionCard.active,
.vzPackageCard.active,
.vzPathCard:hover,
.vzPlanCard.active,
.vzDeviceCard.active,
.vzCompareCard:hover {
  border-color: #e4002b;
  box-shadow: 0 0 0 3px rgba(228, 0, 43, 0.08);
}

.vzPromoCard span,
.vzPackageCard span,
.vzPathCard span,
.vzPlanCard span,
.vzProtectionCard span {
  color: #e4002b;
  font-size: 24px;
  font-weight: 1000;
}

.vzPromoCard p,
.vzProtectionCard p,
.vzPackageCard p,
.vzPathCard p,
.vzPlanCard p {
  margin: 0;
  line-height: 1.4;
}

.vzActionDock {
  justify-content: flex-end;
  margin-top: 14px;
}

.vzLocalTabs {
  width: fit-content;
  margin-bottom: 14px;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}

.vzLocalTabs button {
  border-color: transparent;
  background: transparent;
  font-weight: 1000;
}

.vzLocalTabs button.active {
  background: #111318;
  color: #fff;
}

.vzDeviceLayout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 14px;
}

.vzDeviceGrid,
.vzCompareGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.vzDeviceCard {
  position: relative;
  place-items: start;
}

.vzDeviceCard em,
.vzDeviceHero em {
  color: #16794b;
  font-style: normal;
  font-weight: 900;
}

.vzDeviceCard b,
.vzDeviceHero strong {
  font-size: 22px;
}

.vzPhoneArt {
  display: block;
  width: 78px;
  height: 116px;
  justify-self: center;
  border: 7px solid #111318;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 12%, #111318 0 5px, transparent 6px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.75), transparent 44%),
    var(--phone-color);
  box-shadow: 0 14px 24px rgba(17, 24, 39, 0.16);
}

.vzPhoneArt.large {
  width: 94px;
  height: 140px;
}

.vzPhoneArt.hero {
  width: 150px;
  height: 220px;
}

.vzDropdown {
  position: relative;
  display: grid;
  gap: 7px;
}

.vzDropdown > button {
  display: grid;
  gap: 2px;
  height: auto;
  min-height: 54px;
  text-align: left;
}

.vzDropdown > button span {
  color: #687386;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.vzDropdownMenu {
  display: none;
  overflow: hidden;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
}

.vzDropdown.open .vzDropdownMenu {
  display: grid;
}

.vzDropdownMenu button {
  justify-content: start;
  border: 0;
  border-radius: 0;
  text-align: left;
}

.vzDropdownMenu button.active {
  background: #fff1f3;
  color: #e4002b;
}

.vzPlanGrid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 14px;
}

.vzPlanCard ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: #303846;
}

.vzBuilderRows {
  display: grid;
  gap: 12px;
}

.vzBuilderRow {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.vzBuilderRow > div:first-child {
  display: grid;
  gap: 4px;
}

.vzBuilderRow span {
  color: #687386;
}

.vzPlanMiniGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.vzPlanMiniGrid button {
  display: grid;
  gap: 4px;
  height: auto;
  padding: 10px;
}

.vzPlanMiniGrid button span {
  color: inherit;
  font-size: 12px;
}

.vzDetailLayout {
  align-items: start;
}

.vzDeviceHero {
  grid-template-columns: 190px 1fr;
  align-items: center;
}

.vzDeviceHero h3 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

.vzNumberChoice {
  display: grid;
  justify-items: start;
}

.vzNumberChoice label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.vzFormGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vzFormGrid label {
  display: grid;
  gap: 6px;
  color: #303846;
  font-weight: 900;
}

.vzFormGrid input,
.vzFormGrid select {
  width: 100%;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
}

.vzHugeValue {
  color: #e4002b;
  font-size: 52px;
  line-height: 1;
}

.vzNumberGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.vzCompleteCard {
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 980px) {
  .vzSummaryBar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vzSummaryItem {
    border-bottom: 1px solid #e5e8ee;
  }

  .vzEligibleLayout,
  .vzTwoColumn,
  .vzDetailLayout,
  .vzDeviceLayout,
  .vzDeviceHero,
  .vzBuilderRow {
    grid-template-columns: 1fr;
  }

  .vzMapPreview {
    min-height: 280px;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .verizonSimulator {
    min-height: 70vh;
  }

  .vzCanvas {
    display: none;
  }

  .vzRotateLock {
    display: grid;
    min-height: 70vh;
    place-items: center;
    padding: 24px;
  }

  .vzRotateCard {
    display: grid;
    gap: 12px;
    max-width: 380px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    padding: 24px;
    text-align: center;
  }

  .vzRotateIcon {
    color: #e4002b;
    font-size: 46px;
    font-weight: 1000;
  }

  .vzRotateCard h2,
  .vzRotateCard p {
    margin: 0;
  }

  .vzRotateCard p {
    color: var(--muted);
    line-height: 1.45;
  }
}

.vzRealPractice .vzToolFrame {
  border-radius: 2px;
  background: #f8f8f8;
}

.vzRealPractice .vzStage {
  min-height: 690px;
  overflow: auto;
  background: #fff;
  padding: 0;
}

.vzRealTop {
  display: grid;
  grid-template-columns: 52px 190px 92px 92px 1fr auto auto;
  align-items: stretch;
  min-height: 58px;
  background: #202124;
  color: #f5f5f5;
  box-shadow: inset 0 -1px 0 #62666d;
}

.vzExitIcon {
  position: relative;
  border-right: 1px solid #686b70;
}

.vzExitIcon::before {
  position: absolute;
  inset: 14px;
  border: 2px solid #f5f5f5;
  border-right: 0;
  content: "";
}

.vzExitIcon::after {
  position: absolute;
  top: 21px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-top: 3px solid #f5f5f5;
  border-right: 3px solid #f5f5f5;
  content: "";
  transform: rotate(45deg);
}

.vzRepBlock {
  display: grid;
  align-content: center;
  gap: 3px;
  border-right: 1px solid #686b70;
  padding: 7px 12px;
  line-height: 1.1;
}

.vzRepBlock strong {
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vzRepBlock span {
  color: #d7d9dd;
  font-size: 12px;
}

.vzRepBlock b {
  color: #fff;
  font-size: 12px;
}

.vzRealLogo {
  align-self: center;
  justify-self: center;
  color: #e4002b;
  font-size: 18px;
  font-weight: 900;
}

.vzRealNav {
  display: flex;
  align-items: end;
  gap: 24px;
  padding: 0 18px;
}

.vzRealNav span {
  padding: 0 0 10px;
  color: #f2f2f2;
  font-size: 16px;
}

.vzRealNav .active {
  border-bottom: 3px solid #e4002b;
  color: #fff;
  font-weight: 900;
}

.vzIconRail {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}

.vzRealPractice .vzStepBar {
  display: none;
}

.vzScreenStrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.vzScreenStrip button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid #cfd4dc;
  border-radius: 999px;
  background: #fff;
  color: #252932;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.vzScreenStrip button.active {
  border-color: #e4002b;
  background: #111;
  color: #fff;
}

.vzOrderPage {
  min-height: 690px;
  background: #fff;
  color: #1d1f24;
}

.vzOrderSubHeader {
  display: grid;
  grid-template-columns: 52px 1fr auto auto;
  align-items: center;
  min-height: 70px;
  border-bottom: 1px solid #dadde2;
  padding: 0 28px;
}

.vzOrderSubHeader > button:first-child {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #777e89;
  font-size: 42px;
  font-weight: 200;
}

.vzOrderSubHeader h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1;
}

.vzOrderSubHeader > span {
  color: #565f6e;
  font-size: 15px;
}

.vzContinueBtn,
.vzFixedStart button,
.vzSelectedPhoneLayout aside > button,
.vzAddDeviceType button,
.vzPromoRow button,
.vzShopHeader > button:last-child,
.vzProtectionRealGrid article > button,
.vzMdnPanel > button:last-child {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: #141414;
  color: #fff;
  font-weight: 900;
}

.vzLinesAssigned {
  display: grid;
  gap: 20px;
  min-height: 180px;
  background: #eeeeef;
  padding: 24px 70px;
}

.vzLinesAssigned h3,
.vzAddLinesPanel h3 {
  margin: 0;
  font-size: 22px;
}

.vzAssignedLineGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.vzAssignedLineCard {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-content: center;
  align-items: center;
  min-width: 330px;
  min-height: 98px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: #111;
  color: #fff;
  padding: 16px 24px;
  text-align: left;
}

.vzAssignedLineCard.active {
  box-shadow: 0 0 0 2px #111;
}

.vzAssignedLineCard small {
  color: #fff;
  grid-column: 2;
  font-size: 16px;
}

.vzDeviceGlyph {
  display: inline-block;
  width: 22px;
  height: 34px;
  border: 3px solid currentColor;
  border-radius: 3px;
}

.vzDeviceGlyph.outline {
  color: #6d7480;
}

.vzAddLinesPanel {
  display: grid;
  gap: 22px;
  padding: 36px 70px;
}

.vzAddDeviceType {
  display: flex;
  align-items: center;
  gap: 28px;
}

.vzAddDeviceType strong {
  font-size: 20px;
}

.vzAddDeviceType button {
  min-width: 92px;
  background: #fff;
  color: #111;
  border: 1px solid #111;
}

.vzLineCountPractice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vzLineCountPractice button {
  width: 42px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid #cfd4dc;
  background: #fff;
  color: #333;
  font-weight: 900;
}

.vzLineCountPractice button.active {
  background: #111;
  color: #fff;
}

.vzLineShortcutRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vzLineShortcutRow button {
  min-height: 36px;
  border: 1px solid #aeb4be;
  border-radius: 999px;
  background: #fff;
  color: #252932;
  font-weight: 800;
}

.vzPromoPage {
  position: relative;
  padding-bottom: 80px;
}

.vzPromoTable {
  display: grid;
  margin: 0 44px 0 54px;
  border-left: 1px solid #d8d8d8;
  border-right: 1px solid #d8d8d8;
}

.vzPromoHead,
.vzPromoRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 220px;
}

.vzPromoHead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f5f5f5;
  border-bottom: 1px solid #d8d8d8;
  color: #30343b;
}

.vzPromoHead strong,
.vzPromoRow > div,
.vzPromoRow > strong,
.vzPromoRow > button {
  border-right: 1px solid #d8d8d8;
  padding: 18px 22px;
}

.vzPromoRow {
  min-height: 118px;
  border-bottom: 1px solid #d8d8d8;
  background: #fff;
}

.vzPromoRow h3 {
  margin: 0 0 8px;
  max-width: 700px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}

.vzPromoRow span,
.vzPromoRow p {
  display: block;
  margin: 4px 0;
  color: #8b9099;
}

.vzPromoRow a {
  color: #1c1e22;
  text-decoration: underline;
}

.vzPromoRow p {
  color: #e64b32;
  font-weight: 700;
}

.vzPromoRow > strong {
  color: #30343b;
  font-size: 18px;
}

.vzPromoRow > button {
  align-self: center;
  justify-self: center;
  min-width: 98px;
  border: 1px solid #111;
  background: #fff;
  color: #1c1e22;
}

.vzPromoRow.accepted > button {
  background: #111;
  color: #fff;
}

.vzPromoRow.conflicted {
  background: #fff8f6;
}

.vzFixedStart {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 48px;
  border-top: 1px solid #d7d7d7;
  background: rgba(255, 255, 255, 0.94);
  padding: 16px 58px;
}

.vzFixedStart button {
  min-width: 160px;
  opacity: 0.35;
}

.vzFixedStart button.active {
  opacity: 1;
}

.vzFixedStart a {
  color: #1372ce;
}

.vzShopShell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 690px;
  background: #fff;
}

.vzShopRail {
  display: grid;
  align-content: start;
  gap: 20px;
  background: #f5f5f5;
  padding: 72px 26px 26px;
}

.vzShopRail section,
.vzShopRail > button,
.vzLineSummary,
.vzLinePort,
.vzTradeRail {
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: #252932;
  padding: 22px;
  text-align: left;
}

.vzShopRail > button,
.vzTradeRail {
  font-size: 18px;
}

.vzShopRail strong {
  display: block;
  font-size: 16px;
}

.vzShopRail span {
  display: flex;
  justify-content: space-between;
  color: #687386;
}

.vzLineRailGroup {
  display: grid;
  gap: 8px;
}

.vzLineSummary {
  display: grid;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent !important;
  padding: 18px;
}

.vzLineRailGroup.active .vzLineSummary {
  border-color: #111 !important;
  box-shadow: inset 0 0 0 1px #111;
}

.vzLineSummary small {
  color: #687386;
  font-size: 12px;
}

.vzLinePort {
  min-height: 34px;
  padding: 0 14px;
  color: #3d4450;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  text-decoration: underline;
}

.vzTradeRail {
  width: 100%;
}

.vzShopShell > main {
  min-width: 0;
}

.vzShopHeader {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  height: 80px;
  border-bottom: 1px solid #dadde2;
  padding: 0 30px;
}

.vzShopHeader > button:first-child {
  border: 0;
  background: transparent;
  color: #727985;
  font-size: 38px;
}

.vzShopHeader h2 {
  margin: 0;
  font-size: 22px;
}

.vzShopHeaderActions {
  display: flex;
  gap: 10px;
}

.vzShopHeaderActions button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: #141414;
  color: #fff;
  padding: 0 24px;
  font-weight: 900;
}

.vzShopHeaderActions button:first-child {
  border: 1px solid #111;
  background: #fff;
  color: #111;
}

.vzShopContent {
  position: relative;
  min-width: 0;
  padding: 28px 46px 56px;
}

.vzShopTabs {
  display: flex;
  gap: 38px;
  border-bottom: 1px solid #d4d7dd;
  margin-bottom: 18px;
}

.vzShopTabs button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #6a707b;
  padding: 0 0 12px;
  font-size: 22px;
  font-weight: 900;
}

.vzShopTabs button.active {
  border-bottom: 4px solid #e4002b;
  color: #1e2229;
}

.vzBlueOffer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  background: #1677d2;
  color: #fff;
  font-weight: 900;
  padding: 3px 8px;
}

.vzBlueOffer b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #fff;
}

.vzDeviceUtility {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 270px 32px;
  gap: 16px;
  align-items: center;
  margin: 22px 0;
}

.vzDeviceUtility label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #444b56;
  font-size: 17px;
}

.vzToggle,
.vzSwitch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: #777;
}

.vzToggle::after,
.vzSwitch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff;
  content: "";
}

.vzToggle.on {
  background: #10a34a;
}

.vzToggle.on::after {
  left: 27px;
}

.vzSearchBox {
  position: relative;
  display: block;
  height: 48px;
  border: 1px solid #bfc4cc;
  background: #fff;
}

.vzSearchBox input {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: #252932;
  padding: 0 48px 0 14px;
  outline: 0;
}

.vzSearchBox span {
  position: absolute;
  top: 14px;
  right: 18px;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid #7c8491;
  border-radius: 999px;
}

.vzSearchBox span::after {
  position: absolute;
  right: -8px;
  bottom: -7px;
  width: 9px;
  height: 2px;
  background: #7c8491;
  content: "";
  transform: rotate(45deg);
}

.vzSortIcon,
.vzResetFilter {
  border: 0;
  background: transparent;
  color: #656d78;
  font-size: 22px;
}

.vzFilterRow {
  display: grid;
  grid-template-columns: minmax(210px, 1.2fr) minmax(160px, 0.9fr) minmax(130px, 0.7fr) auto;
  gap: 14px;
  align-items: end;
  border-radius: 2px;
  background: #f1f3f6;
  padding: 14px 18px;
}

.vzRealDropdown {
  position: relative;
  display: grid;
  gap: 6px;
}

.vzRealDropdown label {
  color: #697281;
  font-size: 12px;
  font-weight: 900;
}

.vzRealDropdown > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  border: 1px solid #aeb4be;
  border-radius: 6px;
  background: #fff;
  color: #333943;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 700;
}

.vzRealDropdown > div {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  display: none;
  min-width: 240px;
  max-height: 520px;
  overflow: auto;
  border: 1px solid #cfd3d8;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.15);
}

.vzRealDropdown.open > div {
  display: grid;
}

.vzRealDropdown > div button {
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid #d8dce2;
  border-radius: 0;
  background: transparent;
  color: #404752;
  padding: 0 16px;
  font-size: 15px;
  text-align: left;
}

.vzRealDropdown > div button.active {
  background: #f4f6f8;
  color: #111;
  font-weight: 900;
}

.vzDropdownHint {
  display: flex;
  gap: 10px;
  margin: 12px 0;
}

.vzDropdownHint button {
  min-height: 34px;
  border: 1px solid #cfd4dc;
  border-radius: 999px;
  background: #fff;
  color: #303846;
  font-weight: 900;
}

.vzDeviceCatalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 18px;
  padding-bottom: 96px;
}

.vzRealDeviceCard {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 340px;
  border-radius: 6px;
  background: #f8f8f8;
  overflow: hidden;
}

.vzRealDeviceCard.selected {
  box-shadow: inset 0 0 0 2px #111;
}

.vzDeviceHit {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 286px;
  border: 0;
  background: transparent;
  color: #1e2229;
  padding: 22px;
  text-align: left;
}

.vzDeviceHit h3 {
  min-height: 44px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.vzDeviceHit p {
  margin: 0;
  color: #6f7784;
  font-size: 12px;
  line-height: 1.25;
}

.vzDeviceHit > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: auto;
}

.vzDeviceHit span {
  color: #2b313b;
  font-size: 15px;
}

.vzDeviceHit small {
  display: block;
  color: #7d8490;
  font-size: 12px;
}

.vzCompareToggle {
  display: flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #6c737e;
  font-size: 14px;
  margin: 0 20px 14px;
  padding: 0;
}

.vzCompareToggle span {
  width: 20px;
  height: 20px;
  border: 1px solid #8d95a2;
  border-radius: 3px;
}

.vzCompareToggle.active span {
  background: #111;
  box-shadow: inset 0 0 0 4px #fff;
}

.vzRealDeviceCard.byod {
  border: 1px dashed #c4c9d1;
  background: #fafafa;
}

.vzNoDevices {
  grid-column: 1 / -1;
  border: 1px dashed #c4c9d1;
  border-radius: 6px;
  background: #fbfbfb;
  color: #4f5866;
  padding: 32px;
}

.vzByodPlus {
  display: grid;
  place-items: center;
  width: 60px;
  height: 112px;
  margin: 30px auto 0;
  border: 1px solid #c4c9d1;
  border-radius: 12px;
  color: #d0d4db !important;
  font-size: 42px !important;
  font-weight: 900;
}

.vzPhoneArtReal {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 128px;
  margin: 0 auto;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--phone-color), #f5f5f5);
  box-shadow: inset -8px -10px 18px rgba(0, 0, 0, 0.16), 0 10px 18px rgba(21, 25, 32, 0.12);
}

.vzPhoneArtReal::before {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 18px;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  content: "";
  transform: translateX(-50%);
}

.vzPhoneMock,
.vzPhoneMock > span,
.vzPhoneMock > i {
  position: absolute;
  display: block;
}

.vzPhoneMock {
  inset: 0;
}

.vzPhoneMock > span {
  top: 14px;
  left: -22px;
  width: 70px;
  height: 112px;
  border-radius: 16px;
  background: linear-gradient(145deg, #111, var(--phone-color));
  box-shadow: inset 5px 0 18px rgba(255, 255, 255, 0.16);
}

.vzPhoneMock > i {
  top: 22px;
  left: -12px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.vzPhoneMock > b {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: #20242b;
  font-size: 12px;
  font-weight: 900;
}

.vzPhoneArtReal.foldable {
  width: 128px;
}

.vzPhoneArtReal.foldable .vzPhoneMock > span {
  left: -10px;
  width: 86px;
  border-radius: 16px 4px 4px 16px;
}

.vzPhoneArtReal.foldable .vzPhoneMock > span::after {
  position: absolute;
  top: 0;
  right: -44px;
  width: 42px;
  height: 112px;
  border-radius: 4px 16px 16px 4px;
  background: linear-gradient(145deg, var(--phone-color), #f5f5f5);
  content: "";
}

.vzPhoneArtReal.tablet {
  width: 116px;
  height: 142px;
  border-radius: 14px;
}

.vzPhoneArtReal.tablet .vzPhoneMock > span {
  left: -10px;
  width: 102px;
  height: 124px;
  border-radius: 14px;
}

.vzPhoneArtReal.watch {
  width: 92px;
  height: 124px;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.vzPhoneArtReal.watch::before,
.vzPhoneArtReal.watch .vzPhoneMock > i {
  display: none;
}

.vzPhoneArtReal.watch .vzPhoneMock > span {
  top: 38px;
  left: 12px;
  width: 68px;
  height: 62px;
  border-radius: 18px;
}

.vzPhoneArtReal.watch .vzPhoneMock > span::before,
.vzPhoneArtReal.watch .vzPhoneMock > span::after {
  position: absolute;
  left: 21px;
  width: 26px;
  height: 28px;
  border-radius: 8px;
  background: #3d4450;
  content: "";
}

.vzPhoneArtReal.watch .vzPhoneMock > span::before {
  top: -28px;
}

.vzPhoneArtReal.watch .vzPhoneMock > span::after {
  bottom: -28px;
}

.vzPhoneArtReal.hotspot {
  width: 112px;
  height: 88px;
  border-radius: 18px;
}

.vzPhoneArtReal.hotspot::before {
  display: none;
}

.vzPhoneArtReal.hotspot .vzPhoneMock > span {
  top: 20px;
  left: 6px;
  width: 100px;
  height: 58px;
  border-radius: 16px;
}

.vzPhoneArtReal.hotspot .vzPhoneMock > i {
  top: 38px;
  left: 44px;
  width: 24px;
  height: 16px;
  border-radius: 999px;
}

.vzPhoneArtReal.medium {
  width: 84px;
  height: 112px;
}

.vzPhoneArtReal.hero {
  width: 150px;
  height: 210px;
}

.vzCompareScreen {
  min-height: 690px;
  background: #fff;
  padding: 26px 54px;
}

.vzCompareTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vzCompareTop h2 {
  margin: 0;
  font-size: 24px;
}

.vzCompareTop button {
  border: 0;
  background: transparent;
  color: #565f6e;
  font-size: 30px;
}

.vzCompareCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  border-bottom: 1px solid #282b31;
  padding: 18px 0 22px;
}

.vzCompareCards article {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 168px;
  border-radius: 10px;
  background: #f8f8f8;
  padding: 18px;
}

.vzCompareCards article > button {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #3d4450;
  font-size: 24px;
}

.vzCompareCards h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
}

.vzCompareCards div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.vzCompareCards small {
  color: #6f7784;
  font-size: 12px;
}

.vzCompareAdd {
  place-items: center;
  opacity: 0.55;
}

.vzCompareAdd span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 96px;
  border: 1px solid #c5cad2;
  border-radius: 10px;
  color: #c5cad2;
  font-size: 42px;
  font-weight: 900;
}

.vzCompareRows section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  border-bottom: 1px solid #d5d8dd;
  padding: 22px 0 34px;
}

.vzCompareRows h3 {
  margin: 0;
  color: #3d4450;
  font-size: 24px;
  font-weight: 400;
}

.vzCompareRows section > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 34px;
}

.vzCompareRows p {
  margin: 0;
  color: #303744;
  line-height: 1.38;
}

.vzCompareEmpty {
  color: #687386;
}

.vzCompareTray {
  position: fixed;
  right: max(24px, calc((100vw - 1280px) / 2 + 24px));
  bottom: 24px;
  left: max(320px, calc((100vw - 1280px) / 2 + 320px));
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #1d1f24;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.2);
  padding: 14px 16px;
}

.vzCompareTray strong,
.vzCompareTray span {
  display: block;
}

.vzCompareTray span {
  overflow: hidden;
  color: #687386;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vzCompareTray button {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid #111;
  background: #fff;
  color: #111;
  font-weight: 900;
}

.vzCompareTray button:last-child {
  background: #111;
  color: #fff;
}

.vzPlanHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
  gap: 28px;
  margin: 16px 0 34px;
}

.vzPlanHeader h3,
.vzPlanHeader strong {
  margin: 0;
  font-size: 22px;
}

.vzPlanHeader span {
  display: block;
  color: #6f7784;
}

.vzPlanModeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 32px;
}

.vzPlanModeRow button {
  min-height: 54px;
  border: 1px solid #9fa6b1;
  background: #fff;
  color: #2b3039;
  font-size: 18px;
  text-align: left;
}

.vzPlanModeRow button.active {
  box-shadow: inset 0 0 0 2px #111;
  font-weight: 900;
}

.vzPlanModeRow a {
  color: #3c414b;
  font-size: 16px;
  text-decoration: underline;
}

.vzUpgradePrograms {
  display: grid;
  gap: 14px;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #fff;
  margin: 28px 0;
  padding: 16px;
}

.vzUpgradePrograms h3,
.vzUpgradePrograms p {
  margin: 0;
}

.vzUpgradePrograms p {
  color: #687386;
}

.vzUpgradePrograms > div:last-child {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.vzUpgradePrograms button {
  display: grid;
  gap: 8px;
  text-align: left;
  border: 1px solid #d8dde6;
  border-radius: 8px;
  background: #f8fafc;
  color: #18212f;
  padding: 13px;
}

.vzUpgradePrograms button.active {
  border-color: #111;
  background: #111827;
  color: #fff;
}

.vzUpgradePrograms button span {
  font-size: 20px;
  font-weight: 900;
}

.vzUpgradePrograms button small {
  color: inherit;
  opacity: .78;
  line-height: 1.35;
}

.vzPopularPlanColumns {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 28px;
  overflow-x: auto;
}

.vzPopularPlanColumns article {
  display: grid;
  gap: 20px;
  min-height: 350px;
  background: #f7f7f7;
  padding: 26px;
}

.vzPopularPlanColumns article.active {
  box-shadow: inset 0 0 0 2px #111;
}

.vzPopularPlanColumns h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}

.vzPopularPlanColumns strong {
  font-size: 20px;
  font-weight: 400;
}

.vzPopularPlanColumns article > div {
  display: flex;
  gap: 10px;
}

.vzPopularPlanColumns button {
  min-height: 34px;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 900;
}

.vzPopularPlanColumns button:first-child {
  background: #111;
  color: #fff;
}

.vzPopularPlanColumns section,
.vzUnlimitedGrid button {
  display: grid;
  gap: 30px;
  min-height: 142px;
  border-radius: 6px;
  background: #111;
  color: #fff;
  padding: 20px;
}

.vzPopularPlanColumns em,
.vzUnlimitedGrid span {
  align-self: end;
  justify-self: end;
  color: #fff;
  font-style: normal;
  font-weight: 900;
}

.vzPopularPlanColumns small,
.vzUnlimitedGrid small {
  color: #fff;
}

.vzUnlimitedTitle,
.vzPerksTitle {
  margin: 24px 0 14px;
  font-size: 22px;
}

.vzUnlimitedGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(190px, 1fr));
  gap: 22px;
}

.vzUnlimitedGrid button {
  border: 0;
  text-align: left;
}

.vzUnlimitedGrid button.active {
  outline: 3px solid #e4002b;
}

.vzPerkGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 18px;
}

.vzPerkCard {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 150px;
  border: 1px solid #cfd4dc;
  border-radius: 6px;
  background: #fff;
  color: #20242b;
  padding: 18px;
  text-align: left;
}

.vzPerkCard.black {
  background: #111;
  color: #fff;
}

.vzPerkCard.red {
  background: #e80000;
  color: #fff;
}

.vzPerkCard.cyan {
  background: linear-gradient(145deg, #111 0%, #0a9fc9 100%);
  color: #fff;
}

.vzPerkCard h3 {
  max-width: 75%;
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
}

.vzPerkCard .vzSwitch {
  position: absolute;
  top: 18px;
  right: 18px;
}

.vzPerkCard b {
  align-self: end;
  font-size: 13px;
}

.vzPerkCard p {
  justify-self: end;
  margin: 0;
}

.vzPerkCard.active {
  box-shadow: inset 0 0 0 3px #111;
}

.vzPerkCard.active .vzSwitch {
  background: #10a34a;
}

.vzPerkCard.active .vzSwitch::after {
  left: 27px;
}

.vzOrderOverviewInline {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  margin: 22px 0 0;
  padding: 0 24px;
  font-weight: 900;
}

.vzAllPlansInclude {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 26px;
  background: #f3f3f3;
  padding: 24px 30px;
}

.vzAllPlansInclude h3 {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 400;
}

.vzAllPlansInclude ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vzAllPlansInclude li::before {
  margin-right: 8px;
  content: "+";
}

.vzSelectedPhoneLayout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 250px;
  gap: 46px;
  padding: 54px 60px;
}

.vzSelectedPhoneLayout aside:first-child {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 28px;
}

.vzSelectedPhoneLayout aside:first-child > a,
.vzSkuRail a {
  color: #4b535f;
  text-decoration: underline;
}

.vzSelectedPhoneLayout main h2 {
  max-width: 700px;
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.08;
}

.vzSelectedPhoneLayout main p {
  margin: 0 0 46px;
  color: #3d4450;
  font-size: 18px;
}

.vzPhoneDetailGrid {
  display: grid;
  gap: 32px;
}

.vzPhoneDetailGrid section {
  display: grid;
  gap: 18px;
  border-bottom: 1px solid #d4d8de;
  padding-bottom: 24px;
}

.vzPhoneDetailGrid h3 {
  margin: 0;
  color: #333943;
  font-size: 21px;
  font-weight: 400;
}

.vzColorOptions,
.vzStorageOptions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vzColorDot {
  width: 38px;
  height: 38px;
  border: 2px solid #111;
  border-radius: 999px;
  background: var(--phone-color);
}

.vzColorDot.active {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.vzStorageBox,
.vzPhoneDetailGrid section:nth-child(2) button {
  min-height: 54px;
  width: auto;
  min-width: 132px;
  border: 1px solid #111;
  border-radius: 2px;
  background: #fff;
  color: #111;
  text-align: left;
}

.vzStorageBox.active {
  background: #111;
  color: #fff;
}

.vzPhoneDetailGrid section:nth-child(2) {
  grid-template-columns: repeat(2, minmax(180px, 220px));
}

.vzPhoneDetailGrid section:nth-child(2) h3 {
  grid-column: 1 / -1;
}

.vzPhoneDetailGrid button span {
  display: block;
  color: #687386;
  font-weight: 400;
}

.vzSkuRail {
  display: grid;
  align-content: start;
  gap: 48px;
  padding-top: 48px;
}

.vzSkuRail button {
  border: 0;
  background: transparent;
  color: #4b535f;
  font-size: 18px;
  text-decoration: underline;
}

.vzProtectionIntro {
  padding: 34px 54px 20px;
}

.vzProtectionIntro h2 {
  margin: 0 0 8px;
  font-size: 32px;
  font-weight: 400;
}

.vzProtectionIntro h3 {
  margin: 0;
  font-size: 20px;
}

.vzProtectionIntro p {
  margin: 10px 0 0;
  color: #687386;
}

.vzProtectionRealGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  border: 1px solid #6b7078;
  margin: 18px 54px 48px;
}

.vzProtectionRealGrid article {
  position: relative;
  min-height: 290px;
  border-right: 1px solid #6b7078;
  border-bottom: 1px solid #6b7078;
  padding: 34px 28px;
}

.vzProtectionRealGrid article:nth-child(2n) {
  border-right: 0;
}

.vzProtectionRealGrid article > span {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #111;
  color: #fff;
  padding: 13px 20px;
  font-weight: 900;
}

.vzProtectionRealGrid article > button {
  position: absolute;
  top: 34px;
  right: 28px;
  padding: 0 26px;
}

.vzProtectionRealGrid article > span + button {
  top: 78px;
}

.vzProtectionRealGrid h3 {
  margin: 20px 120px 8px 0;
  font-size: 24px;
}

.vzProtectionRealGrid strong {
  display: block;
  margin-bottom: 12px;
  font-size: 34px;
}

.vzProtectionRealGrid p,
.vzProtectionRealGrid li {
  color: #303744;
  line-height: 1.3;
}

.vzProtectionRealGrid ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.vzProtectionRealGrid article.active {
  box-shadow: inset 0 0 0 3px #111;
}

.vzTradeForm {
  display: grid;
  gap: 42px;
  padding: 38px 54px;
}

.vzTradeForm > label {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items: center;
  color: #4b535f;
  font-size: 18px;
}

.vzTradeForm select,
.vzTradeForm input,
.vzMdnPanel input,
.vzMdnPanel select,
.vzFormTwo input {
  min-height: 46px;
  border: 1px solid #aeb4be;
  border-radius: 2px;
  background: #fff;
  color: #242932;
  padding: 0 14px;
  font: inherit;
}

.vzTradeForm > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px 44px;
  gap: 28px;
  align-items: center;
  border-top: 1px solid #d5d8dd;
  border-bottom: 1px solid #d5d8dd;
  padding: 42px 0;
}

.vzTradeForm h2 {
  margin: 0 0 18px;
  font-size: 22px;
}

.vzTradeForm p {
  max-width: 620px;
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}

.vzTradeForm > div button {
  width: 34px;
  height: 34px;
  border: 2px dashed #7f8794;
  background: transparent;
}

.vzTradeForm > button.disabled,
.vzByodForm .disabled {
  width: 150px;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: #d7d8dc;
  color: #fff;
  font-weight: 900;
}

.vzWarningBanner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
  background: #fae5d6;
  padding: 24px 30px;
}

.vzWarningBanner strong {
  font-size: 18px;
}

.vzWarningBanner button {
  min-height: 42px;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 900;
}

.vzByodForm {
  display: grid;
  gap: 24px;
  max-width: 640px;
  margin-top: 30px;
}

.vzByodForm h2 {
  margin: 0;
  font-size: 24px;
}

.vzByodForm label {
  display: grid;
  gap: 8px;
  color: #222832;
  font-size: 18px;
}

.vzByodForm label:first-of-type {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vzByodForm input[type="text"],
.vzByodForm input:not([type]) {
  max-width: 380px;
  min-height: 46px;
  border: 1px solid #aeb4be;
}

.vzByodForm div {
  display: flex;
  gap: 12px;
}

.vzByodForm div button:last-child {
  min-height: 46px;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: 900;
}

.vzCreditBanner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  background: #176de8;
  color: #07111f;
  padding: 18px 54px;
}

.vzCreditBanner strong {
  font-size: 18px;
}

.vzCreditBanner span {
  color: #07111f;
}

.vzCreditBanner button {
  min-height: 42px;
  min-width: 120px;
  border: 0;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-weight: 900;
}

.vzCreditBanner b {
  color: #fff;
  font-size: 24px;
}

.vzAssignNumbersGrid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  gap: 52px;
  padding: 34px 54px;
}

.vzAssignNumbersGrid aside {
  display: grid;
  align-content: start;
  gap: 18px;
}

.vzAssignNumbersGrid label {
  display: grid;
  gap: 8px;
  color: #343b46;
}

.vzAssignNumbersGrid aside > label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}

.vzAssignNumbersGrid input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.vzNumberLineSelect {
  min-height: 46px;
  border: 1px solid #cfd4dc;
  border-radius: 6px;
  background: #fff;
  color: #343b46;
  text-align: left;
  font-weight: 900;
}

.vzNumberLineSelect.active {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.vzFormTwo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vzFormTwo label:nth-child(3) {
  grid-column: span 1;
}

.vzFormTwo .disabled {
  opacity: 0.5;
}

.vzNumberTabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 0;
  border-bottom: 1px solid #d5d8dd;
}

.vzNumberTabs button {
  min-height: 62px;
  border: 0;
  border-bottom: 4px solid transparent;
  background: #fff;
  color: #4c5360;
  font-size: 17px;
  font-weight: 900;
}

.vzNumberTabs button.active {
  border-bottom-color: #e4002b;
  color: #111;
}

.vzMdnPanel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
  padding: 30px 0;
}

.vzMdnPanel h3 {
  grid-column: 1 / -1;
  margin: 0;
}

.vzSearchBy {
  display: flex;
  grid-column: 1 / -1;
  gap: 12px;
}

.vzSearchBy button {
  min-height: 54px;
  border: 1px solid #9fa6b1;
  border-radius: 4px;
  background: #fff;
  padding: 0 24px;
  color: #3d4450;
  font-size: 18px;
}

.vzSearchBy button.active {
  box-shadow: inset 0 0 0 2px #111;
}

.vzMdnPanel label {
  display: grid;
  gap: 8px;
}

.vzOverviewLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  padding: 34px 54px 54px;
}

.vzOverviewLayout h2 {
  margin: 0 0 18px;
  font-size: 28px;
}

.vzOverviewLine {
  display: grid;
  gap: 16px;
  border: 1px solid #d5d8dd;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 16px;
  padding: 18px;
}

.vzOverviewLine.incomplete {
  border-color: #efb5a7;
  background: #fff8f6;
}

.vzOverviewLine header,
.vzOverviewLine dd {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.vzOverviewLine header span {
  display: block;
  color: #687386;
  font-size: 13px;
}

.vzOverviewLine dl {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 10px 18px;
  margin: 0;
}

.vzOverviewLine dt {
  color: #687386;
  font-weight: 800;
}

.vzOverviewLine dd {
  margin: 0;
  min-width: 0;
}

.vzOverviewLine dd b {
  flex: 0 0 auto;
}

.vzOverviewTotal {
  position: sticky;
  top: 24px;
  display: grid;
  align-content: start;
  gap: 10px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  padding: 24px;
}

.vzOverviewTotal h3,
.vzOverviewTotal p {
  margin: 0;
}

.vzOverviewTotal span,
.vzOverviewTotal p {
  color: #d8dbe0;
}

.vzOverviewTotal strong {
  font-size: 28px;
}

.vzDueTodayList {
  display: grid;
  gap: 8px;
  margin: 6px 0;
}

.vzDueTodayList dt,
.vzDueTodayList dd {
  margin: 0;
}

.vzDueTodayList dt {
  color: #d8dbe0;
  font-size: 13px;
}

.vzDueTodayList dd {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  font-weight: 900;
}

.vzDueTodayList small {
  color: #d8dbe0;
  font-weight: 600;
}

.vzOverviewTotal button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  margin-top: 10px;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .vzRealTop {
    grid-template-columns: 48px 180px 78px 78px 1fr;
  }

  .vzRealNav,
  .vzIconRail {
    display: none;
  }

  .vzDeviceCatalog,
  .vzPerkGrid,
  .vzUnlimitedGrid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .vzShopShell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .vzSelectedPhoneLayout {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .vzCompareTray {
    left: 24px;
    right: 24px;
  }

  .vzSkuRail {
    grid-column: 2;
    grid-row: 2;
    padding-top: 0;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  .vzLessonHeader {
    padding: 10px;
  }

  .vzRealPractice .vzStage {
    min-height: 560px;
  }

  .vzShopShell {
    grid-template-columns: 190px minmax(0, 1fr);
  }

  .vzShopRail {
    padding: 58px 14px 18px;
  }

  .vzShopContent {
    padding: 20px 24px 44px;
  }

  .vzDeviceCatalog,
  .vzPerkGrid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .vzOrderSubHeader,
  .vzLinesAssigned,
  .vzAddLinesPanel,
  .vzSelectedPhoneLayout,
  .vzProtectionIntro,
  .vzTradeForm,
  .vzAssignNumbersGrid {
    padding-left: 24px;
    padding-right: 24px;
  }

  .vzPromoTable {
    margin: 0 18px;
  }

  .vzPromoHead,
  .vzPromoRow {
    grid-template-columns: minmax(0, 1fr) 120px 160px;
  }

  .vzProtectionRealGrid {
    margin-left: 24px;
    margin-right: 24px;
  }
}

/* Trade-in flow rebuilt from the ordering screenshots */
.vzTradeFlowPage {
  min-height: 650px;
  overflow: visible;
}

.vzTradeCarrierStep,
.vzTradeDeviceStep,
.vzTradeConditionStep {
  position: relative;
  min-height: 560px;
  padding-bottom: 82px;
}

.vzTradeDataRow {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 340px);
  gap: 28px;
  align-items: center;
  min-height: 82px;
  padding: 0 54px;
  border-bottom: 1px solid #e0e2e5;
  color: #333942;
  font-size: 17px;
}

.vzTradeDataRow select,
.vzTradeImeiRow input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  border: 0;
  border-bottom: 2px solid #7e838a;
  border-radius: 0;
  background: #fff;
  color: #20242a;
  padding: 0 14px;
  font: inherit;
}

.vzTradeCarrierMenu {
  position: relative;
  z-index: 8;
}

.vzTradeCarrierMenu > button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #777d84;
  background: #fff;
  color: #20242a;
  text-align: left;
  font-size: 17px;
}

.vzTradeCarrierMenu > div {
  position: absolute;
  top: 49px;
  right: 0;
  left: 0;
  display: none;
  border: 1px solid #d7dade;
  background: #fff;
  box-shadow: 0 12px 28px rgb(0 0 0 / 15%);
}

.vzTradeCarrierMenu.open > div {
  display: grid;
}

.vzTradeCarrierMenu > div button {
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid #e2e4e7;
  background: #fff;
  color: #252a31;
  text-align: left;
  font-size: 17px;
}

.vzTradeCarrierMenu > div button:hover {
  background: #f3f5f7;
}

.vzTradeCarrierInfo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 32px;
  align-items: center;
  min-height: 210px;
  margin: 0 54px;
  padding: 36px 0;
  border-bottom: 1px solid #d7dade;
}

.vzTradeCarrierInfo h2 {
  margin: 0 0 24px;
  font-size: 22px;
}

.vzTradeCarrierInfo p {
  max-width: 680px;
  margin: 0;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.35;
}

.vzTradeScan {
  display: inline-block;
  width: 34px;
  height: 34px;
  border: 2px dashed #7f8794;
  background:
    linear-gradient(90deg, transparent 40%, #7f8794 40% 47%, transparent 47% 53%, #7f8794 53% 60%, transparent 60%),
    linear-gradient(#fff, #fff);
}

.vzTradeDone {
  position: absolute;
  bottom: 18px;
  left: 50%;
  min-width: 160px;
  transform: translateX(-50%);
}

.vzTradeDeviceStep .vzTradeDataRow {
  min-height: 88px;
}

.vzTradeImeiRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px) 48px;
  gap: 26px;
  align-items: center;
  padding: 24px 54px;
  border-bottom: 1px solid #e0e2e5;
}

.vzTradeImeiRow label {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
}

.vzTradeImeiRow p {
  margin: 6px 0;
  color: #303640;
  line-height: 1.4;
}

.vzTradeDeviceSummary {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  padding: 34px 28px 26px;
}

.vzTradeDeviceSummary .vzPhoneArt.hero {
  justify-self: center;
}

.vzTradeDeviceSummary h2 {
  margin: 0 0 22px;
  font-size: 28px;
}

.vzTradeDeviceSummary > div > button {
  border: 0;
  background: transparent;
  padding: 0;
  color: #111;
  font-size: 17px;
  font-weight: 900;
}

.vzTradeDeviceSummary > div > button span {
  margin-left: 8px;
  font-size: 28px;
  vertical-align: -2px;
}

.vzTradeDeviceSummary label {
  display: grid;
  gap: 8px;
  max-width: 430px;
  margin-top: 52px;
  color: #444b54;
}

.vzTradeDeviceSummary input {
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid #888;
  background: #fff;
  padding: 0 14px;
  font: inherit;
}

.vzTradeQuestions {
  border-top: 1px solid #e0e2e5;
}

.vzTradeQuestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px 28px;
  border-bottom: 1px solid #e0e2e5;
  font-size: 17px;
}

.vzTradeQuestion > button {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 0;
  background: transparent;
  color: #21262c;
  font-size: 17px;
}

.vzTradeQuestion i {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid #6f757d;
  border-radius: 50%;
}

.vzTradeQuestion button.selected i {
  border: 5px solid #fff;
  background: #111;
  box-shadow: 0 0 0 2px #6f757d;
}

.vzTradeWarning {
  margin: 0;
  padding: 15px 28px;
  background: #ffe466;
  color: #191c20;
  font-size: 18px;
  line-height: 1.25;
}

.vzTradeActions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  min-height: 92px;
  padding: 16px 28px 6px;
}

.vzTradeActions > div {
  grid-column: 2;
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 14px;
}

.vzTradeActions > button:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 180px;
}

.vzTradeActions > button:first-child {
  grid-column: 2;
  justify-self: end;
}

.vzAppraisedPill {
  min-width: 160px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  text-align: center;
  font-weight: 900;
}

.vzTradeActions strong {
  font-size: 19px;
}

@media (max-width: 900px) and (orientation: landscape) {
  .vzTradeDataRow,
  .vzTradeImeiRow {
    padding-left: 24px;
    padding-right: 24px;
  }

  .vzTradeCarrierInfo {
    margin-right: 24px;
    margin-left: 24px;
  }

  .vzTradeDeviceSummary {
    grid-template-columns: 190px minmax(0, 1fr);
  }
}

/* Screenshot-driven ordering practice additions */
.vzPreOrderPage,
.vzCustomerCheckout,
.vzOrderPage {
  min-height: 650px;
  background: #fff;
  color: #111;
}

.vzPreOrderPage {
  position: relative;
  padding: 26px 32px 90px;
}

.vzPrimaryPill {
  min-height: 42px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-weight: 900;
}

.vzPrimaryPill.disabled,
.vzPrimaryPill:disabled {
  background: #e5e6e8;
  color: #a6a8ab;
}

.vzLeadTitle {
  margin: -26px -32px 24px;
  padding: 10px;
  background: #191a1e;
  color: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
}

.vzLeadCustomer {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: center;
}

.vzLeadCustomer h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
}

.vzHouseIcon {
  font-size: 80px;
}

.vzLeadList {
  display: grid;
  gap: 9px;
  margin: 22px -28px 0;
  padding: 8px 0;
  background: #d8d8d8;
}

.vzLeadList button {
  display: flex;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid #c8c8c8;
  background: #fff;
  text-align: left;
  font-size: 20px;
  font-weight: 900;
}

.vzLeadActions {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  border-top: 1px solid #bbb;
  background: #fff;
}

.vzLeadActions button,
.vzFinalConfirmation section button {
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
  font-weight: 900;
}

.vzLeadActions button:not(:first-child),
.vzLeadActions .primary {
  background: #080808;
  color: #fff;
}

.vzCustomerLookup {
  padding-top: 0;
}

.vzCustomerLookup > nav {
  display: flex;
  gap: 38px;
  margin: 0 -32px;
  padding: 18px 34px;
  border-bottom: 1px solid #ddd;
  font-size: 18px;
}

.vzCustomerLookup > nav b {
  border-bottom: 4px solid #e60000;
}

.vzCustomerLookup > section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  min-height: 560px;
}

.vzCustomerLookup main {
  padding: 34px 60px;
  border-right: 1px solid #eee;
}

.vzCustomerLookup aside {
  padding: 30px;
}

.vzCustomerLookup aside h2 {
  border-bottom: 4px solid #111;
  padding-bottom: 10px;
}

.vzCustomerLookup label,
.vzCreditPage label,
.vzTradeDetails label,
.vzByodDetail label,
.vzViewTogetherSend label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.vzCustomerLookup input,
.vzCreditPage input,
.vzCreditPage select,
.vzTradeDetails input,
.vzTradeDetails select,
.vzByodDetail input,
.vzViewTogetherSend input {
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid #777;
  background: #fff;
  font-size: 17px;
}

.vzEmptyCustomer {
  display: flex;
  gap: 24px;
  margin-top: 54px;
  font-size: 58px;
}

.vzEmptyCustomer > div {
  flex: 1;
  font-size: 16px;
}

.vzEmptyCustomer p {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.vzKeypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
}

.vzKeypad button {
  min-height: 60px;
  border: 1px solid #fff;
  background: #060606;
  color: #fff;
  font-size: 18px;
}

.vzAddCustomer {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  padding: 0 14px;
  border: 7px solid #f20b24;
  background: #fff;
  font-size: 18px;
  font-weight: 900;
}

.vzCreditPage > h1 {
  display: inline-block;
}

.vzCreditPage > a {
  float: right;
  color: #111;
  font-weight: 900;
}

.vzCreditMeta {
  display: flex;
  align-items: end;
  gap: 16px;
}

.vzCreditMeta label {
  width: 165px;
}

.vzToggle {
  border-radius: 999px;
  background: #13a74c;
  color: #fff;
  padding: 5px 12px;
  font-weight: 900;
}

.vzDeliveryChoice {
  margin: 28px 0 16px;
  font-size: 17px;
}

.vzCreditEmail {
  display: flex;
  align-items: end;
  gap: 14px;
  max-width: 620px;
}

.vzCreditEmail label {
  flex: 1;
}

.vzCreditEmail button {
  min-height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-weight: 900;
}

.vzSuccessText,
.vzSuccessBanner {
  color: #0578b5;
  font-weight: 800;
}

.vzSuccessBanner {
  padding: 16px;
  background: #e8fff7;
  color: #165d4d;
}

.vzCustomerFields {
  display: grid;
  grid-template-columns: 1fr .65fr 1.35fr 1fr;
  gap: 24px 20px;
  margin-top: 26px;
}

.vzCoverage {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 28px 0;
  padding: 18px;
  border-bottom: 1px solid #aaa;
}

.vzCoverage span {
  flex: 1;
}

.vzCoachCallout {
  display: inline-block;
  margin: 18px;
  padding: 14px 18px;
  border: 2px solid #111;
  background: #fff;
  font-size: 18px;
}

.vzCoachCallout b {
  display: block;
  margin-top: 8px;
}

.vzCitySelect {
  display: grid;
  place-items: start center;
  padding-top: 150px;
}

.vzCitySelect section {
  display: grid;
  gap: 24px;
  width: 460px;
}

.vzCitySelect select {
  min-height: 54px;
  font-size: 18px;
}

.vzCitySelect button {
  justify-self: start;
}

.vzApprovedPage {
  padding: 60px 70px;
}

.vzApprovedPage > h1 {
  border-top: 4px solid #111;
  padding-top: 16px;
}

.vzApprovalGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  margin: 30px 0;
}

.vzApprovalGrid dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
}

.vzApprovalGrid dt,
.vzApprovalGrid dd {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}

.vzApprovalGrid dt {
  font-weight: 900;
}

.vzPlanHeader {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr) auto;
}

.vzReviewPlans {
  padding-bottom: 50px;
}

.vzNotice,
.vzInfoPanel {
  display: grid;
  gap: 5px;
  margin: 26px 40px;
  padding: 18px;
  background: #fffdeb;
}

.vzReviewPlans > section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  padding: 40px;
}

.vzReviewPlans article,
.vzReviewPlans section > div {
  padding: 24px;
  border: 1px solid #ddd;
}

.vzReviewPlans section > div {
  display: grid;
  gap: 14px;
  font-size: 22px;
}

.vzReviewPlans section > div > b {
  font-size: 38px;
}

.vzCarrierChoices,
.vzPortChoices {
  display: grid;
  width: 270px;
  border: 1px solid #ddd;
}

.vzCarrierChoices button,
.vzPortChoices button {
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-bottom: 1px solid #ddd;
  background: #fff;
  text-align: left;
  font-size: 17px;
}

.vzTradeDetails {
  display: grid;
  gap: 18px;
  padding: 30px 70px;
}

.vzTradeDetails label {
  grid-template-columns: 1fr 340px;
  align-items: center;
  min-height: 56px;
  border-bottom: 1px solid #eee;
  font-size: 17px;
}

.vzTradeDetails button {
  justify-self: center;
}

.vzTradeCondition {
  padding: 26px;
}

.vzTradeHero {
  display: flex;
  align-items: center;
  gap: 35px;
}

.vzTradeQuestion {
  display: grid;
  grid-template-columns: 1fr 90px 90px;
  gap: 12px;
  padding: 22px 8px;
  border-top: 1px solid #ddd;
  font-size: 17px;
}

.vzTradeWarning {
  margin: 0 -26px 18px;
  padding: 15px 26px;
  background: #ffe56c;
  font-size: 18px;
}

.vzTradeValue {
  float: right;
  font-size: 20px;
}

.vzModalShade {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 48%);
}

.vzEsimModal {
  width: min(720px, 80%);
  padding: 55px;
  background: #fff;
}

.vzEsimModal > div {
  display: flex;
  gap: 18px;
  margin-top: 50px;
}

.vzEsimModal button {
  flex: 1;
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-weight: 900;
}

.vzByodDetail {
  display: grid;
  gap: 28px;
  padding: 24px 70px;
}

.vzByodDetail > p {
  text-align: right;
}

.vzByodDetail label {
  max-width: 470px;
  font-size: 17px;
}

.vzByodProtectionRow {
  display: flex;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 16px;
  border: 6px solid #f20b24;
  background: #fff;
  font-size: 18px;
}

.vzPortMethod,
.vzPortConsent {
  display: flex;
  gap: 14px;
}

.vzPortMethod button,
.vzPortConsent button {
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #111;
  background: #fff;
  font-size: 16px;
}

.vzReviewLaunch {
  display: grid;
  align-content: space-between;
  padding: 120px 40px 24px;
}

.vzReviewLaunch h1 {
  font-size: clamp(34px, 5vw, 58px);
}

.vzReviewLaunch button {
  justify-self: center;
}

.vzInternalReview > header,
.vzViewTogetherSend > header,
.vzRepCheckout > header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 28px;
  align-items: center;
  padding: 18px 34px;
  border-bottom: 1px solid #ddd;
}

.vzInternalReview > section,
.vzRepCheckout > section {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 34px;
  padding: 36px;
}

.vzOrderCharges h2,
.vzOrderCharges p,
.vzRepCheckout section h2 {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.vzShipping {
  margin: 0 36px;
  padding: 20px;
  border-top: 1px solid #ddd;
}

.vzShipping h2,
.vzCustomerCard h2,
.vzCustomerCard p {
  display: flex;
  justify-content: space-between;
}

.vzViewTogetherSend > section {
  padding: 70px;
}

.vzViewTogetherSend label {
  max-width: 540px;
}

.vzCheckoutTop {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 16px 40px;
}

.vzCheckoutTop button {
  min-height: 44px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-weight: 900;
}

.vzCustomerCheckout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  background: #777;
}

.vzCheckoutProgress {
  min-height: 650px;
  padding: 35px;
  background: #fff;
}

.vzCheckoutProgress p {
  display: flex;
  justify-content: space-between;
}

.vzCheckoutProgress ol {
  display: grid;
  gap: 25px;
  margin-top: 60px;
  padding-left: 25px;
}

.vzCheckoutProgress li::marker {
  color: #aaa;
}

.vzCheckoutProgress li.active {
  font-weight: 900;
}

.vzCheckoutProgress li.active::marker,
.vzCheckoutProgress li.done::marker {
  color: #159ed1;
}

.vzCustomerCheckout > main {
  display: grid;
  place-items: center;
  padding: 30px;
  overflow: auto;
}

.vzCustomerCard,
.vzLegalCard {
  width: min(620px, 100%);
  max-height: 590px;
  overflow: auto;
  padding: 24px;
  background: #fff;
}

.vzCustomerCard h1,
.vzLegalCard h1 {
  font-size: 38px;
}

.vzCustomerCard h2 {
  border-top: 4px solid #111;
  padding-top: 22px;
}

.vzLegalCard h2 {
  margin-top: 30px;
}

.vzDeclinedBanner {
  margin: -24px -24px 24px;
  padding: 18px 24px;
  background: #ef932b;
  color: #fff;
  font-weight: 900;
}

.vzPaymentOption {
  display: block;
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
}

.vzBankGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.vzBankGrid button {
  min-height: 52px;
  border: 1px solid #eee;
  background: #fff;
  font-weight: 900;
}

.vzAgreement {
  display: block;
  width: 100%;
  margin: 12px 0;
  padding: 15px;
  border: 1px solid #ccc;
  background: #fff;
  text-align: left;
  font-size: 16px;
}

.vzAgreement.active {
  border-color: #168bc0;
  background: #eefaff;
}

.vzSignature {
  min-height: 120px;
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ddd;
  font-family: cursive;
  font-size: 42px;
  font-style: italic;
  transform: rotate(-4deg);
}

.vzFinalConfirmation section {
  padding: 50px;
}

.vzFinalConfirmation section > div {
  display: flex;
  gap: 20px;
  margin: 30px 0;
}

.vzFinalConfirmation section .vzPrimaryPill {
  border-color: #000;
  background: #000;
  color: #fff;
}

@media (max-width: 900px) and (orientation: landscape) {
  .vzPreOrderPage,
  .vzCustomerCheckout,
  .vzOrderPage {
    min-height: 560px;
  }

  .vzCustomerCheckout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .vzCheckoutProgress {
    min-height: 560px;
    padding: 22px;
  }

  .vzCustomerCard,
  .vzLegalCard {
    max-height: 500px;
  }
}

/* Keep the rebuilt trade-in layout ahead of the older simulator rules. */
.vzTradeFlowPage .vzTradeQuestion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 90px;
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px 28px;
  border-top: 0;
  border-bottom: 1px solid #e0e2e5;
  font-size: 17px;
}

.vzTradeFlowPage .vzTradeWarning {
  margin: 0;
  padding: 15px 28px;
  background: #ffe466;
  color: #191c20;
  font-size: 18px;
  line-height: 1.25;
}

.vzShopHeaderActions button.disabled,
.vzShopHeaderActions button:disabled,
.vzCreditEmail button.disabled,
.vzCreditEmail button:disabled {
  cursor: not-allowed;
  border-color: #d9dce0;
  background: #e7e9ec;
  color: #8d929a;
}

.vzPlanRuleNotice {
  margin: 16px 0;
  padding: 14px 18px;
  border-left: 5px solid #d71920;
  background: #fff0f1;
  color: #24282e;
  font-weight: 800;
}

.vzPlanRuleNotice.neutral {
  border-left-color: #168bc0;
  background: #eef9ff;
}

.vzBlockedReview > section {
  max-width: 760px;
  margin: 60px auto;
  padding: 32px;
  border: 1px solid #d6d9de;
  box-shadow: 0 10px 30px rgb(0 0 0 / 8%);
}

.vzBlockedReview h1 {
  margin-top: 0;
  font-size: 34px;
}

.vzBlockedReview li {
  margin: 12px 0;
  line-height: 1.35;
}

/* Per-line promotions, payoff proof, and delayed bill-credit training flow. */
.vzPromoPerLine {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 690px;
  padding: 0;
}

.vzPromoPerLine > main {
  min-width: 0;
  padding: 28px 0 0;
}

.vzPromoLineRail {
  display: grid;
  align-content: start;
  gap: 10px;
  background: #f3f4f6;
  padding: 30px 18px;
}

.vzPromoLineRail h3 {
  margin: 0 6px 8px;
}

.vzPromoLineRail button {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 1px solid #d5d8dd;
  border-radius: 8px;
  background: #fff;
  color: #20242b;
  padding: 16px;
  text-align: left;
}

.vzPromoLineRail button.active {
  border-color: #111;
  box-shadow: inset 4px 0 #d71920;
}

.vzPromoLineRail span,
.vzPromoLineRail small {
  color: #6b7280;
}

.vzPromoLineRail small {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.vzPromoRow.accepted {
  background: linear-gradient(90deg, #f0fff6 0%, #fff 38%);
  box-shadow: inset 5px 0 #16824a;
}

.vzPromoTitle {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin: 0 44px 18px 54px;
}

.vzPromoTitle span {
  color: #d71920;
  font-weight: 900;
  text-transform: uppercase;
}

.vzPromoTitle h2,
.vzPromoTitle p {
  margin: 4px 0 0;
}

.vzPromoTitle p {
  max-width: 460px;
  color: #5f6672;
}

.vzRealDeviceCard.ineligible,
.vzPopularPlanColumns article.ineligible,
.vzUnlimitedGrid button.ineligible {
  filter: grayscale(1);
  opacity: 0.38;
}

.vzRealDeviceCard.ineligible button,
.vzPopularPlanColumns article.ineligible button,
.vzUnlimitedGrid button.ineligible {
  cursor: not-allowed;
}

.vzEligibilityReason {
  color: #b42318 !important;
  font-size: 12px;
  font-weight: 900;
}

.vzPayoffProof > section {
  max-width: 900px;
  margin: 42px auto;
  padding: 34px;
  border: 1px solid #d5d8dd;
  background: #fff;
  box-shadow: 0 16px 42px rgb(0 0 0 / 10%);
}

.vzPayoffProof h1 {
  margin: 12px 0;
  font-size: 38px;
}

.vzPayoffBadge {
  display: inline-block;
  border-radius: 999px;
  background: #fff0f1;
  color: #b42318;
  padding: 7px 12px;
  font-weight: 900;
}

.vzPayoffMethods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.vzPayoffMethods > button {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 190px;
  border: 2px solid #111;
  border-radius: 10px;
  background: #fff;
  color: #17191d;
  padding: 24px;
  text-align: left;
}

.vzPayoffMethods strong {
  font-size: 24px;
}

.vzPayoffMethods span {
  color: #626975;
  line-height: 1.4;
}

.vzPayoffMethods input {
  min-height: 42px;
  border: 1px solid #b8bdc5;
  background: #f7f8fa;
  padding: 0 12px;
}

.vzPayoffWaiting,
.vzPayoffComplete {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 24px 0 8px;
  text-align: center;
}

.vzMockQr {
  display: grid;
  grid-template-columns: repeat(21, 7px);
  grid-template-rows: repeat(21, 7px);
  gap: 1px;
  border: 12px solid #fff;
  outline: 2px solid #111;
  background: #fff;
}

.vzMockQr i {
  display: block;
  width: 7px;
  height: 7px;
  background: #fff;
}

.vzMockQr i.on {
  background: #111;
}

.vzEmailSentIcon,
.vzPayoffComplete b {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: #e8f8ee;
  color: #118447;
  font-size: 54px;
}

.vzUploadProgress {
  overflow: hidden;
  width: min(460px, 90%);
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
}

.vzUploadProgress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #111;
  animation: vzUploadFiveSeconds 5s linear both;
  transform-origin: left;
}

@keyframes vzUploadFiveSeconds {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.vzBillCreditSummary {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 24px 36px;
  border: 2px solid #16824a;
  border-radius: 10px;
  background: #eefbf3;
  padding: 22px !important;
}

.vzBillCreditSummary > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vzBillCreditSummary > div:first-child strong {
  color: #08783f;
  font-size: 30px;
}

.vzBillCreditSummary > p {
  margin: 0;
  color: #34443b;
  line-height: 1.45;
}

.vzCreditSchedule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.vzCreditSchedule article {
  display: grid;
  gap: 5px;
  border: 1px solid #b8dfc7;
  border-radius: 7px;
  background: #fff;
  padding: 12px;
}

.vzCreditSchedule span,
.vzCreditSchedule small {
  color: #59665e;
  font-size: 12px;
}

.lessonImageCallout:has(img[src*="nova-credit-"]) {
  overflow: hidden;
  border: 1px solid #dbe7f4;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(45, 212, 191, 0.14), transparent 38%),
    linear-gradient(145deg, #f7fbff, #eef5ff);
  box-shadow: 0 18px 45px rgba(15, 42, 82, 0.1);
  padding: 22px;
}

.lessonImageCallout:has(img[src*="nova-credit-"]) img {
  aspect-ratio: 16 / 9;
  max-height: none;
  object-fit: cover;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(7, 25, 57, 0.18);
}

@media (max-width: 900px) {
  .vzPromoPerLine {
    grid-template-columns: 1fr;
  }

  .vzPromoLineRail {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .vzPromoLineRail h3 {
    grid-column: 1 / -1;
  }

  .vzPayoffMethods {
    grid-template-columns: 1fr;
  }
}