/* ══════════════════════════════════════════════════════════════════════
   ECOKO — the sections of the standalone site.

   base.css owns the brand: the tokens, the measure, the buttons, the bar
   and the foot. Everything here is a section of this one page, which is
   the split the README asks for — the studio site's site.css reached 533
   lines by not keeping it.

   Two things run through the whole file:

   · No shadows. Depth is done with hairlines and a change of background,
     because the house preference is against them. The two that exist on
     the page — under the mega panel and the phone nav panel — came with
     base.css and nav-menu.css and are not ours.

   · No invented figures. The member's screen carries a bill, because a
     bill screen without an amount is not a bill screen and the member is
     openly a sample. The co-op's dashboard carries none: a collections
     total on a live page is a number a GM will quote back at us, and the
     shape of the bars makes the point without it.
   ────────────────────────────────────────────────────────────────────── */

.ec {
  /* ── text ──────────────────────────────────────────────────────────
     Named steps, not opacities. Text used to be faded with twelve
     different alpha values of the same green — .38 .42 .45 .5 .55 .6
     .62 .66 .7 .72 .74 .78 — none of them named, so none consistent,
     and the faintest of them unreadable. Three steps per background
     replace all twelve, and every one clears WCAG AA.
     ────────────────────────────────────────────────────────────────── */
  --text-primary:   #10403B;   /* 11.1:1 on cream — headings, card titles */
  --text-secondary: #3D6660;   /*  6.2:1 — all body copy */
  --text-muted:     #4D736D;   /*  5.0:1 — labels, captions, meta */

  --on-dark-primary:   #F4EFE4; /* 13.3:1 on deep green */
  --on-dark-secondary: #C1C4BA; /*  8.6:1 — body on deep green */
  --on-dark-muted:     #AFB4AA; /*  7.2:1 — labels on deep green */

  /* ── gold ──────────────────────────────────────────────────────────
     Two golds, because one cannot do both jobs. The bright one is 8.3:1
     on deep green and 2.4:1 on cream — beautiful on dark, unreadable on
     light. So: bright gold on dark and for decoration, dark gold for any
     gold that is actually text on a light background.
     ────────────────────────────────────────────────────────────────── */
  --accent-text:    #96690E;   /* 4.7:1 on cream — the hero "ko", card "ko" */
  --accent-display: #D79A18;   /* decorative on light: rules, marks */
  --accent-on-dark: #E8B93C;   /* 8.3:1 — gold on deep green */

  --ec: var(--accent-on-dark);
  --hair: rgba(16,64,59,0.12);
  --hair-soft: rgba(16,64,59,0.07);
  --dim: var(--text-secondary);
}

/* ── the bar's own bits ──────────────────────────────────────────────── */
/* The twi wordmark beside the name. It replaces the character, which the
   brand rule treats as an icon rather than the logo.

   The mark is 312x179.4 — wide, where the character was square — so the
   slot is 52x30 at the same proportion the studio site gives it, not the
   old 36x36. No vertical nudge either: the character needed one because
   its antennae and dot hung above the head, so centring the ink box
   dropped the head below the cap-height of "EcoKo". This mark's ink
   fills its viewBox, so centring is already right. */
.app-tile {
  flex: none; width: 52px; height: 30px;
  display: grid; place-items: center;
}
.app-tile img { width: 52px; height: 30px; object-fit: contain; display: block; }
.brand .ec-name { font-size: 22px; letter-spacing: -0.04em; color: var(--ink); }

/* five sectors rather than four menu items, so they sit closer */
.nav .menu { gap: 22px; }
.nav .menu a { font-size: 14.5px; }
.nav .menu a.here { color: var(--ink); font-weight: 500; }
/* The other four sectors have no site yet: muted token, aria-disabled,
   and the word soon. The word is out of the bar's resting state now — it
   was four repetitions of the same word across a five-item menu — and
   comes back on hover as a chip under the item.

   Absolute, not hidden inline: taking it out of the flow costs no width,
   so the four items do not shift when one of them is hovered, and the
   text stays in the link's accessible name either way. */
