/* ---------- PRODUCTS PAGE ---------- */

:root { --clay-deep: #B8562E; }  /* darkened --clay, for white text on small type */

.menu a.here { color: var(--ink); font-weight: 500; }

/* ---------- HERO PANEL ---------- */
.prod-hero-wrap { padding: 26px 0 0; }
.prod-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0E2A24 0%, #10403B 100%);
  border-radius: 32px; color: var(--paper); padding: 68px 64px 60px;
}
.prod-hero .stack-deco { position: absolute; bottom: 40px; right: 52px; opacity: 0.14; }
.prod-hero .eyebrow { color: rgba(244,239,228,0.6); }
.prod-hero h1 {
  font-weight: 500; font-size: 50px; line-height: 1.06; letter-spacing: -0.045em;
  margin: 0; max-width: 860px; text-wrap: balance;
}
.prod-hero h1 .hl {
  background: var(--signal); color: var(--deep); border-radius: 10px; padding: 0 12px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.prod-hero p.lead {
  font-size: 19px; font-weight: 400; line-height: 1.6;
  color: rgba(244,239,228,0.78); margin: 22px 0 0; max-width: 680px; text-wrap: pretty;
}

/* the two halves, equal weight */
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; position: relative; z-index: 1; }
.half {
  background: rgba(244,239,228,0.07); border: 1px solid rgba(244,239,228,0.16);
  border-radius: 22px; padding: 30px 28px; display: flex; flex-direction: column;
}
.half .hk { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-dark-muted); }
.half h2 {
  font-weight: 500; font-size: 30px; letter-spacing: -0.035em; line-height: 1.12;
  margin: 12px 0 0; color: var(--paper);
}
.half > p { font-size: 15px; font-weight: 400; line-height: 1.55; color: rgba(244,239,228,0.74); margin: 12px 0 20px; }
.half .hlist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.half .hlist a, .half .hlist span {
  font-size: 13px; border-radius: 999px; padding: 7px 14px;
  border: 1px solid rgba(244,239,228,0.24); color: rgba(244,239,228,0.86);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.half .hlist a:hover { background: var(--signal); color: var(--deep); border-color: transparent; }
.half .hgo { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--signal); }
.half .hgo svg { width: 15px; height: 15px; }
.half.practice { background: rgba(200,240,143,0.09); border-color: rgba(200,240,143,0.26); }

