/* ==========================================================================
   PACKAGES · what comes after the four cards (owner's pick, 2026-10-13: "16")
     1  "Already know the package you want?" — one button, Get Your Package Quote, that opens in
        place into the live quote: Your Package (package · ad budget · currency, in step with the
        cards) · Your Details (the site's enquiry form, the Live Proof Walkthrough's fields) ·
        Your Quote (price, discount, terms) → Send Quote Request
     2  "Not sure which package fits." — Send an Enquiry (the same form, in the Live Proof popup),
        Call, WhatsApp
   Markup: generated per service with the packages section. Behaviour: assets/shared/pricing/cta.js.
   Both forms post to package-mail.php. Light only; only the primary action is strong blue; the
   chosen package / currency is pressed in.
   ========================================================================== */
.cx{
  --cx-act:#0760C6; --cx-act-h:#054C9E; --cx-act-p:#004594;
  --cx-ink:#0E1E35; --cx-2:#39414E; --cx-3:#566072;
  --cx-t4:#F5F9FD; --cx-t8:#EAF1FA; --cx-t12:#E1ECF8; --cx-t16:#D8E4F6;
  --cx-line:#BCCDE3; --cx-line-2:#D3E0EF; --cx-line-3:#E3EAF4;
  --cx-press-bg:#E9EEF4; --cx-press:inset 0 2px 4px rgba(20,24,31,.14), inset 0 0 0 1px rgba(20,24,31,.1);
  --cx-sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif;
  --cx-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  margin-top:24px; font-family:var(--cx-sans); color:var(--cx-ink); -webkit-font-smoothing:antialiased;
}
.cx *, .cx *::before, .cx *::after{ box-sizing:border-box; }
.cx :where(p, h3, h4, ul, ol, dl, dd, figure){ margin:0; }
.cx :where(ul, ol){ padding:0; list-style:none; }
.cx :where(a){ color:inherit; text-decoration:none; }
.cx :where(button, input, select, textarea){ font:inherit; color:inherit; }
.cx :where(a, button, input, select, textarea):focus-visible{ outline:2px solid var(--cx-act); outline-offset:2px; }
.cx svg{ flex:none; }
.cx .cx-sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
@media (prefers-reduced-motion:reduce){ .cx *, .cx *::before, .cx *::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; } }

/* ---------- from 11 ---------- */
/* "Not sure which package fits." — Editorial Close (concept 11)
   Pure typography and hairlines: a display statement on the left, a three-row menu on the right.
   No boxes, no fills. Only the enquiry row's label is blue. */
.cx-16{ margin-top:56px; }
.cx-16 .cx11-in{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas:"lead menu" "note menu"; grid-template-rows:auto 1fr;
  column-gap:clamp(40px, 5.6vw, 96px); border-top:1px solid var(--cx-line);
}

/* statement */
.cx-16 .cx11-lead{ grid-area:lead; padding-top:26px; }
.cx-16 .cx11-t{
  max-width:12ch; font-size:clamp(34px, 1.9vw + 18px, 46px); line-height:1.02; font-weight:800;
  letter-spacing:-.036em; color:var(--cx-ink); text-wrap:balance;
}
.cx-16 .cx11-dot{ color:var(--cx-act); }
.cx-16 .cx11-sub{
  margin-top:18px; max-width:30ch; font-size:18px; line-height:1.5; font-weight:450; color:var(--cx-2);
  text-wrap:pretty;
}
.cx-16 .cx11-note{
  grid-area:note; align-self:end; max-width:44ch; padding-top:24px;
  font-size:13px; line-height:1.55; color:var(--cx-3);
}

/* the menu: hairline rows */
.cx-16 .cx11-menu{ grid-area:menu; }
.cx-16 .cx11-menu li{ border-bottom:1px solid var(--cx-line-2); }
.cx-16 .cx11-menu li:last-child{ border-bottom-color:var(--cx-line); }
.cx-16 .cx11-row{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr) 24px; align-items:center;
  column-gap:32px; min-height:76px; padding:16px 2px 16px 0; color:var(--cx-ink);
  -webkit-tap-highlight-color:transparent;
}
.cx-16 .cx11-lab{ font-size:23px; line-height:1.2; font-weight:750; letter-spacing:-.018em; }
.cx-16 .cx11-num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.cx-16 .cx11-row.is-main .cx11-lab{ color:var(--cx-act); }
.cx-16 .cx11-best{ font-size:13.5px; line-height:1.5; font-weight:500; color:var(--cx-3); }
.cx-16 .cx11-hrs{ display:block; white-space:nowrap; }
.cx-16 .cx11-ar{
  width:22px; height:22px; justify-self:end; fill:none; stroke:var(--cx-3); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .32s cubic-bezier(.2,.7,.2,1), stroke .2s ease;
}
.cx-16 .cx11-row.is-main .cx11-ar{ stroke:var(--cx-act); }
.cx-16 .cx11-row:hover .cx11-ar{ transform:translateX(4px); stroke:var(--cx-ink); }
.cx-16 .cx11-row.is-main:hover .cx11-ar{ stroke:var(--cx-act-h); }
.cx-16 .cx11-row.is-main:hover .cx11-lab{ color:var(--cx-act-h); }
.cx-16 .cx11-row:hover .cx11-best{ color:var(--cx-2); }
.cx-16 .cx11-row:focus-visible{ outline-offset:-2px; border-radius:4px; }
.cx-16 .cx11-row:active .cx11-ar{ transform:translateX(2px); }

