/* =========================================================================
   Contact page redesign (contact2.html → /contact/). Loaded after gable.css + home2.css, only on this page.
   Wrapper: .gbl.gbl-home2.ct (PayHOA blue accent, home2 section rhythm). Prefix: ct-.
   The form is Gravity Forms form 3 as WordPress renders it (gravity-theme markup). Every GF rule here is scoped under
   .gbl.ct .ct-gf so it outranks GF's theme CSS and the site-wide Type-scale block (".fl-page .gform_wrapper.gravity-theme
   input:is(…)" = 0,4,1) without touching any other form on the site.
   ========================================================================= */

.ct { --ct-err: #be1238; --ct-err-50: #fdf0f3; --ct-ok: #0a725a; --ct-head: 96px; }
/* ship: page 19's layout becomes one BB row holding [contact_page] (docs/contact-redesign.md "Ship plan"). BB's cached
   node CSS can be stale (the homepage's was: its column floated shrink-to-fit), so the row, column and module spacing is
   pinned here rather than trusted to BB. Nothing matches locally, where there is no BB row. */
body.page-id-19 .fl-builder-content-primary .fl-col { width: 100%; }
body.page-id-19 .fl-builder-content-primary > .fl-row > .fl-row-content-wrap { padding: 0; }
body.page-id-19 .fl-builder-content-primary .fl-module-html > .fl-module-content { margin: 0; }
/* keyboard focus never lands under the sticky site header (2.4.11) */
.ct :is(a, button, input, select, textarea, [tabindex]) { scroll-margin-top: calc(var(--ct-head) + 16px); scroll-margin-bottom: 24px; }

/* ---------- hero: the light feature/solutions hero, with the topic picker where the scene would be ---------- */
.ct-hero .hx-hero-card { color: var(--ink); background: linear-gradient(160deg, #f5f9ff 0%, var(--pb-50) 45%, var(--pb-100) 100%); box-shadow: inset 0 0 0 1px var(--pb-100); }
.ct-hero .hx-hero-glow { background: radial-gradient(42% 60% at 82% 8%, rgba(42, 107, 230, .16), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(255, 255, 255, .9), transparent 70%); }
.ct-hero .hx-hero-glow::after { background-image: radial-gradient(rgba(34, 86, 211, .16) 1px, transparent 1px); }
/* three areas: the copy's top (eyebrow, H1, sub) and the rest (facts, proof) on the left, the picker on the right;
   phones read top → picker → rest, so the picker is on the first screen */
.ct-hero .hx-hero-grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-areas: "top stage" "more stage"; grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 0; min-height: 0; align-items: start; }
.ct-hero .hx-hero-copy.ct-hero-top { grid-area: top; padding: 72px 0 0; align-self: end; }
.ct-hero-more { grid-area: more; padding-bottom: 64px; }
/* the H1 scale of the other light heroes (features2.css, solutions2.css) */
.gbl.ct .ct-hero .hx-h1 { color: var(--ink); margin-top: 22px; font-size: clamp(38px, 3.4vw, 50px); }
.ct-hero .hx-h1 span { color: var(--pb-600); }
.ct-hero .hx-hero-sub { color: var(--body); }
/* the shared proof row (tools/partials.mjs @proof light; home2.css .hx-rate.is-light) */
.ct-hero .hx-rate { margin-top: 32px; }

.ct-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px 5px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--pb-100); color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.2; }
.ct-ico { width: 18px; height: 18px; fill: currentColor; flex: none; }
.ct-eyebrow .ct-ico { color: var(--pb-600); }

.ct-facts { display: grid; gap: 14px; margin-top: 28px; }
.ct-facts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 14px; }
.ct-facts .ct-ico { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: #fff; color: var(--pb-600); box-shadow: 0 0 0 1px var(--pb-100); }
.ct-facts b { display: block; font-size: 16px; line-height: 1.35; color: var(--ink); }
.ct-facts small { display: block; font-size: 14px; line-height: 1.45; color: var(--body); }
.ct-facts small[hidden] { display: none; }
.ct-today { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 10px 16px 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--pb-100); font-size: 15px; line-height: 1.4; color: var(--ink); }
.ct-today .ct-ico { color: var(--amber); width: 20px; height: 20px; }
.ct-today[hidden] { display: none; }

