/* ==========================================================================
   KavalaTech - Pricing page
   Scoped additions on top of the shared Webflow stylesheet.

   Two namespaces are in play, both deliberate:
     `kt-`  the shared design-system primitives (tokens, button, section head,
            spec line, reveal). Values are identical to assets/blog.css so the
            two surfaces stay one system; this file restates the subset it
            needs rather than pulling in ~1,300 lines of article CSS.
     `ktp-` pricing-only components. Nothing else on the site uses this prefix,
            so the plan cards cannot collide with anything generated.
   ========================================================================== */

:root {
  /* Ink */
  --kt-ink: #fdfcfc;
  --kt-ink-2: #b3b3b3;
  --kt-ink-3: #8a8a8a;
  --kt-ink-4: #7d7d7d;

  /* Ground */
  --kt-bg: #000;
  --kt-surface: #0f0f0f;
  --kt-surface-2: #161616;

  /* Rules */
  --kt-line: #ffffff1a;
  --kt-line-strong: #ffffff2e;

  /* Accent */
  --kt-accent: #fe6512;
  --kt-accent-dim: #fe651233;
  --kt-accent-wash: #fe65120d;
  /* The two status values the incumbent `menu-soon` pill already uses. Reusing
     them exactly is what makes the offer badges read as the same component. */
  --kt-accent-fill: #fe65122e;
  --kt-accent-edge: #fe651273;

  /* Type roles */
  --kt-display: Interdisplay, Inter, Arial, sans-serif;
  --kt-utility: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --kt-ease: cubic-bezier(.16, 1, .3, 1);

  /* Depth. The only two shadows on the page — one for a card answering a
     pointer, one holding the recommended plan a step off the ground. Both are
     pure black on a black field, so they read as separation, not as glow. */
  --kt-lift: 0 18px 40px -24px #000000d9;
  --kt-lift-strong: 0 28px 64px -28px #000000f2;

  /* Sticky offset — the site header is position:sticky, top:0 */
  --kt-sticky-top: 112px;
}

/* --------------------------------------------------------------------------
   Shared primitives
   -------------------------------------------------------------------------- */
.kt-section {
  padding: 88px 0;
}

.kt-section--tight {
  padding: 56px 0;
}

.kt-spec {
  font-family: var(--kt-utility);
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kt-ink-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.kt-spec>* {
  margin: 0;
}

.kt-spec .kt-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  flex: none;
}

.kt-label {
  margin: 0;
  font-family: var(--kt-utility);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kt-ink-4);
}

/* Section header — a rule with the title on it, matching the blog. */
.kt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--kt-line);
}

.kt-head h2 {
  margin: 0;
  font-family: var(--kt-display);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -.03em;
  font-weight: 500;
  color: var(--kt-ink);
}

.kt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 200px;
  border: 1px solid transparent;
  background: var(--kt-ink);
  color: #0f0f0f;
  font-family: var(--kt-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  /* Tap targets: 15px padding on a 16px/1 label is a 46px box, over the 44px
     minimum, so the phone rules need no separate size override. */
  min-height: 46px;
  transition: background .3s var(--kt-ease), color .3s var(--kt-ease), border-color .3s var(--kt-ease), transform .2s var(--kt-ease);
}

.kt-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform .35s var(--kt-ease);
}

/* Only the ground changes on hover. Keeping the label dark holds 6.5:1 on the
   accent; white on this orange is 2.9:1 and fails at any size.
   Gated on a real pointer so a phone tap does not leave the button stuck in
   its hover state until the next touch elsewhere. */
@media (hover: hover) {
  .kt-btn:hover {
    background: var(--kt-accent);
  }

  .kt-btn:hover svg {
    transform: translate(3px, -3px);
  }
}

/* Touch gets the press instead — the one piece of feedback a finger can feel. */
.kt-btn:active {
  transform: translateY(1px);
}

.kt-btn--ghost {
  background: transparent;
  color: var(--kt-ink);
  border-color: var(--kt-line-strong);
}

/* The ghost never fills — only its border answers. */
@media (hover: hover) {
  .kt-btn--ghost:hover {
    background: transparent;
    color: var(--kt-ink);
    border-color: var(--kt-accent);
  }
}

