*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    a, a:link, a:visited, a:hover, a:active { text-decoration: none; }

    :root {
      --coral:        #FF3D6B;
      --coral-light:  rgba(255,61,107,0.08);
      --coral-border: rgba(240,58,23,0.25);
      --coral-dark:   #CC1A44;
      --black:        #111111;
      --white:        #FAFAF8;
      --gray:         #666666;
      --border:       #E8E0E0;
      --card-bg:      #F4F0F0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--white);
      color: var(--black);
      font-size: 16px;
      line-height: 1.6;
    }

    /* ─── GLOBAL RESETS ─── */
    a { text-decoration: none; }
    button { font-family: inherit; cursor: pointer; }
    img { display: block; max-width: 100%; }

    /* ─── LAYOUT ─── */
    .container { max-width: 960px; margin: 0 auto; padding: 0 32px; }
    .divider { border: none; border-top: 0.5px solid var(--border); margin: 56px 0; }
    .section-label {
      font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 1.2px;
      color: var(--coral); margin-bottom: 20px;
    }

    /* ─── NAV ─── */
    nav {
      border-bottom: 0.5px solid var(--border);
      padding: 20px 0;
      position: sticky; top: 0;
      background: var(--white);
      z-index: 100;
    }
    .nav-inner { display: flex; justify-content: space-between; align-items: center; }
    .logo {
      font-size: 16px; font-weight: 500;
      letter-spacing: -0.3px; color: var(--black);
    }
    .logo em { font-style: normal; color: var(--coral); }
    .nav-links { display: flex; gap: 28px; align-items: center; }
    .nav-links a, .nav-links a:link, .nav-links a:visited { font-size: 14px; color: #666666 !important; transition: color 0.15s; text-decoration: none !important; }
    .nav-links a:hover { color: #111111 !important; }
    .btn-nav, .btn-nav:link, .btn-nav:visited {
      font-size: 13px; font-weight: 500;
      padding: 9px 20px; border-radius: 6px;
      border: none; background: var(--coral);
      color: #ffffff !important; display: inline-block;
      transition: opacity 0.15s; text-decoration: none !important;
    }
    .btn-nav:hover { opacity: 0.85; color: #ffffff !important; }

    /* ─── HERO ─── */
    .hero { padding: 0; border-bottom: 0.5px solid var(--border); }
    .hero-inner {
      display: grid;
      grid-template-columns: 1fr 320px;
      align-items: end;
      max-width: 960px; margin: 0 auto; padding: 0 32px;
      min-height: 420px;
    }
    .hero-left { padding: 64px 0 48px; }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 500;
      color: #999; letter-spacing: 0.8px;
      text-transform: uppercase; margin-bottom: 28px;
    }
    .hero-tag::before {
      content: ''; display: inline-block;
      width: 20px; height: 2px; background: var(--coral);
    }
    .hero h1 {
      font-size: 88px; font-weight: 700;
      line-height: 0.92; letter-spacing: -4px;
      color: var(--black); margin-bottom: 0;
    }
    .hero h1 span { display: block; }
    .h1-accent { color: var(--coral) !important; }
    .h1-stroke {
      -webkit-text-stroke: 2.5px var(--black);
      color: transparent !important;
    }
    .hero-right {
      border-left: 0.5px solid var(--border);
      padding: 0 0 48px 40px;
      display: flex; flex-direction: column;
      justify-content: flex-end; gap: 28px;
      align-self: stretch; padding-top: 64px;
    }
    .hero-sub {
      font-size: 15px; color: var(--gray); line-height: 1.65;
    }
    .hero-btns { display: flex; flex-direction: column; gap: 10px; }
    .hero-ticker {
      border-top: 0.5px solid var(--border);
      padding: 16px 32px;
      max-width: 960px; margin: 0 auto;
      display: flex; gap: 36px; flex-wrap: wrap;
    }
    .ticker-item {
      display: flex; align-items: center; gap: 8px;
      white-space: nowrap;
    }
    .ticker-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--coral); flex-shrink: 0;
    }
    .ticker-item span { font-size: 12px; color: #999; }

    /* ─── BUTTONS ─── */
    .btn-primary, .btn-primary:link, .btn-primary:visited {
      font-size: 15px; font-weight: 500;
      padding: 13px 28px; border-radius: 6px;
      border: none; background: var(--coral);
      color: #ffffff !important; display: inline-block;
      transition: opacity 0.15s; text-decoration: none !important;
    }
    .btn-primary:hover { opacity: 0.85; color: #ffffff !important; }
    .btn-outline, .btn-outline:link, .btn-outline:visited {
      font-size: 15px; font-weight: 500;
      padding: 13px 28px; border-radius: 6px;
      border: 1.5px solid var(--border);
      background: transparent; color: #111111 !important;
      display: inline-block; transition: border-color 0.15s;
      text-decoration: none !important;
    }
    .btn-outline:hover { border-color: #bbb; color: #111111 !important; }

    /* ─── PAIN ─── */
    .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .pain-card {
      background: var(--card-bg); border-radius: 14px;
      padding: 24px; border-left: 3px solid var(--coral);
    }
    .pain-card-label {
      font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.6px;
      color: var(--coral); margin-bottom: 10px;
    }
    .pain-card p { font-size: 14px; color: var(--gray); line-height: 1.6; }
    .pain-card p b { color: var(--black); font-weight: 500; }

    /* ─── WHY NOT ─── */
    .why-not {
      background: var(--black); border-radius: 16px;
      padding: 40px 48px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 40px; align-items: center;
    }
    .why-not-title {
      font-size: 32px; font-weight: 500;
      letter-spacing: -1px; color: #ffffff; line-height: 1.15;
    }
    .why-not-title em { font-style: normal; color: var(--coral); }
    .why-not-list { list-style: none; }
    .why-not-list li {
      font-size: 14px; color: rgba(255,255,255,0.55);
      padding: 10px 0; border-bottom: 0.5px solid rgba(255,255,255,0.08);
      display: flex; gap: 12px; align-items: flex-start; line-height: 1.5;
    }
    .why-not-list li:last-child { border-bottom: none; }
    .why-not-list li .arr { color: var(--coral); flex-shrink: 0; }

    /* ─── CASES ─── */
    .cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .case-card {
      border: 0.5px solid var(--border); border-radius: 14px;
      padding: 24px; background: var(--white);
      border-top: 3px solid var(--coral);
    }
    .case-card.wide { grid-column: span 2; }
    .case-top {
      display: flex; justify-content: space-between;
      align-items: flex-start; margin-bottom: 14px;
    }
    .case-num { font-size: 11px; color: #bbb; }
    .case-badge {
      font-size: 11px; color: var(--gray);
      background: var(--card-bg); padding: 3px 10px; border-radius: 99px;
    }
    .case-card h3 {
      font-size: 16px; font-weight: 500;
      color: var(--black); margin-bottom: 8px; line-height: 1.3;
    }
    .case-card p {
      font-size: 13px; color: var(--gray);
      line-height: 1.55; margin-bottom: 16px;
    }
    .case-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
    .feature {
      font-size: 11px; color: var(--gray);
      background: var(--card-bg); padding: 3px 10px; border-radius: 99px;
    }
    .case-result {
      font-size: 12px; color: var(--gray);
      padding-top: 14px; border-top: 0.5px solid var(--border);
    }
    .case-result b { color: #2D8A4E; font-weight: 500; }

    /* ─── HOW ─── */
    .how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
    .how-card {
      padding: 28px 24px;
      border: 0.5px solid var(--border); border-radius: 14px;
    }
    .how-num {
      font-size: 40px; font-weight: 500;
      color: var(--coral); letter-spacing: -2px;
      line-height: 1; margin-bottom: 16px;
    }
    .how-card h3 { font-size: 16px; font-weight: 500; color: var(--black); margin-bottom: 8px; }
    .how-card p { font-size: 13px; color: var(--gray); line-height: 1.55; }

    /* ─── ABOUT ─── */
    .about-block { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
    .about-avatar { width: 100%; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: var(--card-bg); }
    .about-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .about-role {
      font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 1px;
      color: var(--coral); margin-bottom: 8px;
    }
    .about-content h2 {
      font-size: 28px; font-weight: 500;
      letter-spacing: -0.8px; color: var(--black); margin-bottom: 16px;
    }
    .about-content p {
      font-size: 15px; color: var(--gray);
      line-height: 1.7; margin-bottom: 14px;
    }
    .about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
    .about-tag {
      font-size: 12px; color: var(--coral-dark);
      background: var(--coral-light);
      border: 0.5px solid var(--coral-border);
      padding: 4px 14px; border-radius: 99px;
    }

    /* ─── FORM ─── */
    .form-block {
      background: var(--black); border-radius: 20px; padding: 56px 64px;
    }
    .form-block h2 {
      font-size: 36px; font-weight: 500;
      letter-spacing: -1px; color: #ffffff; margin-bottom: 8px;
    }
    .form-sub { font-size: 15px; color: rgba(255,255,255,0.45); margin-bottom: 36px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group.full { grid-column: span 2; }
    .form-group label {
      font-size: 11px; color: rgba(255,255,255,0.4);
      text-transform: uppercase; letter-spacing: 0.6px;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
      background: rgba(255,255,255,0.06);
      border: 0.5px solid rgba(255,255,255,0.12);
      border-radius: 8px; padding: 13px 16px;
      font-size: 14px; color: #ffffff;
      font-family: inherit; outline: none;
      transition: border-color 0.15s; width: 100%;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: rgba(255,255,255,0.25); }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus { border-color: var(--coral); }
    .form-group select option { background: #222; color: #fff; }
    .form-group textarea { resize: vertical; min-height: 100px; }
    .btn-submit {
      width: 100%; margin-top: 8px;
      font-size: 15px; font-weight: 500;
      padding: 15px 28px; border-radius: 8px;
      border: none; background: var(--coral);
      color: #ffffff; transition: opacity 0.15s;
    }
    .btn-submit:hover { opacity: 0.85; }
    .btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }
    .form-success { display: none; text-align: center; padding: 32px; }
    .form-success h3 { font-size: 24px; font-weight: 500; color: #fff; margin-bottom: 8px; }
    .form-success p { color: rgba(255,255,255,0.45); }

    /* ─── FOOTER ─── */
    footer { padding: 40px 0; border-top: 0.5px solid var(--border); margin-top: 80px; }
    .footer-inner { display: flex; justify-content: space-between; align-items: center; }
    .footer-links { display: flex; gap: 24px; }
    .footer-links a, .footer-links a:link, .footer-links a:visited { font-size: 13px; color: #666666 !important; transition: color 0.15s; text-decoration: none !important; }
    .footer-links a:hover { color: #111111 !important; }
    .footer-copy { font-size: 12px; color: #bbb; }


    .case-screens { margin-top: 20px; border-top: 0.5px solid var(--border); padding-top: 16px; }
    .stabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .stab {
      font-size: 11px; padding: 5px 12px; border-radius: 99px;
      border: 0.5px solid var(--border); cursor: pointer;
      background: transparent; color: var(--gray);
      font-family: inherit; transition: all 0.15s;
    }
    .stab.on { background: var(--coral); color: #fff; border-color: var(--coral); }
    .sscreen { display: none; }
    .sscreen.on { display: block; }
    .sframe { border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; }
    .sbar {
      background: #F5F1F1; padding: 8px 14px;
      display: flex; align-items: center; gap: 5px;
      border-bottom: 0.5px solid var(--border);
    }
    .sdot { width: 9px; height: 9px; border-radius: 50%; }
    .surl { font-size: 10px; color: #bbb; margin-left: 8px; font-family: monospace; }
    .swin {
      height: 420px; overflow-y: auto; overflow-x: auto;
      background: #fff;
    }
    .simg { display: block; max-width: none; width: auto; height: auto; }
    .scap { font-size: 12px; color: var(--gray); margin-top: 10px; line-height: 1.5; }


    /* ─── INLINE MOCKUPS ─── */
    .mock-app { display: flex; min-width: 960px; min-height: 560px; font-size: 12px; background: #fff; }
    .mock-sb { width: 200px; background: #4A235A; padding: 0; flex-shrink: 0; overflow: hidden; }
    .msb-logo { display: flex; align-items: center; gap: 8px; padding: 16px 14px; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 1px; border-bottom: 0.5px solid rgba(255,255,255,0.1); }
    .msb-icon { font-size: 18px; }
    .msb-section { padding: 12px 14px 4px; font-size: 9px; color: rgba(255,255,255,0.4); letter-spacing: 1px; text-transform: uppercase; }
    .msb-item { padding: 7px 14px; font-size: 11px; color: rgba(255,255,255,0.55); cursor: pointer; border-radius: 0; }
    .msb-item.active { background: rgba(255,255,255,0.12); color: #fff; }
    .mock-main { flex: 1; padding: 20px 24px; overflow: hidden; background: #FAFAFA; }
    .mock-topbar { margin-bottom: 16px; }
    .mock-title { font-size: 18px; font-weight: 600; color: #111; margin-bottom: 12px; }
    .mock-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .mock-action { font-size: 11px; padding: 5px 10px; border: 1px solid #E0E0E0; border-radius: 5px; color: #555; background: #fff; cursor: pointer; white-space: nowrap; }
    .mock-action.danger { color: #E53935; border-color: #FFCDD2; }
    .mock-action.export { color: #7B5EA7; }
    .mock-section-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #999; margin: 12px 0 10px; text-transform: uppercase; }
    .mock-cards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
    .mock-card { background: #fff; border: 1px solid #EEE; border-top: 3px solid #ccc; border-radius: 8px; padding: 12px; }
    .mc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
    .mc-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
    .mc-stat { font-size: 10px; font-weight: 600; }
    .mc-title { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 4px; }
    .mc-desc { font-size: 10px; color: #888; line-height: 1.4; margin-bottom: 8px; }
    .mc-dots { font-size: 10px; color: #888; display: flex; flex-wrap: wrap; gap: 6px; }
    .mcd { white-space: nowrap; }

    /* Animal card */
    .animal-card-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; background: #fff; border: 1px solid #EEE; border-radius: 10px; padding: 14px; }
    .animal-avatar { width: 64px; height: 64px; background: #F3E5F5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
    .animal-name { font-size: 16px; font-weight: 600; color: #111; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .animal-id { font-size: 11px; color: #888; font-weight: 400; }
    .animal-sex { color: #E91E63; }
    .animal-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
    .tag { font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 500; }
    .tag-purple { background: #EDE7F6; color: #6A1B9A; }
    .tag-red { background: #FFEBEE; color: #C62828; }
    .tag-yellow { background: #FFF9C4; color: #F57F17; }
    .tag-green { background: #E8F5E9; color: #2E7D32; }
    .animal-meta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 16px; }
    .ameta-l { font-size: 10px; color: #999; }
    .ameta-v { font-size: 11px; color: #111; font-weight: 500; }
    .animal-location { font-size: 11px; background: #F3E5F5; color: #6A1B9A; padding: 6px 12px; border-radius: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; }
    .link-blue { color: #1565C0; cursor: pointer; }
    .animal-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .abtn { font-size: 11px; padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; }
    .abtn.purple { background: #7B5EA7; color: #fff; }
    .abtn.outline-purple { background: #fff; color: #7B5EA7; border: 1px solid #7B5EA7; }
    .abtn.outline { background: #fff; color: #555; border: 1px solid #CCC; }
    .abtn.outline-red { background: #fff; color: #E53935; border: 1px solid #FFCDD2; }
    .status-label { font-size: 10px; font-weight: 600; color: #999; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
    .status-track { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
    .strack-item { font-size: 10px; padding: 4px 10px; border: 1px solid #DDD; border-radius: 99px; color: #888; background: #fff; white-space: nowrap; }
    .strack-item.done { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
    .strack-item.current { background: #7B5EA7; color: #fff; border-color: #7B5EA7; }
    .strack-arrow { color: #CCC; font-size: 14px; }
    .status-info { font-size: 11px; background: #F3E5F5; color: #6A1B9A; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }
    .animal-tabs { display: flex; gap: 0; border-bottom: 1px solid #EEE; margin-bottom: 12px; flex-wrap: wrap; }
    .atab { font-size: 11px; padding: 7px 12px; color: #888; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
    .atab.active { color: #7B5EA7; border-bottom-color: #7B5EA7; }
    .info-table { background: #fff; border: 1px solid #EEE; border-radius: 8px; overflow: hidden; }
    .info-row { display: flex; padding: 8px 14px; border-bottom: 0.5px solid #F5F5F5; }
    .info-row:last-child { border: none; }
    .info-l { width: 140px; font-size: 11px; color: #999; flex-shrink: 0; }
    .info-v { font-size: 11px; color: #111; font-weight: 500; }

    /* Vet dashboard */
    .vet-route-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
    .vrt { font-size: 11px; padding: 5px 14px; border-radius: 99px; border: 1px solid #DDD; color: #888; cursor: pointer; }
    .vrt.active { background: #7B5EA7; color: #fff; border-color: #7B5EA7; }
    .vet-route-header { background: #fff; border: 1px solid #EEE; border-radius: 10px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .vrh-badge { font-size: 10px; background: #7B5EA7; color: #fff; padding: 3px 10px; border-radius: 99px; margin-bottom: 6px; display: inline-block; }
    .vrh-name { font-size: 13px; font-weight: 600; color: #111; }
    .vrh-sub { font-size: 11px; color: #888; }
    .vrh-progress { text-align: right; }
    .vrh-num { font-size: 28px; font-weight: 700; color: #7B5EA7; line-height: 1; }
    .vrh-total { font-size: 10px; color: #888; }
    .vet-progress-bar { background: #EDE7F6; height: 4px; border-radius: 2px; margin-bottom: 12px; overflow: hidden; }
    .vet-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
    .vs-item { background: #fff; border: 1px solid #EEE; border-radius: 8px; padding: 10px 12px; }
    .vs-label { font-size: 10px; color: #999; margin-bottom: 4px; }
    .vs-val { font-size: 20px; font-weight: 700; color: #111; }
    .vet-alert-label { font-size: 10px; font-weight: 700; color: #E53935; letter-spacing: 0.5px; margin-bottom: 8px; }
    .vet-alerts { background: #fff; border: 1px solid #FFCDD2; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
    .va-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 0.5px solid #FFF; }
    .va-item:last-child { border: none; }
    .va-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
    .va-dot.red { background: #E53935; }
    .va-dot.orange { background: #FB8C00; }
    .va-title { font-size: 11px; font-weight: 600; color: #111; }
    .va-sub { font-size: 10px; color: #888; }
    .va-time { font-size: 10px; font-weight: 600; margin-left: auto; flex-shrink: 0; }
    .va-time.red { color: #E53935; }
    .va-time.orange { color: #FB8C00; }
    .vet-animal { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #EEE; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
    .vaa-avatar { font-size: 24px; }
    .vaa-name { font-size: 12px; font-weight: 600; color: #7B5EA7; }
    .vaa-sub { font-size: 10px; color: #888; }
    .vaa-prog { display: flex; align-items: center; margin-left: auto; }
    .vet-task { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid #EEE; border-radius: 8px; margin-bottom: 6px; }
    .vet-task.done { background: #F9F9F9; }
    .vtask-check { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #DDD; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
    .vtask-check.done { background: #7B5EA7; border-color: #7B5EA7; }
    .vtask-title { font-size: 11px; font-weight: 600; color: #111; }
    .vtask-title.done { text-decoration: line-through; color: #999; }
    .vtask-sub { font-size: 10px; color: #888; margin: 2px 0; }
    .vtask-done { font-size: 10px; color: #43A047; }
    .vtask-time { font-size: 10px; color: #888; margin-left: auto; flex-shrink: 0; white-space: nowrap; }
    .tag-small { font-size: 9px; padding: 1px 6px; border-radius: 99px; }
    .tag-small.purple { background: #EDE7F6; color: #6A1B9A; }
    .tag-small.blue { background: #E3F2FD; color: #1565C0; }


    /* ─── FUNDRAISING MOCKUP ─── */
    .fd-group-label { font-size:10px;font-weight:700;color:#555;letter-spacing:0.8px;text-transform:uppercase;margin:14px 0 8px;display:flex;align-items:center;gap:6px; }
    .fd-metrics-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px; }
    .fd-metric { background:#fff;border:1px solid #E8E0E0;border-radius:8px;padding:10px 12px; }
    .fd-metric.highlight { background:#FFF8E1;border-color:#FFE082; }
    .fd-metric-label { font-size:9px;color:#999;margin-bottom:4px;line-height:1.3; }
    .fd-metric-val { font-size:18px;font-weight:700;color:#111;line-height:1.1;margin-bottom:3px; }
    .fd-metric-sub { font-size:9px;color:#888; }
    .fd-bar { height:3px;background:#F0F0F0;border-radius:2px;margin-top:6px;overflow:hidden; }
    .fd-bar-fill { height:100%;border-radius:2px; }
    /* Grant calendar */
    .gc-toolbar { display:flex;align-items:center;gap:8px;margin-bottom:12px; }
    .gc-tab { font-size:11px;padding:5px 14px;border-radius:99px;border:1px solid #DDD;color:#888;cursor:pointer; }
    .gc-tab.active { background:#1A2332;color:#fff;border-color:#1A2332; }
    .gc-btn { font-size:11px;padding:5px 14px;background:#FF3D6B;color:#fff;border-radius:6px;margin-left:auto;cursor:pointer; }
    .gc-table { width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #EEE;font-size:11px;margin-bottom:12px; }
    .gc-table th { background:#F8F8F8;padding:8px 10px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #EEE; }
    .gc-table td { padding:8px 10px;border-bottom:0.5px solid #F5F5F5;vertical-align:top; }
    .gc-name { font-weight:600;color:#111;margin-bottom:2px; }
    .gc-sub { font-size:9px;color:#999; }
    .gc-date { font-weight:500;color:#333; }
    .gc-date.red { color:#E53935; }
    .gc-status { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap; }
    .gc-status.yellow { background:#FFF9C4;color:#F57F17; }
    .gc-status.green { background:#E8F5E9;color:#2E7D32; }
    .gc-status.red { background:#FFEBEE;color:#C62828; }
    .gc-status.blue { background:#E3F2FD;color:#1565C0; }
    .gc-status.gray { background:#F5F5F5;color:#757575; }
    .gc-summary { display:flex;gap:16px;background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px 16px; }
    .gc-sum-item { flex:1; }
    .gc-sum-l { font-size:9px;color:#999;margin-bottom:3px;text-transform:uppercase; }
    .gc-sum-v { font-size:11px;font-weight:600; }
    /* Strategy */
    .strat-tabs { display:flex;gap:0;border-bottom:1px solid #DDD;margin-bottom:14px; }
    .strat-tab { font-size:11px;padding:7px 14px;color:#888;cursor:pointer;border-bottom:2px solid transparent; }
    .strat-tab.active { color:#1A2332;border-bottom-color:#1A2332;font-weight:600; }
    .dj-flow { display:flex;align-items:flex-start;gap:4px;margin-bottom:16px; }
    .dj-stage { flex:1;background:#fff;border:1px solid #EEE;border-top:3px solid #ccc;border-radius:8px;padding:10px; }
    .dj-num { width:20px;height:20px;border-radius:50%;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#555;margin-bottom:6px; }
    .dj-title { font-size:11px;font-weight:700;color:#111;margin-bottom:4px; }
    .dj-desc { font-size:9px;color:#666;margin-bottom:4px;line-height:1.4; }
    .dj-channels { font-size:9px;color:#999;font-style:italic; }
    .dj-arrow { color:#CCC;font-size:16px;margin-top:30px;flex-shrink:0; }
    .dp-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
    .dp-card { background:#fff;border:1px solid #EEE;border-top:3px solid #ccc;border-radius:8px;padding:10px; }
    .dp-name { font-size:11px;font-weight:700;color:#111;margin-bottom:4px; }
    .dp-desc { font-size:9px;color:#666;line-height:1.4;margin-bottom:6px; }
    .dp-metric { font-size:10px;font-weight:600;color:#555; }


    /* ─── TASK TRACKER MOCKUP ─── */
    .tk-new-btn { font-size:11px;padding:6px 14px;background:#4A6CF7;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit; }
    .tk-filters { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
    .tk-search { font-size:11px;padding:5px 10px;border:1px solid #DDD;border-radius:6px;flex:1;min-width:140px;background:#fff;font-family:inherit; }
    .tk-select { font-size:11px;padding:5px 8px;border:1px solid #DDD;border-radius:6px;background:#fff;font-family:inherit;color:#555;cursor:pointer; }
    .tk-stats-row { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
    .tk-stat-pill { font-size:10px;padding:4px 10px;border-radius:99px;background:#fff;border:1px solid #E0E0E0;color:#555; }
    .tk-stat-pill.red { background:#FFEBEE;border-color:#FFCDD2;color:#C62828; }
    .tk-stat-pill.orange { background:#FFF3E0;border-color:#FFE0B2;color:#E65100; }
    .tk-stat-pill.green { background:#E8F5E9;border-color:#C8E6C9;color:#2E7D32; }
    .tk-table { width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #EEE;font-size:11px; }
    .tk-table th { background:#F8F8F8;padding:7px 8px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #EEE; }
    .tk-table td { padding:8px;border-bottom:0.5px solid #F5F5F5;vertical-align:middle; }
    .tk-row.overdue td { background:#FFF8F8; }
    .tk-row.done td { background:#FAFAFA; }
    .tk-check { width:14px;height:14px;border:1.5px solid #DDD;border-radius:3px; }
    .tk-check.checked { background:#4A6CF7;border-color:#4A6CF7;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center; }
    .tk-name { font-weight:600;color:#111;margin-bottom:2px; }
    .tk-name.done-text { text-decoration:line-through;color:#999;font-weight:400; }
    .tk-sub { font-size:9px;color:#999; }
    .tk-dir { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:500;white-space:nowrap; }
    .tk-dir.attract { background:#E3F2FD;color:#1565C0; }
    .tk-dir.grant { background:#F3E5F5;color:#6A1B9A; }
    .tk-dir.manage { background:#FFF3E0;color:#E65100; }
    .tk-dir.recur { background:#E8F5E9;color:#2E7D32; }
    .tk-dir.platform { background:#ECEFF1;color:#37474F; }
    .tk-user { width:26px;height:26px;border-radius:50%;background:#4A6CF7;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .tk-date { font-size:10px;font-weight:500;color:#333; }
    .tk-date.red { color:#E53935; }
    .tk-date.orange { color:#FB8C00; }
    .tk-prio { font-size:9px;padding:2px 7px;border-radius:99px;font-weight:600; }
    .tk-prio.high { background:#FFEBEE;color:#C62828; }
    .tk-prio.mid { background:#FFF3E0;color:#E65100; }
    .tk-prio.low { background:#F5F5F5;color:#757575; }
    .tk-status { font-size:9px;padding:2px 7px;border-radius:99px;font-weight:600; }
    .tk-status.inprogress { background:#E3F2FD;color:#1565C0; }
    .tk-status.done { background:#E8F5E9;color:#2E7D32; }
    .tk-status.new { background:#F5F5F5;color:#757575; }
    /* Dashboard */
    .tk-dash-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px; }
    .tk-ds-card { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px;text-align:center; }
    .tk-ds-val { font-size:28px;font-weight:700;color:#111;line-height:1; }
    .tk-ds-label { font-size:10px;color:#999;margin-top:4px; }
    .tk-dash-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
    .tk-dash-col { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .tk-dash-title { font-size:11px;font-weight:600;color:#333;margin-bottom:10px; }
    .tk-person-rows { display:flex;flex-direction:column;gap:8px; }
    .tk-person-row { display:flex;align-items:center;gap:6px; }
    .tk-person-name { font-size:10px;color:#555;width:72px;flex-shrink:0; }
    .tk-person-bar { flex:1;height:5px;background:#F0F0F0;border-radius:3px;overflow:hidden; }
    .tk-pb-fill { height:100%;border-radius:3px; }
    .tk-person-cnt { font-size:10px;color:#888;width:40px;text-align:right;flex-shrink:0; }
    .tk-dir-rows { display:flex;flex-direction:column;gap:7px; }
    .tk-dir-row { display:flex;align-items:center;gap:6px; }
    .tk-dir-cnt { font-size:10px;color:#888;width:20px;text-align:right;flex-shrink:0; }
    .tk-week-bars { display:flex;gap:4px;align-items:flex-end;height:60px;margin-top:8px; }
    .tk-week-col { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%; }
    .tk-week-bar { width:100%;border-radius:3px 3px 0 0;transition:height 0.3s; }
    .tk-week-day { font-size:9px;color:#999; }
    /* Task card */
    .tk-task-card { background:#fff;border:1px solid #EEE;border-radius:10px;padding:16px; }
    .tk-meta-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#F8F8F8;border-radius:8px;padding:10px 12px;margin-bottom:12px; }
    .tk-meta-row { display:flex;align-items:center;gap:8px; }
    .tk-meta-l { font-size:10px;color:#999;width:70px;flex-shrink:0; }
    .tk-desc-block { background:#F8F8F8;border-radius:8px;padding:10px 12px;margin-bottom:12px; }
    .tk-act-btn { font-size:10px;padding:4px 10px;border:1px solid #DDD;border-radius:5px;background:#fff;cursor:pointer;font-family:inherit;color:#555; }
    .tk-comments-block { margin-bottom:12px; }
    .tk-comment { display:flex;gap:8px;margin-bottom:8px;align-items:flex-start; }
    .tk-comment-input { display:flex;gap:6px;margin-top:8px; }
    .tk-comment-input input { flex:1;font-size:11px;padding:6px 10px;border:1px solid #DDD;border-radius:6px;font-family:inherit; }
    .tk-comment-input button { font-size:11px;padding:6px 12px;background:#4A6CF7;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit; }
    .tk-history { border-top:0.5px solid #EEE;padding-top:10px; }
    .tk-hist-row { display:flex;align-items:center;gap:8px;margin-bottom:4px; }
    .tk-hist-dot { width:6px;height:6px;border-radius:50%;background:#DDD;flex-shrink:0; }


    /* ─── MONITORING MOCKUP ─── */
    .mn-stats-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px; }
    .mn-stat { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .mn-stat.highlight { background:#E8EAF6;border-color:#9FA8DA; }
    .mn-stat-val { font-size:24px;font-weight:700;color:#1A237E;line-height:1;margin-bottom:4px; }
    .mn-stat-label { font-size:11px;font-weight:600;color:#333;margin-bottom:2px; }
    .mn-stat-sub { font-size:9px;color:#888; }
    .mn-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
    .mn-col { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .mn-col-title { font-size:11px;font-weight:600;color:#333;margin-bottom:10px; }
    .mn-topic-rows { display:flex;flex-direction:column;gap:6px; }
    .mn-topic-row { display:flex;align-items:center;gap:6px; }
    .mn-topic-name { font-size:10px;color:#555;width:110px;flex-shrink:0; }
    .mn-topic-bar { flex:1;height:5px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-topic-cnt { font-size:10px;color:#888;width:20px;text-align:right; }
    .mn-facts { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px; }
    .mn-fact { background:#F5F7FA;border-radius:6px;padding:8px 10px; }
    .mn-fact-num { font-size:20px;font-weight:700;color:#1A237E;line-height:1;margin-bottom:2px; }
    .mn-fact-text { font-size:9px;color:#666;line-height:1.3; }
    .mn-coverage-bars { display:flex;flex-direction:column;gap:5px; }
    .mn-cov-item { display:flex;align-items:center;gap:6px; }
    .mn-cov-label { font-size:10px;color:#555;width:28px; }
    .mn-cov-bar { flex:1;height:5px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-cov-pct { font-size:10px;color:#3F51B5;font-weight:600;width:28px;text-align:right; }
    .mn-filters { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
    .mn-table { width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #EEE;font-size:11px; }
    .mn-table th { background:#F8F8F8;padding:7px 8px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #EEE; }
    .mn-table td { padding:8px;border-bottom:0.5px solid #F5F5F5;vertical-align:middle; }
    .mn-expert-name { font-weight:600;color:#111;margin-bottom:2px; }
    .mn-expert-org { font-size:9px;color:#999; }
    .mn-badge { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600; }
    .mn-badge.active { background:#E8F5E9;color:#2E7D32; }
    .mn-badge.pause { background:#FFF3E0;color:#E65100; }
    .mn-badge.new { background:#E3F2FD;color:#1565C0; }
    .mn-cov-mini { width:40px;height:6px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-period-tabs { display:flex;gap:6px;margin-bottom:12px; }
    .mn-pt { font-size:11px;padding:5px 14px;border-radius:99px;border:1px solid #C5CAE9;color:#3F51B5;cursor:pointer;background:#fff; }
    .mn-pt.active { background:#1A237E;color:#fff;border-color:#1A237E; }
    .mn-period-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px; }
    .mn-ps-card { background:#fff;border:1px solid #EEE;border-radius:8px;padding:10px; }
    .mn-ps-val { font-size:22px;font-weight:700;color:#1A237E;line-height:1;margin-bottom:3px; }
    .mn-ps-label { font-size:9px;color:#666;margin-bottom:3px; }
    .mn-ps-delta { font-size:9px;font-weight:600; }
    .mn-ps-delta.green { color:#2E7D32; }
    .mn-dyn-chart { display:flex;flex-direction:column;gap:6px; }
    .mn-dyn-row { display:flex;align-items:center;gap:6px; }
    .mn-dyn-year { font-size:10px;color:#555;width:28px; }
    .mn-dyn-bar-wrap { flex:1;height:14px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-dyn-bar { height:100%;border-radius:3px; }
    .mn-dyn-val { font-size:10px;color:#555;width:42px;text-align:right; }
    .mn-types { display:flex;flex-direction:column;gap:8px; }
    .mn-type-row { display:flex;align-items:center;gap:8px; }
    .mn-type-icon { width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }
    .mn-type-name { font-size:11px;font-weight:600;color:#111; }
    .mn-type-sub { font-size:9px;color:#888; }
    .mn-type-val { font-size:14px;font-weight:700;color:#1A237E;margin-left:auto;flex-shrink:0; }


    /* ─── VACCINATION MOCKUP ─── */
    .vc-form { background:#fff;border:1px solid #EEE;border-radius:10px;padding:16px; }
    .vc-section-label { font-size:10px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px; }
    .vc-animal-btns { display:flex;gap:8px;margin-bottom:14px; }
    .vc-animal-btn { font-size:12px;padding:8px 20px;border:1.5px solid #DDD;border-radius:8px;cursor:pointer;color:#555;background:#fff; }
    .vc-animal-btn.active { background:#1B4332;color:#fff;border-color:#1B4332; }
    .vc-fields-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
    .vc-field { }
    .vc-field-label { font-size:10px;color:#999;margin-bottom:4px; }
    .vc-input-mock { font-size:12px;padding:7px 10px;border:1px solid #DDD;border-radius:6px;color:#111;background:#fff; }
    .vc-input-mock.active-field { border-color:#1B4332; }
    .vc-input-mock.computed { background:#F0FFF4;color:#1B5E20;font-weight:500;border-color:#A5D6A7; }
    .vc-age-tabs { display:flex;gap:0;border:1px solid #DDD;border-radius:6px;overflow:hidden;margin-bottom:10px;width:fit-content; }
    .vc-age-tab { font-size:11px;padding:5px 14px;cursor:pointer;color:#777;background:#fff; }
    .vc-age-tab.active { background:#1B4332;color:#fff; }
    .vc-vac-select { margin-bottom:8px; }
    .vc-vac-info { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px; }
    .vc-vi-item { font-size:10px;color:#555;background:#F0FFF4;padding:3px 10px;border-radius:99px;border:0.5px solid #A5D6A7; }
    .vc-submit-btn { width:100%;padding:12px;background:#1B4332;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit; }
    .vc-print-btn { font-size:11px;padding:6px 14px;background:#1B4332;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit; }
    .vc-schedule-sections { display:flex;flex-direction:column;gap:12px; }
    .vc-sched-group { border:1px solid #EEE;border-radius:8px;overflow:hidden;background:#fff; }
    .vc-sched-group-title { font-size:11px;font-weight:700;padding:8px 12px;letter-spacing:0.3px; }
    .vc-table { width:100%;border-collapse:collapse;font-size:11px; }
    .vc-table th { background:#FAFAFA;padding:6px 8px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:0.5px solid #EEE; }
    .vc-table td { padding:7px 8px;border-bottom:0.5px solid #F5F5F5;vertical-align:middle; }
    .vc-date { font-weight:500;color:#333;white-space:nowrap; }
    .vc-date.done { color:#888;text-decoration:line-through; }
    .vc-date.today { color:#E65100;font-weight:700; }
    .vc-s { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap; }
    .vc-s.done { background:#E8F5E9;color:#2E7D32; }
    .vc-s.pending { background:#F5F5F5;color:#757575; }
    .vc-s.today { background:#FFF3E0;color:#E65100; }
    .vc-s.future { background:#E3F2FD;color:#1565C0; }


    /* ─── PROCESS MGMT MOCKUP ─── */
    .pr-macros { display:flex;flex-direction:column;gap:10px; }
    .pr-macro { border:1px solid #E0E0E0;border-radius:8px;overflow:hidden;background:#fff; }
    .pr-macro-header { padding:10px 14px;display:flex;justify-content:space-between;align-items:center; }
    .pr-macro-title { font-size:13px;font-weight:700;color:#111; }
    .pr-macro-meta { display:flex;gap:8px;align-items:center; }
    .pr-badge { font-size:10px;padding:2px 10px;border-radius:99px;font-weight:600; }
    .pr-badge.blue { background:#E3F2FD;color:#1565C0; }
    .pr-badge.green { background:#E8F5E9;color:#2E7D32; }
    .pr-badge.orange { background:#FFF3E0;color:#E65100; }
    .pr-badge-cnt { font-size:10px;color:#888; }
    .pr-processes { padding:4px 0; }
    .pr-process { display:flex;align-items:center;gap:10px;padding:7px 14px;border-top:0.5px solid #F5F5F5; }
    .pr-proc-num { font-size:10px;color:#999;width:24px;flex-shrink:0;font-family:monospace; }
    .pr-proc-name { font-size:12px;color:#333;flex:1; }
    .pr-proc-owner { font-size:10px;color:#888;width:100px;flex-shrink:0; }
    .pr-proc-status { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap; }
    .pr-proc-status.ok { background:#E8F5E9;color:#2E7D32; }
    .pr-proc-status.warn { background:#FFF3E0;color:#E65100; }
    .pr-proc-status.none { background:#F5F5F5;color:#999; }
    /* SOP */
    .sop-doc { background:#fff;border:1px solid #EEE;border-radius:10px;padding:16px; }
    .sop-meta-row { display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#F8F8F8;border-radius:8px;padding:12px;margin-bottom:14px; }
    .sop-meta-item { display:flex;flex-direction:column;gap:3px; }
    .sop-ml { font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px; }
    .sop-mv { font-size:11px;color:#111;font-weight:500;line-height:1.4; }
    .sop-steps-title { font-size:11px;font-weight:700;color:#333;margin-bottom:8px; }
    .sop-steps { display:flex;flex-direction:column;gap:8px;margin-bottom:14px; }
    .sop-step { display:flex;gap:10px;align-items:flex-start; }
    .sop-step-num { width:22px;height:22px;border-radius:50%;background:#263238;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px; }
    .sop-step-name { font-size:12px;font-weight:600;color:#111;margin-bottom:3px; }
    .sop-step-note { font-size:10px;color:#888;line-height:1.4; }
    .sop-checklist-title { font-size:11px;font-weight:700;color:#333;margin-bottom:8px; }
    .sop-checks { display:flex;flex-direction:column;gap:6px; }
    .sop-check { display:flex;align-items:center;gap:8px; }
    .sop-chk-box { width:16px;height:16px;border-radius:3px;border:1.5px solid #DDD;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff; }
    .sop-chk-box.done { background:#2E7D32;border-color:#2E7D32; }
    .sop-check span { font-size:11px;color:#444; }
    .sop-check.done span { text-decoration:line-through;color:#999; }
    /* Analytics */
    .pr-analytics-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px; }
    .pr-as-card { background:#fff;border:1px solid #EEE;border-radius:8px;padding:10px 12px; }
    .pr-as-card.green { background:#F1F8E9; }
    .pr-as-card.orange { background:#FFF8F0; }
    .pr-as-val { font-size:24px;font-weight:700;color:#111;line-height:1;margin-bottom:3px; }
    .pr-as-label { font-size:10px;font-weight:600;color:#444;margin-bottom:2px; }
    .pr-as-sub { font-size:9px;color:#888; }
    .pr-an-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
    .pr-an-col { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .pr-an-title { font-size:11px;font-weight:600;color:#333;margin-bottom:10px; }
    .pr-coverage { display:flex;flex-direction:column;gap:7px; }
    .pr-cov-row { display:flex;align-items:center;gap:6px; }
    .pr-cov-name { font-size:10px;color:#555;width:100px;flex-shrink:0; }
    .pr-cov-bar { flex:1;height:6px;background:#F0F0F0;border-radius:3px;overflow:hidden; }
    .pr-cov-pct { font-size:10px;font-weight:600;color:#333;width:28px;text-align:right; }
    .pr-status-list { display:flex;flex-direction:column;gap:8px; }
    .pr-sl-row { display:flex;align-items:center;gap:6px; }
    .pr-sl-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
    .pr-sl-name { font-size:10px;color:#555;width:110px;flex-shrink:0; }
    .pr-sl-bar { flex:1;height:8px;background:#F0F0F0;border-radius:3px;overflow:hidden;position:relative; }
    .pr-sl-cnt { font-size:10px;font-weight:600;color:#333;width:16px;text-align:right; }
    .pr-month-bars { display:flex;gap:6px;align-items:flex-end;height:56px;margin-top:8px; }
    .pr-mb-col { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%; }
    .pr-mb-bar { width:100%;border-radius:3px 3px 0 0; }
    .pr-mb-label { font-size:9px;color:#999; }


    .cases-disclaimer {
      font-size: 12px; color: #aaa; line-height: 1.6;
      padding: 20px 0; border-top: 0.5px solid var(--border);
      text-align: center; max-width: 600px; margin: 0 auto;
    }


    /* ─── AWARD STRIP ─── */
    .award-strip {
      background: #111; padding: 14px 0;
      border-bottom: 0.5px solid #222;
    }
    .award-inner {
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    }
    .award-icon { font-size: 18px; flex-shrink: 0; }
    .award-text {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1;
    }
    .award-title { font-size: 13px; font-weight: 500; color: #fff; }
    .award-sep { color: #444; }
    .award-sub { font-size: 13px; color: #888; }
    .award-link {
      font-size: 12px; font-weight: 500;
      color: #FF3D6B !important; text-decoration: none !important;
      white-space: nowrap; flex-shrink: 0; transition: opacity 0.15s;
    }
    .award-link:hover { opacity: 0.8; }
    .case-award-badge {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 11px; font-weight: 500;
      background: #FFF8E1; color: #B07800;
      border: 0.5px solid #FFE082;
      padding: 4px 12px; border-radius: 99px;
      margin-bottom: 10px;
      text-decoration: none !important; color: #B07800 !important;
    }
    .case-award-badge:hover { background: #FFF3CD; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 720px) {
      .container { padding: 0 20px; }
      .hero h1 { font-size: 40px; letter-spacing: -1.5px; }
      .pain-grid, .cases-grid, .how-grid { grid-template-columns: 1fr; }
      .case-card.wide { grid-column: span 1; }
      .why-not { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
      .about-block { grid-template-columns: 1fr; }
      .form-block { padding: 36px 24px; }
      .form-row { grid-template-columns: 1fr; }
      .form-group.full { grid-column: span 1; }
      .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
      .nav-links { display: none; }
    }
  



    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    a, a:link, a:visited, a:hover, a:active { text-decoration: none; }

    :root {
      --coral:        #FF3D6B;
      --coral-light:  rgba(255,61,107,0.08);
      --coral-border: rgba(240,58,23,0.25);
      --coral-dark:   #CC1A44;
      --black:        #111111;
      --white:        #FAFAF8;
      --gray:         #666666;
      --border:       #E8E0E0;
      --card-bg:      #F4F0F0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--white);
      color: var(--black);
      font-size: 16px;
      line-height: 1.6;
    }

    /* ─── GLOBAL RESETS ─── */
    a { text-decoration: none; }
    button { font-family: inherit; cursor: pointer; }
    img { display: block; max-width: 100%; }

    /* ─── LAYOUT ─── */
    .container { max-width: 960px; margin: 0 auto; padding: 0 32px; }
    .divider { border: none; border-top: 0.5px solid var(--border); margin: 56px 0; }
    .section-label {
      font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 1.2px;
      color: var(--coral); margin-bottom: 20px;
    }

    /* ─── NAV ─── */
    nav {
      border-bottom: 0.5px solid var(--border);
      padding: 20px 0;
      position: sticky; top: 0;
      background: var(--white);
      z-index: 100;
    }
    .nav-inner { display: flex; justify-content: space-between; align-items: center; }
    .logo {
      font-size: 16px; font-weight: 500;
      letter-spacing: -0.3px; color: var(--black);
    }
    .logo em { font-style: normal; color: var(--coral); }
    .nav-links { display: flex; gap: 28px; align-items: center; }
    .nav-links a, .nav-links a:link, .nav-links a:visited { font-size: 14px; color: #666666 !important; transition: color 0.15s; text-decoration: none !important; }
    .nav-links a:hover { color: #111111 !important; }
    .btn-nav, .btn-nav:link, .btn-nav:visited {
      font-size: 13px; font-weight: 500;
      padding: 9px 20px; border-radius: 6px;
      border: none; background: var(--coral);
      color: #ffffff !important; display: inline-block;
      transition: opacity 0.15s; text-decoration: none !important;
    }
    .btn-nav:hover { opacity: 0.85; color: #ffffff !important; }

    /* ─── HERO ─── */
    .hero { padding: 0; border-bottom: 0.5px solid var(--border); }
    .hero-inner {
      display: grid;
      grid-template-columns: 1fr 320px;
      align-items: end;
      max-width: 960px; margin: 0 auto; padding: 0 32px;
      min-height: 420px;
    }
    .hero-left { padding: 64px 0 48px; }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 500;
      color: #999; letter-spacing: 0.8px;
      text-transform: uppercase; margin-bottom: 28px;
    }
    .hero-tag::before {
      content: ''; display: inline-block;
      width: 20px; height: 2px; background: var(--coral);
    }
    .hero h1 {
      font-size: 88px; font-weight: 700;
      line-height: 0.92; letter-spacing: -4px;
      color: var(--black); margin-bottom: 0;
    }
    .hero h1 span { display: block; }
    .h1-accent { color: var(--coral) !important; }
    .h1-stroke {
      -webkit-text-stroke: 2.5px var(--black);
      color: transparent !important;
    }
    .hero-right {
      border-left: 0.5px solid var(--border);
      padding: 0 0 48px 40px;
      display: flex; flex-direction: column;
      justify-content: flex-end; gap: 28px;
      align-self: stretch; padding-top: 64px;
    }
    .hero-sub {
      font-size: 15px; color: var(--gray); line-height: 1.65;
    }
    .hero-btns { display: flex; flex-direction: column; gap: 10px; }
    .hero-ticker {
      border-top: 0.5px solid var(--border);
      padding: 16px 32px;
      max-width: 960px; margin: 0 auto;
      display: flex; gap: 36px; flex-wrap: wrap;
    }
    .ticker-item {
      display: flex; align-items: center; gap: 8px;
      white-space: nowrap;
    }
    .ticker-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--coral); flex-shrink: 0;
    }
    .ticker-item span { font-size: 12px; color: #999; }

    /* ─── BUTTONS ─── */
    .btn-primary, .btn-primary:link, .btn-primary:visited {
      font-size: 15px; font-weight: 500;
      padding: 13px 28px; border-radius: 6px;
      border: none; background: var(--coral);
      color: #ffffff !important; display: inline-block;
      transition: opacity 0.15s; text-decoration: none !important;
    }
    .btn-primary:hover { opacity: 0.85; color: #ffffff !important; }
    .btn-outline, .btn-outline:link, .btn-outline:visited {
      font-size: 15px; font-weight: 500;
      padding: 13px 28px; border-radius: 6px;
      border: 1.5px solid var(--border);
      background: transparent; color: #111111 !important;
      display: inline-block; transition: border-color 0.15s;
      text-decoration: none !important;
    }
    .btn-outline:hover { border-color: #bbb; color: #111111 !important; }

    /* ─── PAIN ─── */
    .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .pain-card {
      background: var(--card-bg); border-radius: 14px;
      padding: 24px; border-left: 3px solid var(--coral);
    }
    .pain-card-label {
      font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.6px;
      color: var(--coral); margin-bottom: 10px;
    }
    .pain-card p { font-size: 14px; color: var(--gray); line-height: 1.6; }
    .pain-card p b { color: var(--black); font-weight: 500; }

    /* ─── WHY NOT ─── */
    .why-not {
      background: var(--black); border-radius: 16px;
      padding: 40px 48px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 40px; align-items: center;
    }
    .why-not-title {
      font-size: 32px; font-weight: 500;
      letter-spacing: -1px; color: #ffffff; line-height: 1.15;
    }
    .why-not-title em { font-style: normal; color: var(--coral); }
    .why-not-list { list-style: none; }
    .why-not-list li {
      font-size: 14px; color: rgba(255,255,255,0.55);
      padding: 10px 0; border-bottom: 0.5px solid rgba(255,255,255,0.08);
      display: flex; gap: 12px; align-items: flex-start; line-height: 1.5;
    }
    .why-not-list li:last-child { border-bottom: none; }
    .why-not-list li .arr { color: var(--coral); flex-shrink: 0; }

    /* ─── CASES ─── */
    .cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .case-card {
      border: 0.5px solid var(--border); border-radius: 14px;
      padding: 24px; background: var(--white);
      border-top: 3px solid var(--coral);
    }
    .case-card.wide { grid-column: span 2; }
    .case-top {
      display: flex; justify-content: space-between;
      align-items: flex-start; margin-bottom: 14px;
    }
    .case-num { font-size: 11px; color: #bbb; }
    .case-badge {
      font-size: 11px; color: var(--gray);
      background: var(--card-bg); padding: 3px 10px; border-radius: 99px;
    }
    .case-card h3 {
      font-size: 16px; font-weight: 500;
      color: var(--black); margin-bottom: 8px; line-height: 1.3;
    }
    .case-card p {
      font-size: 13px; color: var(--gray);
      line-height: 1.55; margin-bottom: 16px;
    }
    .case-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
    .feature {
      font-size: 11px; color: var(--gray);
      background: var(--card-bg); padding: 3px 10px; border-radius: 99px;
    }
    .case-result {
      font-size: 12px; color: var(--gray);
      padding-top: 14px; border-top: 0.5px solid var(--border);
    }
    .case-result b { color: #2D8A4E; font-weight: 500; }

    /* ─── HOW ─── */
    .how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
    .how-card {
      padding: 28px 24px;
      border: 0.5px solid var(--border); border-radius: 14px;
    }
    .how-num {
      font-size: 40px; font-weight: 500;
      color: var(--coral); letter-spacing: -2px;
      line-height: 1; margin-bottom: 16px;
    }
    .how-card h3 { font-size: 16px; font-weight: 500; color: var(--black); margin-bottom: 8px; }
    .how-card p { font-size: 13px; color: var(--gray); line-height: 1.55; }

    /* ─── ABOUT ─── */
    .about-block { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
    .about-avatar { width: 100%; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: var(--card-bg); }
    .about-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .about-role {
      font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 1px;
      color: var(--coral); margin-bottom: 8px;
    }
    .about-content h2 {
      font-size: 28px; font-weight: 500;
      letter-spacing: -0.8px; color: var(--black); margin-bottom: 16px;
    }
    .about-content p {
      font-size: 15px; color: var(--gray);
      line-height: 1.7; margin-bottom: 14px;
    }
    .about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
    .about-tag {
      font-size: 12px; color: var(--coral-dark);
      background: var(--coral-light);
      border: 0.5px solid var(--coral-border);
      padding: 4px 14px; border-radius: 99px;
    }

    /* ─── FORM ─── */
    .form-block {
      background: var(--black); border-radius: 20px; padding: 56px 64px;
    }
    .form-block h2 {
      font-size: 36px; font-weight: 500;
      letter-spacing: -1px; color: #ffffff; margin-bottom: 8px;
    }
    .form-sub { font-size: 15px; color: rgba(255,255,255,0.45); margin-bottom: 36px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group.full { grid-column: span 2; }
    .form-group label {
      font-size: 11px; color: rgba(255,255,255,0.4);
      text-transform: uppercase; letter-spacing: 0.6px;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
      background: rgba(255,255,255,0.06);
      border: 0.5px solid rgba(255,255,255,0.12);
      border-radius: 8px; padding: 13px 16px;
      font-size: 14px; color: #ffffff;
      font-family: inherit; outline: none;
      transition: border-color 0.15s; width: 100%;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: rgba(255,255,255,0.25); }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus { border-color: var(--coral); }
    .form-group select option { background: #222; color: #fff; }
    .form-group textarea { resize: vertical; min-height: 100px; }
    .btn-submit {
      width: 100%; margin-top: 8px;
      font-size: 15px; font-weight: 500;
      padding: 15px 28px; border-radius: 8px;
      border: none; background: var(--coral);
      color: #ffffff; transition: opacity 0.15s;
    }
    .btn-submit:hover { opacity: 0.85; }
    .btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }
    .form-success { display: none; text-align: center; padding: 32px; }
    .form-success h3 { font-size: 24px; font-weight: 500; color: #fff; margin-bottom: 8px; }
    .form-success p { color: rgba(255,255,255,0.45); }

    /* ─── FOOTER ─── */
    footer { padding: 40px 0; border-top: 0.5px solid var(--border); margin-top: 80px; }
    .footer-inner { display: flex; justify-content: space-between; align-items: center; }
    .footer-links { display: flex; gap: 24px; }
    .footer-links a, .footer-links a:link, .footer-links a:visited { font-size: 13px; color: #666666 !important; transition: color 0.15s; text-decoration: none !important; }
    .footer-links a:hover { color: #111111 !important; }
    .footer-copy { font-size: 12px; color: #bbb; }


    .case-screens { margin-top: 20px; border-top: 0.5px solid var(--border); padding-top: 16px; }
    .stabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .stab {
      font-size: 11px; padding: 5px 12px; border-radius: 99px;
      border: 0.5px solid var(--border); cursor: pointer;
      background: transparent; color: var(--gray);
      font-family: inherit; transition: all 0.15s;
    }
    .stab.on { background: var(--coral); color: #fff; border-color: var(--coral); }
    .sscreen { display: none; }
    .sscreen.on { display: block; }
    .sframe { border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; }
    .sbar {
      background: #F5F1F1; padding: 8px 14px;
      display: flex; align-items: center; gap: 5px;
      border-bottom: 0.5px solid var(--border);
    }
    .sdot { width: 9px; height: 9px; border-radius: 50%; }
    .surl { font-size: 10px; color: #bbb; margin-left: 8px; font-family: monospace; }
    .swin {
      height: 420px; overflow-y: auto; overflow-x: auto;
      background: #fff;
    }
    .simg { display: block; max-width: none; width: auto; height: auto; }
    .scap { font-size: 12px; color: var(--gray); margin-top: 10px; line-height: 1.5; }


    /* ─── INLINE MOCKUPS ─── */
    .mock-app { display: flex; min-width: 960px; min-height: 560px; font-size: 12px; background: #fff; }
    .mock-sb { width: 200px; background: #4A235A; padding: 0; flex-shrink: 0; overflow: hidden; }
    .msb-logo { display: flex; align-items: center; gap: 8px; padding: 16px 14px; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 1px; border-bottom: 0.5px solid rgba(255,255,255,0.1); }
    .msb-icon { font-size: 18px; }
    .msb-section { padding: 12px 14px 4px; font-size: 9px; color: rgba(255,255,255,0.4); letter-spacing: 1px; text-transform: uppercase; }
    .msb-item { padding: 7px 14px; font-size: 11px; color: rgba(255,255,255,0.55); cursor: pointer; border-radius: 0; }
    .msb-item.active { background: rgba(255,255,255,0.12); color: #fff; }
    .mock-main { flex: 1; padding: 20px 24px; overflow: hidden; background: #FAFAFA; }
    .mock-topbar { margin-bottom: 16px; }
    .mock-title { font-size: 18px; font-weight: 600; color: #111; margin-bottom: 12px; }
    .mock-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .mock-action { font-size: 11px; padding: 5px 10px; border: 1px solid #E0E0E0; border-radius: 5px; color: #555; background: #fff; cursor: pointer; white-space: nowrap; }
    .mock-action.danger { color: #E53935; border-color: #FFCDD2; }
    .mock-action.export { color: #7B5EA7; }
    .mock-section-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #999; margin: 12px 0 10px; text-transform: uppercase; }
    .mock-cards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
    .mock-card { background: #fff; border: 1px solid #EEE; border-top: 3px solid #ccc; border-radius: 8px; padding: 12px; }
    .mc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
    .mc-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
    .mc-stat { font-size: 10px; font-weight: 600; }
    .mc-title { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 4px; }
    .mc-desc { font-size: 10px; color: #888; line-height: 1.4; margin-bottom: 8px; }
    .mc-dots { font-size: 10px; color: #888; display: flex; flex-wrap: wrap; gap: 6px; }
    .mcd { white-space: nowrap; }

    /* Animal card */
    .animal-card-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; background: #fff; border: 1px solid #EEE; border-radius: 10px; padding: 14px; }
    .animal-avatar { width: 64px; height: 64px; background: #F3E5F5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
    .animal-name { font-size: 16px; font-weight: 600; color: #111; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .animal-id { font-size: 11px; color: #888; font-weight: 400; }
    .animal-sex { color: #E91E63; }
    .animal-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
    .tag { font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 500; }
    .tag-purple { background: #EDE7F6; color: #6A1B9A; }
    .tag-red { background: #FFEBEE; color: #C62828; }
    .tag-yellow { background: #FFF9C4; color: #F57F17; }
    .tag-green { background: #E8F5E9; color: #2E7D32; }
    .animal-meta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 16px; }
    .ameta-l { font-size: 10px; color: #999; }
    .ameta-v { font-size: 11px; color: #111; font-weight: 500; }
    .animal-location { font-size: 11px; background: #F3E5F5; color: #6A1B9A; padding: 6px 12px; border-radius: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; }
    .link-blue { color: #1565C0; cursor: pointer; }
    .animal-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .abtn { font-size: 11px; padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; }
    .abtn.purple { background: #7B5EA7; color: #fff; }
    .abtn.outline-purple { background: #fff; color: #7B5EA7; border: 1px solid #7B5EA7; }
    .abtn.outline { background: #fff; color: #555; border: 1px solid #CCC; }
    .abtn.outline-red { background: #fff; color: #E53935; border: 1px solid #FFCDD2; }
    .status-label { font-size: 10px; font-weight: 600; color: #999; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
    .status-track { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
    .strack-item { font-size: 10px; padding: 4px 10px; border: 1px solid #DDD; border-radius: 99px; color: #888; background: #fff; white-space: nowrap; }
    .strack-item.done { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
    .strack-item.current { background: #7B5EA7; color: #fff; border-color: #7B5EA7; }
    .strack-arrow { color: #CCC; font-size: 14px; }
    .status-info { font-size: 11px; background: #F3E5F5; color: #6A1B9A; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }
    .animal-tabs { display: flex; gap: 0; border-bottom: 1px solid #EEE; margin-bottom: 12px; flex-wrap: wrap; }
    .atab { font-size: 11px; padding: 7px 12px; color: #888; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
    .atab.active { color: #7B5EA7; border-bottom-color: #7B5EA7; }
    .info-table { background: #fff; border: 1px solid #EEE; border-radius: 8px; overflow: hidden; }
    .info-row { display: flex; padding: 8px 14px; border-bottom: 0.5px solid #F5F5F5; }
    .info-row:last-child { border: none; }
    .info-l { width: 140px; font-size: 11px; color: #999; flex-shrink: 0; }
    .info-v { font-size: 11px; color: #111; font-weight: 500; }

    /* Vet dashboard */
    .vet-route-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
    .vrt { font-size: 11px; padding: 5px 14px; border-radius: 99px; border: 1px solid #DDD; color: #888; cursor: pointer; }
    .vrt.active { background: #7B5EA7; color: #fff; border-color: #7B5EA7; }
    .vet-route-header { background: #fff; border: 1px solid #EEE; border-radius: 10px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .vrh-badge { font-size: 10px; background: #7B5EA7; color: #fff; padding: 3px 10px; border-radius: 99px; margin-bottom: 6px; display: inline-block; }
    .vrh-name { font-size: 13px; font-weight: 600; color: #111; }
    .vrh-sub { font-size: 11px; color: #888; }
    .vrh-progress { text-align: right; }
    .vrh-num { font-size: 28px; font-weight: 700; color: #7B5EA7; line-height: 1; }
    .vrh-total { font-size: 10px; color: #888; }
    .vet-progress-bar { background: #EDE7F6; height: 4px; border-radius: 2px; margin-bottom: 12px; overflow: hidden; }
    .vet-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
    .vs-item { background: #fff; border: 1px solid #EEE; border-radius: 8px; padding: 10px 12px; }
    .vs-label { font-size: 10px; color: #999; margin-bottom: 4px; }
    .vs-val { font-size: 20px; font-weight: 700; color: #111; }
    .vet-alert-label { font-size: 10px; font-weight: 700; color: #E53935; letter-spacing: 0.5px; margin-bottom: 8px; }
    .vet-alerts { background: #fff; border: 1px solid #FFCDD2; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
    .va-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 0.5px solid #FFF; }
    .va-item:last-child { border: none; }
    .va-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
    .va-dot.red { background: #E53935; }
    .va-dot.orange { background: #FB8C00; }
    .va-title { font-size: 11px; font-weight: 600; color: #111; }
    .va-sub { font-size: 10px; color: #888; }
    .va-time { font-size: 10px; font-weight: 600; margin-left: auto; flex-shrink: 0; }
    .va-time.red { color: #E53935; }
    .va-time.orange { color: #FB8C00; }
    .vet-animal { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #EEE; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
    .vaa-avatar { font-size: 24px; }
    .vaa-name { font-size: 12px; font-weight: 600; color: #7B5EA7; }
    .vaa-sub { font-size: 10px; color: #888; }
    .vaa-prog { display: flex; align-items: center; margin-left: auto; }
    .vet-task { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid #EEE; border-radius: 8px; margin-bottom: 6px; }
    .vet-task.done { background: #F9F9F9; }
    .vtask-check { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #DDD; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
    .vtask-check.done { background: #7B5EA7; border-color: #7B5EA7; }
    .vtask-title { font-size: 11px; font-weight: 600; color: #111; }
    .vtask-title.done { text-decoration: line-through; color: #999; }
    .vtask-sub { font-size: 10px; color: #888; margin: 2px 0; }
    .vtask-done { font-size: 10px; color: #43A047; }
    .vtask-time { font-size: 10px; color: #888; margin-left: auto; flex-shrink: 0; white-space: nowrap; }
    .tag-small { font-size: 9px; padding: 1px 6px; border-radius: 99px; }
    .tag-small.purple { background: #EDE7F6; color: #6A1B9A; }
    .tag-small.blue { background: #E3F2FD; color: #1565C0; }


    /* ─── FUNDRAISING MOCKUP ─── */
    .fd-group-label { font-size:10px;font-weight:700;color:#555;letter-spacing:0.8px;text-transform:uppercase;margin:14px 0 8px;display:flex;align-items:center;gap:6px; }
    .fd-metrics-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px; }
    .fd-metric { background:#fff;border:1px solid #E8E0E0;border-radius:8px;padding:10px 12px; }
    .fd-metric.highlight { background:#FFF8E1;border-color:#FFE082; }
    .fd-metric-label { font-size:9px;color:#999;margin-bottom:4px;line-height:1.3; }
    .fd-metric-val { font-size:18px;font-weight:700;color:#111;line-height:1.1;margin-bottom:3px; }
    .fd-metric-sub { font-size:9px;color:#888; }
    .fd-bar { height:3px;background:#F0F0F0;border-radius:2px;margin-top:6px;overflow:hidden; }
    .fd-bar-fill { height:100%;border-radius:2px; }
    /* Grant calendar */
    .gc-toolbar { display:flex;align-items:center;gap:8px;margin-bottom:12px; }
    .gc-tab { font-size:11px;padding:5px 14px;border-radius:99px;border:1px solid #DDD;color:#888;cursor:pointer; }
    .gc-tab.active { background:#1A2332;color:#fff;border-color:#1A2332; }
    .gc-btn { font-size:11px;padding:5px 14px;background:#FF3D6B;color:#fff;border-radius:6px;margin-left:auto;cursor:pointer; }
    .gc-table { width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #EEE;font-size:11px;margin-bottom:12px; }
    .gc-table th { background:#F8F8F8;padding:8px 10px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #EEE; }
    .gc-table td { padding:8px 10px;border-bottom:0.5px solid #F5F5F5;vertical-align:top; }
    .gc-name { font-weight:600;color:#111;margin-bottom:2px; }
    .gc-sub { font-size:9px;color:#999; }
    .gc-date { font-weight:500;color:#333; }
    .gc-date.red { color:#E53935; }
    .gc-status { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap; }
    .gc-status.yellow { background:#FFF9C4;color:#F57F17; }
    .gc-status.green { background:#E8F5E9;color:#2E7D32; }
    .gc-status.red { background:#FFEBEE;color:#C62828; }
    .gc-status.blue { background:#E3F2FD;color:#1565C0; }
    .gc-status.gray { background:#F5F5F5;color:#757575; }
    .gc-summary { display:flex;gap:16px;background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px 16px; }
    .gc-sum-item { flex:1; }
    .gc-sum-l { font-size:9px;color:#999;margin-bottom:3px;text-transform:uppercase; }
    .gc-sum-v { font-size:11px;font-weight:600; }
    /* Strategy */
    .strat-tabs { display:flex;gap:0;border-bottom:1px solid #DDD;margin-bottom:14px; }
    .strat-tab { font-size:11px;padding:7px 14px;color:#888;cursor:pointer;border-bottom:2px solid transparent; }
    .strat-tab.active { color:#1A2332;border-bottom-color:#1A2332;font-weight:600; }
    .dj-flow { display:flex;align-items:flex-start;gap:4px;margin-bottom:16px; }
    .dj-stage { flex:1;background:#fff;border:1px solid #EEE;border-top:3px solid #ccc;border-radius:8px;padding:10px; }
    .dj-num { width:20px;height:20px;border-radius:50%;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#555;margin-bottom:6px; }
    .dj-title { font-size:11px;font-weight:700;color:#111;margin-bottom:4px; }
    .dj-desc { font-size:9px;color:#666;margin-bottom:4px;line-height:1.4; }
    .dj-channels { font-size:9px;color:#999;font-style:italic; }
    .dj-arrow { color:#CCC;font-size:16px;margin-top:30px;flex-shrink:0; }
    .dp-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
    .dp-card { background:#fff;border:1px solid #EEE;border-top:3px solid #ccc;border-radius:8px;padding:10px; }
    .dp-name { font-size:11px;font-weight:700;color:#111;margin-bottom:4px; }
    .dp-desc { font-size:9px;color:#666;line-height:1.4;margin-bottom:6px; }
    .dp-metric { font-size:10px;font-weight:600;color:#555; }


    /* ─── TASK TRACKER MOCKUP ─── */
    .tk-new-btn { font-size:11px;padding:6px 14px;background:#4A6CF7;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit; }
    .tk-filters { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
    .tk-search { font-size:11px;padding:5px 10px;border:1px solid #DDD;border-radius:6px;flex:1;min-width:140px;background:#fff;font-family:inherit; }
    .tk-select { font-size:11px;padding:5px 8px;border:1px solid #DDD;border-radius:6px;background:#fff;font-family:inherit;color:#555;cursor:pointer; }
    .tk-stats-row { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
    .tk-stat-pill { font-size:10px;padding:4px 10px;border-radius:99px;background:#fff;border:1px solid #E0E0E0;color:#555; }
    .tk-stat-pill.red { background:#FFEBEE;border-color:#FFCDD2;color:#C62828; }
    .tk-stat-pill.orange { background:#FFF3E0;border-color:#FFE0B2;color:#E65100; }
    .tk-stat-pill.green { background:#E8F5E9;border-color:#C8E6C9;color:#2E7D32; }
    .tk-table { width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #EEE;font-size:11px; }
    .tk-table th { background:#F8F8F8;padding:7px 8px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #EEE; }
    .tk-table td { padding:8px;border-bottom:0.5px solid #F5F5F5;vertical-align:middle; }
    .tk-row.overdue td { background:#FFF8F8; }
    .tk-row.done td { background:#FAFAFA; }
    .tk-check { width:14px;height:14px;border:1.5px solid #DDD;border-radius:3px; }
    .tk-check.checked { background:#4A6CF7;border-color:#4A6CF7;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center; }
    .tk-name { font-weight:600;color:#111;margin-bottom:2px; }
    .tk-name.done-text { text-decoration:line-through;color:#999;font-weight:400; }
    .tk-sub { font-size:9px;color:#999; }
    .tk-dir { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:500;white-space:nowrap; }
    .tk-dir.attract { background:#E3F2FD;color:#1565C0; }
    .tk-dir.grant { background:#F3E5F5;color:#6A1B9A; }
    .tk-dir.manage { background:#FFF3E0;color:#E65100; }
    .tk-dir.recur { background:#E8F5E9;color:#2E7D32; }
    .tk-dir.platform { background:#ECEFF1;color:#37474F; }
    .tk-user { width:26px;height:26px;border-radius:50%;background:#4A6CF7;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .tk-date { font-size:10px;font-weight:500;color:#333; }
    .tk-date.red { color:#E53935; }
    .tk-date.orange { color:#FB8C00; }
    .tk-prio { font-size:9px;padding:2px 7px;border-radius:99px;font-weight:600; }
    .tk-prio.high { background:#FFEBEE;color:#C62828; }
    .tk-prio.mid { background:#FFF3E0;color:#E65100; }
    .tk-prio.low { background:#F5F5F5;color:#757575; }
    .tk-status { font-size:9px;padding:2px 7px;border-radius:99px;font-weight:600; }
    .tk-status.inprogress { background:#E3F2FD;color:#1565C0; }
    .tk-status.done { background:#E8F5E9;color:#2E7D32; }
    .tk-status.new { background:#F5F5F5;color:#757575; }
    /* Dashboard */
    .tk-dash-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px; }
    .tk-ds-card { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px;text-align:center; }
    .tk-ds-val { font-size:28px;font-weight:700;color:#111;line-height:1; }
    .tk-ds-label { font-size:10px;color:#999;margin-top:4px; }
    .tk-dash-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
    .tk-dash-col { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .tk-dash-title { font-size:11px;font-weight:600;color:#333;margin-bottom:10px; }
    .tk-person-rows { display:flex;flex-direction:column;gap:8px; }
    .tk-person-row { display:flex;align-items:center;gap:6px; }
    .tk-person-name { font-size:10px;color:#555;width:72px;flex-shrink:0; }
    .tk-person-bar { flex:1;height:5px;background:#F0F0F0;border-radius:3px;overflow:hidden; }
    .tk-pb-fill { height:100%;border-radius:3px; }
    .tk-person-cnt { font-size:10px;color:#888;width:40px;text-align:right;flex-shrink:0; }
    .tk-dir-rows { display:flex;flex-direction:column;gap:7px; }
    .tk-dir-row { display:flex;align-items:center;gap:6px; }
    .tk-dir-cnt { font-size:10px;color:#888;width:20px;text-align:right;flex-shrink:0; }
    .tk-week-bars { display:flex;gap:4px;align-items:flex-end;height:60px;margin-top:8px; }
    .tk-week-col { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%; }
    .tk-week-bar { width:100%;border-radius:3px 3px 0 0;transition:height 0.3s; }
    .tk-week-day { font-size:9px;color:#999; }
    /* Task card */
    .tk-task-card { background:#fff;border:1px solid #EEE;border-radius:10px;padding:16px; }
    .tk-meta-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#F8F8F8;border-radius:8px;padding:10px 12px;margin-bottom:12px; }
    .tk-meta-row { display:flex;align-items:center;gap:8px; }
    .tk-meta-l { font-size:10px;color:#999;width:70px;flex-shrink:0; }
    .tk-desc-block { background:#F8F8F8;border-radius:8px;padding:10px 12px;margin-bottom:12px; }
    .tk-act-btn { font-size:10px;padding:4px 10px;border:1px solid #DDD;border-radius:5px;background:#fff;cursor:pointer;font-family:inherit;color:#555; }
    .tk-comments-block { margin-bottom:12px; }
    .tk-comment { display:flex;gap:8px;margin-bottom:8px;align-items:flex-start; }
    .tk-comment-input { display:flex;gap:6px;margin-top:8px; }
    .tk-comment-input input { flex:1;font-size:11px;padding:6px 10px;border:1px solid #DDD;border-radius:6px;font-family:inherit; }
    .tk-comment-input button { font-size:11px;padding:6px 12px;background:#4A6CF7;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit; }
    .tk-history { border-top:0.5px solid #EEE;padding-top:10px; }
    .tk-hist-row { display:flex;align-items:center;gap:8px;margin-bottom:4px; }
    .tk-hist-dot { width:6px;height:6px;border-radius:50%;background:#DDD;flex-shrink:0; }


    /* ─── MONITORING MOCKUP ─── */
    .mn-stats-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px; }
    .mn-stat { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .mn-stat.highlight { background:#E8EAF6;border-color:#9FA8DA; }
    .mn-stat-val { font-size:24px;font-weight:700;color:#1A237E;line-height:1;margin-bottom:4px; }
    .mn-stat-label { font-size:11px;font-weight:600;color:#333;margin-bottom:2px; }
    .mn-stat-sub { font-size:9px;color:#888; }
    .mn-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
    .mn-col { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .mn-col-title { font-size:11px;font-weight:600;color:#333;margin-bottom:10px; }
    .mn-topic-rows { display:flex;flex-direction:column;gap:6px; }
    .mn-topic-row { display:flex;align-items:center;gap:6px; }
    .mn-topic-name { font-size:10px;color:#555;width:110px;flex-shrink:0; }
    .mn-topic-bar { flex:1;height:5px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-topic-cnt { font-size:10px;color:#888;width:20px;text-align:right; }
    .mn-facts { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px; }
    .mn-fact { background:#F5F7FA;border-radius:6px;padding:8px 10px; }
    .mn-fact-num { font-size:20px;font-weight:700;color:#1A237E;line-height:1;margin-bottom:2px; }
    .mn-fact-text { font-size:9px;color:#666;line-height:1.3; }
    .mn-coverage-bars { display:flex;flex-direction:column;gap:5px; }
    .mn-cov-item { display:flex;align-items:center;gap:6px; }
    .mn-cov-label { font-size:10px;color:#555;width:28px; }
    .mn-cov-bar { flex:1;height:5px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-cov-pct { font-size:10px;color:#3F51B5;font-weight:600;width:28px;text-align:right; }
    .mn-filters { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
    .mn-table { width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #EEE;font-size:11px; }
    .mn-table th { background:#F8F8F8;padding:7px 8px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #EEE; }
    .mn-table td { padding:8px;border-bottom:0.5px solid #F5F5F5;vertical-align:middle; }
    .mn-expert-name { font-weight:600;color:#111;margin-bottom:2px; }
    .mn-expert-org { font-size:9px;color:#999; }
    .mn-badge { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600; }
    .mn-badge.active { background:#E8F5E9;color:#2E7D32; }
    .mn-badge.pause { background:#FFF3E0;color:#E65100; }
    .mn-badge.new { background:#E3F2FD;color:#1565C0; }
    .mn-cov-mini { width:40px;height:6px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-period-tabs { display:flex;gap:6px;margin-bottom:12px; }
    .mn-pt { font-size:11px;padding:5px 14px;border-radius:99px;border:1px solid #C5CAE9;color:#3F51B5;cursor:pointer;background:#fff; }
    .mn-pt.active { background:#1A237E;color:#fff;border-color:#1A237E; }
    .mn-period-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px; }
    .mn-ps-card { background:#fff;border:1px solid #EEE;border-radius:8px;padding:10px; }
    .mn-ps-val { font-size:22px;font-weight:700;color:#1A237E;line-height:1;margin-bottom:3px; }
    .mn-ps-label { font-size:9px;color:#666;margin-bottom:3px; }
    .mn-ps-delta { font-size:9px;font-weight:600; }
    .mn-ps-delta.green { color:#2E7D32; }
    .mn-dyn-chart { display:flex;flex-direction:column;gap:6px; }
    .mn-dyn-row { display:flex;align-items:center;gap:6px; }
    .mn-dyn-year { font-size:10px;color:#555;width:28px; }
    .mn-dyn-bar-wrap { flex:1;height:14px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-dyn-bar { height:100%;border-radius:3px; }
    .mn-dyn-val { font-size:10px;color:#555;width:42px;text-align:right; }
    .mn-types { display:flex;flex-direction:column;gap:8px; }
    .mn-type-row { display:flex;align-items:center;gap:8px; }
    .mn-type-icon { width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }
    .mn-type-name { font-size:11px;font-weight:600;color:#111; }
    .mn-type-sub { font-size:9px;color:#888; }
    .mn-type-val { font-size:14px;font-weight:700;color:#1A237E;margin-left:auto;flex-shrink:0; }


    /* ─── VACCINATION MOCKUP ─── */
    .vc-form { background:#fff;border:1px solid #EEE;border-radius:10px;padding:16px; }
    .vc-section-label { font-size:10px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px; }
    .vc-animal-btns { display:flex;gap:8px;margin-bottom:14px; }
    .vc-animal-btn { font-size:12px;padding:8px 20px;border:1.5px solid #DDD;border-radius:8px;cursor:pointer;color:#555;background:#fff; }
    .vc-animal-btn.active { background:#1B4332;color:#fff;border-color:#1B4332; }
    .vc-fields-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
    .vc-field { }
    .vc-field-label { font-size:10px;color:#999;margin-bottom:4px; }
    .vc-input-mock { font-size:12px;padding:7px 10px;border:1px solid #DDD;border-radius:6px;color:#111;background:#fff; }
    .vc-input-mock.active-field { border-color:#1B4332; }
    .vc-input-mock.computed { background:#F0FFF4;color:#1B5E20;font-weight:500;border-color:#A5D6A7; }
    .vc-age-tabs { display:flex;gap:0;border:1px solid #DDD;border-radius:6px;overflow:hidden;margin-bottom:10px;width:fit-content; }
    .vc-age-tab { font-size:11px;padding:5px 14px;cursor:pointer;color:#777;background:#fff; }
    .vc-age-tab.active { background:#1B4332;color:#fff; }
    .vc-vac-select { margin-bottom:8px; }
    .vc-vac-info { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px; }
    .vc-vi-item { font-size:10px;color:#555;background:#F0FFF4;padding:3px 10px;border-radius:99px;border:0.5px solid #A5D6A7; }
    .vc-submit-btn { width:100%;padding:12px;background:#1B4332;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit; }
    .vc-print-btn { font-size:11px;padding:6px 14px;background:#1B4332;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit; }
    .vc-schedule-sections { display:flex;flex-direction:column;gap:12px; }
    .vc-sched-group { border:1px solid #EEE;border-radius:8px;overflow:hidden;background:#fff; }
    .vc-sched-group-title { font-size:11px;font-weight:700;padding:8px 12px;letter-spacing:0.3px; }
    .vc-table { width:100%;border-collapse:collapse;font-size:11px; }
    .vc-table th { background:#FAFAFA;padding:6px 8px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:0.5px solid #EEE; }
    .vc-table td { padding:7px 8px;border-bottom:0.5px solid #F5F5F5;vertical-align:middle; }
    .vc-date { font-weight:500;color:#333;white-space:nowrap; }
    .vc-date.done { color:#888;text-decoration:line-through; }
    .vc-date.today { color:#E65100;font-weight:700; }
    .vc-s { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap; }
    .vc-s.done { background:#E8F5E9;color:#2E7D32; }
    .vc-s.pending { background:#F5F5F5;color:#757575; }
    .vc-s.today { background:#FFF3E0;color:#E65100; }
    .vc-s.future { background:#E3F2FD;color:#1565C0; }


    /* ─── PROCESS MGMT MOCKUP ─── */
    .pr-macros { display:flex;flex-direction:column;gap:10px; }
    .pr-macro { border:1px solid #E0E0E0;border-radius:8px;overflow:hidden;background:#fff; }
    .pr-macro-header { padding:10px 14px;display:flex;justify-content:space-between;align-items:center; }
    .pr-macro-title { font-size:13px;font-weight:700;color:#111; }
    .pr-macro-meta { display:flex;gap:8px;align-items:center; }
    .pr-badge { font-size:10px;padding:2px 10px;border-radius:99px;font-weight:600; }
    .pr-badge.blue { background:#E3F2FD;color:#1565C0; }
    .pr-badge.green { background:#E8F5E9;color:#2E7D32; }
    .pr-badge.orange { background:#FFF3E0;color:#E65100; }
    .pr-badge-cnt { font-size:10px;color:#888; }
    .pr-processes { padding:4px 0; }
    .pr-process { display:flex;align-items:center;gap:10px;padding:7px 14px;border-top:0.5px solid #F5F5F5; }
    .pr-proc-num { font-size:10px;color:#999;width:24px;flex-shrink:0;font-family:monospace; }
    .pr-proc-name { font-size:12px;color:#333;flex:1; }
    .pr-proc-owner { font-size:10px;color:#888;width:100px;flex-shrink:0; }
    .pr-proc-status { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap; }
    .pr-proc-status.ok { background:#E8F5E9;color:#2E7D32; }
    .pr-proc-status.warn { background:#FFF3E0;color:#E65100; }
    .pr-proc-status.none { background:#F5F5F5;color:#999; }
    /* SOP */
    .sop-doc { background:#fff;border:1px solid #EEE;border-radius:10px;padding:16px; }
    .sop-meta-row { display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#F8F8F8;border-radius:8px;padding:12px;margin-bottom:14px; }
    .sop-meta-item { display:flex;flex-direction:column;gap:3px; }
    .sop-ml { font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px; }
    .sop-mv { font-size:11px;color:#111;font-weight:500;line-height:1.4; }
    .sop-steps-title { font-size:11px;font-weight:700;color:#333;margin-bottom:8px; }
    .sop-steps { display:flex;flex-direction:column;gap:8px;margin-bottom:14px; }
    .sop-step { display:flex;gap:10px;align-items:flex-start; }
    .sop-step-num { width:22px;height:22px;border-radius:50%;background:#263238;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px; }
    .sop-step-name { font-size:12px;font-weight:600;color:#111;margin-bottom:3px; }
    .sop-step-note { font-size:10px;color:#888;line-height:1.4; }
    .sop-checklist-title { font-size:11px;font-weight:700;color:#333;margin-bottom:8px; }
    .sop-checks { display:flex;flex-direction:column;gap:6px; }
    .sop-check { display:flex;align-items:center;gap:8px; }
    .sop-chk-box { width:16px;height:16px;border-radius:3px;border:1.5px solid #DDD;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff; }
    .sop-chk-box.done { background:#2E7D32;border-color:#2E7D32; }
    .sop-check span { font-size:11px;color:#444; }
    .sop-check.done span { text-decoration:line-through;color:#999; }
    /* Analytics */
    .pr-analytics-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px; }
    .pr-as-card { background:#fff;border:1px solid #EEE;border-radius:8px;padding:10px 12px; }
    .pr-as-card.green { background:#F1F8E9; }
    .pr-as-card.orange { background:#FFF8F0; }
    .pr-as-val { font-size:24px;font-weight:700;color:#111;line-height:1;margin-bottom:3px; }
    .pr-as-label { font-size:10px;font-weight:600;color:#444;margin-bottom:2px; }
    .pr-as-sub { font-size:9px;color:#888; }
    .pr-an-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
    .pr-an-col { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .pr-an-title { font-size:11px;font-weight:600;color:#333;margin-bottom:10px; }
    .pr-coverage { display:flex;flex-direction:column;gap:7px; }
    .pr-cov-row { display:flex;align-items:center;gap:6px; }
    .pr-cov-name { font-size:10px;color:#555;width:100px;flex-shrink:0; }
    .pr-cov-bar { flex:1;height:6px;background:#F0F0F0;border-radius:3px;overflow:hidden; }
    .pr-cov-pct { font-size:10px;font-weight:600;color:#333;width:28px;text-align:right; }
    .pr-status-list { display:flex;flex-direction:column;gap:8px; }
    .pr-sl-row { display:flex;align-items:center;gap:6px; }
    .pr-sl-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
    .pr-sl-name { font-size:10px;color:#555;width:110px;flex-shrink:0; }
    .pr-sl-bar { flex:1;height:8px;background:#F0F0F0;border-radius:3px;overflow:hidden;position:relative; }
    .pr-sl-cnt { font-size:10px;font-weight:600;color:#333;width:16px;text-align:right; }
    .pr-month-bars { display:flex;gap:6px;align-items:flex-end;height:56px;margin-top:8px; }
    .pr-mb-col { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%; }
    .pr-mb-bar { width:100%;border-radius:3px 3px 0 0; }
    .pr-mb-label { font-size:9px;color:#999; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 720px) {
      .container { padding: 0 20px; }
      .hero h1 { font-size: 40px; letter-spacing: -1.5px; }
      .pain-grid, .cases-grid, .how-grid { grid-template-columns: 1fr; }
      .case-card.wide { grid-column: span 1; }
      .why-not { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
      .about-block { grid-template-columns: 1fr; }
      .form-block { padding: 36px 24px; }
      .form-row { grid-template-columns: 1fr; }
      .form-group.full { grid-column: span 1; }
      .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
      .nav-links { display: none; }
    }
  



    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    a, a:link, a:visited, a:hover, a:active { text-decoration: none; }

    :root {
      --coral:        #FF3D6B;
      --coral-light:  rgba(255,61,107,0.08);
      --coral-border: rgba(240,58,23,0.25);
      --coral-dark:   #CC1A44;
      --black:        #111111;
      --white:        #FAFAF8;
      --gray:         #666666;
      --border:       #E8E0E0;
      --card-bg:      #F4F0F0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--white);
      color: var(--black);
      font-size: 16px;
      line-height: 1.6;
    }

    /* ─── GLOBAL RESETS ─── */
    a { text-decoration: none; }
    button { font-family: inherit; cursor: pointer; }
    img { display: block; max-width: 100%; }

    /* ─── LAYOUT ─── */
    .container { max-width: 960px; margin: 0 auto; padding: 0 32px; }
    .divider { border: none; border-top: 0.5px solid var(--border); margin: 56px 0; }
    .section-label {
      font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 1.2px;
      color: var(--coral); margin-bottom: 20px;
    }

    /* ─── NAV ─── */
    nav {
      border-bottom: 0.5px solid var(--border);
      padding: 20px 0;
      position: sticky; top: 0;
      background: var(--white);
      z-index: 100;
    }
    .nav-inner { display: flex; justify-content: space-between; align-items: center; }
    .logo {
      font-size: 16px; font-weight: 500;
      letter-spacing: -0.3px; color: var(--black);
    }
    .logo em { font-style: normal; color: var(--coral); }
    .nav-links { display: flex; gap: 28px; align-items: center; }
    .nav-links a, .nav-links a:link, .nav-links a:visited { font-size: 14px; color: #666666 !important; transition: color 0.15s; text-decoration: none !important; }
    .nav-links a:hover { color: #111111 !important; }
    .btn-nav, .btn-nav:link, .btn-nav:visited {
      font-size: 13px; font-weight: 500;
      padding: 9px 20px; border-radius: 6px;
      border: none; background: var(--coral);
      color: #ffffff !important; display: inline-block;
      transition: opacity 0.15s; text-decoration: none !important;
    }
    .btn-nav:hover { opacity: 0.85; color: #ffffff !important; }

    /* ─── HERO ─── */
    .hero { padding: 0; border-bottom: 0.5px solid var(--border); }
    .hero-inner {
      display: grid;
      grid-template-columns: 1fr 320px;
      align-items: end;
      max-width: 960px; margin: 0 auto; padding: 0 32px;
      min-height: 420px;
    }
    .hero-left { padding: 64px 0 48px; }
    .hero-tag {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 11px; font-weight: 500;
      color: #999; letter-spacing: 0.8px;
      text-transform: uppercase; margin-bottom: 28px;
    }
    .hero-tag::before {
      content: ''; display: inline-block;
      width: 20px; height: 2px; background: var(--coral);
    }
    .hero h1 {
      font-size: 88px; font-weight: 700;
      line-height: 0.92; letter-spacing: -4px;
      color: var(--black); margin-bottom: 0;
    }
    .hero h1 span { display: block; }
    .h1-accent { color: var(--coral) !important; }
    .h1-stroke {
      -webkit-text-stroke: 2.5px var(--black);
      color: transparent !important;
    }
    .hero-right {
      border-left: 0.5px solid var(--border);
      padding: 0 0 48px 40px;
      display: flex; flex-direction: column;
      justify-content: flex-end; gap: 28px;
      align-self: stretch; padding-top: 64px;
    }
    .hero-sub {
      font-size: 15px; color: var(--gray); line-height: 1.65;
    }
    .hero-btns { display: flex; flex-direction: column; gap: 10px; }
    .hero-ticker {
      border-top: 0.5px solid var(--border);
      padding: 16px 32px;
      max-width: 960px; margin: 0 auto;
      display: flex; gap: 36px; flex-wrap: wrap;
    }
    .ticker-item {
      display: flex; align-items: center; gap: 8px;
      white-space: nowrap;
    }
    .ticker-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--coral); flex-shrink: 0;
    }
    .ticker-item span { font-size: 12px; color: #999; }

    /* ─── BUTTONS ─── */
    .btn-primary, .btn-primary:link, .btn-primary:visited {
      font-size: 15px; font-weight: 500;
      padding: 13px 28px; border-radius: 6px;
      border: none; background: var(--coral);
      color: #ffffff !important; display: inline-block;
      transition: opacity 0.15s; text-decoration: none !important;
    }
    .btn-primary:hover { opacity: 0.85; color: #ffffff !important; }
    .btn-outline, .btn-outline:link, .btn-outline:visited {
      font-size: 15px; font-weight: 500;
      padding: 13px 28px; border-radius: 6px;
      border: 1.5px solid var(--border);
      background: transparent; color: #111111 !important;
      display: inline-block; transition: border-color 0.15s;
      text-decoration: none !important;
    }
    .btn-outline:hover { border-color: #bbb; color: #111111 !important; }

    /* ─── PAIN ─── */
    .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .pain-card {
      background: var(--card-bg); border-radius: 14px;
      padding: 24px; border-left: 3px solid var(--coral);
    }
    .pain-card-label {
      font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 0.6px;
      color: var(--coral); margin-bottom: 10px;
    }
    .pain-card p { font-size: 14px; color: var(--gray); line-height: 1.6; }
    .pain-card p b { color: var(--black); font-weight: 500; }

    /* ─── WHY NOT ─── */
    .why-not {
      background: var(--black); border-radius: 16px;
      padding: 40px 48px;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 40px; align-items: center;
    }
    .why-not-title {
      font-size: 32px; font-weight: 500;
      letter-spacing: -1px; color: #ffffff; line-height: 1.15;
    }
    .why-not-title em { font-style: normal; color: var(--coral); }
    .why-not-list { list-style: none; }
    .why-not-list li {
      font-size: 14px; color: rgba(255,255,255,0.55);
      padding: 10px 0; border-bottom: 0.5px solid rgba(255,255,255,0.08);
      display: flex; gap: 12px; align-items: flex-start; line-height: 1.5;
    }
    .why-not-list li:last-child { border-bottom: none; }
    .why-not-list li .arr { color: var(--coral); flex-shrink: 0; }

    /* ─── CASES ─── */
    .cases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .case-card {
      border: 0.5px solid var(--border); border-radius: 14px;
      padding: 24px; background: var(--white);
      border-top: 3px solid var(--coral);
    }
    .case-card.wide { grid-column: span 2; }
    .case-top {
      display: flex; justify-content: space-between;
      align-items: flex-start; margin-bottom: 14px;
    }
    .case-num { font-size: 11px; color: #bbb; }
    .case-badge {
      font-size: 11px; color: var(--gray);
      background: var(--card-bg); padding: 3px 10px; border-radius: 99px;
    }
    .case-card h3 {
      font-size: 16px; font-weight: 500;
      color: var(--black); margin-bottom: 8px; line-height: 1.3;
    }
    .case-card p {
      font-size: 13px; color: var(--gray);
      line-height: 1.55; margin-bottom: 16px;
    }
    .case-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
    .feature {
      font-size: 11px; color: var(--gray);
      background: var(--card-bg); padding: 3px 10px; border-radius: 99px;
    }
    .case-result {
      font-size: 12px; color: var(--gray);
      padding-top: 14px; border-top: 0.5px solid var(--border);
    }
    .case-result b { color: #2D8A4E; font-weight: 500; }

    /* ─── HOW ─── */
    .how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
    .how-card {
      padding: 28px 24px;
      border: 0.5px solid var(--border); border-radius: 14px;
    }
    .how-num {
      font-size: 40px; font-weight: 500;
      color: var(--coral); letter-spacing: -2px;
      line-height: 1; margin-bottom: 16px;
    }
    .how-card h3 { font-size: 16px; font-weight: 500; color: var(--black); margin-bottom: 8px; }
    .how-card p { font-size: 13px; color: var(--gray); line-height: 1.55; }

    /* ─── ABOUT ─── */
    .about-block { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: start; }
    .about-avatar { width: 100%; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: var(--card-bg); }
    .about-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .about-role {
      font-size: 11px; font-weight: 500;
      text-transform: uppercase; letter-spacing: 1px;
      color: var(--coral); margin-bottom: 8px;
    }
    .about-content h2 {
      font-size: 28px; font-weight: 500;
      letter-spacing: -0.8px; color: var(--black); margin-bottom: 16px;
    }
    .about-content p {
      font-size: 15px; color: var(--gray);
      line-height: 1.7; margin-bottom: 14px;
    }
    .about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
    .about-tag {
      font-size: 12px; color: var(--coral-dark);
      background: var(--coral-light);
      border: 0.5px solid var(--coral-border);
      padding: 4px 14px; border-radius: 99px;
    }

    /* ─── FORM ─── */
    .form-block {
      background: var(--black); border-radius: 20px; padding: 56px 64px;
    }
    .form-block h2 {
      font-size: 36px; font-weight: 500;
      letter-spacing: -1px; color: #ffffff; margin-bottom: 8px;
    }
    .form-sub { font-size: 15px; color: rgba(255,255,255,0.45); margin-bottom: 36px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group.full { grid-column: span 2; }
    .form-group label {
      font-size: 11px; color: rgba(255,255,255,0.4);
      text-transform: uppercase; letter-spacing: 0.6px;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
      background: rgba(255,255,255,0.06);
      border: 0.5px solid rgba(255,255,255,0.12);
      border-radius: 8px; padding: 13px 16px;
      font-size: 14px; color: #ffffff;
      font-family: inherit; outline: none;
      transition: border-color 0.15s; width: 100%;
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: rgba(255,255,255,0.25); }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus { border-color: var(--coral); }
    .form-group select option { background: #222; color: #fff; }
    .form-group textarea { resize: vertical; min-height: 100px; }
    .btn-submit {
      width: 100%; margin-top: 8px;
      font-size: 15px; font-weight: 500;
      padding: 15px 28px; border-radius: 8px;
      border: none; background: var(--coral);
      color: #ffffff; transition: opacity 0.15s;
    }
    .btn-submit:hover { opacity: 0.85; }
    .btn-submit:disabled { opacity: 0.45; cursor: not-allowed; }
    .form-success { display: none; text-align: center; padding: 32px; }
    .form-success h3 { font-size: 24px; font-weight: 500; color: #fff; margin-bottom: 8px; }
    .form-success p { color: rgba(255,255,255,0.45); }

    /* ─── FOOTER ─── */
    footer { padding: 40px 0; border-top: 0.5px solid var(--border); margin-top: 80px; }
    .footer-inner { display: flex; justify-content: space-between; align-items: center; }
    .footer-links { display: flex; gap: 24px; }
    .footer-links a, .footer-links a:link, .footer-links a:visited { font-size: 13px; color: #666666 !important; transition: color 0.15s; text-decoration: none !important; }
    .footer-links a:hover { color: #111111 !important; }
    .footer-copy { font-size: 12px; color: #bbb; }


    .case-screens { margin-top: 20px; border-top: 0.5px solid var(--border); padding-top: 16px; }
    .stabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .stab {
      font-size: 11px; padding: 5px 12px; border-radius: 99px;
      border: 0.5px solid var(--border); cursor: pointer;
      background: transparent; color: var(--gray);
      font-family: inherit; transition: all 0.15s;
    }
    .stab.on { background: var(--coral); color: #fff; border-color: var(--coral); }
    .sscreen { display: none; }
    .sscreen.on { display: block; }
    .sframe { border: 0.5px solid var(--border); border-radius: 10px; overflow: hidden; }
    .sbar {
      background: #F5F1F1; padding: 8px 14px;
      display: flex; align-items: center; gap: 5px;
      border-bottom: 0.5px solid var(--border);
    }
    .sdot { width: 9px; height: 9px; border-radius: 50%; }
    .surl { font-size: 10px; color: #bbb; margin-left: 8px; font-family: monospace; }
    .swin {
      height: 420px; overflow-y: auto; overflow-x: auto;
      background: #fff;
    }
    .simg { display: block; max-width: none; width: auto; height: auto; }
    .scap { font-size: 12px; color: var(--gray); margin-top: 10px; line-height: 1.5; }


    /* ─── INLINE MOCKUPS ─── */
    .mock-app { display: flex; min-width: 960px; min-height: 560px; font-size: 12px; background: #fff; }
    .mock-sb { width: 200px; background: #4A235A; padding: 0; flex-shrink: 0; overflow: hidden; }
    .msb-logo { display: flex; align-items: center; gap: 8px; padding: 16px 14px; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 1px; border-bottom: 0.5px solid rgba(255,255,255,0.1); }
    .msb-icon { font-size: 18px; }
    .msb-section { padding: 12px 14px 4px; font-size: 9px; color: rgba(255,255,255,0.4); letter-spacing: 1px; text-transform: uppercase; }
    .msb-item { padding: 7px 14px; font-size: 11px; color: rgba(255,255,255,0.55); cursor: pointer; border-radius: 0; }
    .msb-item.active { background: rgba(255,255,255,0.12); color: #fff; }
    .mock-main { flex: 1; padding: 20px 24px; overflow: hidden; background: #FAFAFA; }
    .mock-topbar { margin-bottom: 16px; }
    .mock-title { font-size: 18px; font-weight: 600; color: #111; margin-bottom: 12px; }
    .mock-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
    .mock-action { font-size: 11px; padding: 5px 10px; border: 1px solid #E0E0E0; border-radius: 5px; color: #555; background: #fff; cursor: pointer; white-space: nowrap; }
    .mock-action.danger { color: #E53935; border-color: #FFCDD2; }
    .mock-action.export { color: #7B5EA7; }
    .mock-section-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: #999; margin: 12px 0 10px; text-transform: uppercase; }
    .mock-cards-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
    .mock-card { background: #fff; border: 1px solid #EEE; border-top: 3px solid #ccc; border-radius: 8px; padding: 12px; }
    .mc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
    .mc-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
    .mc-stat { font-size: 10px; font-weight: 600; }
    .mc-title { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 4px; }
    .mc-desc { font-size: 10px; color: #888; line-height: 1.4; margin-bottom: 8px; }
    .mc-dots { font-size: 10px; color: #888; display: flex; flex-wrap: wrap; gap: 6px; }
    .mcd { white-space: nowrap; }

    /* Animal card */
    .animal-card-header { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; background: #fff; border: 1px solid #EEE; border-radius: 10px; padding: 14px; }
    .animal-avatar { width: 64px; height: 64px; background: #F3E5F5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; }
    .animal-name { font-size: 16px; font-weight: 600; color: #111; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .animal-id { font-size: 11px; color: #888; font-weight: 400; }
    .animal-sex { color: #E91E63; }
    .animal-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
    .tag { font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 500; }
    .tag-purple { background: #EDE7F6; color: #6A1B9A; }
    .tag-red { background: #FFEBEE; color: #C62828; }
    .tag-yellow { background: #FFF9C4; color: #F57F17; }
    .tag-green { background: #E8F5E9; color: #2E7D32; }
    .animal-meta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 16px; }
    .ameta-l { font-size: 10px; color: #999; }
    .ameta-v { font-size: 11px; color: #111; font-weight: 500; }
    .animal-location { font-size: 11px; background: #F3E5F5; color: #6A1B9A; padding: 6px 12px; border-radius: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; }
    .link-blue { color: #1565C0; cursor: pointer; }
    .animal-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .abtn { font-size: 11px; padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; font-family: inherit; }
    .abtn.purple { background: #7B5EA7; color: #fff; }
    .abtn.outline-purple { background: #fff; color: #7B5EA7; border: 1px solid #7B5EA7; }
    .abtn.outline { background: #fff; color: #555; border: 1px solid #CCC; }
    .abtn.outline-red { background: #fff; color: #E53935; border: 1px solid #FFCDD2; }
    .status-label { font-size: 10px; font-weight: 600; color: #999; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
    .status-track { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
    .strack-item { font-size: 10px; padding: 4px 10px; border: 1px solid #DDD; border-radius: 99px; color: #888; background: #fff; white-space: nowrap; }
    .strack-item.done { background: #E8F5E9; color: #2E7D32; border-color: #A5D6A7; }
    .strack-item.current { background: #7B5EA7; color: #fff; border-color: #7B5EA7; }
    .strack-arrow { color: #CCC; font-size: 14px; }
    .status-info { font-size: 11px; background: #F3E5F5; color: #6A1B9A; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }
    .animal-tabs { display: flex; gap: 0; border-bottom: 1px solid #EEE; margin-bottom: 12px; flex-wrap: wrap; }
    .atab { font-size: 11px; padding: 7px 12px; color: #888; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
    .atab.active { color: #7B5EA7; border-bottom-color: #7B5EA7; }
    .info-table { background: #fff; border: 1px solid #EEE; border-radius: 8px; overflow: hidden; }
    .info-row { display: flex; padding: 8px 14px; border-bottom: 0.5px solid #F5F5F5; }
    .info-row:last-child { border: none; }
    .info-l { width: 140px; font-size: 11px; color: #999; flex-shrink: 0; }
    .info-v { font-size: 11px; color: #111; font-weight: 500; }

    /* Vet dashboard */
    .vet-route-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
    .vrt { font-size: 11px; padding: 5px 14px; border-radius: 99px; border: 1px solid #DDD; color: #888; cursor: pointer; }
    .vrt.active { background: #7B5EA7; color: #fff; border-color: #7B5EA7; }
    .vet-route-header { background: #fff; border: 1px solid #EEE; border-radius: 10px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .vrh-badge { font-size: 10px; background: #7B5EA7; color: #fff; padding: 3px 10px; border-radius: 99px; margin-bottom: 6px; display: inline-block; }
    .vrh-name { font-size: 13px; font-weight: 600; color: #111; }
    .vrh-sub { font-size: 11px; color: #888; }
    .vrh-progress { text-align: right; }
    .vrh-num { font-size: 28px; font-weight: 700; color: #7B5EA7; line-height: 1; }
    .vrh-total { font-size: 10px; color: #888; }
    .vet-progress-bar { background: #EDE7F6; height: 4px; border-radius: 2px; margin-bottom: 12px; overflow: hidden; }
    .vet-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
    .vs-item { background: #fff; border: 1px solid #EEE; border-radius: 8px; padding: 10px 12px; }
    .vs-label { font-size: 10px; color: #999; margin-bottom: 4px; }
    .vs-val { font-size: 20px; font-weight: 700; color: #111; }
    .vet-alert-label { font-size: 10px; font-weight: 700; color: #E53935; letter-spacing: 0.5px; margin-bottom: 8px; }
    .vet-alerts { background: #fff; border: 1px solid #FFCDD2; border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
    .va-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 0.5px solid #FFF; }
    .va-item:last-child { border: none; }
    .va-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
    .va-dot.red { background: #E53935; }
    .va-dot.orange { background: #FB8C00; }
    .va-title { font-size: 11px; font-weight: 600; color: #111; }
    .va-sub { font-size: 10px; color: #888; }
    .va-time { font-size: 10px; font-weight: 600; margin-left: auto; flex-shrink: 0; }
    .va-time.red { color: #E53935; }
    .va-time.orange { color: #FB8C00; }
    .vet-animal { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #EEE; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; }
    .vaa-avatar { font-size: 24px; }
    .vaa-name { font-size: 12px; font-weight: 600; color: #7B5EA7; }
    .vaa-sub { font-size: 10px; color: #888; }
    .vaa-prog { display: flex; align-items: center; margin-left: auto; }
    .vet-task { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; background: #fff; border: 1px solid #EEE; border-radius: 8px; margin-bottom: 6px; }
    .vet-task.done { background: #F9F9F9; }
    .vtask-check { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid #DDD; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
    .vtask-check.done { background: #7B5EA7; border-color: #7B5EA7; }
    .vtask-title { font-size: 11px; font-weight: 600; color: #111; }
    .vtask-title.done { text-decoration: line-through; color: #999; }
    .vtask-sub { font-size: 10px; color: #888; margin: 2px 0; }
    .vtask-done { font-size: 10px; color: #43A047; }
    .vtask-time { font-size: 10px; color: #888; margin-left: auto; flex-shrink: 0; white-space: nowrap; }
    .tag-small { font-size: 9px; padding: 1px 6px; border-radius: 99px; }
    .tag-small.purple { background: #EDE7F6; color: #6A1B9A; }
    .tag-small.blue { background: #E3F2FD; color: #1565C0; }


    /* ─── FUNDRAISING MOCKUP ─── */
    .fd-group-label { font-size:10px;font-weight:700;color:#555;letter-spacing:0.8px;text-transform:uppercase;margin:14px 0 8px;display:flex;align-items:center;gap:6px; }
    .fd-metrics-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px; }
    .fd-metric { background:#fff;border:1px solid #E8E0E0;border-radius:8px;padding:10px 12px; }
    .fd-metric.highlight { background:#FFF8E1;border-color:#FFE082; }
    .fd-metric-label { font-size:9px;color:#999;margin-bottom:4px;line-height:1.3; }
    .fd-metric-val { font-size:18px;font-weight:700;color:#111;line-height:1.1;margin-bottom:3px; }
    .fd-metric-sub { font-size:9px;color:#888; }
    .fd-bar { height:3px;background:#F0F0F0;border-radius:2px;margin-top:6px;overflow:hidden; }
    .fd-bar-fill { height:100%;border-radius:2px; }
    /* Grant calendar */
    .gc-toolbar { display:flex;align-items:center;gap:8px;margin-bottom:12px; }
    .gc-tab { font-size:11px;padding:5px 14px;border-radius:99px;border:1px solid #DDD;color:#888;cursor:pointer; }
    .gc-tab.active { background:#1A2332;color:#fff;border-color:#1A2332; }
    .gc-btn { font-size:11px;padding:5px 14px;background:#FF3D6B;color:#fff;border-radius:6px;margin-left:auto;cursor:pointer; }
    .gc-table { width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #EEE;font-size:11px;margin-bottom:12px; }
    .gc-table th { background:#F8F8F8;padding:8px 10px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #EEE; }
    .gc-table td { padding:8px 10px;border-bottom:0.5px solid #F5F5F5;vertical-align:top; }
    .gc-name { font-weight:600;color:#111;margin-bottom:2px; }
    .gc-sub { font-size:9px;color:#999; }
    .gc-date { font-weight:500;color:#333; }
    .gc-date.red { color:#E53935; }
    .gc-status { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap; }
    .gc-status.yellow { background:#FFF9C4;color:#F57F17; }
    .gc-status.green { background:#E8F5E9;color:#2E7D32; }
    .gc-status.red { background:#FFEBEE;color:#C62828; }
    .gc-status.blue { background:#E3F2FD;color:#1565C0; }
    .gc-status.gray { background:#F5F5F5;color:#757575; }
    .gc-summary { display:flex;gap:16px;background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px 16px; }
    .gc-sum-item { flex:1; }
    .gc-sum-l { font-size:9px;color:#999;margin-bottom:3px;text-transform:uppercase; }
    .gc-sum-v { font-size:11px;font-weight:600; }
    /* Strategy */
    .strat-tabs { display:flex;gap:0;border-bottom:1px solid #DDD;margin-bottom:14px; }
    .strat-tab { font-size:11px;padding:7px 14px;color:#888;cursor:pointer;border-bottom:2px solid transparent; }
    .strat-tab.active { color:#1A2332;border-bottom-color:#1A2332;font-weight:600; }
    .dj-flow { display:flex;align-items:flex-start;gap:4px;margin-bottom:16px; }
    .dj-stage { flex:1;background:#fff;border:1px solid #EEE;border-top:3px solid #ccc;border-radius:8px;padding:10px; }
    .dj-num { width:20px;height:20px;border-radius:50%;background:#F5F5F5;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#555;margin-bottom:6px; }
    .dj-title { font-size:11px;font-weight:700;color:#111;margin-bottom:4px; }
    .dj-desc { font-size:9px;color:#666;margin-bottom:4px;line-height:1.4; }
    .dj-channels { font-size:9px;color:#999;font-style:italic; }
    .dj-arrow { color:#CCC;font-size:16px;margin-top:30px;flex-shrink:0; }
    .dp-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px; }
    .dp-card { background:#fff;border:1px solid #EEE;border-top:3px solid #ccc;border-radius:8px;padding:10px; }
    .dp-name { font-size:11px;font-weight:700;color:#111;margin-bottom:4px; }
    .dp-desc { font-size:9px;color:#666;line-height:1.4;margin-bottom:6px; }
    .dp-metric { font-size:10px;font-weight:600;color:#555; }


    /* ─── TASK TRACKER MOCKUP ─── */
    .tk-new-btn { font-size:11px;padding:6px 14px;background:#4A6CF7;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit; }
    .tk-filters { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
    .tk-search { font-size:11px;padding:5px 10px;border:1px solid #DDD;border-radius:6px;flex:1;min-width:140px;background:#fff;font-family:inherit; }
    .tk-select { font-size:11px;padding:5px 8px;border:1px solid #DDD;border-radius:6px;background:#fff;font-family:inherit;color:#555;cursor:pointer; }
    .tk-stats-row { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
    .tk-stat-pill { font-size:10px;padding:4px 10px;border-radius:99px;background:#fff;border:1px solid #E0E0E0;color:#555; }
    .tk-stat-pill.red { background:#FFEBEE;border-color:#FFCDD2;color:#C62828; }
    .tk-stat-pill.orange { background:#FFF3E0;border-color:#FFE0B2;color:#E65100; }
    .tk-stat-pill.green { background:#E8F5E9;border-color:#C8E6C9;color:#2E7D32; }
    .tk-table { width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #EEE;font-size:11px; }
    .tk-table th { background:#F8F8F8;padding:7px 8px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #EEE; }
    .tk-table td { padding:8px;border-bottom:0.5px solid #F5F5F5;vertical-align:middle; }
    .tk-row.overdue td { background:#FFF8F8; }
    .tk-row.done td { background:#FAFAFA; }
    .tk-check { width:14px;height:14px;border:1.5px solid #DDD;border-radius:3px; }
    .tk-check.checked { background:#4A6CF7;border-color:#4A6CF7;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center; }
    .tk-name { font-weight:600;color:#111;margin-bottom:2px; }
    .tk-name.done-text { text-decoration:line-through;color:#999;font-weight:400; }
    .tk-sub { font-size:9px;color:#999; }
    .tk-dir { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:500;white-space:nowrap; }
    .tk-dir.attract { background:#E3F2FD;color:#1565C0; }
    .tk-dir.grant { background:#F3E5F5;color:#6A1B9A; }
    .tk-dir.manage { background:#FFF3E0;color:#E65100; }
    .tk-dir.recur { background:#E8F5E9;color:#2E7D32; }
    .tk-dir.platform { background:#ECEFF1;color:#37474F; }
    .tk-user { width:26px;height:26px;border-radius:50%;background:#4A6CF7;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
    .tk-date { font-size:10px;font-weight:500;color:#333; }
    .tk-date.red { color:#E53935; }
    .tk-date.orange { color:#FB8C00; }
    .tk-prio { font-size:9px;padding:2px 7px;border-radius:99px;font-weight:600; }
    .tk-prio.high { background:#FFEBEE;color:#C62828; }
    .tk-prio.mid { background:#FFF3E0;color:#E65100; }
    .tk-prio.low { background:#F5F5F5;color:#757575; }
    .tk-status { font-size:9px;padding:2px 7px;border-radius:99px;font-weight:600; }
    .tk-status.inprogress { background:#E3F2FD;color:#1565C0; }
    .tk-status.done { background:#E8F5E9;color:#2E7D32; }
    .tk-status.new { background:#F5F5F5;color:#757575; }
    /* Dashboard */
    .tk-dash-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px; }
    .tk-ds-card { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px;text-align:center; }
    .tk-ds-val { font-size:28px;font-weight:700;color:#111;line-height:1; }
    .tk-ds-label { font-size:10px;color:#999;margin-top:4px; }
    .tk-dash-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
    .tk-dash-col { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .tk-dash-title { font-size:11px;font-weight:600;color:#333;margin-bottom:10px; }
    .tk-person-rows { display:flex;flex-direction:column;gap:8px; }
    .tk-person-row { display:flex;align-items:center;gap:6px; }
    .tk-person-name { font-size:10px;color:#555;width:72px;flex-shrink:0; }
    .tk-person-bar { flex:1;height:5px;background:#F0F0F0;border-radius:3px;overflow:hidden; }
    .tk-pb-fill { height:100%;border-radius:3px; }
    .tk-person-cnt { font-size:10px;color:#888;width:40px;text-align:right;flex-shrink:0; }
    .tk-dir-rows { display:flex;flex-direction:column;gap:7px; }
    .tk-dir-row { display:flex;align-items:center;gap:6px; }
    .tk-dir-cnt { font-size:10px;color:#888;width:20px;text-align:right;flex-shrink:0; }
    .tk-week-bars { display:flex;gap:4px;align-items:flex-end;height:60px;margin-top:8px; }
    .tk-week-col { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%; }
    .tk-week-bar { width:100%;border-radius:3px 3px 0 0;transition:height 0.3s; }
    .tk-week-day { font-size:9px;color:#999; }
    /* Task card */
    .tk-task-card { background:#fff;border:1px solid #EEE;border-radius:10px;padding:16px; }
    .tk-meta-grid { display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#F8F8F8;border-radius:8px;padding:10px 12px;margin-bottom:12px; }
    .tk-meta-row { display:flex;align-items:center;gap:8px; }
    .tk-meta-l { font-size:10px;color:#999;width:70px;flex-shrink:0; }
    .tk-desc-block { background:#F8F8F8;border-radius:8px;padding:10px 12px;margin-bottom:12px; }
    .tk-act-btn { font-size:10px;padding:4px 10px;border:1px solid #DDD;border-radius:5px;background:#fff;cursor:pointer;font-family:inherit;color:#555; }
    .tk-comments-block { margin-bottom:12px; }
    .tk-comment { display:flex;gap:8px;margin-bottom:8px;align-items:flex-start; }
    .tk-comment-input { display:flex;gap:6px;margin-top:8px; }
    .tk-comment-input input { flex:1;font-size:11px;padding:6px 10px;border:1px solid #DDD;border-radius:6px;font-family:inherit; }
    .tk-comment-input button { font-size:11px;padding:6px 12px;background:#4A6CF7;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit; }
    .tk-history { border-top:0.5px solid #EEE;padding-top:10px; }
    .tk-hist-row { display:flex;align-items:center;gap:8px;margin-bottom:4px; }
    .tk-hist-dot { width:6px;height:6px;border-radius:50%;background:#DDD;flex-shrink:0; }


    /* ─── MONITORING MOCKUP ─── */
    .mn-stats-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px; }
    .mn-stat { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .mn-stat.highlight { background:#E8EAF6;border-color:#9FA8DA; }
    .mn-stat-val { font-size:24px;font-weight:700;color:#1A237E;line-height:1;margin-bottom:4px; }
    .mn-stat-label { font-size:11px;font-weight:600;color:#333;margin-bottom:2px; }
    .mn-stat-sub { font-size:9px;color:#888; }
    .mn-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
    .mn-col { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .mn-col-title { font-size:11px;font-weight:600;color:#333;margin-bottom:10px; }
    .mn-topic-rows { display:flex;flex-direction:column;gap:6px; }
    .mn-topic-row { display:flex;align-items:center;gap:6px; }
    .mn-topic-name { font-size:10px;color:#555;width:110px;flex-shrink:0; }
    .mn-topic-bar { flex:1;height:5px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-topic-cnt { font-size:10px;color:#888;width:20px;text-align:right; }
    .mn-facts { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px; }
    .mn-fact { background:#F5F7FA;border-radius:6px;padding:8px 10px; }
    .mn-fact-num { font-size:20px;font-weight:700;color:#1A237E;line-height:1;margin-bottom:2px; }
    .mn-fact-text { font-size:9px;color:#666;line-height:1.3; }
    .mn-coverage-bars { display:flex;flex-direction:column;gap:5px; }
    .mn-cov-item { display:flex;align-items:center;gap:6px; }
    .mn-cov-label { font-size:10px;color:#555;width:28px; }
    .mn-cov-bar { flex:1;height:5px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-cov-pct { font-size:10px;color:#3F51B5;font-weight:600;width:28px;text-align:right; }
    .mn-filters { display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
    .mn-table { width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden;border:1px solid #EEE;font-size:11px; }
    .mn-table th { background:#F8F8F8;padding:7px 8px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #EEE; }
    .mn-table td { padding:8px;border-bottom:0.5px solid #F5F5F5;vertical-align:middle; }
    .mn-expert-name { font-weight:600;color:#111;margin-bottom:2px; }
    .mn-expert-org { font-size:9px;color:#999; }
    .mn-badge { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600; }
    .mn-badge.active { background:#E8F5E9;color:#2E7D32; }
    .mn-badge.pause { background:#FFF3E0;color:#E65100; }
    .mn-badge.new { background:#E3F2FD;color:#1565C0; }
    .mn-cov-mini { width:40px;height:6px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-period-tabs { display:flex;gap:6px;margin-bottom:12px; }
    .mn-pt { font-size:11px;padding:5px 14px;border-radius:99px;border:1px solid #C5CAE9;color:#3F51B5;cursor:pointer;background:#fff; }
    .mn-pt.active { background:#1A237E;color:#fff;border-color:#1A237E; }
    .mn-period-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px; }
    .mn-ps-card { background:#fff;border:1px solid #EEE;border-radius:8px;padding:10px; }
    .mn-ps-val { font-size:22px;font-weight:700;color:#1A237E;line-height:1;margin-bottom:3px; }
    .mn-ps-label { font-size:9px;color:#666;margin-bottom:3px; }
    .mn-ps-delta { font-size:9px;font-weight:600; }
    .mn-ps-delta.green { color:#2E7D32; }
    .mn-dyn-chart { display:flex;flex-direction:column;gap:6px; }
    .mn-dyn-row { display:flex;align-items:center;gap:6px; }
    .mn-dyn-year { font-size:10px;color:#555;width:28px; }
    .mn-dyn-bar-wrap { flex:1;height:14px;background:#E8EAF6;border-radius:3px;overflow:hidden; }
    .mn-dyn-bar { height:100%;border-radius:3px; }
    .mn-dyn-val { font-size:10px;color:#555;width:42px;text-align:right; }
    .mn-types { display:flex;flex-direction:column;gap:8px; }
    .mn-type-row { display:flex;align-items:center;gap:8px; }
    .mn-type-icon { width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0; }
    .mn-type-name { font-size:11px;font-weight:600;color:#111; }
    .mn-type-sub { font-size:9px;color:#888; }
    .mn-type-val { font-size:14px;font-weight:700;color:#1A237E;margin-left:auto;flex-shrink:0; }


    /* ─── VACCINATION MOCKUP ─── */
    .vc-form { background:#fff;border:1px solid #EEE;border-radius:10px;padding:16px; }
    .vc-section-label { font-size:10px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px; }
    .vc-animal-btns { display:flex;gap:8px;margin-bottom:14px; }
    .vc-animal-btn { font-size:12px;padding:8px 20px;border:1.5px solid #DDD;border-radius:8px;cursor:pointer;color:#555;background:#fff; }
    .vc-animal-btn.active { background:#1B4332;color:#fff;border-color:#1B4332; }
    .vc-fields-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
    .vc-field { }
    .vc-field-label { font-size:10px;color:#999;margin-bottom:4px; }
    .vc-input-mock { font-size:12px;padding:7px 10px;border:1px solid #DDD;border-radius:6px;color:#111;background:#fff; }
    .vc-input-mock.active-field { border-color:#1B4332; }
    .vc-input-mock.computed { background:#F0FFF4;color:#1B5E20;font-weight:500;border-color:#A5D6A7; }
    .vc-age-tabs { display:flex;gap:0;border:1px solid #DDD;border-radius:6px;overflow:hidden;margin-bottom:10px;width:fit-content; }
    .vc-age-tab { font-size:11px;padding:5px 14px;cursor:pointer;color:#777;background:#fff; }
    .vc-age-tab.active { background:#1B4332;color:#fff; }
    .vc-vac-select { margin-bottom:8px; }
    .vc-vac-info { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px; }
    .vc-vi-item { font-size:10px;color:#555;background:#F0FFF4;padding:3px 10px;border-radius:99px;border:0.5px solid #A5D6A7; }
    .vc-submit-btn { width:100%;padding:12px;background:#1B4332;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit; }
    .vc-print-btn { font-size:11px;padding:6px 14px;background:#1B4332;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit; }
    .vc-schedule-sections { display:flex;flex-direction:column;gap:12px; }
    .vc-sched-group { border:1px solid #EEE;border-radius:8px;overflow:hidden;background:#fff; }
    .vc-sched-group-title { font-size:11px;font-weight:700;padding:8px 12px;letter-spacing:0.3px; }
    .vc-table { width:100%;border-collapse:collapse;font-size:11px; }
    .vc-table th { background:#FAFAFA;padding:6px 8px;text-align:left;font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px;border-bottom:0.5px solid #EEE; }
    .vc-table td { padding:7px 8px;border-bottom:0.5px solid #F5F5F5;vertical-align:middle; }
    .vc-date { font-weight:500;color:#333;white-space:nowrap; }
    .vc-date.done { color:#888;text-decoration:line-through; }
    .vc-date.today { color:#E65100;font-weight:700; }
    .vc-s { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap; }
    .vc-s.done { background:#E8F5E9;color:#2E7D32; }
    .vc-s.pending { background:#F5F5F5;color:#757575; }
    .vc-s.today { background:#FFF3E0;color:#E65100; }
    .vc-s.future { background:#E3F2FD;color:#1565C0; }


    /* ─── PROCESS MGMT MOCKUP ─── */
    .pr-macros { display:flex;flex-direction:column;gap:10px; }
    .pr-macro { border:1px solid #E0E0E0;border-radius:8px;overflow:hidden;background:#fff; }
    .pr-macro-header { padding:10px 14px;display:flex;justify-content:space-between;align-items:center; }
    .pr-macro-title { font-size:13px;font-weight:700;color:#111; }
    .pr-macro-meta { display:flex;gap:8px;align-items:center; }
    .pr-badge { font-size:10px;padding:2px 10px;border-radius:99px;font-weight:600; }
    .pr-badge.blue { background:#E3F2FD;color:#1565C0; }
    .pr-badge.green { background:#E8F5E9;color:#2E7D32; }
    .pr-badge.orange { background:#FFF3E0;color:#E65100; }
    .pr-badge-cnt { font-size:10px;color:#888; }
    .pr-processes { padding:4px 0; }
    .pr-process { display:flex;align-items:center;gap:10px;padding:7px 14px;border-top:0.5px solid #F5F5F5; }
    .pr-proc-num { font-size:10px;color:#999;width:24px;flex-shrink:0;font-family:monospace; }
    .pr-proc-name { font-size:12px;color:#333;flex:1; }
    .pr-proc-owner { font-size:10px;color:#888;width:100px;flex-shrink:0; }
    .pr-proc-status { font-size:9px;padding:2px 8px;border-radius:99px;font-weight:600;white-space:nowrap; }
    .pr-proc-status.ok { background:#E8F5E9;color:#2E7D32; }
    .pr-proc-status.warn { background:#FFF3E0;color:#E65100; }
    .pr-proc-status.none { background:#F5F5F5;color:#999; }
    /* SOP */
    .sop-doc { background:#fff;border:1px solid #EEE;border-radius:10px;padding:16px; }
    .sop-meta-row { display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#F8F8F8;border-radius:8px;padding:12px;margin-bottom:14px; }
    .sop-meta-item { display:flex;flex-direction:column;gap:3px; }
    .sop-ml { font-size:9px;color:#999;text-transform:uppercase;letter-spacing:0.5px; }
    .sop-mv { font-size:11px;color:#111;font-weight:500;line-height:1.4; }
    .sop-steps-title { font-size:11px;font-weight:700;color:#333;margin-bottom:8px; }
    .sop-steps { display:flex;flex-direction:column;gap:8px;margin-bottom:14px; }
    .sop-step { display:flex;gap:10px;align-items:flex-start; }
    .sop-step-num { width:22px;height:22px;border-radius:50%;background:#263238;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px; }
    .sop-step-name { font-size:12px;font-weight:600;color:#111;margin-bottom:3px; }
    .sop-step-note { font-size:10px;color:#888;line-height:1.4; }
    .sop-checklist-title { font-size:11px;font-weight:700;color:#333;margin-bottom:8px; }
    .sop-checks { display:flex;flex-direction:column;gap:6px; }
    .sop-check { display:flex;align-items:center;gap:8px; }
    .sop-chk-box { width:16px;height:16px;border-radius:3px;border:1.5px solid #DDD;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff; }
    .sop-chk-box.done { background:#2E7D32;border-color:#2E7D32; }
    .sop-check span { font-size:11px;color:#444; }
    .sop-check.done span { text-decoration:line-through;color:#999; }
    /* Analytics */
    .pr-analytics-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px; }
    .pr-as-card { background:#fff;border:1px solid #EEE;border-radius:8px;padding:10px 12px; }
    .pr-as-card.green { background:#F1F8E9; }
    .pr-as-card.orange { background:#FFF8F0; }
    .pr-as-val { font-size:24px;font-weight:700;color:#111;line-height:1;margin-bottom:3px; }
    .pr-as-label { font-size:10px;font-weight:600;color:#444;margin-bottom:2px; }
    .pr-as-sub { font-size:9px;color:#888; }
    .pr-an-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
    .pr-an-col { background:#fff;border:1px solid #EEE;border-radius:8px;padding:12px; }
    .pr-an-title { font-size:11px;font-weight:600;color:#333;margin-bottom:10px; }
    .pr-coverage { display:flex;flex-direction:column;gap:7px; }
    .pr-cov-row { display:flex;align-items:center;gap:6px; }
    .pr-cov-name { font-size:10px;color:#555;width:100px;flex-shrink:0; }
    .pr-cov-bar { flex:1;height:6px;background:#F0F0F0;border-radius:3px;overflow:hidden; }
    .pr-cov-pct { font-size:10px;font-weight:600;color:#333;width:28px;text-align:right; }
    .pr-status-list { display:flex;flex-direction:column;gap:8px; }
    .pr-sl-row { display:flex;align-items:center;gap:6px; }
    .pr-sl-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
    .pr-sl-name { font-size:10px;color:#555;width:110px;flex-shrink:0; }
    .pr-sl-bar { flex:1;height:8px;background:#F0F0F0;border-radius:3px;overflow:hidden;position:relative; }
    .pr-sl-cnt { font-size:10px;font-weight:600;color:#333;width:16px;text-align:right; }
    .pr-month-bars { display:flex;gap:6px;align-items:flex-end;height:56px;margin-top:8px; }
    .pr-mb-col { flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%; }
    .pr-mb-bar { width:100%;border-radius:3px 3px 0 0; }
    .pr-mb-label { font-size:9px;color:#999; }


    .cases-disclaimer {
      font-size: 12px; color: #aaa; line-height: 1.6;
      padding: 20px 0; border-top: 0.5px solid var(--border);
      text-align: center; max-width: 600px; margin: 0 auto;
    }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 720px) {
      .container { padding: 0 20px; }
      .hero h1 { font-size: 40px; letter-spacing: -1.5px; }
      .pain-grid, .cases-grid, .how-grid { grid-template-columns: 1fr; }
      .case-card.wide { grid-column: span 1; }
      .why-not { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; }
      .about-block { grid-template-columns: 1fr; }
      .form-block { padding: 36px 24px; }
      .form-row { grid-template-columns: 1fr; }
      .form-group.full { grid-column: span 1; }
      .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
      .nav-links { display: none; }
    }
  

/* Keep desktop demo interfaces scrollable inside their cards on phones. */
.cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-card, .case-screens, .sscreen, .sframe { min-width: 0; max-width: 100%; }
@media (max-width: 720px) {
  .cases-grid { grid-template-columns: minmax(0, 1fr); }
  .case-card { padding: 18px; }
  .case-top { gap: 12px; }
  .case-badge { text-align: right; }
}
@media (max-width: 720px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); display: grid; gap: 28px; }
  .hero-left, .hero-right { min-width: 0; width: 100%; }
  .hero-btns { flex-wrap: wrap; }
}