/* ============================================================
   RoofHyve — shared enhancement layer (theme-agnostic)
   Scroll-reveal · carousel · marquee · animated workflow flow-line
   Uses each page's own CSS variables (--gold, --ink, --line, …)
   ============================================================ */

/* ---------- Logo sizing (keeps the header logo inside the navbar; pages that set an inline height/style override this) ---------- */
.logo-img{height:44px;width:auto;display:block}
@media(max-width:560px){.logo-img{height:38px}}

/* ---------- Scroll reveal (animation-based so native hovers stay snappy) ---------- */
@media (prefers-reduced-motion: no-preference){
  html.js .rh-reveal{opacity:0}
  html.js .rh-reveal.rh-in{animation:rh-rise .66s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes rh-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Carousel ---------- */
.rh-carousel{position:relative}
.rh-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 4px;-ms-overflow-style:none;scrollbar-width:none}
.rh-track::-webkit-scrollbar{display:none}
.rh-track>*{flex:0 0 82%;scroll-snap-align:start}
@media(min-width:640px){.rh-track>*{flex-basis:calc(50% - 8px)}}
@media(min-width:980px){.rh-track>*{flex-basis:calc(33.333% - 11px)}}
.rh-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px}
.rh-ctrl button.rh-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line,#e6e0d2);background:rgba(255,255,255,.6);color:var(--ink,#16140f);cursor:pointer;display:grid;place-items:center;transition:.18s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rh-ctrl button.rh-arrow:hover:not(:disabled){background:var(--gold,#E8920C);border-color:var(--gold,#E8920C);color:#231600;transform:translateY(-2px)}
.rh-ctrl button.rh-arrow:disabled{opacity:.3;cursor:default}
.rh-dots{display:flex;gap:7px;align-items:center}
.rh-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(140,128,104,.45);cursor:pointer;transition:.22s ease}
.rh-dots button.on{background:var(--gold,#E8920C);width:24px;border-radius:5px}

/* ---------- Marquee (continuous logo strip) ---------- */
.rh-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rh-mtrack{display:flex;align-items:center;gap:46px;width:max-content;animation:rh-scroll 30s linear infinite}
.rh-marquee:hover .rh-mtrack{animation-play-state:paused}
@keyframes rh-scroll{to{transform:translateX(-50%)}}

/* ---------- Workflow flow-line (a highlight that travels step to step) ---------- */
.flow-step,.fm-node,.flow-step *{transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .5s,background .5s}
.flow-step.rh-pulse,.fm-node.rh-pulse{transform:translateY(-7px);box-shadow:0 20px 40px -18px rgba(232,146,12,.6);border-color:var(--gold,#E8920C)!important;z-index:2}

/* ---------- Tabs (Core Modules) ---------- */
.rh-tabbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}
.rh-tab{font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;padding:9px 18px;border-radius:999px;border:1px solid var(--line,#e5ddcd);background:transparent;color:var(--muted,#857f72);transition:.16s;white-space:nowrap}
.rh-tab:hover{color:var(--gold,#E8920C);border-color:var(--gold,#E8920C)}
.rh-tab.on{background:var(--gold,#E8920C);border-color:var(--gold,#E8920C);color:#231600}
.rh-tab .rh-tc{opacity:.65;font-weight:600;margin-left:5px}
.rh-tabs .rh-panel{display:none}
.rh-tabs .rh-panel.on{display:grid;animation:rh-rise .5s cubic-bezier(.2,.7,.2,1) both}

/* ---------- Accordion (Core Modules) ---------- */
.rh-acc-item{border:1px solid var(--line,#e5ddcd);border-radius:14px;margin-bottom:12px;overflow:hidden}
.rh-acc-head{width:100%;display:flex;align-items:center;gap:14px;font-family:inherit;font-size:16px;font-weight:600;color:var(--ink,#16140f);background:transparent;border:0;cursor:pointer;padding:18px 22px;text-align:left}
.rh-acc-head .rh-anum{font-family:inherit;font-size:13px;font-weight:700;color:var(--gold,#E8920C);min-width:22px}
.rh-acc-head .rh-acnt{margin-left:auto;font-size:13px;color:var(--muted,#888);font-weight:500}
.rh-acc-head .rh-chev{flex:none;transition:transform .25s;color:var(--gold,#E8920C)}
.rh-acc-item.open .rh-chev{transform:rotate(180deg)}
.rh-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease}
.rh-acc-item.open .rh-acc-body{grid-template-rows:1fr}
.rh-acc-inner{overflow:hidden;min-height:0;padding:2px 22px 22px}

/* ---------- Flow map (End-to-End) ---------- */
.rh-flowmap{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:12px}
.rh-flowmap > :not(.rh-arrow){flex:1 1 195px;max-width:225px;margin:0}
.fm-node{display:flex;flex-direction:column;gap:5px;padding:18px 16px;border:1px solid var(--line,#e5ddcd);border-radius:14px;text-align:left;background:rgba(127,118,96,.05)}
.fm-node .fm-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--gold,#E8920C);background:rgba(232,146,12,.13);margin-bottom:5px}
.fm-node h4{font-size:15.5px;margin:0;line-height:1.2}
.fm-node p{font-size:12.5px;margin:0;opacity:.72;line-height:1.45}
.rh-arrow{flex:0 0 auto;align-self:center;color:var(--gold,#E8920C);display:grid;place-items:center;opacity:.65}
.rh-arrow svg{width:22px;height:22px}
@media(max-width:760px){
  .rh-flowmap{flex-direction:column;align-items:stretch}
  .rh-flowmap > :not(.rh-arrow){max-width:none}
  .rh-arrow{transform:rotate(90deg);margin:-4px 0}
}

/* ---------- Compact grouped module lists ---------- */
.rh-modlist{display:grid;gap:28px}
.rh-modcat{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gold,#E8920C);margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line,#e5ddcd)}
.rh-modrows{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 26px}
.rh-modrow{display:flex;gap:13px;align-items:flex-start;padding:11px 0}
.rh-modrow .rh-modic{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;color:var(--gold,#E8920C);background:rgba(232,146,12,.13)}
.rh-modrow h4{font-size:14.5px;margin:0 0 2px;line-height:1.2}
.rh-modrow p{font-size:12.5px;margin:0;opacity:.72;line-height:1.45}
@media(max-width:680px){.rh-modrows{grid-template-columns:1fr}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .rh-mtrack{animation:none}
  .rh-track{scroll-behavior:auto}
  .flow-step.rh-pulse,.fm-node.rh-pulse{transform:none}
  .rh-panel.on{animation:none}
}

/* ============================================================
   Book a Demo modal
   ============================================================ */
.demo-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.demo-modal.open{display:flex}
.demo-overlay{position:fixed;inset:0;background:rgba(8,8,10,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.demo-dialog{position:relative;z-index:1;width:100%;max-width:680px;margin:auto;background:var(--card,#161618);border:1px solid var(--line-2,#34343A);border-radius:var(--r,16px);padding:32px;box-shadow:0 24px 70px rgba(0,0,0,.55);animation:demoPop .28s cubic-bezier(.2,.7,.2,1) both}
@keyframes demoPop{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.demo-close{position:absolute;top:14px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line,#2A2A2E);background:var(--bg-2,#151517);color:var(--muted,#9A958C);font-size:22px;line-height:1;cursor:pointer;transition:.18s ease}
.demo-close:hover{color:var(--white,#FAF8F4);border-color:var(--gold,#F6B12E)}
.demo-head{margin-bottom:22px}
.demo-eyebrow{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold,#F6B12E);margin-bottom:8px}
.demo-head h3{font-family:'Archivo Black','Archivo',sans-serif;font-size:26px;line-height:1.15;color:var(--white,#FAF8F4);margin:0 0 8px}
.demo-head p{color:var(--muted,#9A958C);font-size:14.5px;line-height:1.5;margin:0;max-width:52ch}
.demo-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.demo-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.demo-field-full{grid-column:1 / -1}
.demo-field label{font-size:13px;font-weight:600;color:var(--white,#FAF8F4)}
.demo-field .req{color:var(--gold,#F6B12E)}
.demo-field input,.demo-field select,.demo-field textarea{width:100%;background:var(--bg-2,#151517);border:1px solid var(--line-2,#34343A);border-radius:10px;color:var(--white,#FAF8F4);font:inherit;font-size:14.5px;padding:11px 13px;transition:border-color .16s ease,box-shadow .16s ease;-webkit-appearance:none;appearance:none}
.demo-field textarea{resize:vertical;min-height:74px}
.demo-field input::placeholder,.demo-field textarea::placeholder{color:var(--muted,#9A958C);opacity:.7}
.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus{outline:none;border-color:var(--gold,#F6B12E);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#F6B12E) 22%,transparent)}
.demo-field input.invalid,.demo-field select.invalid,.demo-field textarea.invalid{border-color:var(--red,#FF6A4D)}
.demo-field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A958C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
/* Date picker (replaces <input type="date"> — the native popup can't be themed).
   The toggle copies the input styling exactly so the field is indistinguishable
   from its neighbours; the panel reuses the combobox/multi-select panel look. */
.rh-date{position:relative;min-width:0}
.demo-field .rh-date-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:var(--bg-2,#151517);border:1px solid var(--line-2,#34343A);border-radius:10px;color:var(--white,#FAF8F4);font:inherit;font-size:14.5px;text-align:left;padding:11px 13px;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease;-webkit-appearance:none;appearance:none}
.demo-field .rh-date-toggle:hover{border-color:#45454D}
.demo-field .rh-date-toggle:focus-visible{outline:none;border-color:var(--gold,#F6B12E);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#F6B12E) 22%,transparent)}
.rh-date.open .rh-date-toggle{border-color:var(--gold,#F6B12E)}
.demo-field .rh-date-toggle.invalid{border-color:var(--red,#FF6A4D)}
.rh-date-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-date-placeholder{color:var(--muted,#9A958C);opacity:.7}
.rh-date-icon{flex:0 0 auto;color:var(--muted,#9A958C)}
.rh-date-panel{position:absolute;z-index:6;top:calc(100% + 5px);left:0;width:min(304px,calc(100vw - 40px));padding:10px;background:var(--card,#161618);border:1px solid var(--line-2,#34343A);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.rh-date-panel.rh-date-above{top:auto;bottom:calc(100% + 5px)}
.rh-date-head{display:flex;align-items:center;gap:4px;margin-bottom:4px}
.rh-date-title{flex:1 1 auto;text-align:center;font-size:13.5px;font-weight:700;color:var(--white,#FAF8F4)}
.rh-date-nav{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;background:none;border:1px solid transparent;border-radius:8px;color:var(--muted,#9A958C);cursor:pointer;transition:background-color .12s ease,color .12s ease}
.rh-date-nav:hover{background:var(--bg-2,#151517);color:var(--white,#FAF8F4)}
.rh-date-nav:focus-visible{outline:none;border-color:var(--gold,#F6B12E);color:var(--white,#FAF8F4)}
.rh-date-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.rh-date-wd{padding:5px 0;text-align:center;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#9A958C)}
.rh-date-day{display:grid;place-items:center;height:34px;background:none;border:1px solid transparent;border-radius:8px;color:var(--white,#FAF8F4);font:inherit;font-size:13.5px;cursor:pointer;transition:background-color .12s ease,color .12s ease,border-color .12s ease}
.rh-date-day:hover{background:var(--bg-2,#151517)}
.rh-date-day:focus-visible{outline:none;border-color:var(--gold,#F6B12E);box-shadow:0 0 0 2px color-mix(in srgb,var(--gold,#F6B12E) 22%,transparent)}
.rh-date-day.is-outside{color:var(--muted,#9A958C);opacity:.55}
/* Days before the floor (the demo form can't be booked in the past). */
.rh-date-day:disabled{color:var(--muted,#9A958C);opacity:.32;cursor:not-allowed}
.rh-date-day:disabled:hover{background:none}
.rh-date-nav:disabled,.rh-date-action:disabled{opacity:.35;cursor:not-allowed}
.rh-date-nav:disabled:hover,.rh-date-action:disabled:hover{background:none;color:var(--muted,#9A958C)}
.rh-date-day.is-today{border-color:color-mix(in srgb,var(--gold,#F6B12E) 55%,transparent);color:var(--gold,#F6B12E)}
.rh-date-day.is-selected,.rh-date-day.is-selected:hover{background:var(--gold,#F6B12E);border-color:var(--gold,#F6B12E);color:#141416;font-weight:700}
.rh-date-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-2,#34343A)}
.rh-date-action{background:none;border:1px solid transparent;border-radius:8px;color:var(--muted,#9A958C);font:inherit;font-size:12.5px;font-weight:600;padding:6px 9px;cursor:pointer;transition:background-color .12s ease,color .12s ease}
.rh-date-action:hover{background:var(--bg-2,#151517);color:var(--white,#FAF8F4)}
.rh-date-accent{color:var(--gold,#F6B12E)}
.rh-date-action:focus-visible{outline:none;border-color:var(--gold,#F6B12E)}
@media (max-width:560px){
	.rh-date-panel{width:min(320px,calc(100vw - 32px));padding:12px}
	.rh-date-day{height:40px;font-size:14px}
	.rh-date-nav{width:34px;height:34px}
	.rh-date-action{padding:8px 10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
	.demo-field .rh-date-toggle,.rh-date-day,.rh-date-nav,.rh-date-action{transition:none}
}
/* Pre-Safari-15.4 has no :focus-visible — fall back to :focus so the calendar is
   never keyboard-navigable without a visible focus ring. */
@supports not selector(:focus-visible){
	.demo-field .rh-date-toggle:focus,.rh-date-day:focus,.rh-date-nav:focus,.rh-date-action:focus{outline:none;border-color:var(--gold,#F6B12E);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#F6B12E) 22%,transparent)}
}
.demo-error{color:var(--red,#FF6A4D);font-size:12px;min-height:0}
.demo-error:empty{display:none}
/* US-only phone control: the wrapper is the visible box, the "+1" chunk is
   static text (nothing to focus or change), and the input holds the 10 national
   digits. Border/focus/invalid states move from the input to the wrapper. */
.rh-phone{display:flex;align-items:stretch;min-width:0;background:var(--bg-2,#151517);border:1px solid var(--line-2,#34343A);border-radius:10px;transition:border-color .16s ease,box-shadow .16s ease}
.rh-phone:focus-within{border-color:var(--gold,#F6B12E);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#F6B12E) 22%,transparent)}
.rh-phone.invalid{border-color:var(--red,#FF6A4D)}
.rh-phone-cc{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding:0 8px 0 11px;border-right:1px solid var(--line-2,#34343A);color:var(--white,#FAF8F4);font-size:14.5px;user-select:none;-webkit-user-select:none}
.rh-phone-code{line-height:1}
.rh-flag{display:block;width:20px;height:14px;border-radius:2px;overflow:hidden;flex:0 0 auto}
.rh-phone-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.demo-field .rh-phone input,.demo-field .rh-phone input:focus{flex:1 1 auto;min-width:0;background:none;border:0;border-radius:0 10px 10px 0;padding:11px 13px 11px 10px;box-shadow:none;outline:none}
/* Searchable state dropdown (combobox) */
.rh-combo{position:relative}
.rh-combo-list{position:absolute;z-index:5;top:calc(100% + 4px);left:0;right:0;margin:0;padding:4px;list-style:none;max-height:210px;overflow-y:auto;background:var(--card,#161618);border:1px solid var(--line-2,#34343A);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.rh-combo-list[hidden]{display:none}
.rh-combo-list li{padding:9px 11px;border-radius:7px;font-size:14px;color:var(--white,#FAF8F4);cursor:pointer}
.rh-combo-list li[hidden]{display:none}
.rh-combo-list li:hover,.rh-combo-list li.active{background:color-mix(in srgb,var(--gold,#F6B12E) 16%,transparent)}
.rh-combo-list li.rh-combo-empty{color:var(--muted,#9A958C);cursor:default}
.rh-combo-list li.rh-combo-empty:hover{background:none}
/* Multi-select (main challenges / current software) */
.rh-multi{position:relative}
.rh-multi-hint{font-weight:400;color:var(--muted,#9A958C)}
.rh-multi-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:var(--bg-2,#151517);border:1px solid var(--line-2,#34343A);border-radius:10px;color:var(--white,#FAF8F4);font:inherit;font-size:14.5px;padding:11px 13px;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}
.rh-multi-toggle:focus-visible{outline:none;border-color:var(--gold,#F6B12E);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold,#F6B12E) 22%,transparent)}
.rh-multi.open .rh-multi-toggle{border-color:var(--gold,#F6B12E)}
.rh-multi.invalid .rh-multi-toggle{border-color:var(--red,#FF6A4D)}
.rh-multi-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-multi-text.rh-multi-placeholder{color:var(--muted,#9A958C);opacity:.7}
.rh-multi-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:var(--gold,#F6B12E);color:#0D0D0F;font-size:12px;font-weight:800;line-height:1;letter-spacing:.01em}
.rh-multi-badge[hidden]{display:none}
.rh-multi-caret{flex:none;color:var(--muted,#9A958C);transition:transform .18s ease}
.rh-multi.open .rh-multi-caret{transform:rotate(180deg)}
.rh-multi-panel{position:absolute;z-index:5;top:calc(100% + 4px);left:0;right:0;padding:4px;max-height:240px;overflow-y:auto;background:var(--card,#161618);border:1px solid var(--line-2,#34343A);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.rh-multi-panel[hidden]{display:none}
.rh-multi-group{padding:9px 11px 5px;font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--muted,#9A958C)}
.rh-multi-opt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:7px;font-size:14px;color:var(--white,#FAF8F4);cursor:pointer}
.rh-multi-opt:hover{background:color-mix(in srgb,var(--gold,#F6B12E) 16%,transparent)}
.rh-multi-opt input{width:16px;height:16px;flex:none;margin:0;accent-color:var(--gold,#F6B12E);cursor:pointer;-webkit-appearance:auto;appearance:auto}
/* Custom scrollbar for the dropdown panels — matches the site UI. */
.rh-combo-list,.rh-multi-panel{scrollbar-width:thin;scrollbar-color:var(--line-2,#34343A) transparent}
.rh-combo-list::-webkit-scrollbar,.rh-multi-panel::-webkit-scrollbar{width:10px}
.rh-combo-list::-webkit-scrollbar-track,.rh-multi-panel::-webkit-scrollbar-track{background:transparent;margin:4px 0}
.rh-combo-list::-webkit-scrollbar-thumb,.rh-multi-panel::-webkit-scrollbar-thumb{background:var(--line-2,#34343A);border:2px solid transparent;background-clip:padding-box;border-radius:999px}
.rh-combo-list::-webkit-scrollbar-thumb:hover,.rh-multi-panel::-webkit-scrollbar-thumb:hover{background:var(--muted,#9A958C);border:2px solid transparent;background-clip:padding-box}
.demo-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.demo-actions-btns{display:flex;gap:12px;justify-content:flex-end}
.demo-form-error{text-align:right}
/* Submit loader: hide the label and spin a ring until the API responds
   (setLoading(false) is only called after the request resolves). Uses ::before
   because .btn-gold::after is the animated sheen — sharing a pseudo-element
   would merge its skewX()/gradient into the spinner and distort it. */
#demoSubmit.is-loading{color:transparent!important;pointer-events:none;position:relative}
#demoSubmit.is-loading::before{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;box-sizing:border-box;border-radius:50%;border:2.5px solid rgba(13,13,15,.3);border-top-color:#0D0D0F;animation:demoSpin .6s linear infinite;z-index:1}
@keyframes demoSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#demoSubmit.is-loading::before{animation-duration:1.4s}}
.demo-success{text-align:center;padding:18px 8px 6px}
.demo-success-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;font-size:30px;color:#0D0D0F;background:var(--green,#2FD27E)}
.demo-success h3{font-family:'Archivo Black','Archivo',sans-serif;font-size:24px;color:var(--white,#FAF8F4);margin:0 0 10px}
.demo-success p{color:var(--muted,#9A958C);font-size:15px;line-height:1.55;margin:0 auto 22px;max-width:46ch}
@media(max-width:560px){
  .demo-dialog{padding:24px 18px}
  .demo-form{grid-template-columns:1fr}
  .demo-head h3{font-size:22px}
  /* Compact the lead-form action buttons so "Submit Request" fits without a giant tap target. */
  .demo-actions-btns .btn{padding:11px 16px;font-size:13px;border-radius:10px}
}