.kt-scope a:focus-visible,
.kt-scope button:focus-visible,
.kt-scope summary:focus-visible {
  outline: 2px solid var(--kt-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.kt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scroll reveal — only armed once JS confirms it can un-hide the content. */
html.kt-js .kt-reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity .7s var(--kt-ease), translate .7s var(--kt-ease);
}

html.kt-js .kt-reveal.kt-in {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  html.kt-js .kt-reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .kt-scope * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Anchor jumps have to clear the sticky, blurred header. */
.kt-scope [id] {
  scroll-margin-top: var(--kt-sticky-top);
}

/* Active navigation item used to live here, scoped to this page. It is now in
   assets/header-nav.css so every page marks where it is, not just this one. */

/* ==========================================================================
   1. HERO
   The contour field is the same asset the blog hero uses — terrain lines, the
   one atmospheric device the system allows. No gradient wash, no glow orb.
   ========================================================================== */
.ktp-hero {
  position: relative;
  padding: 96px 0 64px;
  overflow: hidden;
  isolation: isolate;
}

.ktp-hero-figure {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -10%;
  width: 62%;
  max-width: 860px;
  aspect-ratio: 960 / 560;
  transform: translateY(-50%);
  background: url("/assets/contour.svg") center / contain no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  pointer-events: none;
  opacity: .9;
}

.ktp-hero-inner {
  max-width: 660px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.ktp-hero h1 {
  margin: 0;
  font-family: var(--kt-display);
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 500;
  color: var(--kt-ink);
}

.ktp-hero-sub {
  margin: 0;
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--kt-ink-2);
}

/* The three promises that answer the objections a price list creates. Set as a
   rule of small items rather than a row of cards — the cards come next. */
.ktp-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ktp-assurances li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--kt-utility);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--kt-ink-3);
}

.ktp-assurances svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--kt-accent);
}

/* ==========================================================================
   2. PLAN CARDS
   ========================================================================== */
.ktp-plans-section {
  padding: 40px 0 88px;
}

/* --- Launch-offer strip --------------------------------------------------
   One quiet line between the section rule and the cards. It states a real
   constraint — a studio takes a fixed number of builds at a time — and makes
   no claim a clock could contradict. No countdown, no colour flood: the accent
   appears once, as a 5px dot. */
.ktp-offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 32px;
  padding: 14px 20px;
  background: var(--kt-accent-wash);
  border: 1px solid var(--kt-accent-dim);
  border-radius: 200px;
}

.ktp-offer-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-family: var(--kt-utility);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kt-accent);
}

.ktp-offer-tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.ktp-offer-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--kt-ink-2);
}

.ktp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ktp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kt-surface);
  border: 1px solid var(--kt-line);
  border-radius: 24px;
  overflow: hidden;
  transition: border-color .35s var(--kt-ease), transform .35s var(--kt-ease), background .35s var(--kt-ease), box-shadow .35s var(--kt-ease);
}

@media (hover: hover) {
  .ktp-plan:hover {
    border-color: var(--kt-line-strong);
    transform: translateY(-4px);
    box-shadow: var(--kt-lift);
  }

  /* A card answering the pointer promotes its own outline button, so the whole
     card reads as one target rather than a card with a button parked in it. */
  .ktp-plan:hover .ktp-plan-cta.kt-btn--ghost {
    border-color: var(--kt-ink);
  }
}

/* The recommendation is carried by ground, hairline, height and depth — four
  quiet signals instead of one loud one. Still no fill, still no colour flood. */
.ktp-plan--featured {
  background: var(--kt-surface-2);
  border-color: var(--kt-accent-edge);
  box-shadow: var(--kt-lift-strong);
}

@media (hover: hover) {
  .ktp-plan--featured:hover {
    border-color: var(--kt-accent);
    box-shadow: var(--kt-lift-strong);
  }
}

/* The status ribbon. Same wash, edge and ink as the site's `menu-soon` pill,
   so "most popular" reads as the same kind of statement as "coming soon". */
.ktp-plan-flag {
  margin: 0;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  background: var(--kt-accent-fill);
  border-bottom: 1px solid var(--kt-accent-dim);
  font-family: var(--kt-utility);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--kt-accent);
}

