/* =====================================================================
   bhavitverma.com v4 — Services + Pricing
   ===================================================================== */

/* ---------- Shared page hero (centred, VM "shared-hero") ---------- */
.pagehero {
  position: relative; z-index: var(--z-section);
  padding-top: calc(var(--hero-pt) + 4rem); padding-bottom: 2rem;
  text-align: center;
}
.pagehero::after {
  content: ""; position: absolute; inset: 0 0 -1rem 0; z-index: -1;
  background: linear-gradient(180deg, transparent 40%, var(--bg) 95%);
  pointer-events: none;
}
.hero, .pagehero { isolation: isolate; }
.pagehero__eyebrow { margin-bottom: 2rem; }
.pagehero h1 { max-width: 11em; margin-inline: auto; }
.pagehero__sub { max-width: 36rem; margin: 2rem auto 0; text-wrap: pretty; }
.section--tight { padding-top: 4rem; }

/* ---------- Services: sticky index + blocks ---------- */
.svcwrap { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); column-gap: var(--gap); }
.svcnav {
  grid-column: 1 / 5; align-self: start;
  position: sticky; top: var(--hero-pt);
  display: flex; flex-direction: column; gap: 2rem;
}
.svcnav__links { display: flex; flex-direction: column; }
.svcnav__link {
  display: flex; gap: 1rem; padding-block: 0.625rem;
  color: var(--text-muted); transition: color var(--t-color);
}
.svcnav__link span { color: var(--text-subtle); transition: color var(--t-color); }
.svcnav__link:hover, .svcnav__link.is-active { color: var(--fg); }
.svcnav__link.is-active span { color: var(--accent); }
.casecard { position: relative; display: block; width: 100%; max-width: 18.75rem; }
.casecard__media { display: block; aspect-ratio: 16 / 12; border-radius: var(--r-sm); overflow: clip; }
.casecard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-featured); }
.casecard:hover .casecard__media img { transform: scale(1.075); }
.casecard__foot { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center; }
.iconbtn--brand { background: var(--accent-fill); color: var(--fg); }
.casecard:hover .iconbtn .icon { transform: rotate(0); }

.svcbody { grid-column: 6 / 19; }
.sblock { padding-bottom: 6rem; scroll-margin-top: var(--hero-pt); }
.sblock__head { display: grid; grid-template-columns: auto 1fr; column-gap: 2rem; align-items: baseline; }
.sblock__num { font-size: var(--h-md); line-height: 1; color: var(--text-ghost); }
.sblock__title { font-size: var(--h-lg); line-height: 1; letter-spacing: -0.02em; }
.sblock__intro { grid-column: 2; margin-top: 1.25rem; max-width: 34rem; font-size: var(--b-xl); line-height: 1.3; }
.sblock__list { margin-top: 3rem; border-bottom: 1px solid var(--hairline); }
.sitem {
  display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); column-gap: var(--gap);
  padding-block: 1.5rem; border-top: 1px solid var(--hairline);
}
.sitem__name { grid-column: 1 / 6; font-size: var(--b-xl); line-height: 1.2; }
.sitem__desc { grid-column: 6 / 14; color: var(--text-2); text-wrap: pretty; }

/* 30-day timeline */
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gap); margin-top: 3rem; padding-top: 2.5rem; }
.timeline__track { position: absolute; left: 0; right: 0; top: 0.4375rem; height: 1px; background: var(--hairline); list-style: none; }
.timeline__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.tstep { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding-right: 1rem; }
.tstep__dot {
  position: absolute; left: 0; top: -2.5rem; width: 0.875rem; height: 0.875rem; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--n-700);
  transition: background-color 0.3s, border-color 0.3s;
}
.tstep.is-lit .tstep__dot { background: var(--accent); border-color: var(--accent); }
.tstep__title { font-size: var(--b-xl); line-height: 1.2; margin-top: 0.5rem; }
.tstep__desc { color: var(--text-2); }

.subhead { font-size: var(--h-xs); line-height: 1.15; margin-top: 5rem; margin-bottom: 1.5rem; }

/* Week of content */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap); }
.day { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: var(--r-sm); background: var(--surface); min-height: 11rem; }
.day p { font-size: var(--b-sm); line-height: 1.35; color: var(--text-2); }
.day__type { align-self: flex-start; padding: 0.375rem 0.5rem 0.25rem; border-radius: var(--r-xs); }
.day__type--edu { background: var(--fg); color: var(--bg); }
.day__type--show { background: var(--accent-fill); color: var(--fg); }
.day__type--trust { background: var(--o-200); color: var(--bg); }
.day__type--sell { background: var(--n-800); color: var(--fg); }

