/* hounsa.com v4 — interaction layer: before/after simulator with month
   calendar, assistant demo, scroll motion. Layered on landing2/3. */

/* simulator */
.sim{background:var(--ivory);padding:130px 0 120px;position:relative;overflow:hidden}
.sim .head{text-align:center;max-width:760px;margin:0 auto}
.sim .sec-k{color:var(--em)}
.sim .sec-p{color:var(--muted);opacity:1;margin-inline:auto}
.personas{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:36px 0 0}
.persona{display:flex;align-items:center;gap:12px;padding:10px 18px 10px 14px;border-radius:18px;border:1.5px solid var(--line);background:#fff;font:inherit;color:var(--text);cursor:pointer;text-align:start;transition:border-color .2s,box-shadow .2s,transform .2s}
.persona:hover{transform:translateY(-2px)}
.persona[aria-pressed="true"]{border-color:var(--em);box-shadow:0 14px 30px -18px rgba(14,107,79,.6)}
.persona .av{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:var(--em)}
.persona:nth-child(2) .av{background:#B7701F}
.persona:nth-child(3) .av{background:#2E9C76}
.persona b{display:block;font-size:16px;line-height:1.3}
.persona small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.sim-box{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;margin-top:28px}
.sim-ctrl,.sim-cal{padding:26px;border-radius:var(--r-l);background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(6,17,13,.35)}
.rng{display:block;margin-bottom:22px}
.rng .top{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:15px}
.rng .top output{font:600 20px Inter,var(--ar);color:var(--em-d)}
.rng input{width:100%;margin-top:12px;accent-color:var(--em);height:28px;cursor:pointer}
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:16px;background:var(--card)}
.seg2 button{height:46px;border:0;border-radius:12px;background:transparent;font:700 16px var(--ar);color:var(--muted);cursor:pointer;transition:background .25s,color .25s}
.seg2 button[aria-pressed="true"]{background:#fff;color:var(--text);box-shadow:0 4px 14px -6px rgba(0,0,0,.25)}
.seg2 button.with[aria-pressed="true"]{background:var(--em);color:#fff}
.verdict{margin-top:20px;padding:18px;border-radius:18px;background:#FDECEA;color:#7A1C14;transition:background .4s,color .4s}
.verdict.good{background:#E6F4EC;color:var(--em-x)}
.verdict b{display:block;font-size:19px;line-height:1.5}
.verdict span{display:block;margin-top:4px;font-size:15px;opacity:.85}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.cal-head b{font-size:18px}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:middle}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:16px}
.day{position:relative;aspect-ratio:1/1.05;border-radius:12px;padding:6px 4px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;background:var(--card);font-size:12px;transition:background .35s var(--ease),color .35s,transform .35s var(--ease);transition-delay:calc(var(--i,0) * 14ms)}
.day .d{font:600 12px Inter,var(--ar);opacity:.7}
.day .v{font:600 12px Inter,var(--ar)}
.day.ok{background:#E3F2EA;color:var(--em-x)}
.day.tight{background:#FFF1DE;color:#7A4A10}
.day.out{background:#FBE1DE;color:#8E2117}
.day.pay{background:var(--em);color:#fff}
.day.pay .v{font-size:11px}
.day .pin{position:absolute;top:4px;inset-inline-end:4px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.cal-note{margin:14px 0 0;font-size:13px;color:var(--muted)}
.illus{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:5px 12px;border-radius:999px;background:#fff;border:1px dashed #C9D3CE;color:var(--muted);font-size:13px}
@media (max-width:960px){.sim{padding:100px 0 90px}.sim-box{grid-template-columns:1fr}}
@media (max-width:520px){.persona{flex:1 1 100%}.sim-ctrl,.sim-cal{padding:18px}.cal{gap:4px}.day{border-radius:9px;padding:4px 2px}.day .v{font-size:10px}.day .d{font-size:10px}}

/* assistant demo */
.ask{position:relative;max-width:820px;margin:56px auto 0;padding:26px;border-radius:var(--r-l);background:linear-gradient(160deg,#0E2A21,#0C1C16);border:1px solid rgba(255,255,255,.08)}
.ask .chips{display:flex;flex-wrap:wrap;gap:8px}
.ask .chips button{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:600 15px var(--ar);cursor:pointer;transition:background .2s,border-color .2s}
.ask .chips button:hover,.ask .chips button[aria-pressed="true"]{background:rgba(95,211,163,.16);border-color:var(--mint)}
.thread{margin-top:18px;min-height:150px;display:grid;gap:10px;align-content:start}
.bub{max-width:88%;padding:12px 16px;border-radius:18px;font-size:16px;line-height:1.7;animation:bub .35s var(--ease)}
.bub.me{justify-self:start;background:var(--em);color:#fff;border-end-start-radius:6px}
.bub.ai{justify-self:end;background:#fff;color:var(--text);border-end-end-radius:6px}
.bub.ai b{color:var(--em)}
.bub.typing{display:inline-flex;gap:4px}
.bub.typing i{width:7px;height:7px;border-radius:50%;background:#9AA8A2;animation:dot 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.25;transform:translateY(-3px)}}
@keyframes bub{from{opacity:0;transform:translateY(8px)}}
.ask .foot{margin-top:14px;font-size:13px;color:#8FA59C}
@media (prefers-reduced-motion:reduce){.bub,.bub.typing i{animation:none}.day{transition:none}}

/* scroll motion: staggered cards */
.ai-grid .rv:nth-child(2),.obl .rv:nth-child(2),.trust .rv:nth-child(2),.strip .rv:nth-child(2){transition-delay:.08s}
.ai-grid .rv:nth-child(3),.obl .rv:nth-child(3),.trust .rv:nth-child(3),.strip .rv:nth-child(3){transition-delay:.16s}
.ai-grid .rv:nth-child(4),.obl .rv:nth-child(4),.trust .rv:nth-child(4),.strip .rv:nth-child(4){transition-delay:.24s}
.obl .rv:nth-child(5){transition-delay:.32s}.obl .rv:nth-child(6){transition-delay:.4s}
.ai-card,.obl li,.trust li{transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .25s,border-color .25s}
.ai-card:hover{border-color:rgba(95,211,163,.35)}
.obl li:hover{box-shadow:0 24px 46px -28px rgba(6,17,13,.5)}