/* The ribbon only sits on the featured card, so the other two need its height
   back — otherwise the three prices sit on three different baselines and the
   row stops reading as a comparison. */
.ktp-plan:not(.ktp-plan--featured)::before {
  content: "";
  display: block;
  height: 38px;
  flex: none;
}

.ktp-plan-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 32px 28px 28px;
}

/* Desktop only: the recommended card stands 16px proud at each end. Bleeding
   the box rather than transform:scale() keeps the type on the pixel grid — a
   scaled card resamples every glyph and the price goes soft, which is the one
   number on the page that must not.
   The extra padding gives the 16px straight back on the inside, so the three
   prices still sit on one baseline and the three buttons on another. Break
   that and the row stops being a comparison. */
@media (min-width: 992px) {
  .ktp-plan--featured {
    margin-block: -16px;
  }

  .ktp-plan--featured .ktp-plan-body {
    padding-top: 48px;
    padding-bottom: 44px;
  }
}

.ktp-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin: 0 0 20px;
  padding: 5px 12px;
  border: 1px solid var(--kt-line-strong);
  border-radius: 200px;
  font-family: var(--kt-utility);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kt-ink-2);
  white-space: nowrap;
}

.ktp-badge--accent {
  border-color: var(--kt-accent-edge);
  background: var(--kt-accent-fill);
  color: var(--kt-accent);
}

.ktp-plan h3 {
  margin: 0 0 10px;
  font-family: var(--kt-display);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 500;
  color: var(--kt-ink);
}

.ktp-plan-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--kt-ink-3);
}

/* --- Price block ---------------------------------------------------------
   Three sizes, three roles, read top to bottom in the order a buyer asks the
   questions: what was it, what is it, what did I save. 13px / 46px / 11px is a
   3.5x jump onto the offer price and back off it — the was-price never competes
   and the savings never shouts. */
.ktp-price {
  margin: 26px 0 0;
  padding: 22px 0 24px;
  border-top: 1px solid var(--kt-line);
  border-bottom: 1px solid var(--kt-line);
}

.ktp-price-was {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-family: var(--kt-utility);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--kt-ink-4);
}

/* `<s>` carries the meaning; the line is drawn thin so the number stays
   readable rather than crossed out into noise. */
.ktp-price-was s {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--kt-ink-4);
}

/* The word that tells a scanner what the struck number is, without making them
   infer it. Small enough that the eye still lands on the offer price first. */
.ktp-price-was em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kt-ink-4);
  opacity: .8;
}

.ktp-price-now {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-family: var(--kt-display);
  font-size: clamp(40px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 500;
  color: var(--kt-ink);
  /* The rupee figure and "+ GST" must never break apart mid-number on a narrow
     phone; the tax note wraps as a unit or not at all. */
  white-space: nowrap;
}

.ktp-price-tax {
  font-family: var(--kt-utility);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kt-ink-4);
  white-space: nowrap;
}

.ktp-save {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 6px 12px;
  border: 1px solid var(--kt-line);
  border-radius: 200px;
  font-family: var(--kt-utility);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kt-ink);
  white-space: nowrap;
}

/* The percentage is context, not the claim. It sits behind a hairline divider
   at reduced weight so "Save ₹3,000" stays the sentence being read. */
.ktp-save span {
  padding-left: 8px;
  border-left: 1px solid var(--kt-line-strong);
  color: var(--kt-ink-4);
}

/* On the recommended plan the savings pill picks up the accent it has earned —
   ₹10,000 is the largest number on the page and the one worth landing on. */
.ktp-plan--featured .ktp-save {
  border-color: var(--kt-accent-edge);
  background: var(--kt-accent-fill);
  color: var(--kt-accent);
}

.ktp-plan--featured .ktp-save span {
  border-left-color: var(--kt-accent-dim);
  color: var(--kt-accent);
  opacity: .75;
}

/* --- Feature list -------------------------------------------------------- */
.ktp-features {
  flex: 1;
  margin: 24px 0 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ktp-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kt-ink-2);
}

.ktp-features svg {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 4px;
  color: var(--kt-ink-3);
}

/* The featured plan's ticks carry the accent. It is the one place orange sits
   at rest, and it is doing the highlighting work a fill or a shadow would. */
.ktp-plan--featured .ktp-features svg {
  color: var(--kt-accent);
}