.nav .menu a.soon { position: relative; color: var(--text-muted); cursor: default; }
.nav .menu a.soon .soon-tag {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, -3px);
  padding: 2px 7px; border-radius: 4px;
  background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 140ms ease, transform 140ms ease;
}
.nav .menu a.soon:hover .soon-tag,
.nav .menu a.soon:focus-visible .soon-tag {
  opacity: 1; transform: translate(-50%, 0);
}

/* ── section furniture ───────────────────────────────────────────────── */
/* The bar is sticky and every section is reached by an in-page link, so
   each target keeps the bar's height clear of itself. ecoko.js measures
   the bar and sets --navh, which is 78px on a desktop and 62px on a
   phone — the fallback here is only for the moment before it runs. */
main section[id] { scroll-margin-top: calc(var(--navh, 78px) + 14px); }
.ec-h2 {
  margin: 0; font-weight: 500; font-size: clamp(28px, 3.5vw, 43px);
  line-height: 1.04; letter-spacing: -.045em; color: var(--ink);
}
.ec-sub {
  margin: 14px 0 0; font-size: 17px; font-weight: 400; line-height: 1.55;
  color: var(--dim); max-width: 52ch;
}
/* The brief asks every section to end in a way back to the form. Same
   words as the bar's button, so the page repeats one phrase rather than
   inventing five. */
.ec-back {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
  padding-top: 8px;
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  border-bottom: 1px solid rgba(16,64,59,.22); padding-bottom: 3px;
  transition: gap 200ms cubic-bezier(.2,0,0,1), border-color 200ms;
}
.ec-back svg { width: 15px; height: 15px; }
/* The link is 34px tall and the underline has to stay tight against the
   words, so the hit area is grown rather than the box — this reaches a
   thumb's 44px without moving the rule off the text. */
.ec-back::after { content: ""; position: absolute; inset: -9px -8px -8px; }
.ec-back:hover { gap: 12px; border-color: var(--ink); }

/* ══ HERO ══════════════════════════════════════════════════════════════
   Copy across the top, then the phone and the four things it tells a
   member. Drawn at the 1200x900 the design was made at and scaled to the
   wrap — cqw rather than JS, so the whole composition keeps its
   proportions and its type scales with it instead of reflowing.
   ────────────────────────────────────────────────────────────────────── */
/* overflow-x: the stage bleeds past the wrap on the right, and without
   this the page gains a horizontal scrollbar for it */
.ec-hero { padding: 56px 0 18px; overflow-x: clip; }
/* Copy left, the composition beside it. The second column is not half —
   the cards need every pixel, so the copy takes a fixed measure and the
   stage takes the rest and then bleeds to the viewport edge. */
.ec-hero-in {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: center; gap: 32px;
}
/* left, against the wrap's gutter */
.ec-hero .copy { max-width: 100%; }
.ec-hero h1 {
  margin: 0;
  font-weight: 500; font-size: clamp(36px, 3.8vw, 54px);
  line-height: 1; letter-spacing: -.055em; color: var(--ink);
}
/* never broken mid-beat */
.ec-hero h1 span { display: block; white-space: nowrap; }
.ec-hero h1 em { font-style: normal; color: var(--accent-text); }
.ec-hero .lede {
  margin: 20px 0 0; max-width: 40ch;
  font-size: 17.5px; font-weight: 400; line-height: 1.6; color: var(--dim);
}
.ec-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── the stage ───────────────────────────────────────────────────────── */
/* No bleed: the stage stops at the wrap's right edge like everything else
   on the page, so the composition sits inside a margin rather than running
   off the screen. It costs scale — the cards give up about a millimetre of
   type for it — but the hero gets a side to breathe against. */
.ec-screens { margin-right: 0; }
/* 980x900, down from the design's 1200x900. The phone keeps its full
   height — the compression is horizontal: the cards come in off the edges
   and tuck behind the phone by 15-45px, which is about the overlap the
   design already had. 900 was tried first and took it too far: the phone
   paints over them, so it was covering the BAYAD ONLINE label and the
   radio dots. */
