/* CONTEXT
   module: websites/pgpro365
   purpose: The richer home-page blocks: the "built by Spanar Systems" trust strip and band, the alternating feature showcases with small product panels (beds, receipt, complaint tracker), the audience cards and the gradient headline word. Product panels use fixed light colours like the app itself and always carry the "sample data" note.
   route: none   permission: none   tenant: not applicable   audience: public
   tests: lib/check.mjs (size) */

.grad { background: linear-gradient(100deg, var(--brand), #22d3ee 55%, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.strip { border-block: 1px solid var(--line); background: var(--surface); }
.strip-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.2rem 0; }
.strip p { margin: 0; color: var(--muted); font-weight: 600; }
.strip a.sp { color: var(--ink); font-weight: 800; letter-spacing: .01em; text-decoration: none; }
.strip a.sp:hover { color: var(--brand); }
.facts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; list-style: none; padding: 0; margin: 0; font-size: .95rem; font-weight: 600; }
.facts li { display: flex; align-items: center; gap: .45rem; }
.facts .icon { width: 18px; height: 18px; color: var(--brand); }

.show { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.show.rev .show-text { order: 2; }
.show-text .ticks { margin-top: 1rem; }
.show-art { position: relative; }
.show-art::before { content: ""; position: absolute; inset: -6% -4%; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent); z-index: 0; }
.ui { position: relative; z-index: 1; background: #fff; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: var(--shadow); padding: 1.2rem; }
.ui h3 { font-size: 1rem; margin: 0 0 .8rem; color: #0f172a; }
.ui .note { margin: .9rem 0 0; font-size: .75rem; color: #64748b; }
.ui .bedgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45rem; }
.ui .b { display: grid; place-items: center; aspect-ratio: 1.4; border-radius: 8px; font-size: .7rem; font-weight: 700; background: #ccfbf1; color: #115e59; }
.ui .b.d { background: #fef3c7; color: #92400e; } .ui .b.f { background: #f1f5f9; color: #64748b; border: 1px dashed #cbd5e1; }
.ui .lg { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; font-size: .75rem; color: #64748b; }
.receipt { font-variant-numeric: tabular-nums; }
.receipt .head { display: flex; justify-content: space-between; font-weight: 800; border-bottom: 1px dashed #cbd5e1; padding-bottom: .7rem; margin-bottom: .7rem; }
.receipt .ln { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .92rem; color: #334155; }
.receipt .tot { display: flex; justify-content: space-between; border-top: 2px solid #0f172a; margin-top: .6rem; padding-top: .7rem; font-weight: 800; font-size: 1.1rem; }
.receipt .stamp { display: inline-block; margin-top: .8rem; padding: .25rem .8rem; border: 2px solid #0f766e; color: #0f766e; border-radius: 8px; font-weight: 800; transform: rotate(-4deg); letter-spacing: .08em; }
.track { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.track li { position: relative; padding: 0 0 1.1rem 2rem; font-size: .92rem; color: #334155; }
.track li::before { content: ""; position: absolute; left: .35rem; top: .25rem; width: .8rem; height: .8rem; border-radius: 50%; background: #0f766e; }
.track li::after { content: ""; position: absolute; left: .72rem; top: 1.1rem; bottom: -.1rem; width: 2px; background: #cbd5e1; }
.track li:last-child::after { display: none; }
.track li.todo::before { background: #cbd5e1; }
.track b { display: block; color: #0f172a; }
.aud { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.aud a.card { text-decoration: none; color: inherit; display: block; transition: transform .2s, border-color .2s; }
.aud a.card:hover { transform: translateY(-3px); border-color: var(--brand); }
.aud .badge { margin-bottom: .5rem; }
.aud .go { display: inline-block; margin-top: 1rem; color: var(--brand); font-weight: 700; }
.band { background: linear-gradient(135deg, #0b3f3b, #0f766e 60%, #115e59); color: #ecfeff; border-radius: 22px; padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; }
.band h2 { color: #fff; margin-bottom: .4em; } .band p { color: #ccfbf1; margin: 0; }
.band .btn { background: #fff; color: #0f766e; border-color: #fff; justify-self: start; }
.band .btn:hover { background: #ccfbf1; border-color: #ccfbf1; color: #0b3f3b; }
.band a:not(.btn) { color: inherit; text-underline-offset: 3px; }
.band .tag { display: inline-block; margin-bottom: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: #5eead4; }

@media (max-width: 880px) {
  .show, .band { grid-template-columns: 1fr; }
  .show.rev .show-text { order: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .show-art, .card { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  }
}

/* Dark hero */
.hero-dark { position: relative; overflow: hidden; background: #050b17; color: #e6edf5; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 7vw, 6rem); text-align: center; }
.hero-dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1000px 520px at 50% -12%, rgb(45 212 191 / .28), transparent 70%), radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1px); background-size: auto, 30px 30px; mask-image: linear-gradient(#000 60%, transparent); }
.hero-dark .wrap { position: relative; }
.hero-dark h1 { color: #fff; font-size: clamp(2.4rem, 6.2vw, 4.7rem); max-width: 18ch; margin-inline: auto; letter-spacing: -.035em; }
.hero-dark .lead { color: #a9b8cc; margin-inline: auto; font-size: clamp(1.05rem, 2vw, 1.3rem); }
.hero-dark .actions { justify-content: center; }
.hero-dark .btn { background: #2dd4bf; border-color: #2dd4bf; color: #04201c; }
.hero-dark .btn:hover { background: #5eead4; border-color: #5eead4; color: #04201c; }
.hero-dark .btn-ghost { background: transparent; color: #fff; border-color: rgb(255 255 255 / .3); }
.hero-dark .btn-ghost:hover { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .5); }
.hero-dark .eyebrow.pill-e { background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14); color: #5eead4; }
.hero-dark .fine { color: #8aa0b8; } .hero-dark .fine a { color: #5eead4; }
.hero-dark .stage { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: left; }
.hero-dark .stage-note { color: #7d93ad; }
.hero-dark .grad { background: linear-gradient(100deg, #5eead4, #38bdf8 50%, #fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Feature explorer */
.dark-sec { background: #07101f; color: #e2e8f0; }
.dark-sec h2 { color: #fff; } .dark-sec .lead { color: #a9b8cc; } .dark-sec .eyebrow { color: #5eead4; }
.explorer .tablist { display: none; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 2.4rem; }
.js .explorer .tablist { display: flex; }
.tab { font: inherit; font-weight: 650; color: #cbd5e1; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-radius: 999px; padding: .55rem 1.1rem; cursor: pointer; transition: background .2s, color .2s; }
.tab:hover { background: rgb(255 255 255 / .12); color: #fff; }
.tab[aria-selected="true"] { background: #2dd4bf; border-color: #2dd4bf; color: #04201c; }
.pane { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.pane + .pane { margin-top: 4.5rem; }
.js .pane + .pane { margin-top: 0; }
.pane[hidden] { display: none; }
.explain h2, .explain h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .5em; }
.lbl { margin: 1.3rem 0 .25rem !important; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.dark-sec .lbl { color: #5eead4; } .dark-sec .explain p:not(.lbl) { color: #c0cddd; } .dark-sec .ticks .icon { color: #5eead4; }
.explain p:not(.lbl) { color: var(--muted); }

/* Panel parts */
.ui .kv { margin: 0; } .ui .kv div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid #e2e8f0; font-size: .9rem; }
.ui .kv div:first-child { border-top: 0; } .ui dt { color: #64748b; } .ui dd { margin: 0; font-weight: 600; text-align: right; }
.ui .tag { font-size: .72rem; font-weight: 800; padding: .15rem .6rem; border-radius: 999px; margin-left: .3rem; }
.ui .tag.ok { background: #ccfbf1; color: #115e59; } .ui .tag.wait { background: #fef3c7; color: #92400e; }
.ui .opts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; } .ui .opts span { border: 1px solid #cbd5e1; border-radius: 10px; padding: .4rem .9rem; font-size: .85rem; font-weight: 700; color: #334155; }
.ui .opts span:first-child { background: #0f766e; border-color: #0f766e; color: #fff; }
.ui .log { list-style: none; margin: 0; padding: 0; } .ui .log li { padding: .65rem 0; border-top: 1px solid #e2e8f0; display: flex; flex-direction: column; font-size: .9rem; }
.ui .log li:first-child { border-top: 0; } .ui .log span { color: #64748b; font-size: .8rem; }
.ui .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .9rem; } .ui .mini div { border: 1px solid #e2e8f0; border-radius: 10px; padding: .6rem; }
.ui .mini b { display: block; font-size: 1.3rem; } .ui .mini span { font-size: .72rem; color: #64748b; }
.ui .spark { display: flex; align-items: flex-end; gap: .4rem; height: 4.2rem; margin-bottom: 1rem; } .ui .spark i { flex: 1; background: linear-gradient(#2dd4bf, #0f766e); border-radius: 5px 5px 0 0; }
.ui .spark .s1 { height: 40%; } .ui .spark .s2 { height: 52%; } .ui .spark .s3 { height: 60%; } .ui .spark .s4 { height: 70%; } .ui .spark .s5 { height: 82%; } .ui .spark .s6 { height: 92%; }
.ui .ph { margin: 0 0 .3rem; font-weight: 700; font-size: .9rem; } .ui .ln { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .9rem; }

@media (max-width: 880px) { .pane { grid-template-columns: 1fr; } }

.site-header.dark { background: rgb(5 11 23 / .72); border-bottom-color: rgb(255 255 255 / .1); }
.site-header.dark .brand-name, .site-header.dark .nav a:not(.btn) { color: #fff; }
.site-header.dark .brand-name i { color: #5eead4; } .site-header.dark .by { color: #9fb3c8; }
.site-header.dark .nav .signin { color: #9fb3c8; } .site-header.dark .nav a[aria-current] { color: #5eead4; }
.site-header.dark .btn { background: #2dd4bf; border-color: #2dd4bf; color: #04201c; }
.site-header.dark .menu-btn { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .2); }
@media (max-width: 880px) { .site-header.dark .nav { background: #07101f; border-bottom-color: rgb(255 255 255 / .1); } .site-header.dark .nav a:not(.btn) { border-bottom-color: rgb(255 255 255 / .1); } }

.strip.dark { background: #07101f; border-color: rgb(255 255 255 / .08); }
.strip.dark p, .strip.dark .facts { color: #b6c3d4; } .strip.dark a.sp { color: #fff; } .strip.dark .facts .icon { color: #5eead4; }

/* Property types on the landing page */
.kinds { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin: 1.6rem auto 0; max-width: 54rem; }
.kinds-label { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8aa0b8; margin-right: .3rem; }
.kinds a { color: #dbe7f3; text-decoration: none; font-weight: 650; font-size: .95rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .16); background: rgb(255 255 255 / .06); transition: background .2s, border-color .2s, color .2s; }
.kinds a:hover { background: rgb(45 212 191 / .18); border-color: #2dd4bf; color: #fff; }
.aud .card > .icon { width: 34px; height: 34px; margin-bottom: .6rem; }
.site-header.dark .nav .callnum { color: #5eead4; }