/* --- Card foot -----------------------------------------------------------
   The hierarchy across the row is made by demoting, not by shouting: two
   outline buttons and one filled one. Filled-white is already the loudest
   control the system has, so the only way to raise the Business card is to
   quieten its neighbours. */
.ktp-plan-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 4px, not 16 — the WhatsApp link carries its own 44px tap box below, and
     the two gaps would otherwise stack into a hole. */
  gap: 4px;
  margin-top: auto;
}

.ktp-plan-cta {
  width: 100%;
}

/* Second door for the visitor who would rather type than fill in a form. Kept
   at label size so it never competes with the button above it. */
.ktp-plan-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* An 11px label is a 15px-tall hit box. Padding it out to 44 is what makes
     it tappable rather than technically present. */
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--kt-utility);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kt-ink-4);
  text-decoration: none;
  transition: color .25s var(--kt-ease);
}

.ktp-plan-alt svg {
  width: 13px;
  height: 13px;
  flex: none;
}

@media (hover: hover) {
  .ktp-plan-alt:hover {
    color: var(--kt-ink);
  }
}

/* ==========================================================================
   3. ADD-ONS
   ========================================================================== */
.ktp-addons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ktp-addon {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--kt-surface);
  border: 1px solid var(--kt-line);
  border-radius: 16px;
  transition: border-color .3s var(--kt-ease), background .3s var(--kt-ease);
}

@media (hover: hover) {
  .ktp-addon:hover {
    border-color: var(--kt-line-strong);
    background: var(--kt-surface-2);
  }
}

.ktp-addon h3 {
  margin: 0;
  font-family: var(--kt-display);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -.02em;
  font-weight: 500;
  color: var(--kt-ink);
}

.ktp-addon-price {
  margin: 0;
  font-family: var(--kt-utility);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--kt-ink-2);
}

.ktp-addon-price span {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kt-ink-4);
}

.ktp-addon-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--kt-ink-3);
}

/* Sixth cell. Five add-ons in a three-column grid leave a hole in the second
   row; filling it with the question a price list always raises turns a gap
   into the page's quietest conversion point. Unfilled ground marks it as an
   action rather than another priced item. */
.ktp-addon--ask {
  background: transparent;
}

@media (hover: hover) {
  .ktp-addon--ask:hover {
    background: transparent;
    border-color: var(--kt-accent);
  }
}

.ktp-addon--ask a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--kt-utility);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kt-ink);
  text-decoration: none;
  transition: color .3s var(--kt-ease);
}

.ktp-addon--ask a svg {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform .35s var(--kt-ease);
}

@media (hover: hover) {
  .ktp-addon--ask:hover a {
    color: var(--kt-accent);
  }

  .ktp-addon--ask:hover a svg {
    transform: translate(3px, -3px);
  }
}

/* ==========================================================================
   4. WHAT THE PRICE COVERS
   Two columns of equal weight, distinguished only by the mark on each row: a
   tick in accent, a slash in muted ink. Putting "not included" in a red or
   warning colour would read as a problem with the offer — it is not one, it is
   the honesty that makes the rest of the page believable, so it gets the same
   card, the same ground and the same type as its neighbour.
   ========================================================================== */
.ktp-covers-lede {
  margin: 0 0 24px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--kt-ink);
}

.ktp-covers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  /* Equal height. Three items against four would otherwise leave one card
     visibly short, and a shorter "included" card reads as the smaller half of
     the deal — which is the opposite of what it says. */
  align-items: stretch;
}

.ktp-cover {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--kt-surface);
  border: 1px solid var(--kt-line);
  border-radius: 24px;
}

.ktp-cover--in {
  border-color: var(--kt-accent-dim);
}

.ktp-cover-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--kt-line);
  font-family: var(--kt-display);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.02em;
  font-weight: 500;
  color: var(--kt-ink);
}

.ktp-cover-head span {
  font-family: var(--kt-utility);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kt-ink-4);
}

.ktp-cover-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ktp-cover-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.ktp-cover-list svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
}

.ktp-cover--in svg {
  color: var(--kt-accent);
}

.ktp-cover--out svg {
  color: var(--kt-ink-4);
}

.ktp-cover-list b {
  display: block;
  font-family: var(--kt-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--kt-ink);
}

