/* ═══════════════════════════════════════════════════════════════
   sms.rip — home-extra.css

   Our own refinements on top of the Design export. Kept in a SEPARATE
   file on purpose: home.css is overwritten verbatim whenever a new
   export is imported, so anything hand-tuned must live outside it.

   Loaded after home.css, so plain selector order wins — no !important.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Feature grid ──────────────────────────────────────────────
   The export renders six equal cards in a flat 3×2. That reads as a
   spec sheet rather than a product story, so: an asymmetric bento,
   a distinct hue per card, and depth that actually survives light
   mode (where the export's single hairline all but disappears). */

.features {
  gap: 16px;
  margin-block-start: 36px;
}

@media (min-width: 1000px) {
  /* TWO rows, always. A 12-column bed is what makes that work:
       row 1 — two half-width cards   (6 + 6)
       row 2 — four quarter cards     (3 + 3 + 3 + 3)
     A 6-column bed cannot express this: 3+3 then 2+2+2 leaves the
     sixth card orphaned on a third row. */
  .features { grid-template-columns: repeat(12, 1fr); }
  .feature              { grid-column: span 3; }
  .feature-hero,
  .feature:nth-child(2) { grid-column: span 6; }
}

/* Tablet: 2 × 3, still even — no orphan. */
@media (min-width: 640px) and (max-width: 999px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature, .feature-hero { grid-column: auto; }
}

/* Per-card hue. Rotating three tones keeps the section lively without
   turning six icons into a paint chart. */
.feature:nth-child(3n + 1) { --fh: var(--accent); }
.feature:nth-child(3n + 2) { --fh: var(--cyan); }
.feature:nth-child(3n + 3) { --fh: var(--violet); }

.feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 26px 24px 24px;
  border-radius: var(--r-xl);
  background: var(--surface-1);
  box-shadow: var(--e2);
  transition:
    transform .34s var(--spring),
    box-shadow .34s var(--ease),
    border-color .34s var(--ease);
}

/* Hairline along the top edge that draws in on hover — the same
   gesture as the step cards, so the page feels like one system. */
.feature::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent, var(--fh), transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .5s var(--ease);
}

/* Corner wash, tinted to the card's own hue. */
.feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    420px 220px at 12% -10%,
    color-mix(in srgb, var(--fh) 16%, transparent),
    transparent 64%
  );
  opacity: 0;
  transition: opacity .36s var(--ease);
}

.feature:hover {
  transform: translateY(-6px);
  box-shadow:
    var(--e3),
    0 18px 44px -22px color-mix(in srgb, var(--fh) 70%, transparent);
}
.feature:hover::before { transform: scaleX(1); }
.feature:hover::after  { opacity: 1; }

/* Lead card keeps its emphasis, now in its own hue rather than a flat tint. */
.feature-hero {
  background:
    radial-gradient(150% 170% at 6% 0%, color-mix(in srgb, var(--fh) 13%, transparent), transparent 60%),
    var(--surface-1);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fh) 26%, transparent), var(--e2);
}

/* ─── Icon chip ─────────────────────────────────────────────────
   Bigger, gradient-filled, with a soft cast shadow so it sits above
   the card rather than being painted onto it. */
.feature-ic {
  inline-size: 46px;
  block-size: 46px;
  margin-block-end: 18px;
  border-radius: 15px;
  color: var(--fh);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--fh) 20%, transparent),
      color-mix(in srgb, var(--fh) 7%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--fh) 30%, transparent),
    0 6px 16px -8px color-mix(in srgb, var(--fh) 65%, transparent);
  transition:
    transform .38s var(--spring),
    box-shadow .38s var(--ease),
    background .38s var(--ease);
}
.feature-ic svg { inline-size: 22px; block-size: 22px; }

.feature:hover .feature-ic {
  transform: translateY(-3px) scale(1.07) rotate(-5deg);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--fh) 32%, transparent),
      color-mix(in srgb, var(--fh) 12%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--fh) 42%, transparent),
    0 12px 26px -10px color-mix(in srgb, var(--fh) 80%, transparent);
}
[dir="rtl"] .feature:hover .feature-ic { transform: translateY(-3px) scale(1.07) rotate(5deg); }

/* ─── Type ──────────────────────────────────────────────────────*/
.feature-t {
  font-size: 1.0625rem;
  letter-spacing: -0.022em;
  line-height: 1.3;
}
.feature-hero .feature-t { font-size: 1.25rem; }

.feature-p {
  margin-block-start: 9px;
  font-size: 0.9375rem;
  line-height: 1.62;
  max-inline-size: 46ch;
}

/* Light mode needs real elevation: on white, a single hairline reads
   as a table cell, not a card. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .feature {
    background: #fff;
    box-shadow:
      0 1px 2px rgba(13, 22, 32, .06),
      0 8px 20px -10px rgba(13, 22, 32, .12),
      0 0 0 1px var(--line-soft);
  }
  :root:not([data-theme="dark"]) .feature:hover {
    box-shadow:
      0 2px 4px rgba(13, 22, 32, .07),
      0 22px 46px -20px color-mix(in srgb, var(--fh) 55%, rgba(13, 22, 32, .22)),
      0 0 0 1px color-mix(in srgb, var(--fh) 22%, var(--line-soft));
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature, .feature-ic, .feature::before, .feature::after { transition: none; }
  .feature:hover { transform: none; }
  .feature:hover .feature-ic { transform: none; }
}