.hero-stage { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 980 / 900; }
.stage {
  /* absolute, so the 900px canvas does not set .hero-stage's height:
     transform does not shrink layout, so in flow it made the box 900 tall
     while the drawing occupied 622 — and the copy beside it then centred
     against 280px of nothing and sat low. */
  position: absolute; top: 0; left: 0; width: 980px; height: 900px;
  /* 1200px, not 1200: scale() takes a ratio, and a length over a plain
     number is still a length — the whole declaration is then invalid and
     dropped, which left the stage sitting at its full 1200 unscaled. */
  transform: scale(calc(100cqw / 980px)); transform-origin: top left;
  font-size: 16px;
}

/* ── the four notifications ──────────────────────────────────────────── */
.nf {
  position: absolute; box-sizing: border-box;
  background: #fff; border: 1px solid var(--hair); border-radius: 26px;
  box-shadow: 0 24px 50px rgba(16,64,59,.12);
}
.nf-top { display: flex; align-items: center; gap: 12px; }
.nf-ic {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 12px;
}
.nf-ic svg { width: 20px; height: 20px; }
.nf-ic.gold { background: var(--ec); }
.nf-ic.lime { background: var(--signal); }
.nf-ic.bone { width: 30px; height: 30px; border-radius: 9px; background: var(--paper); }
.nf-ic.bone svg { width: 16px; height: 16px; }
.nf-t { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }

.nf-brownout {
  left: 0; top: 130px; width: 300px; height: 150px;
  padding: 22px 24px; transform: rotate(-6deg);
  display: flex; flex-direction: column; justify-content: space-between;
}
.nf-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.nf-when { font-size: 15px; line-height: 1.4; color: var(--text-secondary); }
.nf-when em { display: block; font-style: normal; font-size: 22px; color: var(--ink); }
.nf-code {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .12em;
  background: var(--paper); border-radius: 8px; padding: 5px 9px;
}

.nf-reklamo {
  left: 0; top: 470px; width: 330px;
  padding: 20px 22px; transform: rotate(-3deg);
  display: flex; flex-direction: column; gap: 14px;
}
.nf-reklamo .nf-t { font-size: 17px; }
.nf-field {
  display: flex; align-items: center; gap: 10px;
  background: var(--daylight); border: 1px solid rgba(16,64,59,.14);
  border-radius: 999px; padding: 9px 9px 9px 18px;
}
.nf-field span { flex: 1; font-size: 15px; color: var(--text-secondary); }
.nf-field i {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink);
}
.nf-field i svg { width: 14px; height: 14px; }

