.demo-page { background: var(--page-light); }
.demo-hero { min-height: 820px; padding: 175px 0 105px; position: relative; overflow: hidden; background: radial-gradient(circle at 78% 43%,rgba(145,185,76,.12),transparent 31%),linear-gradient(145deg,#050808,#0c120d); }
.demo-hero-grid { position: absolute; inset: 0; opacity: .36; background-image: linear-gradient(rgba(255,255,255,.023) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.023) 1px,transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(90deg,transparent,#000 58%,transparent); }
.demo-hero-layout { position: relative; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 76px; }.demo-hero-copy h1 { max-width: 720px; color: #f4f7f4; font-size: clamp(50px,5.3vw,80px); line-height: .99; }.demo-hero-copy > p:not(.eyebrow) { max-width: 610px; margin: 27px 0 29px; color: #aab3ac; font-size: 17px; line-height: 1.75; }.demo-scroll-link { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-bright); font-size: 11px; font-weight: 800; text-decoration: none; }.demo-scroll-link span { width: 27px; height: 27px; display: grid; place-items: center; background: rgba(145,185,76,.1); border: 1px solid rgba(145,185,76,.22); border-radius: 50%; }
.demo-workspace-visual { min-width: 0; color: var(--text-light); background: rgba(11,16,12,.94); border: 1px solid #2a332b; border-radius: 24px; box-shadow: 0 38px 90px rgba(0,0,0,.38); transition: transform 180ms ease-out; overflow: hidden; }.demo-workspace-visual > header { min-height: 62px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; background: #090c0a; border-bottom: 1px solid var(--border-dark); }.demo-workspace-visual > header div { display: flex; align-items: center; gap: 9px; }.demo-workspace-visual > header div > span { width: 31px; height: 31px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 8px; font-size: 12px; font-weight: 800; }.demo-workspace-visual > header strong { color: #dfe5e0; font-size: 9px; }.demo-workspace-visual > header small { color: #68736a; font-size: 7px; }
.demo-screen { min-height: 410px; display: grid; grid-template-columns: 145px 1fr; background-image: linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size: 28px 28px; }.demo-screen > aside { padding: 27px 14px; display: grid; align-content: start; gap: 8px; background: rgba(9,12,10,.75); border-right: 1px solid var(--border-dark); }.demo-screen > aside span { padding: 10px; color: #5f6b62; border-radius: 8px; font-size: 7px; font-weight: 700; }.demo-screen > aside span.active { color: var(--brand-bright); background: rgba(145,185,76,.09); }.demo-screen-body { padding: 55px 35px; display: flex; flex-direction: column; }.demo-screen-body > span { color: var(--brand-bright); font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.demo-screen-body h2 { max-width: 420px; margin: 13px 0 35px; color: #eef2ef; font-size: clamp(28px,3vw,39px); }.demo-flow { padding: 20px 14px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 7px; background: #111612; border: 1px solid var(--border-dark); border-radius: 12px; }.demo-flow i { padding: 10px 5px; color: #b3bdb5; background: #1d251e; border: 1px solid #303931; border-radius: 8px; font-size: 6px; font-style: normal; font-weight: 800; text-align: center; }.demo-flow i:nth-of-type(2) { color: var(--ink); background: var(--brand-bright); border-color: var(--brand-bright); }.demo-flow b { color: var(--brand); font-size: 8px; }.demo-checks { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }.demo-checks > span { padding: 8px 10px; display: flex; align-items: center; gap: 6px; color: #89958b; background: #131914; border: 1px solid #2b342c; border-radius: 99px; font-size: 6px; }.demo-checks i { width: 15px; height: 15px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 50%; font-size: 6px; font-style: normal; }.demo-checks span:last-child i { background: #e7c765; }.demo-workspace-visual > footer { min-height: 58px; padding: 0 21px; display: flex; align-items: center; justify-content: space-between; color: #6d786f; background: #090c0a; border-top: 1px solid var(--border-dark); font-size: 7px; }.demo-workspace-visual > footer span { display: flex; align-items: center; gap: 7px; }.demo-workspace-visual > footer i { width: 6px; height: 6px; background: var(--brand-bright); border-radius: 50%; box-shadow: 0 0 8px var(--brand-bright); animation: demo-pulse 1.8s ease-in-out infinite; }.demo-workspace-visual > footer strong { color: #adb7af; }
.demo-request-section { padding: 115px 0 130px; }.demo-solution-selector { margin-bottom: 38px; display: grid; grid-template-columns: repeat(4,1fr); background: #fff; border: 1px solid var(--border-light); border-radius: 17px; box-shadow: 0 15px 45px rgba(38,51,32,.07); overflow: hidden; }.demo-solution-selector button { min-height: 112px; padding: 17px; display: flex; align-items: center; gap: 11px; color: #657166; background: transparent; border: 0; border-right: 1px solid var(--border-light); cursor: pointer; text-align: left; transition: color 220ms,background 220ms; }.demo-solution-selector button:last-child { border-right: 0; }.demo-solution-selector button:hover { color: #1b251b; background: #f7f9f5; }.demo-solution-selector button.is-active { color: #192219; background: linear-gradient(180deg,rgba(145,185,76,.14),rgba(145,185,76,.025)); box-shadow: inset 0 -3px var(--brand); }.demo-solution-selector button > i { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; color: #68746a; background: #edf1e9; border-radius: 10px; font-size: 8px; font-style: normal; font-weight: 800; }.demo-solution-selector button.is-active > i { color: var(--ink); background: var(--brand-bright); }.demo-solution-selector strong,.demo-solution-selector small { display: block; }.demo-solution-selector strong { font-size: 9px; }.demo-solution-selector small { margin-top: 3px; color: #89938b; font-size: 6px; }
.demo-form-workspace { display: grid; grid-template-columns: minmax(0,1fr) 330px; align-items: start; gap: 32px; }.demo-form { min-width: 0; padding: 45px; background: #fff; border: 1px solid var(--border-light); border-radius: 20px; box-shadow: 0 20px 60px rgba(38,51,32,.08); }.demo-form-section { margin: 0 0 38px; padding: 0 0 38px; border: 0; border-bottom: 1px solid var(--border-light); }.form-section-heading { margin-bottom: 25px; }.form-section-heading > span,.demo-topic-section legend > span { color: var(--brand-dark); font-size: 8px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.form-section-heading h3,.demo-topic-section legend > strong { margin: 7px 0 0; display: block; color: #202a20; font-size: 25px; letter-spacing: -.035em; }.demo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 21px 18px; }.demo-field { min-width: 0; }.demo-field-wide { grid-column: 1 / -1; }.demo-field label { display: block; margin-bottom: 8px; color: #435043; font-size: 8px; font-weight: 800; }.demo-field label > i,.demo-privacy label i { color: #a66d19; font-style: normal; }.demo-field input:not([type="checkbox"]),.demo-field select,.demo-field textarea { width: 100%; min-height: 51px; padding: 13px 14px; color: #1d281d; background: #f8faf7; border: 1px solid #dce3d9; border-radius: 9px; outline: 0; font: inherit; font-size: 10px; transition: background 200ms,border-color 200ms,box-shadow 200ms; }.demo-field textarea { min-height: 145px; resize: vertical; line-height: 1.65; }.demo-field input::placeholder,.demo-field textarea::placeholder { color: #98a299; }.demo-field input:focus,.demo-field select:focus,.demo-field textarea:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(145,185,76,.11); }.demo-field input[aria-invalid="true"],.demo-field textarea[aria-invalid="true"] { border-color: #b56c43; background: #fff9f6; box-shadow: 0 0 0 3px rgba(181,108,67,.08); }.demo-field-error { min-height: 15px; margin-top: 5px; display: block; color: #9b4d29; font-size: 7px; }.field-meta { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; color: #89938b; font-size: 7px; }.field-meta b { color: var(--brand-dark); }
.demo-topic-section legend { width: 100%; margin-bottom: 24px; }.demo-topic-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 11px; }.demo-topic-grid label { position: relative; cursor: pointer; }.demo-topic-grid input { position: absolute; opacity: 0; pointer-events: none; }.demo-topic-grid label > span { min-height: 125px; padding: 15px; display: flex; flex-direction: column; color: #657166; background: #f7f9f5; border: 1px solid #dfe5dc; border-radius: 11px; transition: color 200ms,background 200ms,border-color 200ms,box-shadow 200ms; }.demo-topic-grid input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }.demo-topic-grid input:checked + span { color: #1d281d; background: rgba(145,185,76,.09); border-color: rgba(145,185,76,.5); box-shadow: inset 0 -2px var(--brand); }.demo-topic-grid span > i { width: 31px; height: 31px; margin-bottom: auto; display: grid; place-items: center; color: #6f7b72; background: #e9eee6; border-radius: 8px; font-size: 6px; font-style: normal; font-weight: 800; }.demo-topic-grid input:checked + span > i { color: var(--ink); background: var(--brand-bright); }.demo-topic-grid strong { margin-top: 13px; font-size: 8px; }.demo-topic-grid small { margin-top: 3px; color: #8b958d; font-size: 6px; line-height: 1.4; }
.demo-privacy { margin-top: -10px; }.demo-privacy > label { margin: 0; padding: 15px; display: flex; align-items: flex-start; gap: 10px; background: #f6f8f4; border: 1px solid #dfe5dc; border-radius: 10px; cursor: pointer; font-weight: 600; line-height: 1.6; }.demo-privacy input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--brand); }.demo-privacy input[aria-invalid="true"] { outline: 2px solid #b56c43; outline-offset: 2px; }
.demo-error-summary { margin-top: 22px; padding: 17px 19px; color: #7b321c; background: #fff6f2; border: 1px solid #e6b7a4; border-radius: 11px; }.demo-error-summary[hidden] { display: none; }.demo-error-summary strong { font-size: 9px; }.demo-error-summary ul { margin: 8px 0 0; padding-left: 17px; }.demo-error-summary li { margin-top: 4px; font-size: 7px; }.demo-error-summary a { color: inherit; }.demo-submit { margin-top: 25px; padding-top: 25px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid var(--border-light); }.demo-submit > p { max-width: 410px; margin: 0; display: flex; align-items: flex-start; gap: 7px; color: #89938b; font-size: 7px; line-height: 1.55; }.demo-submit > p i { width: 6px; height: 6px; margin-top: 2px; flex: 0 0 auto; background: #e7c765; border-radius: 50%; }.demo-status { margin-top: 24px; padding: 18px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; color: #546054; background: #f3f8ed; border: 1px solid #cfe0bd; border-radius: 11px; }.demo-status[hidden] { display: none; }.demo-status > i { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 9px; font-style: normal; font-weight: 900; }.demo-status strong { color: #273627; font-size: 9px; }.demo-status p { margin: 4px 0 0; font-size: 7px; }.demo-status button { padding: 8px 10px; color: var(--brand-dark); background: #fff; border: 1px solid #d6e3c9; border-radius: 8px; cursor: pointer; font: inherit; font-size: 7px; font-weight: 800; }
.demo-summary { position: sticky; top: 110px; overflow: hidden; color: #a8b2aa; background: linear-gradient(145deg,#0d120e,#151c15); border: 1px solid var(--border-dark); border-radius: 18px; }.demo-summary > header,.demo-summary-section,.demo-preparation,.demo-privacy-note { padding: 24px; }.demo-summary > header { border-bottom: 1px solid var(--border-dark); }.demo-summary > header > span,.demo-summary-section > span,.demo-preparation > span { color: var(--brand-bright); font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.demo-summary > header strong { margin-top: 12px; display: block; color: #eff3f0; font-size: 20px; }.demo-summary > header p { margin: 9px 0 0; font-size: 9px; line-height: 1.65; }.demo-summary-section { border-bottom: 1px solid var(--border-dark); }.demo-summary-section ul,.demo-preparation ul { margin: 14px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }.demo-summary-section li,.demo-preparation li { display: flex; gap: 7px; color: #bac3bc; font-size: 8px; }.demo-summary-section li::before,.demo-preparation li::before { content: "✓"; color: var(--brand-bright); font-weight: 900; }.demo-summary dl { margin: 0; padding: 10px 24px; border-bottom: 1px solid var(--border-dark); }.demo-summary dl div { padding: 10px 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; border-bottom: 1px solid #29302a; }.demo-summary dl div:last-child { border-bottom: 0; }.demo-summary dt { color: #6e7970; font-size: 7px; }.demo-summary dd { margin: 0; color: #c2cbc4; font-size: 7px; font-weight: 800; text-align: right; overflow-wrap: anywhere; }.demo-preparation { border-bottom: 1px solid var(--border-dark); }.demo-privacy-note { display: grid; grid-template-columns: auto 1fr; gap: 10px; }.demo-privacy-note > i { width: 29px; height: 29px; display: grid; place-items: center; color: #332904; background: #e7c765; border-radius: 8px; font-size: 9px; font-style: normal; font-weight: 800; }.demo-privacy-note p { margin: 0; font-size: 7px; line-height: 1.6; }
.demo-coverage,.demo-process-section { padding: 115px 0 125px; }.coverage-track { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6,1fr); list-style: none; }.coverage-track li { min-height: 245px; padding: 22px 18px; display: flex; flex-direction: column; background: linear-gradient(145deg,#111612,#171d17); border: 1px solid var(--border-dark); border-right: 0; }.coverage-track li:first-child { border-radius: 14px 0 0 14px; }.coverage-track li:last-child { border-right: 1px solid var(--border-dark); border-radius: 0 14px 14px 0; }.coverage-track li > span { color: #58635a; font-size: 7px; font-weight: 800; }.coverage-track li > i { width: 41px; height: 41px; margin-top: 27px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 10px; font-size: 11px; font-style: normal; font-weight: 800; }.coverage-track h3 { margin: auto 0 8px; color: #eaf0eb; font-size: 16px; }.coverage-track p { margin: 0; color: #78847a; font-size: 8px; line-height: 1.55; }
.demo-prep-section { padding: 115px 0 125px; }.prep-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 95px; }.prep-copy > p:not(.eyebrow) { max-width: 560px; font-size: 15px; line-height: 1.8; }.prep-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.prep-cards article { min-height: 355px; padding: 28px; display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 14px; background: #fff; border: 1px solid var(--border-light); border-radius: 18px; box-shadow: 0 15px 44px rgba(38,51,32,.07); }.prep-cards article > i { width: 43px; height: 43px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 10px; font-size: 12px; font-style: normal; font-weight: 900; }.prep-cards article span { color: var(--brand-dark); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.prep-cards h3 { margin: 8px 0 40px; font-size: 22px; }.prep-cards ul { margin: 0; padding: 0; display: grid; gap: 12px; list-style: none; }.prep-cards li { display: flex; gap: 8px; color: #677368; font-size: 9px; }.prep-cards li::before { content: "✓"; color: var(--brand-dark); font-weight: 900; }.prep-cards article.warning { background: #fffcf5; border-color: #eadbb3; }.prep-cards article.warning > i { color: #302504; background: #e7c765; }.prep-cards article.warning span { color: #7d651d; }.prep-cards article.warning li::before { content: "×"; color: #9d6d1c; }
.demo-process-track { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); list-style: none; }.demo-process-track li { min-height: 260px; padding: 23px; display: flex; flex-direction: column; background: #111612; border: 1px solid var(--border-dark); border-right: 0; }.demo-process-track li:first-child { border-radius: 14px 0 0 14px; }.demo-process-track li:last-child { border-right: 1px solid var(--border-dark); border-radius: 0 14px 14px 0; }.demo-process-track li > span { color: #58635a; font-size: 7px; font-weight: 800; }.demo-process-track li > i { width: 42px; height: 42px; margin-top: 30px; display: grid; place-items: center; color: var(--ink); background: var(--brand-bright); border-radius: 10px; font-size: 8px; font-style: normal; font-weight: 800; }.demo-process-track h3 { margin: auto 0 8px; color: #eaf0eb; font-size: 17px; }.demo-process-track p { margin: 0; color: #78847a; font-size: 8px; line-height: 1.55; }
.demo-alternatives { padding: 115px 0 125px; }.alternatives-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 95px; }.alternatives-copy > p:not(.eyebrow) { max-width: 560px; font-size: 15px; line-height: 1.8; }.alternative-links { display: grid; gap: 12px; }.alternative-links > a { min-height: 92px; padding: 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; color: #273227; background: #fff; border: 1px solid var(--border-light); border-radius: 13px; box-shadow: 0 10px 30px rgba(38,51,32,.05); text-decoration: none; transition: transform 220ms,border-color 220ms; }.alternative-links > a:hover { transform: translateX(4px); border-color: rgba(145,185,76,.55); }.alternative-links > a > i { width: 46px; height: 46px; display: grid; place-items: center; color: var(--brand-dark); background: rgba(145,185,76,.12); border-radius: 11px; font-size: 7px; font-style: normal; font-weight: 800; }.alternative-links strong,.alternative-links small { display: block; }.alternative-links strong { font-size: 10px; }.alternative-links small { margin-top: 4px; color: #7d887f; font-size: 7px; }.alternative-links > a > b { color: var(--brand-dark); }
@keyframes demo-pulse { 50% { opacity: .4; transform: scale(.75); } }
@media (max-width:1160px) { .demo-hero-layout { grid-template-columns: 1fr; }.demo-hero-copy { max-width: 800px; }.demo-workspace-visual { max-width: 820px; }.demo-form-workspace { grid-template-columns: minmax(0,1fr) 280px; }.prep-layout,.alternatives-layout { grid-template-columns: 1fr; gap: 55px; } }
@media (max-width:760px) { .demo-hero { min-height: auto; padding: 130px 0 75px; }.demo-hero-copy h1 { font-size: clamp(42px,13vw,61px); }.demo-hero-copy > p:not(.eyebrow) { font-size: 15px; }.demo-screen { grid-template-columns: 1fr; }.demo-screen > aside { display: none; }.demo-screen-body { padding: 40px 21px; }.demo-flow { grid-template-columns: 1fr; }.demo-flow b { transform: rotate(90deg); text-align: center; }.demo-solution-selector { grid-template-columns: 1fr 1fr; }.demo-solution-selector button { border-bottom: 1px solid var(--border-light); }.demo-form-workspace { grid-template-columns: 1fr; }.demo-form { padding: 29px 20px; }.demo-form-grid { grid-template-columns: 1fr; }.demo-field-wide { grid-column: auto; }.demo-topic-grid { grid-template-columns: 1fr 1fr; }.demo-submit { align-items: flex-start; flex-direction: column; }.demo-status { grid-template-columns: auto 1fr; }.demo-status button { grid-column: 1 / -1; }.demo-summary { position: static; }.coverage-track,.demo-process-track { grid-template-columns: 1fr 1fr; gap: 10px; }.coverage-track li,.coverage-track li:first-child,.coverage-track li:last-child,.demo-process-track li,.demo-process-track li:first-child,.demo-process-track li:last-child { min-height: 215px; border: 1px solid var(--border-dark); border-radius: 12px; }.prep-cards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion:reduce) { .demo-workspace-visual > footer i { animation: none; } }