/*
 * /visiting-card/ (page 354) — page furniture.
 *
 * This lived in three <style> blocks inside Elementor HTML widgets, which is
 * why it is here now: markup inside _elementor_data cannot be cached by the
 * browser, cannot be versioned, and cannot be found by anyone grepping the
 * theme. Enqueued from functions.php with filemtime() so an edit actually
 * reaches a browser past LiteSpeed and the CDN.
 *
 * Loaded on page 354 only.
 */


.agvc-wrap{max-width:1000px;margin:0 auto;font-family:"Inter",system-ui,sans-serif;color:#1A1A1A}
.agvc-kicker .elementor-heading-title{font-family:"Poppins",sans-serif;font-weight:600;font-size:12px;
 letter-spacing:.22em;text-transform:uppercase;color:#F5B800}
.agvc-h1 .elementor-heading-title{font-family:"Poppins",sans-serif;font-weight:800;font-size:clamp(30px,4.6vw,44px);
 letter-spacing:-1.2px;line-height:1.12;margin:10px 0 14px;color:#1A1A1A}
.agvc-h2 .elementor-heading-title{font-family:"Poppins",sans-serif;font-weight:700;font-size:clamp(23px,3vw,30px);
 letter-spacing:-.6px;line-height:1.2;margin:0 0 14px;color:#1A1A1A}
.agvc-sub{color:#5B6270;font-size:17px;max-width:680px;line-height:1.6}
.agvc-body p{color:#5B6270;font-size:16px;line-height:1.75;margin:0 0 16px;max-width:760px}
.agvc-body p:last-child{margin-bottom:0}
.agvc-body b{color:#1A1A1A}

.agvc-btns{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 0}
.agvc-btns a{display:inline-flex;align-items:center;justify-content:center;font-family:"Poppins",sans-serif;
 font-weight:700;font-size:15.5px;padding:15px 28px;border-radius:50px;text-decoration:none;min-height:50px;line-height:1.3}
.agvc-btns .is-primary{background:#FFD000;color:#1A1A1A}
.agvc-btns .is-primary:hover{background:#F5B800;color:#1A1A1A}
.agvc-btns .is-ghost{border:2px solid #1A1A1A;color:#1A1A1A}
.agvc-btns .is-ghost:hover{background:#1A1A1A;color:#fff}
.agvc-trust{font-size:14px;color:#5B6270;margin-top:16px}
.agvc-trust b{color:#1A1A1A;font-weight:600}

/* The text-card demo tiles (.agvc-demo, .agvc-demo-note) went with §3's
   gallery, and their `@media(max-width:700px){.agvc-demos{…:1fr}}` went with
   them — it survived the rewrite matching the NEW gallery's container under a
   rule written for the old one, and only lost because the replacement happens
   to sit later in this file. */

/* .agvc-demo-more and .agvc-demolinks went with the "Five more, as links"
   list — every trade has a picture now. */

.agvc-highlight{background:#FFF8DC;border:1px solid #F0DFA0;border-radius:14px;padding:18px 22px;
 font-size:15.5px;color:#6B5A22;line-height:1.65;margin-top:6px}
.agvc-highlight b{color:#1A1A1A}

.agvc-honest{background:#F5F5F6;border-left:4px solid #FFD000;border-radius:0 14px 14px 0;padding:22px 24px}
.agvc-honest p{color:#5B6270;font-size:16px;line-height:1.75;margin:0 0 15px;max-width:none}
.agvc-honest p:last-child{margin:0}
.agvc-honest b{color:#1A1A1A}

/* The five-card "From WhatsApp to live in two days" grid that used to live
   here went with Task 44 §4's merge; `.agvc-steps` is now the numbered list
   inside the two columns, defined further down. Its old rules are deleted
   rather than left behind: `.agvc-steps{display:grid}` would still have
   applied, from a section that no longer exists, to a list that is not one. */

.agvc-close .elementor-heading-title{color:#FFFFFF}
.agvc-close-sub p{color:#CBD5E1;font-size:16.5px;line-height:1.65;max-width:640px;margin:0}
.agvc-close-btns .is-primary{background:#FFD000;color:#1A1A1A}
.agvc-close-btns .is-ghost{border:2px solid #FFD000;color:#FFD000}
.agvc-close-btns .is-ghost:hover{background:#FFD000;color:#1A1A1A}
.agvc-fineprint p{color:#9AA0AB;font-size:13px;margin:0;line-height:1.6}

.agvc-hero-wrap{position:relative;overflow:hidden}.agvc-hero-wrap::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;background:radial-gradient(closest-side,rgba(255,208,0,.34),transparent 70%),radial-gradient(closest-side,rgba(255,208,0,.20),transparent 70%),radial-gradient(closest-side,rgba(26,26,26,.07),transparent 70%);background-size:54% 54%,46% 46%,40% 40%;background-repeat:no-repeat;background-position:6% 16%,88% 10%,62% 90%;animation:agvcDrift 24s ease-in-out infinite alternate}.agvc-hero-wrap>*{position:relative;z-index:1}@keyframes agvcDrift{from{background-position:6% 16%,88% 10%,62% 90%}to{background-position:24% 36%,66% 28%,38% 70%}}@media(prefers-reduced-motion:reduce){.agvc-hero-wrap::before{animation:none}}.agvc-heroauth{margin-top:14px;font-size:15px}.agvc-heroauth-cta{display:inline-block;font-weight:700;color:#1A1A1A;text-decoration:none;border-bottom:3px solid #FFD000;padding-bottom:2px;margin-right:18px}.agvc-heroauth-sep{color:#5B6270}.agvc-heroauth-sep a{color:#1A1A1A;font-weight:600}

/* The four numbered explainer cards (.agvc-explain, .agvc-ex*) were replaced
   by Task 44 §6's icon cards. Their card 3 also still carried the WITHDRAWN
   email wording — "mail to info@yourshop.in arrives in the inbox you already
   use" — which had been contradicting the live policy two sections below it. */

/* ==========================================================================
   TASK 44 — the media pass. Ported from agal_vcard_page_reference/preview.html.
   Class names are prefixed `agvc-`: the reference used bare `.hero`, `.btn`,
   `.demo`, `.who`, `.path`, `.pill`, `.ico`, `.rv`, every one of which collides
   with Astra or Elementor on a real page. The rules are the reference's.
   ========================================================================== */

/* ---------- hero: text left, phone right ----------
 *
 * THE SELECTOR IS THIS LONG ON PURPOSE. IT HAS LOST TWICE ALREADY.
 *
 * Attempt 1 set `--flex-direction:row` on `.agvc-hero-wrap`. Attempt 2 set
 * `flex-direction:row` on `.agvc-hero-wrap > .e-con-inner`. Both looked
 * correct; both were beaten, and the hero shipped with the phone at y=920,
 * underneath a 1120px text column and off the bottom of the fold.
 *
 * Resolved against every stylesheet the page loads, the two rules that were
 * winning are:
 *
 *     .e-con.e-flex            { --flex-direction: column }        (0,2,0)
 *     .e-con.e-flex>.e-con-inner{ flex-direction: var(…) }         (0,3,0)
 *
 * So `.agvc-hero-wrap` alone (0,1,0) and `.agvc-hero-wrap > .e-con-inner`
 * (0,2,0) both lose — including the version written in the task file, which
 * would have shipped looking exactly as broken as before.
 *
 * `.agvc-hero-wrap.e-con.e-flex > .e-con-inner` is (0,4,0) and wins outright.
 * The extra classes are Elementor's own, already on the element; nothing here
 * is invented to pad the count.
 *
 * `min-width:0` on both children is load-bearing, not decoration: a flex child
 * defaults to `min-width:auto` and refuses to shrink below its own content,
 * which is the other half of what pushed the row apart.
 */
.agvc-hero-wrap.e-con.e-flex > .e-con-inner{
  flex-direction:row;
  align-items:center;
  gap:52px;
  flex-wrap:nowrap;
}
.agvc-hero-left { flex:1 1 0;     min-width:0; width:auto !important }
.agvc-hero-right{ flex:0 1 460px; min-width:0; width:auto !important }

@media(max-width:860px){
  .agvc-hero-wrap.e-con.e-flex > .e-con-inner{flex-direction:column;gap:28px}
  .agvc-hero-right{flex:0 0 auto}
}
/* Carries only the JSON-LD. display:none keeps it out of the flex row without
   hiding it from a crawler — structured data is read from the DOM, not painted. */
.agvc-jsonld{display:none}

.agvc-price-row{display:flex;align-items:baseline;gap:12px;margin:22px 0 4px;flex-wrap:wrap}
.agvc-price{font-family:"Poppins",sans-serif;font-weight:800;font-size:clamp(36px,5vw,52px);
 line-height:1;color:#1A1A1A;letter-spacing:-1.5px}
.agvc-price-note{font-size:16px;font-weight:600;color:#5B6270;max-width:20em;line-height:1.4}
.agvc-trust2{font-size:13.5px;color:#9AA0AB;margin-top:6px}

/* ---------- the phone, with the card scrolling inside ---------- */
.agvc-phone-wrap{position:relative}
.agvc-phone{position:relative;width:320px;margin:0 auto;border-radius:44px;background:#100E0C;
 padding:12px;box-shadow:0 30px 70px rgba(20,17,15,.22)}
.agvc-phone::after{content:"";position:absolute;left:50%;top:20px;transform:translateX(-50%);
 width:96px;height:6px;border-radius:6px;background:#2A2724}
.agvc-screen{position:relative;height:640px;border-radius:34px;overflow:hidden;background:#fff}
.agvc-screen img{position:absolute;top:0;left:0;width:100%;height:auto;display:block;
 animation:agvcCardScroll 22s cubic-bezier(.5,0,.5,1) infinite}
@keyframes agvcCardScroll{
  0%,8%{transform:translateY(0)}
  46%,54%{transform:translateY(calc(-100% + 640px))}
  92%,100%{transform:translateY(0)}
}
.agvc-badge{position:absolute;right:-34px;top:112px;background:#fff;border:1px solid #E9EAED;
 border-radius:14px;padding:10px 14px;font-family:"Inter",system-ui,sans-serif;font-weight:700;
 font-size:13px;color:#1A1A1A;box-shadow:0 10px 26px rgba(20,17,15,.10);
 animation:agvcFloaty 4.5s ease-in-out infinite}
.agvc-badge.two{top:auto;bottom:96px;right:auto;left:-34px;animation-delay:1.2s}
.agvc-badge span{display:block;font-weight:600;font-size:11px;color:#9AA0AB;letter-spacing:.06em}
@keyframes agvcFloaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@media(max-width:860px){
  .agvc-phone{width:260px}
  .agvc-screen{height:520px}
  @keyframes agvcCardScroll{
    0%,8%{transform:translateY(0)}
    46%,54%{transform:translateY(calc(-100% + 520px))}
    92%,100%{transform:translateY(0)}
  }
  /* the badges would sit on top of the card at this width */
  .agvc-badge{display:none}
}

/* ---------- what you get: four icon cards ---------- */
.agvc-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.agvc-feat .agvc-c{border:1px solid #E9EAED;border-radius:18px;padding:24px;background:#fff;
 transition:transform .25s ease,box-shadow .25s ease}
.agvc-feat .agvc-c:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(20,17,15,.08)}
.agvc-feat h3{font-family:"Poppins",sans-serif;font-weight:700;font-size:18px;margin:14px 0 8px;color:#1A1A1A}
.agvc-feat p{font-size:14.5px;line-height:1.65;color:#5B6270;margin:0}
.agvc-feat b{color:#1A1A1A}
.agvc-ico{width:44px;height:44px;border-radius:12px;background:#FFF6D9;display:grid;place-items:center}
.agvc-ico svg{width:24px;height:24px;stroke:#8A6D00;fill:none;stroke-width:2;
 stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.agvc-feat{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.agvc-feat{grid-template-columns:1fr}}

/* ---------- demo gallery ---------- */
/* Ten tiles now, not five. Five across on a wide screen, three on a tablet,
   two on a phone — never one, because a single column of ten screenshots is
   a scroll nobody finishes. */
.agvc-demos{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.agvc-demo-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid #E9EAED;
 background:#fff;text-decoration:none;color:inherit;display:block;
 transition:transform .25s ease,box-shadow .25s ease}
.agvc-demo-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,17,15,.13)}
.agvc-demo-card img{width:100%;display:block;aspect-ratio:420/624;object-fit:cover;object-position:top}
.agvc-demo-card .cap{padding:12px 14px;font-family:"Inter",system-ui,sans-serif;font-weight:700;
 font-size:15px;color:#1A1A1A;border-top:1px solid #E9EAED}
/* `.cap span` is gone with the caption sub-lines. "Appointments" under the
   salon tile was the reason: we have no appointment feature, and a caption we
   wrote in our own voice reads as a feature list even when the demo business
   itself only says "appointments by message". The other four were true and
   went too — keeping four while dropping one draws the eye to the gap. */
@media(max-width:1100px){.agvc-demos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.agvc-demos{grid-template-columns:1fr 1fr;gap:12px}}

/* ---------- two ways to start ---------- */
.agvc-paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.agvc-path{border:1px solid #E9EAED;border-radius:18px;padding:28px;background:#F6F7F8}
.agvc-path.hi{background:#FFFBEC;border-color:#F2DFA0}
.agvc-pill{display:inline-block;background:#FFD000;color:#1A1A1A;border-radius:999px;
 padding:6px 14px;font-family:"Inter",system-ui,sans-serif;font-weight:700;font-size:13px}
.agvc-path h3{font-family:"Poppins",sans-serif;font-weight:700;font-size:22px;margin:14px 0 12px;color:#1A1A1A}
.agvc-steps{list-style:none;counter-reset:agvcs;margin:0;padding:0}
.agvc-steps li{counter-increment:agvcs;position:relative;padding:9px 0 9px 42px;
 font-size:15.5px;line-height:1.6;color:#5B6270;list-style:none}
.agvc-steps li::before{content:counter(agvcs);position:absolute;left:0;top:8px;width:26px;height:26px;
 border-radius:50%;background:#fff;border:1px solid #E9EAED;display:grid;place-items:center;
 font-family:"Inter",system-ui,sans-serif;font-weight:700;font-size:13px;color:#1A1A1A}
.agvc-steps li b{display:block;font-family:"Poppins",sans-serif;font-weight:700;font-size:16px;
 color:#1A1A1A;margin-bottom:2px;line-height:1.35}
.agvc-steps li span{display:block;font-size:14.5px;line-height:1.6;color:#5B6270}
.agvc-path-note{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(26,26,26,.12);
 font-size:14px;line-height:1.65;color:#5B6270}
.agvc-path-note b{color:#1A1A1A}
.agvc-path-note code{font-size:13px;background:rgba(26,26,26,.06);padding:2px 6px;border-radius:5px;
 word-break:break-all}
@media(max-width:860px){.agvc-paths{grid-template-columns:1fr}}

/* ---------- who this is for: six photographs ---------- */
.agvc-who{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.agvc-who figure{position:relative;border-radius:16px;overflow:hidden;margin:0}
.agvc-who img{width:100%;display:block;aspect-ratio:420/344;object-fit:cover}
.agvc-who figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;
 font-family:"Inter",system-ui,sans-serif;font-weight:700;font-size:16px;line-height:1.3;
 background:linear-gradient(to top,rgba(10,9,8,.86),rgba(10,9,8,0))}
@media(max-width:860px){.agvc-who{grid-template-columns:1fr 1fr}}

/* The trades we have no photograph of. Words, not pictures — we do not have a
   photograph of a meat shop and we are not going to imply that we do. As chips
   they read as a deliberate "and many more" instead of as a gap. */
.agvc-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.agvc-chips span{border:1px solid #E9EAED;border-radius:999px;padding:8px 16px;
 font-weight:600;font-size:14.5px;color:#5B6270;background:#fff}

/* ---------- what ₹1,999 gets you: a picture and a list ---------- */
.agvc-gets{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center}
.agvc-getlist{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;list-style:none;margin:0;padding:0}
.agvc-getlist li{position:relative;padding:0 0 0 34px;font-size:15.5px;line-height:1.45;
 color:#5B6270;list-style:none;max-width:none}
.agvc-getlist li b{display:block;color:#1A1A1A;font-weight:700;font-size:15.5px}
/* The tick is a data-URI, so twelve of them cost no request and no icon font. */
.agvc-getlist li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;
 border-radius:50%;
 background:#FFD000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/12px no-repeat}

.agvc-qrcard{display:flex;gap:18px;align-items:center;border:1px solid #E9EAED;border-radius:18px;
 padding:18px;margin-top:26px;background:#F6F7F8;max-width:520px}
.agvc-qrcard img{width:104px;height:104px;border-radius:10px;background:#fff;flex:0 0 auto}
.agvc-qrcard b{display:block;font-weight:700;font-size:16px;color:#1A1A1A;margin-bottom:3px}
.agvc-qrcard span{font-size:14px;line-height:1.55;color:#5B6270}

/* The same phone frame as the hero, smaller. It needs its own keyframe because
   the scroll distance is `-100% + screen height` and the screen is shorter
   here — reusing the hero's would stop the card 60px short of its own end. */
@media(min-width:861px){
  .agvc-gets .agvc-phone{width:290px}
  .agvc-gets .agvc-screen{height:580px}
  .agvc-gets .agvc-screen img{animation-name:agvcCardScrollSm}
}
@keyframes agvcCardScrollSm{
  0%,8%{transform:translateY(0)}
  46%,54%{transform:translateY(calc(-100% + 580px))}
  92%,100%{transform:translateY(0)}
}
@media(max-width:860px){
  .agvc-gets{grid-template-columns:1fr;gap:28px}
  .agvc-getlist{grid-template-columns:1fr}
  .agvc-gets .agvc-phone{margin:0 auto}
  /* Back to the shared keyframe, which the 860px block has already redefined
     for the 520px screen both phones use at this width. */
  .agvc-gets .agvc-screen img{animation-name:agvcCardScroll}
}

/* ---------- Google Business Profile: a photograph behind it ----------
   The strongest free offer on the page, and it has been reading like a
   footnote. The image is decorative and carries no information, so it is a
   background rather than an <img> — nothing to caption, nothing to alt, and
   `aria-hidden` by construction. Scoped to this stylesheet, which loads on
   page 354 only, so the same block elsewhere is untouched. */
.agvc-wrap .agal-launch{position:relative;overflow:hidden;isolation:isolate}
.agvc-wrap .agal-launch::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/wp-content/uploads/agal-vcard/who-0.webp") right center/cover no-repeat;
  opacity:.10;
  -webkit-mask-image:linear-gradient(to left,#000 0%,transparent 72%);
          mask-image:linear-gradient(to left,#000 0%,transparent 72%);
}
@media(max-width:700px){
  /* At this width the text runs the full column and the photograph sits under
     the words rather than beside them. */
  .agvc-wrap .agal-launch::before{opacity:.06}
}

/* ---------- free vs ₹1,999 ----------
 *
 * Ported from the reference. Two layouts, one shortcode, one source of numbers:
 * the wide table for full-width contexts, and a stacked pair of cards for
 * narrow ones. Both are always in the markup; CSS picks. Emitting one or the
 * other in PHP would be two code paths that can drift, and the one nobody sees
 * on a laptop is the one most customers get.
 *
 * WHITE, NOT YELLOW. The first version flooded the header row and the whole
 * label column with brand yellow. Yellow stops meaning anything when it is
 * everywhere — the row labels ended up shouting louder than the values they
 * label. Yellow is now reserved for exactly two jobs: the paid column, and the
 * ticks. The free column is plain because it is the baseline, not a competitor.
 */
.agvc-cmp{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #E9EAED;
 border-radius:18px;overflow:hidden;font-size:15.5px;background:#fff}
.agvc-cmp th,.agvc-cmp td{padding:15px 18px;text-align:left;vertical-align:top;
 border-bottom:1px solid #E9EAED;font-weight:400}
.agvc-cmp thead th{background:#fff;border-bottom:2px solid #E9EAED;font-weight:400}
.agvc-cmp thead th.paid{background:#FFFBEC;border-bottom-color:#F0DFA6}
.agvc-cmp td.paid{background:#FFFDF7}
.agvc-cmp tbody tr:last-child th,.agvc-cmp tbody tr:last-child td{border-bottom:0}
.agvc-cmp tbody th[scope="row"]{width:36%;background:#fff;font-weight:600;color:#1A1A1A;max-width:none}
.agvc-cmp .agvc-cmp-no{color:#9AA0AB}
.agvc-cmp .plan{display:block;font-family:"Poppins",sans-serif;font-weight:800;font-size:26px;
 letter-spacing:-.02em;color:#1A1A1A}
.agvc-cmp .planp{display:block;font-weight:500;font-size:13.5px;color:#5B6270;margin-top:3px}

/* The pill that makes the free/paid difference read before anyone parses a row. */
.agvc-tag{display:inline-block;background:#FFD000;color:#1A1A1A;border-radius:999px;
 padding:3px 10px;font-weight:700;font-size:11px;letter-spacing:.04em;margin-bottom:6px}

.agvc-tick{display:inline-block;width:19px;height:19px;border-radius:50%;background:#FFD000
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")
 center/11px no-repeat;vertical-align:-4px}
.agvc-cmp-note{margin-top:16px;font-size:14px;color:#9AA0AB}

/* ---- the stacked variant: narrow columns and phones ---- */
.agvc-cmp-stack{display:none;gap:16px}
.agvc-col{border:1px solid #E9EAED;border-radius:18px;padding:22px;background:#fff}
.agvc-col.paid{background:#FFFDF7;border-color:#F0DFA6}
.agvc-col .plan{display:block;font-family:"Poppins",sans-serif;font-weight:800;font-size:28px;
 letter-spacing:-.02em;color:#1A1A1A}
.agvc-col .planp{display:block;font-weight:500;font-size:14px;color:#5B6270;margin:2px 0 16px}
.agvc-col ul{list-style:none;margin:0;padding:0}
.agvc-col li{position:relative;padding:9px 0 9px 30px;border-top:1px solid #E9EAED;
 font-size:15px;line-height:1.5;color:#5B6270;list-style:none;max-width:none}
.agvc-col li:first-child{border-top:0}
.agvc-col li b{color:#1A1A1A}
.agvc-col li .agvc-tick{position:absolute;left:0;top:11px}
.agvc-col li.no{color:#9AA0AB}
.agvc-col li.no::before{content:"—";position:absolute;left:2px;top:9px;color:#9AA0AB}

/* The switch. `.agvc-narrow` is set by the shortcode's layout attribute and
   wins at any width — /get-started/ uses it because the signup column squeezes
   a nine-row table until "Your website address" wraps over three lines. */
.agvc-narrow .agvc-cmp{display:none}
.agvc-narrow .agvc-cmp-stack{display:grid}
@media(max-width:760px){
  .agvc-cmp{display:none}
  .agvc-cmp-stack{display:grid}
}

/* ---------- measure ----------
 *
 * Task 45 §5. Body paragraphs were rendering 1100px wide — about 130 characters
 * a line, against the 60–75 that reads comfortably. Arun called it "line breaks
 * and a gap on the right"; the cause is measure, not alignment. Long lines
 * break unevenly and leave a ragged right edge with nothing technically wrong.
 *
 * The cap goes on PROSE ONLY. Grid and flex children — the feature cards, the
 * twelve-item checklist, the tiles, the chips — are already correctly narrow,
 * and a second cap inside a column that is itself 260px wide just squeezes it.
 */
.agvc-wrap p,
.agvc-wrap li{max-width:68ch}
.agvc-wrap .agvc-getlist li,
.agvc-wrap .agvc-steps li,
.agvc-wrap .agvc-feat p,
.agvc-wrap .agvc-qrcard span,
.agvc-wrap .agvc-chips span{max-width:none}

/* Degrades silently where unsupported — nothing to fall back to, nothing to break. */
.agvc-wrap p,
.agvc-wrap li{text-wrap:pretty}
.agvc-wrap h1,
.agvc-wrap h2,
.agvc-wrap h3{text-wrap:balance}

/* The FAQ toggle icon was taking a line of its own, so the question wrapped
   around it — measured line widths of [36, 834] on a single question.
 *
 * The flex container is `.elementor-tab-title`, NOT `.elementor-accordion-title`
 * as the task file has it. In this widget's markup the icon <span> and the
 * title <a> are SIBLINGS inside the <h3 class="elementor-tab-title">; the
 * `.elementor-accordion-title` is the <a> itself, and making that a flex box
 * lays out the text and leaves the icon exactly where it was. */
.agvc-wrap .elementor-tab-title{display:flex;align-items:flex-start;gap:12px}
.agvc-wrap .elementor-tab-title .elementor-accordion-icon{flex:0 0 auto;margin:0}
.agvc-wrap .elementor-accordion-title{flex:1 1 auto;min-width:0}

/* ---------- section entrances ---------- */
.agvc-rv{opacity:0;transform:translateY(14px)}
.agvc-rv.is-in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

/* ---------- sticky bar on phones ----------
   Task 44 §7 asked for one here. There already is one: `.agal-mbar`, rendered
   site-wide on wp_footer, carrying the same price plus Free Signup and Log in —
   and swapping both for Logout when the visitor is signed in, which a
   page-local bar would not know to do. Building the second would have fixed
   nobody's scroll and put two bars on the same edge of the same screen.

   What was actually wrong was that its title block linked to /visiting-card/
   while you were reading /visiting-card/. That is fixed in
   agal-functions.php — on this page the title is plain text and the two
   buttons beside it are the actions. */
.agal-mbar-main.is-self{cursor:default}

/* Nothing here may move for someone who has asked for less motion. */
@media(prefers-reduced-motion:reduce){
  .agvc-screen img,.agvc-badge{animation:none !important}
  .agvc-rv{opacity:1;transform:none}
  .agvc-rv.is-in{transition:none}
}

/* ── Renewal answer (Task 62 §4) ───────────────────────────────────────────
   The question the first ad enquiry asked, answered on the page the ad points
   at. Two tiers and a note — deliberately not a price sheet. */
.agvc-renew{
	margin:18px 0 0;
	padding:16px 18px;
	border:1px solid #E2E8F0;
	border-left:4px solid #FFD000;
	border-radius:10px;
	background:#fff;
	max-width:68ch;
}
.agvc-renew-row{margin:0 0 8px;font-size:16px;line-height:1.55}
.agvc-renew-row:last-of-type{margin-bottom:12px}
.agvc-renew-note{margin:0;font-size:14px;line-height:1.6;color:#475569}