/* ═══════════════════════════════════════════════════════════
   Knovit Landing · v7 — Use Cases stack
   Dark backdrop · wide rounded cards stack vertically · a single
   sticky phone (desktop) crossfades between four bespoke screens
   as you scroll past each card. On mobile, each card carries its
   own inline phone so the visual story doesn't collapse.

   This file ONLY styles the new use-cases section. v6 styles are
   left untouched. The HTML wrapper class for the section is
   `.kn-uc` (not `.kn-cases`) so nothing in v6 is overridden.
   ═══════════════════════════════════════════════════════════ */

.kn-uc {
  position: relative;
  background: #0F0F11;
  color: #fff;
  padding: 140px 0 140px;
  /* No overflow:hidden — it would turn this section into a scroll container
     and break `position: sticky` for the phone rail inside. */
}

/* Section intro (matches editorial tone of the rest of the page) */
.kn-uc__intro {
  max-width: 820px;
  margin: 0 auto 80px;
  padding: 0 32px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.kn-uc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 11.5px var(--font-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 22px;
}
.kn-uc__eyebrow-tick {
  width: 24px; height: 1px;
  background: rgba(255,255,255,0.35);
}
.kn-uc__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
  margin: 0 0 20px;
  text-wrap: balance;
}
.kn-uc__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--knovit-lilac, #F0A2EE);
}
.kn-uc__sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  margin: 0 auto;
  max-width: 580px;
  text-wrap: pretty;
}

/* ── Stack container ─────────────────────────────────────── */
.kn-uc__container {
  position: relative;
  max-width: 1720px;
  margin: 0 auto;
  padding: 0 32px;
}

.kn-uc__cards {
  display: flex;
  flex-direction: column;
  /* Dark band between cards — the phone bleeds past the rounded card edges
     into this band, reading as if it sits *inside / under* the card. */
  gap: 40px;
  position: relative;
  z-index: 1;
}

/* ── Card ───────────────────────────────────────────────────
   The <article> is a TALL, TRANSPARENT scroll-budget wrapper. It has NO
   overflow clip — that's critical, because an overflow:hidden ancestor would
   disable position:sticky on the phone's frame. The visible rounded card is
   the .kn-uc__card-sticky child, which pins to the viewport while this tall
   wrapper scrolls past — giving the phone its travel budget. */
.kn-uc__card {
  position: relative;
  /* px (not vh) so it never collapses to the phone's height on short
     viewports — guarantees real travel room above the pinned frame. */
  min-height: 1180px;
}

/* The visible rounded card — pins in the viewport (sticky) AND clips the
   phone (overflow:hidden). Its OWN overflow is fine; only an ANCESTOR's
   overflow would break the stickiness. */
.kn-uc__card-sticky {
  position: sticky;
  top: max(40px, calc(50vh - 360px));
  height: min(720px, 84vh);
  border-radius: 44px;
  overflow: hidden;
  background: var(--uc-bg);
  display: grid;
  grid-template-columns: 54% 46%;
  align-items: center;
  color: var(--ink-900);
  box-shadow: 0 2px 1px rgba(255,255,255,0.5) inset, 0 30px 80px -40px rgba(0,0,0,0.5);
}
.kn-uc__card-text {
  grid-column: 1;
  align-self: center;
  padding: 0 clamp(24px, 3vw, 56px) 0 clamp(40px, 5vw, 110px);
  position: relative;
  z-index: 2;
}

/* ── Phone stage (right column) ─────────────────────────── */
.kn-uc__stage {
  grid-column: 2;
  position: relative;
  align-self: stretch;
  overflow: hidden; /* extra safety clip within the column */
}
.kn-uc__stage-phone {
  /* The phone is fully visible & STILL — centred in the pinned frame. It is
     NOT translated; instead the screen content inside it scrolls (see
     .kn-uc__screen-scroll). Card gradient shows on BOTH sides because the
     bezel is narrower than the column. */
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0 auto;
  width: fit-content;
  transform: translateY(-50%);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.22));
}

/* The scrollable app surface inside the phone screen. A normal flex child at
   NATURAL height that overflows the phone screen downward; the bezel's screen
   (overflow:hidden) clips it. JS translates it up so the app appears to
   scroll inside the still, fully-visible phone — the signature Bevel motion. */
.kn-uc__screen-scroll {
  flex: 0 0 auto;
  will-change: transform;
}