/* Content mix */
.mix { display: flex; flex-direction: column; gap: 1rem; }
.mix__row { display: grid; grid-template-columns: 10rem 1fr 3.5rem; align-items: center; gap: 1.5rem; }
.mix__row b { font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.mix__bar { height: 0.75rem; border-radius: var(--r-full); background: var(--surface); overflow: hidden; }
.mix__fill { display: block; height: 100%; width: 0; border-radius: inherit; padding: 0; transition: width 1.1s var(--ease-featured); }
.mix.is-in .mix__fill { width: var(--w); }
.mix__row:nth-child(2) .mix__fill { transition-delay: 0.08s; }
.mix__row:nth-child(3) .mix__fill { transition-delay: 0.16s; }
.mix__row:nth-child(4) .mix__fill { transition-delay: 0.24s; }

/* Tools grid (VM "worked with" cells, checkerboard) */
.tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.tool {
  display: flex; align-items: flex-end; aspect-ratio: 16 / 12; padding: 1.25rem;
  border-radius: var(--r-sm); background: var(--surface);
  font-size: var(--b-xl); line-height: 1.15;
}
.tool:nth-child(even) { background: transparent; border: 1px solid var(--hairline-solid); }
.tool--cta { padding: 0; background: var(--accent-fill) !important; border: 0 !important; transition: background-color var(--t-bg); }
.tool--cta:hover { background: var(--accent-hover) !important; }
.tool--cta a { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 1.25rem; }
.tool--cta .mono { display: inline-flex; gap: 0.5rem; align-items: center; }

/* Wide CTA media card */
.reel--wide { aspect-ratio: 1376 / 516; margin-inline: 0; }
.reel__headline { font-size: var(--h-md); line-height: 1; }

@media (max-width: 991px) {
  .svcnav { display: none; }
  .svcbody { grid-column: 1 / 19; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline__track { display: none; }
  .tstep { padding-top: 1.5rem; border-top: 1px solid var(--hairline); }
  .tstep__dot { top: -0.4375rem; }
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reel--wide { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .sblock { padding-bottom: 4rem; }
  .sblock__head { grid-template-columns: 1fr; }
  .sblock__num { font-size: var(--h-xs); margin-bottom: 0.75rem; }
  .sblock__intro { grid-column: 1; }
  .sitem { display: flex; flex-direction: column; gap: 0.5rem; }
  .timeline { grid-template-columns: 1fr; }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day { min-height: 0; }
  .mix__row { grid-template-columns: 7rem 1fr 3rem; gap: 1rem; }
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel--wide { aspect-ratio: 4 / 5; }
  .reel__caption { flex-direction: column; align-items: flex-start; }
  .reel__caption > :last-child { display: inline; }
}

/* ---------- Pricing: tabs ---------- */
.tabs {
  position: relative;
  border-top: 1px solid var(--hairline-solid); border-bottom: 1px solid var(--hairline-solid);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__list { display: flex; justify-content: center; gap: 2rem; width: max-content; min-width: 100%; }
.tab {
  position: relative; padding-block: 1.25rem; white-space: nowrap;
  color: var(--text-muted); transition: color var(--t-color);
}
.tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 0.35s var(--ease-featured); }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--fg); }
.tab[aria-selected="true"]::after { transform: scaleX(1); }

.pkgpanels { padding-top: 2rem; }
.pkgpanel:focus-visible { outline-offset: 8px; }
.pkgpanel__note { text-align: center; margin-bottom: 2rem; }
.pkggrid { display: grid; gap: var(--gap); }
.pkggrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; margin-inline: auto; }
.pkggrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pkggrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pkg {
  display: flex; flex-direction: column; gap: 1.75rem;
  padding: 2rem; border-radius: var(--r-sm);
  background: var(--surface);
}
.pkg--featured { background: transparent; border: 1px solid var(--accent); }
.pkg__top { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.pkg__badge { pointer-events: none; }
.pkg__name { font-size: var(--h-xs); line-height: 1.1; }
.pkg__desc { color: var(--text-2); text-wrap: pretty; }
.pkg__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.pkg__price b { font-weight: 400; font-size: var(--h-sm); line-height: 1; letter-spacing: -0.02em; }
.pkg__price s { color: var(--text-subtle); }
.pkg__price .mono { color: var(--text-muted); }
.pkg__list { display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
.pkg__list li { position: relative; padding-left: 1.5rem; line-height: 1.35; }
.pkg__list li::before { content: "✱"; position: absolute; left: 0; top: 0.05em; color: var(--accent); font-size: 0.8em; }
.pkg__more summary {
  display: inline-flex; gap: 0.5rem; align-items: center; cursor: pointer; list-style: none;
  padding-block: 0.5rem; color: var(--text-muted); transition: color var(--t-color);
}
.pkg__more summary::-webkit-details-marker { display: none; }
.pkg__more summary::before { content: "+"; font-family: var(--font-body); font-size: 1.25em; line-height: 0.8; transition: transform 0.3s var(--ease-featured); }
.pkg__more[open] summary::before { transform: rotate(45deg); }
.pkg__more summary:hover { color: var(--fg); }
.pkg__more-body { display: flex; flex-direction: column; gap: 0.625rem; padding-top: 1rem; color: var(--text-2); font-size: var(--b-md); line-height: 1.45; }
.pkg__more-body h4 { margin-top: 0.75rem; }
.pkg__more-body b { font-weight: 500; color: var(--fg); }
.pkg__cta { margin-top: auto; align-self: flex-start; }

.pkg--mini { gap: 1rem; padding: 1.5rem; min-height: 14rem; }
.pkg--mini .pkg__price { margin-top: auto; }
.pkg--mini .pkg__price b { font-size: var(--h-2xs); }
.pkg--ask { background: transparent; border: 1px dashed var(--n-800); }
.pkg--wide {
  margin-top: var(--gap);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem;
  background: transparent; border: 1px solid var(--accent);
}
.pkg--wide > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 40rem; }
.pkg__wide-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; }

