/* laundrify website-v2 — /features hub (page-specific)
   Layered on home.css, which is the shared component library: tokens, header, footer,
   .btn, .kicker, .sec-head, .curve, .grad, .more, and the .feat / .vz feature-card +
   viz components are all reused from there. This file adds only what /features needs.

   Inventory layout = Variant C (3 · 2 · 4). The alternative endless fade-peek marquee
   (Variant A) is preserved as the documented fallback in features-inventory-variants.html. */

/* ---- compact hero — pulled under the condensing header like home (DESIGN.md §5) ---- */
.hero-compact{position:relative;overflow:hidden;text-align:center;margin-top:-81px;padding:138px 0 28px;
  background:radial-gradient(860px 440px at 50% -8%,rgba(113,174,248,.10),transparent 62%)}
.hero-compact .kicker{margin-bottom:14px}
.hero-compact h1{font-size:clamp(34px,4.8vw,56px);line-height:1.03;font-weight:900;margin:0}
.hero-compact .lede{font-size:18px;color:var(--mut);max-width:48ch;margin:18px auto 0;text-wrap:pretty}

/* ---- feature inventory (Variant C: three stacked rows, 3 · 2 · 4) ---- */
.feat-inventory{padding:20px 0 86px}
.vc{display:grid;gap:22px}
.vc .feat{grid-column:auto}              /* reset home.css's .feat{grid-column:span 2}: one card = one track */
.vc-row{display:grid;gap:22px}
.vc-r3{grid-template-columns:repeat(3,1fr)}
.vc-r2{grid-template-columns:repeat(2,1fr)}
.vc-r4{grid-template-columns:repeat(4,1fr)}
.vc .feat-viz{height:188px}
.vc-r2 .feat-viz{height:216px}           /* row-2 cards are wider, so a touch taller */
.vc-r3 .feat-body h3,.vc-r2 .feat-body h3{font-size:18.5px}
/* Benachrichtigungen viz: anchor the phone to the TOP so its upper frame + notch stay visible
   (the shared .vz-phone in home.css is bottom-anchored; scoped override leaves home untouched) */
.vc-r3 .vz-phone{top:20px;bottom:auto}
.vc-r3 .vz-toast{top:82px}

/* rich-card body: capability bullets + bottom-pinned "Mehr erfahren" (the .more arrow lives in home.css) */
.vc .feat-body{display:flex;flex-direction:column;flex:1}
.feat-points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.feat-points li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--mut);line-height:1.45}
.feat-points .ico{flex:none;color:var(--active);font-size:13px;margin-top:.18em}
.vc .feat .more{margin-top:auto;padding-top:16px;font-size:13.5px}

/* ---- row 3: compact "light feature" cards (quiet white hairline cards) ---- */
.lfeat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 24px;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.lfeat:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 20px 44px -28px rgba(44,65,91,.4)}
.lf-ico{width:42px;height:42px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--tint);border:1px solid #d6ebff;color:var(--active);font-size:20px;margin-bottom:15px}
.lfeat h4{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em;margin:0;color:var(--ink)}
.lfeat p{margin:7px 0 0;font-size:13.5px;color:var(--mut);line-height:1.5}

/* ---- slim reusable dark CTA (the leaf pages share this pattern) ---- */
.cta-slim{position:relative;overflow:hidden;background:var(--deep);color:#fff}
.cta-slim::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 320px at 50% -45%,rgba(113,174,248,.18),transparent 64%)}
/* closing sign-off: the header carries the persistent Amazon CTA, so this band is a centered
   statement rather than a repeated button (Mike 2026-06-14) */
.cta-slim .wrap{position:relative;display:flex;justify-content:center;text-align:center;padding:40px 24px}
.cta-slim h2{font-size:clamp(23px,2.7vw,32px);font-weight:900;color:#fff;margin:0;letter-spacing:-.015em}
.cta-slim .grad{background:linear-gradient(96deg,#8cc0ff,var(--primary));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- responsive ---- */
@media (max-width:880px){
  .hero-compact{padding-top:106px}
  .vc-r3,.vc-r2{grid-template-columns:1fr}
  .vc-r4{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){ .vc-r4{grid-template-columns:1fr} }