/* topic picker */
.ct-hero-stage { grid-area: stage; align-self: center; padding: 56px clamp(40px, 4vw, 64px) 56px 0; min-width: 0; }
.ct-pick { max-width: 540px; margin-left: auto; background: #fff; border-radius: 28px; padding: 28px; box-shadow: 0 0 0 1px var(--pb-100), 0 40px 80px -40px rgba(24, 50, 140, .45); }
.ct-pick-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 4px 4px 22px; }
.ct-faces { display: inline-flex; grid-row: span 2; }
.ct-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; background: var(--pb-50); box-shadow: 0 2px 6px -2px rgba(24, 50, 140, .35); }
.ct-faces img + img { margin-left: -12px; }
.ct-faces.is-sm img { width: 36px; height: 36px; border-width: 2px; }
.ct-faces.is-sm img + img { margin-left: -10px; }
.ct-pick-hi { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--pb-700); }
.ct-wave { width: 20px; height: 20px; fill: currentColor; transform-origin: 70% 80%; }
.gbl-js .ct-pick.is-in .ct-wave, .gbl-js .ct-pick .ct-wave { animation: ct-wave 1.6s var(--ease) .6s 1 both; }
@keyframes ct-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-8deg); } }
.gbl .ct-pick-title { font-size: 24px; line-height: 1.3; }
.ct-pick-list { display: grid; gap: 10px; }
.gbl a.ct-pick-opt { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; align-items: start; gap: 16px; min-height: 88px; padding: 16px 20px 16px 16px; border: 1px solid var(--line); border-radius: 20px; background: #fff; color: var(--ink); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s; }
.gbl a.ct-pick-opt:hover { transform: translateY(-2px); border-color: var(--pb-200); box-shadow: 0 22px 44px -30px rgba(24, 50, 140, .5); color: var(--ink); }
.gbl a.ct-pick-opt.is-on { border-color: var(--pb-600); background: var(--pb-50); box-shadow: inset 0 0 0 1px var(--pb-600); }
.ct-pick-ico, .ct-topic-ico, .ct-link-ico { display: grid; place-items: center; flex: none; border-radius: 14px; background: var(--pb-50); color: var(--pb-700); }
.ct-pick-ico { width: 52px; height: 52px; }
.ct-pick-ico svg { width: 26px; height: 26px; fill: currentColor; }
.ct-pick-ico.is-home, .ct-topic-ico.is-home, .ct-link-ico.is-green { background: var(--green-50); color: #0a725a; }
.ct-pick-txt { padding-top: 3px; }
.ct-pick-txt b { display: block; font-size: 18px; line-height: 1.3; }
.ct-pick-txt small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--muted); }
/* icon tile and arrow sit on the title's line, not the card's middle (Dima: controls align to the first line), so
   one- and two-line descriptions keep them in the same place. Arrow top = text padding + (title line − arrow) / 2 */
.ct-pick-arr { width: 20px; height: 20px; margin-top: calc(3px + (18px * 1.3 - 20px) / 2); fill: var(--pb-700); transition: transform .2s var(--ease); }
.gbl a.ct-pick-opt:hover .ct-pick-arr { transform: translateX(3px); }
/* the picker's options arrive one after another */
.gbl-js .ct-pick-list li { opacity: 0; transform: translateY(12px); animation: ct-rise .6s var(--ease) both; }
.gbl-js .ct-pick-list li:nth-child(1) { animation-delay: .15s; }
.gbl-js .ct-pick-list li:nth-child(2) { animation-delay: .25s; }
.gbl-js .ct-pick-list li:nth-child(3) { animation-delay: .35s; }
@keyframes ct-rise { to { opacity: 1; transform: none; } }

