/* ============================================================
 * Cosmaestro — Elderly theme layer (loaded last).
 * Bigger text, stronger contrast, no distracting motion, big buttons,
 * simple one-column layouts. Uses !important because main.css does.
 * All theme sizes are in rem, so the root size scales the whole site:
 *   A = 19px · A+ = 21px · A++ = 23px
 * ============================================================ */
html { font-size: 118.75% !important; }
html.el-fs-2 { font-size: 131.25% !important; }
html.el-fs-3 { font-size: 143.75% !important; }
@media (max-width: 640px) {
  html { font-size: 112.5% !important; }
  html.el-fs-2 { font-size: 125% !important; }
  html.el-fs-3 { font-size: 137.5% !important; }
}
:root {
  --text-gray: #d9e0e6 !important;
  --text-muted: #b3bdc6 !important;
}
body { line-height: 1.65 !important; letter-spacing: .005em !important; }
p, li { color: var(--text-gray); }
:focus-visible { outline: 3px solid #ffd76a !important; outline-offset: 3px !important; }
em, i, .plan-monthly { font-style: normal !important; }

/* ---------- Calm: no movement ---------- */
.reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }
.space-stars, .hero-space-stars, .hero-glow { display: none !important; }
.wall-row { animation: none !important; }
body::before { animation: none !important; }
.hero-trust { display: none !important; }
html { scroll-behavior: auto !important; }

