/* ============================================================
   MPFSTS — Public Portal landing page
   Green institutional theme · white cards · pastel accents
   All classes are namespaced .pp- so nothing here can collide
   with the shared design system in web.css.
   ============================================================ */

.pp{
  --g-900:#0B3B24;   /* deepest forest — footer */
  --g-800:#0F4D2E;
  --g-700:#146B3A;   /* primary green — buttons, headings */
  --g-600:#1B8B4A;
  --g-500:#2FA45C;
  --g-400:#57BE7A;
  --g-050:#E9F5EC;
  --g-025:#F2F9F4;

  --ink-900:#12211A;
  --ink-700:#33473D;
  --ink-500:#5A6B62;
  --ink-400:#7A897F;

  --amber:#E09A2B;
  --blue:#2563C9;   --blue-050:#E8F0FD;
  --violet:#7048C4; --violet-050:#F1EBFC;
  --orange:#DB7B18; --orange-050:#FDF1E2;
  --teal:#0E8C9E;   --teal-050:#E3F4F6;
  --rose:#D63B57;   --rose-050:#FDEAEE;
  --gold:#C08A0E;   --gold-050:#FBF3DF;

  --page:#F4F7F4;
  --card:#FFFFFF;
  --line:#E4EAE5;
  --line-2:#EFF3EF;

  --r-s:10px; --r:14px; --r-l:18px; --r-xl:24px;
  --sh-1:0 1px 2px rgba(16,48,32,.05), 0 1px 3px rgba(16,48,32,.05);
  --sh-2:0 2px 6px -2px rgba(16,48,32,.07), 0 10px 24px -8px rgba(16,48,32,.13);
  --sh-3:0 10px 24px -10px rgba(16,48,32,.16), 0 28px 56px -20px rgba(16,48,32,.20);

  --wrap:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* The landing page owns the page ground while home is showing */
body.pp{background:var(--page);color:var(--ink-900)}
.pp .pp-wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* ---------- 1. TOP UTILITY BAR ---------- */
.pp-topbar{
  background:#0E2B3D;color:#CFE0DA;font-size:.78rem;
  border-bottom:3px solid var(--g-600);
}
.pp-topbar .in{
  max-width:var(--wrap);margin:0 auto;padding:7px 20px;
  display:flex;align-items:center;gap:18px;
}
.pp-notice{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.pp-notice .tag{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(180deg,#F0AE3E,#DE8F1C);color:#3A2503;
  font-weight:800;font-size:.72rem;padding:3px 10px;border-radius:999px;
  white-space:nowrap;
}
.pp-marquee{overflow:hidden;flex:1;min-width:0}
.pp-marquee > span{color:#EAF3EF;white-space:nowrap}
.pp-marquee .track{display:inline-flex;white-space:nowrap;
  animation:pp-slide 30s linear infinite}
.pp-marquee .track > span{padding-right:90px;color:#EAF3EF}
.pp-marquee:hover .track{animation-play-state:paused}
@keyframes pp-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pp-marquee .track{animation:none}}

.pp-topbar .links{display:flex;align-items:center;gap:16px;flex:none}
.pp-topbar .links a,.pp-topbar .links span.i{
  color:#CFE0DA;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pp-topbar .links a:hover{color:#fff}
.pp-topbar .sep{width:1px;height:16px;background:rgba(255,255,255,.16)}
.pp-social{display:flex;gap:6px}
.pp-social a{
  width:22px;height:22px;border-radius:5px;background:rgba(255,255,255,.10);
  display:grid;place-items:center;font-size:.68rem;color:#DCE9E4;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.pp-social a:hover{background:var(--g-600);color:#fff;transform:translateY(-1px)}

/* ---------- 2. MASTHEAD ---------- */
.pp-mast{background:#fff;border-bottom:1px solid var(--line)}
/* The masthead runs the full width of the window rather than the content
   wrap: the state emblem belongs in the left corner and the department
   emblem in the right one, the way a government masthead is set. */
.pp-mast .in{
  max-width:none;margin:0;padding:12px 26px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;
}
.pp-emblem{display:flex;align-items:center;gap:14px}
.pp-emblem img{width:74px;height:74px;object-fit:contain}
.pp-emblem b{display:block;font-size:1.14rem;font-weight:800;color:var(--g-800);line-height:1.25}
.pp-emblem small{display:block;font-size:.88rem;color:var(--ink-500);line-height:1.35;margin-top:2px}

/* The system's own name is the page heading; the abbreviation everyone
   uses in speech follows it in brackets. */
.pp-brand{text-align:center;min-width:0}
.pp-brand .title{
  font-size:clamp(1.15rem,1.9vw,1.72rem);font-weight:900;letter-spacing:-.01em;
  line-height:1.2;color:var(--g-800);margin:0}
.pp-brand .abbr{
  margin-top:3px;font-size:.98rem;font-weight:800;letter-spacing:.04em;
  color:var(--g-600);display:inline-flex;align-items:baseline;gap:7px}
.pp-brand .abbr i{font-style:normal;font-size:.92rem}
.pp-brand .tags{
  margin-top:6px;font-size:.72rem;font-weight:700;color:var(--g-600);
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.pp-brand .tags span::after{content:"·";margin-left:8px;color:var(--ink-400)}
.pp-brand .tags span:last-child::after{content:""}

.pp-mast-right{display:flex;align-items:center;gap:18px}
.pp-controls{display:flex;align-items:center;gap:12px}
.pp-dept img{
  width:70px;height:70px;object-fit:contain;display:block;
  border-radius:10px;background:#fff}
.pp-lang{display:flex;align-items:center;gap:8px;font-size:.86rem}
.pp-lang button{
  background:none;border:0;font:inherit;color:var(--ink-500);cursor:pointer;padding:2px 2px}
.pp-lang button.on{color:var(--g-700);font-weight:800;text-decoration:underline;text-underline-offset:4px}
.pp-lang .bar{width:1px;height:14px;background:var(--line)}

.pp-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:inherit;font-size:.87rem;font-weight:700;line-height:1;
  padding:11px 18px;border-radius:10px;border:1px solid transparent;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.pp-btn:hover{transform:translateY(-1px)}
.pp-btn-ghost{background:#fff;border-color:var(--g-400);color:var(--g-700)}
.pp-btn-ghost:hover{background:var(--g-025);color:var(--g-800)}
.pp-btn-solid{background:var(--g-800);color:#fff;box-shadow:var(--sh-2)}
.pp-btn-solid:hover{background:var(--g-700);color:#fff}

/* important-links dropdown */
.pp-drop{position:relative}
.pp-drop-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:6px;display:none}
.pp-drop.open .pp-drop-menu{display:block}
.pp-drop-menu a{
  display:block;padding:9px 12px;border-radius:8px;font-size:.85rem;
  color:var(--ink-700);font-weight:600}
.pp-drop-menu a:hover{background:var(--g-025);color:var(--g-800)}

/* ---------- 3. HERO ---------- */
/* The hero is a fixed 1920 × 500 frame — artwork is drawn to that shape,
   so the band keeps the ratio at every width (500px exactly at 1920) and
   the picture inside needs no cropping. */
.pp-hero{
  position:relative;overflow:hidden;background:#0F4D2E;
  aspect-ratio:1920/500;min-height:280px}
.pp-hero .bg{position:absolute;inset:0;background:#0F4D2E}
.pp-hero .slide{
  position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease);pointer-events:none}
.pp-hero .slide.is-on{opacity:1}
.pp-hero .slide img{width:100%;height:100%;object-fit:cover;object-position:center 46%;
  transform:scale(1);transition:transform 7s linear}
.pp-hero .slide.is-on img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.pp-hero .slide img{transition:none;transform:none}}
/* artwork already cut to 1920×500 lands exactly; anything taller is
   trimmed top and bottom rather than squashed */
/* A departmental banner runs edge to edge in the same band as every other
   slide — the frame never changes size. Its title, the portraits and the
   produce strip all sit in the upper part of the artwork, so the picture is
   anchored to the top and the excess is taken off the bottom, where there
   is only field and sky. */
.pp-hero .slide.fit{background:#0C4227}
.pp-hero .slide.fit img{object-fit:cover;object-position:center top}
.pp-hero .veil{
  position:absolute;inset:0;transition:opacity .6s var(--ease);
  background:
    linear-gradient(100deg,rgba(7,48,28,.92) 0%,rgba(10,62,36,.80) 30%,rgba(14,80,46,.42) 52%,rgba(18,96,54,.10) 70%,rgba(20,110,62,0) 86%),
    linear-gradient(180deg,rgba(6,40,24,.30) 0%,rgba(0,0,0,0) 28%,rgba(6,40,24,.34) 100%);
}
/* The banner is a 16:9 photograph in a much wider band, so it is always
   cropped top and bottom. A taller band gives more of it back — this height
   keeps roughly three-quarters of the frame on a laptop screen. */
/* the overlay copy is centred in the frame rather than sizing it */
.pp-hero .in{
  position:relative;max-width:var(--wrap);margin:0 auto;height:100%;
  display:flex;align-items:center;padding:0 20px}
/* The banner already carries the farmer on its right, so the copy keeps to the
   left half and the veil below darkens only that side. */
/* One band height for every slide. It grows with the window because the
   departmental banners do too: they are half as tall as they are wide, so
   on a broad screen a short band would slice through their last line of
   type. This keeps the whole title block of both banners inside the frame
   while the excess still comes off the bottom. */
.pp-hero-copy{max-width:52%;display:flex;align-items:center}
.pp-hero h2{
  font-size:clamp(2rem,3.6vw,3.05rem);line-height:1.16;font-weight:900;color:#fff;
  letter-spacing:-.02em;margin:0 0 16px;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.pp-hero h2 em{font-style:normal;display:block}
.pp-hero h2 .leaf{font-size:.72em}
.pp-hero p.lede{
  font-size:1.06rem;line-height:1.7;color:#DDF0E3;max-width:34ch;margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,.3)}
/* photographs now fill the scheme thumbnails, so the gradient stand-ins go */

/* --- hero carousel --- */
/* On a slide whose artwork carries its own words, the overlay copy and the
   darkening veil both step back so nothing is printed over the design. */
.pp-hero[data-mode="plain"] .pp-hero-copy{opacity:0;visibility:hidden}
.pp-hero[data-mode="plain"] .veil{opacity:.12}
.pp-hero-copy{transition:opacity .5s var(--ease)}

.pp-hero-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.45);
  background:rgba(8,40,24,.34);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(4px);
  transition:background .2s var(--ease),transform .2s var(--ease)}
.pp-hero-nav:hover{background:rgba(8,40,24,.62);transform:translateY(-50%) scale(1.06)}
.pp-hero-nav.prev{left:14px}
.pp-hero-nav.next{right:14px}

.pp-hero-dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:4;
  display:flex;justify-content:center;gap:8px}
.pp-hero-dots button{
  width:30px;height:5px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .25s var(--ease),width .25s var(--ease)}
.pp-hero-dots button.on{background:#fff;width:44px;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.pp-hero-progress{
  position:absolute;left:0;right:0;bottom:0;z-index:5;height:3px;
  background:rgba(255,255,255,.18);overflow:hidden}
.pp-hero-progress .bar{
  height:100%;width:0%;background:linear-gradient(90deg,#57BE7A,#1B8B4A);
  transition:none}
.pp-hero-progress .bar.run{transition:width linear}

@media (prefers-reduced-motion:reduce){
  .pp-hero .slide{transition:none}
  .pp-hero-progress{display:none}
}

/* Quick actions — a strip of their own beneath the banner. They used to sit
   inside the hero and covered the people in the photograph. */
.pp-actions-wrap{
  max-width:var(--wrap);margin:0 auto;padding:22px 20px 0;position:relative;z-index:6}
.pp-actions{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pp-act{
  position:relative;display:block;border-radius:var(--r-l);padding:18px 16px 16px;
  border:1px solid rgba(255,255,255,.55);min-height:104px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.5);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.pp-act:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(0,0,0,.55)}
.pp-act .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-size:1.05rem;margin-bottom:12px;background:var(--g-050);color:var(--g-700)}
.pp-act b{display:block;font-size:1rem;font-weight:800;color:var(--ink-900);line-height:1.3}
.pp-act small{display:block;font-size:.78rem;color:var(--ink-500);margin-top:3px;line-height:1.45}
.pp-act .go{
  position:absolute;right:14px;bottom:14px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:.78rem;
  background:var(--g-050);color:var(--g-700);border:1px solid rgba(20,107,58,.18)}
.pp-act:hover .go{background:var(--g-700);color:#fff;border-color:var(--g-700)}

.pp-act.v-dark{background:linear-gradient(160deg,#1A7A44 0%,#0E4A2C 100%);border-color:rgba(255,255,255,.22)}
.pp-act.v-dark b{color:#fff}
.pp-act.v-dark small{color:#C9E6D4}
.pp-act.v-dark .ic{background:rgba(255,255,255,.16);color:#fff}
.pp-act.v-dark .go{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.3)}
.pp-act.v-lime{background:#F2F7E2}
.pp-act.v-lime .ic{background:#E4EEC6;color:#5C7A16}
.pp-act.v-blue{background:#EBF2FD}
.pp-act.v-blue .ic{background:#DAE7FA;color:var(--blue)}
.pp-act.v-violet{background:#F4EFFC}
.pp-act.v-violet .ic{background:#E8DEF8;color:var(--violet)}

/* ---------- 4. STAT STRIP ---------- */
.pp-stats-wrap{max-width:var(--wrap);margin:18px auto 0;padding:0 20px;position:relative;z-index:5}
.pp-stats{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-2);display:grid;grid-template-columns:repeat(6,1fr);overflow:hidden}
.pp-stat{padding:18px 16px;border-right:1px solid var(--line-2)}
.pp-stat:last-child{border-right:0}
.pp-stat .top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pp-stat .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:.95rem;flex:none}
.pp-stat .lb{font-size:.76rem;font-weight:700;color:var(--ink-500);line-height:1.3}
.pp-stat .num{font-size:1.5rem;font-weight:900;letter-spacing:-.02em;color:var(--ink-900);line-height:1.1}
.pp-stat .delta{font-size:.72rem;font-weight:700;color:var(--g-600);margin-top:4px}
.pp-stat .delta.muted{color:var(--ink-400);font-weight:600}
.tint-green{background:var(--g-050);color:var(--g-700)}
.tint-blue{background:var(--blue-050);color:var(--blue)}
.tint-violet{background:var(--violet-050);color:var(--violet)}
.tint-orange{background:var(--orange-050);color:var(--orange)}
.tint-teal{background:var(--teal-050);color:var(--teal)}
.tint-rose{background:var(--rose-050);color:var(--rose)}
.tint-gold{background:var(--gold-050);color:var(--gold)}

/* ---------- 5. SECTION FURNITURE ---------- */
.pp-sec{max-width:var(--wrap);margin:0 auto;padding:22px 20px 0}
#s-home{padding-bottom:24px}
.pp-dots{margin-bottom:4px}
.pp-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pp-sec-head h3{
  font-size:1.16rem;font-weight:800;color:var(--g-800);letter-spacing:-.01em}
.pp-sec-head .leaf{color:var(--g-500);font-size:1rem}
.pp-sec-head .more{margin-left:auto;font-size:.82rem;font-weight:700;color:var(--g-700)}

.pp-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-1);min-width:0}
.pp-datarow > *,.pp-lower > *,.pp-schemes > *,.pp-svc > *{min-width:0}
.pp-card > h4{
  padding:14px 18px;border-bottom:1px solid var(--line-2);
  font-size:.98rem;font-weight:800;color:var(--ink-900)}
.pp-card .body{padding:16px 18px}

/* ---------- 6. SERVICE TILES ---------- */
.pp-svc{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.pp-svc a{
  display:block;text-align:center;padding:18px 10px 16px;border-radius:var(--r-l);
  border:1px solid var(--line);background:var(--card);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.pp-svc a:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--g-400)}
.pp-svc .ic{
  width:46px;height:46px;border-radius:14px;margin:0 auto 10px;
  display:grid;place-items:center;font-size:1.25rem}
.pp-svc b{display:block;font-size:.85rem;font-weight:800;color:var(--ink-900);line-height:1.3}
.pp-svc small{display:block;font-size:.72rem;color:var(--ink-400);margin-top:3px}

/* ---------- 7. PROCESS RAIL ---------- */
.pp-steps{display:grid;grid-template-columns:repeat(7,1fr);align-items:start;gap:0}
.pp-step{position:relative;text-align:center;padding:4px 8px}
.pp-step .ic{
  width:52px;height:52px;border-radius:50%;margin:0 auto 10px;
  display:grid;place-items:center;font-size:1.3rem;position:relative;z-index:2;
  border:1px solid rgba(0,0,0,.04)}
.pp-step .no{
  font-size:.74rem;font-weight:900;color:var(--g-700);letter-spacing:.04em}
.pp-step b{display:block;font-size:.86rem;font-weight:800;color:var(--ink-900);margin-top:1px}
.pp-step small{display:block;font-size:.72rem;color:var(--ink-400);margin-top:3px;line-height:1.4}
.pp-step::after{
  content:"";position:absolute;top:26px;left:calc(50% + 34px);width:calc(100% - 68px);
  border-top:2px dashed #CFDCD3;z-index:1}
.pp-step:last-child::after{display:none}
.pp-step .arrow{
  position:absolute;top:20px;right:calc(-6px);font-size:.8rem;color:#B6C7BC;z-index:2}
.pp-step:last-child .arrow{display:none}

/* ---------- 8. DATA ROW (map / table / donut) ---------- */
.pp-datarow{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr) minmax(0,.8fr);
  gap:16px;align-items:stretch}
.pp-legend{display:flex;flex-direction:column;gap:8px;font-size:.78rem;color:var(--ink-500)}
.pp-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:7px}
.pp-map-flex{position:relative}
.pp-map-flex svg{display:block;width:100%;height:auto}
.pp-map-flex .pp-legend{
  position:absolute;left:0;top:0;z-index:2;
  background:rgba(255,255,255,.86);border:1px solid var(--line-2);
  border-radius:9px;padding:8px 10px}
.pp-map-flex .mp-d{transition:fill-opacity .18s var(--ease)}
.pp-map-flex .mp-d:hover{fill-opacity:.78;cursor:pointer}
.pp-map-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;margin:12px auto 0;
  padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:var(--g-025);
  font-size:.8rem;font-weight:700;color:var(--g-700);width:fit-content}
.pp-map-btn:hover{background:var(--g-050);border-color:var(--g-400)}

.pp-table{width:100%;min-width:340px;border-collapse:collapse;font-size:.85rem}
.pp-card .body{overflow-x:auto}
.pp-table th{
  text-align:right;font-weight:800;color:var(--g-700);font-size:.78rem;
  padding:8px 10px;border-bottom:2px solid var(--g-050);white-space:nowrap}
.pp-table th:first-child,.pp-table td:first-child{text-align:left}
.pp-table td{padding:9px 10px;border-bottom:1px solid var(--line-2);text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink-700)}
.pp-table td:first-child{font-weight:700;color:var(--ink-900)}
.pp-table tr:last-child td{border-bottom:0}
.pp-table tbody tr:hover td{background:var(--g-025)}

.pp-donut{display:flex;flex-direction:column;align-items:center;gap:14px}
.pp-donut-svg{position:relative;width:190px;height:190px;flex:none}
.pp-donut-svg svg{transform:rotate(-90deg)}
.pp-donut-mid{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.25}
.pp-donut-mid small{display:block;font-size:.72rem;color:var(--ink-400);font-weight:700}
.pp-donut-mid b{display:block;font-size:1.05rem;font-weight:900;color:var(--ink-900)}
.pp-dlegend{width:100%;display:flex;flex-direction:column;gap:9px}
.pp-dlegend div{display:flex;align-items:flex-start;gap:8px;font-size:.79rem;color:var(--ink-700)}
.pp-dlegend i{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}
.pp-dlegend b{display:block;font-weight:700;color:var(--ink-900);font-size:.79rem}
.pp-dlegend span{color:var(--ink-400);font-size:.75rem}

/* ---------- 9. SCHEMES + ASSISTANT ---------- */
/* Schemes across the top, beneficiary stories beneath them, assistant
   alongside both — the two stacked blocks are what make the left column
   as tall as the assistant, so neither side is left with a void. */
.pp-lower{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.42fr);gap:14px;align-items:stretch}
.pp-lower-main{min-width:0;display:flex;flex-direction:column;gap:0}
.pp-schemes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:stretch}
.pp-schemes-banner{overflow:hidden}
.pp-schemes-banner img{transition:transform .6s var(--ease)}
.pp-schemes-banner:hover img{transform:scale(1.01)}
.pp-sec-head-sub{margin-top:18px}
.pp-scheme{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;display:flex;flex-direction:column;min-height:248px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.pp-scheme:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.pp-scheme .ph{height:106px;flex:none;position:relative;overflow:hidden;background:var(--g-050)}
.pp-scheme .ph img{width:100%;height:100%;object-fit:cover}
.pp-scheme .in{padding:10px 12px 10px;display:flex;flex-direction:column;flex:1}
.pp-scheme .nm{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:900;color:var(--ink-900);line-height:1.3}
.pp-scheme .nm i{width:8px;height:8px;border-radius:50%;flex:none}
.pp-scheme p{font-size:.72rem;color:var(--ink-500);line-height:1.5;margin:6px 0 10px;flex:1;min-height:2.9em}
.pp-scheme .lnk{
  font-size:.75rem;font-weight:800;color:var(--g-700);
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;width:fit-content;margin-top:auto}
.pp-scheme .lnk:hover{background:var(--g-025);border-color:var(--g-400)}

/* Assistant stretches to match left column height */
.pp-bot{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-1);padding:12px;display:flex;flex-direction:column;align-self:stretch;min-height:100%}
.pp-bot .hd{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pp-bot .av{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--g-050);font-size:1.05rem}
.pp-bot .hd{align-items:center}
/* live state — the dot and the words change together, so a farmer can
   tell at a glance whether the assistant is listening, thinking or talking */
.pp-bot .hd small{display:flex;align-items:center;gap:6px}
.pp-bot .hd small::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--g-500);flex:none}
.pp-bot[data-state="listening"] .hd small::before{background:var(--rose);animation:pp-blink 1s infinite}
.pp-bot[data-state="thinking"]  .hd small::before{background:var(--gold);animation:pp-blink 1s infinite}
.pp-bot[data-state="speaking"]  .hd small::before{background:var(--teal)}
@keyframes pp-blink{0%,100%{opacity:1}50%{opacity:.25}}
.pp-wave{display:none;align-items:flex-end;gap:2px;height:14px;margin-left:2px}
.pp-bot[data-state="listening"] .pp-wave,
.pp-bot[data-state="speaking"] .pp-wave{display:flex}
.pp-wave i{width:3px;border-radius:2px;background:var(--g-500);height:5px;animation:pp-bar .9s ease-in-out infinite}
.pp-bot[data-state="listening"] .pp-wave i{background:var(--rose)}
.pp-wave i:nth-child(2){animation-delay:.15s}
.pp-wave i:nth-child(3){animation-delay:.3s}
.pp-wave i:nth-child(4){animation-delay:.45s}
@keyframes pp-bar{0%,100%{height:4px}50%{height:14px}}
@media (prefers-reduced-motion:reduce){
  .pp-wave i{animation:none;height:8px}
  .pp-bot .hd small::before{animation:none}
}
.pp-bot .hd .txt{flex:1;min-width:0}
.pp-bot .hd b{font-size:.92rem;font-weight:800;color:var(--ink-900);display:block;line-height:1.25}
/* read-aloud toggle */
.pp-bot .spk{
  flex:none;cursor:pointer;font:inherit;font-size:.95rem;line-height:1;
  width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--ink-500);display:grid;place-items:center;
  transition:background .18s var(--ease),color .18s var(--ease)}
.pp-bot .spk:hover{background:var(--g-025);border-color:var(--g-400);color:var(--g-700)}
.pp-bot .spk.on{background:var(--g-700);border-color:var(--g-700);color:#fff}
.pp-bot .spk.talking{animation:pp-mic 1.15s ease-in-out infinite}
/* per-answer replay */
.pp-msg .say{
  margin-left:6px;cursor:pointer;font:inherit;font-size:.72rem;line-height:1;
  border:0;background:none;padding:2px 3px;color:var(--g-700);vertical-align:middle}
.pp-msg .say:hover{color:var(--g-800)}
.pp-msg .say.talking{color:var(--rose)}
.pp-bot .hd small{font-size:.7rem;color:var(--ink-400);display:block}
.pp-bot.drop{outline:2px dashed var(--g-500);outline-offset:3px;background:var(--g-025)}

/* ---- document panel (the assistant's knowledge base) ---- */
/* Read-only note of what the Directorate has published; the documents
   themselves are managed on the admin screen. */
.pp-kb{border:1px solid var(--line-2);border-radius:11px;padding:8px 9px;margin-bottom:10px;background:var(--g-025)}
.pp-kb[hidden]{display:none}
.pp-kb .row{display:flex;align-items:center;gap:7px}
.pp-kb .row .ic{font-size:.85rem}
.pp-kb .count{font-size:.72rem;font-weight:700;color:var(--g-700);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-kb .files{list-style:none;margin:7px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pp-kb .files li{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ink-700)}
.pp-kb .files li b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.pp-kb .files li i{font-style:normal;color:var(--ink-400);flex:none}

/* citation line under a retrieved answer */
/* the shared stylesheet already claims a bare .bot class for the floating
   chat widget, hence the is-bot / is-me modifiers here */
.pp-msg .cite{
  display:block;margin-top:6px;padding-top:5px;border-top:1px solid var(--line-2);
  font-size:.68rem;font-weight:700;color:var(--g-700);word-break:break-word}
.pp-msg.is-me .cite{color:#CFE9DA;border-top-color:rgba(255,255,255,.25)}
.pp-bot-log{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;
  min-height:180px;max-height:360px;overflow-y:auto;margin-bottom:10px}
.pp-msg{font-size:.8rem;line-height:1.55;padding:10px 13px;border-radius:14px;max-width:92%;
  animation:pp-rise .22s var(--ease) both}
@keyframes pp-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pp-msg{animation:none}}
.pp-msg.is-bot{background:var(--g-025);border:1px solid var(--line-2);color:var(--ink-700);
  border-bottom-left-radius:5px;align-self:flex-start;box-shadow:0 1px 2px rgba(16,48,32,.04)}
.pp-msg.is-me{background:var(--g-700);color:#fff;border-bottom-right-radius:5px;align-self:flex-end;
  box-shadow:0 2px 6px -2px rgba(20,107,58,.4)}
.pp-chips{display:flex;flex-direction:column;gap:7px;margin-bottom:11px}
.pp-chips button{
  position:relative;text-align:left;font:inherit;font-size:.78rem;color:var(--ink-700);cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 26px 9px 12px;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.pp-chips button::after{
  content:"→";position:absolute;right:11px;top:50%;transform:translateY(-50%);
  color:var(--g-500);opacity:0;transition:opacity .18s var(--ease),right .18s var(--ease)}
.pp-chips button:hover{background:var(--g-025);border-color:var(--g-400);color:var(--g-800);transform:translateX(2px)}
.pp-chips button:hover::after{opacity:1;right:9px}
.pp-bot-in{display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:12px;padding:6px 7px 6px 13px;background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.pp-bot-in:focus-within{border-color:var(--g-400);box-shadow:0 0 0 3px rgba(47,164,92,.14)}
.pp-bot-in input{flex:1;border:0;outline:0;font:inherit;font-size:.8rem;background:none;color:var(--ink-900)}
.pp-bot-in button{
  border:0;cursor:pointer;font-size:.85rem;background:none;color:var(--ink-400);padding:4px}
.pp-bot-in button.send{
  width:32px;height:32px;border-radius:9px;background:var(--g-700);color:#fff;display:grid;place-items:center}
.pp-bot-in button.send:hover{background:var(--g-800)}
.pp-bot-in button.mic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:.95rem}
.pp-bot-in button.mic:hover{background:var(--g-050);color:var(--g-700)}
.pp-bot-in button.mic.on{
  background:var(--rose);color:#fff;
  animation:pp-mic 1.15s ease-in-out infinite}
/* voice mode armed — the mic stays lit between turns */
.pp-bot-in button.mic.loop{box-shadow:0 0 0 3px rgba(47,164,92,.30)}
.pp-bot-in button.mic.loop.on{box-shadow:0 0 0 3px rgba(214,59,87,.28)}
@keyframes pp-mic{
  0%,100%{box-shadow:0 0 0 0 rgba(214,59,87,.45)}
  50%{box-shadow:0 0 0 6px rgba(214,59,87,0)}}
@media (prefers-reduced-motion:reduce){.pp-bot-in button.mic.on{animation:none}}

/* ---------- 9b. LEADERSHIP MESSAGES ---------- */
.pp-leaders{padding-top:28px}
.pp-leader-wrap{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);box-shadow:var(--sh-2);overflow:hidden;padding:0 56px 22px}
.pp-leader-viewport{overflow:hidden}
.pp-leader-track{position:relative;min-height:0;transition:min-height .4s var(--ease)}
.pp-leader-slide{
  position:absolute;inset:0;display:grid;grid-template-columns:300px 1fr;
  gap:28px;align-items:center;padding:28px 8px;
  opacity:0;pointer-events:none;transform:translateX(18px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.pp-leader-slide.is-on{opacity:1;pointer-events:auto;transform:translateX(0);position:relative}
@media (prefers-reduced-motion:reduce){.pp-leader-slide{transition:none;transform:none}}
.pp-leader-photo{
  text-align:center;flex:none}
.pp-leader-photo img{
  width:210px;height:210px;object-fit:cover;object-position:center top;border-radius:50%;
  border:4px solid #fff;box-shadow:0 8px 24px rgba(11,59,36,.18),0 1px 3px rgba(16,48,32,.12);
  display:block;margin:0 auto 14px}
.pp-leader-photo .nm{display:block;font-size:1.02rem;font-weight:900;color:var(--ink-900);line-height:1.3}
.pp-leader-photo .role{display:block;font-size:.78rem;font-weight:700;color:var(--g-700);margin-top:3px}
.pp-leader-photo .role small{display:block;font-weight:600;color:var(--ink-500);margin-top:2px}
.pp-leader-msg{position:relative;min-width:0}
.pp-leader-msg .qm{
  position:absolute;top:-6px;left:-4px;font-size:3.2rem;line-height:1;color:var(--g-050);
  font-family:serif;pointer-events:none;user-select:none}
.pp-leader-msg h4{
  font-size:1.08rem;font-weight:900;color:var(--g-800);margin:0 0 10px;
  letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.pp-leader-msg h4::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--g-500);flex:none}
/* Never split a word across lines. Automatic hyphenation broke long Hindi
   words in half with a hyphen at the line end, which reads as a typing
   mistake in a message signed by the Chief Minister. Justification goes
   with it: without hyphens it opens rivers of white space in a column
   this narrow, so the text is set ragged-right instead. */
.pp-leader-msg p{
  font-size:.92rem;line-height:1.78;color:var(--ink-700);margin:0;text-align:start;
  -webkit-hyphens:none;hyphens:none;overflow-wrap:break-word;word-break:normal}
.pp-leader-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:#fff;box-shadow:var(--sh-1);cursor:pointer;
  display:grid;place-items:center;font-size:1.25rem;color:var(--ink-500);
  transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)}
.pp-leader-nav:hover{background:var(--g-700);color:#fff;border-color:var(--g-700);transform:translateY(-50%) scale(1.06)}
.pp-leader-nav.prev{left:12px}
.pp-leader-nav.next{right:12px}
.pp-leader-wrap .pp-dots{position:absolute;left:0;right:0;bottom:10px}
.pp-leader-wrap .pp-dots button{width:8px;height:8px}
.pp-leader-wrap .pp-dots button.on{width:22px}
@media (max-width:900px){
  .pp-leader-wrap{padding:0 14px 36px}
  .pp-leader-track{min-height:auto}
  .pp-leader-slide{grid-template-columns:1fr;gap:16px;padding:22px 4px 8px;text-align:center}
  .pp-leader-photo img{width:160px;height:160px}
  .pp-leader-msg h4{justify-content:center}
  .pp-leader-msg p{font-size:.86rem;text-align:left}
  .pp-leader-nav{display:none}
}

/* ---------- 10. TESTIMONIALS ---------- */
.pp-testi{position:relative}
.pp-testi-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.pp-testi-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:14px;display:flex;gap:12px;box-shadow:var(--sh-1);min-height:148px;align-items:flex-start}
.pp-testi-card .ph{
  width:86px;height:104px;border-radius:12px;flex:none;overflow:hidden;
  background:var(--g-025);border:1px solid var(--line-2)}
.pp-testi-card .ph img{width:100%;height:100%;object-fit:cover}
.pp-testi-card b.nm{font-size:.92rem;font-weight:900;color:var(--ink-900);display:block;line-height:1.3}
.pp-testi-card .meta{font-size:.72rem;color:var(--ink-500);line-height:1.65;margin-top:4px}
.pp-testi-card .meta em{font-style:normal;color:var(--ink-700);font-weight:700}
.pp-testi-card q{
  display:block;font-size:.76rem;color:var(--ink-700);font-style:italic;line-height:1.55;margin:8px 0 8px;min-height:2.8em}
.pp-stars{font-size:.72rem;color:var(--gold);font-weight:800;display:flex;gap:5px;align-items:center;margin-top:auto}
.pp-stars span{color:var(--ink-400);font-weight:700}
.pp-testi-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);cursor:pointer;
  display:grid;place-items:center;color:var(--ink-500);font-size:.9rem;z-index:3}
.pp-testi-nav:hover{background:var(--g-700);color:#fff;border-color:var(--g-700)}
.pp-testi-nav.prev{left:-14px}
.pp-testi-nav.next{right:-14px}
.pp-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.pp-dots button{
  width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:#CFDCD3}
.pp-dots button.on{background:var(--g-600);width:18px;border-radius:4px}

/* ---------- 11. FEATURE BAND ---------- */
.pp-feature{background:var(--g-025);border-top:1px solid var(--line);margin-top:36px}
.pp-feature .in{
  max-width:var(--wrap);margin:0 auto;padding:14px 20px;
  display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:center}
.pp-feat{display:flex;align-items:center;gap:10px;min-width:0}
.pp-feat .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  font-size:1.05rem;flex:none;background:#fff;box-shadow:var(--sh-1)}
.pp-feat b{display:block;font-size:.80rem;font-weight:800;color:var(--ink-900);line-height:1.3}
.pp-feat small{display:block;font-size:.70rem;color:var(--ink-400);line-height:1.35;margin-top:1px}

/* ---------- 12. FOOTER ---------- */
.pp-foot{background:#0B3B24;color:#B9D3C4;font-size:.82rem}
.pp-foot .cols{
  max-width:var(--wrap);margin:0 auto;padding:34px 20px 26px;
  display:grid;grid-template-columns:1.5fr .8fr .9fr 1.25fr 1fr;gap:26px}
.pp-foot h5{font-size:.92rem;font-weight:800;color:#fff;margin:0 0 12px}
.pp-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pp-foot a{color:#B9D3C4}
.pp-foot a:hover{color:#fff}
.pp-foot .fbrand{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.pp-foot .fbrand img{width:48px;height:48px;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.pp-foot .fbrand .logo{font-size:1.35rem;font-weight:900;color:#fff;line-height:1.1;
  display:flex;align-items:baseline;gap:6px}
.pp-foot .fbrand small{display:block;font-size:.74rem;color:#9FC0AE;line-height:1.35;margin-top:2px}
.pp-foot p.about{line-height:1.7;max-width:40ch;color:#A7C7B6}
.pp-foot .fsocial{display:flex;gap:8px;margin-top:14px}
.pp-foot .fsocial a{
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.09);
  display:grid;place-items:center;font-size:.72rem;color:#DDECE3}
.pp-foot .fsocial a:hover{background:var(--g-600);color:#fff}
.pp-foot .contact{display:flex;flex-direction:column;gap:10px}
.pp-foot .contact li{display:flex;gap:8px;line-height:1.55;color:#A7C7B6}
.pp-foot .contact i{font-style:normal;flex:none;opacity:.85}
.pp-store{display:flex;flex-direction:column;gap:9px}
.pp-store a{
  display:flex;align-items:center;gap:9px;background:#08281A;border:1px solid rgba(255,255,255,.12);
  border-radius:9px;padding:7px 12px;color:#fff}
.pp-store a:hover{background:#0d3524}
.pp-store a b{display:block;font-size:.8rem;font-weight:800;line-height:1.2}
.pp-store a small{display:block;font-size:.62rem;color:#9FC0AE}
.pp-store .qr{
  margin-top:4px;width:86px;height:86px;background:#fff;border-radius:8px;padding:5px;align-self:flex-start}
.pp-foot .bottom{
  border-top:1px solid rgba(255,255,255,.1);
  max-width:var(--wrap);margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:.76rem;color:#9FC0AE}
.pp-foot .bottom .links{display:flex;gap:14px;flex-wrap:wrap}
.pp-foot .bottom .nic{margin-left:auto;display:flex;align-items:center;gap:8px;color:#CFE3D7}
.pp-foot .bottom .nic b{font-size:1.05rem;font-weight:900;color:#fff;letter-spacing:.04em}

/* ---------- 12b. FLOATING ASSISTANT ON THIS PAGE ----------
   The shared widget is navy; on the public portal it wears the
   department's green so it does not read as a different product. */
body.pp .bot-fab{background:var(--g-700)}
body.pp .bot-fab:hover{background:var(--g-800)}
body.pp .bot-head{background:var(--g-800)}
body.pp .msg.is-me{background:var(--g-700)}
body.pp .bot-lang button.on{background:var(--g-700);border-color:var(--g-700);color:#fff}
body.pp .chips button:hover{border-color:var(--g-400);background:var(--g-025);color:var(--g-800)}
body.pp .bot-in button{background:var(--g-700)}
body.pp .bot-in button.mic{background:var(--teal)}
body.pp .bot-in button.mic.on{background:var(--rose)}
body.pp .msg .say{color:var(--g-700)}

/* ---------- 13. PROTOTYPE SCREEN SWITCHER (floating) ---------- */
.pp-proto-toggle{
  position:fixed;left:14px;bottom:14px;z-index:80;cursor:pointer;
  background:#0E2B3D;color:#DCE9E4;border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:8px 14px;font:inherit;font-size:.76rem;font-weight:700;
  box-shadow:var(--sh-3)}
.pp-proto-toggle:hover{background:var(--g-700);color:#fff}
body.pp .screen-nav{display:none}
body.pp.proto-open .screen-nav{
  display:flex;position:fixed;left:14px;bottom:56px;z-index:79;max-width:min(560px,92vw);
  flex-wrap:wrap;border-radius:var(--r);box-shadow:var(--sh-3)}

/* the portal's own body copy follows the same rule as the rest of the
   prototype: whole words only, no automatic hyphenation */
.pp-sec p,.pp-lede,.pp-card p,.pp-scheme p,.pp-testi-card .q,.pp-leader-msg p{
  -webkit-hyphens:none;hyphens:none;word-break:normal;overflow-wrap:break-word}

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width:1180px){
  .pp-stats{grid-template-columns:repeat(3,1fr)}
  .pp-stat{border-bottom:1px solid var(--line-2)}
  .pp-stat:nth-child(3n){border-right:0}
  .pp-svc{grid-template-columns:repeat(4,1fr)}
  .pp-steps{grid-template-columns:repeat(4,1fr);row-gap:20px}
  .pp-step::after,.pp-step .arrow{display:none}
  .pp-datarow{grid-template-columns:1fr 1fr}
  .pp-datarow > :last-child{grid-column:1/-1}
  .pp-lower{grid-template-columns:1fr}
  .pp-schemes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pp-feature .in{grid-template-columns:repeat(3,1fr)}
  .pp-foot .cols{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:900px){
  .pp-mast .in{grid-template-columns:1fr;justify-items:center;text-align:center;gap:14px;padding:12px 16px}
  .pp-mast-right{flex-direction:column-reverse;gap:12px}   /* emblem above the buttons */
  .pp-controls{flex-wrap:wrap;justify-content:center}
  .pp-dept img{width:56px;height:56px}
  .pp-emblem img{width:62px;height:62px}
  .pp-emblem b{font-size:1.04rem}
  .pp-actions{grid-template-columns:repeat(2,1fr)}
  .pp-actions-wrap{padding-top:16px}
  .pp-hero-nav{display:none}
  .pp-hero-dots{bottom:8px}
  .pp-hero-copy{max-width:100%;min-height:0}
  .pp-hero{aspect-ratio:auto;min-height:0}
  .pp-hero .in{padding:34px 14px 40px}
  /* the frame's proportions cannot survive a phone screen — the band takes
     its height from the copy again and the artwork is shown whole */
  .pp-hero .slide.fit img{object-fit:contain;object-position:center}
  /* narrow screens crop to the bright half of the banner — darken it evenly
     so the headline keeps its contrast */
  .pp-hero .veil{background:linear-gradient(180deg,
    rgba(7,48,28,.90) 0%,rgba(9,58,34,.70) 50%,rgba(7,48,28,.88) 100%)}
  .pp-testi-track{grid-template-columns:1fr}
  .pp-topbar .in{flex-direction:column;align-items:flex-start;gap:8px}
  .pp-topbar .links{flex-wrap:wrap;gap:10px 14px}
  .pp-notice{width:100%}
}
@media (max-width:640px){
  .pp-datarow{grid-template-columns:minmax(0,1fr)}
  .pp-social a{width:28px;height:28px;font-size:.78rem}
  .pp-topbar .links{gap:9px 12px}
  .pp-btn{padding:10px 14px}
  .pp-sec{padding:26px 14px 0}
  .pp-stats-wrap{padding:0 14px}
  .pp-hero .in{padding:30px 14px 36px}
  .pp-testi-nav{width:34px;height:34px}
  /* comfortable thumb targets without changing how anything looks:
     the padding is transparent, the visible dot stays 7px */
  .pp-lang button{padding:7px 9px}
  .pp-msg .say{padding:7px 8px;font-size:.8rem}
  .pp-dots{gap:0}
  .pp-dots button{padding:9px;background-clip:content-box;box-sizing:content-box}
  .pp-stats{grid-template-columns:repeat(2,1fr)}
  .pp-stat:nth-child(3n){border-right:1px solid var(--line-2)}
  .pp-stat:nth-child(2n){border-right:0}
  .pp-svc{grid-template-columns:repeat(2,1fr)}
  .pp-steps{grid-template-columns:repeat(2,1fr)}
  .pp-datarow{grid-template-columns:1fr}
  .pp-datarow > :last-child{grid-column:auto}
  .pp-schemes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-feature .in{grid-template-columns:1fr}
  .pp-foot .cols{grid-template-columns:1fr}
  .pp-actions{grid-template-columns:1fr}
}

/* ---------- 14b. REVEAL & POLISH ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}.reveal-delay-2{transition-delay:.16s}.reveal-delay-3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* quick-actions stagger + accent */
.pp-actions .pp-act.reveal:nth-child(2){transition-delay:.08s}
.pp-actions .pp-act.reveal:nth-child(3){transition-delay:.16s}
.pp-actions .pp-act.reveal:nth-child(4){transition-delay:.24s}
.pp-act::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:var(--r-l) var(--r-l) 0 0;
  background:linear-gradient(90deg,var(--g-500),var(--g-600));opacity:0;transition:opacity .2s var(--ease)}
.pp-act:hover::after{opacity:1}
.pp-act:hover .ic{transform:scale(1.06) rotate(-2deg)}
.pp-act .ic{transition:transform .22s var(--ease)}
/* stats hover */
.pp-stat{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.pp-stat:hover{transform:translateY(-2px);box-shadow:var(--sh-1);background:#fff}
.pp-stat .ic{transition:transform .25s var(--ease)}
.pp-stat:hover .ic{transform:scale(1.08)}
/* services */
.pp-svc a.reveal{opacity:0;transform:translateY(12px)}
.pp-svc a.reveal.in{opacity:1;transform:none}
.pp-svc a{overflow:hidden;position:relative}
.pp-svc a::before{content:"";position:absolute;inset:0;background:radial-gradient(400px 120px at 50% -20%,rgba(47,164,92,.08),transparent 70%);opacity:0;transition:opacity .25s var(--ease)}
.pp-svc a:hover::before{opacity:1}
.pp-svc a:hover .ic{transform:translateY(-2px) scale(1.05)}
.pp-svc .ic{transition:transform .22s var(--ease)}
/* process rail */
.pp-step{transition:transform .2s var(--ease)}
.pp-step:hover{transform:translateY(-3px)}
.pp-step:hover .ic{box-shadow:0 4px 14px rgba(20,107,58,.14)}
.pp-step .ic{transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
/* schemes */
.pp-scheme .ph img{transition:transform .6s var(--ease)}
.pp-scheme:hover .ph img{transform:scale(1.06)}
.pp-scheme:hover{border-color:var(--g-400)}
/* datarow cards entrance */
.pp-datarow .pp-card.reveal:nth-child(2){transition-delay:.08s}
.pp-datarow .pp-card.reveal:nth-child(3){transition-delay:.16s}
.pp-donut-svg circle[stroke="#1B8B4A"]{transition:stroke-dasharray 1.2s var(--ease)}
/* focus visible */
.pp-btn:focus-visible,.pp-hero-nav:focus-visible,.pp-leader-nav:focus-visible,
.pp-testi-nav:focus-visible,.pp-lang button:focus-visible{
  outline:2px solid var(--g-600);outline-offset:2px}
.pp-act:focus-visible,.pp-svc a:focus-visible{outline:2px solid var(--g-600);outline-offset:2px}
/* sticky masthead shadow when scrolled */
.pp-mast.is-stuck{box-shadow:0 2px 18px rgba(11,59,36,.08);border-bottom-color:rgba(228,234,229,.9)}
/* leader card subtle lift */
.pp-leader-wrap{transition:box-shadow .25s var(--ease)}
.pp-leader-wrap:hover{box-shadow:var(--sh-3)}

/* Dark-mode / high-contrast users keep the shared system's promise */
html[data-theme="dark"] body.pp{--page:#0B1220;--card:#111B2C;--line:#243349;--line-2:#1D2A3E;
  --ink-900:#E8EEF7;--ink-700:#A9B8CC;--ink-500:#8C9DB5;--ink-400:#6C7C93;
  --g-025:#12251C;--g-050:#13301F}
html[data-theme="dark"] body.pp .pp-mast{background:#111B2C}
html[data-theme="dark"] body.pp .pp-act{background:#111B2C;border-color:#243349}
html[data-theme="dark"] body.pp .pp-act b{color:#E8EEF7}