/* ------------------------------------------------------------------
   Vivint section — /vivint/

   Built to Vivint's own brand rather than the theme's: pure black type on
   white and near-white grounds, the signature mint (#05E5AF) as the single
   accent, uppercase display headings, and the fully-round pill buttons the
   brand uses everywhere.

   Vivint sets its display face in Circular, which is proprietary. DM Sans is
   the closest geometric grotesque available on Google Fonts and is declared
   ahead of Vivint's own Helvetica fallback stack, so the page degrades to the
   same faces the brand itself falls back to.
   ------------------------------------------------------------------ */

.viv {
  --viv-mint: #05E5AF;
  --viv-mint-dk: #00A073;
  --viv-ink: #000000;
  --viv-deep: #10201F;
  --viv-green: #096049;
  --viv-grey: #707070;
  --viv-grey-2: #555555;
  --viv-line: #D4D4D4;
  --viv-wash: #F5F5F5;
  --viv-wash-2: #F8F8F8;
  --viv-font: "DM Sans", "Vivint Circular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--viv-font);
  color: var(--viv-ink);
  background: #fff;
}
.viv * { box-sizing: border-box; }
.viv .viv-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.viv section { padding: 88px 0; }
.viv p { margin: 0 0 14px; line-height: 1.6; }

/* Vivint sets display headings in caps with tight tracking. */
.viv h1, .viv h2, .viv .viv-dsp {
  text-transform: uppercase; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.02; margin: 0 0 16px; text-wrap: balance;
}
.viv h1 { font-size: clamp(2.4rem, 6vw, 4.1rem); }
.viv h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.viv h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.viv .viv-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--viv-mint-dk); margin: 0 0 12px; }
.viv .viv-lede { font-size: 1.05rem; color: var(--viv-grey-2); max-width: 58ch; }
.viv .viv-head { max-width: 60ch; margin: 0 0 46px; }

.viv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--viv-font); font-weight: 700; font-size: .95rem; text-decoration: none;
  border-radius: 100px; padding: 15px 30px; border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease; }
