/* Homepage-only illustrations. Loaded by views/v2/home.php after ui.css. */

.home-anchor { scroll-margin-top: 84px; }

/* Hero: the sample board beside the composer */
.home-boardcard { position: relative; padding: 22px 20px 92px; border-radius: var(--r-xl); background: var(--bg-elevated); box-shadow: var(--lift-3); }
.home-boardcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 0 4px; }
.home-boardcard__head b { display: block; font-size: 1.05rem; letter-spacing: -0.02em; }
.home-boardcard .board__frame { box-shadow: 0 0 0 1px var(--hairline); }

.home-ping { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; max-width: 360px; margin-left: auto; padding: 12px 16px; border-radius: var(--r-md); background: rgba(29, 29, 31, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #f5f5f7; font-size: 0.85rem; line-height: 1.35; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.55); animation: home-float 6s var(--ease) infinite; }
.home-ping .t-xs { color: #a1a1a6; }
@keyframes home-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* "What your client sees" showcase */
.home-showcase { padding: 0; min-height: 0; background: none; }
.home-showcase .window { display: flex; flex-direction: column; height: 100%; }
.home-showcase .window__body { flex: 1; }
.home-proposal { display: grid; align-content: start; gap: 10px; min-height: 340px; padding: 30px 30px 100px; }
.home-proposal__eyebrow { color: var(--iris-ink); font-size: 0.75rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; }
.home-proposal__title { max-width: 24ch; margin-bottom: 8px; font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.035em; }
.home-line { display: block; width: 90%; height: 10px; border-radius: var(--r-pill); background: var(--fill); }
.home-line--short { width: 78%; }
.home-line--shorter { width: 52%; }
.home-proposal__blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.home-proposal__blocks i { height: 70px; border-radius: var(--r-sm); background: var(--tone-wash); }
.home-pin { position: absolute; }
.home-pin--1 { left: 64%; top: 86px; }
.home-pin--2 { left: 28%; top: 214px; }
.home-ping--inset { left: 16px; right: 16px; bottom: 16px; }

/* Version chips on the solid tile */
.home-versions { display: flex; flex-wrap: wrap; gap: 8px; }
.home-versions span { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.16); font-size: 0.8rem; font-weight: 700; }
.home-versions .is-live { background: #fff; color: var(--iris-ink); }

.home-darklink { color: #c9c2ff; }

/* Closing call to action */
.home-finale { overflow: hidden; isolation: isolate; }
.home-finale::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -60%; width: min(1100px, 140vw); height: 120%; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--grape) 14%, transparent), transparent); pointer-events: none; }
.home-finale__title { max-width: 16ch; margin-inline: auto; font-size: clamp(2.5rem, 6vw, 4.75rem); }