/* Home — mirrors the live Elementor page (cytixs.com) value for value. */

/* Shared section scaffolding */
.wrap { max-width: var(--container); margin: 0 auto; padding: var(--sec-y) var(--pad-x); }
.wrap--how { padding-block: clamp(56px, 8vw, 100px); }
.wrap--faq { max-width: 900px; padding-block: clamp(56px, 8vw, 100px); }
.wrap--cta { padding-block: clamp(56px, 8vw, 100px); text-align: center; }
.wrap > *, .two > *, .story > *, .hero__grid > *, .flow > *, .cells > * { min-width: 0; }
.sec { background: var(--c-cream); border-bottom: 2px solid var(--c-midnight); }
.sec--dark { background: var(--c-midnight); color: var(--c-cream); border-bottom-color: var(--c-teal); }
.sec__head { text-align: center; max-width: 60ch; margin: 0 auto; }
.sec__head .eyebrow { margin-bottom: 18px; }
.sec__head--wide { max-width: none; }
.sec__head--wide .eyebrow { margin-bottom: 20px; }
.sec__head--inbox { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 48px); }

.h2 { font-family: var(--font-heading); font-weight: 700; margin: 0; }
.h2--md { font-size: clamp(28px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.03em; }
.h2--lg { font-size: clamp(30px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.03em; }
.h2--xl { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.03em; }
.h2--sm { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.02em; max-width: 22ch; }
.h2--story { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: pretty; }
.h2--center { text-align: center; margin-inline: auto; }
.h2--narrow { max-width: 18ch; line-height: 1.1; text-wrap: balance; }

.muted { color: var(--c-ink-muted); margin: 0; }
.soft { color: var(--c-celadon); margin: 0; }
.mt14 { margin-top: 14px; } .mt16 { margin-top: 16px; } .mt22 { margin-top: 22px; } .mt24 { margin-top: 24px; } .mb20 { margin-bottom: 20px; }
.text-teal { color: var(--c-teal); }
.quote { margin: 26px 0 0; font-family: var(--font-heading); font-size: clamp(19px, 2vw, 24px); line-height: 1.32; font-weight: 500; }
.quote--bold { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.sq { width: 9px; height: 9px; display: block; flex: none; }
.sq--teal { background: var(--c-teal); }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { background: var(--c-midnight); color: var(--c-cream); border-bottom: 2px solid var(--c-teal); }
.hero__grid { max-width: var(--container); margin: 0 auto; padding: clamp(44px, 6vw, 84px) var(--pad-x); display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; }
.hero__kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-teal); max-width: 30ch; line-height: 1.35; }
.hero__rule { width: 96px; height: 2px; background: var(--c-orange); margin: 22px 0 26px; }
.hero__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.03em; margin: 0; text-wrap: pretty; }
.hero__p { margin: 26px 0 0; max-width: 52ch; color: var(--c-celadon); font-size: 18px; }
.hero__p--2 { margin-top: 16px; }
.hero__p strong { color: var(--c-cream); font-weight: 700; }
.hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__tags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted-dark); }
@media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } }

