/* ==== landing-page.css · layer 1 of 2 ==== */
/* ==========================================================================
   an earlier layer of this file — THE EIGHT PAGE SCENES
   Linked only by landing-page.html.

   The Google Ads page draws each campaign type as a small picture inside the
   service card (.sc-pic > .cv-well > .cv.cv-search, .cv-shop, .cv-remk …),
   built in assets/services/campaign-types/cards.css. This file adds the EIGHT scenes that page
   does not have — one per landing-page type — in exactly that vocabulary:

     · the well, its ground, its hairline grid and its hue tokens
       (--h / --hs / --he / --hd) come from cards.css unchanged
     · `.cv s`, `.cv-tag`, `.cv-stars`, `.cv-div`, `.cv-lines` are reused as-is
     · everything new is prefixed `.lp-` so it can never reach the six
       campaign scenes on the Google Ads page

   Every scene is one drawing of the SAME object — a browser window showing a
   landing page — so the eight read as one family, and each one is drawn
   around the single thing that page type is actually for:

     1 campaign   the ad above the page, saying the same words
     2 lead       the first screen: offer left, form right, call bar under
     3 ecom       the product, the price, the buy bar
     4 franchise  the opportunity as three facts, then a qualifying form
     5 highticket the method as stages, proof beside the ask
     6 proposal   a private link, scope, then the commercials
     7 member     the billing toggle and the plans side by side
     8 nurture    a long page with the ask repeated at three depths

   SCALE. Nothing here is in px. `.cv` sets font-size from the well's own
   width (clamp(9px, 4.4cqw, 23px)), so every scene is drawn in `em` and
   reads identically in the rail, in the wide card and on a phone.
   ========================================================================== */


/* ==========================================================================
   1 · THE SHARED OBJECT — a browser window showing a page
   ========================================================================== */
.cv-lp{ display:flex; flex-direction:column; gap:.5em; padding:.95em .85em; }

/* the window itself */
.lp-win{ flex:1; min-height:0; display:flex; flex-direction:column;
  border-radius:.8em; background:#fff; border:1.5px solid var(--he);
  box-shadow:0 .5em 1.4em rgba(15,27,61,.09); overflow:hidden; }