/* ---------- Header ---------- */
.nav-menu a { font-size: 1rem !important; font-weight: 600 !important; }
.nav-cta-btn { font-size: .95rem !important; padding: 12px 20px !important; }
.el-fs-btn {
  display: inline-flex !important; align-items: baseline !important; justify-content: center !important; gap: 1px !important;
  min-width: 52px !important; height: 44px !important; padding: 0 10px !important; border-radius: 10px !important; cursor: pointer !important;
  background: rgba(255,255,255,.08) !important; border: 1.5px solid rgba(255,255,255,.28) !important; color: #fff !important; font-family: inherit !important;
}
.el-fs-a { font-size: 1.05rem !important; font-weight: 800 !important; }
.el-fs-plus { font-size: .85rem !important; font-weight: 800 !important; color: #8af2ef !important; }
.el-fs-btn[data-level="2"], .el-fs-btn[data-level="3"] { border-color: #8af2ef !important; }
@media (max-width: 768px) {
  .el-fs-btn { min-width: 46px !important; height: 40px !important; }
}

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary, .el-btn {
  min-height: 58px !important; padding: 14px 28px !important; border-radius: 14px !important;
  font-size: 1.05rem !important; font-weight: 800 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important;
}
.el-btn { cursor: pointer !important; border: 0 !important; font-family: inherit !important; text-decoration: none !important; }
.el-btn-main { background: var(--gradient-cta) !important; color: #230804 !important; box-shadow: 0 10px 28px var(--glow-cta) !important; }
.el-btn-wa { background: #25d366 !important; color: #06210f !important; box-shadow: 0 8px 22px rgba(37,211,102,.3) !important; }
.el-btn-wa svg { flex-shrink: 0 !important; }
.el-center { text-align: center !important; margin-top: 34px !important; }

/* ---------- Hero ---------- */
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem) !important; letter-spacing: -.5px !important; line-height: 1.15 !important; }
.hero-sub { color: #e8edf1 !important; font-size: clamp(1.08rem, 2.2vw, 1.25rem) !important; max-width: 640px !important; margin-bottom: 28px !important; }
.hero-price { font-size: 1rem !important; padding: 8px 18px !important; margin: -6px auto 24px !important; }
.hero-price strong { font-size: 1.35rem !important; }
.hero-btns { gap: 14px !important; margin-bottom: 18px !important; }
.pq-hero-link { font-size: 1rem !important; margin: 0 auto 18px !important; padding: 8px 6px !important; }
.el-reassure {
  list-style: none !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px 26px !important;
  margin: 6px auto 0 !important; padding: 0 !important; max-width: 760px !important;
}
.el-reassure li { display: inline-flex !important; align-items: center !important; gap: 9px !important; color: #fff !important; font-size: 1rem !important; font-weight: 600 !important; }
.el-reassure svg { width: 22px !important; height: 22px !important; color: #4ade80 !important; flex-shrink: 0 !important; }
@media (max-width: 640px) {
  .hero-btns { flex-direction: column !important; }
  .hero-btns a { width: 100% !important; }
  .el-reassure { flex-direction: column !important; align-items: flex-start !important; width: fit-content !important; }
}

/* ---------- Section headings ---------- */
.section-header h2 { font-size: clamp(1.75rem, 4vw, 2.5rem) !important; line-height: 1.2 !important; text-wrap: balance; }
.section-header p { font-size: 1.05rem !important; color: var(--text-gray) !important; text-wrap: balance; }

/* ---------- How it works ---------- */
.el-steps {
  list-style: none !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important;
  max-width: 1040px !important; margin: 10px auto 0 !important; padding: 0 !important; counter-reset: none !important;
}
.el-steps li {
  position: relative !important; padding: 30px 24px 26px !important; border-radius: 20px !important; text-align: center !important;
  background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important;
}
.el-num {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 58px !important; height: 58px !important; border-radius: 50% !important; margin-bottom: 14px !important;
  font-family: var(--font-display) !important; font-size: 1.6rem !important; font-weight: 800 !important;
  background: linear-gradient(135deg, #0b8578, #1fb5d6) !important; color: #fff !important;
}
.el-steps h3 { color: #fff !important; font-size: 1.25rem !important; font-weight: 700 !important; margin-bottom: 8px !important; }
.el-steps p { font-size: 1rem !important; color: var(--text-gray) !important; }
@media (max-width: 860px) { .el-steps { grid-template-columns: 1fr !important; max-width: 520px !important; } }

/* ---------- Plans: two clear steps, simple list ---------- */
.el-step-label {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important;
  max-width: 760px !important; margin: 26px auto 14px !important; text-align: center !important;
  color: #fff !important; font-size: 1.15rem !important; font-weight: 700 !important; line-height: 1.35 !important;
}
.el-step-num {
  flex-shrink: 0 !important; width: 38px !important; height: 38px !important; border-radius: 50% !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: #1fb5d6 !important; color: #04161a !important; font-weight: 800 !important; font-size: 1.05rem !important;
}
.plan-tabs { padding: 6px !important; gap: 6px !important; }
.plan-tab { min-height: 54px !important; padding: 12px 22px !important; font-size: 1.05rem !important; font-weight: 700 !important; }
.plans-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 980px !important; gap: 22px !important; }
.plan-card { min-height: 0 !important; padding: 30px 26px !important; }
.plan-card.highlighted { transform: none !important; border-width: 2px !important; }
/* Best value first, then Lifetime, then the shorter plans. */
.plan-card[data-card="m12"] { order: 1 !important; }
.plan-card[data-card="lifetime"] { order: 2 !important; }
.plan-card[data-card="m6"] { order: 3 !important; }
.plan-card[data-card="m3"] { order: 4 !important; }
.plan-name { font-size: 1.45rem !important; }
.plan-period { font-size: 1.1rem !important; }
.plan-monthly { font-size: 1rem !important; color: #e8edf1 !important; }
.plan-save { font-size: .9rem !important; }
.plan-payback { font-size: .95rem !important; max-width: 300px !important; }
.plan-lifetime-sub { font-size: 1rem !important; }
.plan-old-price { font-size: 1.05rem !important; }
.plan-features li { font-size: 1rem !important; padding: 5px 0 !important; color: #e8edf1 !important; }
.plan-features li:nth-child(n+6) { display: none !important; }       /* keep the list short */
.plan-features li:has(.js-devices) { display: none !important; }    /* device count already under the title */
.plan-btn { min-height: 58px !important; font-size: 1.05rem !important; font-weight: 800 !important; padding: 15px !important; }
.plans-trial { max-width: 980px !important; }
.plans-trial-text strong { font-size: 1.2rem !important; }
.plans-trial-text span { font-size: 1rem !important; }
.plans-trial-btn { min-height: 54px !important; font-size: 1rem !important; }
@media (max-width: 760px) {
  .plans-grid { grid-template-columns: 1fr !important; max-width: 520px !important; }
  .el-step-label { font-size: 1.05rem !important; justify-content: flex-start !important; text-align: left !important; }
  .plan-tab { padding: 12px 10px !important; font-size: .98rem !important; }
}

/* ---------- Which TV do you have? ---------- */
.el-dev-grid {
  list-style: none !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important;
  max-width: 1040px !important; margin: 0 auto !important; padding: 0 !important;
}
.el-dev {
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; text-align: center !important;
  padding: 22px 14px !important; border-radius: 18px !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important;
}
.el-dev svg { width: 40px !important; height: 40px !important; color: #8af2ef !important; }
.el-dev b { color: #fff !important; font-size: 1.02rem !important; line-height: 1.3 !important; }
.el-works { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #4ade80 !important; font-weight: 700 !important; font-size: .95rem !important; }
.el-works svg { width: 18px !important; height: 18px !important; color: #4ade80 !important; }
.el-note {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; flex-wrap: wrap !important;
  max-width: 1040px !important; margin: 22px auto 0 !important; padding: 20px 24px !important; border-radius: 18px !important;
  background: rgba(37,211,102,.08) !important; border: 1px solid rgba(37,211,102,.35) !important;
}
.el-note p { flex: 1 1 340px !important; color: #e8edf1 !important; font-size: 1.02rem !important; }
.el-note strong { color: #fff !important; }
@media (max-width: 860px) { .el-dev-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px) { .el-note .el-btn { width: 100% !important; } }

/* ---------- Movies / series carousel: big, calm arrows ---------- */
.carousel-3d-nav { width: 58px !important; height: 58px !important; }
.carousel-3d-nav svg { width: 24px !important; height: 24px !important; }

/* ---------- We help you / message me ---------- */
.el-help-box {
  display: grid !important; grid-template-columns: 1.05fr 1fr !important; gap: 34px !important; align-items: center !important;
  max-width: 1040px !important; margin: 0 auto !important; padding: 36px !important; border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(11,133,120,.18), rgba(31,181,214,.06)) !important; border: 1px solid rgba(31,181,214,.35) !important;
}
.el-help-text h2 { font-family: var(--font-display) !important; color: #fff !important; font-size: clamp(1.6rem, 3.4vw, 2.2rem) !important; line-height: 1.2 !important; margin-bottom: 12px !important; }
.el-help-text p { font-size: 1.05rem !important; margin-bottom: 22px !important; }
.el-help-form { display: flex !important; flex-direction: column !important; gap: 14px !important; }
.el-help-form label { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.el-help-form label > span { color: #fff !important; font-weight: 700 !important; font-size: 1rem !important; }
.el-help-form input, .el-help-form select {
  width: 100% !important; min-height: 56px !important; padding: 12px 16px !important; border-radius: 12px !important;
  font-family: inherit !important; font-size: 1.05rem !important; color: #fff !important;
  background: rgba(0,0,0,.28) !important; border: 1.5px solid rgba(255,255,255,.22) !important; outline: none !important;
}
.el-help-form select option { color: #111 !important; }
.el-help-form input:focus, .el-help-form select:focus { border-color: #1fb5d6 !important; }
.el-help-form .el-btn { width: 100% !important; margin-top: 4px !important; }
.el-help-form .el-btn:disabled { opacity: .6 !important; }
.el-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.el-form-msg { padding: 12px 14px !important; border-radius: 12px !important; font-size: 1rem !important; font-weight: 600 !important; }
.el-form-msg.is-ok { background: rgba(74,222,128,.14) !important; color: #4ade80 !important; border: 1px solid rgba(74,222,128,.4) !important; }
.el-form-msg.is-err { background: rgba(255,90,78,.12) !important; color: #ffb4a8 !important; border: 1px solid rgba(255,90,78,.4) !important; }
.el-form-msg[hidden] { display: none !important; }
@media (max-width: 860px) {
  .el-help-box { grid-template-columns: 1fr !important; padding: 26px 20px !important; }
  .el-help-text .el-btn { width: 100% !important; }
}

/* ---------- FAQ ---------- */
.faq-header { font-size: 1.1rem !important; padding: 20px 22px !important; min-height: 64px !important; font-weight: 700 !important; color: #fff !important; }
.faq-icon { font-size: 1.6rem !important; }
.faq-body-inner { font-size: 1.02rem !important; line-height: 1.7 !important; color: #e8edf1 !important; }

/* ---------- Final CTA + footer ---------- */
.final-cta p { font-size: 1.1rem !important; }
.footer a, .footer p { font-size: 1rem !important; }

/* ---------- Sticky WhatsApp bar ---------- */
/* Desktop: tidy corner button. Phone: full-width bar fixed to the bottom. */
.sticky-trial, .sticky-trial.visible {
  left: auto !important; right: 22px !important; bottom: 22px !important; transform: none !important;
  padding: 8px 8px 8px 18px !important; gap: 12px !important; max-width: calc(100vw - 44px) !important;
}
.sticky-trial-text { font-size: 1rem !important; font-weight: 700 !important; color: #fff !important; }
.sticky-trial-btn { min-height: 52px !important; padding: 12px 22px !important; font-size: 1.05rem !important; background: #25d366 !important; color: #06210f !important; }
.sticky-trial-close { width: 40px !important; height: 40px !important; font-size: 1.5rem !important; }
@media (max-width: 768px) {
  .sticky-trial, .sticky-trial.visible {
    left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; width: 100% !important;
    border-radius: 18px 18px 0 0 !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    justify-content: space-between !important;
  }
  .sticky-trial-text { display: block !important; font-size: .95rem !important; flex: 1 !important; white-space: normal !important; line-height: 1.25 !important; }
  .sticky-trial { white-space: normal !important; }
  .sticky-trial-btn { flex: 0 0 auto !important; }
  body { padding-bottom: 86px !important; }
}

/* ---------- Checkout ---------- */
.checkout-dialog { font-size: 1rem !important; }
.co-field label, .co-field-label { font-size: 1rem !important; font-weight: 700 !important; color: #fff !important; }
.co-field input[type="text"], .co-field input[type="email"], .co-field input[type="tel"] { min-height: 56px !important; font-size: 1.08rem !important; }
.co-field-hint { font-size: .92rem !important; color: var(--text-gray) !important; line-height: 1.45 !important; }
.co-pay-name { font-size: 1.02rem !important; }
.co-pay-desc { font-size: .9rem !important; color: var(--text-gray) !important; }
.checkout-submit { min-height: 60px !important; font-size: 1.12rem !important; }
.checkout-note { font-size: .92rem !important; }
.el-family { margin-top: 4px !important; }
.el-check { display: flex !important; align-items: flex-start !important; gap: 12px !important; cursor: pointer !important; color: #fff !important; font-size: 1rem !important; line-height: 1.45 !important; }
.el-check input { flex-shrink: 0 !important; width: 26px !important; height: 26px !important; margin-top: 1px !important; accent-color: #1fb5d6 !important; }
.el-family-fields { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-top: 12px !important; padding: 14px !important; border-radius: 14px !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.el-family-fields[hidden] { display: none !important; }
.el-family-fields label { display: flex !important; flex-direction: column !important; gap: 6px !important; color: #fff !important; font-weight: 700 !important; font-size: .98rem !important; }
.el-family-fields input {
  width: 100% !important; min-height: 54px !important; padding: 12px 14px !important; border-radius: 12px !important; font-family: inherit !important; font-size: 1.05rem !important;
  color: #fff !important; background: rgba(255,255,255,.05) !important; border: 1.5px solid rgba(255,255,255,.18) !important; outline: none !important;
}
.el-order-wa { display: block !important; text-align: center !important; margin: 14px 0 6px !important; color: #4ade80 !important; font-weight: 700 !important; font-size: 1rem !important; text-decoration: underline !important; text-underline-offset: 4px !important; }

/* ---------- Plan quiz: bigger ---------- */
.pq-entry-text strong { font-size: 1.15rem !important; }
.pq-entry-text span { font-size: 1rem !important; }
.pq-entry-btn { min-height: 54px !important; font-size: 1.02rem !important; }
.pq-q { font-size: 1.5rem !important; }
.pq-qs { font-size: 1.02rem !important; }
.pq-card { padding: 18px 18px !important; }
.pq-card-txt b { font-size: 1.12rem !important; }
.pq-card-txt span { font-size: .98rem !important; }
.pq-back, .pq-next { min-height: 54px !important; font-size: 1.02rem !important; }
.pq-reasons li { font-size: 1rem !important; }
.pq-btn-main { min-height: 60px !important; font-size: 1.1rem !important; }

/* Clear, large checkbox with a visible tick. */
.el-check input {
  -webkit-appearance: none !important; appearance: none !important; display: inline-grid !important; place-content: center !important;
  border-radius: 7px !important; border: 2px solid rgba(255,255,255,.55) !important; background: rgba(255,255,255,.06) !important; cursor: pointer !important;
}
.el-check input::after { content: '' !important; width: 13px !important; height: 7px !important; border-left: 3px solid #04161a !important; border-bottom: 3px solid #04161a !important; transform: rotate(-45deg) translate(1px, -1px) !important; opacity: 0 !important; }
.el-check input:checked { background: #1fb5d6 !important; border-color: #1fb5d6 !important; }
.el-check input:checked::after { opacity: 1 !important; }

/* Tighter hand-off from the hero to "Watching is easy". */
.hero { min-height: min(80vh, 820px) !important; padding-bottom: 40px !important; }
#how { padding-top: 46px !important; }
@media (max-width: 767px) {
  .hero { min-height: 86vh !important; min-height: 86svh !important; padding-bottom: 28px !important; }
  #how { padding-top: 34px !important; }
}

/* ---------- We help you: one simple panel (topic → WhatsApp) ---------- */
.el-help-box { display: block !important; max-width: 820px !important; text-align: center !important; padding: 40px 36px !important; }
.el-help-box h2 { font-family: var(--font-display) !important; color: #fff !important; font-size: clamp(1.7rem, 3.6vw, 2.3rem) !important; line-height: 1.2 !important; margin-bottom: 12px !important; text-wrap: balance; }
.el-help-sub { font-size: 1.05rem !important; color: var(--text-gray) !important; max-width: 620px !important; margin: 0 auto 26px !important; text-wrap: balance; }
.el-help-label { color: #fff !important; font-size: 1.15rem !important; font-weight: 700 !important; margin: 0 0 14px !important; }
.el-topics { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; max-width: 640px !important; margin: 0 auto 26px !important; }
.el-topic {
  display: flex !important; align-items: center !important; gap: 14px !important; width: 100% !important; min-height: 64px !important; text-align: left !important;
  padding: 14px 18px !important; border-radius: 16px !important; cursor: pointer !important; font-family: inherit !important;
  font-size: 1.05rem !important; font-weight: 700 !important; color: #fff !important;
  background: rgba(0,0,0,.25) !important; border: 2px solid rgba(255,255,255,.18) !important;
  transition: border-color .15s ease, background .15s ease !important;
}
.el-topic:hover { border-color: rgba(37,211,102,.6) !important; }
.el-topic.is-on { background: rgba(37,211,102,.12) !important; border-color: #25d366 !important; }
.el-topic-tick {
  flex-shrink: 0 !important; width: 28px !important; height: 28px !important; border-radius: 50% !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 2px solid rgba(255,255,255,.4) !important; color: transparent !important;
}
.el-topic-tick svg { width: 15px !important; height: 15px !important; }
.el-topic.is-on .el-topic-tick { background: #25d366 !important; border-color: #25d366 !important; color: #06210f !important; }
.el-help-send { min-height: 64px !important; font-size: 1.12rem !important; padding: 16px 32px !important; }
@media (max-width: 640px) {
  .el-help-box { padding: 28px 18px !important; }
  .el-topics { grid-template-columns: 1fr !important; }
  .el-help-send { width: 100% !important; }
}