.nf-bayad {
  right: 26px; top: 150px; width: 290px; height: 246px;
  padding: 22px; transform: rotate(5deg);
  display: flex; flex-direction: column; gap: 16px;
}
.nf-lbl {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-secondary);
}
.pay { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.pay span { flex: 1; text-align: left; }
.pay .dot {
  flex: none; display: grid; place-items: center; box-sizing: border-box;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(16,64,59,.3);
}
.pay.on .dot { border: 0; background: var(--ink); }
.pay .dot svg { width: 10px; height: 10px; }
.pay em {
  flex: none; font-style: normal; font-size: 12px; font-weight: 500;
  background: var(--signal); border-radius: 999px; padding: 4px 10px;
}

.nf-metro {
  right: 46px; top: 500px; width: 260px;
  padding: 18px 20px; transform: rotate(3deg);
  display: flex; align-items: center; gap: 14px;
}
.nf-metro .nf-t { font-size: 17px; }
.nf-metro .nf-t em {
  display: block; font-style: normal; font-size: 14px; font-weight: 400;
  color: var(--text-secondary);
}

/* ── the phone ───────────────────────────────────────────────────────── */
.ph {
  position: absolute; left: 50%; top: 30px; margin-left: -205px;
  width: 410px; height: 840px; box-sizing: border-box;
  border-radius: 64px; background: var(--ink); padding: 12px;
  transform: rotate(-3deg);
  box-shadow: 0 0 0 2px #0B2E2A, 0 60px 110px rgba(16,64,59,.35);
}
.ph-glass {
  position: relative; width: 100%; height: 100%;
  border-radius: 52px; overflow: hidden;
  background: var(--daylight); color: var(--ink);
}
.ph-notch {
  position: absolute; left: 50%; top: 12px; margin-left: -60px;
  width: 120px; height: 34px; border-radius: 20px; background: #0A1A16;
}
.ph-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 30px 0; font-size: 16px; font-weight: 500;
}
.ph-sig { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.ph-sig svg { fill: currentColor; }
.ph-sig svg:first-child { width: 18px; height: 12px; }
.ph-sig svg:last-child  { width: 24px; height: 12px; }

/* gap 10, not 12: the screen carries five rows now rather than three,
   and at 12 the last one sat 4px into the tab bar. */
.ph-body { padding: 34px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.ph-top { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.ph-coop { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 500; }
.ph-coop i {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 8px; background: var(--ec);
}
.ph-coop i svg { width: 15px; height: 15px; }
.ph-lbl {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-secondary);
}
.ph-bill {
  background: var(--ink); border-radius: 24px; padding: 22px 22px 20px;
  color: var(--on-dark-primary); display: flex; flex-direction: column; gap: 10px;
}
.ph-bill .ph-lbl { color: var(--on-dark-muted); }
.ph-amt { margin: 0; font-size: 50px; font-weight: 400; letter-spacing: -.045em; line-height: 1; }
.ph-meta { display: flex; gap: 20px; font-size: 15px; color: var(--on-dark-secondary); }
.ph-pay {
  margin-top: 8px; background: var(--signal); color: var(--deep);
  border-radius: 14px; padding: 14px; text-align: center;
  font-size: 18px; font-weight: 500;
}
.ph-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); border: 1px solid rgba(16,64,59,.08);
  border-radius: 18px; padding: 14px 16px;
}
.ph-row i {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
}
.ph-row i svg { width: 18px; height: 18px; }
.ph-row i.gold { background: var(--ec); }
.ph-row i.lime { background: var(--signal); }
.ph-row i.air  { background: var(--air); }
.ph-row span { font-size: 16px; font-weight: 500; line-height: 1.25; text-align: left; }
.ph-row span em {
  display: block; font-style: normal; font-size: 14px; font-weight: 400;
  color: var(--text-secondary);
}
.ph-tabs {
  position: absolute; left: 16px; right: 16px; bottom: 16px; height: 66px;
  border-radius: 24px; background: var(--ink);
  display: flex; align-items: center; justify-content: space-around;
}
.ph-tabs svg { width: 24px; height: 24px; }

/* ── the member's phone ──────────────────────────────────────────────── */
.mk-phone {
  flex: none; width: 252px;
  background: #fff; border: 1px solid var(--hair);
  border-radius: 14px; padding: 10px;
}
.mk-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 8px 12px;
}
.mk-coop {
  font-size: 13px; font-weight: 500; letter-spacing: -.01em; color: var(--text-primary);
  display: flex; align-items: center; gap: 7px;
}
.mk-coop i {
  width: 18px; height: 18px; border-radius: 4px; flex: none;
  background: var(--ec); display: grid; place-items: center;
}
.mk-coop i svg { width: 11px; height: 11px; display: block; }
/* DM Mono at its 11px floor, and only here: the dashboard's own chrome
   and the SR/RPT codes below. Everywhere else it has come off. */
.mk-lbl {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}

/* the bill */
.mk-bill {
  background: var(--ink); border-radius: 10px; padding: 14px 15px 15px; color: var(--paper);
}
.mk-bill .mk-lbl { color: var(--on-dark-muted); }
.mk-amt {
  margin: 7px 0 0; font-weight: 400; font-size: 32px;
  letter-spacing: -.045em; line-height: 1;
}
.mk-meta {
  display: flex; gap: 14px; margin-top: 11px;
  font-size: 12px; font-weight: 400; color: var(--on-dark-secondary);
}
.mk-pay {
  display: block; margin-top: 13px; padding: 10px 0; border-radius: 8px;
  background: var(--signal); color: var(--deep);
  font-size: 13.5px; font-weight: 500; text-align: center;
}

