/* ============================================================================
   VENTRIX GLOBAL LTD — reporting landing page
   ----------------------------------------------------------------------------
   Page-scoped components only. Everything shared (tokens, shell, sections,
   buttons, cards, steps, reveal, header, footer, modals, consent) comes from
   style.css, which this file is loaded after. No new tokens are introduced —
   every value below resolves to an existing custom property.

   Contents
     01  Hero
     02  Report contents groups
     03  Report preview band
     04  Pricing
     05  Monthly workflow
     06  FAQ
     07  Scope note
     08  Closing CTA
   ========================================================================== */


/* 01 ------------------------------------------------------------------ HERO */
.rep-hero {
  position: relative;
  background: var(--navy-900);
  color: var(--text-light);
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
}
.rep-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(41, 71, 122, .42) 0%, rgba(10, 17, 32, 0) 62%),
    linear-gradient(160deg, #0C1524 0%, #0A1120 52%, #070D18 100%);
}
/* Same hairline rhythm as the homepage hero, so the two read as one site. */
.rep-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: min(12.5%, 9rem) 100%;
  opacity: .5;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 74%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 74%, transparent);
  pointer-events: none;
}

.rep-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.rep-hero__title {
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 640;
  max-width: 15ch;
  text-wrap: balance;
}
.rep-hero__lead {
  margin-top: clamp(1.25rem, 2.2vw, 1.85rem);
  max-width: 52ch;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--text-light-soft);
}
.rep-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Factual strip: what the service is, in four words each. */
.rep-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line-dark);
}
.rep-hero__facts li {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .8125rem;
  color: var(--text-light-soft);
}
.rep-hero__facts svg {
  width: .95rem; height: .95rem; flex: none;
  fill: none; stroke: var(--gold); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 900px) {
  .rep-hero__inner { grid-template-columns: 1fr; }
  .rep-hero__visual { max-width: 30rem; }
}
@media (max-width: 560px) {
  .rep-hero__actions .btn { flex: 1 1 100%; }
}


/* 02 -------------------------------------------- REPORT CONTENTS GROUPS --- */
/* Reuses .cards / .card from style.css; only the inner list is new. */
.featurelist { margin-top: 1.1rem; display: grid; gap: .5rem; }
.featurelist li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.featurelist svg {
  width: .95rem; height: .95rem;
  margin-top: .28rem;
  flex: none;
  fill: none; stroke: var(--gold-ink); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}


/* 03 ----------------------------------------------- REPORT PREVIEW BAND --- */
.previewband__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.previewband .reportcard { max-width: 30rem; }
.deliverables { margin-top: 1.75rem; display: grid; gap: .05rem; }
.deliverables li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .8rem 0;
  border-top: 1px solid var(--line-dark);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .88);
}
.deliverables li::before {
  content: '';
  width: .4rem; height: .4rem;
  margin-top: .62rem;
  background: var(--gold);
  border-radius: 50%;
  flex: none;
}

@media (max-width: 900px) {
  .previewband__inner { grid-template-columns: 1fr; }
  .previewband .reportcard { max-width: none; }
}


/* 04 --------------------------------------------------------------- PRICING */
/* Default `stretch` alignment is deliberate: equal-height cards with the CTA
   pinned to the bottom of each make the three plans directly comparable. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 2.2vw, 2.15rem);
  box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
              border-color .35s var(--ease);
}
.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line-light-2);
}

/* The middle plan is emphasised with the same gold rule the cards already use,
   plus a label — never with colour alone. */
.plan--featured {
  border-color: var(--gold);
  box-shadow: var(--shadow-lift);
}
.plan--featured::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--gold);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.plan__badge {
  position: absolute;
  top: 0; right: clamp(1.6rem, 2.2vw, 2.15rem);
  transform: translateY(-50%);
  padding: .3rem .7rem;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-size: .625rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan__name {
  font-size: .75rem; font-weight: 600; letter-spacing: .17em;
  text-transform: uppercase; color: var(--gold-ink);
  margin-bottom: .85rem;
}
.plan__desc {
  margin: 0 0 1.5rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--text-soft);
  min-height: 2.8em;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line-light);
  margin-bottom: 1.4rem;
}
.plan__amount {
  font-size: clamp(1.9rem, 2.6vw, 2.35rem);
  font-weight: 640;
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plan__per { font-size: .875rem; color: var(--text-soft); }
.plan__price { flex-wrap: wrap; }
.plan__tax {
  flex-basis: 100%;
  margin-top: .45rem;
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--text-soft);
}
/* The VAT-inclusive price private customers pay. Kept clearly legible rather
   than footnote-sized: consumers must be able to see the total price. */