.viv-btn:hover { transform: translateY(-2px); }
.viv-btn--mint { background: var(--viv-mint); color: #000; }
.viv-btn--mint:hover { background: #00d29f; }
.viv-btn--dark { background: #000; color: #fff; }
.viv-btn--line { background: transparent; color: #000; border-color: #000; }
.viv-btn--line:hover { background: #000; color: #fff; }
.viv-btn--onblack { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.viv-btn--onblack:hover { background: #fff; color: #000; }

/* ---- hero: black ground, mint rule, one big statement ---- */
.viv-hero { background: #000; color: #fff; padding: 96px 0 88px; position: relative; overflow: hidden; }
.viv-hero::after { content: ""; position: absolute; right: -14%; top: -28%; width: 62%; height: 150%;
  background: radial-gradient(closest-side, rgba(5,229,175,.22), transparent 70%); pointer-events: none; }
.viv-hero__in { position: relative; z-index: 1; max-width: 860px; }
.viv-hero h1 { color: #fff; }
.viv-hero h1 em { font-style: normal; color: var(--viv-mint); }
.viv-hero p { color: rgba(255,255,255,.76); font-size: 1.08rem; max-width: 54ch; }
.viv-hero__rule { width: 76px; height: 5px; background: var(--viv-mint); border-radius: 100px; margin: 0 0 26px; }
.viv-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 24px; }
.viv-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .84rem; color: rgba(255,255,255,.62); }
.viv-hero__facts span::before { content: "\2014"; color: var(--viv-mint); margin-right: 8px; }

/* ---- promo band ---- */
.viv-band { background: var(--viv-mint); color: #000; padding: 20px 0; }
.viv-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 18px; text-align: center; font-weight: 700; }
.viv-band small { font-weight: 500; opacity: .72; }

/* ---- plans ---- */
.viv-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.viv-plan { border: 2px solid var(--viv-line); border-radius: 24px; padding: 32px 30px;
  display: flex; flex-direction: column; background: #fff; position: relative; }
.viv-plan--pop { border-color: #000; background: #000; color: #fff; }
.viv-plan--pop h3 { color: #fff; }
.viv-plan--pop .viv-plan__tag { color: rgba(255,255,255,.66); }
.viv-plan--pop .viv-price__term { color: rgba(255,255,255,.60); }
.viv-plan--pop li { color: rgba(255,255,255,.88); }
.viv-plan__flag { position: absolute; top: -14px; left: 30px; background: var(--viv-mint); color: #000;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border-radius: 100px; padding: 6px 15px; }
.viv-plan__tag { font-size: .9rem; color: var(--viv-grey); margin: 0 0 20px; }
.viv-price { display: flex; align-items: flex-start; gap: 2px; margin-bottom: 4px; }
.viv-price__cur { font-size: 1.3rem; font-weight: 700; margin-top: 9px; }
.viv-price__amt { font-size: 3.2rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; }
.viv-price__per { font-size: .95rem; font-weight: 600; color: var(--viv-grey); align-self: flex-end; margin: 0 0 9px 5px; }
.viv-plan--pop .viv-price__per { color: rgba(255,255,255,.6); }
.viv-price__term { font-size: .78rem; color: var(--viv-grey); margin: 0 0 22px; line-height: 1.5; }
.viv-plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px;
  font-size: .9rem; flex: 1; }
.viv-plan li { display: flex; gap: 10px; align-items: flex-start; color: var(--viv-grey-2); }
.viv-plan li::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--viv-mint); flex-shrink: 0; margin-top: 7px; }
/* What a tier does NOT cover is the thing people get wrong about Vivint's
   entry plan, so it is stated rather than left to be discovered. */
.viv-plan__ex { border-top: 1px solid var(--viv-line); padding-top: 16px; margin-bottom: 22px; }
.viv-plan--pop .viv-plan__ex { border-color: rgba(255,255,255,.22); }
.viv-plan__ex b { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--viv-grey); margin-bottom: 8px; }
.viv-plan__ex span { font-size: .86rem; color: var(--viv-grey); }
.viv-plan .viv-btn { width: 100%; }

/* ---- feature rows ---- */
.viv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; }
.viv-card { border-top: 3px solid var(--viv-mint); padding-top: 20px; }
.viv-card p { font-size: .92rem; color: var(--viv-grey-2); margin: 0; }

/* ---- steps ---- */
.viv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.viv-step__n { font-size: 3rem; font-weight: 700; line-height: 1; color: var(--viv-mint);
  letter-spacing: -0.04em; margin-bottom: 10px; }

/* ---- dark closing block ---- */
.viv-close { background: #000; color: #fff; }
.viv-close h2 { color: #fff; }
.viv-close p { color: rgba(255,255,255,.72); max-width: 54ch; }
.viv-close .viv-hero__cta { margin-bottom: 0; }

/* ---- legal ---- */
.viv-legal { background: var(--viv-wash); }
.viv-legal p { font-size: .78rem; color: var(--viv-grey); margin: 0 0 10px; line-height: 1.65; }

@media (max-width: 860px) {
  .viv section { padding: 60px 0; }
  .viv-hero { padding: 64px 0 56px; }
}

/* ---- the issued authorized-retailer lockup ----
   Carrier-issued artwork is never recoloured or redrawn, so on the black hero
   it sits on a white chip rather than being inverted. */
.viv-lockup { display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 14px; padding: 14px 20px; margin: 0 0 26px; }
.viv-lockup img { display: block; width: auto; height: auto; max-width: 240px; max-height: 66px; }
.viv-lockup--sm { background: transparent; padding: 0; margin: 0 0 18px; }
.viv-lockup--sm img { max-width: 190px; max-height: 52px; }

/* ---- footer ----
   Added after the section shipped as a one-pager with no footer at all. Same
   restraint as the rest of the page: near-white ground, a mint rule to open it,
   black type, nothing competing with the plans above. */
.viv-foot { background: var(--viv-wash-2); border-top: 3px solid var(--viv-mint);
  padding: 54px 0 34px; font-family: var(--viv-font); color: var(--viv-grey-2); }
.viv-foot__top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
  gap: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--viv-line); }
.viv-foot__who { font-size: .88rem; line-height: 1.65; max-width: 62ch; margin: 14px 0 0; }
.viv-foot__who strong { color: var(--viv-ink); }
.viv-foot__contact p { font-size: .86rem; margin: 0 0 9px; line-height: 1.55; }
.viv-foot__lbl { font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--viv-grey); margin: 0 0 12px !important; }
.viv-foot__tel { font-size: 1.24rem; font-weight: 700; color: var(--viv-ink);
  text-decoration: none; letter-spacing: -0.02em; }
.viv-foot__tel:hover { color: var(--viv-mint-dk); }
.viv-foot__contact a { color: var(--viv-grey-2); }
.viv-foot__disc { padding: 26px 0 8px; }
.viv-foot__disc p { font-size: .78rem; line-height: 1.7; color: var(--viv-grey);
  margin: 0 0 12px; max-width: 92ch; }
.viv-foot__disc strong { color: var(--viv-grey-2); }
.viv-foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 14px 24px; padding-top: 22px; border-top: 1px solid var(--viv-line); }
.viv-foot__bottom p { font-size: .78rem; color: var(--viv-grey); margin: 0; }
.viv-foot__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.viv-foot__legal a { font-size: .78rem; color: var(--viv-grey); text-decoration: none; }
.viv-foot__legal a:hover { color: var(--viv-ink); text-decoration: underline; }
@media (max-width: 760px) {
  .viv-foot { padding: 40px 0 28px; }
  .viv-foot__top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}