/* the rows under it */
.mk-rows { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.mk-row {
  display: flex; align-items: center; gap: 9px;
  background: #F6F8F3; border: 1px solid var(--hair-soft);
  border-radius: 8px; padding: 9px 11px;
}
.mk-row i { flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; }
.mk-row i svg { width: 12px; height: 12px; }
.mk-row .i-am { background: var(--ec); }
.mk-row .i-sg { background: var(--signal); }
.mk-row .i-ai { background: var(--air); }
.mk-rt { font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; color: var(--text-primary); line-height: 1.25; }
.mk-rt em {
  display: block; font-style: normal; font-size: 12px; font-weight: 400;
  color: var(--text-muted); margin-top: 2px;
}

/* ── the co-op's dashboard ───────────────────────────────────────────── */
.mk-dash {
  background: #fff; border: 1px solid var(--hair);
  border-radius: 12px; padding: 18px 20px 20px;
}
.mk-dtop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--hair-soft);
}

/* four tiles, labelled but not filled in */
.mk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.mk-tile {
  background: #F6F8F3; border: 1px solid var(--hair-soft);
  border-radius: 8px; padding: 10px 11px 11px;
}
.mk-tile b { display: block; font-size: 12px; font-weight: 500; letter-spacing: -.01em; color: var(--text-primary); }
/* A bar apiece instead of a figure. Filled to a different width so the
   four read as four different states. */
.mk-tile i { display: block; height: 4px; border-radius: 3px; background: rgba(16,64,59,.1); margin-top: 8px; }
.mk-tile i::after { content: ""; display: block; height: 100%; border-radius: 3px; background: var(--ec); width: var(--w); }
.mk-tile:nth-child(2) i::after { background: var(--signal); }
.mk-tile:nth-child(3) i::after { background: var(--air); }
.mk-tile:nth-child(4) i::after { background: rgba(16,64,59,.3); }

/* the collections strip: months, no totals */
.mk-bars { display: flex; align-items: flex-end; gap: 7px; height: 64px; margin-top: 16px; }
.mk-bars i { flex: 1; height: var(--h); background: rgba(16,64,59,.1); border-radius: 3px 3px 0 0; }
.mk-bars i.on { background: var(--signal); }

