/* Compact overview; the hands-on example continues below the hero. */
.site-header{max-width:1500px;padding:18px 4%}
.hero{max-width:1500px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5%;padding:30px 4% 28px}
.hero-copy{padding:0}
.hero h1{font-size:clamp(49px,4.7vw,70px);line-height:1.04;letter-spacing:-2.6px;margin-bottom:22px}
.hero-copy .eyebrow{margin-bottom:22px}
.lead{font-size:16px;line-height:1.65;max-width:455px}
.hero-actions{margin-top:24px;gap:22px}
.primary{padding:15px 20px;gap:22px}
.explorer{padding:20px 22px 15px;border-radius:16px}
.explorer-top{margin-bottom:12px}
.explorer-top .eyebrow{font-size:9px;letter-spacing:1.7px}
.example-pill{font-size:9px}
.sector-tabs{padding:4px}
.sector-tabs button{padding:9px 5px;min-height:38px}
.integration-search{margin-top:11px}
.integration-search input{min-height:40px;padding-top:10px;padding-bottom:10px}
.search-icon{top:12px}
.panel-heading{padding-top:7px}
.panel-heading h2{font-size:clamp(10px,4.1cqi,29px);margin-bottom:6px}
.panel-heading p{font-size:12px;line-height:1.45}
.selection-hint{font-size:10px;margin:9px 0 7px}
.system-grid{gap:8px}
.system{min-height:78px;padding:10px 13px;gap:6px;border-radius:8px}
.brand-area{height:32px;gap:9px}
.brand-area img{max-width:140px;max-height:32px}
.brand-area .square-mark{height:30px;width:30px;max-height:30px;max-width:30px}
.brand-area .arcgis-mark{height:48px;width:48px;max-height:48px;max-width:48px;margin-left:-6px}
.brand-area .civicrec-mark{max-width:145px;max-height:27px}
.brand-area .tyler-mark{max-width:118px;max-height:32px}
.brand-area .searchconsole-mark{max-width:100%;width:170px;max-height:29px}
.brand-title{font-size:12px}
.system-label{font-size:11px;line-height:1.35}
.system[data-system=civicrec] .system-label{font-size:10px}
.flow{margin-top:12px;padding:12px 13px 10px;border-radius:9px}
.flow h3{font-size:18px;margin:5px 0 10px}
.flow-steps{gap:20px}
.flow-steps li{min-height:43px;padding:7px 6px;font-size:10px;gap:3px}
.flow-steps li:not(:last-child)::after{top:12px;right:-18px}
.flow-details{margin-top:9px;font-size:10px;color:#53675a}
.flow-details summary{cursor:pointer;width:fit-content;padding:2px 0}
.flow-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.flow-description{font-size:11px;margin:7px 0 0}
.explorer-footer{margin-top:10px;padding-top:9px}
.explorer-footer a{font-size:11px}
.explorer-footer p{font-size:9px}
.shape-one{width:155px;height:185px;top:-14px;right:-13px}
.shape-two{width:125px;height:105px;bottom:-13px;left:-15px}
.benefits{max-width:1500px;padding:21px 4%;gap:25px}
.benefits strong{font-size:18px}
.benefits p span{font-size:11px;line-height:1.4}
.benefit-mark{width:35px;height:35px;font-size:22px;border-radius:10px}
.search-list{max-height:330px}
#workflow-demo{scroll-margin-top:24px}
@media(max-width:1100px) and (min-width:901px){
  .hero{gap:3%;padding:25px 3%}.hero h1{font-size:48px}.hero-actions{gap:12px}.lead{font-size:14px}
  .explorer{padding:18px 16px 14px}.brand-area img{max-width:120px}.brand-area .civicrec-mark{max-width:124px}.brand-title{font-size:10px}
  .system{padding:10px;min-height:80px}.system-label{font-size:10px}.panel-heading p{font-size:11px}.explorer-footer p{font-size:8px}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:28px 5%;gap:27px}.hero-copy{max-width:650px;margin:auto;width:100%}
  .hero h1{font-size:clamp(43px,7vw,62px)}.lead{max-width:540px}.hero-copy .eyebrow{margin-bottom:15px}
  .hero-actions{margin-top:20px}.explorer-frame{max-width:650px}.benefits{padding:20px 5%;gap:17px}.benefits strong{font-size:16px}
}
@media(max-width:500px){
  .site-header{padding:16px 5%}.hero{padding-top:23px}.hero h1{font-size:44px;letter-spacing:-1.8px;margin-bottom:17px}
  .hero .lead{font-size:14px}.hero-actions{font-size:11px;gap:15px}.primary{padding:13px 15px;gap:13px}
  .explorer{padding:17px 13px 13px}.explorer-top .eyebrow{font-size:7px;letter-spacing:1.2px}.example-pill{font-size:7px}
  .sector-tabs button{font-size:10px}.integration-search input{font-size:16px;min-height:44px;padding-left:32px}.integration-search input::placeholder{font-size:11px}
  .search-icon{top:15px}.panel-heading p{font-size:11px}.selection-hint{font-size:9px}
  .system{padding:10px;min-height:80px}.brand-area{height:32px;gap:6px}.brand-area img{max-width:min(110px,100%)}
  .brand-area .civicrec-mark,.brand-area .tyler-mark{max-width:100%}.brand-title{font-size:10px}.system-label,.system[data-system=civicrec] .system-label{font-size:9px}
  .flow h3{font-size:17px}.flow-steps{gap:14px}.flow-steps li{font-size:9px}.flow-steps li:not(:last-child)::after{right:-13px;font-size:13px}
  .explorer-footer a{font-size:9px}.explorer-footer p{font-size:7px}.benefits{gap:17px}.benefits strong{font-size:18px}
}
.marketing-filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.marketing-filters button{border:1px solid #e5dfee;background:#fff;color:#665873;border-radius:20px;padding:6px 9px;font:500 10px/1.2 var(--sans);min-height:29px}
.marketing-filters button[aria-pressed=true]{background:var(--tint);border-color:#cbb9e1;color:var(--accent)}
.marketing-filters button:hover{border-color:var(--accent)}
.marketing-filters button span{font-size:8px;opacity:.75;margin-left:3px}
@media(max-width:500px){.marketing-filters{gap:4px}.marketing-filters button{font-size:9px;padding:6px 8px}.marketing-filters button span{font-size:8px}}
.brand-area .prweb-mark{width:64px;height:32px;max-width:64px}
#workflow-demo .wf-logo-with-name img[src$="prweb.png"]{width:58px;height:29px}
@media(max-width:500px){.brand-area .prweb-mark{width:46px;height:23px;max-width:46px}}
.catalog-browse{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:3px}
.catalog-browse button{border:0;background:transparent;color:var(--accent);font:600 10px/1.5 var(--sans);padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.catalog-browse button span{margin-left:6px}.catalog-browse>span{font-size:9px;color:var(--muted)}
.catalog-filter-row{display:flex;align-items:center;gap:9px;margin-top:16px}
.catalog-filter-row label{font-size:10px;color:var(--muted)}
.catalog-filter-row select{min-width:0;max-width:210px;padding:8px 10px;border:1px solid #d7dfd8;border-radius:6px;background:#fff;color:var(--ink);font:400 11px/1.3 var(--sans)}
.catalog-filter-row button{margin-left:auto;flex-shrink:0;border:0;background:transparent;color:var(--accent);font:500 10px/1.5 var(--sans);padding:6px 0;text-decoration:underline;text-underline-offset:3px}
.catalog-filter-row select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.search-status{margin:12px 0 8px}.search-list{max-height:360px;scrollbar-gutter:stable}
.catalog-result-type{font-size:8px;color:var(--accent);font-weight:500;line-height:1.4}
.catalog-placeholder{width:34px;height:34px;display:grid;place-items:center;flex-shrink:0;border-radius:8px;background:#f1f3f0;color:#6d7a75;font-size:22px}
.search-result>.catalog-placeholder{width:92px;background:transparent}
@media(max-width:500px){.catalog-browse{gap:8px}.catalog-browse button{font-size:9px}.catalog-browse>span{font-size:8px}.catalog-filter-row{gap:6px;flex-wrap:wrap}.catalog-filter-row label{font-size:9px}.catalog-filter-row select{font-size:11px;max-width:165px}.catalog-filter-row button{font-size:9px}.search-result>.catalog-placeholder{width:58px}.catalog-result-type{font-size:8px}}
.catalog-scroll-hint{display:flex;justify-content:center;gap:9px;margin:9px 0 0;color:var(--accent);font-size:9px;line-height:1.5}
.catalog-scroll-hint span{font-size:13px}