.ktp-cover-list small {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--kt-ink-3);
}

.ktp-cover-list {
  flex: 1;
}

/* Takes the height the shorter card would have wasted, and earns it: each card
   closes on the one thing a reader is still wondering about. */
.ktp-cover-note {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--kt-line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--kt-ink-4);
}

.ktp-cover-note a {
  color: var(--kt-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--kt-line-strong);
  transition: color .25s var(--kt-ease), text-decoration-color .25s var(--kt-ease);
}

.ktp-cover-note a:hover {
  color: var(--kt-accent);
  text-decoration-color: var(--kt-accent);
}

.ktp-covers-foot {
  margin: 28px 0 0;
  max-width: 74ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--kt-ink-3);
}

.ktp-covers-foot a {
  color: var(--kt-ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--kt-line-strong);
  transition: color .25s var(--kt-ease), text-decoration-color .25s var(--kt-ease);
}

.ktp-covers-foot a:hover {
  color: var(--kt-accent);
  text-decoration-color: var(--kt-accent);
}

/* ==========================================================================
   5. FAQ
   Quiet counterpart to the cards: hairline-separated rows, no boxes.

   Built on <details>/<summary>, and shipped OPEN in the markup. Two things
   fall out of that: the answers are in the document for a reader with no JS
   and for anything that does not run scripts, and the browser gives us the
   button role, the keyboard handling and find-in-page for free. The collapse
   is a progressive enhancement — `html.kt-js` is set in <head>, before first
   paint, so the closed state is painted from the very first frame and the page
   never flashes eight open answers.
   ========================================================================== */
.ktp-faq {
  max-width: 820px;
  border-top: 1px solid var(--kt-line);
}

.ktp-faq-item {
  border-bottom: 1px solid var(--kt-line);
}

.ktp-faq-item>summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  /* 22px of vertical padding on a 19px/1.35 line gives a ~70px row: the whole
     width of the question is the tap target, not just the words. */
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  transition: color .25s var(--kt-ease);
}

/* Both halves of removing the native disclosure triangle — the standard
   property and the WebKit pseudo-element, which ignores it. */
.ktp-faq-item>summary::-webkit-details-marker {
  display: none;
}

.ktp-faq-item>summary::marker {
  content: "";
}

/* An <h3> inside <summary> — the spec allows heading content there, and it is
   what keeps the eight questions in the document outline instead of turning
   them into eight anonymous buttons. */
.ktp-faq-q {
  margin: 0;
  font-family: var(--kt-display);
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -.02em;
  font-weight: 500;
  color: var(--kt-ink);
  transition: color .25s var(--kt-ease);
}

@media (hover: hover) {
  .ktp-faq-item>summary:hover .ktp-faq-q {
    color: var(--kt-accent);
  }

  .ktp-faq-item>summary:hover .ktp-faq-icon {
    border-color: var(--kt-line-strong);
  }
}

/* Plus that becomes a minus: the vertical bar collapses to nothing. Two 1px
   rules and a scale — cheaper than an icon swap and it reads as one movement. */
.ktp-faq-icon {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  margin-top: 1px;
  border: 1px solid var(--kt-line);
  border-radius: 50%;
  transition: border-color .25s var(--kt-ease), transform .4s var(--kt-ease);
}

.ktp-faq-icon::before,
.ktp-faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  background: var(--kt-ink-2);
  translate: -50% -50%;
  transition: transform .4s var(--kt-ease), background .25s var(--kt-ease);
}

.ktp-faq-icon::before {
  width: 11px;
  height: 1px;
}

.ktp-faq-icon::after {
  width: 1px;
  height: 11px;
}

.ktp-faq-item.is-open .ktp-faq-icon {
  border-color: var(--kt-accent-edge);
  transform: rotate(180deg);
}

.ktp-faq-item.is-open .ktp-faq-icon::before,
.ktp-faq-item.is-open .ktp-faq-icon::after {
  background: var(--kt-accent);
}

.ktp-faq-item.is-open .ktp-faq-icon::after {
  transform: scaleY(0);
}

.ktp-faq-item.is-open .ktp-faq-q {
  color: var(--kt-ink);
}

