/* ===== Hero concept layers — preview only (7 Sep 2026). Multi-colour by Kabir's instruction. ===== */
:root{
  --hue-lav:#E9E4FF; --hue-lav-2:#C9BDFF;
  --hue-mint:#D6EDEA; --hue-mint-2:#A9D9D3;
  --hue-sky:#DCE8FB; --hue-sky-2:#B4CDF6;
  --hue-sand:#FBEFD2; --hue-sand-2:#F3DBA0;
}
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hx{position:absolute;inset:0;z-index:1;pointer-events:none}
@media (max-width:1099px){.hx{display:none}}

/* shared primitives */
.el{position:relative;display:flex;gap:6px}
.el .c{flex:1;border-radius:6px;background:var(--hue)}
.el.k-tile .c{height:112px;border-radius:10px}
.el.k-tile.sm .c{height:84px}
.el.k-bars{flex-direction:column;gap:8px}
.el.k-bars .c{height:12px;border-radius:999px}
.el.k-bars .c:nth-child(2){width:78%}.el.k-bars .c:nth-child(3){width:56%}
.el.k-pill .c{height:40px;border-radius:999px}
.el.k-field .c{height:40px;border-radius:8px;background:#fff;border:1px solid var(--hue-2)}
.el .c:nth-child(1){opacity:1}.el .c:nth-child(2){opacity:.62}.el .c:nth-child(3){opacity:.3}
.el.rev{flex-direction:row-reverse}
.el.rev .tag{left:auto;right:10px}

/* tags obey the chip rule: white ground, teal hairline. Empty = dashed line-strong */
.tag{position:absolute;top:-13px;left:10px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px 0 7px;border-radius:var(--r-sm);font:600 .74rem/1 var(--font);white-space:nowrap;background:#fff;border:1px dashed var(--line-strong);color:var(--muted);transition:border-color .25s var(--ease),color .25s var(--ease)}
.tag svg{width:12px;height:12px;flex:none}
.tag .full{display:none;align-items:center;gap:6px}
.tag .empty{display:inline-flex;align-items:center;gap:6px}
.tag.on{border-style:solid;border-color:var(--primary);color:var(--primary-dark)}
.tag.on .full{display:inline-flex}.tag.on .empty{display:none}
.tag.on svg{color:var(--primary)}
.el.rev .tag{left:auto;right:10px}

/* ---------- Concept A — margin stacks (Equals arrangement) ---------- */
.hx-a .col{position:absolute;top:0;bottom:0;width:360px;display:flex;flex-direction:column;justify-content:center;gap:34px;padding:40px 0}
.hx-a .col.l{left:-72px}.hx-a .col.r{right:-72px}
.hx-a .col.r .el{flex-direction:row-reverse}
.hx-a .col.r .el.k-bars{flex-direction:column;align-items:flex-end}
/* tags sit on the INNER edge so the viewport never clips them */
.hx-a .col.l .el .tag{left:auto;right:10px}
.hx-a .col.r .el .tag{left:10px;right:auto}

/* ---------- Concept B — signal bands (Mindoo arrangement) ---------- */
.hx-b .band{position:absolute;left:-24px;right:-24px;display:grid;grid-template-columns:repeat(22,1fr);gap:12px;align-items:center}
.hx-b .band .el{display:block}
.hx-b .band .el .c{display:block}
.hx-b .band .el .c:nth-child(n+2){display:none}
.hx-b .band .el .c{opacity:var(--o,1);width:100%}
.hx-b .band .el.k-bars .c:nth-child(n+2){display:block;margin-top:6px}
.hx-b .band .el.k-bars .c{height:10px}
.hx-b .band .el.k-tile .c{height:64px}
.hx-b .band .el.k-tile.sm .c{height:48px}
.hx-b .band .el.k-pill .c{height:34px}
.hx-b .band .el.k-field .c{height:34px}
.hx-b .band .el .tag{opacity:1}
.hx-b .band .el.lo .tag{top:auto;bottom:-13px}
.hx-b .scan{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--primary);opacity:.55;transform:translateX(-10px)}
.hx-b .scan .lbl{position:absolute;top:18px;left:8px;font:600 .68rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--primary-dark);background:#fff;border:1px solid var(--primary);border-radius:var(--r-sm);padding:6px 8px;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hx-b .scan{display:none}.tag{border-style:solid;border-color:var(--primary);color:var(--primary-dark)}.tag .full{display:inline-flex}.tag .empty{display:none}}

/* ---------- preview chrome ---------- */
.hc-bar{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);border-radius:999px;padding:6px 8px 6px 14px;font:600 .8rem/1 var(--font);color:var(--muted)}
.hc-bar a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;color:var(--ink);text-decoration:none;border:1px solid transparent}
.hc-bar a:hover{background:var(--paper)}
.hc-bar a.cur{background:var(--primary-dark);color:#fff}
.hc-bar a:focus-visible{outline:2px solid var(--primary-dark);outline-offset:2px}
.hc-note{background:var(--paper);border-top:1px solid var(--line);color:var(--muted);text-align:center;font-size:.9rem;padding:var(--s7) var(--s5)}
.hc-note a{color:var(--primary)}

/* ---------- Concept B type variant: Libre Baskerville display (Kabir, 7 Sep) — preview exception to one-typeface ---------- */
.serif .hero h1{font-family:"Libre Baskerville",Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:-.015em;line-height:1.08;font-size:clamp(2.4rem,5vw,4.25rem)}
.serif .hero .sub{font-size:1.15rem}