/* Persona row — small avatar + role label, sits above the headline */
.kn-uc__persona {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 34px;
}
.kn-uc__persona-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.6), transparent 60%),
    var(--persona-img-bg, linear-gradient(135deg, #E7E4F4, #F0D9E1));
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px -6px rgba(15,18,38,0.22), inset 0 0 0 1px rgba(255,255,255,0.55);
}
.kn-uc__persona-img > image-slot {
  display: block;
  width: 100%;
  height: 100%;
}
.kn-uc__persona-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: rgba(15,18,38,0.5);
}
.kn-uc__persona-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 600 12px var(--font-text);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--card-accent, var(--knovit-purple));
}
.kn-uc__persona-tag-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Headline — large, bold, Apple/editorial. Solid ink, no italic. */
.kn-uc__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: var(--ink-900);
  margin: 0 0 26px;
  text-wrap: balance;
}
.kn-uc__headline em {
  /* No italic, no accent — keep headline a single clean weight/colour. */
  font-style: normal;
  font-weight: 600;
  color: inherit;
}
.kn-uc__body {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0;
  max-width: 480px;
  text-wrap: pretty;
  font-weight: 400;
}
.kn-uc__body strong {
  color: var(--ink-800);
  font-weight: 500;
}

/* Card tones — VERY subtle premium washes (Apple/Bevel restraint).
   Background is consumed by .kn-uc__card-sticky (the visible rounded card);
   the article itself is just a tall transparent scroll-budget wrapper. */