/* laptops / tablets: the descriptor goes under the label */
@media (max-width:1199px){
  .cx-16 .cx11-row{ grid-template-columns:minmax(0, 1fr) 24px; grid-template-rows:auto auto; row-gap:4px; }
  .cx-16 .cx11-lab{ grid-column:1; grid-row:1; }
  .cx-16 .cx11-best{ grid-column:1; grid-row:2; }
  .cx-16 .cx11-ar{ grid-column:2; grid-row:1 / span 2; }
}

/* phones: statement, then the rows, then the note */
@media (max-width:760px){
  .cx-16{ margin-top:40px; }
  .cx-16 .cx11-in{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"lead" "menu" "note"; grid-template-rows:auto; }
  .cx-16 .cx11-lead{ padding:24px 0 24px; }
  .cx-16 .cx11-menu{ border-top:1px solid var(--cx-line-2); }
  .cx-16 .cx11-t{ font-size:clamp(28px, 6.4vw + 6px, 34px); }
  .cx-16 .cx11-sub{ margin-top:12px; font-size:16.5px; }
  .cx-16 .cx11-row{ min-height:64px; padding:13px 0; column-gap:16px; }
  .cx-16 .cx11-lab{ font-size:clamp(18px, 2.4vw + 9px, 20px); }
  .cx-16 .cx11-best{ font-size:13px; }
  .cx-16 .cx11-note{ padding-top:16px; }
}

/* ---------- from 13 ---------- */
/* "Get Your Package Quote" — One Button (concept 13)
   One centred pill under the cards. It opens in place: the pill stays where it is, pressed in, and
   becomes the header of a refined panel holding the three ways. <details> is the no-JS fallback. */
.cx-16{ margin-top:36px; margin-bottom:12px; }
.cx-16 .cx13-q{ text-align:center; font-size:13px; line-height:1.4; font-weight:500; color:var(--cx-3); }

/* the panel (invisible until open) */
.cx-16 .cx13-d{
  position:relative; max-width:1120px; margin:0 auto; padding:12px 0 0;
  border:1px solid transparent; border-radius:16px; background:transparent;
  transition:border-color .32s ease, background-color .32s ease, box-shadow .32s ease;
}
.cx-16 .cx13-d[open]:not(.is-closing){
  border-color:var(--cx-line-2); background:#fff;
  box-shadow:0 1px 2px rgba(14,30,53,.04), 0 18px 40px -30px rgba(14,30,53,.35);
}

