/* Ploti for Institutions (ploti.co.ke/institutions). Builds on styles.css and the Business page's business.css; only
   what is new here: the estate card, who it's for, satellite watch tiles and the field agent card. */

.inst-tag { background: #DDE8F2; color: #1E4E7C; }
.in-sub { margin-top: 12px; max-width: 64ch; font-size: 17px; }

/* ---- Opening: the sample estate ---- */
.in-hero { background: radial-gradient(1200px 520px at 85% 10%, rgba(29, 107, 67, 0.10), transparent 60%), radial-gradient(900px 420px at 0% 100%, rgba(232, 163, 90, 0.10), transparent 60%); }
.in-estate { background: linear-gradient(160deg, #1B2D23 0%, #14211A 60%); }
.in-corridor { position: relative; background: linear-gradient(180deg, #22332A, #1D2C24); border-radius: 16px; padding: 10px 12px 26px; }
.in-corridor svg { display: block; width: 100%; height: auto; }
.in-land { fill: none; stroke: rgba(111, 185, 140, 0.16); stroke-width: 22; stroke-linecap: round; }
.in-line { fill: none; stroke: #3E5A49; stroke-width: 3; stroke-linecap: round; }
.in-segs path { fill: none; stroke-width: 5; stroke-linecap: round; }
.in-pins circle { stroke: #14211A; stroke-width: 3; }
.in-pins .ok { fill: #6FB98C; }
.in-pins .warn { fill: #E8A35A; }
.in-flag circle:first-child { fill: rgba(226, 118, 106, 0.25); animation: in-pulse 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.in-flag circle:last-child { fill: #E2766A; stroke: #fff; stroke-width: 2; }
@keyframes in-pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .in-flag circle:first-child { animation: none; } }
.in-km { position: absolute; left: 14px; bottom: 8px; font: 12px var(--font-mono); color: #9FB2A5; }
.in-alert { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(226, 118, 106, 0.12); border: 1px solid rgba(226, 118, 106, 0.28); }
.in-alert-dot { width: 10px; height: 10px; border-radius: 50%; background: #E2766A; box-shadow: 0 0 0 4px rgba(226, 118, 106, 0.22); }
.in-alert b { display: block; font-weight: 500; }
.in-alert span { font-size: 13px; color: #C9D6CC; }
.in-alert em { font-style: normal; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: #fff; color: #7A1A2A; white-space: nowrap; }

/* ---- Who it's for ---- */
.in-who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.in-who article { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 20px; background: linear-gradient(180deg, #fff, #F7FAF6); border: 1px solid var(--line); transition: transform 0.2s, box-shadow 0.2s; }
.in-who article::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--field), #E8A35A); opacity: 0; transition: opacity 0.2s; }
.in-who article:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(20, 33, 26, 0.10); }
.in-who article:hover::before { opacity: 1; }
.in-who h3 { font-size: 21px; font-weight: 500; }
.in-who p { font-size: 15px; color: var(--muted); }
.in-who-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, #E3F0E6, #F1F7F2); }
.in-who-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--field); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.in-who dl { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed #D5DDD3; display: flex; flex-direction: column; gap: 6px; }
.in-who dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.in-who dt { color: var(--muted); }
.in-who dd { margin: 0; font-weight: 500; color: var(--ink); text-align: right; }

/* ---- Features ---- */
.in-features { padding-top: clamp(72px, 9vw, 112px); padding-bottom: clamp(72px, 9vw, 112px); }

/* ---- Satellite watch ---- */
.in-watch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.in-shot { background: #22332A; border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.in-shot > span { font: 13px var(--font-mono); color: #C9D6CC; }
.in-shot.is-after { box-shadow: inset 0 0 0 2px #E2766A; }
.in-shot.is-after > span { color: #F4B7AE; }
.in-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.in-tile i { display: block; }
.in-tile::after { content: ''; position: absolute; inset: 14%; border: 2px dashed rgba(255, 255, 255, 0.55); border-radius: 6px; pointer-events: none; }
.in-tile b { position: absolute; border: 2px solid #E2766A; border-radius: 4px; box-shadow: 0 0 0 4px rgba(226, 118, 106, 0.3); }

/* ---- Field agents ---- */
.in-agent-card { width: min(380px, 100%); margin: 0 auto; border-radius: 26px; padding: 22px; background: linear-gradient(160deg, #fff, #F1F7F2); border: 1px solid var(--line); box-shadow: 0 24px 48px rgba(20, 33, 26, 0.14); display: flex; flex-direction: column; gap: 16px; }
.in-agent-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.in-agent-head b { font: 500 18px var(--font-display); }
.in-agent-head em { font-style: normal; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; }
.in-agent-card ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.in-agent-card li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.in-agent-card li:last-child { padding-bottom: 0; }
.in-agent-card li::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: #DCE3DA; }
.in-agent-card li:last-child::before { display: none; }
.in-agent-card li > span { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #C3CCC1; background: #fff; }
.in-agent-card li.done > span { border-color: var(--field); background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-9' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.in-agent-card li.done::before { background: var(--field); }
.in-agent-card li b { display: block; font-weight: 500; }
.in-agent-card li small { font-size: 13px; color: var(--muted); }

/* ---- Pricing: four plans ---- */
.in-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.in-plans .bz-price b { font-size: 38px; }
.in-plans .bz-plan h3 { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1180px) { .in-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
  .in-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-plans { max-width: none; }
}
@media (max-width: 640px) {
  .in-who, .in-plans { grid-template-columns: minmax(0, 1fr); }
  .in-alert { grid-template-columns: auto minmax(0, 1fr); }
  .in-alert em { grid-column: 2; justify-self: start; }
}