/* ===========================================================================
   WHISPER CRM — PRICING
   ---------------------------------------------------------------------------
   Two cards, not four. Whisper AI and E-commerce are not plans: both require
   Premium and both are bought in the same transaction, so they live INSIDE the
   Premium card as toggles with a running total.

   NO JAVASCRIPT. The page body is injected with dangerouslySetInnerHTML, and a
   <script> inserted that way never executes — so the toggles are real
   checkboxes and the total is chosen with :has(). Four totals are rendered and
   exactly one is shown, which keeps the arithmetic honest and out of code.
   =========================================================================== */

.wc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .wc-grid { grid-template-columns: minmax(0, 1fr); }
}

.wc-card {
  position: relative;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 18px;
  padding: 30px 28px;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .04);
}
.wc-card--main {
  border: 2px solid #198754;
  box-shadow: 0 18px 44px rgba(25, 135, 84, .13);
}

.wc-ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: #198754; color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .35em 1.2em; border-radius: 1em; white-space: nowrap;
}

.wc-eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #98a2b3; margin: 0 0 .4rem;
}
.wc-name { font-size: 1.45rem; font-weight: 800; color: #101828; margin: 0 0 .9rem; }

.wc-price { display: flex; align-items: flex-end; gap: .35rem; line-height: 1; }
.wc-cur { font-size: 1rem; font-weight: 600; color: #667085; margin-bottom: .55rem; }
.wc-amt { font-size: 2.9rem; font-weight: 900; color: #101828; letter-spacing: -1.5px; }
.wc-per { font-size: .78rem; color: #667085; font-weight: 500; margin-bottom: .45rem; line-height: 1.15; }
.wc-note { font-size: .84rem; color: #667085; margin: .6rem 0 1.2rem; }

.wc-feats { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.wc-feats li { display: flex; align-items: flex-start; gap: .55rem; padding: .3rem 0; font-size: .92rem; color: #344054; }
.wc-feats i { color: #198754; font-size: .95rem; line-height: 1.45; flex: 0 0 auto; }

.wc-limits {
  font-size: .82rem; color: #667085; background: #f8fafc;
  border: 1px solid #eef1f5; border-radius: 10px; padding: .6rem .75rem; margin: 0 0 1.2rem;
}
.wc-limits i { color: #98a2b3; margin-right: .3rem; }

/* ── the add-on block ───────────────────────────────────────────────────── */
.wc-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.wc-addons {
  border-top: 1px dashed #dfe3e8;
  padding-top: 1.1rem; margin-top: .3rem;
}
.wc-addons-head {
  font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #475467; margin: 0 0 .7rem;
}
.wc-addons-head span {
  font-weight: 600; letter-spacing: 0; text-transform: none;
  color: #98a2b3; font-size: .76rem; margin-left: .35rem;
}

.wc-addon {
  display: flex; gap: .75rem; align-items: flex-start;
  border: 1.5px solid #e6e9ee; border-radius: 13px;
  padding: .8rem .9rem; margin-bottom: .65rem; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.wc-addon:hover { border-color: #b7d9c8; background: #fbfefc; }

.wc-box {
  flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px;
  border: 2px solid #cbd5e1; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s ease, border-color .16s ease;
}
.wc-box i { color: #fff; font-size: .82rem; opacity: 0; transition: opacity .16s ease; }

.wc-addon-title { display: block; font-size: .95rem; font-weight: 700; color: #101828; }
.wc-addon-price { font-weight: 700; color: #198754; font-size: .85rem; margin-left: .3rem; }
.wc-addon-desc { display: block; font-size: .82rem; color: #667085; line-height: 1.5; margin-top: .2rem; }

/* selected state */
.wc-card--main:has(#wcAddonAi:checked) .wc-addon[for="wcAddonAi"],
.wc-card--main:has(#wcAddonEc:checked) .wc-addon[for="wcAddonEc"] {
  border-color: #198754; background: #f2fbf6; box-shadow: 0 0 0 3px rgba(25, 135, 84, .09);
}
.wc-card--main:has(#wcAddonAi:checked) .wc-addon[for="wcAddonAi"] .wc-box,
.wc-card--main:has(#wcAddonEc:checked) .wc-addon[for="wcAddonEc"] .wc-box {
  background: #198754; border-color: #198754;
}
.wc-card--main:has(#wcAddonAi:checked) .wc-addon[for="wcAddonAi"] .wc-box i,
.wc-card--main:has(#wcAddonEc:checked) .wc-addon[for="wcAddonEc"] .wc-box i { opacity: 1; }

/* keyboard focus, since the real input is off-screen */
.wc-toggle:focus-visible + .wc-toggle + .wc-ribbon ~ .wc-addons .wc-addon,
.wc-card--main:has(.wc-toggle:focus-visible) .wc-addon { outline: none; }
.wc-card--main:has(#wcAddonAi:focus-visible) .wc-addon[for="wcAddonAi"],
.wc-card--main:has(#wcAddonEc:focus-visible) .wc-addon[for="wcAddonEc"] {
  outline: 2px solid #198754; outline-offset: 2px;
}

/* ── running total ─────────────────────────────────────────────────────── */
.wc-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: #f2fbf6; border: 1px solid #cfe9db; border-radius: 13px;
  padding: .85rem 1rem; margin: 1rem 0 1.1rem;
}
.wc-total-label { font-size: .84rem; font-weight: 600; color: #475467; }
.wc-total-figure { font-size: 1.45rem; font-weight: 900; color: #198754; letter-spacing: -.5px; }

/* ONE RULE PER STATE — no rule ever has to override another.
   The button labels carry a combo class only, so they match on combo alone;
   the totals also carry a cycle class and match on both. */

.wc-v { display: none; }

/* button label: depends on the add-ons, not on the billing cycle */
.wc-card--main:has(#wcAddonAi:not(:checked)):has(#wcAddonEc:not(:checked)) .wc-v-p:not(.wc-m):not(.wc-y),
.wc-card--main:has(#wcAddonAi:checked):has(#wcAddonEc:not(:checked))       .wc-v-pa:not(.wc-m):not(.wc-y),
.wc-card--main:has(#wcAddonAi:not(:checked)):has(#wcAddonEc:checked)       .wc-v-pe:not(.wc-m):not(.wc-y),
.wc-card--main:has(#wcAddonAi:checked):has(#wcAddonEc:checked)             .wc-v-pae:not(.wc-m):not(.wc-y) { display: inline; }

/* the figure: cycle + add-ons */
.wc-pricing:has(#wcCycleM:checked) .wc-card--main:has(#wcAddonAi:not(:checked)):has(#wcAddonEc:not(:checked)) .wc-v-p.wc-m,
.wc-pricing:has(#wcCycleM:checked) .wc-card--main:has(#wcAddonAi:checked):has(#wcAddonEc:not(:checked))       .wc-v-pa.wc-m,
.wc-pricing:has(#wcCycleM:checked) .wc-card--main:has(#wcAddonAi:not(:checked)):has(#wcAddonEc:checked)       .wc-v-pe.wc-m,
.wc-pricing:has(#wcCycleM:checked) .wc-card--main:has(#wcAddonAi:checked):has(#wcAddonEc:checked)             .wc-v-pae.wc-m,
.wc-pricing:has(#wcCycleY:checked) .wc-card--main:has(#wcAddonAi:not(:checked)):has(#wcAddonEc:not(:checked)) .wc-v-p.wc-y,
.wc-pricing:has(#wcCycleY:checked) .wc-card--main:has(#wcAddonAi:checked):has(#wcAddonEc:not(:checked))       .wc-v-pa.wc-y,
.wc-pricing:has(#wcCycleY:checked) .wc-card--main:has(#wcAddonAi:not(:checked)):has(#wcAddonEc:checked)       .wc-v-pe.wc-y,
.wc-pricing:has(#wcCycleY:checked) .wc-card--main:has(#wcAddonAi:checked):has(#wcAddonEc:checked)             .wc-v-pae.wc-y { display: inline; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.wc-btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  font-size: .95rem; font-weight: 700; padding: .8rem 1rem; border-radius: 11px;
  transition: transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.wc-btn-solid { background: #198754; color: #fff; box-shadow: 0 8px 20px rgba(25, 135, 84, .22); }
.wc-btn-solid:hover { background: #157347; color: #fff; transform: translateY(-1px); }
.wc-btn-ghost { background: #fff; color: #198754; border: 1.5px solid #198754; }
.wc-btn-ghost:hover { background: #f2fbf6; color: #157347; }

.wc-after { font-size: .78rem; color: #98a2b3; text-align: center; margin: .7rem 0 0; }
.wc-vat { font-size: .8rem; color: #98a2b3; text-align: center; margin: 1.8rem 0 0; }

/* Older engines without :has() show Premium's own price and both add-ons
   unselected — accurate, just not interactive. */
@supports not selector(:has(*)) {
  /* Annual, Premium only — the markup default. */
  .wc-v-p.wc-y,
  .wc-v-p:not(.wc-m):not(.wc-y) { display: inline; }
}

/* ── MONTHLY / ANNUAL SWITCH ──────────────────────────────────────────────
   Annual is checked in the markup, so it is the default even before CSS
   loads. Two labels over two radios; the pill slides by swapping which label
   carries the filled style. */
.wc-switch {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #f1f5f9; border: 1px solid #e6e9ee; border-radius: 999px;
  margin: 0 auto 30px; position: relative; left: 50%; transform: translateX(-50%);
}
.wc-switch-opt {
  cursor: pointer; user-select: none; white-space: nowrap;
  font-size: .88rem; font-weight: 700; color: #667085;
  padding: .5rem 1.15rem; border-radius: 999px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.wc-switch-opt span {
  display: inline-block; margin-left: .4rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: #d1fae5; color: #047857; border-radius: 999px; padding: .12em .6em;
}
.wc-pricing:has(#wcCycleM:checked) .wc-switch-m,
.wc-pricing:has(#wcCycleY:checked) .wc-switch-y {
  background: #fff; color: #101828; box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}
.wc-pricing:has(#wcCycleM:focus-visible) .wc-switch-m,
.wc-pricing:has(#wcCycleY:focus-visible) .wc-switch-y {
  outline: 2px solid #198754; outline-offset: 2px;
}

/* Price fragments that differ by cycle (amount, "month"/"year", add-on price). */
.wc-c { display: none; }
/* .wc-c ONLY. These spans are the price FRAGMENTS (amount, month/year, add-on
   price). The running totals also carry .wc-m/.wc-y, and an unscoped rule here
   out-specifies .wc-v{display:none} and forced all four totals visible at once. */
.wc-pricing:has(#wcCycleM:checked) .wc-c.wc-m,
.wc-pricing:has(#wcCycleY:checked) .wc-c.wc-y { display: inline; }
@supports not selector(:has(*)) {
  .wc-c.wc-y { display: inline; }
}

/* ── CONTACT ──────────────────────────────────────────────────────────── */
.wc-contact-card {
  background: #fff; border: 1px solid #e6e9ee; border-radius: 18px;
  padding: 30px 28px; box-shadow: 0 8px 28px rgba(16, 24, 40, .06);
}
.wc-form { display: flex; flex-direction: column; gap: 1.05rem; }
.wc-field { display: flex; flex-direction: column; gap: .4rem; }
.wc-field label { font-size: .84rem; font-weight: 700; color: #344054; }
.wc-req { color: #dc3545; margin-left: .15rem; }
.wc-opt {
  font-weight: 600; color: #98a2b3; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; margin-left: .35rem;
}

.wc-form input,
.wc-form textarea,
.wc-form select {
  width: 100%; font-size: .95rem; color: #101828; background: #fff;
  border: 1.5px solid #e2e6ec; border-radius: 11px;
  padding: .7rem .85rem; transition: border-color .16s ease, box-shadow .16s ease;
}
.wc-form textarea { resize: vertical; min-height: 96px; }
.wc-form input::placeholder, .wc-form textarea::placeholder { color: #b3bac5; }
.wc-form input:focus, .wc-form textarea:focus, .wc-form select:focus {
  outline: none; border-color: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, .12);
}

/* Country code + number read as ONE control, so they share a border and the
   seam between them is a divider rather than two separate boxes. */
.wc-phone {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  border: 1.5px solid #e2e6ec; border-radius: 11px; overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.wc-phone:focus-within { border-color: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, .12); }
.wc-phone select {
  border: none; border-right: 1.5px solid #eef1f5; border-radius: 0;
  background: #f8fafc; font-weight: 600; color: #344054;
  max-width: 132px; padding-right: 1.9rem;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23667085'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55rem center; background-size: 16px;
}
.wc-phone select:focus, .wc-phone input:focus { box-shadow: none; }
.wc-phone input { border: none; border-radius: 0; }

.wc-form-btn { margin-top: .2rem; border: none; cursor: pointer; }
.wc-form-note {
  font-size: .78rem; color: #98a2b3; text-align: center; margin: 0;
}
.wc-form-note i { color: #198754; margin-right: .25rem; }

@media (max-width: 480px) {
  .wc-phone { grid-template-columns: minmax(0, 1fr); }
  .wc-phone select { max-width: none; border-right: none; border-bottom: 1.5px solid #eef1f5; }
}

/* ── DIAL CODE: LONG IN THE LIST, SHORT WHEN CLOSED ──────────────────────
   A native <select> renders the selected option's own text, so "United Arab
   Emirates (+971)" would also be what shows once closed. There is no HTML
   attribute for a separate short label.

   So the control's own text is made transparent and the code is painted over
   it by ::before, chosen from which option is :checked. The OPTIONS keep an
   explicit colour, so the dropdown list still reads "United Arab Emirates
   (+971)" exactly as before. Nothing about the selection behaviour, the form
   value or the submitted data changes — only what is drawn when closed. */
.wc-phone { position: relative; }

.wc-phone select {
  color: transparent;               /* hides the long label when closed */
  text-align: center;
  width: 108px; max-width: 108px;
  padding-left: .5rem; padding-right: 1.6rem;
}
.wc-phone select option {
  color: #344054;                   /* the list keeps the full country name */
  text-align: left;
  background: #fff;
}

.wc-phone::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 108px;
  display: flex; align-items: center; justify-content: center;
  padding-right: 1.1rem;            /* clears the chevron, keeps the code centred */
  font-size: .95rem; font-weight: 600; color: #344054;
  pointer-events: none;             /* the select underneath stays clickable */
}

.wc-phone:has(#wcDial option[value="+971"]:checked)::before { content: "+971"; }
.wc-phone:has(#wcDial option[value="+966"]:checked)::before { content: "+966"; }
.wc-phone:has(#wcDial option[value="+974"]:checked)::before { content: "+974"; }
.wc-phone:has(#wcDial option[value="+973"]:checked)::before { content: "+973"; }
.wc-phone:has(#wcDial option[value="+965"]:checked)::before { content: "+965"; }
.wc-phone:has(#wcDial option[value="+968"]:checked)::before { content: "+968"; }
.wc-phone:has(#wcDial option[value="+20"]:checked)::before { content: "+20"; }
.wc-phone:has(#wcDial option[value="+962"]:checked)::before { content: "+962"; }
.wc-phone:has(#wcDial option[value="+961"]:checked)::before { content: "+961"; }
.wc-phone:has(#wcDial option[value="+91"]:checked)::before { content: "+91"; }
.wc-phone:has(#wcDial option[value="+92"]:checked)::before { content: "+92"; }
.wc-phone:has(#wcDial option[value="+880"]:checked)::before { content: "+880"; }
.wc-phone:has(#wcDial option[value="+63"]:checked)::before { content: "+63"; }
.wc-phone:has(#wcDial option[value="+44"]:checked)::before { content: "+44"; }
.wc-phone:has(#wcDial option[value="+1"]:checked)::before { content: "+1"; }
.wc-phone:has(#wcDial option[value="+90"]:checked)::before { content: "+90"; }
.wc-phone:has(#wcDial option[value="+60"]:checked)::before { content: "+60"; }
.wc-phone:has(#wcDial option[value="+62"]:checked)::before { content: "+62"; }
.wc-phone:has(#wcDial option[value="+27"]:checked)::before { content: "+27"; }
.wc-phone:has(#wcDial option[value="+234"]:checked)::before { content: "+234"; }
.wc-phone:has(#wcDial option[value="+254"]:checked)::before { content: "+254"; }

/* Without :has() the code cannot be derived, so show the native label rather
   than an empty box. */
@supports not selector(:has(*)) {
  .wc-phone select { color: #344054; text-align: left; width: auto; max-width: 132px; }
  .wc-phone::before { content: none; }
}

/* The fixed 108px above is declared after the small-screen rule, so it would
   otherwise win there too and leave the code stuck at 108px while the number
   field went full width. Restate both for the stacked layout. */
@media (max-width: 480px) {
  .wc-phone select { width: 100%; max-width: none; text-align: left; padding-left: .85rem; }
  .wc-phone::before { width: 100%; justify-content: flex-start; padding-left: .85rem; padding-right: 0; }
}

/* ── SEARCHABLE DIAL PICKER (only once dial.js has upgraded the control) ──
   Without JS none of this applies and the native select + ::before code stays
   exactly as it was. */
.wc-phone--js select { display: none; }
.wc-phone--js::before { content: none; }

.wc-dial-trigger {
  width: 108px; flex: 0 0 108px;
  border: none; border-right: 1.5px solid #eef1f5; border-radius: 0;
  background: #f8fafc; cursor: pointer;
  font-size: .95rem; font-weight: 600; color: #344054;
  text-align: center; padding: .7rem 1.5rem .7rem .6rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23667085'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55rem center; background-size: 16px;
  transition: background-color .16s ease;
}
.wc-dial-trigger:hover { background-color: #f1f5f9; }
.wc-dial-trigger:focus-visible { outline: 2px solid #198754; outline-offset: -2px; }

.wc-dial-pop {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: min(320px, 92vw);
  background: #fff; border: 1px solid #e2e6ec; border-radius: 13px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
  overflow: hidden;
}
.wc-dial-search {
  width: 100%; border: none; border-bottom: 1px solid #eef1f5; border-radius: 0;
  padding: .7rem .9rem; font-size: .9rem; color: #101828;
}
.wc-dial-search:focus { outline: none; box-shadow: none; border-color: #cfe9db; }

.wc-dial-list { list-style: none; margin: 0; padding: .3rem; max-height: 232px; overflow-y: auto; }
.wc-dial-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .5rem .65rem; border-radius: 9px; cursor: pointer;
  font-size: .9rem; color: #344054;
}
.wc-dial-item.is-active { background: #f2fbf6; }
.wc-dial-item.is-selected { font-weight: 700; color: #101828; }
.wc-dial-item.is-selected .wc-dial-code { color: #198754; }
.wc-dial-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-dial-code { flex: 0 0 auto; font-weight: 600; color: #667085; font-variant-numeric: tabular-nums; }
.wc-dial-empty { padding: .8rem .65rem; font-size: .88rem; color: #98a2b3; text-align: center; }

@media (max-width: 480px) {
  .wc-dial-trigger { width: 100%; flex: none; text-align: left; padding-left: .85rem;
                     border-right: none; border-bottom: 1.5px solid #eef1f5; }
  .wc-dial-pop { width: 100%; }
}

/* .wc-phone is a two-column GRID, and dial.js appends its trigger after the
   number input — so the input claimed column 1 and the code sat on the right.
   Order fixes the placement without moving DOM nodes (the select must stay
   where it is for the form). The popup is absolutely positioned, so it is out
   of flow and never takes a cell. */
.wc-phone--js { grid-template-columns: 108px minmax(0, 1fr); }
.wc-phone--js .wc-dial-trigger { order: -1; grid-column: 1; }
.wc-phone--js input[type="tel"] { order: 0; grid-column: 2; }
.wc-phone--js .wc-dial-pop { grid-column: 1 / -1; }

@media (max-width: 480px) {
  .wc-phone--js { grid-template-columns: minmax(0, 1fr); }
  .wc-phone--js .wc-dial-trigger,
  .wc-phone--js input[type="tel"] { grid-column: 1; }
}

/* THE ACTUAL BREAK: .wc-phone sets `overflow: hidden` so the code and the
   number appear inside one rounded border. The popup is positioned BELOW that
   box, so it was being clipped away to nothing.

   Once upgraded, the clipping is dropped and the rounded corners are put on
   the two children instead — same joined look, popup no longer cut off. */
.wc-phone--js { overflow: visible; }
.wc-phone--js .wc-dial-trigger { border-radius: 9.5px 0 0 9.5px; }
.wc-phone--js input[type="tel"] { border-radius: 0 9.5px 9.5px 0; }

@media (max-width: 480px) {
  .wc-phone--js .wc-dial-trigger { border-radius: 9.5px 9.5px 0 0; }
  .wc-phone--js input[type="tel"] { border-radius: 0 0 9.5px 9.5px; }
}

/* ── HEADER LOGO ──────────────────────────────────────────────────────────
   The mark is square (the old one was a 180x50 wordmark), so the name sits
   beside it rather than being lost. Sized and spaced against the theme's own
   .header .logo rules. */
.header .logo img { max-height: 34px; width: 34px; height: 34px; margin-right: 10px; }
.header .logo h1.sitename {
  font-size: 21px; font-weight: 700; letter-spacing: -.2px;
  padding-left: 0; white-space: nowrap;
}
@media (max-width: 575px) {
  .header .logo img { max-height: 28px; width: 28px; height: 28px; margin-right: 7px; }
  .header .logo h1.sitename { font-size: 18px; }
}

/* ── ABOUT: image matches the text column ────────────────────────────────
   The source is a 1024x1024 square with no size constraint in the theme, so
   it rendered as tall as the column is wide — fine against the old three
   long paragraphs, far too tall now the copy is half the length.

   The row is switched from centred to stretched so both columns share a
   height, and the image covers its column instead of dictating it. Beats
   Bootstrap's .align-items-center on specificity (0,2,0) vs (0,1,0). */
.about .row.align-items-center { align-items: stretch; }

.about .about-image {
  height: 100%;
  min-height: 260px;              /* never collapses if the copy gets shorter still */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}
.about .about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;              /* fills without distorting the square */
  object-position: center;
  display: block;
  box-shadow: none;               /* the wrapper carries it now, so it can clip */
}

/* Stacked layout: no sibling to match, so give it a sane shape of its own. */
@media (max-width: 991.98px) {
  .about .about-image { height: auto; aspect-ratio: 16 / 10; margin-bottom: 1.75rem; }
}

/* The previous pass stretched the columns, but the <img> still contributed its
   own intrinsic height (square, so ~= column width) to the row — meaning the
   IMAGE could still be what made the row tall. Taking it out of flow removes
   that contribution entirely: the row height is now decided by the text block
   alone, and the picture fills whatever that turns out to be. */
.about .about-image { position: relative; height: 100%; min-height: 0; }
.about .about-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  /* Stacked: nothing to match, so the wrapper supplies its own height. */
  .about .about-image { aspect-ratio: 16 / 10; height: auto; }
}

/* ── ABOUT IMAGE: FINAL, AND DELIBERATELY BORING ─────────────────────────
   Two earlier attempts failed for the same underlying reason: they depended
   on a height being inherited down the column. When that chain resolved to
   `auto`, `height: 100%` became 0 — and with the img taken out of flow, the
   picture vanished entirely.

   So nothing here depends on the parent's height. The wrapper states its own
   shape, the image covers it, and it is visible no matter what the text does.
   Everything the two previous passes set is neutralised above this point. */
.about .row.align-items-center { align-items: center; }

.about .about-image {
  position: relative;
  height: auto;
  aspect-ratio: 4 / 3;            /* close to the text block, never collapses */
  min-height: 240px;
  max-height: 420px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}
.about .about-image img {
  position: static;               /* back in flow — this is what made it vanish */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  box-shadow: none;
}

@media (max-width: 991.98px) {
  .about .about-image { aspect-ratio: 16 / 10; max-height: none; margin-bottom: 1.75rem; }
}

/* NO CROP, AND SMALLER.
   The source is 1024x1024. Any box that is not square forces `cover` to cut
   something off (the 4:3 box above was trimming top and bottom) or `contain`
   to letterbox. Matching the box to the image's own 1:1 ratio does neither.
   Width is capped so it reads as a supporting visual, not a slab. */
.about .about-image {
  aspect-ratio: 1 / 1;
  max-height: none;
  min-height: 0;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;            /* centred in its column */
}
.about .about-image img {
  object-fit: contain;            /* belt and braces: never crop */
}

@media (max-width: 991.98px) {
  .about .about-image { aspect-ratio: 1 / 1; max-width: 300px; }
}

/* The About visual is now an inline 16:9 SVG, not a square photo. It sizes
   itself from its own viewBox, so the wrapper stops imposing a shape — the
   1:1 box and the crop rules above no longer apply to it. */
.about .about-image {
  aspect-ratio: auto;
  max-width: none;
  min-height: 0;
  max-height: none;
  overflow: visible;
  box-shadow: none;
  border-radius: 0;
}
.about .about-image svg { width: 100%; height: auto; display: block; border-radius: 18px; }

@media (max-width: 991.98px) {
  .about .about-image { aspect-ratio: auto; max-width: none; margin-bottom: 1.75rem; }
}



/* ═══ SIGN-UP MODAL ══════════════════════════════════════════════════════
   Short enough not to scroll on a laptop: the plan lives in a coloured
   header band instead of a card, name and business share a row, and the
   optional note is gone. */
.wc-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(6, 34, 29, .58);
  backdrop-filter: blur(4px);
  animation: wcFade .18s ease-out;
}
.wc-modal[hidden] { display: none; }
@keyframes wcFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes wcRise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }

.wc-modal-box {
  position: relative;
  width: 100%; max-width: 500px;
  max-height: calc(100vh - 36px); overflow-y: auto;
  background: #fff; border-radius: 20px; overflow-x: hidden;
  box-shadow: 0 32px 80px rgba(6, 34, 29, .38);
  animation: wcRise .24s cubic-bezier(.2, .8, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .wc-modal, .wc-modal-box { animation: none; }
}

.wc-modal-x {
  position: absolute; top: 12px; right: 13px; z-index: 2;
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition: background .16s ease;
}
.wc-modal-x:hover { background: rgba(255, 255, 255, .32); }

/* ── header band: the plan, unmistakably ── */
.wc-su-head {
  background: linear-gradient(135deg, #0b3d34 0%, #0f6b57 55%, #14a37f 100%);
  color: #fff; padding: 20px 24px 18px; position: relative; overflow: hidden;
}
.wc-su-head::after {
  content: ""; position: absolute; right: -40px; top: -60px;
  width: 190px; height: 190px; border-radius: 50%;
  background: #ffffff; opacity: .07;
}
.wc-su-kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; opacity: .72; margin: 0 0 .3rem;
}
.wc-su-row { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.wc-su-plan { font-size: 1.3rem; font-weight: 800; letter-spacing: -.3px; }
.wc-su-price { font-size: 1.42rem; font-weight: 900; letter-spacing: -.6px; white-space: nowrap; }
.wc-su-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; }
.wc-su-chip {
  font-size: .74rem; font-weight: 700;
  background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px; padding: .2em .7em;
}
.wc-su-cycle { font-size: .76rem; opacity: .8; margin-left: auto; }
.wc-modal.is-free .wc-su-price { font-size: 1.25rem; }

/* ── form ── */
.wc-su-form { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: .8rem; }
.wc-su-title { font-size: 1.05rem; font-weight: 800; color: #101828; margin: 0 0 .1rem; }
.wc-su-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.wc-su-form .wc-field { gap: .3rem; }
.wc-su-form label { font-size: .78rem; font-weight: 700; color: #475467; }
.wc-su-form input,
.wc-su-form select,
.wc-su-form textarea {
  width: 100%; font-size: .93rem; color: #101828; background: #fff;
  border: 1.5px solid #e2e6ec; border-radius: 10px; padding: .62rem .75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wc-su-form input::placeholder { color: #b7bec7; }
.wc-su-form input:focus, .wc-su-form select:focus {
  outline: none; border-color: #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, .13);
}
.wc-su-form input.is-bad { border-color: #f04438; box-shadow: 0 0 0 3px rgba(240, 68, 56, .13); }

.wc-su-go {
  margin-top: .25rem; width: 100%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #198754 0%, #14a37f 100%);
  color: #fff; font-size: .97rem; font-weight: 700;
  padding: .8rem 1rem; border-radius: 11px;
  box-shadow: 0 10px 22px rgba(25, 135, 84, .28);
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
}
.wc-su-go:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 14px 28px rgba(25, 135, 84, .34); }
.wc-su-go span { display: inline-block; transition: transform .16s ease; }
.wc-su-go:hover span { transform: translateX(3px); }

.wc-su-note { font-size: .75rem; color: #98a2b3; text-align: center; margin: 0; }
.wc-su-note i { color: #198754; margin-right: .25rem; }

.wc-modal-err {
  font-size: .82rem; color: #b42318; background: #fef3f2;
  border: 1px solid #fecdca; border-radius: 9px; padding: .5rem .7rem; margin: 0;
}
.wc-modal-err[hidden] { display: none; }

/* keep the dial popup inside the dialog rather than making it scroll */
.wc-modal .wc-dial-list { max-height: 150px; }
.wc-modal .wc-dial-pop { width: min(290px, 76vw); }

@media (max-width: 520px) {
  .wc-su-grid { grid-template-columns: 1fr; }
  .wc-su-head { padding: 18px 18px 16px; }
  .wc-su-form { padding: 18px 18px 20px; }
  .wc-su-cycle { margin-left: 0; }
}

/* ── free-plan success state, and the payment result page ─────────────── */
.wc-su-done { padding: 30px 26px; text-align: center; }
.wc-su-tick {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: #198754; color: #fff; font-size: 1.7rem;
  display: flex; align-items: center; justify-content: center;
}
.wc-su-done h3 { font-size: 1.25rem; font-weight: 800; color: #101828; margin: 0 0 .5rem; }
.wc-su-done p { font-size: .9rem; color: #475467; margin: 0 0 .8rem; }
.wc-su-pw {
  font-family: ui-monospace, Menlo, monospace; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .06em; color: #0f6b57; background: #f2fbf6;
  border: 1px dashed #b7ddc9; border-radius: 10px; padding: .6rem; margin-bottom: 1rem !important;
}

.wc-pay-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: #f6f9f7;
  font-family: system-ui, "Segoe UI", sans-serif;
}
.wc-pay-card {
  background: #fff; border: 1px solid #e0e8e4; border-radius: 20px;
  box-shadow: 0 18px 48px rgba(16,26,23,.09);
  padding: 40px 34px; max-width: 480px; width: 100%; text-align: center;
}
.wc-pay-mark {
  width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
  border: 2.5px solid; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 700;
}
.wc-pay-spin {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid currentColor; border-top-color: transparent;
  animation: wcSpin .8s linear infinite;
}
@keyframes wcSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wc-pay-spin { animation: none; } }
.wc-pay-card h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .6rem; }
.wc-pay-card p { font-size: .95rem; color: #475467; line-height: 1.6; margin: 0 0 .8rem; }
.wc-pay-detail { font-size: .85rem !important; color: #98a2b3 !important; }
.wc-pay-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.4rem; }

/* ── OTP step ─────────────────────────────────────────────────────────── */
.wc-su-lead { font-size: .9rem; color: #475467; line-height: 1.55; margin: 0 0 .3rem; }
.wc-su-code {
  font-family: Consolas, Monaco, monospace;
  font-size: 1.6rem !important; font-weight: 700; letter-spacing: .32em;
  text-align: center; padding: .7rem .5rem !important;
}
.wc-su-code::placeholder { letter-spacing: .32em; color: #d3d9de; }
.wc-su-link {
  background: none; border: none; cursor: pointer;
  font-size: .82rem; font-weight: 600; color: #0f6b57;
  padding: .35rem; margin: 0 auto; text-decoration: underline;
}
.wc-su-link:hover { color: #198754; }
.wc-su-hint { font-size: .78rem; color: #98a2b3; margin: .9rem 0 0; }