/* ==========================================================================
   meta-ads/macv.css — THE SIX META CAMPAIGN SCENES
   Linked only by /doctor/meta-ads.html.

   Same vocabulary as every other service page's drawings: the well, its
   ground, its hairline grid and its hue tokens (--h / --hs / --he / --hd)
   come from gads-services/gsvc.css unchanged, and `.cv s`, `.cv-tag` and
   `.cv-stars` are reused as-is.

   WHY THE OBJECT IS A PHONE, NOT A BROWSER
   Every drawing on this site is a picture of WHERE the money lands:
     Google Ads      a search results page
     Landing Page    a browser window showing one page
     Website         a browser with a menu, a catalogue, a dashboard
     META            a phone, held, showing a FEED
   Meta is the only one of the four where nobody asked to see the ad, so the
   drawings show it arriving between other people's posts — which is the whole
   strategic difference the page is built to explain.

     1 leads      the feed ad, and the form that opens inside the app
     2 sales      the catalogue carousel, priced, swipeable
     3 remarket   visited · left · seen again · came back
     4 chat       the tap that opens WhatsApp instead of a web page
     5 traffic    the tap that opens a page, and who waits for it
     6 aware      a Reel, its watch-through, and its frequency

   SCALE. Nothing is in px. `.cv` sets font-size from the well's own width,
   so every scene is drawn in `em` and reads the same at any card size.
   ========================================================================== */


/* ==========================================================================
   1 · THE SHARED OBJECT — a phone showing a feed
   ========================================================================== */
.cv-ma{ display:flex; flex-direction:column; gap:.45em; padding:.9em .8em; }

.ma-phone{ flex:1; min-height:0; display:flex; flex-direction:column;
  border-radius:1.1em; background:#fff; border:1.5px solid var(--he);
  box-shadow:0 .5em 1.4em rgba(15,27,61,.09); overflow:hidden; }