/* the pill */
.cx-16 .cx13-s{
  list-style:none; display:flex; align-items:center; gap:14px; width:max-content; max-width:100%;
  min-height:58px; margin:0 auto; padding:0 12px 0 30px; border-radius:999px; cursor:pointer;
  background:var(--cx-act); color:#fff; font-size:17px; line-height:1.2; font-weight:750; letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(7,40,90,.18), 0 12px 24px -14px rgba(7,96,198,.65);
  transition:background-color .22s ease, color .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.cx-16 .cx13-s::-webkit-details-marker{ display:none; }
.cx-16 .cx13-s::marker{ content:""; }
.cx-16 .cx13-s-l{ display:inline-grid; }
.cx-16 .cx13-s-l::after{ /* reserves the pressed (heavier) width so the pill never changes size */
  content:attr(data-l); grid-area:1 / 1; height:0; overflow:hidden; visibility:hidden; font-weight:850;
}
.cx-16 .cx13-s-i{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.16); transition:background-color .22s ease;
}
.cx-16 .cx13-s-i svg{
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .36s cubic-bezier(.2,.7,.2,1);
}
.cx-16 .cx13-s:hover{ background:var(--cx-act-h); }
.cx-16 .cx13-s:hover .cx13-s-i svg{ transform:translateY(1px); }
.cx-16 .cx13-s:focus-visible{ outline:2px solid var(--cx-act); outline-offset:3px; }
/* open = pressed in: same size and place, no blue */
.cx-16 .cx13-d[open]:not(.is-closing) > .cx13-s{
  background:var(--cx-press-bg); color:var(--cx-ink); font-weight:850; box-shadow:var(--cx-press);
}
.cx-16 .cx13-d[open]:not(.is-closing) > .cx13-s .cx13-s-i{ background:#fff; box-shadow:0 0 0 1px var(--cx-line-2); }
.cx-16 .cx13-d[open]:not(.is-closing) > .cx13-s .cx13-s-i svg{ transform:rotate(180deg); }

/* panel body */
.cx-16 .cx13-body{ overflow:hidden; }
.cx-16 .cx13-lede{
  padding:18px 24px 0; text-align:center; font-size:17px; line-height:1.45; font-weight:700; color:var(--cx-ink);
  letter-spacing:-.008em; text-wrap:balance;
}
.cx-16 .cx13-ways{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:22px; border-top:1px solid var(--cx-line-3);
}
.cx-16 .cx13-w{
  display:grid; grid-template-columns:40px minmax(0, 1fr); grid-template-rows:1fr auto; column-gap:14px; row-gap:18px;
  padding:24px 28px 26px;
}
.cx-16 .cx13-w + .cx13-w{ border-left:1px solid var(--cx-line-3); }
.cx-16 .cx13-ic{
  display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--cx-t8);
  box-shadow:inset 0 0 0 1px var(--cx-t16);
}
.cx-16 .cx13-ic svg{ width:20px; height:20px; fill:none; stroke:var(--cx-ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cx-16 .cx13-t{ font-size:17px; line-height:1.25; font-weight:750; letter-spacing:-.01em; color:var(--cx-ink); }
.cx-16 .cx13-best{ margin-top:4px; font-size:13.5px; line-height:1.45; font-weight:500; color:var(--cx-2); }
.cx-16 .cx13-meta{ margin-top:6px; font-size:13px; line-height:1.5; color:var(--cx-3); text-wrap:pretty; }
.cx-16 .cx13-btn{
  grid-column:1 / -1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:0 16px;
  border-radius:10px; background:#fff; color:var(--cx-ink); font-size:15px; font-weight:500;
  box-shadow:0 0 0 1px var(--cx-line-2), 0 1px 2px rgba(14,30,53,.04);
  transition:background-color .2s ease, box-shadow .2s ease;
}
.cx-16 .cx13-num{ font-variant-numeric:tabular-nums; }
.cx-16 .cx13-nw{ white-space:nowrap; }
.cx-16 .cx13-btn:hover{ box-shadow:0 0 0 1px var(--cx-line), 0 1px 2px rgba(14,30,53,.06); }
.cx-16 .cx13-btn:active{ background:var(--cx-press-bg); box-shadow:var(--cx-press); }
.cx-16 .cx13-btn.is-main{
  background:var(--cx-act); color:#fff; font-weight:750;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(7,40,90,.18), 0 10px 20px -12px rgba(7,96,198,.6);
}
.cx-16 .cx13-btn.is-main svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.cx-16 .cx13-btn.is-main:hover{ background:var(--cx-act-h); }
.cx-16 .cx13-btn.is-main:hover svg{ transform:translateX(3px); }
.cx-16 .cx13-btn.is-main:active{ background:var(--cx-act-p); box-shadow:inset 0 2px 4px rgba(0,0,0,.22); }
.cx-16 .cx13-foot{
  padding:14px 24px 15px; border-top:1px solid var(--cx-line-3); background:var(--cx-t4); border-radius:0 0 15px 15px;
  text-align:center; font-size:13px; line-height:1.5; color:var(--cx-3);
}

/* quiet close (JS only) */
.cx-16 .cx13-x{
  position:absolute; top:22px; right:20px; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 12px;
  border:0; border-radius:10px; background:transparent; color:var(--cx-2); font-size:14px; font-weight:500; cursor:pointer;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s, background-color .2s ease;
}
.cx-16 .cx13-x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.cx-16 .cx13-d[open]:not(.is-closing) > .cx13-x{ opacity:1; visibility:visible; transition:opacity .3s ease .12s, visibility 0s, background-color .2s ease; }
.cx-16 .cx13-x:hover{ background:var(--cx-t8); color:var(--cx-ink); }
.cx-16 .cx13-x:active{ background:var(--cx-press-bg); box-shadow:var(--cx-press); }

.cx-16 .cx13-x[hidden]{ display:none !important; }

/* tablets: keep three columns, tighter */
@media (max-width:1100px){
  .cx-16 .cx13-w{ padding:22px 20px 22px; grid-template-columns:minmax(0, 1fr); row-gap:14px; grid-template-rows:auto 1fr auto; }
  .cx-16 .cx13-x{ top:21px; right:12px; }
}
/* phones: the pill spans the lane; the three ways stack as rows; Close goes to the bottom */
@media (max-width:760px){
  .cx-16{ margin-top:28px; }
  .cx-16 .cx13-d{ padding:10px 0 0; }
  .cx-16 .cx13-s{ width:calc(100% - 20px); justify-content:space-between; min-height:56px; padding:0 10px 0 22px; font-size:16.5px; }
  .cx-16 .cx13-lede{ padding:16px 18px 0; font-size:16px; text-align:left; }
  .cx-16 .cx13-ways{ grid-template-columns:minmax(0, 1fr); margin-top:16px; }
  .cx-16 .cx13-w{ grid-template-columns:40px minmax(0, 1fr); grid-template-rows:auto auto; column-gap:14px; row-gap:12px; padding:16px 18px 18px; }
  .cx-16 .cx13-w + .cx13-w{ border-left:0; border-top:1px solid var(--cx-line-3); }
  .cx-16 .cx13-btn{ grid-column:2; min-height:46px; }
  .cx-16 .cx13-meta.is-long{ display:none; }
  .cx-16 .cx13-foot{ padding:12px 18px; text-align:left; }
  .cx-16 .cx13-x{
    position:static; display:flex; justify-content:center; width:100%; min-height:48px;
    border-top:1px solid var(--cx-line-3); border-radius:0 0 15px 15px; background:var(--cx-t4);
  }
  .cx-16 .cx13-d:not([open]) > .cx13-x, .cx-16 .cx13-d.is-closing > .cx13-x{ display:none; }
  .cx-16 .cx13-d:has(> .cx13-x:not([hidden])) .cx13-foot{ border-radius:0; }
}
@media (max-width:374px){
  .cx-16 .cx13-s{ width:calc(100% - 12px); gap:8px; padding:0 8px 0 16px; font-size:15px; letter-spacing:-.015em; }
  .cx-16 .cx13-s-i{ width:30px; height:30px; }
  .cx-16 .cx13-w{ grid-template-columns:minmax(0, 1fr); padding:16px 16px 18px; }
  .cx-16 .cx13-ic{ display:none; }
  .cx-16 .cx13-btn{ grid-column:1; }
  .cx-16 .cx13-lede, .cx-16 .cx13-foot{ padding-left:16px; padding-right:16px; }
}

/* ---------- from 9 ---------- */
/* PRICING LAB · CTA 9 · LIVE QUOTE SUMMARY — an order-summary box (Stripe-checkout style).
   Left: the owner's copy. Right: one box — the selection (service, package, ad budget, currency) and
   its live total read from the card above (struck list price + discount, payable fee, billing terms),
   then the one strong action. Chosen segment = pressed in. */

.cx-16 .cx-9-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.3fr); gap:20px 48px; align-items:center; }