/* the queue */
.mk-q { margin-top: 15px; display: flex; flex-direction: column; gap: 5px; }
.mk-qr {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--hair-soft); border-radius: 7px;
}
.mk-qr span:first-of-type {
  flex: none; font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.mk-qr b { font-size: 12.5px; font-weight: 500; letter-spacing: -.015em; color: var(--text-primary); }
.mk-qr em {
  margin-left: auto; flex: none; font-style: normal;
  font-size: 12px; font-weight: 500; padding: 3px 9px; border-radius: 6px;
}
.mk-qr .s-new  { background: var(--ec); color: var(--deep); }
.mk-qr .s-done { background: var(--signal); color: var(--deep); }
.mk-qr .s-wait { background: rgba(16,64,59,.09); color: var(--text-secondary); }

/* ══ HOOK ══════════════════════════════════════════════════════════════
   A band between sections rather than a strip stuck under the bar. The
   bar already carries the same CTA, and two of them following you down
   the page is one too many. Make it sticky by moving this to the top of
   the page and adding position: sticky; top: var(--navh).
   ────────────────────────────────────────────────────────────────────── */
.ec-hook { padding: 30px 0; }
.ec-hook .in {
  background: var(--ink); color: var(--paper); border-radius: 12px;
  padding: 34px 38px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.ec-hook h2 {
  margin: 0; font-weight: 500; font-size: clamp(24px, 2.9vw, 34px);
  line-height: 1.08; letter-spacing: -.04em;
}
.ec-hook h2 em { font-style: normal; color: var(--ec); }
.ec-hook p { margin: 10px 0 0; font-size: 16px; font-weight: 400; color: var(--on-dark-secondary); }
/* The button and the line under it stack, so .side goes to a column. It
   was a single centred row while the button stood alone. */
.ec-hook .side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ec-hook .second {
  font-size: 12.5px; font-weight: 400; letter-spacing: .02em;
  color: var(--on-dark-muted);
}

/* ══ ANG APP ═══════════════════════════════════════════════════════════
   The page's opener: one promise, then the four reasons that used to sit
   in a "Bakit EcoKo?" section near the bottom. Saying it once, first, is
   worth more than saying it twice a screen apart.
   ────────────────────────────────────────────────────────────────────── */
.ec-portal { padding: 46px 0; }
.ec-portal .grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px; margin-top: 32px;
}
.ec-portal .k {
  background: #fff; border: 1px solid var(--hair); border-radius: 10px;
  padding: 22px 20px 24px;
  transition: background 240ms cubic-bezier(.2,0,0,1);
}
.ec-portal .k:hover { background: #F6F8F3; }
.ec-portal h3 {
  margin: 0; font-weight: 500; font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.05; letter-spacing: -.045em; color: var(--ink);
}
.ec-portal .k p {
  margin: 11px 0 0; font-size: 15px; font-weight: 400; line-height: 1.55;
  color: var(--dim);
}

/* ══ THE TWO SIDES ═════════════════════════════════════════════════════
   Six cards and a screen. The member's screen goes on the left and the
   co-op's on the right, holding the order the hero set.
   ────────────────────────────────────────────────────────────────────── */
.ec-side { padding: 46px 0; }
.ec-side .head .ec-sub { max-width: 640px; }
.ec-side .body {
  /* The phone is only 252px, so it can stand beside the cards and still
     leave 822 — three columns of 274, which is what keeps the six cards
     two rows of three rather than a column you scroll. */
  display: grid; grid-template-columns: 252px minmax(0,1fr); gap: 46px;
  align-items: start; margin-top: 30px;
}
/* The dashboard stands beside its cards too, on the other side — so the
   two sections mirror each other rather than repeating. It gives up
   130px of its width to do it: at 430 the three columns still get 216
   each, which is where the card titles stop wrapping. */
.ec-side.right .body { grid-template-columns: minmax(0,1fr) 430px; }
.ec-side.right .shot { order: 2; }

/* 1fr rows, not auto: the Reports card runs to five lines and left the
   second row 47px deeper than the first. All six match the tallest. */
.ec-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  grid-auto-rows: 1fr; gap: 10px;
}
.ec-card {
  background: #fff; border: 1px solid var(--hair); border-radius: 10px;
  padding: 16px 17px 17px;
  transition: background 240ms cubic-bezier(.2,0,0,1);
}
.ec-card:hover { background: #F6F8F3; }
/* One line icon per card, above the name, all in the one accent — the
   amber that the hero puts on "koko" and the steps put on their numbers.
   Line art rather than filled tiles: twelve coloured chips down a page is
   a lot of chips, and the icon is here to give the card a shape you
   recognise on the second read, not to carry the meaning. The heading
   does that, which is why each one is aria-hidden. */
.ec-card .ic {
  display: block; width: 28px; height: 28px; margin-bottom: 13px;
}
/* the four pillars take the same cut as the cards below them */
.ec-portal .k .ic { display: block; width: 28px; height: 28px; margin-bottom: 15px; }
.ec-card h3 {
  margin: 0; font-weight: 500; font-size: 15.5px;
  letter-spacing: -.025em; color: var(--ink);
}
.ec-card p {
  margin: 7px 0 0; font-size: 15px; font-weight: 400; line-height: 1.55;
  color: var(--dim);
}

/* the phone and the dashboard, upright in these sections */
.ec-side .shot { width: max-content; max-width: 100%; }
.ec-side .mk-phone, .ec-side .mk-dash { transform: none; margin: 0; }
.ec-side .mk-dash { width: 430px; max-width: 100%; }
/* four tiles across a 430px panel leave 88px each, which cuts "Koleksyon"
   — two rows of two instead */
.ec-side .mk-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* ══ PACKAGES ══════════════════════════════════════════════════════════
   Two tiles, equal width. The second takes the deep field, which is what
   says "the step up" without a badge or a price on it — the same ground
   the hook band above stands on, so the two read as one argument.
   ────────────────────────────────────────────────────────────────────── */
.ec-packages { padding: 46px 0; }
/* The measure is on the sub, not the head: "Dalawang paraan para
   mag-umpisa." needs 650px and a 640px head broke it over two lines for
   the sake of ten. */
.ec-packages .head .ec-sub { max-width: 640px; }
.ec-packages .grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px; margin-top: 30px;
}
.pk {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--hair); border-radius: 10px;
  padding: 28px 26px 26px;
}
/* Outfit 500 at 13px, sentence case — the same move the form labels made.
   Bayanihan and Premium are the names of the two packages, not codes, and
   mono tracked capitals rendered a name as a part number. Mono is still
   here where it is doing real work: the dashboard chrome and the SR/RPT
   codes, and the chrome inside the phone. */