/* the app bar: the platform, and the fact that this is somebody's feed */
.ma-top{ flex:none; display:flex; align-items:center; gap:.4em;
  padding:.42em .6em; border-bottom:1px solid var(--he); background:#F7F9FD; }
.ma-app{ flex:none; display:flex; align-items:center; gap:.3em;
  font-size:.48em; font-weight:800; letter-spacing:-.02em; color:var(--hd); }
.ma-app s{ width:1.05em; height:1.05em !important; border-radius:.3em;
  background:var(--h); flex:none; }
.ma-icons{ flex:1; display:flex; justify-content:flex-end; gap:.34em; color:var(--ink-4); }
.ma-icons i{ width:.6em; height:.6em; border-radius:.14em; background:#D3DBE7; }

.ma-body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:.34em;
  padding:.5em .55em; overflow:hidden; }
.ma-grow{ flex:1 1 auto; min-height:0; }

/* one post in the feed: the account, the picture, the actions, the caption */
.ma-post{ flex:none; display:flex; flex-direction:column; gap:.26em;
  border-radius:.6em; background:#fff; border:1px solid var(--he); padding:.4em; }
.ma-who{ display:flex; align-items:center; gap:.34em; }
.ma-av{ width:1.25em; height:1.25em !important; border-radius:50%; flex:none;
  background:var(--h); }
.ma-nm{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ma-nm b{ font-size:.44em; font-weight:800; color:var(--ink); line-height:1.2; }
/* "Sponsored" is the point: this is an ad in somebody's feed */
.ma-nm i{ font-style:normal; font-size:.36em; font-weight:650; color:var(--ink-4); }
.ma-shot{ flex:none; width:100%; height:4.2em; border-radius:.42em; overflow:hidden;
  display:grid; place-items:center;
  background:radial-gradient(62% 60% at 50% 42%, var(--hs) 0%, rgba(255,255,255,0) 78%);
  border:1px solid var(--he); }
.ma-shot svg{ height:62%; width:auto; color:var(--hd); stroke-width:2.3; }
.ma-shot svg .f{ opacity:.18; }
.ma-acts{ display:flex; align-items:center; gap:.42em; color:var(--ink-4); }
.ma-acts i{ width:.66em; height:.66em; border-radius:.16em; background:#DCE2EB; }
.ma-acts u{ margin-left:auto; text-decoration:none; font-size:.36em; color:var(--ink-4); }
.ma-cap{ font-size:.4em; line-height:1.45; color:var(--ink-3); }

/* the ad's own button, sitting under the picture the way Meta draws it */
.ma-cta{ display:flex; align-items:center; gap:.34em;
  padding:.36em .5em; border-radius:.36em; background:var(--hs); }
.ma-cta b{ flex:1; font-size:.4em; font-weight:750; color:var(--hd); }
.ma-cta u{ text-decoration:none; font-size:.38em; font-weight:800; color:#fff;
  background:var(--h); border-radius:.26em; padding:.26em .56em; white-space:nowrap; }

.ma-note{ flex:none; display:flex; align-items:center; gap:.42em;
  font-family:var(--mono); font-size:.38em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-4); }
.ma-note::before,.ma-note::after{ content:""; flex:1; height:1px; background:var(--he); }
.ma-note.is-on{ color:var(--hd); }

.ma-chips{ display:flex; flex-wrap:wrap; gap:.24em; }
.ma-chip{ font-size:.38em; font-weight:700; color:var(--hd); background:var(--hs);
  padding:.28em .52em; border-radius:99px; white-space:nowrap; }
.ma-lines{ display:flex; flex-direction:column; gap:.2em; }


/* ==========================================================================
   2 · 01 LEADS — the form opens INSIDE the app, over the feed
   ========================================================================== */
.cv-ma1 .ma-sheet{ display:flex; flex-direction:column; gap:.24em;
  padding:.46em; border-radius:.5em .5em .3em .3em;
  background:#F7F9FD; border:1px solid var(--he); border-bottom:0; }
.cv-ma1 .ma-sheet .ma-sh{ display:flex; align-items:center; gap:.3em; }
.cv-ma1 .ma-sheet .ma-sh b{ flex:1; font-size:.4em; font-weight:800; color:var(--hd); }
.cv-ma1 .ma-sheet .ma-sh s{ width:1.6em; height:.16em !important; border-radius:99px;
  background:#C8CFDA; }
.cv-ma1 .ma-fl{ font-size:.36em; font-weight:650; color:var(--ink-3); }
/* pre-filled by Meta — which is exactly why the lead can be worthless */
.cv-ma1 .ma-fi{ height:.78em; border-radius:.22em; background:#fff;
  border:1px solid var(--he); display:flex; align-items:center; padding:0 .3em; }
.cv-ma1 .ma-fi em{ font-style:normal; font-size:.34em; color:var(--ink-4); }
.cv-ma1 .ma-fi.is-q{ background:var(--hs); border-color:var(--he); }
.cv-ma1 .ma-fi.is-q em{ color:var(--hd); font-weight:700; }
.cv-ma1 .ma-sub{ margin-top:.1em; text-align:center; font-size:.4em; font-weight:800;
  color:#fff; background:var(--h); border-radius:.3em; padding:.32em; }


/* ==========================================================================
   3 · 02 SALES — the catalogue carousel
   ========================================================================== */
.cv-ma2 .ma-car{ display:flex; gap:.28em; }
.cv-ma2 .ma-card{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.18em;
  border-radius:.4em; background:#fff; border:1px solid var(--he); padding:.26em; }
.cv-ma2 .ma-card.is-part{ flex:0 0 22%; opacity:.5; }
.cv-ma2 .ma-ph{ width:100%; aspect-ratio:1/1; border-radius:.3em; background:#F3F6FA;
  display:grid; place-items:center; overflow:hidden; }
.cv-ma2 .ma-ph svg{ width:56%; height:auto; color:var(--hd); opacity:.55; stroke-width:2.2; }
.cv-ma2 .ma-card em{ font-style:normal; font-size:.42em; font-weight:800; color:var(--hd); }
.cv-ma2 .ma-card u{ text-decoration:none; font-size:.32em; color:var(--ink-4);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


/* ==========================================================================
   4 · 03 REMARKETING — the four steps, the last one closed
   ========================================================================== */
.cv-ma3 .ma-steps{ display:flex; flex-direction:column; gap:.26em; }
.cv-ma3 .ma-steps.ma-grow{ justify-content:space-between; }
.cv-ma3 .ma-step{ display:flex; align-items:center; gap:.36em;
  padding:.32em .4em; border-radius:.4em; background:#fff; border:1px solid var(--he); }
.cv-ma3 .ma-step s{ flex:none; width:1em; height:1em !important; border-radius:50%;
  background:#DCE2EB; }
.cv-ma3 .ma-step span{ flex:1; min-width:0; display:flex; flex-direction:column; }
.cv-ma3 .ma-step b{ font-size:.4em; font-weight:750; color:var(--ink-2); line-height:1.2; }
.cv-ma3 .ma-step i{ font-style:normal; font-size:.33em; color:var(--ink-4); }
.cv-ma3 .ma-step.is-end{ background:var(--hs); border-color:var(--he); }
.cv-ma3 .ma-step.is-end s{ background:#188038; }
.cv-ma3 .ma-step.is-end b{ color:var(--hd); }


/* ==========================================================================
   5 · 04 WHATSAPP — the tap opens a chat, not a page
   ========================================================================== */
.cv-ma4 .ma-chat{ display:flex; flex-direction:column; gap:.24em;
  padding:.44em; border-radius:.5em; background:#EAF3EC; border:1px solid #CFE4D6; }
.cv-ma4 .ma-ch{ display:flex; align-items:center; gap:.3em; }
.cv-ma4 .ma-ch s{ width:1.1em; height:1.1em !important; border-radius:50%; background:#25D366; }
.cv-ma4 .ma-ch b{ font-size:.4em; font-weight:800; color:#0B3D24; }
.cv-ma4 .ma-bub{ align-self:flex-end; max-width:82%; font-size:.36em; line-height:1.4;
  color:#0B3D24; background:#D6F0D9; border-radius:.5em .5em .12em .5em; padding:.34em .46em; }
.cv-ma4 .ma-bub.is-them{ align-self:flex-start; background:#fff;
  border-radius:.5em .5em .5em .12em; color:var(--ink-2); }


/* ==========================================================================
   6 · 05 TRAFFIC — the tap opens a page
   ========================================================================== */
.cv-ma5 .ma-page{ display:flex; flex-direction:column; gap:.22em;
  padding:.4em; border-radius:.44em; background:#fff; border:1px solid var(--he); }
.cv-ma5 .ma-url{ font-style:normal; font-size:.36em; color:var(--ink-3);
  padding:.24em .46em; border-radius:99px; background:#F3F6FA; border:1px solid var(--he);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cv-ma5 .ma-page b{ font-size:.5em; font-weight:800; color:var(--hd); line-height:1.2; }


/* ==========================================================================
   7 · 06 AWARENESS — a Reel, and the number that actually matters
   ========================================================================== */
.cv-ma6 .ma-reel{ flex:1; min-height:0; position:relative; border-radius:.5em;
  overflow:hidden; border:1px solid var(--he);
  background:linear-gradient(170deg, var(--hs) 0%, #fff 58%, var(--hs) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:.42em; }
.cv-ma6 .ma-play{ position:absolute; inset:0; margin:auto; width:1.8em; height:1.8em;
  border-radius:50%; background:rgba(255,255,255,.92); border:1px solid var(--he);
  display:grid; place-items:center; }
.cv-ma6 .ma-play::after{ content:""; width:0; height:0; margin-left:.16em;
  border-left:.52em solid var(--hd);
  border-top:.32em solid transparent; border-bottom:.32em solid transparent; }
.cv-ma6 .ma-scrub{ position:absolute; left:.42em; right:.42em; bottom:2.1em; height:.14em;
  border-radius:99px; background:rgba(15,27,61,.14); }
.cv-ma6 .ma-scrub b{ display:block; width:38%; height:100%; border-radius:99px;
  background:var(--h); }
.cv-ma6 .ma-stats{ display:flex; gap:.4em; }
.cv-ma6 .ma-stat{ display:flex; flex-direction:column; }
.cv-ma6 .ma-stat b{ font-size:.5em; font-weight:800; letter-spacing:-.03em; color:var(--hd);
  line-height:1.05; }
.cv-ma6 .ma-stat i{ font-style:normal; font-size:.3em; font-weight:650; color:var(--ink-4); }
.cv-ma6 .ma-freq{ flex:none; display:flex; align-items:center; gap:.34em;
  padding:.3em .42em; border-radius:.36em; background:#fff; border:1px solid var(--he); }
.cv-ma6 .ma-freq b{ font-size:.38em; font-weight:800; color:var(--hd); }
.cv-ma6 .ma-freq i{ font-style:normal; flex:1; font-size:.34em; color:var(--ink-4); }