/* ---------- the owner's copy ---------- */
.cx-16 .cx-9-intro{ max-width:420px; }
.cx-16 .cx-9-k{ font-size:13px; font-weight:500; line-height:1.35; color:var(--cx-3); }
.cx-16 .cx-9-t{ margin-top:4px; font-size:18px; font-weight:750; line-height:1.35; letter-spacing:-.012em; color:var(--cx-ink); }
.cx-16 .cx-9-d{ margin-top:12px; font-size:15px; line-height:1.55; color:var(--cx-2); }

/* ---------- the box ---------- */
.cx-16 .cx-9-box{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); min-width:0; background:#fff; border:1px solid var(--cx-line);
  border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(14,30,53,.04), 0 18px 40px -32px rgba(14,30,53,.4); }

/* selection rows: label (bold ink) · control */
.cx-16 .cx-9-cfg{ min-width:0; padding:6px 24px; container-type:inline-size; }
.cx-16 .cx-9-row{ display:grid; grid-template-columns:92px minmax(0,1fr); align-items:center; gap:8px 16px; min-height:62px; padding:10px 0; }
.cx-16 .cx-9-row + .cx-9-row{ border-top:1px solid var(--cx-line-3); }
.cx-16 .cx-9-l{ font-size:13.5px; font-weight:750; line-height:1.3; color:var(--cx-ink); }
.cx-16 .cx-9-v{ font-size:15px; font-weight:500; line-height:1.35; color:var(--cx-2); }