.kn-uc__card--violet {
  --card-accent: #4D1499;
  --persona-img-bg: linear-gradient(135deg, #E5DBF6, #F5D6E7);
  --uc-bg:
    radial-gradient(ellipse 90% 80% at 100% 8%, #EBE3F4 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 95% 100%, #F6E6EC 0%, transparent 55%),
    linear-gradient(160deg, #F1EEF7 0%, #F4EEF1 100%);
}
.kn-uc__card--teal {
  --card-accent: #0E6E7A;
  --persona-img-bg: linear-gradient(135deg, #CFE5E6, #E4F1F2);
  --uc-bg:
    radial-gradient(ellipse 90% 80% at 100% 100%, #DCEBEB 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 92% 0%, #E9F0EC 0%, transparent 55%),
    linear-gradient(160deg, #EFF3F2 0%, #F2F2EC 100%);
}
.kn-uc__card--coral {
  --card-accent: #A8291F;
  --persona-img-bg: linear-gradient(135deg, #FAD4C7, #F6BAA7);
  --uc-bg:
    radial-gradient(ellipse 90% 80% at 100% 100%, #F7E2D8 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 95% 5%, #F9EAE3 0%, transparent 55%),
    linear-gradient(160deg, #F8EFEA 0%, #F4E9E5 100%);
}
.kn-uc__card--plum {
  --card-accent: #562061;
  --persona-img-bg: linear-gradient(135deg, #EDD3EA, #DCC0E0);
  --uc-bg:
    radial-gradient(ellipse 90% 80% at 100% 50%, #ECDDEC 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 95% 100%, #F1E6F0 0%, transparent 55%),
    linear-gradient(160deg, #F2ECF3 0%, #ECE3F0 100%);
}

/* ── Inline phone (mobile only) ─────────────────────────── */
.kn-uc__card-phone-inline {
  display: none;
  margin: 28px auto 0;
}

/* ── Bespoke phone screens — internal layout shared by all 4 — */
.kn-uc-scr {
  /* Natural height, but at least tall enough to overflow the phone screen so
     there's always something to scroll to (the JS maps scroll progress to the
     overflow). Screens have gradient backgrounds so the extra height reads as
     more app surface, never blank. */
  min-height: 860px;
  font-family: var(--font-text);
  color: var(--ink-900);
  position: relative;
  overflow: hidden;
  padding-bottom: 24px;
}
.kn-uc-scr__statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 4px;
  font: 600 13px var(--font-text);
  color: var(--ink-900);
}
.kn-uc-scr__statusbar-icons {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  opacity: 0.85;
}
.kn-uc-scr__statusbar-icons i {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.kn-uc-scr__statusbar-icons i.wifi {
  width: 14px; height: 9px;
  border-radius: 2px 2px 0 0;
}
.kn-uc-scr__statusbar-icons i.bat {
  width: 22px; height: 11px;
  border-radius: 3px;
  border: 1px solid currentColor;
  background: transparent;
}

/* Generic top toolbar (used in all bespoke screens) */
.kn-uc-scr__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 18px 6px;
}
.kn-uc-scr__circle {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(15,18,38,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-800);
  font: 600 16px var(--font-text);
}

.kn-uc-scr__h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.02em;
  margin: 4px 18px 6px;
  color: var(--ink-900);
}
.kn-uc-scr__sec-label {
  font: 600 10.5px var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 10px 18px 4px;
}

/* — Screen 1 · Manager · stacked day — */
.kn-uc-scr--manager {
  background: linear-gradient(180deg, #F1ECE0 0%, #FFFFFF 50%);
}
.kn-uc-scr__time-rail {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 6px 18px;
}
.kn-uc-scr__time-rail-time {
  font: 500 12px var(--font-text);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding-top: 14px;
  border-right: 1px solid rgba(15,18,38,0.08);
  text-align: right;
  padding-right: 12px;
  position: relative;
}
.kn-uc-scr__time-rail-block {
  background: #fff;
  border: 1px solid rgba(15,18,38,0.06);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 12px -6px rgba(15,18,38,0.06);
  border-left-width: 3px;
}
.kn-uc-scr__time-rail-block--purple { border-left-color: var(--knovit-purple); }
.kn-uc-scr__time-rail-block--coral  { border-left-color: var(--knovit-coral); }
.kn-uc-scr__time-rail-block--teal   { border-left-color: var(--teal-500, #1AA3B3); }
.kn-uc-scr__time-rail-block--pink   { border-left-color: var(--knovit-pink); }
.kn-uc-scr__time-rail-name {
  font: 600 13px var(--font-text);
  color: var(--ink-900);
  letter-spacing: -0.005em;
}
.kn-uc-scr__time-rail-sub {
  font: 400 11px var(--font-text);
  color: var(--ink-500);
}
.kn-uc-scr__time-rail-bump {
  font: 500 10px var(--font-text);
  color: var(--knovit-purple);
  background: rgba(60,0,124,0.08);
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* — Screen 2 · Freelancer · client switcher — */
.kn-uc-scr--freelancer {
  background: linear-gradient(180deg, #E8F0F0 0%, #FFFFFF 60%);
}
.kn-uc-scr__client-tabs {
  display: flex;
  gap: 8px;
  padding: 4px 18px 12px;
  overflow: hidden;
}
.kn-uc-scr__client-tab {
  font: 500 11.5px var(--font-text);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(15,18,38,0.04);
  color: var(--ink-700);
  white-space: nowrap;
}
.kn-uc-scr__client-tab.is-active {
  background: var(--ink-900);
  color: #fff;
}
.kn-uc-scr__client-card {
  margin: 6px 16px;
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid rgba(15,18,38,0.05);
  border-radius: 16px;
  box-shadow: 0 6px 16px -8px rgba(15,18,38,0.08);
}
.kn-uc-scr__client-name {
  font: 600 14.5px var(--font-text);
  color: var(--ink-900);
  letter-spacing: -0.005em;
  margin: 0 0 2px;
}
.kn-uc-scr__client-tag {
  font: 500 10.5px var(--font-text);
  color: var(--teal-700, #0E6E7A);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.kn-uc-scr__client-stat {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-top: 1px dashed rgba(15,18,38,0.10);
  font: 500 12px var(--font-text);
  color: var(--ink-700);
}
.kn-uc-scr__client-stat:first-of-type { border-top: 0; padding-top: 0; }
.kn-uc-scr__client-stat b {
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.kn-uc-scr__client-stat--due b { color: var(--knovit-coral); }

/* — Screen 3 · Transition · contact network — */
.kn-uc-scr--transition {
  background: linear-gradient(180deg, #F4DCD2 0%, #FFFFFF 60%);
}
.kn-uc-scr__net {
  margin: 8px 16px;
  padding: 16px 14px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(15,18,38,0.05);
  box-shadow: 0 6px 16px -8px rgba(15,18,38,0.08);
}
.kn-uc-scr__net-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.kn-uc-scr__net-h h4 {
  font: 600 13px var(--font-text);
  color: var(--ink-900);
  margin: 0;
}
.kn-uc-scr__net-h span {
  font: 500 10.5px var(--font-text);
  color: var(--ink-500);
  letter-spacing: 0.04em;
}
.kn-uc-scr__net-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(15,18,38,0.05);
}
.kn-uc-scr__net-row:first-of-type { border-top: 0; padding-top: 0; }
.kn-uc-scr__net-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F4B79E, #E89B66);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 11px var(--font-text);
  color: rgba(0,0,0,0.55);
}
.kn-uc-scr__net-avatar--b { background: linear-gradient(135deg, #C8A8E8, #A87DC4); color: #fff; }
.kn-uc-scr__net-avatar--c { background: linear-gradient(135deg, #A8D4E8, #6FAFC8); color: #fff; }
.kn-uc-scr__net-avatar--d { background: linear-gradient(135deg, #E8D4A8, #C8A87D); color: #4A2810; }
.kn-uc-scr__net-body { flex: 1; min-width: 0; }
.kn-uc-scr__net-name {
  font: 600 12.5px var(--font-text);
  color: var(--ink-900);
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.kn-uc-scr__net-meta {
  font: 400 10.5px var(--font-text);
  color: var(--ink-500);
  margin-top: 2px;
}
.kn-uc-scr__net-pill {
  font: 600 9.5px var(--font-text);
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(168,41,31,0.10);
  color: #A8291F;
  text-transform: uppercase;
  white-space: nowrap;
}

/* — Screen 4 · Personal · birthdays & promises — */
.kn-uc-scr--personal {
  background: linear-gradient(180deg, #F1DCEE 0%, #FFFFFF 60%);
}
.kn-uc-scr__cal {
  margin: 6px 16px 10px;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, #fff, #FBF7F9);
  border-radius: 16px;
  border: 1px solid rgba(15,18,38,0.05);
  box-shadow: 0 6px 16px -8px rgba(15,18,38,0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}
.kn-uc-scr__cal-date {
  flex-shrink: 0;
  width: 56px;
  text-align: center;
  border-right: 1px solid rgba(15,18,38,0.06);
  padding-right: 10px;
}
.kn-uc-scr__cal-month {
  font: 600 9px var(--font-text);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #562061;
  margin: 0;
}
.kn-uc-scr__cal-day {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.kn-uc-scr__cal-body { flex: 1; min-width: 0; }
.kn-uc-scr__cal-title {
  font: 600 13px var(--font-text);
  color: var(--ink-900);
  letter-spacing: -0.005em;
  margin: 0;
}
.kn-uc-scr__cal-meta {
  font: 400 11px var(--font-text);
  color: var(--ink-500);
  margin-top: 2px;
}
.kn-uc-scr__promise {
  margin: 8px 16px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(15,18,38,0.05);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 4px 12px -6px rgba(15,18,38,0.06);
}
.kn-uc-scr__promise-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(86,32,97,0.10);
  color: #562061;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kn-uc-scr__promise-text {
  font: 500 12.5px var(--font-text);
  color: var(--ink-800);
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0;
}
.kn-uc-scr__promise-meta {
  font: 400 10.5px var(--font-text);
  color: var(--ink-500);
  margin-top: 3px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1200px) {
  .kn-uc__card { min-height: 1040px; }
  .kn-uc__card-sticky { grid-template-columns: 50% 50%; border-radius: 38px; }
  .kn-uc__card-text { padding: 0 clamp(20px,2.5vw,40px) 0 clamp(32px,4vw,72px); }
}

@media (max-width: 900px) {
  /* Mobile: no sticky/parallax — stack text then phone in a normal card. */
  .kn-uc { padding: 100px 0 120px; }
  .kn-uc__intro { margin-bottom: 56px; }

  .kn-uc__cards { gap: 20px; }
  .kn-uc__card { min-height: 0; }
  .kn-uc__card-sticky {
    position: static;
    height: auto;
    display: block;
    border-radius: 34px;
    overflow: hidden;
  }
  .kn-uc__card-text {
    align-self: auto;
    padding: 56px 44px 0;
  }
  .kn-uc__stage {
    align-self: auto;
    overflow: hidden;
    height: 360px;          /* clips the phone bottom on mobile too */
    margin-top: 24px;
  }
  .kn-uc__stage-phone {
    position: absolute;
    top: 40px;              /* phone bottom bleeds past → clipped */
    transform: none !important;
  }
  .kn-uc__headline { font-size: clamp(34px, 9vw, 48px); }
  .kn-uc__body { font-size: 18px; max-width: none; }
  .kn-uc__persona { gap: 12px; margin-bottom: 26px; }
}

@media (max-width: 600px) {
  .kn-uc__card-sticky { border-radius: 28px; }
  .kn-uc__card-text { padding: 44px 28px 0; }
  .kn-uc__stage { height: 320px; }
  .kn-uc__headline { font-size: 34px; }
  .kn-uc__title { font-size: 32px; }
  .kn-uc__body { font-size: 16.5px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kn-uc__stage-phone { transform: translateY(-50%) !important; }
}