.plan__consumer {
  flex-basis: 100%;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--line-light);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.plan__consumer strong {
  font-size: 1.0625rem;
  font-weight: 640;
  letter-spacing: -.015em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.plan__features { display: grid; gap: .55rem; margin-bottom: 1.75rem; }
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--text-soft);
}
.plan__features svg {
  width: .95rem; height: .95rem;
  margin-top: .28rem;
  flex: none;
  fill: none; stroke: var(--gold-ink); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.plan__features li.is-carry { color: var(--text); font-weight: 550; }

.plan__cta { margin-top: auto; }

.plans__note {
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--text-soft);
}

@media (max-width: 1023px) {
  .plans { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .plan__desc { min-height: 0; }
  /* Without three columns the badge has no neighbours to sit between. */
  .plan__badge { right: auto; left: clamp(1.6rem, 2.2vw, 2.15rem); }
}


/* 05 ------------------------------------------------------ MONTHLY WORKFLOW */
.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
  counter-reset: flow;
}
.flow__item { position: relative; padding-top: 2.35rem; }
.flow__item::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--line-dark);
}
.flow__item::after {
  content: '';
  position: absolute; top: -3.5px; left: 0;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
}
.flow__no {
  display: block;
  margin-bottom: .7rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .16em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.flow__title {
  font-size: 1rem;
  letter-spacing: -.018em;
  margin-bottom: .5rem;
  color: var(--text-light);
}
.flow__item p {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--text-light-soft);
}

@media (max-width: 1023px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .flow { grid-template-columns: 1fr; } }


/* 06 -------------------------------------------------------------------- FAQ */
/* Native <details>, so it opens without JavaScript and is keyboard operable. */
.faq { max-width: 52rem; margin-inline: auto; border-top: 1px solid var(--line-light); }
.faq__item { border-bottom: 1px solid var(--line-light); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 560;
  letter-spacing: -.015em;
  color: var(--text);
  transition: color .2s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--gold-ink); }
.faq__q:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.faq__icon {
  position: relative;
  flex: none;
  width: 1rem; height: 1rem;
  margin-top: .3rem;
}
.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: var(--gold-ink);
  transform: translateY(-50%);
  transition: transform .3s var(--ease-out), opacity .3s var(--ease);
}
.faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.faq__a {
  padding: 0 0 1.5rem;
  max-width: 62ch;
}
.faq__a p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--text-soft);
}


/* 07 -------------------------------------------------------------- SCOPE --- */
/* What the service is not. Stated plainly rather than buried in a footnote. */
.scopenote {
  max-width: 60rem;
  margin-inline: auto;
  padding: clamp(1.35rem, 2.4vw, 2rem) clamp(1.35rem, 2.4vw, 2.25rem);
  background: var(--paper-alt);
  border: 1px solid var(--line-light);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.scopenote h2 {
  font-size: 1.0625rem;
  letter-spacing: -.018em;
  margin-bottom: .8rem;
}
.scopenote p {
  margin: 0 0 .85em;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--text-soft);
}
.scopenote p:last-child { margin-bottom: 0; }


/* 08 ---------------------------------------------------------- CLOSING CTA */
.rep-cta { text-align: center; }
.rep-cta .h2 { max-width: 20ch; margin-inline: auto; }
.rep-cta .section__lead { margin-inline: auto; }
.rep-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .875rem;
  margin-top: clamp(2rem, 3vw, 2.75rem);
}
.rep-cta .eyebrow { justify-content: center; }

@media (max-width: 560px) {
  .rep-cta__actions .btn { flex: 1 1 100%; }
}