/* ==========================================================================
   landing-page/lpcv.css — THE EIGHT PAGE SCENES
   Linked only by /doctor/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 gads-services/gsvc.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 gsvc.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 gsvc.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; }
}