/* ============================================================
   AVLO - PREMIUM VISUAL LANGUAGE (2026-09 redesign)
   Ground/ink/teal/gold palette, Schibsted Grotesk display type,
   layered floating cards with soft tinted shadows.

   Loads AFTER styles.css (and home.css/any page CSS) and re-points
   the shared tokens from the old dark-navy theme to the new light
   one. Because nav, footer, buttons, pills and cards in styles.css
   are all built on these custom properties, most of the site
   re-themes itself just by loading this file - no per-page colour
   rewrite needed. Only literal (non-variable) colours have to be
   patched page by page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* Ground / ink */
  --navy:      #ffffff;              /* elevated surface (nav, footer, cards) */
  --navy-deep: #e6f4f2;              /* flat panel tint - used by individual mock-up/card
                                         components (trust.html's data-lifecycle panel, the
                                         AI-verdict callout, etc) that want a subtle fill
                                         distinct from white but NOT the page canvas below -
                                         left alone so those panels don't inherit the gradient */
  --canvas-gradient: linear-gradient(135deg, #d7efe9 0%, #eaf0f5 50%, #d9dde9 100%);
                                      /* page ground - soft diagonal from the site's teal
                                         toward its ink/navy, replacing the old flat
                                         --navy-deep wash. Stays pale throughout (lightness
                                         ~88-96%) so body text/cards keep working unchanged;
                                         nowhere near the saturated #0f766e of the hero band
                                         or the mk-panel blocks, so it never reads as the same
                                         surface as those. background-attachment:fixed below
                                         keeps the diagonal anchored to the viewport rather
                                         than stretching (and going shallow/dark at the
                                         bottom) across a tall page. */
  --cream:     #131c29;              /* ink - primary text */
  --cream-dim: rgba(19,28,41,0.05);  /* subtle ink fill on light ground */
  --muted:     #5d6a7b;              /* secondary text */
  --border:    #e2e6eb;              /* card / rule border */

  /* Teal + gold keep their hue, gain light-theme companions */
  --teal-dim:   rgba(13,148,136,0.10);
  --teal-tint:  #e6f4f2;
  --teal-border:#cce8e4;
  --teal-deep:  #0b6f66;
  --gold-dim:   rgba(201,169,110,0.14);
  --gold-tint:  #fdf6e6;
  --gold-border:#e7d3a8;
  --gold-ink:   #7a5c1e;
  --gold-ink-deep:#5a4a22;
  --gold-resolved-tint:#eefaf8;

  /* Extra text steps used by card components */
  --ink:      #131c29;
  --ink-2:    #3b475a;   /* body copy inside cards */
  --muted-2:  #6b7889;   /* card meta text */
  --muted-3:  #8a95a3;   /* timestamps, placeholders */
  --line:     #e8ebef;   /* card border */
  --line-soft:#eef1f4;   /* divider inside a card */
  --line-soft-2:#f1f3f6;

  /* Suitability verdicts, restyled to the design language */
  --hr-color:  #0d9488;
  --rec-color: #0b6f66;
  --cla-color: #7a5c1e;
  --nr-color:  #5d6a7b;
  --exc-color: #3b82f6;

  /* Layered card shadows: a crisp 1px edge + a soft tinted throw */
  --shadow-card:    0 2px 4px rgba(19,28,41,0.04), 0 30px 60px -26px rgba(19,28,41,0.28);
  --shadow-card-lg: 0 4px 8px rgba(19,28,41,0.05), 0 44px 80px -26px rgba(19,28,41,0.36);
  --shadow-card-sm: 0 18px 36px -22px rgba(19,28,41,0.30);
  --shadow-dark:    0 30px 60px -22px rgba(19,28,41,0.55);
  --shadow-teal:    0 14px 28px -12px rgba(13,148,136,0.85);

  --font-display: 'Schibsted Grotesk', sans-serif;
}