.pk .tag {
  align-self: flex-start;
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--text-muted);
}
.pk h3 {
  margin: 13px 0 0; font-weight: 500; font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.08; letter-spacing: -.04em; color: var(--ink);
}
/* LIBRE takes the accent, the same move the hook band makes on it — on
   cream that is the dark gold, not the bright one */
.pk h3 em { font-style: normal; color: var(--accent-text); }
.pk-lede {
  margin: 10px 0 0; font-size: 15.5px; font-weight: 400; line-height: 1.55;
  color: var(--dim);
}
.pk ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pk li { display: flex; align-items: flex-start; gap: 10px; }
/* 2px down: the tick's optical centre sits above a 15px line's */
.pk li svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.pk li span { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text-primary); }
/* pushed to the bottom, so the two tiles' last lines sit on one rule
   however far apart their lists leave them */
.pk-for {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--hair);
  font-size: 14.5px; font-weight: 400; color: var(--text-muted);
}
.pk-for:only-of-type { margin-top: auto; }

.pk.dark { background: var(--deep); border-color: var(--deep); }
.pk.dark .tag { color: var(--ec); }
.pk.dark h3 { color: var(--paper); }
.pk.dark .pk-lede { color: var(--on-dark-secondary); }
.pk.dark li span { color: var(--on-dark-primary); }
.pk.dark .pk-for { border-top-color: rgba(244,239,228,.18); color: var(--on-dark-muted); }

/* ══ CONTACT ═══════════════════════════════════════════════════════════ */
.ec-contact { padding: 46px 0 72px; }
.ec-contact .in {
  position: relative; overflow: hidden;
  background: var(--deep); color: var(--paper); border-radius: 14px;
  padding: 52px 48px;
  display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1fr); gap: 48px;
}
.ec-contact h2 { color: var(--paper); }
.ec-contact .ec-sub { color: var(--on-dark-secondary); }

.ec-form { display: flex; flex-direction: column; gap: 11px; }
.ec-form .two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 11px; }
.ec-form label { display: block; }
/* Outfit 500 at 13px, sentence case. It was DM Mono 10px, uppercase and
   letter-spaced, which measured 4.4:1 and looked like a technical
   drawing. These are instructions a GM has to read to fill in the form
   that books the meeting — they are not chrome. Mono stays where it is
   doing real work: the SR and RPT codes in the dashboard. */
.ec-form .lb {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--on-dark-secondary);
}
.ec-form input, .ec-form textarea {
  width: 100%; font-family: Outfit, sans-serif; font-size: 15px; font-weight: 400;
  color: var(--paper); background: rgba(244,239,228,.06);
  border: 1px solid rgba(244,239,228,.18); border-radius: 8px;
  padding: 12px 14px;
}
.ec-form textarea { min-height: 84px; resize: vertical; }
.ec-form input::placeholder, .ec-form textarea::placeholder { color: var(--on-dark-muted); }
.ec-form input:focus, .ec-form textarea:focus {
  outline: none; border-color: var(--ec); background: rgba(244,239,228,.1);
}
.ec-form .btn { margin-top: 4px; align-self: flex-start; }

/* The honeypot has to be reachable by a script reading the DOM but not
   by a person, so it is moved off-screen rather than hidden — display:none
   and visibility:hidden are both things a bot can check for. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The send failed and the lead is still in the fields. Stated in the form
   rather than swapped for the thank-you, so nothing is lost. */
