/* ==========================================================================
   assets/forms/customize/customize.css — "Customize Your Enquiry (Optional)"
   (the part is built by customize.js)

   One rule for every skin: the optional part is quieter than the form's main
   answers — a grey link, not a box; regular-weight words; a choice shows by its
   tint and its filled box or dot, never by bolder words; the only strong blue on
   a form stays its send button.

     .cz-bar     the enquiry bar on phones — its look is enquiry-bar.css (the part
                 carries the bar's class names); only the shared basics are here
     .cz-px      Live Proof popup and Contact Us — the fields are the forms' own
                 px-f inputs (tinted, hairline, r10)
     .cz-drawer  homepage audit form, desktop drawer
     .cz-wells   homepage audit form, phones
   ========================================================================== */

.cz{ box-sizing:border-box; min-width:0; text-align:left; }
.cz *, .cz *::before, .cz *::after{ box-sizing:border-box; }
.cz [hidden]{ display:none !important; }
.cz button{ -webkit-tap-highlight-color:transparent; }
.cz-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cz-bang{ display:none; }

/* ==========================================================================
   SHARED BY THE NON-BAR SKINS (px, drawer, wells)
   ========================================================================== */
.cz:not(.cz-bar){
  --cz-ink:#0E1E35; --cz-ink2:#3C4757; --cz-ink3:#5F6B80; --cz-ph:#8A94A3; --cz-act:#0760C6;
  --cz-bg:#F6F8FC; --cz-line:#DCE3EE; --cz-hover:#C5D1E3; --cz-chosen:#EAF1FB; --cz-red:#D93025;
  --cz-h:46px; --cz-r:10px; --cz-fs:15px; --cz-gap:12px; --cz-t:.3s; --cz-ease:cubic-bezier(.2, .7, .3, 1);
  font-family:inherit; color:var(--cz-ink2);
}
.cz:not(.cz-bar) button{ margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; letter-spacing:inherit; text-align:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; }
.cz:not(.cz-bar) button:focus-visible{ outline:2px solid var(--cz-act); outline-offset:2px; }
.cz:not(.cz-bar) p{ margin:0; }

/* the link: grey, regular weight, a thin "+" circle */
.cz:not(.cz-bar) .cz-more{ display:inline-flex; align-items:center; gap:9px; min-height:40px; padding:0 4px 0 0; border-radius:8px; color:var(--cz-ink2); font-size:14.5px; font-weight:500; line-height:1.2; }
.cz:not(.cz-bar) .cz-morei{ position:relative; flex:none; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 1.5px #B3BFD0; color:var(--cz-ink3); }
.cz:not(.cz-bar) .cz-morei svg{ width:12px; height:12px; transition:opacity .15s ease; }
.cz:not(.cz-bar) .cz-morei svg + svg{ position:absolute; opacity:0; }
.cz:not(.cz-bar) .cz-more[aria-expanded="true"] .cz-morei svg:first-child{ opacity:0; }
.cz:not(.cz-bar) .cz-more[aria-expanded="true"] .cz-morei svg + svg{ opacity:1; }
.cz:not(.cz-bar) .cz-opt{ font-style:normal; font-size:14px; font-weight:400; color:var(--cz-ink3); }
@media (hover:hover){ .cz:not(.cz-bar) .cz-more:hover .cz-moret{ color:var(--cz-ink); } }

/* folds grow open by their own height */
.cz:not(.cz-bar) .cz-fold{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--cz-t) var(--cz-ease); }
.cz:not(.cz-bar) .cz-fold.on{ grid-template-rows:1fr; }
.cz:not(.cz-bar) .cz-foldin{ min-height:0; overflow:hidden; margin:0 -4px; padding:0 4px; opacity:0; transition:opacity calc(var(--cz-t) * .8) ease; }
.cz:not(.cz-bar) .cz-fold.on > .cz-foldin{ opacity:1; }
.cz:not(.cz-bar) .cz-box{ display:grid; gap:var(--cz-gap); padding:8px 0 4px; }
.cz:not(.cz-bar) .cz-box > .cz-fold{ margin-top:calc(var(--cz-gap) * -1); }      /* closed, the budget takes no gap */
.cz:not(.cz-bar) .cz-fold > .cz-foldin > [data-k="budget"]{ padding-top:var(--cz-gap); }

