/* ============================================================
   Casava IT — MediCab product page (medicab.html)
   Loaded AFTER css/style.css and css/netrecon.css, and reuses
   their components (.subnav, .hero-app, .scope, .spec, .shots,
   .tiers, .plat, .fineprint).

   This is the one page that does NOT use the site's sky-blue
   palette. It carries the app's own colour scheme: the Material 3
   scheme MediCab builds from the seed #1F8A70 (lib/app.dart).
   Rather than restyle every rule, it re-points the shared
   --sky-* / ink / line / bg tokens on <body class="medicab">;
   every component then follows. The tokens are the only place
   colour literals live in this file.

   Sampled from a 1.1.0 screenshot of the app (light theme):
     page background  #F5FBF6     bottom bar        #E9EFEB
     secondary tint   #CEE9DD     primary (labels)  #126B56
     FAB / mint       #A3F2D7     on-primary-cont.  #005140
     on-surface-var.  #3F4945
   Seed #1F8A70 is exact (from source). --sky-100 / 400 / 800 / 900
   are interpolated between the sampled tones and are not app values.
   ============================================================ */

body.medicab {
  --sky-50:  #f5fbf6;
  --sky-100: #e4f2ea;
  --sky-200: #cee9dd;
  --sky-300: #a3f2d7;
  --sky-400: #4fb596;
  --sky-500: #1f8a70;
  --sky-600: #167a62;
  --sky-700: #126b56;
  --sky-800: #005140;
  --sky-900: #00382c;

  --ink:    #171d1b;
  --ink-2:  #2a3431;
  --muted:  #3f4945;
  --muted-2:#6f7975;
  --line:   #dde6e0;
  --line-2: #c4d3ca;

  --bg:     #f5fbf6;
  --bg-2:   #e9efeb;

  --marker: #ffe0b2;   /* the app's "expiring soon" chip tone */

  --shadow:   0 1px 2px rgba(23,29,27,.05), 0 18px 40px -22px rgba(18,107,86,.28);
  --shadow-h: 0 30px 60px -26px rgba(18,107,86,.42);

  background: var(--bg);
}

/* Shared rules that hard-code the blue shadow instead of using a token. */
body.medicab .btn-primary { box-shadow: 0 14px 30px -12px rgba(18,107,86,.55); }
body.medicab .btn-primary:hover { box-shadow: 0 22px 44px -14px rgba(18,107,86,.7); }
body.medicab .card { background: var(--bg); }

/* ---------- Hero: app icon + status ---------- */
.hero-app .app-icon {
  display: block; width: 92px; height: 92px; margin: 0 auto 22px;
  border-radius: 22px; box-shadow: var(--shadow-h);
}
.hero-app .status-soon {
  font-family: var(--mono); font-size: 13px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--sky-800); background: var(--sky-300); border-color: var(--sky-300);
}

/* ---------- Free vs Premium (two tiers, no prices) ---------- */
.tiers.two .tier .price { font-size: 26px; }

/* ---------- Illustration in the hero ---------- */
.hero-app .hero-art { padding-bottom: 90px; }  /* keeps the cards clear of the .hero-fade */
.hero-app .hero-art svg { max-width: 760px; margin: 0 auto; }