/* Homepage layer (index.html). Header, footer, buttons, .band, .section-head and .agent-band come from styles.css;
   the night scene comes from depth.css. Phase 2 pages can link this file to reuse .offer, .how-list, .cap-rows and .cta-final.
   Breakpoints match styles.css: 768px tablet, 1024px desktop. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Hero: full-bleed night scene behind centered copy. Height follows the copy on phones. */
.g-home { position: relative; isolation: isolate; overflow: hidden; overflow: clip; width: 100vw; margin-left: calc(50% - 50vw); }
.g-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: 3.25rem var(--pad) 3.75rem; text-align: center; }
.g-hero .dim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 58% at 50% 50%, rgba(0,0,0,.82), rgba(0,0,0,.48) 78%),
    linear-gradient(180deg, rgba(0,0,0,.68) 0, rgba(0,0,0,.4) 30%, rgba(0,0,0,.5) 70%, var(--bg) 100%);
}
.g-hero .parts { position: absolute; inset: 0; z-index: -1; opacity: .35; pointer-events: none; }
.g-hero .parts i {
  position: absolute; width: calc(var(--s) * .6); height: calc(var(--s) * .6); border-radius: 50%;
  background: #e8e2d0; opacity: 0; animation: hp-rise calc(var(--d) * 2) linear infinite; animation-delay: var(--dl);
}
@keyframes hp-rise { 0% { opacity: 0; } 15% { opacity: .8; } 100% { transform: translate(25px, -60vh); opacity: 0; } }
.hc { position: relative; max-width: 47rem; animation: hp-in .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hp-in { from { transform: translateY(18px); } }
.hc .pill { margin: 0 0 1rem; color: var(--teal); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-wrap: balance; }
.g-hero h1 { margin: 0 0 1.1rem; font-size: clamp(2.5rem, 7vw, 4.6rem); line-height: 1.04; text-shadow: 0 2px 24px rgba(0,0,0,.6); text-wrap: balance; }
.g-hero h1 em { font-style: normal; color: var(--teal); }
.hero-lede { margin: 0 auto 1.25rem; max-width: 40rem; color: #eef3f5; font-size: clamp(1.15rem, 2.2vw, 1.35rem); line-height: 1.5; text-shadow: 0 1px 12px rgba(0,0,0,.8); text-wrap: pretty; }
.g-hero .hsub { margin: 0 0 1.75rem; color: #e8eeec; text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.g-hero .hsub strong { color: #fff; }
.hero-ctas { display: flex; flex-direction: column; gap: .75rem; max-width: 22rem; margin: 0 auto; }
.g-home .btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.15rem; padding: .8rem 1.6rem;
  border-radius: 999px; background: var(--teal); color: var(--ink); font-weight: 700; font-size: 1.05rem; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(142,224,192,.35), 0 10px 30px rgba(142,224,192,.18);
}
.g-home .btn:hover { background: #b6f0dc; }
.g-home .btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.hero-call { margin: 1rem 0 0; color: var(--muted); text-shadow: 0 1px 10px rgba(0,0,0,.8); }
.hero-call a, .cta-alt a, .customer-links a {
  display: inline-block; padding: .6rem 0; color: #fff; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .25em;
}
.hero-call a:hover, .cta-alt a:hover, .customer-links a:hover { color: var(--teal); }
@media (min-width: 768px) {
  .g-hero { min-height: min(50rem, calc(100svh - 4.25rem)); padding: 5rem var(--pad) 6rem; }
  .hero-ctas { flex-direction: row; justify-content: center; max-width: none; }
}
@media (max-width: 767px) { .g-hero .parts { display: none; } }
@media (max-width: 760px) {
  .g-home .hero-ctas .button-ghost {
    background: transparent; box-shadow: none; width: auto; min-height: 44px;
    color: #e8fff6; text-decoration: underline; text-underline-offset: .25em; font-weight: 700;
  }
}

/* Section rhythm */
body.home main { padding-bottom: 4rem; }
body.home .band { padding: 4rem 0; border-top: 1px solid var(--line); }
body.home #pricing { border-top: 0; padding-top: 2.5rem; }
body.home .section-head { max-width: 44rem; margin: 0 0 2.25rem; }
body.home .section-head h2 { margin: 0 0 .6rem; font-size: clamp(2rem, 4.4vw, 3rem); text-wrap: balance; }
body.home .section-head p { font-size: 1.1rem; }
.sec-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 2rem; }
.sec-cta .text-link { display: inline-block; padding: .6rem 0; }
@media (min-width: 1024px) { body.home .band { padding: 6rem 0; } body.home #pricing { padding-top: 4rem; } }

/* Plans and pricing: one card per product */
.offer-grid { display: grid; gap: 1rem; }
.offer {
  display: flex; flex-direction: column; padding: 1.5rem 1.25rem; border-radius: 1.25rem;
  border: 1px solid var(--line); border-top-color: rgba(212,181,106,.55);
  background: linear-gradient(180deg, rgba(212,181,106,.06), transparent 30%), var(--card);
}
.offer-kicker { margin: 0 0 .5rem; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.offer h3 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 3vw, 2rem); }
.offer-lede { margin: 0 0 1.25rem; color: var(--muted); }
.offer-rows { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--line); }
.offer-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--line); }
.offer-name { font-weight: 700; font-size: 1.12rem; }
.offer-tag { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: rgba(142,224,192,.14); color: var(--teal); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: .15em; }
.offer-price { font-weight: 700; font-size: 1.15rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.offer-price small { color: var(--muted); font-size: .85rem; font-weight: 600; }
.offer-price .offer-plus { display: block; }
.offer-meta { grid-column: 1 / -1; color: var(--muted); font-size: .95rem; }
.offer-terms { margin: 0 0 1.5rem; color: var(--muted); font-size: .92rem; }
.offer-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.offer-actions .text-link { display: inline-block; padding: .6rem 0; }
.offer-actions .button { min-width: 0; }
@media (min-width: 768px) { .offer { padding: 2rem; } }
@media (min-width: 1024px) { .offer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

/* Why Recapture: six benefit cards */
.edge-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.edge-list li { padding: 1.5rem 1.25rem; border-radius: 1.25rem; border: 1px solid var(--line); border-top: 2px solid rgba(142,224,192,.5); background: rgba(17,17,17,.72); }
.edge-list h3 { margin: 0 0 .4rem; font-size: 1.35rem; }
.edge-list p { margin: 0; color: var(--muted); }
@media (min-width: 768px) { .edge-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .edge-list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .edge-list li { padding: 1.75rem 1.5rem; } }

/* Done for you: three steps */
.how-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.how-list li { padding: 1.5rem 1.25rem; border-radius: 1.25rem; border: 1px solid var(--line); background: rgba(17,17,17,.72); }
.how-num { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 1rem; border-radius: 50%; border: 1px solid rgba(142,224,192,.5); color: var(--teal); font-weight: 700; }
.how-list h3 { margin: 0 0 .4rem; font-size: 1.45rem; }
.how-list p { margin: 0; color: var(--muted); }
@media (min-width: 768px) and (max-width: 1023px) {
  .how-list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 1.25rem; }
  .how-num { grid-row: span 2; margin: 0; }
}
@media (min-width: 1024px) { .how-list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .how-list li { padding: 2rem 1.75rem; } }

/* Five capabilities: intro beside a numbered list on desktop */
.caps-layout { display: grid; gap: 2rem; }
.caps-intro .section-head { margin-bottom: 1.25rem; }
.mission { margin: 0 0 1.75rem; padding-left: 1rem; border-left: 2px solid var(--gold); color: #e6edf0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.45; max-width: 30rem; }
.cap-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cap { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.cap-ic { width: 3rem; height: 3rem; padding: .55rem; border-radius: .9rem; border: 1px solid var(--line); background: rgba(142,224,192,.06); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cap-ic .m { stroke: var(--teal); stroke-width: 2.4; }
.cap-ic .g { stroke: var(--gold); stroke-width: 1.8; }
.cap-num { display: block; margin-bottom: .15rem; color: var(--gold); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.cap h3 { margin: 0 0 .35rem; font-size: 1.5rem; }
.cap p { margin: 0 0 .8rem; color: var(--muted); }
.cap-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cap-tags li { padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: #d5dde2; font-size: .85rem; }
@media (min-width: 768px) { .cap { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.5rem; padding: 1.75rem 0; } .cap-ic { width: 3.5rem; height: 3.5rem; } }
@media (min-width: 1024px) {
  .caps-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
  .caps-intro { position: sticky; top: 6.5rem; }
}

/* Get your agent band, social strip and final call band */
body.home .agent-band { margin: 0 0 1.5rem; }
body.home .sl-sec { margin-top: 0; }
.cta-final {
  display: grid; gap: 1.5rem; padding: 2rem 1.25rem; border-radius: 1.5rem;
  border: 1px solid rgba(212,181,106,.35);
  background: radial-gradient(60% 120% at 100% 0%, rgba(142,224,192,.14), transparent 60%), var(--bg-raise);
}
.cta-final h2 { margin: 0 0 .5rem; font-size: clamp(2rem, 4.4vw, 3rem); }
.cta-final p { margin: 0; color: var(--muted); max-width: 36rem; }
.cta-final-actions { display: grid; gap: .25rem; justify-items: start; }
.cta-final-actions .button { white-space: nowrap; }
.cta-alt { color: var(--muted); }
.customer-links { margin: 1.5rem 0 0; color: var(--muted); font-size: .95rem; }
.customer-links a { margin-right: .9rem; }
@media (min-width: 768px) {
  .cta-final { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2.5rem; padding: 2.75rem 3rem; }
  .cta-final-actions { justify-items: center; text-align: center; }
}

/* Reveal: cards rise in after the section fades in (only once the reveal script has run). */
:where(html.rv-ready) body.home .reveal .offer,
:where(html.rv-ready) body.home .reveal .how-list li,
:where(html.rv-ready) body.home .reveal .edge-list li,
:where(html.rv-ready) body.home .reveal .cap { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
body.home .reveal.in .offer, body.home .reveal.in .how-list li, body.home .reveal.in .edge-list li, body.home .reveal.in .cap { opacity: 1; transform: none; }
body.home .reveal.in .offer:nth-child(2), body.home .reveal.in .how-list li:nth-child(2), body.home .reveal.in .cap:nth-child(2) { transition-delay: .1s; }
body.home .reveal.in .how-list li:nth-child(3), body.home .reveal.in .cap:nth-child(3) { transition-delay: .2s; }
body.home .reveal.in .cap:nth-child(4) { transition-delay: .3s; }
body.home .reveal.in .cap:nth-child(5) { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
  .hc, .g-hero .parts i { animation: none !important; }
  .g-hero .parts { display: none; }
  body.home .reveal .offer, body.home .reveal .how-list li, body.home .reveal .edge-list li, body.home .reveal .cap { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Package tabs (Mack, Oct 25): the phone and website package pages, out of the top nav and side by side under the
   hero, above the packages. Two equal columns at every width so they never stack. */
.pkg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; width: min(100%, 34rem); margin: 1.75rem auto 0; padding: .35rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.04); }
.pkg-tab { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 .9rem; border-radius: 999px; color: #eef3f5; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; }
.pkg-tab:hover, .pkg-tab:focus-visible { background: rgba(130,223,203,.16); color: #fff; }

/* Dashboard agent (Mack/Kyle, Oct 27). After the 3 steps, before the five capabilities.
   Phone stacks copy, mock, CTA. From 761px the mock is a 380–420px drawer on the right.
   Shop mint #82dfcb, gold #d4af37 on the proposal chip only. One real mint CTA. */
body.home #dash-agent {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
  margin: 0;
  padding: 1.75rem 16px;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25rem;
}
.dash-ai-copy h2 {
  margin: 0 0 .6rem;
  font-size: clamp(1.75rem, 6.5vw, 3rem);
  line-height: 1.08;
  text-wrap: balance;
}
.dash-ai-copy p {
  margin: 0;
  max-width: 34rem;
  color: #f4f7f6;
  font-size: 1.05rem;
  line-height: 1.45;
}
.dash-ai-mock { width: 100%; max-width: 420px; justify-self: center; min-width: 0; }
.dash-ai-drawer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #0a0a0a;
  border: 1px solid #82dfcb;
  border-radius: 16px;
  color: #fff;
}
.dash-ai-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
}
.dash-ai-head p {
  margin: 0;
  font-family: var(--serif);
  font-weight: 560;
  font-size: 1.35rem;
  line-height: 1.15;
  color: #fff;
}
.dash-ai-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
}
.dash-ai-thread { display: flex; flex-direction: column; }
.dash-ai-prompt {
  align-self: flex-end;
  margin: 0 0 0 1.5rem;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #82dfcb;
  background: rgba(130, 223, 203, .18);
  color: #fff;
  font-size: 1rem;
  line-height: 1.45;
}
.dash-ai-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
}
.dash-ai-chip {
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid #d4af37;
  border-radius: 999px;
  color: #d4af37;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
}
.dash-ai-what { margin: 0; color: #fff; font-size: 1rem; line-height: 1.4; }
.dash-ai-what strong { font-weight: 700; color: #fff; }
.dash-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-ai-apply, .dash-ai-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
}
.dash-ai-apply { background: #82dfcb; color: #04211c; }
.dash-ai-dismiss { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
body.home #dash-agent .button {
  background: #82dfcb;
  color: #04211c;
  box-shadow: 0 0 0 1px rgba(130, 223, 203, .45), 0 10px 30px rgba(130, 223, 203, .18);
}
body.home #dash-agent .button:hover { background: #a7f0dc; }
.cap p.cap-dash-tip { margin: .85rem 0 0; }
@media (min-width: 761px) {
  body.home #dash-agent {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 420px);
    grid-template-areas: "copy mock" "cta mock";
    column-gap: 1.5rem;
    row-gap: 1.25rem;
    align-items: center;
    padding: 2.5rem 16px;
  }
  .dash-ai-copy { grid-area: copy; }
  .dash-ai-mock { grid-area: mock; align-self: center; }
  body.home #dash-agent .button { grid-area: cta; justify-self: start; width: auto; }
}
@media (min-width: 1024px) {
  body.home #dash-agent { padding: 3rem 2rem; column-gap: 3rem; }
}