body { background: var(--canvas-gradient); background-attachment: fixed; }

/* Display type: Schibsted Grotesk for headings and stat numbers.
   The /avlo: wordmark stays Barlow Semi Condensed (styles.css) - the
   design reference keeps the logotype separate from the heading face. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.section-title { font-family: var(--font-display); letter-spacing: -0.03em; }

/* ── Radial tint washes ──────────────────────────────────────
   Sections can opt into a soft teal/gold/ink glow behind their
   content by adding one of these classes to the section element. */
.tint-teal   { position: relative; }
.tint-teal::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(900px 600px at 76% 8%, rgba(13,148,136,0.14), transparent 62%);
}
.tint-gold::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(760px 540px at 20% 90%, rgba(201,169,110,0.14), transparent 66%);
}
.tint-gold { position: relative; }
.tint-teal > .container, .tint-gold > .container { position: relative; z-index: 1; }

/* ── Cards ────────────────────────────────────────────────────
   Base .card/.card-sm (styles.css) already inherit the new tokens;
   this adds the soft layered shadow the flat dark theme didn't need. */
.card, .card-sm {
  box-shadow: var(--shadow-card);
}

/* Dark callout card - the one deliberately inverted surface, used
   for a verdict/result highlight sitting on top of the light cards. */
.card-dark {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-dark);
}
.card-dark .card-dark-label { font-size: 0.8rem; color: #b9c3d0; }
.card-dark .card-dark-value {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  letter-spacing: -0.03em; margin-top: 0.2rem; color: #fff;
}
.card-dark .card-dark-note { font-size: 0.8rem; color: #9fd8d1; margin-top: 0.2rem; }

/* ── Verdict pills, restyled ─────────────────────────────────── */
.pill-hr  { background: var(--teal);       color: #fff;          border: 1px solid var(--teal); font-weight: 700; }
.pill-rec { background: var(--teal-tint);  color: var(--teal-deep); border: 1px solid var(--teal-border); }
.pill-cla { background: var(--gold-tint);  color: var(--gold-ink);  border: 1px solid var(--gold-border); }
.pill-nr  { background: var(--line-soft);  color: var(--muted-2);   border: 1px solid var(--line); }
.pill-exc { background: rgba(59,130,246,0.12); color: var(--exc-color); border: 1px solid rgba(59,130,246,0.3); }

/* ── Message bubbles (WhatsApp-style, used by the Clarify/Schedule
   feature sections and anywhere else a candidate exchange is shown) ── */
.msg-thread { display: flex; flex-direction: column; gap: 0.6rem; }
.msg {
  max-width: 82%;
  padding: 0.75rem 0.95rem;
  font-size: 0.92rem;
  line-height: 1.5;
  border-radius: 16px 16px 16px 5px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card-sm);
  color: var(--ink);
}
.msg-sent {
  align-self: flex-end;
  margin-left: auto;
  border-radius: 16px 16px 5px 16px;
  background: var(--teal);
  color: #fff;
}
.msg-time { font-size: 0.72rem; color: var(--muted-3); margin-top: 0.2rem; }
.msg-time.align-right { text-align: right; }

/* ── Buttons: teal glow to match the layered-card language ── */
.btn-primary {
  box-shadow: var(--shadow-teal);
}
.btn-primary:hover { box-shadow: 0 18px 34px -12px rgba(13,148,136,0.9); }
.btn-outline:hover { background: var(--teal-tint); }

/* ── Trust / positioning strips on a light ground ── */
.positioning-strip, .trust-strip { background: var(--navy); }

/* ── Nav over the teal hero (home only) ──────────────────────
   js/features/hero-teal-nav.js adds .nav-on-teal on any page with a
   .hero-teal-band, then toggles .nav-scrolled once it scrolls past
   the band, so the nav never shows white text on a light section. */
.nav-on-teal:not(.nav-scrolled) {
  background: transparent;
  border-bottom-color: transparent;
}
.nav-on-teal { transition: background 0.25s ease, border-color 0.25s ease; }
.nav-on-teal:not(.nav-scrolled) .nav-logo,
.nav-on-teal:not(.nav-scrolled) .nav-links a,
.nav-on-teal:not(.nav-scrolled) .nav-btn-ghost,
.nav-on-teal:not(.nav-scrolled) .nav-toggle {
  color: #ffffff;
}
.nav-on-teal:not(.nav-scrolled) .nav-links a:hover { color: #ffffff; background: rgba(255,255,255,0.14); }
.nav-on-teal:not(.nav-scrolled) .nav-links a.active { color: #ffffff; background: rgba(255,255,255,0.18); }
/* The open mobile dropdown is its own solid-white panel (.nav-links'
   mobile media-query background), regardless of scroll state - the
   white-on-transparent rule above otherwise leaves its links invisible
   (white text on the same white panel) whenever it's opened before the
   page has scrolled past the teal hero. */
.nav-on-teal:not(.nav-scrolled) .nav-links.open a {
  color: var(--muted);
}
.nav-on-teal:not(.nav-scrolled) .nav-links.open a:hover,
.nav-on-teal:not(.nav-scrolled) .nav-links.open a.active {
  color: var(--cream);
}
.nav-on-teal:not(.nav-scrolled) .nav-btn-ghost { border-color: rgba(255,255,255,0.45); }
.nav-on-teal:not(.nav-scrolled) .nav-btn-ghost:hover { border-color: #ffffff; color: #ffffff; }
.nav-on-teal:not(.nav-scrolled) .nav-cta { background: #ffffff !important; color: #0f3d39 !important; }

@media (max-width: 768px) {
  h1, h2, h3, h4, h5 { letter-spacing: -0.02em; }
}

/* ============================================================
   FEATURE SCROLL SECTIONS (Clarify, Schedule, …)
   Three renderings, all sharing one set of markup:
     1. No JS / no-motion fallback: .fx-stage-mobile, all beats
        visible and static - always-safe default.
     2. prefers-reduced-motion: only the last beat is shown from
        the same markup (.fx-reduced), still static.
     3. Mobile + motion: .fx-stage-mobile beats reveal one at a
        time via IntersectionObserver as they scroll into view.
     4. Desktop + motion: .fx-stage-desktop takes over, pinned,
        scrubbed by GSAP ScrollTrigger through labelled beats.
   ============================================================ */
.fx-section { background: transparent; height: var(--fx-h, auto); }
.fx-pin {
  padding: 4.5rem 0;
  display: flex;
  align-items: center;
}
.fx-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
}
.fx-eyebrow {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--teal-deep);
  margin-bottom: 0.85rem;
}
.fx-copy h2 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin-bottom: 1.1rem;
}
.fx-copy p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 440px;
}
.fx-stats { display: flex; gap: 2.25rem; margin-top: 1.85rem; }
.fx-stat-num { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); }
.fx-stat-label { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }

/* Shared card look used by every product element in the stage */
.fx-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.fx-card-head {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line-soft);
}
.fx-avatar {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--line-soft); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 600; flex-shrink: 0;
  transition: background 0.5s, color 0.5s;
}
.fx-avatar.is-resolved { background: var(--teal-tint); color: var(--teal-deep); }
.fx-card-name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); }
.fx-card-meta { font-size: 0.82rem; color: var(--muted-2); margin-top: 0.15rem; }
.fx-card-body { padding: 0.5rem 1.3rem 1.2rem; }
.fx-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft-2);
  font-size: 0.94rem;
}
.fx-row:last-child { border-bottom: none; }
.fx-row-status { font-size: 0.82rem; font-weight: 600; color: var(--teal-deep); }
.fx-openpoint {
  margin: 0.5rem -0.7rem; padding: 0.85rem 0.7rem;
  background: var(--gold-tint); border: 1px solid var(--gold-border); border-radius: 12px;
  transition: background 0.5s, border-color 0.5s;
}
.fx-openpoint.is-resolved { background: var(--gold-resolved-tint); border-color: var(--teal-border); }
.fx-openpoint-top { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 0.94rem; }
.fx-openpoint-status { font-size: 0.82rem; font-weight: 600; color: var(--gold-ink); transition: color 0.5s; }
.fx-openpoint.is-resolved .fx-openpoint-status { color: var(--teal-deep); }
.fx-openpoint-detail { font-size: 0.85rem; line-height: 1.5; color: var(--gold-ink-deep); margin-top: 0.35rem; transition: color 0.5s; }
.fx-openpoint.is-resolved .fx-openpoint-detail { color: #1e5c56; }

/* Message / phone card */
.fx-card-msg { padding: 1.1rem 1.2rem; }
.fx-card-msg .fx-card-meta { margin-bottom: 0.6rem; }

/* Slot list rows (Schedule) */
.fx-slot {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 0.8rem 1rem; margin-bottom: 0.6rem;
  transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.fx-slot:last-child { margin-bottom: 0; }
.fx-slot.is-selected {
  border: 2px solid var(--teal); background: var(--teal-tint);
  box-shadow: 0 10px 22px -12px rgba(13,148,136,0.9);
}
.fx-slot-day { font-weight: 600; font-size: 0.94rem; }
.fx-slot-time { font-size: 0.82rem; color: var(--muted-2); margin-top: 0.1rem; }
.fx-slot-flag { font-size: 0.82rem; font-weight: 600; color: var(--muted-2); }
.fx-slot.is-selected .fx-slot-flag { color: var(--teal-deep); }

.fx-confirm-btn {
  display: block; text-align: center; margin-top: 0.9rem;
  background: var(--teal); color: #fff; border-radius: 11px;
  padding: 0.85rem; font-weight: 600; font-size: 0.94rem;
}

/* Positioned wrap for the desktop stage - two cards overlapped like the
   layered floating-card language, plus a dark result callout. */
.fx-stage-desktop { position: relative; height: 560px; display: none; }
.fx-stage-desktop .fx-card-primary { position: absolute; left: 0; top: 0; width: 62%; }
.fx-stage-desktop .fx-card-secondary { position: absolute; right: 0; top: 220px; width: 52%; }
.fx-stage-desktop .fx-result { position: absolute; left: 8%; bottom: 0; width: 60%; }

/* Mobile / no-JS / reduced-motion stage: stacked, static by default */
.fx-stage-mobile { display: block; }
.fx-beat { margin-bottom: 1.1rem; }
.fx-beat:last-child { margin-bottom: 0; }
.fx-beat .fx-card { margin-bottom: 0.9rem; }

.fx-desktop-active .fx-stage-mobile { display: none; }
.fx-desktop-active .fx-stage-desktop { display: block; }

.fx-mobile-active .fx-beat {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fx-mobile-active .fx-beat.fx-in { opacity: 1; transform: translateY(0); }

.fx-reduced [data-mobile-beat]:not(:last-child) { display: none; }
.fx-reduced { height: auto !important; }

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track cannot shrink below its
     content's min-content width, so one unbreakable row inside a card
     widened the whole page at 390px. */
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
  .fx-copy p { max-width: 100%; }
}
@media (max-width: 768px) {
  .fx-section { height: auto !important; }
  .fx-pin { padding: 3rem 0; }
  .fx-stage-desktop { display: none !important; }
  .fx-desktop-active .fx-stage-mobile { display: block; }
}

/* ============================================================
   MOCK-UP-DRIVEN COMPONENTS (2026-09 homepage mock-ups)
   Shared across index.html and product.html wherever a stage
   reuses a homepage animation module (Clarify, Feedback).
   ============================================================ */
:root {
  --panel-tint: #eaf1f0;
  --panel-tint-2: #dcefec;
}

/* Soft rounded tinted stage panel every mock-up visual sits in */
.mk-panel {
  background: var(--panel-tint);
  border-radius: 36px;
  padding: 40px 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .mk-panel { padding: 28px 20px; border-radius: 28px; }
}


/* Generic opacity reveal for elements that start `opacity:0` inline
   (question/reply bubbles, typing dots, timeline card/final state).
   !important is required here only to beat those elements' own
   inline `style="opacity:0"` starting state - inline styles otherwise
   outrank any class rule regardless of source order or specificity. */
.is-in { opacity: 1 !important; }

/* ── Crossfade helper: two states stacked, toggled by a class ── */
.mk-cf { position: relative; display: inline-block; }
.mk-cf .mk-cf-a, .mk-cf .mk-cf-b {
  transition: opacity 0.4s ease;
}
.mk-cf .mk-cf-b { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.mk-cf.is-swapped .mk-cf-a { opacity: 0; }
.mk-cf.is-swapped .mk-cf-b { opacity: 1; }
.mk-cf-block { position: relative; display: block; }
.mk-cf-block .mk-cf-b { position: absolute; left: 0; top: 0; right: 0; opacity: 0; }
.mk-cf-block.is-swapped .mk-cf-a { opacity: 0; }
.mk-cf-block.is-swapped .mk-cf-b { opacity: 1; }

/* ── Section2 / "Screen" - sorted candidate rows with criteria dots ── */
.mk-cand-stage { width: 100%; max-width: 560px; }
.mk-cand-header { text-align: center; margin-bottom: 1.1rem; }
.mk-cand-header .role { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.mk-cand-header .sub { font-size: 0.82rem; color: var(--muted-2); margin-top: 0.15rem; }
.mk-cand-row {
  display: flex; align-items: center; gap: 0.85rem;
  background: #fff; border-radius: 16px; padding: 0.85rem 1rem;
  margin-bottom: 0.65rem; box-shadow: var(--shadow-card-sm);
}
.mk-cand-row:last-child { margin-bottom: 0; }
.mk-cand-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--line-soft); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.mk-cand-main { flex: 1; min-width: 0; }
.mk-cand-name { font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.mk-cand-status { font-size: 0.8rem; color: var(--muted-2); margin-top: 0.1rem; }
.mk-cand-dots { display: flex; gap: 6px; flex-shrink: 0; }
.mk-cand-dot {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line);
  background: transparent; transform: scale(0);
  transition: transform 0.4s cubic-bezier(.3,1.4,.5,1), background 0.3s, border-color 0.3s;
}
.mk-cand-dot.is-in { transform: scale(1); }
.mk-cand-dot.on { background: var(--teal); border-color: var(--teal); }
.mk-cand-dot.gold-on { background: var(--gold); border-color: var(--gold); }
.mk-cand-pill { flex-shrink: 0; transform: scale(0); transition: transform 0.4s cubic-bezier(.3,1.4,.5,1); }
.mk-cand-pill.is-in { transform: scale(1); }
.mk-cand-toast {
  margin: 1rem auto 0; width: fit-content;
  background: var(--ink); color: #fff; border-radius: 12px;
  padding: 0.65rem 1rem; font-size: 0.85rem; font-weight: 500;
  display: flex; align-items: center; gap: 0.55rem;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mk-cand-toast.is-in { opacity: 1; transform: translateY(0); }
.mk-cand-toast .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* ── Section3 / "Clarify" extras: chip, typing dots, tinted row ── */
.fx-chip {
  position: absolute;
  background: var(--teal); color: #fff; font-size: 0.78rem; font-weight: 700;
  padding: 0.4rem 0.75rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.4s cubic-bezier(.3,1.4,.5,1), transform 0.4s cubic-bezier(.3,1.4,.5,1);
}
.fx-chip.is-in { opacity: 1; transform: scale(1); }
.fx-typing { display: inline-flex; gap: 4px; padding: 0.6rem 0.8rem; background: var(--teal-tint); border-radius: 14px 14px 4px 14px; }
.fx-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: fx-typing-bounce 0.9s ease-in-out infinite; }
.fx-typing span:nth-child(2) { animation-delay: 0.15s; }
.fx-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes fx-typing-bounce { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fx-typing span { animation: none; opacity: 1; }
}

/* ── Section4 / admin task list ── */
.mk-task-card { width: 100%; max-width: 540px; background: #fff; border-radius: 22px; padding: 1.5rem 1.6rem; box-shadow: var(--shadow-card); }
.mk-task-head { margin-bottom: 0.9rem; }
.mk-task-head .title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.mk-task-head .sub { font-size: 0.85rem; color: var(--muted-2); margin-top: 0.2rem; }
.mk-task-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft-2); }
.mk-task-row:last-child { border-bottom: none; }
.mk-checkbox {
  width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--line);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background 0.4s, border-color 0.4s;
}
.mk-checkbox.is-done { background: var(--teal); border-color: var(--teal); }
.mk-checkbox svg { width: 14px; height: 14px; }
.mk-checkbox svg path { stroke: #fff; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 0.4s ease 0.1s; }
.mk-checkbox.is-done svg path { stroke-dashoffset: 0; }
.mk-task-main { flex: 1; min-width: 0; }
.mk-task-title { font-size: 0.95rem; font-weight: 600; color: var(--ink); position: relative; transition: color 0.4s; }
.mk-task-title.is-done { color: var(--muted-2); }
.mk-task-title .strike { position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: var(--muted-2); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; }
.mk-task-title.is-done .strike { transform: scaleX(1); }
.mk-task-status { font-size: 0.8rem; color: var(--muted-3); margin-top: 0.15rem; }
.mk-task-status.is-done { color: var(--teal-deep); }
.mk-task-meeting { display: flex; align-items: center; gap: 0.85rem; margin-top: 0.5rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--gold-tint); transition: background 0.6s; }
.mk-task-meeting .needs { margin-left: auto; background: var(--teal); color: #fff; font-size: 0.76rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 999px; transform: scale(0); transition: transform 0.4s cubic-bezier(.3,1.4,.5,1); }
.mk-task-meeting .needs.is-in { transform: scale(1); }

/* ── Section5 / "Feedback" extras: segmented bars, adjusted tag ── */
.fx-rec-pill { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 999px; }
.fx-rec-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #c0392b; animation: fx-rec-blink 1.4s ease-in-out infinite; }
@keyframes fx-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .fx-rec-pill .dot { animation: none; } }
.mk-comp-row { padding: 0.7rem 0; border-bottom: 1px solid var(--line-soft-2); }
.mk-comp-row:last-child { border-bottom: none; }
.mk-comp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.mk-comp-label { font-size: 0.88rem; font-weight: 600; color: var(--ink); }
.mk-adjusted-tag { font-size: 0.7rem; font-weight: 700; color: var(--gold-ink); background: var(--gold-tint); border: 1px solid var(--gold-border); padding: 0.15rem 0.5rem; border-radius: 999px; opacity: 0; transition: opacity 0.4s; }
.mk-adjusted-tag.is-in { opacity: 1; }
.mk-seg-bar { display: flex; gap: 4px; margin-bottom: 0.4rem; }
.mk-seg { flex: 1; height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.mk-seg-fill { display: block; height: 100%; width: 0; background: var(--teal); transition: width 0.5s ease; }
.mk-seg-fill.is-in { width: 100%; }
.mk-comp-evidence { font-size: 0.82rem; color: var(--muted-2); line-height: 1.5; opacity: 0; transform: translateY(4px); transition: opacity 0.4s, transform 0.4s; }
.mk-comp-evidence.is-in { opacity: 1; transform: translateY(0); }