/* Chat card */
.chat { border: 2px solid var(--c-teal); background: var(--c-midnight); }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 2px solid var(--c-teal); }
.chat__who { font-weight: 500; font-size: 15px; }
.chat__meta { margin-left: auto; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-dark); }
.chat__body { padding: 18px; }
.msg { max-width: 88%; padding: 12px 14px; background: var(--c-midnight-2); font-size: 15px; line-height: 1.45; }
.msg__time { display: block; font-size: 11px; color: var(--c-muted-dark); margin-top: 8px; letter-spacing: 0.06em; }
.msg--agent { margin-left: auto; background: var(--c-teal); color: var(--c-midnight); }
.msg--agent .msg__time { color: rgba(1, 1, 64, .62); }
.msg--last { margin-top: 10px; }
.chat__gap { overflow: hidden; height: 104px; display: flex; align-items: center; border-left: 2px solid var(--c-orange); padding-left: 18px; margin: 14px 0; animation: gapOpen 0.9s cubic-bezier(.22, 1, .36, 1); }
.chat__gap div { color: var(--c-orange); font-size: 14px; }
.chat__gap b { display: block; font-family: var(--font-heading); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.chat__foot { border-top: 2px solid var(--c-teal); padding: 14px 18px; font-size: 13px; color: var(--c-muted-dark); }

/* ── Stats ──────────────────────────────────────────────────── */
.stats { background: var(--c-cream); border-bottom: 2px solid var(--c-midnight); }
.stats__grid { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats__grid > * { min-width: 0; }
.stat { padding: clamp(28px, 3.4vw, 40px) 20px; border-bottom: 2px solid var(--c-midnight); }
.stat--r { border-right: 2px solid var(--c-midnight); }
.stat__v { font-family: var(--font-heading); font-size: clamp(34px, 4vw, 52px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.stat__v span { font-size: 0.5em; }
.stat__v--accent { color: var(--c-orange-ink); }
.stat__l { margin-top: 10px; font-size: 14px; color: var(--c-ink-muted); }
@media (min-width: 900px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat--div { border-right: 2px solid var(--c-midnight); }
}

/* ── How it works (flow) ────────────────────────────────────── */
.flow { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: clamp(36px, 5vw, 56px); align-items: stretch; }
.flow__from { border: 2px solid var(--c-midnight); background: var(--c-cream); }
.flow__label { border-bottom: 2px solid var(--c-midnight); padding: 12px 16px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal-ink); }
.flow__label--dark { border-bottom-color: var(--c-teal); color: var(--c-teal); }
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 0; }
.places span { padding: 11px 14px; font-size: 14px; border-bottom: 1px solid rgba(1, 1, 64, .15); }
.places span:nth-child(odd) { border-right: 1px solid rgba(1, 1, 64, .15); }
.places span:nth-last-child(-n+2) { border-bottom: 0; }
.flow__arrow { display: flex; align-items: center; justify-content: center; padding: 18px 0; font-family: var(--font-heading); font-size: 30px; color: var(--c-orange); transform: rotate(90deg); }
.flow__to { border: 2px solid var(--c-midnight); background: var(--c-midnight); color: var(--c-cream); display: flex; flex-direction: column; }
.flow__rows { padding: 20px; display: grid; gap: 12px; flex: 1; }
.flow__row { display: flex; align-items: baseline; gap: 12px; font-size: 14px; color: var(--c-celadon); }
.flow__t { font-family: var(--font-heading); font-size: 15px; color: var(--c-orange); width: 68px; flex: none; }
.flow__t--good { color: var(--c-teal); }
.flow__foot { border-top: 2px solid var(--c-teal); padding: 16px; font-family: var(--font-heading); font-size: 18px; font-weight: 700; }
@media (min-width: 900px) {
  .flow { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  .flow__arrow { transform: none; }
}

/* ── Numbered cells (leak + first 30 days) ──────────────────── */
.cells { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: clamp(36px, 5vw, 56px); background: var(--c-midnight); border: 2px solid var(--c-midnight); }
.cell { background: var(--c-cream); padding: clamp(24px, 3vw, 34px); }
.cell__n { font-family: var(--font-heading); font-size: 34px; font-weight: 700; color: var(--c-orange); line-height: 1; }
.cell > p { margin: 18px 0 0; color: var(--c-ink-muted); }
.cell__when { display: block; font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--c-teal-ink); margin: 18px 0 12px; }
.cell__h { font-family: var(--font-heading); font-weight: 700; font-size: 21px; line-height: 1.25; margin: 0; letter-spacing: 0; }
.cell .cell__p { margin: 12px 0 0; font-size: 15px; color: var(--c-ink-muted); }
@media (min-width: 900px) { .cells { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.punch { margin: clamp(36px, 4vw, 52px) auto 0; font-family: var(--font-heading); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; max-width: 30ch; }
.punch--center { text-align: center; }

/* ── Proof bars ─────────────────────────────────────────────── */
.bars { display: grid; gap: 24px; margin-top: clamp(36px, 5vw, 56px); }
.bar { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; }
.bar__m { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-dark); padding-top: 18px; }
.bar__track { height: 56px; background: var(--c-midnight-2); border: 2px solid var(--c-teal); overflow: hidden; }
.bar__fill { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 14px; font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--c-midnight); animation: barGrow 1.2s cubic-bezier(.22, 1, .36, 1); }
.bar__fill--a { width: 32%; background: var(--c-celadon); }
.bar__fill--b { width: 67%; background: var(--c-teal); animation-duration: 1.35s; }
.bar__fill--c { width: 100%; background: var(--c-orange); animation-duration: 1.5s; }
.bar__note { font-size: 14px; color: var(--c-muted-dark); margin-top: 8px; }
.proof__foot { margin: 36px 0 0; font-weight: 700; text-align: center; }

/* ── Two-column text sections ───────────────────────────────── */
.two { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ── Story ──────────────────────────────────────────────────── */
.story { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 52px); align-items: start; }
.story__media { border: 2px solid var(--c-teal); }
.story__media img { display: block; width: 100%; height: clamp(300px, 44vw, 540px); object-fit: cover; filter: grayscale(1) contrast(1.05); background: var(--c-midnight-2); }
.story__credit { border-top: 2px solid var(--c-teal); padding: 12px 14px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted-dark); }
.story__credit a { color: var(--c-teal); }
@media (min-width: 1024px) { .story { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; } }

/* ── Inbox box ──────────────────────────────────────────────── */
.box { border: 2px solid var(--c-teal); }
.box__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 2px solid var(--c-teal); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted-dark); }
.box__head b { color: var(--c-teal); font-weight: 500; }
.box__row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 18px; border-bottom: 2px solid rgba(51, 189, 189, .25); }
.box__row:last-child { border-bottom: 0; }
.box__icon { display: flex; align-items: center; justify-content: center; }
.box__who { font-size: 15px; }
.box__who small { display: block; color: var(--c-muted-dark); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box__t { font-family: var(--font-heading); font-size: 16px; color: var(--c-orange); white-space: nowrap; }
.box__t--good { color: var(--c-teal); }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq__title { margin-bottom: clamp(28px, 4vw, 40px); max-width: none; }
.faq { border-top: 2px solid var(--c-midnight); }
.faq--last { border-bottom: 2px solid var(--c-midnight); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 22px 0; font-family: var(--font-heading); font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq__plus { color: var(--c-orange); flex: none; }
.faq__a { padding: 0 0 26px 32px; }
.faq__strong { margin: 14px 0 0; font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }

/* ── Final CTA ──────────────────────────────────────────────── */
.cta__title { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.04; letter-spacing: -0.03em; margin: 0 auto; max-width: 26ch; }
.cta__p { margin: 26px auto 0; max-width: 62ch; }
.cta__line { margin: 36px auto 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.25; letter-spacing: -0.02em; max-width: 26ch; }
.cta__btn { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta__fine { margin-top: 20px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted-dark); }
.cta { border-bottom-color: var(--c-teal); }

@media (prefers-reduced-motion: reduce) { .chat__gap, .bar__fill, .topbar__dot { animation: none; } }