/* ---------- WAYFINDING ROUTER ---------- */
.router { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 46px; }
.rt {
  background: #fff; border: 1px solid rgba(16,64,59,0.14); border-radius: 20px;
  padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.rt:hover { border-color: rgba(16,64,59,0.3); box-shadow: 0 14px 30px rgba(14,42,36,0.07); }
.rt .q { font-size: 19px; font-weight: 400; letter-spacing: -0.025em; color: var(--ink); line-height: 1.3; }
.rt .a { font-size: 14.5px; font-weight: 400; line-height: 1.55; color: rgba(16,64,59,0.72); }
.rt .a b { font-weight: 500; color: var(--ink); }
.rt .go2 { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: var(--ink); }
.rt .go2 svg { width: 14px; height: 14px; }

/* ---------- KO CORE ---------- */
.core {
  background: linear-gradient(150deg, #0E2A24 0%, #10403B 100%);
  border-radius: 28px; color: var(--paper); padding: 52px 48px; margin-top: 48px;
  display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 48px; align-items: start;
}
.core .eyebrow { color: rgba(244,239,228,0.6); }
/* The suite's five products, on the site's own chip component. Pills rather
   than a middot-separated line: the row wraps on a phone, and a separator
   between inline links either opens the second line with a stray divider or
   strands one at the end of the first. A pill has no such seam.

   Each pill carries the sector above the name — a coined name on its own is
   not a thing anyone can recognise on first read. */
/* A grid, not the chips row's flex wrap. Five pills never fit one line in this
   column — they want 627px of 517 — so they always break, and under flex the
   break landed on 3+2 or 4+1 depending on a pixel of padding, leaving EduKo
   orphaned at some widths. Three columns makes the two rows deliberate and
   lines the pills up with each other. */
.suite-names { margin-top: 14px; display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.suite-names .chip {
  display: flex; flex-direction: column; gap: 3px;
  /* 14px, not the chip's own 999px: a pill reads as round because its content
     is one short line, and two lines in a full round turns it into a lozenge.
     This matches the core cards sitting beside it on the same panel. */
  border-radius: 14px; padding: 9px 15px; line-height: 1.25;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--signal); border-color: rgba(244,239,228,0.2);
}
.suite-names .chip span {
  font-size: 11.5px; font-weight: 400; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(244,239,228,0.55);
}
/* .chip:hover flips the pill to signal-on-deep, so the sector line has to
   come with it or it stays pale cream on lime. */
.suite-names .chip:hover, .suite-names .chip:hover span { color: var(--deep); }
/* the pills now sit above it, so the headline takes its gap from them */
.core .suite-names + :is(h1, h2) { margin-top: 20px; }
.core :is(h1, h2) { font-weight: 500; font-size: 34px; letter-spacing: -0.035em; line-height: 1.14; margin: 14px 0 0; color: var(--paper); text-wrap: balance; }
.core p { font-size: 16.5px; font-weight: 400; line-height: 1.6; color: rgba(244,239,228,0.78); margin: 16px 0 0; }
.core-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.core-item { background: rgba(244,239,228,0.07); border: 1px solid rgba(244,239,228,0.13); border-radius: 16px; padding: 18px 20px; }
.core-item .cn { font-size: 15.5px; font-weight: 500; letter-spacing: -0.015em; color: var(--signal); }
.core-item .cd { font-size: 13px; font-weight: 400; line-height: 1.45; color: rgba(244,239,228,0.72); margin-top: 5px; }

/* ---------- ONE PRODUCT ---------- */
/* keep anchor targets clear of the sticky nav */
#platforms, #practice, #work, #core, #industries,
#eduko, #ecoko, #wacoko, #serbisko, #islako, #regulatory { scroll-margin-top: 78px; }

.prod { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 48px; align-items: center; }
.prod.flip { grid-template-columns: 0.94fr 1.06fr; }
.prod.flip .pv { order: 2; }

.pv {
  position: relative;
  background: linear-gradient(160deg, #14463C 0%, #10403B 100%);
  border: 1px solid rgba(244,239,228,0.08);
  border-radius: 26px; padding: 40px 28px; min-height: 540px;
  display: flex; align-items: center; justify-content: center;
}
/* ---------- FLOATING CALLOUTS AROUND THE MOCKUPS ---------- */
.co {
  position: absolute; z-index: 5; max-width: 252px;
  border-radius: 16px; padding: 13px 18px;
  box-shadow: 0 18px 40px rgba(14,42,36,0.3);
}
.co .ck2 {
  display: flex; align-items: center; gap: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 5px; white-space: nowrap;
}
.co .ck2::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.co .cv { font-size: 19px; font-weight: 500; letter-spacing: -0.032em; line-height: 1.15; }
.co .cv em { font-style: normal; font-weight: 400; opacity: 0.7; }

.co.gold { background: var(--midday); }
.co.gold .ck2 { color: rgba(58,44,5,0.7); }
.co.gold .ck2::before { background: #3A2C05; }
.co.gold .cv { color: #241B02; }

.co.dark { background: var(--deep); }
.co.dark .ck2 { color: var(--on-dark-secondary); }
.co.dark .ck2::before { background: var(--midday); }
.co.dark .cv { color: var(--paper); }

.co.plain {
  background: var(--daylight); border-radius: 18px;
  padding: 10px 20px 10px 10px; display: flex; align-items: center; gap: 13px;
}
.co.plain .ic3 {
  flex: none; width: 34px; height: 34px; border-radius: 11px;
  background: #ECF3E1; display: flex; align-items: center; justify-content: center;
}
.co.plain .cv { font-size: 18px; color: var(--ink); }

/* placement — hangs slightly past the panel edge, as in the reference shots */
.co.p1 { top: 16px; left: -16px; }
/* p2 sat at 52% and landed squarely on the busiest part of the screen —
   SerbisKo's emergency banner, IslaKo's listings. It is 252px wide over
   a 212px phone, so it cannot hang clear sideways either: there are only
   35px of room to its right. It drops to the foot of the stack instead,
   where it overlaps the tab bar and hangs below rather than sitting on
   the content. */
.co.p2 { top: 86%; right: -28px; }
.co.p3 { bottom: 20px; left: -4px; }
.pv .console { width: 264px; flex: none; }
.pv .phone { width: 212px; flex: none; margin-left: -40px; position: relative; z-index: 2; }
/* the phone sits over the console's right edge — keep right-aligned values clear of it */
.pv:not(.solo) .console .cbar { padding-right: 50px; }
.pv:not(.solo) .console .cbody { padding-right: 50px; }
.pv.solo .console { width: 372px; }
.pv .cbtn {
  margin-top: 10px; background: var(--ink); color: var(--daylight);
  border-radius: 10px; padding: 11px; text-align: center; font-size: 13px; font-weight: 500;
}
.pv .ctags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pv .ctags i {
  font-style: normal; font-size: 11px; border-radius: 999px; padding: 4px 10px;
  background: #ECF3E1; color: rgba(16,64,59,0.75);
}
.pv .csec { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(16,64,59,0.4); margin-top: 4px; }

.pnum { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pnum .pn { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.prod :is(h1, h2) {
  font-weight: 500; font-size: 54px; line-height: 1.04; letter-spacing: -0.042em;
  margin: 14px 0 0; color: var(--ink);
}
.prod .plab { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); margin-top: 12px; }
.prod .promise {
  font-size: 20px; font-weight: 400; line-height: 1.45; letter-spacing: -0.02em;
  color: var(--ink); margin: 16px 0 0; text-wrap: pretty;
}
.prod .pdesc {
  font-size: 16.5px; font-weight: 400; line-height: 1.6;
  color: rgba(16,64,59,0.75); margin: 14px 0 0; text-wrap: pretty;
}

/* the problem — sourced facts */
.facts { display: grid; gap: 10px; margin: 26px 0 0; }
.fact { display: flex; gap: 13px; align-items: flex-start; }
.fact .fn {
  flex: none; font-size: 19px; font-weight: 500; letter-spacing: -0.03em;
  color: var(--ink); background: var(--signal); border-radius: 9px;
  padding: 5px 10px; min-width: 62px; text-align: center;
}
.fact .ft { font-size: 14px; font-weight: 400; line-height: 1.45; color: rgba(16,64,59,0.75); padding-top: 5px; }
.fact .ft cite { font-style: normal; color: var(--text-muted); font-size: 12.5px; }

/* surfaces strip */
.surfaces { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 26px 0 0; }
.surface { background: #ECF3E1; border-radius: 13px; padding: 13px 16px; }
.surface .sn { font-size: 14.5px; letter-spacing: -0.015em; color: var(--ink); }
.surface .sd { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--text-secondary); margin-top: 3px; }

.caps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; margin: 26px 0 0; }
.cap { display: flex; gap: 11px; font-size: 14.5px; font-weight: 400; line-height: 1.45; color: rgba(16,64,59,0.78); }
.cap .ck {
  flex: none; width: 21px; height: 21px; border-radius: 7px; background: var(--signal);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}

.pmeta {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 28px;
  border-top: 1px solid rgba(16,64,59,0.12); padding-top: 22px;
}
.pmeta .row { font-size: 14px; font-weight: 400; line-height: 1.42; color: rgba(16,64,59,0.85); }
.pmeta .row span {
  display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 5px;
}

.pnext { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pnext .proof { font-size: 13.5px; font-weight: 400; color: var(--text-secondary); }
.pnext .proof a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- PRACTICE ---------- */
.prac-band { background: var(--deep); color: var(--paper); }
.prac-band .eyebrow { color: rgba(244,239,228,0.6); }
.prac-band .sec-head :is(h1, h2) { color: var(--paper); }
.prac-band .sec-head p { color: rgba(244,239,228,0.74); }
.prac-band .prod :is(h1, h2) { color: var(--paper); }
.prac-band .prod .plab { color: var(--on-dark-muted); }
.prac-band .prod .promise { color: var(--paper); }
.prac-band .prod .pdesc { color: rgba(244,239,228,0.75); }
.prac-band .pnum .pn { color: var(--on-dark-muted); }
.prac-band .cap { color: rgba(244,239,228,0.8); }
.prac-band .pmeta { border-top-color: rgba(244,239,228,0.16); }
.prac-band .pmeta .row { color: rgba(244,239,228,0.85); }
.prac-band .pmeta .row span { color: var(--on-dark-muted); }
.prac-band .pv { background: rgba(244,239,228,0.05); border-color: rgba(244,239,228,0.13); }

.prac-caps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 44px; }
.pcap {
  background: rgba(244,239,228,0.06); border: 1px solid rgba(244,239,228,0.14);
  border-radius: 18px; padding: 26px 24px;
}
/* no tile: a lime rounded square behind each icon, five in a row, reads as
   decoration rather than as an icon set. The icon does the work; on the
   deep field it takes the signal colour directly. */
.pcap .pi {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.pcap .pi svg { width: 24px; height: 24px; stroke: var(--signal); }
.pcap h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.025em; margin: 0 0 9px; color: var(--paper); line-height: 1.25; }
.pcap p { font-size: 14px; font-weight: 400; line-height: 1.5; color: rgba(244,239,228,0.72); margin: 0; }

.emerging {
  margin-top: 26px; border: 1px dashed rgba(244,239,228,0.3); border-radius: 18px;
  padding: 24px 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.emerging .et { font-size: 16px; font-weight: 400; letter-spacing: -0.02em; color: var(--paper); }
.emerging .ed { font-size: 14px; font-weight: 400; color: rgba(244,239,228,0.7); line-height: 1.5; flex: 1 1 320px; }

/* ---------- DEPLOYMENTS (WORK) ---------- */
.deploys { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 44px; }
.deploy {
  background: #fff; border: 1px solid rgba(16,64,59,0.14); border-radius: 22px; padding: 30px 28px;
}
.deploy .dk { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); }
.deploy .dk b { font-weight: 500; color: var(--ink); letter-spacing: -0.01em; text-transform: none; font-size: 13.5px; }
.deploy h3 { font-size: 26px; font-weight: 500; letter-spacing: -0.035em; margin: 14px 0 0; color: var(--ink); }
.deploy p { font-size: 14.5px; font-weight: 400; line-height: 1.55; color: rgba(16,64,59,0.72); margin: 12px 0 0; }
.deploy .dstats { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 22px; }
.deploy .dstat .n { font-size: 26px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.deploy .dstat .l { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; line-height: 1.3; }

/* ---------- CTA ---------- */
.cta-panel { text-align: center; }
.cta-panel .eyebrow { justify-content: center; }
.cta-panel h2 {
  font-weight: 500; font-size: 44px; line-height: 1.12; letter-spacing: -0.04em;
  margin: 18px 0 0; color: var(--paper); text-wrap: balance;
}
.cta-panel p {
  font-size: 18px; font-weight: 400; line-height: 1.6;
  color: rgba(244,239,228,0.78); margin: 20px auto 32px; max-width: 600px; text-wrap: pretty;
}
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ================================================================
   DEVICE MOCKUP EXTENSIONS
   builds on .phone / .phscreen / .console in site.css
   ================================================================ */

/* Real device proportions. Without this the screens grow to fit their
   content and read as unnaturally long slabs rather than phones. */
.pv .phscreen, .pv .pscreen {
  aspect-ratio: 9 / 19.5;
  display: flex; flex-direction: column;
  padding-bottom: 42px;              /* reserved for the pinned tab bar */
}
/* the tab bar is device chrome: always visible, whatever the content length */
.pv .phscreen > .ph-nav, .pv .pscreen > .ph-nav {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; margin-top: 0;
}
/* content longer than one screen crops under a fade, as a real screen would */
.pv .phscreen::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 42px; height: 24px;
  background: linear-gradient(to top, #fff 20%, rgba(255,255,255,0));
  z-index: 2; pointer-events: none;
}

/* compact spacing so the content sits inside those proportions
   (scoped to .pv, so the home page's mockups are untouched) */
.pv .phscreen .ph-status { padding: 7px 14px 4px; }
.pv .phscreen .ph-top { padding: 8px 13px; }
.pv .phscreen .ph-greet { padding: 9px 12px 5px; }
.pv .phscreen .ph-card { margin: 3px 11px; padding: 11px; }
.pv .phscreen .ph-card .amt { font-size: 25px; }
.pv .phscreen .ph-card .due { margin-top: 4px; }
.pv .phscreen .ph-status-pill { margin-top: 6px; }
.pv .phscreen .ph-actrow { margin-top: 8px; }
.pv .phscreen .ph-qa { padding: 8px 11px 2px; }
.pv .phscreen .ph-qa .qk { margin-bottom: 5px; }
.pv .phscreen .ph-qt { padding: 7px 4px; }
.pv .phscreen .ph-qt .qi { width: 24px; height: 24px; margin-bottom: 4px; }
.pv .phscreen .ph-nav span { padding: 6px 0 8px; }

/* language segmented toggle */
.ph-lang { display: inline-flex; background: rgba(255,255,255,0.16); border-radius: 999px; padding: 2px; gap: 2px; }
.ph-lang span { font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.72); padding: 3px 7px; border-radius: 999px; }
.ph-lang span.on { background: #fff; color: var(--ink); }

/* dark app header with place + greeting (SerbisKo) */
.ph-gov { background: var(--ink); color: #fff; padding: 10px 13px 13px; }
.ph-gov .place { display: flex; align-items: center; gap: 5px; font-size: 9px; color: rgba(255,255,255,0.8); }
.ph-gov .hi { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.ph-gov .hi .g { font-size: 14px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }

/* quick action circles */
.ph-quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin: -14px 12px 0; background: #fff; border-radius: 13px; padding: 12px 8px; box-shadow: 0 6px 16px rgba(14,42,36,0.1); position: relative; z-index: 2; }
.ph-quick .qq { text-align: center; font-size: 8.5px; line-height: 1.2; color: rgba(16,64,59,0.78); }
.ph-quick .qq i { display: flex; width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 5px; align-items: center; justify-content: center; }
.ph-offline { text-align: center; font-size: 8.5px; color: #2F9E5F; font-weight: 600; margin-top: 8px; }

/* resident ID card with QR */
.ph-id { margin: 9px 12px 0; background: var(--ink); border-radius: 13px; padding: 12px; color: #fff; display: flex; gap: 10px; }
.ph-id .idk { font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.ph-id .idn { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 3px; }
.ph-id .idr { font-size: 8.5px; color: rgba(255,255,255,0.72); margin-top: 3px; }
.ph-id .qr { flex: none; width: 42px; height: 42px; border-radius: 7px; background: #fff; padding: 3px; align-self: flex-start; }
.ph-id .qr svg { display: block; width: 100%; height: 100%; }
.ph-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.ph-badges b { font-size: 7px; font-weight: 600; border-radius: 999px; padding: 3px 6px; white-space: nowrap; }
.ph-badges b.v { background: var(--signal); color: var(--ink); }
.ph-badges b.s { background: var(--midday); color: #4A3A08; }
.ph-badges b.f { background: var(--air); color: var(--deep2); }

/* emergency strip */
.ph-emg { margin: 8px 12px 0; background: var(--clay-deep); border-radius: 12px; padding: 11px 12px; color: #fff; display: flex; align-items: center; gap: 9px; }
.ph-emg .en { font-size: 12.5px; font-weight: 700; letter-spacing: -0.01em; }
.ph-emg .ed { font-size: 8px; color: rgba(255,255,255,0.8); line-height: 1.3; margin-top: 2px; }

/* generic section label + list rows inside a phone */
.ph-lbl { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px 6px; }
.ph-lbl .lk { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.ph-lbl .lm { font-size: 8.5px; font-weight: 600; color: #2F9E5F; }
.ph-rows { padding: 0 12px; display: flex; flex-direction: column; gap: 6px; }
.ph-row2 { background: #F3F5F3; border: 1px solid rgba(16,64,59,0.06); border-radius: 11px; padding: 10px 11px; display: flex; gap: 9px; align-items: flex-start; }
.ph-row2 .ri { flex: none; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.ph-row2 .rt2 { font-size: 10px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.ph-row2 .rs { font-size: 8.5px; font-weight: 400; color: var(--text-secondary); line-height: 1.35; margin-top: 2px; }
.ph-row2 .rb { flex: none; font-size: 7px; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; padding: 3px 6px; margin-left: auto; }
.ph-row2 .rb.ai { background: #E7F0F3; color: #2A5F73; }
.ph-row2 .rb.q { background: #FBEFC9; color: #8a6d1f; }
.ph-row2 .rb.pr { background: #ECF3E1; color: #2F6B45; }

/* schedule chips (eduKo) */
.ph-sched { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 10px 12px 0; }
.ph-cl { border-radius: 11px; padding: 9px 8px; color: #fff; }
.ph-cl .ct { font-size: 7px; font-weight: 700; letter-spacing: 0.05em; opacity: 0.85; }
.ph-cl .cs { font-size: 11.5px; font-weight: 700; letter-spacing: -0.02em; margin-top: 3px; }
.ph-cl .cb { font-size: 7.5px; opacity: 0.85; margin-top: 2px; line-height: 1.25; }
.ph-cl.c1 { background: var(--ink); }
.ph-cl.c2 { background: var(--clay-deep); }
.ph-cl.c3 { background: var(--midday); color: var(--deep); }

/* insight callout (eduKo) */
.ph-ins { margin: 9px 12px 0; background: #ECF3E1; border-radius: 12px; padding: 11px 12px; }
.ph-ins .it { font-size: 10.5px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.ph-ins .id2 { font-size: 8.5px; font-weight: 400; color: var(--text-secondary); line-height: 1.4; margin-top: 4px; }
.ph-ins .ia { display: flex; gap: 5px; margin-top: 8px; }
.ph-ins .ia span { font-size: 8px; font-weight: 600; border-radius: 8px; padding: 5px 9px; }
.ph-ins .ia span.p { background: var(--ink); color: #fff; }
.ph-ins .ia span.o { border: 1px solid rgba(16,64,59,0.22); color: rgba(16,64,59,0.75); }

/* travel hero (IslaKo) */
.ph-trav { background: linear-gradient(165deg, #14463C 0%, #0E2A24 100%); padding: 11px 13px 15px; color: #fff; }
.ph-trav .tb { display: flex; align-items: center; justify-content: space-between; }
.ph-trav .wm { font-size: 14px; font-weight: 500; letter-spacing: -0.03em; }
.ph-trav .wm b { font-weight: 500; color: var(--signal); }
.ph-trav .si { font-size: 7.5px; font-weight: 600; background: rgba(255,255,255,0.18); border-radius: 999px; padding: 4px 9px; }
.ph-trav .tk { font-size: 7px; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-top: 16px; }
.ph-trav .th { font-size: 17px; font-weight: 500; letter-spacing: -0.035em; line-height: 1.12; margin-top: 4px; }
.ph-trav .tp { font-size: 8.5px; font-weight: 400; color: rgba(255,255,255,0.82); line-height: 1.4; margin-top: 6px; }
.ph-ferry { margin: 8px 12px 0; background: #E7F0F3; border-radius: 11px; padding: 9px 11px; font-size: 8px; font-weight: 400; line-height: 1.4; color: rgba(16,64,59,0.78); display: flex; gap: 8px; }
.ph-ferry b { font-weight: 600; }
.ph-exp { padding: 0 12px; display: flex; flex-direction: column; gap: 5px; }
.ph-e { display: flex; align-items: center; gap: 9px; background: #F3F5F3; border-radius: 10px; padding: 8px 10px; }
.ph-e .eth { flex: none; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(150deg, var(--air), var(--ink)); }
.ph-e .en2 { font-size: 9.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.ph-e .el { font-size: 8px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; }
.ph-e .ep { margin-left: auto; font-size: 9.5px; font-weight: 700; color: var(--ink); }
.ph-guide { margin: 9px 12px 0; background: #fff; border: 1px solid rgba(16,64,59,0.12); border-radius: 11px; padding: 10px; display: flex; gap: 9px; align-items: center; }
.ph-guide .av2 { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--signal); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.ph-guide .gn { font-size: 10px; font-weight: 600; color: var(--ink); }
.ph-guide .gm { font-size: 8px; font-weight: 400; color: var(--text-secondary); margin-top: 2px; }
.ph-guide .gr { margin-left: auto; text-align: right; }
.ph-guide .gr .st { font-size: 9px; font-weight: 700; color: #8A6D1F; }
.ph-guide .gr .pr { font-size: 8px; color: var(--text-secondary); margin-top: 2px; }

/* console extras */
.console .cwarn { font-size: 11px; color: var(--clay-deep); font-weight: 500; }
.console .cok { font-size: 11px; color: #2F9E5F; font-weight: 500; }
.console .csplit { border-top: 1px solid rgba(16,64,59,0.1); margin-top: 3px; padding-top: 9px; }
.console .ctiles { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.console .ctile { background: #ECF3E1; border-radius: 9px; padding: 9px 10px; }
.console .ctile.b { background: #E7F0F3; }
.console .ctile .tn { font-size: 16px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.console .ctile .tl { font-size: 9px; font-weight: 400; color: var(--text-secondary); margin-top: 4px; line-height: 1.25; }

/* label/value pairs inside phone screens are nested <span>s — stack them */
.ph-id .idk, .ph-id .idn, .ph-id .idr, .ph-id .ph-badges,
.ph-emg .en, .ph-emg .ed,
.ph-row2 .rt2, .ph-row2 .rs,
.ph-e .en2, .ph-e .el,
.ph-guide .gn, .ph-guide .gm, .ph-guide .gr .st, .ph-guide .gr .pr { display: block; }
.ph-row2 > span:not([class]), .ph-e > span:not([class]), .ph-guide > span:not([class]),
.ph-emg > span:not([class]), .ph-id > span:not([class]) { min-width: 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .prac-caps { grid-template-columns: 1fr; }
  .core { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; }
}
@media (max-width: 900px) {
  .prod-hero { padding: 40px 24px; border-radius: 24px; }
  .prod-hero h1 { font-size: 34px; }
  .prod-hero p.lead { font-size: 17px; }
  .prod-hero .stack-deco { display: none; }
  .halves, .router, .deploys, .surfaces { grid-template-columns: 1fr; }
  /* The first section keeps the full 84px of section padding under the
     nav, which on a phone is most of a screen of nothing before the
     product's name. Halved here; the sections that follow keep theirs,
     since those are separating content rather than clearing the bar. */
  main > section:first-child,
  /* the EcoKo page wraps its sections in .ko-page, so it is not a direct
     child of main and the rule above misses it */
  main > .ko-page > section:first-child { padding-top: 34px; }

  /* Stacked, only the product's name should come before its visuals —
     the sector line, the promise and the description belong after.
     The name and that body copy share one wrapper div, so ordering the
     two grid children cannot split them: the wrapper is dissolved with
     display:contents and its children are ordered individually.
     row-gap goes to 0 because the block already spaces itself with
     margins, and a 32px grid gap between every line would undo that;
     the visual carries its own margins instead. */
  .prod, .prod.flip { grid-template-columns: 1fr; row-gap: 0; column-gap: 0; }
  .prod > div:not(.pv) { display: contents; }
  .prod > div:not(.pv) > * { order: 4; }
  /* matched through the same path as the catch-all above: `.prod .pnum`
     loses to `.prod > div:not(.pv) > *` on specificity, which put the
     heading back down with the body copy. */
  .prod > div:not(.pv) > .pnum { order: 1; }
  .prod > div:not(.pv) > :is(h1, h2) { order: 2; }
  .prod .pv, .prod.flip .pv { order: 3; margin: 26px 0 30px; }
  .pv { min-height: 0; flex-direction: column; gap: 20px; padding: 24px; }
  .pv .console, .pv.solo .console { width: 100%; max-width: 340px; }
  /* Stacked, the phone leads: it is the member-facing half and the one
     that reads at a glance. The console is the back office behind it. */
  .pv .phone { margin-left: 0; width: 208px; order: -1; }
  /* no overlap once stacked, so drop the clearance padding */
  .pv:not(.solo) .console .cbar { padding-right: 14px; }
  .pv:not(.solo) .console .cbody { padding-right: 16px; }
  /* callouts drop out of overlay position and stack under the screens */
  .co, .co.p1, .co.p2, .co.p3 {
    position: static; inset: auto; order: 2; max-width: 340px; width: 100%;
    box-shadow: 0 8px 20px rgba(14,42,36,0.16);
  }
  .co + .co { margin-top: -8px; }
  .prod :is(h1, h2) { font-size: 40px; }
  .prod .promise { font-size: 18px; }
  .suite-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps, .pmeta, .core-grid { grid-template-columns: 1fr; }
  .cta-panel h2 { font-size: 30px; }
  .core :is(h1, h2) { font-size: 28px; }
  .deploy .dstats { grid-template-columns: 1fr 1fr; }
}

/* ---------- INDUSTRY CLASSIFICATION ---------- */
.inds { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 46px; }
.ind {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid rgba(16,64,59,0.14); border-radius: 20px;
  padding: 26px 24px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.ind:hover { border-color: rgba(16,64,59,0.3); box-shadow: 0 16px 34px rgba(14,42,36,0.08); transform: translateY(-2px); }
.ind .ic4 {
  width: 44px; height: 44px; border-radius: 13px; background: var(--signal);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.ind .ik { font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted); }
.ind h3 { font-size: 26px; font-weight: 500; letter-spacing: -0.035em; margin: 0; color: var(--ink); line-height: 1.1; }
.ind .who { font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--text-muted); }
.ind p { font-size: 14.5px; font-weight: 400; line-height: 1.5; color: rgba(16,64,59,0.75); margin: 0; }
.ind .ifoot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ind .igo { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.ind .igo svg { width: 14px; height: 14px; }
.ind:hover .igo { gap: 9px; }
/* the Practice card reads as the other half of the business */
.ind.prac { background: var(--ink); border-color: transparent; }
.ind.prac .ik { color: var(--on-dark-muted); }
.ind.prac h3 { color: var(--paper); }
.ind.prac .who { color: rgba(244,239,228,0.6); }
.ind.prac p { color: rgba(244,239,228,0.78); }
.ind.prac .igo { color: var(--signal); }

/* ---------- KO CORE: co-build steps ---------- */
.core-lbl { font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 12px; }
.core-steps {
  margin-top: 26px; padding-top: 22px; display: flex; flex-direction: column; gap: 15px;
  border-top: 1px solid rgba(244,239,228,0.16);
}
.cstep { display: flex; gap: 14px; }
.cstep .cn2 {
  flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.1em; color: var(--midday); padding-top: 3px;
}
.cstep b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.02em; color: var(--paper); }
.cstep .cd2 { display: block; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: rgba(244,239,228,0.72); margin-top: 3px; }

@media (max-width: 1080px) { .inds { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px) { .inds { grid-template-columns: 1fr; } }

/* ── booth device frame ────────────────────────────────────────────────
   The EcoKo phone on the home page and the WacoKo one here are the booth
   mockup: a rounder, deeper shell, a warm screen rather than pure white,
   a soft low shadow and a dynamic-island pill.

   SerbisKo, IslaKo and EduKo draw their own headers, so their content,
   buttons and tab bars are untouched — only the shell and the scale
   change.

   Scale: EcoKo's phone is drawn at 360px and scaled into its slot, so
   its type sits at ~5.5% of the device width. These screens were drawn
   at final size, which put the same text at ~6.7% and made every button
   look oversized next to EcoKo.

   `zoom`, not `transform: scale`, because zoom shrinks the layout box
   too — a transform would leave the old footprint behind. The screen is
   widened by the reciprocal so it still fills the bezel, and the aspect
   ratio is shortened from 9/19.5 to 9/17.4: the content is a fixed pixel
   height, so shrinking it without shortening the screen just moves the
   empty space above the tab bar. */
.pv .phone.booth-frame {
  border-radius: 42px; padding: 11px;
  box-shadow: 0 24px 48px rgba(14,42,36,0.35);
  width: 212px;
}
.phone.booth-frame .phscreen {
  background: #FBFAF7;
  border-radius: 36px;
  zoom: 0.88;
  width: 113.64%;
  /* The phone keeps its real proportions. Letting the content set the
     height removed the empty band but left a 1.6:1 box that does not
     read as a phone — these screens simply hold less than EcoKo's, so
     the leftover sits as ordinary app whitespace above the tab bar,
     which is what a real short screen looks like anyway. */
  aspect-ratio: 9 / 19.5;
}
.phone.booth-frame .phscreen::after {
  content: ""; position: absolute; left: 50%; top: 9px;
  transform: translateX(-50%);
  width: 72px; height: 17px; border-radius: 999px;
  background: #0E2A24; z-index: 4;
}
.phone.booth-frame .ph-status { padding-top: 13px; }

@media (max-width: 900px) {
  .pv .phone.booth-frame { width: 208px; }
}


/* ── a list of live items at the foot of a phone screen ───────────────
   Scaling the controls down to EcoKo's size left 120-155px of empty
   screen above the tab bar on these three. Each now ends on a short list
   of whatever its own page already says the product tracks: IslaKo's
   ferry schedule, SerbisKo's requests on the eBOSS clock, EduKo's
   cached lessons. Sample data, like the rest of these mockups. */
.ph-sched { display: flex; flex-direction: column; gap: 6px; padding: 0 13px; margin-top: 7px; }
.ph-s {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid rgba(16,64,59,0.10);
  border-radius: 10px; padding: 8px 10px;
}
.ph-s .sh {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 10.5px; color: var(--ink); flex: none;
}
.ph-s .sr { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ph-s .sn { font-size: 10.5px; font-weight: 500; color: var(--ink); }
.ph-s .sm { font-size: 9px; color: var(--text-muted); }
.ph-s .sx {
  font-size: 9px; font-weight: 500; flex: none;
  padding: 3px 7px; border-radius: 999px;
}
.ph-s .sx.ok   { background: rgba(63,164,106,0.12); color: #2F7F52; }
.ph-s .sx.warn { background: rgba(232,185,60,0.18); color: #8A6A10; }


/* WCAG 2.5.8 — the inline 'See it' / 'Go to' links sit at 18-20px tall. */
.igo, .hgo, .go2 { padding-block: 6px; }