/* answers: the form's own field look */
.cz:not(.cz-bar) .cz-about{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:var(--cz-gap); }
.cz:not(.cz-bar) .cz-w{ position:relative; display:block; margin:0; }
.cz:not(.cz-bar) .cz-input{
  display:block; width:100%; height:var(--cz-h); margin:0; padding:0 14px; border:1px solid var(--cz-line); border-radius:var(--cz-r);
  background:var(--cz-bg); color:var(--cz-ink); font:inherit; font-size:var(--cz-fs); outline:0; box-shadow:none;
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease; -webkit-appearance:none; appearance:none;
}
.cz:not(.cz-bar) textarea.cz-input{ height:auto; min-height:var(--cz-h); padding:12px 14px; line-height:1.45; resize:none; overflow:hidden; }
.cz:not(.cz-bar) .cz-input::placeholder{ color:var(--cz-ph); opacity:1; }
.cz:not(.cz-bar) .cz-input:hover{ border-color:var(--cz-hover); }
.cz:not(.cz-bar) .cz-input:focus{ background:#fff; border-color:var(--cz-act); box-shadow:0 0 0 3px rgba(7, 96, 198, .12); }
.cz:not(.cz-bar) [data-bad] .cz-input, .cz:not(.cz-bar) .cz-input.cf-bad{ border-color:var(--cz-red); }

/* headings: small grey words, "choose one" in grey caps */
.cz:not(.cz-bar) .cz-h{ display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:12.4px; font-weight:700; line-height:1.2; color:var(--cz-ink3); }
.cz:not(.cz-bar) .cz-one{ font-style:normal; font-size:9.6px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--cz-ph); }
.cz:not(.cz-bar) [data-bad] > .cz-h{ color:#B3261E; }

/* tick boxes: soft rows */
.cz:not(.cz-bar) .cz-list{ display:grid; gap:6px; }
.cz:not(.cz-bar) .cz-row{
  display:flex; align-items:center; gap:11px; width:100%; min-height:42px; padding:6px 12px; border-radius:var(--cz-r);
  background:var(--cz-bg); color:var(--cz-ink2); font-size:14.5px; font-weight:500; line-height:1.25; transition:background-color .18s ease;
}
.cz:not(.cz-bar) .cz-row[aria-pressed="true"]{ background:var(--cz-chosen); }
.cz:not(.cz-bar) .cz-tk{ flex:none; display:grid; place-items:center; width:18px; height:18px; border-radius:5px; background:#fff; box-shadow:inset 0 0 0 1.5px #A7B6CE; transition:background-color .18s ease, box-shadow .18s ease; }
.cz:not(.cz-bar) .cz-tk svg{ width:12px; height:12px; color:#fff; opacity:0; transform:scale(.5); transition:opacity .16s ease, transform .2s var(--cz-ease); }
.cz:not(.cz-bar) [aria-pressed="true"] .cz-tk{ background:var(--cz-act); box-shadow:none; }
.cz:not(.cz-bar) [aria-pressed="true"] .cz-tk svg{ opacity:1; transform:none; }

/* one-of choices: the budget and Phone Call / Google Meet */
.cz:not(.cz-bar) .cz-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
.cz:not(.cz-bar) .cz-bgrid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.cz:not(.cz-bar) .cz-rad{
  display:flex; align-items:center; gap:9px; min-width:0; min-height:42px; padding:6px 10px; border-radius:var(--cz-r);
  background:var(--cz-bg); color:var(--cz-ink2); font-size:14px; font-weight:500; line-height:1.2; transition:background-color .18s ease, box-shadow .18s ease;
}
.cz:not(.cz-bar) .cz-rad[aria-checked="true"]{ background:var(--cz-chosen); }
.cz:not(.cz-bar) .cz-rd{ flex:none; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px #A7B6CE; transition:box-shadow .18s ease; }
.cz:not(.cz-bar) [aria-checked="true"] .cz-rd{ box-shadow:inset 0 0 0 5.5px var(--cz-act); }
.cz:not(.cz-bar) .cz-mi{ flex:none; display:block; width:16px; height:16px; color:var(--cz-ink3); }
.cz:not(.cz-bar) .cz-mi svg{ display:block; width:100%; height:100%; }
.cz:not(.cz-bar) [data-bad] .cz-bud, .cz:not(.cz-bar) .cz-bgrid.cf-bad .cz-bud{ box-shadow:inset 0 0 0 1px var(--cz-red); }
@media (hover:hover){
  .cz:not(.cz-bar) .cz-row:hover, .cz:not(.cz-bar) .cz-rad:hover{ background:#EEF2F8; }
  .cz:not(.cz-bar) .cz-row[aria-pressed="true"]:hover, .cz:not(.cz-bar) .cz-rad[aria-checked="true"]:hover{ background:var(--cz-chosen); }
}

/* ==========================================================================
   .cz-px — Live Proof popup and Contact Us (inside their px-fs grid, full width)
   ========================================================================== */
.cz-px{ margin-top:2px; }
/* email | website, then the company across — on a phone, one under another. The website
   takes the wider share: its "https://www." plate (website.js) sits inside the box */
.cz.cz-px .cz-about{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.45fr); }   /* .cz.cz-px: outranks the shared auto-fit grid */
.cz.cz-px .cz-about > [data-k="company"]{ grid-column:1 / -1; }
/* the Live Proof popup is a narrow dialog: email, website and company one under another,
   so the website box keeps room for its plate and the whole "yourcompany.com" */
.pw-dlg .cz.cz-px .cz-about{ grid-template-columns:minmax(0, 1fr); }
/* Contact Us on a wide screen: the three in one row (from 1300px: narrower, the website
   box would leave its plate too little room for "yourcompany.com") */
@media (min-width:1300px){
  .px-form .cz-px .cz-about{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
  .px-form .cz-px .cz-about > [data-k="company"]{ grid-column:auto; }
}
@media (max-width:560px){
  .cz.cz-px .cz-about{ grid-template-columns:minmax(0, 1fr); }
  .cz-px .cz-rad .cz-mi{ display:none; }                        /* "Google Meet" keeps one line */
}

/* ==========================================================================
   HOMEPAGE (drawer and wells): the hero styles every button in its form as the
   blue action key ("#hx .hx-form button", assets/home/hero/keyline.css). These
   rules give the optional part's buttons their own look back, written strongly
   enough to outrank it — as service-picker.css does for its field.
   ========================================================================== */
html body #hx form#hxForm .cz button{ height:auto; flex:none; letter-spacing:0; white-space:normal; text-align:left; justify-content:flex-start; transition:background-color .18s ease, box-shadow .18s ease; }
html body #hx form#hxForm .cz .cz-more{ display:inline-flex; width:auto; gap:9px; padding:0 4px 0 0; border-radius:8px; background:none; color:var(--cz-ink2); font-size:14.5px; font-weight:500; white-space:nowrap; }
html body #hx form#hxForm .cz .cz-more:hover{ background:none; }
html body #hx form#hxForm .cz .cz-row{ display:flex; width:100%; gap:11px; padding:6px 12px; border-radius:var(--cz-r); background:var(--cz-bg); color:var(--cz-ink2); font-size:14.5px; font-weight:500; line-height:1.25; }
html body #hx form#hxForm .cz .cz-rad{ display:flex; width:auto; gap:9px; padding:6px 10px; border-radius:var(--cz-r); background:var(--cz-bg); color:var(--cz-ink2); font-size:14px; font-weight:500; line-height:1.2; }
html body #hx form#hxForm .cz :is(.cz-row, .cz-rad):hover{ background:var(--cz-bg); }
html body #hx form#hxForm .cz :is(.cz-row[aria-pressed="true"], .cz-rad[aria-checked="true"]),
html body #hx form#hxForm .cz :is(.cz-row[aria-pressed="true"], .cz-rad[aria-checked="true"]):hover{ background:var(--cz-chosen); }

/* ==========================================================================
   .cz-drawer — homepage audit form, desktop: a third row of the pale drawer, under
   the field and the button. Its folds open at once (no CSS motion): audit-form.js
   grows the field and the hero by the same amount in one motion. The answers are
   the drawer's own white hairline fields (r8). Written "html body #hx …" to
   outrank the drawer's input rules in assets/home/hero/keyline.css.
   ========================================================================== */
html body #hx form#hxForm .tr-tray.tr-has-more{ flex-wrap:wrap; align-items:flex-start; }
html body #hx form#hxForm .tr-tray > .cz-drawer{
  flex:0 0 100%; width:100%; margin:-2px 0 -4px;
  --cz-bg:#fff; --cz-line:#D7E2F3; --cz-hover:#C2D3EC; --cz-r:8px; --cz-h:48px; --cz-fs:15px; --cz-gap:8px;
}
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-more{ min-height:36px; padding-left:2px; font-size:14px; }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-fold{ transition:none; }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-foldin{ transition:opacity .25s ease .1s; }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-box{ padding:4px 0 6px; }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-about{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-input{
  width:100%; height:var(--cz-h); padding:0 14px; border:1px solid var(--cz-line); border-radius:var(--cz-r);
  background:#fff; color:#031D40; font-size:var(--cz-fs);
}
html body #hx form#hxForm .tr-tray > .cz-drawer textarea.cz-input{ height:auto; padding:13px 14px; }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-input:focus{ border-color:#0A66C2; box-shadow:none; }
html body #hx form#hxForm .tr-tray > .cz-drawer [data-bad] .cz-input{ border-color:var(--cz-red); }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-list{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
html body #hx form#hxForm .tr-tray > .cz-drawer :is(.cz-row, .cz-rad){ background:#fff; box-shadow:inset 0 0 0 1px var(--cz-line); font-size:13.5px; }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-row{ align-items:center; min-height:48px; padding:6px 10px; }
html body #hx form#hxForm .tr-tray > .cz-drawer :is(.cz-row[aria-pressed="true"], .cz-rad[aria-checked="true"]){ background:var(--cz-chosen); box-shadow:inset 0 0 0 1px #C9DAF2; }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-bgrid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-bud{ gap:8px; padding:6px 10px; font-size:13.5px; white-space:nowrap; }
html body #hx form#hxForm .tr-tray > .cz-drawer [data-bad] .cz-bud{ box-shadow:inset 0 0 0 1px var(--cz-red); }
html body #hx form#hxForm .tr-tray > .cz-drawer .cz-grid:not(.cz-bgrid){ grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:420px; }
@media (max-width:1060px){
  html body #hx form#hxForm .tr-tray > .cz-drawer .cz-list{ grid-template-columns:minmax(0, 1fr); }
  html body #hx form#hxForm .tr-tray > .cz-drawer .cz-bgrid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   .cz-wells — homepage audit form, phones: under "What are you looking for?",
   before the key; the answers are the form's soft wells, a size smaller than
   the main four (48px against 54px)
   ========================================================================== */
html body #hx form#hxForm > .cz-wells{
  grid-column:1 / -1; margin:6px 0 0; min-width:0;
  --cz-bg:#F2F5FB; --cz-line:transparent; --cz-hover:transparent; --cz-r:12px; --cz-h:48px; --cz-fs:16px; --cz-gap:8px;
}
html body #hx form#hxForm > .cz-wells .cz-more{ min-height:44px; padding-left:4px; }
html body #hx form#hxForm > .cz-wells .cz-fold{ transition:none; }
html body #hx form#hxForm > .cz-wells .cz-foldin{ transition:opacity .25s ease .1s; }
html body #hx form#hxForm > .cz-wells .cz-about{ grid-template-columns:minmax(0, 1fr); }
html body #hx form#hxForm > .cz-wells .cz-input{ border:0; background:var(--cz-bg); font-weight:500; }
html body #hx form#hxForm > .cz-wells .cz-input:focus{ background:var(--cz-bg); box-shadow:inset 0 0 0 1px rgba(7, 96, 198, .42); }
html body #hx form#hxForm > .cz-wells [data-bad] .cz-input{ background:#fff; box-shadow:inset 0 0 0 1.5px rgba(209, 67, 67, .92); }
html body #hx form#hxForm > .cz-wells :is(.cz-row, .cz-rad){ font-size:14.5px; }
html body #hx form#hxForm > .cz-wells .cz-mi{ display:none; }
html body #hx form#hxForm > .cz-wells .cz-bud{ font-size:13.5px; }

/* ==========================================================================
   PHONES (≤760px) — the opened part, light and small (owner, 2026-10-10: on a
   phone the opened part looked big and complex; desktop is unchanged)

   Same content and order, no panel, no cards, no lines:
     answers     each form's own field, one size under its main fields: 40px,
                 r10 (bar and homepage: pale #F2F5FB wells; popup and Contact
                 Us: tinted hairline inputs). Always one under another, full
                 width, 4px apart. Typed text 16px (no iOS zoom); placeholders a
                 step quieter than the main fields'
     tick boxes  plain rows: no resting tint, no edge, no line between them;
                 16px square box + 13.5px regular grey words
     one-of      Monthly Budget and Preferred Communication: plain round dots,
                 two a row (the budget one a row where the part is under 300px
                 wide, so no amount breaks over two lines); no call/Meet icons
     sizes       every choice is drawn 36px tall, 4px apart, and answers a 40px
                 touch (its ::before reaches into the gaps)
     chosen      the soft tint #EAF1FB behind that row + the filled box or dot;
                 the words never get bolder, nothing grows or moves
     headings    12.5px/600 grey; "choose one" 10px grey caps
     rhythm      4px inside a group, 12px between groups (a flex column, so the
                 closed budget fold's -12px cancels its gap)
     errors      fields: their own red edge; budget missing: the heading turns
                 red, the bar's red "!" shows, every budget dot ring turns red
   No hover tint on touch screens: a tapped row never looks chosen.
   Selectors start "html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm >
   .cz.cz-wells)" to outrank the bar's, the hero's and the px rules above.
   ========================================================================== */
@media (max-width:760px){

  /* ========================================================================
     COLOURS per form (custom properties: no specificity fight)
     ======================================================================== */
  html body .eb-dlg .cz.cz-bar{ --mh-red:#D14343; --mh-hred:#B42323; --mh-ph:#9AA5B6; }
  html body #hx form#hxForm > .cz-wells.cz{ --mh-red:#D93025; --mh-hred:#B3261E; --mh-ph:#9AA5B6; }
  html body .cz.cz-px{ --mh-red:#D93025; --mh-hred:#B3261E; --mh-ph:#A7B6CE; }   /* main: #A7AEB9 15px; this: the tick-ring grey, 14px */

  /* ========================================================================
     SHARED — one prefix for the three phone skins. :is() takes the specificity
     of its strongest argument (#hx form#hxForm …: two ids), so these rules
     outrank the bar's ".eb-dlg .eb-morebox …", the px ".cz:not(.cz-bar) …"
     and the homepage's "html body #hx form#hxForm .cz …" (hero buttons blue).
     The text fields are NOT styled here (each form keeps its own look below).
     ======================================================================== */

  /* ---- the part: a flex column, 12px between groups ---------------------- */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box{
    display:flex; flex-direction:column; gap:12px; margin:0; padding:0;
    border:0; border-radius:0; background:none; box-shadow:none;
    container:mhbox / inline-size;
  }
  /* the bar and the homepage draw a field's focus ring and red edge inside it, so the
     part needs no padding; the popup and Contact Us draw a 3px focus ring outside the
     field, and the fold clips above and below, so 3px there (":is(…).cz-px" keeps the
     shared prefix's two-id weight and adds a class) */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells).cz-px .cz-box{ padding:3px 0; }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box > *{ margin:0; }
  /* the budget fold: closed it takes no space and no gap; open, 12px above it */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box > .cz-fold{ margin-top:-12px; }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box > .cz-fold > .cz-foldin > [data-k="budget"]{ padding-top:12px; }

  /* ---- answers: one under another, 4px apart ------------------------------ */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-about{
    display:flex; flex-direction:column; gap:4px; grid-template-columns:none;
  }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-about > *{ flex:none; width:100%; min-width:0; margin:0; grid-column:auto; }

  /* ---- every choice (tick row and dot): plain, a tint only when chosen ---- */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box :is(.cz-row, .cz-rad){
    position:relative; display:flex; align-items:center; justify-content:flex-start;
    height:auto; min-height:40px; margin:0; border:0; border-radius:10px;
    background:transparent; box-shadow:none; outline-offset:-2px;   /* a keyboard focus ring inside: the folds clip outside */
    color:#3C4757; font-family:inherit; font-size:13.5px; font-weight:400; line-height:1.25; letter-spacing:0;
    text-align:left; text-transform:none; transition:background-color .18s ease;
  }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box :is(.cz-row, .cz-rad) .cz-n{ min-width:0; font-weight:400; color:#3C4757; }
  /* a tick row that must take two lines (popup, Contact Us at 360px) keeps no word alone.
     Only the style: the "text-wrap" shorthand would also reset the wrap mode, and an
     amount or "Google Meet" must never break (the budget goes one a row instead) */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-row .cz-n{ text-wrap-style:pretty; }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-rad .cz-n{ white-space:nowrap; text-wrap-mode:nowrap; }
  /* chosen: the soft tint; the words stay as they are */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box :is(.cz-row[aria-pressed="true"], .cz-rad[aria-checked="true"]),
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box :is(.cz-row[aria-pressed="true"], .cz-rad[aria-checked="true"]):hover{
    background:#EAF1FB; box-shadow:none; color:#3C4757; font-weight:400;
  }
  /* no hover tint, with a finger or a mouse: a row is plain or chosen, nothing in
     between (the homepage gives every row a hover tint, even on touch screens) */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box :is(.cz-row:not([aria-pressed="true"]), .cz-rad:not([aria-checked="true"])):hover{
    background:transparent; box-shadow:none;
  }

  /* ---- three tick boxes ----------------------------------------------------- */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-list{
    display:flex; flex-direction:column; gap:4px; grid-template-columns:none; margin:0;
  }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-row{
    gap:8px; width:100%; padding:6px 10px; line-height:17px;   /* one line: 40px (min-height); two lines (popup, Contact Us at 360px): 46px, the same air around the words */
  }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-tk{
    flex:none; display:grid; place-items:center; width:16px; height:16px; border-radius:4px;
    background:#fff; box-shadow:inset 0 0 0 1.5px #A7B6CE;
  }
  /* the tick fades in at its full size (the forms' own tick grows from half size: nothing grows) */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-tk svg{ width:11px; height:11px; color:#fff; transform:none; transition:opacity .16s ease; }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box [aria-pressed="true"] .cz-tk{
    background:#0760C6; box-shadow:inset 0 0 0 1.5px #0760C6;
  }

  /* ---- headings: small grey words, 4px above their choices ---------------- */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-h{
    display:flex; align-items:center; gap:8px; min-height:0; margin:0 0 4px; padding:0 0 0 10px;
    color:#5F6B80; font-size:12.5px; font-weight:600; line-height:15px; letter-spacing:0;
  }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-one{
    margin:0; font-style:normal; font-size:10px; font-weight:600; line-height:15px; letter-spacing:.08em; text-transform:uppercase; color:#8A94A3;
  }

  /* ---- budget and Phone Call / Google Meet: plain dots, two a row ---------- */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-grid{
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:4px; max-width:none; margin:0;
  }
  /* 10px in, as everything else, 7px to the words, 2px at the end: a part 330px or wider
     (the bar and the homepage at 390px) has halves of 163px or more, room to spare for the
     longest amount ("₹50,000 – ₹1 Lakh", 116.3px) */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-rad{
    gap:7px; width:auto; min-width:0; padding:3px 2px 3px 10px; white-space:nowrap;
  }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-rd{
    flex:none; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 1.5px #A7B6CE;
  }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box [aria-checked="true"] .cz-rd{ box-shadow:inset 0 0 0 5px #0760C6; }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-mi{ display:none; }
  /* a part under 330px (Contact Us and the popup at 390px): the two halves meet (the
     4px between them is never seen: only one choice is tinted) and the dot sits 6px
     from its words; the right-hand choice starts 8px in, so a chosen "₹50,000 – ₹1
     Lakh" has about the same room before its dot as after its words (8 / 7.7px) */
  @container mhbox (max-width:329.98px){
    html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-grid{ column-gap:0; }
    html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-rad{ gap:6px; }
    html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-grid > .cz-rad:nth-child(2n){ padding-left:8px; }
  }
  /* a narrow part: the budget one a row. Two a row (halves meeting, as above) needs a
     half of 148.3px: right 8 in + 16 dot + 6 + 116.3 ("₹50,000 – ₹1 Lakh") + 2 = 148.3,
     left 10 + 16 + 6 + 113.4 ("₹1 Lakh – ₹2 Lakh") + 2 = 147.4; so a part of 296.7px,
     plus about 3px to spare for font differences: one a row below 300px (the popup under
     374px, Contact Us under 382px, the bar under 340px, the homepage under 328px) */
  @container mhbox (max-width:299.98px){
    html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-bgrid{ grid-template-columns:minmax(0, 1fr); }
    html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-bgrid > .cz-rad:nth-child(2n){ padding-left:10px; }
  }
  /* no container queries (Safari under 16): the same steps by screen width. The part is
     the screen less 40px (bar), 74px (popup), 82px (Contact Us) or, on the homepage, 48px
     (390px and wider), 44px (360–389px), 28px (under 360px).
     ":is(…).cz-px" keeps the shared prefix's two-id weight but matches the px skin only;
     ".px-form" is Contact Us, ".pw-dlg" the popup */
  @supports not (container-type:inline-size){
    @media (max-width:411.98px){
      html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells).cz-px .cz-box .cz-grid{ column-gap:0; }
      html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells).cz-px .cz-box .cz-rad{ gap:6px; }
      html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells).cz-px .cz-box .cz-grid > .cz-rad:nth-child(2n){ padding-left:8px; }
    }
    @media (max-width:381.98px){
      html body .px-form :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells).cz-px .cz-box .cz-bgrid{ grid-template-columns:minmax(0, 1fr); }
      html body .px-form :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells).cz-px .cz-box .cz-bgrid > .cz-rad:nth-child(2n){ padding-left:10px; }
    }
    @media (max-width:373.98px){
      html body .pw-dlg :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells).cz-px .cz-box .cz-bgrid{ grid-template-columns:minmax(0, 1fr); }
      html body .pw-dlg :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells).cz-px .cz-box .cz-bgrid > .cz-rad:nth-child(2n){ padding-left:10px; }
    }
    @media (max-width:377.98px){
      html body :is(.eb-dlg .cz.cz-bar, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-grid{ column-gap:0; }
      html body :is(.eb-dlg .cz.cz-bar, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-rad{ gap:6px; }
      html body :is(.eb-dlg .cz.cz-bar, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-grid > .cz-rad:nth-child(2n){ padding-left:8px; }
    }
    @media (max-width:327.98px){
      html body :is(.eb-dlg .cz.cz-bar, #hx form#hxForm > .cz.cz-wells).cz-wells .cz-box .cz-bgrid{ grid-template-columns:minmax(0, 1fr); }
      html body :is(.eb-dlg .cz.cz-bar, #hx form#hxForm > .cz.cz-wells).cz-wells .cz-box .cz-bgrid > .cz-rad:nth-child(2n){ padding-left:10px; }
    }
    @media (max-width:339.98px){
      html body :is(.eb-dlg .cz.cz-bar, #hx form#hxForm > .cz.cz-wells).cz-bar .cz-box .cz-bgrid{ grid-template-columns:minmax(0, 1fr); }
      html body :is(.eb-dlg .cz.cz-bar, #hx form#hxForm > .cz.cz-wells).cz-bar .cz-box .cz-bgrid > .cz-rad:nth-child(2n){ padding-left:10px; }
    }
  }

  /* ---- budget missing: red heading (+ the bar's "!"), red dot rings ------- */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box [data-bad] > .cz-h{ color:var(--mh-hred, #B3261E); }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box [data-bad] > .cz-h > .cz-bang{
    width:15px; height:15px; font-size:10.5px; line-height:15px; margin:0;
  }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box [data-bad] .cz-bud,
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-bgrid.cf-bad .cz-bud{ box-shadow:none; }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box [data-bad] .cz-bud .cz-rd,
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-bgrid.cf-bad .cz-bud .cz-rd{
    box-shadow:inset 0 0 0 1.5px var(--mh-red, #D93025);
  }

  /* ========================================================================
     TEXT FIELDS — each form's own look, one size down (40px)
     ======================================================================== */

  /* BAR — the label (.eb-w) is the pale well, the input inside it is bare */
  html body .eb-dlg .cz.cz-bar .cz-box .cz-w{ gap:6px; min-height:40px; padding:0 10px; border-radius:10px; }
  html body .eb-dlg .cz.cz-bar .cz-box .cz-input{
    height:40px; padding:0; font-size:16px; line-height:1.3; text-overflow:ellipsis;
  }
  html body .eb-dlg .cz.cz-bar .cz-box textarea.cz-input{ height:40px; min-height:40px; padding:9px 0; line-height:22px; text-overflow:clip; }
  html body .eb-dlg .cz.cz-bar .cz-box .cz-input::placeholder{ color:var(--mh-ph); font-size:15px; font-weight:400; opacity:1; }
  html body .eb-dlg .cz.cz-bar .cz-box .cz-w > .cz-bang{ width:18px; height:18px; font-size:12px; line-height:18px; }
  html body .eb-dlg .cz.cz-bar .cz-box .cz-note > .cz-bang{ margin-top:11px; }

  /* HOMEPAGE wells — the input is the pale well (outranks "html body #hx form#hxForm > .cz-wells .cz-input") */
  html body #hx form#hxForm > .cz-wells.cz .cz-box .cz-input{
    height:40px; padding:0 10px; border-radius:10px; font-size:16px; line-height:1.3; text-overflow:ellipsis;
  }
  html body #hx form#hxForm > .cz-wells.cz .cz-box textarea.cz-input{ height:40px; min-height:40px; padding:9px 10px; line-height:22px; text-overflow:clip; }
  html body #hx form#hxForm > .cz-wells.cz .cz-box .cz-input::placeholder{ color:var(--mh-ph); font-size:15px; font-weight:400; opacity:1; }

  /* POPUP and CONTACT US — their tinted hairline inputs (1px edge + 9px = 10px in) */
  html body .cz.cz-px .cz-box .cz-input{
    height:40px; padding:0 9px; border-radius:10px; font-size:16px; line-height:1.3; text-overflow:ellipsis;
  }
  html body .cz.cz-px .cz-box textarea.cz-input{ height:40px; min-height:40px; padding:8px 9px; line-height:22px; text-overflow:clip; }
  /* the main fields' placeholder here is already 15px #A7AEB9: one step under it */
  html body .cz.cz-px .cz-box .cz-input::placeholder{ color:var(--mh-ph); font-size:14px; font-weight:400; opacity:1; }

  /* ---- last polish ----------------------------------------------------------
     choices are drawn 36px tall, 4px apart, and each still answers a 40px touch: its
     ::before reaches 2px into the gap above and below (half of the 4px each side) */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box :is(.cz-row, .cz-rad){ min-height:36px; }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box :is(.cz-row, .cz-rad)::before{ content:""; position:absolute; left:0; right:0; top:-2px; bottom:-2px; }
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-row{ padding-top:4px; padding-bottom:4px; gap:7px; }
  @container mhbox (max-width:329.98px){
    html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box .cz-row{ gap:6px; }   /* words start where the dots' words start */
  }
  /* one keyboard focus ring in all four forms: the site's blue, inside the choice */
  html body :is(.eb-dlg .cz.cz-bar, .cz.cz-px, #hx form#hxForm > .cz.cz-wells) .cz-box :is(.cz-row, .cz-rad):focus-visible{ outline:2px solid #0760C6; outline-offset:-2px; }
  /* homepage: the "Get my audit" key's halo keeps its 7px under the message well */
  html body #hx form#hxForm > .cz-wells.cz .cz-box{ padding-bottom:4px; }
}

@media (prefers-reduced-motion:reduce){
  .cz *, .cz *::before, .cz *::after{ transition:none !important; }
}