/* Feature fragments float independently; their full interactive screens remain available. */
.hero { grid-template-columns: .97fr 1.08fr; gap: 48px; padding-block: 55px 42px; }
.floating-tour { width: 100%; max-width: 610px; align-self: center; }
.floating-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 0 7px; gap: 12px; }
.floating-heading > span { font-size: .75rem; letter-spacing: 2px; color: var(--gold-text); }
.feature-cloud { position: relative; height: 650px; isolation: isolate; }
.feature-cloud::before { content: ''; position: absolute; inset: 60px -15px 40px; background: radial-gradient(ellipse, rgba(225,190,124,.14), transparent 67%); pointer-events: none; }
.floating-card { position: absolute; animation: card-drift 6.5s ease-in-out infinite alternate; z-index: 1; }
.float-officials { width: 48%; left: 0; top: 168px; --tilt: -5deg; --float-distance: -10px; animation-delay: -2.8s; z-index: 2; }
.float-bills { width: 52%; right: 1%; top: 35px; --tilt: 5deg; --float-distance: -13px; animation-delay: -.5s; }
.float-views { width: 53%; left: 32%; top: 371px; --tilt: -3deg; --float-distance: -9px; animation-delay: -4.1s; z-index: 3; }
.floating-surface { width: 100%; display: block; position: relative; border: 1px solid rgba(7,27,54,.08); border-radius: 17px; background: #fff; color: var(--navy); text-align: left; padding: 22px; box-shadow: 0 25px 45px -22px rgba(7,27,54,.23), 0 5px 12px -5px rgba(7,27,54,.08); transform: rotate(var(--tilt)); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s; }
.float-eyebrow { display: flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 500; letter-spacing: .9px; line-height: 1.4; color: #637086; }
.float-eyebrow [data-icon] svg { width: 19px; height: 19px; }
.float-plus { margin-left: auto; font-size: 21px; line-height: 1; color: #a67925; font-weight: 400; transition: transform .3s; }
.float-title { display: block; margin: 19px 0 20px; font-family: var(--serif); font-size: clamp(25px, 2.35vw, 34px); font-weight: 400; line-height: 1.04; letter-spacing: -.5px; }
.bills-surface { background: var(--navy); color: #fdf8f3; border-color: #20344f; }
.bills-surface .float-eyebrow { color: #d4bc8b; }
.bills-surface .float-plus { color: #e8bd63; }
.mini-bill { display: block; }
.mini-bill > span:first-child { display: flex; justify-content: space-between; gap: 8px; font-size: .875rem; line-height: 1.4; }
.mini-bill > span:first-child > span { font-size: .75rem; color: #b2bed0; }
.mini-status { display: block; font-size: .75rem; letter-spacing: 1px; color: #e5bd69; margin-top: 13px; }
.mini-bill-progress { display: flex; justify-content: space-between; position: relative; margin-top: 15px; }
.mini-bill-progress::before { content: ''; position: absolute; left: 5px; right: 5px; top: 4px; height: 2px; background: linear-gradient(to right, #e4bb63 30%, #526075 30%); }
.mini-bill-progress i { height: 10px; width: 10px; border-radius: 50%; border: 2px solid #6c7888; background: var(--navy); position: relative; }
.mini-bill-progress i:nth-child(-n+2) { background: #e4bb63; border-color: #e4bb63; }
.mini-bill-ends { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; color: #b8c3d2; line-height: 1.4; margin-top: 10px; }
.mini-offices { display: grid; gap: 7px; }
.mini-offices > span { display: flex; align-items: center; gap: 9px; padding: 9px 10px; background: #f5f6f8; border-radius: 7px; font-size: .875rem; }
.mini-offices > span > span:last-child { margin-left: auto; color: #8e99a9; font-size: 18px; }
.mini-offices [data-icon] { color: #8793a4; }
.mini-offices [data-icon] svg { height: 17px; width: 17px; }
.mini-offices > .mini-office-active { background: #f9efd9; color: #8c6419; }
.mini-office-active [data-icon] { color: #a17825; }
.views-surface { background: #faf0db; border-color: #e6d4ac; }
.views-surface .float-eyebrow { color: #8b671f; }
.mini-quiz { display: block; }
.mini-quiz > span:first-child { font-size: .875rem; color: #827457; }
.mini-quiz-options { display: flex; gap: 9px; margin-top: 11px; }
.mini-quiz-options > i { font-style: normal; font-size: .875rem; display: grid; place-items: center; flex: 1; height: 35px; border-radius: 6px; background: #fffaf0; border: 1px solid #e8daba; color: #8b7a59; }
.mini-quiz-options > i:nth-child(4) { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-4px); }
.feature-tip { position: absolute; top: calc(100% + 10px); left: 0; right: 0; border-radius: 11px; background: #fffdf9; border: 1px solid #e8dcc8; padding: 16px 17px 13px; box-shadow: 0 14px 30px -12px rgba(7,27,54,.25); opacity: 0; visibility: hidden; transform: translateY(-7px); transition: opacity .25s ease, transform .25s ease, visibility .25s; pointer-events: none; }
.feature-tip::before { content: ''; position: absolute; top: -16px; height: 18px; left: -10px; right: -10px; }
.float-views .feature-tip { top: auto; bottom: calc(100% + 10px); }
.float-views .feature-tip::before { top: auto; bottom: -16px; }
.feature-tip p { margin: 0 0 12px; font-size: .875rem; line-height: 1.55; color: #586277; }
.feature-tip button { padding: 9px 0 0; border: 0; border-top: 1px solid #eadfce; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; font-size: .8125rem; line-height: 1.4; text-align: left; color: #8a6116; }
.feature-tip button > span { font-size: 18px; }
.floating-card.is-revealed { z-index: 10; animation-play-state: paused; }
.floating-card.is-revealed .floating-surface { transform: rotate(0) translateY(-4px); border-color: #cba458; box-shadow: 0 30px 60px -23px rgba(7,27,54,.24), 0 8px 18px -10px rgba(7,27,54,.15); }
.floating-card.is-revealed .float-plus { transform: rotate(45deg); }
.floating-card.is-revealed .feature-tip { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.floating-footnote { text-align: center; padding-top: 2px; }
.floating-footnote p { color: var(--muted); font-size: .875rem; margin: 0 0 7px; }
.floating-footnote > span { color: #8a8d93; font-size: .75rem; }
.touch-instruction { display: none; }
.preview-dialog { max-width: min(500px, calc(100vw - 28px)); width: 500px; max-height: calc(100dvh - 28px); border: 1px solid #e3d8c6; border-radius: 19px; padding: 20px; background: var(--ivory); color: var(--navy); box-shadow: 0 30px 100px rgba(7,27,54,.3); overflow-y: auto; }
.preview-dialog::backdrop { background: rgba(7,27,54,.55); backdrop-filter: blur(6px); }
.preview-dialog-inner { min-width: 0; }
.preview-dialog { transform-origin: top left; }
.preview-dialog.tile-is-expanding, .preview-dialog.tile-is-collapsing { overflow: hidden; will-change: transform; }
.tile-is-expanding::backdrop { animation: tile-backdrop-in .76s cubic-bezier(.4, 0, .2, 1) both; }
.tile-is-collapsing::backdrop { animation: tile-backdrop-in .7s cubic-bezier(.4, 0, .2, 1) reverse both; }
.preview-tile-held { animation-play-state: paused !important; }
.preview-tile-in-flight > .floating-surface, .preview-tile-in-flight > .feature-tip { visibility: hidden; }
.floating-surface.tile-morph-snapshot { position: absolute; left: 0; margin: 0; border: 0; box-shadow: none; transform-origin: top left; pointer-events: none; transition: none; z-index: 2; }
.preview-dialog.tile-is-collapsing .preview-dialog-inner { pointer-events: none; }
@keyframes tile-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.dialog-topline { padding: 0 0 16px; gap: 10px; }
.dialog-topline > span { font-size: .75rem; letter-spacing: 1px; }
.dialog-topline .tour-control { margin-left: auto; }
.preview-close { display: grid; place-items: center; flex-shrink: 0; height: 32px; width: 32px; background: #ede7df; border: 0; border-radius: 50%; font-size: 24px; line-height: 1; color: #526078; }
.preview-close:hover { background: #e3d8c7; color: var(--navy); }
.preview-dialog .app-window { box-shadow: none; }
.preview-dialog .showcase-caption { margin-top: 19px; }
.preview-dialog .showcase-caption h3 { font-size: 25px; }
.preview-dialog .demo-disclaimer { margin-bottom: 0; }
@keyframes card-drift { from { transform: translateY(0); } to { transform: translateY(var(--float-distance)); } }
@media (max-width: 1200px) and (min-width: 851px) {
  .hero { gap: 28px; grid-template-columns: .9fr 1.1fr; }
  .floating-surface { padding: 17px; }
  .float-title { font-size: 27px; }
  .float-eyebrow { letter-spacing: .3px; gap: 6px; }
  .mini-bill > span:first-child { flex-wrap: wrap; }
  .mini-bill-ends { font-size: .75rem; letter-spacing: -.2px; }
  .feature-cloud { height: 630px; }
  .float-officials { top: 175px; width: 50%; }
  .float-bills { top: 35px; width: 54%; right: 0; }
  .float-views { top: 366px; width: 57%; left: 27%; }
}
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding-block: 48px; }
  .floating-tour { max-width: 570px; }
  .feature-cloud { height: 650px; }
  .float-title { font-size: 31px; }
}
@media (max-width: 540px) {
  .floating-heading { padding-inline: 0; }
  .feature-cloud { height: 670px; margin-top: 12px; }
  .floating-surface { padding: 17px; border-radius: 14px; }
  .float-bills { width: 65%; top: 24px; right: 2%; --tilt: 4deg; }
  .float-officials { width: 61%; top: 214px; left: 1%; --tilt: -4deg; }
  .float-views { width: 66%; top: 436px; left: 30%; --tilt: 3deg; }
  .float-title { font-size: 28px; margin-block: 16px; }
  .float-eyebrow { letter-spacing: .15px; gap: 6px; }
  .float-eyebrow [data-icon] svg { width: 17px; height: 17px; }
  .mini-offices > span { padding: 8px; }
  .mini-bill > span:first-child { flex-wrap: wrap; gap: 4px; }
  .mini-bill-ends { font-size: .75rem; letter-spacing: -.3px; }
  .mini-quiz-options { gap: 5px; }
  .feature-tip { padding: 13px; }
  .feature-tip p { font-size: .875rem; }
  .feature-tip button { font-size: .8125rem; }
  .floating-footnote { padding-top: 35px; }
  .preview-dialog { padding: 14px; }
  .dialog-topline { flex-wrap: wrap; padding-bottom: 14px; }
  .dialog-topline > span { flex-basis: calc(100% - 100px); }
  .dialog-topline .tour-control { order: 3; margin-left: 0; }
  .preview-close { margin-left: auto; }
  .preview-dialog .app-masthead { padding-inline: 13px; }
  .preview-dialog .app-content { padding-inline: 13px; }
}
@media (max-width: 370px) {
  .feature-cloud { height: 810px; }
  .float-bills { width: 79%; right: 4%; top: 18px; }
  .float-officials { width: 74%; left: 3%; top: 275px; }
  .float-views { width: 78%; left: 19%; top: 550px; }
  .float-title { font-size: 28px; }
  .feature-tip { left: -4px; right: -4px; }
  .floating-footnote { padding-top: 26px; }
  .preview-dialog { padding: 12px; max-width: calc(100vw - 16px); }
  .preview-dialog .app-content { padding: 10px; }
  .preview-dialog .showcase-caption { gap: 8px; }
}
@media (hover: none) {
  .hover-instruction { display: none; }
  .touch-instruction { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-card { animation: none; }
  .floating-surface, .feature-tip, .float-plus { transition: none; }
}
html.preview-open { overflow: hidden; }
.dialog-active .floating-card { animation-play-state: paused; }