.ec-err {
  margin: 4px 0 0; font-size: 15px; line-height: 1.45; color: var(--signal);
}
.ec-err a { color: var(--signal); }

/* the success state, swapped in by ecoko.js */
.ec-done { display: none; }
.ec-form.sent { display: none; }
.ec-form.sent + .ec-done { display: block; }
.ec-done p {
  margin: 0; font-weight: 400; font-size: 21px; line-height: 1.35;
  letter-spacing: -.03em; color: var(--paper);
}
.ec-done .tick {
  width: 40px; height: 40px; border-radius: 999px; background: var(--signal);
  display: grid; place-items: center; margin-bottom: 16px;
}
.ec-done .tick svg { width: 20px; height: 20px; }

/* ══ FOOTER extras ═════════════════════════════════════════════════════ */
.foot-top .ec-name { font-size: 24px; color: var(--signal); letter-spacing: -.04em; }
/* Two credit lines, stacked: the product's parent, then the studio's.
   .foot-bottom is a space-between row by default, which would have put
   one at each end of the footer. */
.ec footer .foot-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
.foot-credit { margin: 0; }
.foot-credit a { text-decoration: none; }
.foot-credit a:hover { color: var(--signal); }
/* the rights line sits a touch apart from the two credits above it */
.foot-rights { margin-top: 6px; color: var(--on-dark-muted); }

.foot-tag { margin: 8px 0 0; font-size: 16px; font-weight: 400; color: var(--on-dark-secondary); }

/* ══ NARROW ════════════════════════════════════════════════════════════ */
/* The copy column goes fluid so the two stay side by side as the window
   narrows — a fixed 420 ate the stage's width first. It only gives up at
   820, where the phone alone is all that will fit. */
@media (max-width: 1180px) {
  .ec-hero-in { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 1080px) {
  /* 252 + 46 + two columns leaves 361 each; three would be 226 and the
     card titles start wrapping, so the phone goes above them here too */
  .ec-side .body, .ec-side.right .body { display: block; }
  .ec-side .shot { margin: 0 auto 32px; }
  .ec-side .mk-dash { width: 560px; }
  .ec-side .mk-tiles { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .ec-screens { margin-top: 44px; }
  .ec-portal .grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ec-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .ec-hero { padding: 40px 0 6px; }
  /* padding-block again, never the shorthand: padding: 0 here took the
     wrap's 20px gutter away, and the phone then measured the full 375px
     of a phone screen with its border flush to the glass. */
  .ec-contact .in { grid-template-columns: minmax(0,1fr); gap: 34px; padding: 38px 26px; }
  .ec-hook .in { padding: 28px 26px; }
}
@media (max-width: 820px) {
  /* One column at last. The cards come off and the stage re-bases on the
     phone's own 410 instead of the whole canvas, so the phone fills the
     column rather than shrinking with a canvas it no longer shares.
     Capped at 360 so it stays a phone and not a billboard. */
  .ec-hero-in { grid-template-columns: minmax(0,1fr); gap: 0; }
  .ec-hero .copy { max-width: 820px; }
  .ec-screens { margin: 30px 0 0; }
  .hero-stage { max-width: 360px; margin: 0 auto; aspect-ratio: 410 / 880; }
  .stage { width: 410px; height: 880px; transform: scale(calc(100cqw / 410px)); }
  .nf { display: none; }
  /* left:50% less its own half-width still centres it on a 410 stage */
  .ph { top: 20px; transform: none; }
}
@media (max-width: 640px) {
  .ec-cards { grid-template-columns: minmax(0,1fr); }
  .ec-card .ic { width: 25px; height: 25px; margin-bottom: 11px; }
  .ec-portal .grid { grid-template-columns: minmax(0,1fr); }
  .ec-packages .grid { grid-template-columns: minmax(0,1fr); }
  .ec-form .two { grid-template-columns: minmax(0,1fr); }
  .mk-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ec-card, .ec-back, .ec-portal .k, .nav .menu a.soon .soon-tag { transition: none; }
}