/* ClipLab Fruit's own look on top of the shared landing layout (cl-home.css).
   Casey 23 Oct 2026: fruit.nyptid.com must not look like ClipLab; it matches the dashboard
   (banana to berry gradient, Outfit headings, fruit glows). Load it AFTER cl-home.css. */
body.hm.fruit {
  --hm-bg: #07070b;
  --hm-card: rgba(255, 255, 255, 0.035);
  --hm-line: rgba(255, 255, 255, 0.08);
  --hm-line-2: rgba(255, 255, 255, 0.14);
  --hm-muted: #a5a5b2;
  --hm-dim: #6c6c7a;
  --hm-violet: #ff9a3c;
  --hm-violet-2: #ffd23f;
  --hm-grad: linear-gradient(100deg, #ffe066 0%, #ff9a3c 55%, #ff5c8a 100%);
  --fr-display: Outfit, Inter, system-ui, sans-serif;
  background: var(--hm-bg);
}
body.hm.fruit::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 85% -10%, rgba(255, 210, 63, 0.10), transparent 60%),
              radial-gradient(700px 480px at 15% 110%, rgba(255, 92, 138, 0.08), transparent 60%),
              radial-gradient(600px 420px at -5% 25%, rgba(155, 225, 93, 0.06), transparent 60%); }
body.hm.fruit main, body.hm.fruit .hm-foot { position: relative; z-index: 1; }

body.hm.fruit h1, body.hm.fruit h2, body.hm.fruit h3, body.hm.fruit .hm-logo, body.hm.fruit .cp-price {
  font-family: var(--fr-display); }
body.hm.fruit h2 { letter-spacing: -0.025em; }
body.hm.fruit .hm-logo img { box-shadow: 0 0 0 2px rgba(155, 225, 93, 0.35), 0 0 22px rgba(155, 225, 93, 0.35); }
body.hm.fruit .hm-k { color: #ffd23f; }
body.hm.fruit .hm-eyebrow-dot { background: #9be15d; box-shadow: 0 0 0 4px rgba(155, 225, 93, 0.18); }
body.hm.fruit .hm-nav { background: rgba(7, 7, 11, 0.72); }

body.hm.fruit .hm-btn-glow {
  color: #1d1205; background: var(--hm-grad); border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 154, 60, 0.25), 0 12px 36px rgba(255, 154, 60, 0.32);
}
body.hm.fruit .hm-btn-glow:hover { box-shadow: 0 0 0 1px rgba(255, 154, 60, 0.4), 0 18px 46px rgba(255, 92, 138, 0.38); }
body.hm.fruit .hm-btn:focus-visible { outline-color: #ffd23f; }

body.hm.fruit .hm-beam {
  background:
    radial-gradient(46% 60% at 50% 0%, rgba(255, 170, 60, 0.30), transparent 72%),
    radial-gradient(28% 40% at 75% 12%, rgba(255, 92, 138, 0.18), transparent 70%),
    radial-gradient(30% 40% at 25% 16%, rgba(155, 225, 93, 0.14), transparent 70%);
}

body.hm.fruit .hm-card { backdrop-filter: blur(10px); transition: border-color 0.15s, transform 0.15s; }
body.hm.fruit .hm-card:hover { border-color: rgba(255, 210, 63, 0.30); }
body.hm.fruit .hm-sec-alt { background: linear-gradient(180deg, rgba(255, 210, 63, 0.025), rgba(255, 92, 138, 0.02)); }

/* hero: text on the left, the phone on the right */
body.hm.fruit .fr-hero { text-align: left; }
body.hm.fruit .fr-hero .hm-h1 { margin-left: 0; max-width: 13ch; }
body.hm.fruit .fr-hero .hm-lede { margin-left: 0; }
body.hm.fruit .fr-phone { border-radius: 30px; border-color: rgba(255, 210, 63, 0.25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 80px rgba(255, 154, 60, 0.18); }
body.hm.fruit .fr-idea textarea:focus { outline: 0; border-color: rgba(255, 210, 63, 0.5); box-shadow: 0 0 0 4px rgba(255, 210, 63, 0.08); }
body.hm.fruit .fr-chips button:hover { color: #ffd23f; border-color: rgba(255, 210, 63, 0.5); }

/* starters */
body.hm.fruit .st-tabs button.on { background: var(--hm-grad); color: #1d1205; border-color: transparent; }
body.hm.fruit .st-card:hover { border-color: rgba(255, 210, 63, 0.45); background: rgba(255, 210, 63, 0.05); }

/* plans */
body.hm.fruit .cp-plan:nth-child(2) { border-color: rgba(255, 210, 63, 0.45);
  background: linear-gradient(180deg, rgba(255, 210, 63, 0.08), rgba(255, 255, 255, 0.02)); }
body.hm.fruit .cp-price { background: var(--hm-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.hm.fruit .cp-price small { -webkit-text-fill-color: var(--hm-muted); }

/* comparison table on /vs/korpi */
body.hm.fruit table.vs td.us { background: rgba(255, 210, 63, 0.06); }

@media (max-width: 820px) {
  body.hm.fruit .fr-hero { text-align: center; }
  body.hm.fruit .fr-hero .hm-h1, body.hm.fruit .fr-hero .hm-lede { margin-left: auto; margin-right: auto; }
  body.hm.fruit .fr-phone { transform: none; }
}