/* 0fr -> 1fr on a grid row is the one height transition that does not need a
   measured pixel value, so an answer of any length animates correctly. */
.ktp-faq-panel {
  display: grid;
  grid-template-rows: 1fr;
}

html.kt-js .ktp-faq-panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--kt-ease);
}

html.kt-js .ktp-faq-item.is-open .ktp-faq-panel {
  grid-template-rows: 1fr;
}

.ktp-faq-inner {
  overflow: hidden;
  min-height: 0;
}

.ktp-faq-item p {
  margin: 0;
  padding: 0 56px 26px 4px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--kt-ink-2);
}

.ktp-faq-item p+p {
  padding-top: 14px;
}

/* The summary is the focus target, and it is a full-width row — the default
   6px radius would draw a ring around a box the eye does not think it is
   focusing. Square it off to the row. */
.kt-scope .ktp-faq-item>summary:focus-visible {
  outline: 2px solid var(--kt-accent);
  outline-offset: -2px;
  border-radius: 10px;
}

.ktp-faq-item a {
  color: var(--kt-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--kt-line-strong);
  transition: color .25s var(--kt-ease), text-decoration-color .25s var(--kt-ease);
}

.ktp-faq-item a:hover {
  color: var(--kt-accent);
  text-decoration-color: var(--kt-accent);
}

/* ==========================================================================
   6. CLOSING CTA
   ========================================================================== */
.ktp-cta {
  background: var(--kt-surface);
  border: 1px solid var(--kt-line);
  border-radius: 32px;
  padding: 68px 64px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.ktp-cta h2 {
  margin: 0 0 16px;
  font-family: var(--kt-display);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 500;
  color: var(--kt-ink);
}

.ktp-cta p {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--kt-ink-2);
}

.ktp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .kt-section {
    padding: 64px 0;
  }

  .ktp-hero {
    padding: 64px 0 48px;
  }

  .ktp-hero-figure {
    width: 92%;
    right: -24%;
    opacity: .7;
  }

  .ktp-hero-inner {
    max-width: 100%;
  }

  .ktp-plans-section {
    padding: 24px 0 64px;
  }

  .ktp-plans {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    max-width: 560px;
  }

  /* On one column the featured plan leads: it is the recommendation, and a
     visitor scrolling a phone should meet it before the alternatives. */
  .ktp-plan--featured {
    order: -1;
  }

  /* Stacked, there is no row to align to — the spacer would just be dead air. */
  .ktp-plan:not(.ktp-plan--featured)::before {
    display: none;
  }

  .ktp-addons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ktp-covers {
    grid-template-columns: 1fr;
  }

  .ktp-cta {
    grid-template-columns: 1fr;
    padding: 44px 32px;
    gap: 32px;
  }

  .ktp-cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .ktp-assurances {
    gap: 10px 20px;
  }

  .ktp-addons {
    grid-template-columns: minmax(0, 1fr);
  }

  .kt-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* The pill shape needs a single line to make sense. Stacked, it becomes a
     panel — same wash, same hairline, squared-off corners. */
  .ktp-offer {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    border-radius: 18px;
  }

  .ktp-covers-lede {
    font-size: 16px;
  }

  .ktp-cover {
    padding: 26px 22px;
  }

  .ktp-faq-item>summary {
    gap: 16px;
    padding: 20px 2px;
  }

  .ktp-faq-q {
    font-size: 17px;
  }

  .ktp-faq-item p {
    /* No 56px gutter to clear on a phone — the icon column is gone from the
       reading measure once the answer is the full width. */
    padding: 0 2px 22px;
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .ktp-hero-figure {
    display: none;
  }

  .ktp-plans {
    max-width: 100%;
  }

  .ktp-plan-body {
    padding: 28px 22px 24px;
  }

  /* 40px is the floor that keeps "₹15,000 + GST" on one line inside a 22px
     gutter at 320px. Below that the number would have to wrap, and a price
     broken across two lines stops being a price. */
  .ktp-price-now {
    font-size: 40px;
  }

  .ktp-cover {
    border-radius: 20px;
  }

  .ktp-cta {
    padding: 36px 24px;
    border-radius: 24px;
  }

  .kt-btn {
    width: 100%;
  }

  .ktp-cta-actions {
    width: 100%;
  }
}