/* ---------- the desk: answers for the topic (left) + the form (right) ---------- */
.gbl-home2 .ct-desk-sec { padding-top: 88px; scroll-margin-top: var(--ct-head); }
.ct-anchor { position: absolute; }
.ct-desk-sec { position: relative; }
.ct-desk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; max-width: 1200px; margin: 0 auto; align-items: start; }
/* the answers stay beside the form while it's filled in, when they fit the screen (contact2.js sets is-stuck) */
.ct-side.is-stuck { position: sticky; top: var(--ct-head); }
.ct-panel { padding: 36px; border-radius: 28px; background: linear-gradient(170deg, #f7faff 0%, var(--pb-50) 100%); box-shadow: inset 0 0 0 1px var(--pb-100); }
.ct-panel[hidden] { display: none; }
.gbl-js .ct-panel.is-new { animation: ct-in .45s var(--ease) both; }
@keyframes ct-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ct-panel-tag { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pb-700); }
.ct-panel-tag svg { width: 16px; height: 16px; fill: currentColor; }
.ct-panel-tag.is-home { color: #0a725a; }
.gbl .ct-panel-h { font-size: 28px; line-height: 1.25; outline: none; }
.ct-panel-lead { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--body); }
.ct-panel-lead b { color: var(--ink); }
.gbl a.ct-panel-btn { margin-top: 20px; min-height: 52px; }
.ct-panel-btn svg { width: 20px; height: 20px; fill: currentColor; }
.ct-panel-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--body); }
.ct-note-ico { width: 18px; height: 18px; margin-top: 1px; fill: var(--pb-600); flex: none; }
.ct-who { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.ct-who .ct-faces { grid-row: auto; flex: none; }
.ct-who p { font-size: 14px; line-height: 1.45; color: var(--body); }

.ct-links { display: grid; gap: 10px; margin-top: 22px; }
.gbl .ct-links a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; align-items: start; gap: 14px; padding: 14px 16px 14px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--pb-100); color: var(--ink); transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.gbl .ct-links a:hover { transform: translateY(-2px); border-color: var(--pb-200); box-shadow: 0 18px 36px -28px rgba(24, 50, 140, .5); color: var(--ink); }
.ct-link-ico { width: 44px; height: 44px; border-radius: 12px; }
.ct-link-ico svg { width: 22px; height: 22px; fill: currentColor; }
.ct-links b { display: block; font-size: 16px; line-height: 1.35; }
.ct-links small { display: block; margin-top: 1px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.ct-link-arr { width: 18px; height: 18px; fill: var(--pb-700); transition: transform .2s var(--ease); }
/* icon tile and arrow sit at the top of the text (tile top = title top, arrow centred on the title's first line), so
   cards whose description wraps don't float them in the middle */
.ct-links .ct-link-arr { margin-top: 2px; }
.gbl .ct-links a:hover .ct-link-arr { transform: translateX(3px); }

.ct-assoc { margin-top: 20px; padding: 20px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.ct-assoc-h { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.ct-assoc-h .ct-ico { color: var(--amber); }
.ct-assoc > p:not(.ct-assoc-h) { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--body); }
.ct-assoc ul { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.ct-assoc li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--body); }
.ct-assoc li .ct-ico { margin-top: 2px; color: var(--pb-600); }

/* the form card */
.ct-card { padding: 40px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(28, 39, 55, .04), 0 30px 60px -40px rgba(24, 50, 140, .35); scroll-margin-top: var(--ct-head); }
.gbl .ct-card-h { font-size: 28px; line-height: 1.25; }
.ct-card-sub { margin-top: 6px; font-size: 15px; color: var(--muted); }
.ct .ct-req { font-weight: 600; color: var(--ct-err); }
.ct-legal { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.gbl .ct-legal a { color: var(--pb-700); font-weight: 600; }
.gbl .ct-legal a:hover { color: var(--pb-900); }

/* topic: three radio cards (not submitted; they set GF field 8) */
.ct-topic { margin: 28px 0 0; padding: 0; border: 0; min-width: 0; }
.ct-topic[hidden] { display: none; }
.ct-topic legend { padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 600; color: var(--ink); }
.ct-topic-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ct-topic-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #8796a9; border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.ct-topic-opt:hover { border-color: var(--pb-600); }
.ct-topic-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* radio: 16px from the card's top and right edges (15px + the 1px border), 12px on phones */
.ct-topic-opt::after { content: ""; position: absolute; top: 15px; right: 15px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #8796a9; background: #fff; transition: border-color .2s, background .2s, box-shadow .2s; }
/* the checked card: contact2.js keeps is-on in step with the radio, so this needs no :has() (Safari < 15.4, Firefox
   < 121). Don't list a :has() selector next to these: a browser that can't parse one drops the whole rule */
.ct-topic-opt.is-on { border-color: var(--pb-600); background: var(--pb-50); box-shadow: inset 0 0 0 1px var(--pb-600); }
.ct-topic-opt.is-on .ct-topic-ico { background: #fff; }
.ct-topic-opt.is-on .ct-topic-ico.is-home { background: #fff; }
.ct-topic-opt.is-on::after { border-color: var(--pb-600); background: var(--pb-600); box-shadow: inset 0 0 0 4px #fff; }
/* focus: every browser rings the focused card; where :has() works, the second rule limits that to keyboard focus
   (without :has() it is dropped, and a click shows the ring too) */
.ct-topic-opt:focus-within { outline: 2px solid var(--pb-600); outline-offset: 2px; }
.ct-topic-opt:focus-within:not(:has(input:focus-visible)) { outline: none; }
.ct-topic.is-err .ct-topic-opt { border-color: var(--ct-err); }
.ct-topic-ico { width: 36px; height: 36px; border-radius: 10px; }
.ct-topic-ico svg { width: 20px; height: 20px; fill: currentColor; }
.ct-topic-txt b { display: block; font-size: 15px; line-height: 1.3; color: var(--ink); padding-right: 22px; }
.ct-topic-txt small { display: block; font-size: 13px; color: var(--muted); }
.ct-err { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--ct-err); }
.ct-err[hidden] { display: none; }
.ct-err::before, .gbl.ct .ct-gf .gfield_validation_message::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Gravity Forms form 3, restyled ---------- */
.gbl.ct .ct-gf { margin-top: 24px; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme { margin: 0; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gform_fields { row-gap: 20px; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield { margin: 0; padding: 0; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield_label,
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield--type-radio legend.gfield_label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 8px; padding: 0; font-size: 15px; line-height: 1.4; font-weight: 600; color: var(--ink); }
/* required fields get a "*" (the card explains it); GF's "(Required)" text stays for screen readers only, and the
   inputs keep aria-required. The few optional fields keep their "Optional" tag */
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield_label > .gfield_required { display: inline; margin-left: -6px; font-size: 15px; font-weight: 600; color: var(--ct-err); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield_label > .gfield_required::before { content: "*" / ""; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield_required_text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield:not(.gfield_contains_required):not(.gform_hidden) > .gfield_label::after { content: "Optional"; font-size: 13px; font-weight: 400; color: var(--muted); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme input:is([type=text], [type=email], [type=tel]),
.gbl.ct .ct-gf .gform_wrapper.gravity-theme select,
.gbl.ct .ct-gf .gform_wrapper.gravity-theme textarea { width: 100%; min-height: 52px; margin: 0; padding: 13px 16px; border: 1px solid #8796a9; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme textarea { min-height: 148px; height: 148px; resize: vertical; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme :is(input, select, textarea):hover { border-color: var(--muted); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme :is(input, select, textarea):focus { border-color: var(--pb-600); box-shadow: 0 0 0 4px rgba(42, 107, 230, .16); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme ::placeholder { color: #697891; opacity: 1; }
.gbl.ct .ct-gf .ct-hint { display: block; margin: -2px 0 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
/* field 8 (department) is answered by the topic cards once contact2.js runs */
.gbl.ct.ct-has-topic .ct-gf #field_3_8 { display: none; }
/* demo question (field 9, shown for Sales by GF's own conditional logic): two pill choices */
.gbl.ct .ct-gf .gfield--type-radio .gfield_radio { display: flex; flex-wrap: wrap; gap: 10px; }
.gbl.ct .ct-gf .gfield--type-radio .gchoice { position: relative; display: flex; align-items: center; margin: 0; }
.gbl.ct .ct-gf .gfield--type-radio .gchoice input { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin: -10px 0 0; accent-color: var(--pb-600); cursor: pointer; }
.gbl.ct .ct-gf .gfield--type-radio .gchoice label { display: inline-flex; align-items: center; min-height: 48px; margin: 0; padding: 0 20px 0 46px; max-width: none; border: 1px solid #8796a9; border-radius: 999px; background: #fff; font-size: 16px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s; }
.gbl.ct .ct-gf .gfield--type-radio .gchoice:hover label { border-color: var(--pb-600); }
.gbl.ct .ct-gf .gfield--type-radio .gchoice input:checked + label { border-color: var(--pb-600); background: var(--pb-50); box-shadow: inset 0 0 0 1px var(--pb-600); }
/* the pill shows the keyboard focus, not the dot inside it (the site-wide GF focus rule is !important) */
.fl-page .gbl.ct .ct-gf .gfield--type-radio .gchoice input:focus-visible { outline: none !important; }
.gbl.ct .ct-gf .gfield--type-radio .gchoice input:focus-visible + label { outline: 2px solid var(--pb-600); outline-offset: 2px; }
/* SMS consent: checkbox on the first line of its long label, the legal text unchanged */
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield--type-consent { padding: 14px 16px; border-radius: 14px; background: var(--bg); }
.gbl.ct .ct-gf .gfield--type-consent .ginput_container_consent { display: flex; align-items: flex-start; gap: 12px; }
.gbl.ct .ct-gf .gfield--type-consent input[type=checkbox] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pb-600); cursor: pointer; }
.gbl.ct .ct-gf .gfield--type-consent .gfield_consent_label { margin: 0; font-size: 13px; line-height: 1.55; font-weight: 400; color: var(--body); cursor: pointer; }
.gbl.ct .ct-gf .gfield--type-consent .gfield_consent_label a { color: var(--pb-700); font-weight: 600; }
.gbl.ct .ct-gf .gfield--type-consent .gfield_consent_label a:hover { color: var(--pb-900); }
.gbl.ct .ct-gf .ct-consent-h { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.gbl.ct .ct-gf .ct-consent-h small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--muted); }
/* invisible reCAPTCHA: the field stays in the page (Google's token needs it) but takes no room. Google's badge is
   position: fixed, which an ancestor's clip doesn't reliably hide, so it gets the visibility: hidden Google's FAQ allows
   when the page carries its reCAPTCHA text (under the card) */
.gbl.ct .ct-gf .gfield--type-captcha { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; padding: 0; }
.gbl.ct .grecaptcha-badge { visibility: hidden !important; }
/* the button */
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gform_footer { margin: 28px 0 0; padding: 0; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gform_footer button.gform_button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 0; padding: 0 28px; border: 0; border-radius: 12px; background: var(--pb-600); color: #fff; font: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; box-shadow: 0 10px 24px -12px rgba(34, 86, 211, .6); cursor: pointer; transition: background .2s, transform .2s var(--ease); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gform_footer button.gform_button:hover { background: var(--pb-800); transform: translateY(-1px); }
.gbl.ct .ct-gf .gform_footer button.gform_button svg { width: 20px; height: 20px; fill: currentColor; transition: transform .2s var(--ease); }
.gbl.ct .ct-gf .gform_footer button.gform_button:hover svg { transform: translateX(3px); }
.gbl.ct .ct-gf .gform_footer button.gform_button.is-sending { pointer-events: none; opacity: .85; }
.gbl.ct .ct-gf .gform_footer button.gform_button.is-sending svg { animation: ct-spin 1s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
.gbl.ct .ct-gf .gform_ajax_spinner, .gbl.ct .ct-gf .gform-loader { display: none !important; }

/* errors: GF's own markup (server) and contact2.js's (on blur / before sending) share these classes */
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield_error :is(input, select, textarea) { border-color: var(--ct-err); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield_error :is(input, select, textarea):focus { box-shadow: 0 0 0 4px rgba(190, 18, 56, .14); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield_error .gfield_label { color: var(--ink); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield_error { background: none; border: 0; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gfield_validation_message { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0 0; padding: 0; border: 0; background: none; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--ct-err); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gform_validation_errors { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 24px; padding: 16px 18px; border: 1px solid #f3b8c6; border-radius: 14px; background: var(--ct-err-50); box-shadow: none; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gform_validation_errors > h2 { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--ct-err); }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gform_validation_errors .gform-icon { display: none; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gform_validation_errors ol { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
.gbl.ct .ct-gf .gform_wrapper.gravity-theme .gform_validation_errors a { color: var(--ct-err); font-weight: 600; }

/* the summary contact2.js shows when sending is held back (above the topic cards; GF's own server summary is above) */
.ct-summary { margin: 24px 0 0; padding: 16px 18px; border: 1px solid #f3b8c6; border-radius: 14px; background: var(--ct-err-50); outline: none; }
.ct-summary:focus-visible { box-shadow: 0 0 0 3px rgba(190, 18, 56, .25); }
.ct-summary-h { font-size: 15px; line-height: 1.5; font-weight: 600; color: var(--ct-err); }
.ct-summary ul { display: grid; gap: 4px; margin-top: 6px; }
.ct-summary li { display: flex; gap: 8px; font-size: 14px; line-height: 1.5; }
.ct-summary li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--ct-err); }
.gbl .ct-summary a { color: var(--ct-err); font-weight: 600; }
.gbl .ct-summary a:hover { color: #8f0d2a; }

/* ---------- sent: GF's confirmation, with what happens next ---------- */
.ct-sent { text-align: left; }
.ct-sent-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--green-50); color: var(--ct-ok); }
.ct-sent-mark svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 0; }
.gbl-js .ct-sent-mark svg { animation: ct-draw .7s var(--ease) .15s both; }
@keyframes ct-draw { from { stroke-dashoffset: 260; } }
.gbl .ct-sent-h { margin-top: 20px; font-size: 28px; line-height: 1.25; outline: none; }
.ct-sent .gform_confirmation_message { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--body); }
.ct-sent .gform_confirmation_message p + p { margin-top: 8px; }
.gbl .ct-sent .gform_confirmation_message a { color: var(--pb-700); font-weight: 600; }
.ct-steps { display: grid; gap: 14px; margin-top: 26px; padding: 22px; border-radius: 18px; background: var(--bg); counter-reset: ct; }
.ct-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.5; color: var(--body); }
.ct-steps li::before { counter-increment: ct; content: counter(ct); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--pb-100); font-size: 14px; font-weight: 600; color: var(--pb-700); }
.ct-steps b { color: var(--ink); }
.ct-sent-more { margin-top: 24px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ct-sent .ct-links { margin-top: 12px; }
.ct-sent .ct-links a { border-color: var(--line); }
.gbl .ct-links.is-plain a { grid-template-columns: minmax(0, 1fr) 18px; }
.gbl .ct-again { display: inline; min-height: 24px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--pb-700); cursor: pointer; }
.gbl .ct-again:hover { color: var(--pb-900); }
.gbl .ct-again:focus-visible { outline: 2px solid var(--pb-600); outline-offset: 2px; border-radius: 4px; }
.ct-preview { display: inline-block; margin-bottom: 16px; padding: 4px 10px; border-radius: 999px; background: var(--amber-50); color: #8a5300; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- FAQ: closed answers keep their links out of the tab order (as on the feature pages) ---------- */
.ct .gbl-faq-a { visibility: hidden; transition: grid-template-rows .35s var(--ease), margin-top .35s var(--ease), visibility 0s linear .35s; }
.ct .gbl-faq-item.is-open .gbl-faq-a { visibility: visible; transition-delay: 0s; }
.gbl.ct .gbl-faq-a a { color: var(--pb-700); font-weight: 600; }
.gbl.ct .gbl-faq-a a:hover { color: var(--pb-900); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .ct-hero .hx-hero-grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: 40px; }
  .ct-pick { padding: 24px; }
}
@media (max-width: 1100px) {
  .ct-hero .hx-hero-grid { grid-template-columns: 1fr; grid-template-areas: "top" "stage" "more"; grid-template-rows: auto; }
  .ct-hero .hx-hero-copy.ct-hero-top { padding: 56px 0 32px; }
  .ct-hero-more { display: flex; flex-direction: column; align-items: center; padding-bottom: 48px; }
  .ct-hero .hx-rate { justify-content: center; text-align: center; }
  .ct-facts { margin-left: auto; margin-right: auto; text-align: left; max-width: 460px; }
  .ct-today { margin-left: auto; margin-right: auto; }
  .ct-hero-stage { padding: 0 0 8px; }
  .ct-pick { margin: 0 auto; max-width: 640px; }
  .ct-desk { grid-template-columns: 1fr; max-width: 720px; }
  .ct-side.is-stuck { position: static; }
}
@media (max-width: 768px) {
  .ct { --ct-head: 76px; }
  .ct-hero .hx-hero-copy.ct-hero-top { padding: 36px 4px 24px; }
  .ct-hero-more { padding-bottom: 32px; }
  .gbl.ct .ct-hero .hx-h1 { font-size: 34px; }
  .ct-facts { gap: 12px; }
  .ct-hero-stage { padding-bottom: 0; }
  .ct-pick { padding: 20px 16px 18px; border-radius: 24px; }
  .ct-pick-head { padding: 0 4px 16px; }
  .gbl .ct-pick-title { font-size: 21px; }
  .gbl a.ct-pick-opt { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 12px; min-height: 76px; padding: 14px 14px 14px 12px; border-radius: 16px; }
  .ct-pick-ico { width: 44px; height: 44px; border-radius: 12px; }
  .ct-pick-ico svg { width: 22px; height: 22px; }
  .ct-pick-txt { padding-top: 2px; }
  .ct-pick-arr { margin-top: calc(2px + (16px * 1.3 - 18px) / 2); }
  .ct-pick-txt b { font-size: 16px; }
  .ct-pick-txt small { font-size: 14px; }
  .gbl-home2 .ct-desk-sec { padding-top: 48px; }
  .ct-desk { gap: 20px; }
  .ct-panel { padding: 24px 18px; border-radius: 24px; }
  .gbl .ct-panel-h, .gbl .ct-card-h, .gbl .ct-sent-h { font-size: 24px; }
  .ct-panel-lead { font-size: 16px; }
  .ct-card { padding: 28px 18px; border-radius: 24px; }
  .ct-topic-opts { grid-template-columns: 1fr; }
  .ct-topic-opt { flex-direction: row; align-items: center; padding: 12px 14px; }
  /* the radio lines up with the card's first line (Dima: controls align to the first line of their label) */
  .ct-topic-opt { align-items: flex-start; }
  .ct-topic-opt::after { top: 11px; right: 11px; }
}
@media (max-width: 480px) {
  .ct-pick-head { grid-template-columns: 1fr; gap: 4px; }
  .ct-pick-head .ct-faces { grid-row: auto; margin-bottom: 10px; }
}
@media (max-width: 374px) {
  .gbl a.ct-pick-opt { grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 10px; padding: 12px 10px; }
  .ct-pick-ico { width: 36px; height: 36px; border-radius: 10px; }
  .ct-pick-arr { margin-top: calc(2px + (16px * 1.3 - 16px) / 2); }
  .ct-pick-ico svg { width: 20px; height: 20px; }
  .ct-card, .ct-panel { padding-left: 14px; padding-right: 14px; }
  .ct-topic-opt { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gbl-js .ct-pick-list li, .gbl-js .ct-panel.is-new, .gbl-js .ct-sent-mark svg, .gbl-js .ct-pick .ct-wave { animation: none; opacity: 1; transform: none; }
  .gbl a.ct-pick-opt, .gbl .ct-links a { transition: none; }
}