/* Promises */
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.promise { padding: 2rem; border-radius: var(--r-sm); background: var(--surface); display: flex; flex-direction: column; gap: 0.75rem; }
.promise:nth-child(2), .promise:nth-child(3) { background: transparent; border: 1px solid var(--hairline-solid); }
.promise h3 { font-size: var(--b-xl); }
.promise p { color: var(--text-2); }

@media (max-width: 991px) {
  .pkggrid--3 { grid-template-columns: 1fr; max-width: 36rem; margin-inline: auto; }
  .pkggrid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs__list { justify-content: flex-start; padding-inline: var(--gutter); }
}
@media (max-width: 767px) {
  .pkggrid--2, .pkggrid--4 { grid-template-columns: 1fr; }
  .pkg { padding: 1.5rem; }
  .pkg--wide { grid-template-columns: 1fr; }
  .pkg__wide-side { align-items: flex-start; }
  .promises { grid-template-columns: 1fr; }
  .promise:nth-child(3) { background: var(--surface); border: 0; }
  .promise:nth-child(4) { background: transparent; border: 1px solid var(--hairline-solid); }
}
@media (max-width: 479px) {
  .tabs__list { gap: 1.5rem; }
}

/* Wide CTA: mockups sit back so the headline reads first */
.reel--wide .reel__shade { background: linear-gradient(90deg, color-mix(in oklab, var(--bg) 82%, transparent) 30%, color-mix(in oklab, var(--bg) 45%, transparent)); }
.reel--wide .reel__slide { filter: blur(2px) saturate(0.85); }
.reel--wide .reel__caption { left: 2rem; right: 2rem; bottom: 2rem; }

/* =====================================================================
   404 — full-height, fluid background, ghost numerals (VM utility page)
   ===================================================================== */
.notfound {
  position: relative; z-index: var(--z-section); isolation: isolate;
  min-height: 100svh; padding-top: var(--hero-pt); padding-bottom: 3rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  text-align: center; overflow: clip;
}
.notfound__num {
  position: absolute; left: 50%; top: 50%; z-index: -1; transform: translate(-50%, -54%);
  font-size: min(32rem, 44vw); line-height: 0.8; letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.1); white-space: nowrap; user-select: none; pointer-events: none;
}
.notfound__label { position: absolute; top: calc(var(--hero-pt) + 1rem); left: 0; right: 0; }
.notfound__body { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; max-width: 34rem; }
.notfound__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 767px) {
  .notfound__num { font-size: 15rem; }
}