/* its chrome: three dots and the address */
.lp-bar{ flex:none; display:flex; align-items:center; gap:.42em;
  padding:.42em .55em; border-bottom:1px solid var(--he); background:#F7F9FD; }
.lp-dots{ flex:none; display:flex; gap:.2em; }
.lp-dots i{ width:.32em; height:.32em; border-radius:50%; background:#D3DBE7; }
.lp-url{ flex:1; min-width:0; font-style:normal; font-size:.46em; letter-spacing:.01em;
  color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:.28em .6em; border-radius:99px; background:#fff; border:1px solid var(--he); }

/* the page inside it */
.lp-body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:.36em;
  padding:.62em .64em; overflow:hidden; }

/* THE FILL RULE. A square well is a fixed budget, so every scene names
   exactly ONE child that absorbs whatever is left over. Without it the
   drawing crowds against the chrome and leaves a void at the foot — which
   is what a landing page never looks like. */
.lp-grow{ flex:1 1 auto; min-height:0; }

.lp-h{ font-size:.84em; font-weight:800; letter-spacing:-.032em; line-height:1.14;
  color:var(--hd); }
.lp-h em{ font-style:normal; color:var(--h); }
.lp-k{ font-family:var(--mono); font-size:.42em; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); font-weight:500; }
.lp-p{ font-size:.54em; line-height:1.4; color:var(--ink-3); }

/* the actions */
.lp-cta{ align-self:flex-start; font-size:.58em; font-weight:750; color:#fff;
  background:var(--h); padding:.52em 1.15em; border-radius:.44em; white-space:nowrap; }
.lp-cta.is-wide{ align-self:stretch; text-align:center; }
.lp-ghost{ align-self:flex-start; font-size:.54em; font-weight:700; color:var(--hd);
  background:#fff; border:1.2px solid var(--he); padding:.44em .9em; border-radius:.42em;
  white-space:nowrap; }

/* small labelled chips, reused by several scenes */
.lp-chips{ display:flex; flex-wrap:wrap; gap:.28em; }
.lp-chip{ font-size:.47em; font-weight:700; color:var(--hd); background:var(--hs);
  padding:.36em .64em; border-radius:99px; white-space:nowrap; }
.lp-chip.is-ok{ color:#0C5A25; background:#E3F3E9; }

/* a row of grey text bars — the page's body copy */
.lp-lines{ display:flex; flex-direction:column; gap:.22em; }

/* the page CONTINUING below what is being pointed at. The Google Ads Search
   scene does the same thing with `.cv-rest` ("the free results below"): the
   drawing stays honest about the fact that a page does not end at the button,
   and the square fills with something true instead of with air. */
.lp-rest{ display:flex; flex-direction:column; gap:.28em; opacity:.5; }
/* when it is the growing child it spreads its blocks, rather than stacking
   them at the top and leaving the slack as one empty band */
.lp-rest.lp-grow{ justify-content:space-around; }
.lp-rest .lp-blk{ display:flex; flex-direction:column; gap:.18em; }
.lp-rest .lp-blk s:first-child{ height:.3em; background:var(--he); width:42%; }

/* the mono caption between two parts of a drawing.
   Same idea as cards.css's .cv-div, but it may carry a hue and sit flush. */
.lp-note{ flex:none; display:flex; align-items:center; gap:.45em;
  font-family:var(--mono); font-size:.4em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); }
.lp-note::before,.lp-note::after{ content:""; flex:1; height:1px; background:var(--he); }
.lp-note.is-on{ color:var(--hd); }

/* the bar pinned to the foot of the phone screen */
.lp-stick{ flex:none; display:flex; align-items:center; gap:.4em;
  padding:.44em .55em; border-top:1px solid var(--he); background:#F7F9FD; }
.lp-stick .lp-sb{ flex:1; display:flex; align-items:center; justify-content:center; gap:.3em;
  font-size:.48em; font-weight:750; color:var(--hd); background:#fff;
  border:1.2px solid var(--he); border-radius:.4em; padding:.42em .5em; }
.lp-stick .lp-sb svg{ width:1em; height:1em; flex:none; stroke-width:2.1; }
.lp-stick .lp-sb.is-fill{ color:#fff; background:var(--h); border-color:var(--h); }
.lp-stick .lp-sp{ flex:none; font-size:.66em; font-weight:800; letter-spacing:-.026em;
  color:var(--hd); padding-left:.15em; }

/* a form, drawn as label + empty field */
.lp-form{ display:flex; flex-direction:column; gap:.28em; padding:.55em;
  border-radius:.5em; background:#F7F9FD; border:1px solid var(--he); }
.lp-fl{ font-size:.46em; font-weight:650; color:var(--ink-3); }
.lp-fi{ height:.9em; border-radius:.26em; background:#fff; border:1px solid var(--he); }
.lp-form .lp-cta{ margin-top:auto; }

/* three small fact tiles */
.lp-tiles{ display:flex; gap:.32em; }
.lp-tile{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.26em;
  padding:.48em .5em; border-radius:.44em; background:var(--hs); }
.lp-tile b{ font-size:.45em; font-weight:700; color:var(--hd); line-height:1.2; }
.lp-tile s{ height:.24em !important; background:rgba(255,255,255,.9) !important; }
.lp-tiles.lp-grow .lp-tile{ justify-content:space-between; }


/* ==========================================================================
   2 · 01 CAMPAIGN PAGE — the ad, then the page saying the same words
   ========================================================================== */
.lp-ad{ flex:none; display:flex; flex-direction:column; gap:.2em;
  padding:.48em .58em; border-radius:.55em; background:#fff; border:1.5px solid var(--he); }
.lp-ad .lp-adr{ display:flex; align-items:center; gap:.4em; }
.lp-ad .lp-adu{ font-style:normal; font-size:.44em; color:#3C7A45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lp-ad .lp-adt{ font-size:.56em; font-weight:700; letter-spacing:-.018em; color:#1A0DAB; }
.cv-lp1 .lp-match{ display:flex; align-items:center; gap:.4em; margin-top:.1em; }
.cv-lp1 .lp-match svg{ width:.62em; height:.62em; flex:none; color:#188038; stroke-width:2.6; }
.cv-lp1 .lp-match span{ font-size:.42em; font-weight:700; color:#0C5A25; }


/* ==========================================================================
   3 · 02 LEAD GENERATION — offer left, form right, call bar under
   ========================================================================== */
.cv-lp2 .lp-split{ display:flex; gap:.45em; align-items:stretch; }
.cv-lp2 .lp-said{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.3em; }
.cv-lp2 .lp-form{ flex:none; width:47%; }
.cv-lp2 .lp-said .lp-lines{ margin-top:auto; }
.cv-lp2 .lp-proofrow{ display:flex; align-items:center; gap:.5em; }
.cv-lp2 .lp-proofrow .cv-stars u{ display:inline; font-size:.46em; font-weight:650;
  color:var(--ink-3); text-decoration:none; }


/* ==========================================================================
   4 · 03 E-COMMERCE — the product, the price, the buy bar
   ========================================================================== */
/* the photograph is a SLOT, not a greedy child: it takes the room a product
   shot actually gets on a selling page and leaves the price, the rating and
   the answers below it visible without scrolling. */
.cv-lp3 .lp-shot{ flex:none; width:100%; aspect-ratio:3/1; display:grid; place-items:center;
  overflow:hidden; border-radius:.5em; border:1px solid var(--he); min-height:0;
  background:radial-gradient(60% 58% at 50% 46%, var(--hs) 0%, rgba(255,255,255,0) 76%); }
.cv-lp3 .lp-shot svg{ width:38%; height:auto; color:var(--hd); stroke-width:2.6; }
.cv-lp3 .lp-shot svg .f{ opacity:.2; }
.cv-lp3 .lp-pl{ font-size:.54em; font-weight:650; color:var(--ink-2); line-height:1.25; }
.cv-lp3 .lp-prow{ display:flex; align-items:baseline; gap:.42em; flex-wrap:wrap; }
.cv-lp3 .lp-now{ font-size:.92em; font-weight:800; letter-spacing:-.03em; color:var(--hd); }
.cv-lp3 .lp-was{ font-size:.5em; color:var(--ink-4); text-decoration:line-through; }
.cv-lp3 .lp-qa{ display:flex; flex-direction:column; gap:.24em; }
.cv-lp3 .lp-qa span{ display:flex; align-items:center; gap:.38em;
  font-size:.46em; font-weight:650; color:var(--ink-3); }
.cv-lp3 .lp-qa svg{ width:.85em; height:.85em; flex:none; color:#188038; stroke-width:2.4; }


/* ==========================================================================
   5 · 04 FRANCHISE — the opportunity as three facts, then a qualifying form
   ========================================================================== */
.cv-lp4 .lp-qrow{ display:flex; gap:.3em; }
.cv-lp4 .lp-qrow > span{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2em; }
.cv-lp4 .lp-qrow .lp-fl{ font-size:.4em; }


/* ==========================================================================
   6 · 05 HIGH-TICKET — the method as stages, proof beside the ask
   ========================================================================== */
.cv-lp5 .lp-steps{ display:flex; gap:.26em; }
.cv-lp5 .lp-step{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2em;
  padding:.4em .42em; border-radius:.42em; background:#fff; border:1px solid var(--he); }
.cv-lp5 .lp-step i{ font-style:normal; font-family:var(--mono); font-size:.38em;
  font-weight:600; color:var(--h); }
.cv-lp5 .lp-step b{ font-size:.42em; font-weight:700; color:var(--ink-2); line-height:1.2; }
.cv-lp5 .lp-proof{ display:flex; align-items:center; gap:.42em;
  padding:.42em .5em; border-radius:.46em; background:var(--hs); }
.cv-lp5 .lp-proof .lp-pv{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.18em; }
.cv-lp5 .lp-proof b{ font-size:.44em; font-weight:750; color:var(--hd); }
.cv-lp5 .lp-ask{ display:flex; align-items:center; gap:.42em; margin-top:auto; }


/* ==========================================================================
   7 · 06 PROPOSAL — a private link, scope, then the commercials
   ========================================================================== */
.cv-lp6 .lp-link{ flex:none; display:flex; align-items:center; gap:.4em;
  align-self:flex-start; padding:.3em .62em; border-radius:99px;
  background:var(--hs); color:var(--hd); }
.cv-lp6 .lp-link svg{ width:.62em; height:.62em; flex:none; stroke-width:2.2; }
.cv-lp6 .lp-link span{ font-size:.42em; font-weight:700; letter-spacing:.01em; }
.cv-lp6 .lp-comm{ display:flex; gap:.3em; }
.cv-lp6 .lp-comm > span{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.18em;
  padding:.4em .45em; border-radius:.42em; border:1px solid var(--he); background:#fff; }
.cv-lp6 .lp-comm b{ font-size:.4em; font-weight:700; color:var(--ink-3);
  letter-spacing:.06em; text-transform:uppercase; font-family:var(--mono); }
.cv-lp6 .lp-acts{ display:flex; gap:.3em; align-items:center; }


/* ==========================================================================
   8 · 07 MEMBERSHIP — the billing toggle, then the plans side by side
   ========================================================================== */
.cv-lp7 .lp-tog{ align-self:center; display:flex; gap:.14em; padding:.16em;
  border-radius:99px; background:#EDF1F7; }
.cv-lp7 .lp-tog span{ font-size:.45em; font-weight:700; color:var(--ink-3);
  padding:.32em .74em; border-radius:99px; white-space:nowrap; }
.cv-lp7 .lp-tog span.on{ color:#fff; background:var(--h); }
.cv-lp7 .lp-plans{ display:flex; gap:.3em; align-items:stretch; }
.cv-lp7 .lp-plan{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.22em;
  padding:.46em .42em; border-radius:.46em; background:#fff; border:1px solid var(--he); }
.cv-lp7 .lp-plan b{ font-size:.47em; font-weight:750; color:var(--ink-2); }
.cv-lp7 .lp-plan u{ text-decoration:none; font-size:.62em; font-weight:800;
  letter-spacing:-.028em; color:var(--hd); line-height:1.1; }
.cv-lp7 .lp-plan u small{ font-size:.5em; font-weight:650; color:var(--ink-4); }
.cv-lp7 .lp-plan .lp-ticks{ flex:1; display:flex; flex-direction:column; gap:.2em; margin-top:.1em; }
.cv-lp7 .lp-plan .lp-ticks i{ display:block; height:.22em; border-radius:99px; background:#E4E9F1; }
.cv-lp7 .lp-plan .lp-ticks i:nth-child(odd){ width:86%; }
.cv-lp7 .lp-plan.is-rec{ border-color:var(--h); box-shadow:0 0 0 1.5px var(--hs); }
.cv-lp7 .lp-plan.is-rec b{ color:var(--hd); }
.cv-lp7 .lp-plan.is-rec .lp-ticks i{ background:var(--he); }
.cv-lp7 .lp-rec{ align-self:flex-start; font-size:.38em; font-weight:750; color:#fff;
  background:var(--h); padding:.24em .52em; border-radius:99px; letter-spacing:.04em; }
.cv-lp7 .lp-plan .lp-mini{ margin-top:auto; font-size:.44em; font-weight:700; color:var(--hd);
  text-align:center; background:var(--hs); border-radius:.3em; padding:.32em .2em; }
.cv-lp7 .lp-plan.is-rec .lp-mini{ color:#fff; background:var(--h); }


/* ==========================================================================
   9 · 08 NURTURING — one long page, the ask repeated at three depths
   ========================================================================== */
.cv-lp8 .lp-scroll{ flex:1; min-height:0; display:flex; flex-direction:column; gap:.3em;
  overflow:hidden; }
.cv-lp8 .lp-seg{ display:flex; flex-direction:column; gap:.2em; }
.cv-lp8 .lp-ask2{ display:flex; align-items:center; gap:.36em; }
.cv-lp8 .lp-ask2 .lp-ghost{ font-size:.44em; padding:.3em .66em; }
.cv-lp8 .lp-ask2 em{ font-style:normal; font-family:var(--mono); font-size:.36em;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-4); }
.cv-lp8 .lp-qs{ display:flex; flex-direction:column; gap:.18em; }
.cv-lp8 .lp-q{ display:flex; align-items:center; gap:.34em;
  padding:.3em .42em; border-radius:.34em; background:#fff; border:1px solid var(--he); }
.cv-lp8 .lp-q i{ flex:none; font-style:normal; font-size:.42em; font-weight:800; color:var(--h); }
.cv-lp8 .lp-q s{ flex:1; }


/* ==========================================================================
   10 · NARROW WELLS
   Everything above is in `em` off the well's own width, so the eight scenes
   shrink as one and nothing here is needed to make them fit. The two rules
   below are the only places where shrinking alone is not enough: the
   e-commerce buy bar would wrap its price onto a second line, and the
   franchise form's three labels would collide.

   NOTE, 2026-09-23: an earlier version of this block hid the third
   membership plan below 420px. The well is ~300px wide in the rail at EVERY
   viewport, so that rule fired always and the card silently shipped two
   plans instead of three — the one thing that drawing exists to show. The
   threshold is now 260px, below which the rail's card is itself gone.
   ========================================================================== */
@container (max-width: 260px){
  .cv-lp3 .lp-stick .lp-sp{ display:none; }
  .cv-lp4 .lp-qrow{ gap:.24em; }
}

/* ==== landing-page.css · layer 2 of 2 ==== */
/* ==========================================================================
   an earlier layer of this file — the page-level corrections this concept needs.
   Linked LAST, after every shared layer, so nothing here has to fight.
   Linked only by landing-page.html.

   Everything on this page is drawn by the Google Ads page's own stylesheets;
   this file exists for the three places where a LANDING PAGE says something
   the Google Ads page never had to say.

   Parts:  1 the draft-figures note · 2 the price line reads "one-time" ·
           3 the eight-card rail · 4 phones
   ========================================================================== */


/* ==========================================================================
   1 · THE DRAFT-FIGURES NOTE
   The four packages carry placeholder numbers. The note says so on the
   section's face rather than in a comment nobody reads. It is deliberately
   NOT a warning colour: it is a quiet editorial aside in the section's own
   ink, so it reads as a status, not as an error.
   DELETE this rule and the <p class="lp-draft"> in the markup together.
   ========================================================================== */
#gads-packages .lp-draft{
  max-width: 62ch; margin: 18px auto 0;
  padding: 11px 16px;
  font-size: 13.4px; line-height: 1.5;
  color: #4B5563;
  background: #F4F6F9;
  border: 1px solid #DCE2EA;
  border-radius: 10px;
  text-align: left;
}
#gads-packages .lp-draft b{ color: #1E2B40; font-weight: 750; }


/* ==========================================================================
   2 · THE PRICE LINE
   The crown was built for "₹ 7,000 / Month". Here the same slot has to read
   "₹ 10,500 one-time", which is a word rather than a rate — so it takes the
   unit's own weight and a little more air, and the struck list price above
   it says "/ page" so the two lines can never be read as a subscription.
   Geometry is untouched: no margin, height or grid row changes, so the four
   cards still sit on one subgrid with 0px drift.
   ========================================================================== */
#gads-packages .k-now > span{
  font-weight: 700;
  letter-spacing: -.005em;
  padding-left: 2px;
}


/* ==========================================================================
   3 · THE RAIL — nothing needed
   The Google Ads rail holds six cards; this one holds eight. rail.js is
   count-agnostic (it reads #gsvc-six and measures one card's travel), and the
   snap, the end fades and the keyboard handling all follow the card count on
   their own. Measured at [archived]320: the
   page's scrollWidth never exceeds its clientWidth, and the only elements
   reaching past the viewport are the ones inside the rail's own scroller —
   the same list, element for element, as the Google Ads page produces.
   This part is a note, not a rule. Do not add one here without a measurement.
   ========================================================================== */


/* ==========================================================================
   4 · PHONES
   ========================================================================== */
@media (max-width: 760px){
  #gads-packages .lp-draft{
    margin-top: 14px; padding: 10px 13px;
    font-size: 12.8px; border-radius: 9px;
  }
}