/* segmented controls: a quiet track; the chosen segment is pressed in */
.cx-16 .cx-9-seg{ display:grid; gap:3px; padding:3px; border:1px solid var(--cx-line-2); border-radius:10px; background:var(--cx-t4); }
.cx-16 .cx-9-seg-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.cx-16 .cx-9-seg-2{ grid-template-columns:repeat(2,minmax(0,max-content)); justify-self:start; }
.cx-16 .cx-9-seg button{ min-width:0; min-height:36px; padding:0 12px; border:0; border-radius:8px; background:transparent; cursor:pointer;
  font-size:14px; font-weight:500; line-height:1.2; color:var(--cx-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cx-16 .cx-9-seg-4 button{ padding:0 8px; }
.cx-16 .cx-9-seg button:hover{ background:#fff; color:var(--cx-ink); }
.cx-16 .cx-9-seg button[aria-checked="true"]{ background:var(--cx-press-bg); box-shadow:var(--cx-press); font-weight:750; color:var(--cx-ink); }
.cx-16 .cx-9-seg button:focus-visible{ outline:2px solid var(--cx-act); outline-offset:1px; }

.cx-16 .cx-9-sel{ position:relative; display:block; max-width:260px; }
.cx-16 .cx-9-sel select{ display:block; width:100%; height:42px; padding:0 38px 0 12px; border:1px solid var(--cx-line); border-radius:10px; background:#fff;
  -webkit-appearance:none; appearance:none; cursor:pointer; font-size:15px; font-weight:650; color:var(--cx-ink); }
.cx-16 .cx-9-sel select:hover{ border-color:#A9BEDA; }
.cx-16 .cx-9-sel svg{ position:absolute; right:12px; top:50%; margin-top:-8px; color:var(--cx-3); pointer-events:none; }

/* ---------- the live total ---------- */
.cx-16 .cx-9-tot{ display:flex; flex-direction:column; min-width:0; padding:20px 24px 18px; background:var(--cx-t4); border-left:1px solid var(--cx-line-2); container-type:inline-size; }
.cx-16 .cx-9-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px 20px; }
.cx-16 .cx-9-pn{ font-size:20px; font-weight:800; line-height:1.15; letter-spacing:-.025em; color:var(--cx-ink); }
.cx-16 .cx-9-pt{ margin-top:3px; font-size:13.5px; font-weight:500; line-height:1.35; color:var(--cx-2); }
.cx-16 .cx-9-price{ text-align:right; }
.cx-16 .cx-9-was{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 8px; min-height:22px; }
.cx-16 .cx-9-was s{ font-size:13px; color:var(--cx-3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cx-16 .cx-9-off{ padding:1px 8px; border:1px solid var(--cx-line-2); border-radius:999px; background:#fff; font-size:12px; font-weight:750; line-height:1.5; color:#2B598F; white-space:nowrap; }
.cx-16 .cx-9-note{ font-size:12.5px; font-weight:600; color:var(--cx-3); }
.cx-16 .cx-9-fee{ display:flex; align-items:baseline; justify-content:flex-end; gap:0 6px; min-height:34px; margin-top:2px; white-space:nowrap; }
.cx-16 .cx-9-fee b{ font-size:30px; font-weight:800; line-height:1.1; letter-spacing:-.04em; color:var(--cx-ink); font-variant-numeric:tabular-nums; }
.cx-16 .cx-9-fee em{ font-style:normal; font-size:13px; color:var(--cx-3); }
.cx-16 .cx-9-fee .cx-9-custom{ font-size:22px; letter-spacing:-.02em; }

.cx-16 .cx-9-bill{ margin-top:14px; padding-top:12px; border-top:1px solid var(--cx-line-2); }
.cx-16 .cx-9-bk{ font-size:13px; font-weight:750; line-height:1.3; color:var(--cx-ink); }
.cx-16 .cx-9-bl{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.cx-16 .cx-9-bl li{ padding:3px 10px; border:1px solid #D9E4F1; border-radius:999px; background:#fff; font-size:12.5px; font-weight:600; line-height:1.4; color:var(--cx-2); white-space:nowrap; }

.cx-16 .cx-9-go{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; margin-top:16px; padding:0 20px; border-radius:10px;
  background:var(--cx-act); color:#fff; font-size:15.5px; font-weight:750; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(7,40,90,.18), 0 8px 18px -10px rgba(7,96,198,.55); }
.cx-16 .cx-9-go:hover{ background:var(--cx-act-h); }
.cx-16 .cx-9-go:active{ background:var(--cx-act-p); box-shadow:inset 0 2px 4px rgba(0,0,0,.18); }
.cx-16 .cx-9-alt{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px; margin-top:8px; }
.cx-16 .cx-9-alt a{ display:inline-flex; align-items:center; gap:6px; min-height:32px; font-size:13.5px; font-weight:500; color:var(--cx-2); white-space:nowrap; }
.cx-16 .cx-9-alt a:hover{ color:var(--cx-ink); text-decoration:underline; text-underline-offset:3px; }
.cx-16 .cx-9-alt svg{ color:var(--cx-3); }
@media (prefers-reduced-motion:no-preference){
  .cx-16 :is(.cx-9-seg button, .cx-9-go, .cx-9-sel select){ transition:background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; }
}

/* narrow selection column: labels sit over their controls */
@container (max-width:440px){
  .cx-16 .cx-9-row{ grid-template-columns:minmax(0,1fr); gap:8px; min-height:0; padding:12px 0; }
  .cx-16 .cx-9-sel{ max-width:none; }
  /* service and currency are short: they stay on one line, value to the right */
  .cx-16 .cx-9-row-in{ grid-template-columns:auto minmax(0,1fr); gap:12px; min-height:56px; padding:8px 0; }
  .cx-16 .cx-9-row-in > :last-child{ justify-self:end; text-align:right; }
}
/* narrow total: the price goes under the package name */
@container (max-width:360px){
  .cx-16 .cx-9-head{ flex-direction:column; gap:10px; }
  .cx-16 .cx-9-price{ text-align:left; }
  .cx-16 .cx-9-was, .cx-16 .cx-9-fee{ justify-content:flex-start; }
}

/* ---------- below 1100: the copy runs across the top ---------- */
@media (max-width:1099px){
  .cx-16 .cx-9-grid{ grid-template-columns:minmax(0,1fr); }
  .cx-16 .cx-9-intro{ max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 40px; }
  .cx-16 .cx-9-k, .cx-16 .cx-9-t{ grid-column:1; }
  .cx-16 .cx-9-d{ grid-column:2; grid-row:1 / span 2; align-self:end; margin:0; }
}

/* ---------- phones ---------- */
@media (max-width:699px){
  .cx-16 .cx-9-intro{ display:block; }
  .cx-16 .cx-9-d{ margin-top:10px; font-size:14.5px; }
  .cx-16 .cx-9-box{ grid-template-columns:minmax(0,1fr); }
  .cx-16 .cx-9-cfg{ padding:4px 16px; }
  .cx-16 .cx-9-tot{ padding:18px 16px 14px; border-left:0; border-top:1px solid var(--cx-line-2); }
  .cx-16 .cx-9-seg button{ min-height:44px; padding:0 6px; font-size:13.5px; }
  .cx-16 .cx-9-sel select{ height:46px; }
  .cx-16 .cx-9-alt{ justify-content:space-around; }
  .cx-16 .cx-9-alt a{ min-height:44px; }
}
@media (max-width:379px){ .cx-16 .cx-9-seg-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ==========================================================================
   16 · the combination — what is new or different from 11 / 13 / 9 above
   ========================================================================== */
/* order (owner, 2026-10-13): the quote button right under the cards, then "Not sure which package fits?" */
.cx-16{ margin-top:30px; margin-bottom:0; }
.cx-16 .cx16-q{ margin-top:0; }
.cx-16 .cx11-in{ margin-top:52px; }

/* the open panel is the lane's width: three columns need the room */
.cx-16 .cx13-d{ max-width:none; }
.cx-16 .cx16-form{ margin:22px 0 0; border-top:1px solid var(--cx-line-3); }
.cx-16 .cx16-cols{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,.95fr); align-items:stretch; }
.cx-16 .cx16-col{ min-width:0; padding:22px 26px 26px; }
.cx-16 .cx16-col + .cx16-col{ border-left:1px solid var(--cx-line-3); }
.cx-16 .cx16-h{ margin:0 0 10px; font:700 12px/1.3 var(--cx-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--cx-3); }

/* 3 · your quote: 9's live total as the third column (its tint, no extra frame) */
.cx-16 .cx16-cols > .cx-9-tot{ padding:22px 26px 26px; border-left:1px solid var(--cx-line-3); border-radius:0 0 15px 0; }
.cx-16 .cx-9-go{ width:100%; border:0; cursor:pointer; font-family:inherit; }
.cx-16 .cx16-conf{ margin-top:10px; text-align:center; font-size:13px; line-height:1.45; color:var(--cx-3); }

/* 2 · your details: the site's enquiry fields, as in the Live Proof popup (live-proof.css) and Contact Us */
.cx-16 .cx16-who .px-fs{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.cx-16 .cx16-who .px-f{ display:block; margin:0; }
.cx-16 .cx16-who .px-f > span:first-child{ display:flex; align-items:baseline; gap:7px; font-size:12.4px; font-weight:700; color:#3C4757; }
.cx-16 .cx16-who .px-f i{ font-style:normal; font-size:9.6px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#D93025; }
.cx-16 .cx16-who .px-f input{
  margin-top:7px; width:100%; border:1px solid #DCE3EE; border-radius:10px; background:#F6F8FC; padding:12px 14px;
  font:inherit; font-size:15px; color:inherit; transition:background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cx-16 .cx16-who .px-f input::placeholder{ color:#6B7686; }
.cx-16 .cx16-who .px-f input:hover{ border-color:#C5D1E3; }
.cx-16 .cx16-who .px-f input:focus{ outline:0; background:#fff; border-color:#1A73E8; box-shadow:0 0 0 3px rgba(26,115,232,.13); }
.cx-16 .cx16-who .px-f input.cf-bad{ border-color:#D93025; }
.cx-16 .cx16-who .px-err{ display:none; margin:14px 0 0; padding:12px 14px; border-radius:10px; background:#FCE8E6; color:#A50E0E; font-size:13.4px; line-height:1.5; }
.cx-16 .cx16-who .px-err.on{ display:block; }

/* the popup lives in <body> (moved there by c16.js) and takes live-proof.css as it is */
.cx16-dlg .pw-lede{ margin-bottom:18px; }

/* tablets: the quote column goes under the two others */
@media (max-width:1199px){
  .cx-16 .cx16-cols{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .cx-16 .cx16-cols > .cx-9-tot{ grid-column:1 / -1; border-left:0; border-top:1px solid var(--cx-line-3); border-radius:0 0 15px 15px; }
  .cx-16 .cx16-cols > .cx-9-tot .cx-9-go{ max-width:420px; margin-left:auto; margin-right:auto; }
}
/* phones: one column — package, details, quote */
@media (max-width:760px){
  .cx-16{ margin-top:24px; }
  .cx-16 .cx11-in{ margin-top:40px; }
  .cx-16 .cx16-form{ margin-top:16px; }
  .cx-16 .cx16-cols{ grid-template-columns:minmax(0,1fr); }
  .cx-16 .cx16-col{ padding:18px 18px 20px; }
  .cx-16 .cx16-col + .cx16-col{ border-left:0; border-top:1px solid var(--cx-line-3); }
  .cx-16 .cx16-cols > .cx-9-tot{ padding:18px 18px 18px; border-radius:0; }
  .cx-16 .cx16-who .px-f input{ font-size:16px; }
}

/* ---------- Billing (left) and the simple calculation (right) — owner, 2026-10-13 ---------- */
.cx-16 .cx16-calc{ margin-top:14px; padding-top:12px; border-top:1px solid var(--cx-line-2); }
.cx-16 .cx16-calc-k{ font-size:13px; font-weight:750; line-height:1.3; color:var(--cx-ink); }
.cx-16 .cx16-calc-x{ margin-top:4px; font-size:14px; line-height:1.45; color:var(--cx-2); font-variant-numeric:tabular-nums; }
.cx-16 .cx16-calc-t{ margin-top:2px; font-size:26px; font-weight:800; line-height:1.15; letter-spacing:-.03em; color:var(--cx-ink); font-variant-numeric:tabular-nums; }
.cx-16 .cx16-sched{ display:grid; gap:6px; margin-top:8px; }
.cx-16 .cx16-sched li{ display:flex; justify-content:space-between; gap:12px; font-size:14px; line-height:1.4; color:var(--cx-2); }
.cx-16 .cx16-sched b, .cx-16 .cx16-calc-tl b{ font-weight:750; color:var(--cx-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cx-16 .cx16-calc-tl{ display:flex; justify-content:space-between; gap:12px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--cx-line-2);
  font-size:14px; font-weight:750; color:var(--cx-ink); }
.cx-16 .cx16-calc-tl b{ font-size:18px; }

/* ---------- your package (owner, 2026-10-13: "very simple, like my enquiry form") ----------
   Package · Billing · Ad budget are each one field in the "Service requirement" field's own look
   (assets/forms/service-picker/service-picker.css, the popup's values): the chosen word and
   "Change"; a tap opens a short tick-box list under it, a pick closes it. Prices in ₹ INR · $ USD is
   the page's own switch (.pk-cur, packages.js keeps both in step). */
.cx-16 .cx16-fs{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.cx-16 .cx16-f{ position:relative; min-width:0; margin:0; }
.cx-16 .cx16-fl{ display:block; font-size:12.4px; font-weight:700; line-height:1.3; color:#3C4757; }
.cx-16 .cx16-row{
  display:flex; align-items:center; gap:8px; width:100%; min-height:46px; margin:7px 0 0; padding:6px 8px 6px 14px;
  border:0; border-radius:10px; background:#F6F8FC; box-shadow:inset 0 0 0 1px #DCE3EE;
  font:inherit; font-size:15px; line-height:1.25; color:#0E1E35; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:box-shadow .2s ease, border-radius .2s ease;
}
.cx-16 .cx16-val{ flex:1 1 auto; min-width:0; font-weight:500; }
.cx-16 .cx16-go{ flex:none; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:650; color:#33425A; white-space:nowrap; }
.cx-16 .cx16-go em{ font-style:normal; }
.cx-16 .cx16-chev{ display:block; width:24px; height:24px; padding:6px; border-radius:7px; background:#E3EDFC; color:#0760C6; transition:transform .25s ease; }
.cx-16 .cx16-f.is-open .cx16-chev{ transform:rotate(180deg); }
.cx-16 .cx16-f.is-open .cx16-row{ border-radius:10px 10px 4px 4px; }
@media (hover:hover){ .cx-16 .cx16-row:hover{ box-shadow:inset 0 0 0 1px #C5D1E3; } }
.cx-16 .cx16-row:focus-visible{ outline:2px solid #0760C6; outline-offset:2px; }

/* the list, docked under the field */
.cx-16 .cx16-list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 4px; min-width:0; margin:4px 0 0; padding:5px 6px;
  border:0; border-radius:4px 4px 10px 10px; background:#F6F8FC; box-shadow:inset 0 0 0 1px #DCE3EE; }
.cx-16 .cx16-list[hidden]{ display:none; }
.cx-16 .cx16-list legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cx-16 .cx16-k{ position:relative; display:flex; align-items:center; gap:9px; min-width:0; min-height:46px; padding:0 6px 0 8px; border-radius:10px;
  font-size:14.5px; font-weight:600; line-height:1.15; color:#0E1E35; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background-color .18s ease; }
.cx-16 .cx16-k input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:inherit; }
.cx-16 .cx16-tk{ flex:none; display:grid; place-items:center; width:18px; height:18px; border-radius:5px; box-shadow:inset 0 0 0 1.5px #A7B6CE; color:transparent;
  transition:background-color .18s ease, box-shadow .18s ease, color .18s ease; }
.cx-16 .cx16-tk svg{ display:block; width:12px; height:12px; }
.cx-16 .cx16-k:has(input:checked){ color:#0A4FA8; }
.cx-16 .cx16-k:has(input:checked) .cx16-tk{ background:#0760C6; box-shadow:none; color:#fff; }
.cx-16 .cx16-k:has(input:focus-visible){ outline:2px solid #0760C6; outline-offset:-2px; }
@media (hover:hover){ .cx-16 .cx16-k:not(.is-na):hover{ background:#EDF1F8; } }
/* Monthly where it is not offered: faded, and says so */
.cx-16 .cx16-k.is-na{ color:#8E99A8; font-weight:500; cursor:not-allowed; }
.cx-16 .cx16-k.is-na .cx16-tk{ box-shadow:inset 0 0 0 1.5px #D3DAE5; }
.cx-16 .cx16-k.is-na{ display:grid; grid-template-columns:18px minmax(0,1fr); column-gap:9px; row-gap:2px; align-content:center; }
.cx-16 .cx16-k.is-na .cx16-tk{ grid-row:1 / span 2; }
.cx-16 .cx16-na{ grid-column:2; font-size:11.5px; font-weight:600; line-height:1.1; color:#8E99A8; white-space:nowrap; }   /* a small line under "Monthly" */

/* prices in ₹ INR · $ USD: the line above the cards, again here */
.cx-16 .cx16-curl{ display:flex; align-items:baseline; gap:12px; margin-top:16px; }
.cx-16 .cx16-curl .cx16-fl{ margin:0; }

/* ---------- phones: one connected funnel — choices, then the price right under them, then your details, then Send ---------- */
@media (max-width:760px){
  .cx-16 .cx13-lede{ display:none; }
  .cx-16 .cx16-form{ margin-top:14px; }
  .cx-16 .cx16-cols > .cx-9-tot{ display:contents; }
  .cx-16 .cx16-pick{ order:1; padding:16px 16px 14px; }
  .cx-16 .cx-9-tot > .cx16-h{ display:none; }
  .cx-16 .cx-9-tot > .cx-9-head{
    order:2; margin:0 16px; padding:12px 14px 8px; display:flex; flex-direction:row; align-items:flex-start; justify-content:space-between; gap:10px;
    background:var(--cx-t4); border:1px solid #D8E4F6; border-bottom:0; border-radius:12px 12px 0 0;
  }
  .cx-16 .cx-9-tot > .cx-9-head .cx-9-price{ text-align:right; }
  .cx-16 .cx-9-tot > .cx-9-head .cx-9-was, .cx-16 .cx-9-tot > .cx-9-head .cx-9-fee{ justify-content:flex-end; }
  .cx-16 .cx-9-tot > .cx-9-head .cx-9-pn{ font-size:18px; }
  .cx-16 .cx-9-tot > .cx-9-head .cx-9-fee b{ font-size:24px; }
  .cx-16 .cx-9-tot > .cx16-calc{
    order:3; margin:0 16px; padding:10px 14px 12px; border:1px solid #D8E4F6; border-top:1px dashed #D3E0EF; border-radius:0 0 12px 12px;
    background:var(--cx-t4); display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px; align-items:end;
  }
  .cx-16 .cx16-calc .cx16-calc-k{ grid-column:1; }
  .cx-16 .cx16-calc .cx16-calc-x{ grid-column:1; margin-top:2px; font-size:13.5px; }
  .cx-16 .cx16-calc .cx16-calc-t{ grid-column:2; grid-row:1 / span 2; font-size:22px; }
  .cx-16 .cx16-calc .cx16-sched, .cx-16 .cx16-calc .cx16-calc-tl{ grid-column:1 / -1; }
  .cx-16 .cx16-who{ order:4; border-top:0 !important; padding:18px 16px 4px; }
  .cx-16 .cx16-cols > .cx-9-tot > .cx-9-go{ order:5; justify-self:stretch; max-width:none; margin:14px 16px 0; width:auto; }
  .cx-16 .cx-9-tot > .cx16-conf{ order:6; margin:8px 16px 16px; }
}
@media (max-width:360px){
  .cx-16 .cx16-k{ gap:7px; padding:0 4px 0 6px; font-size:14px; }
  .cx-16 .cx16-k.is-na{ column-gap:7px; }
}