/* ─────────────────────────────────────────────────────────────────────────────
   wenexnepal.com - one stylesheet.

   The palette IS the app's palette (kuberax/lib/constants/app_colors.dart).
   Crimson on cream, gold for a figure worth looking at, ink for everything
   else. A visitor who downloads the app should feel they have already been
   using it.

   Nepali is set in Noto Sans Devanagari, not left to a fallback: DM Sans has
   no Devanagari, so an unstyled Nepali headline renders in whatever the OS
   happens to own, which on Windows is a thin, wrong-looking serif.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --crimson: #b5252a;
  --crimson-dark: #8e1c20;
  --cream: #faf7f2;
  --mist: #f0ebe3;
  --ink: #1c1c2e;
  --grey: #746d68;
  --border: #e4ded6;
  --gold: #e6a817;
  --green: #2d7d32;
  --white: #ffffff;

  --wrap: 1180px;
  --gap: clamp(56px, 8vw, 104px);
  --radius: 18px;
  --shadow: 0 1px 2px rgba(28, 28, 46, .04), 0 12px 28px rgba(28, 28, 46, .06);
  --shadow-lift: 0 2px 4px rgba(28, 28, 46, .05), 0 22px 48px rgba(28, 28, 46, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Nepali. Every element carrying Devanagari gets this class, so the script
   never falls back to a system font that does not match the page. */
.np {
  font-family: "Noto Sans Devanagari", "DM Sans", sans-serif;
  font-feature-settings: "kern" 1;
}

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

section { padding-block: var(--gap); }
.band-white { background: var(--white); }
.band-mist  { background: var(--mist); }
.band-ink   { background: var(--ink); color: #f2efe9; }

/* ── type ─────────────────────────────────────────────────────────────────── */

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .4em; }
h1 { font-size: clamp(38px, 5.6vw, 66px); font-weight: 800; }
h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; }
h3 { font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; }
p  { margin: 0 0 1em; }

.lede { font-size: clamp(17px, 1.5vw, 20px); color: var(--grey); max-width: 58ch; }
.muted { color: var(--grey); }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* Section markers. These were pill-shaped labels and the owner was right
   about them: a capsule round every kicker is the default a template reaches
   for, and it fought the rest of the page. What replaces it is the mark's own
   crimson bar, stood up next to the words. The logo already carries that bar,
   so the page repeats a shape it owns instead of borrowing one. */
.eyebrow {
  display: inline-flex; align-items: baseline; gap: 11px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--crimson); background: none; padding: 0; margin-bottom: 20px;
  position: relative;
}
.eyebrow::before {
  content: ""; width: 3px; height: .95em; border-radius: 2px;
  background: var(--crimson); flex: none; align-self: center;
}
/* Devanagari is never letterspaced: it breaks the conjuncts apart. */
.eyebrow.np { letter-spacing: 0; text-transform: none; font-size: 15px; font-weight: 700; }
.band-ink .eyebrow { color: #ff9ea2; }
.band-ink .eyebrow::before { background: #ff9ea2; }

.section-head { max-width: 62ch; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; }

/* A Nepali line set as the headline, with its English underneath at a size
   that reads as a translation rather than as a second headline. */
.dual-np { display: block; }
.dual-en {
  display: block; font-size: clamp(17px, 1.6vw, 21px); font-weight: 500;
  letter-spacing: -0.01em; color: var(--grey); margin-top: .35em;
}

/* ── wordmark ─────────────────────────────────────────────────────────────── */
/* The app's mark, rebuilt in type rather than pasted in as a picture: a
   crimson bar, "Kubera" in ink, "X" in crimson. One definition, here. */

/* The real artwork, not DM Sans doing an impression of it. The wordmark is
   its own typeface and the difference showed at a glance. */
.mark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.mark img { height: 30px; width: auto; }
.mark-sub {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--grey); margin-top: 4px;
}
footer.site .mark img { height: 28px; }
footer.site .mark-sub { color: #8e8880; }

/* ── buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 12px; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--crimson); color: #fff; box-shadow: 0 10px 22px rgba(181, 37, 42, .24); }
.btn-primary:hover { background: var(--crimson-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(28, 28, 46, .03); }
.btn-light { background: #fff; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ── header ───────────────────────────────────────────────────────────────── */

header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 247, 242, .88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
header.site .wrap { display: flex; align-items: center; gap: 28px; height: 74px; }
nav.main { display: flex; gap: 26px; margin-left: auto; align-items: center; }
nav.main a {
  text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--ink);
  opacity: .82;
}
nav.main a:hover { opacity: 1; color: var(--crimson); }
/* `nav.main a` outranks `.btn-primary` on specificity, so the call to action
   was rendering as dark text on crimson - unreadable, and the first thing the
   owner saw. The button keeps its own colours inside the nav. */
nav.main a.btn { opacity: 1; }
nav.main a.btn-primary, nav.main a.btn-primary:hover { color: #fff; }
nav.main a.btn-light, nav.main a.btn-light:hover { color: var(--ink); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; padding: 8px; }

/* ── hero ─────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(48px, 7vw, 92px) 0; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.hero h1 { margin-bottom: 18px; }
.hero-art { position: relative; }
.hero-art img { width: 100%; border-radius: var(--radius); }
.hero-note {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 30px;
  font-size: 14.5px; color: var(--grey);
}
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.tick { color: var(--green); font-weight: 800; }

/* ── strips and cards ─────────────────────────────────────────────────────── */

/* The proof strip, also de-capsuled: four statements in a row, divided by a
   hairline and marked with a small crimson lozenge. Reads like a masthead
   strapline rather than four buttons nobody can press. */
.chips {
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
/* Deliberately NOT a flex container. Flex makes every child its own item and
   drops the whitespace between them, which welded "in" to "Nepal" in "Built in
   Nepal, for Nepali books". A block with an inline marker keeps the sentence a
   sentence. */
.chip {
  display: block; text-align: center; align-self: center;
  padding: 18px clamp(12px, 1.6vw, 26px); font-weight: 600; font-size: 15px;
  border-left: 1px solid var(--border);
}
.chip:first-child { border-left: 0; }
.chip::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px;
  background: var(--crimson); transform: rotate(45deg); vertical-align: 1px;
}
.chip b { color: var(--crimson); font-weight: 700; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card p:last-child { margin-bottom: 0; }
.card .ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(181, 37, 42, .09); margin-bottom: 18px; font-size: 22px;
}
.card.flat:hover { transform: none; box-shadow: var(--shadow); }

/* the "sound familiar?" pain cards, quieter than a feature card */
.pain {
  background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--crimson);
  border-radius: 14px; padding: 22px 24px;
}
.pain p { margin: 0; }
.pain .said { font-weight: 700; font-size: 17.5px; margin-bottom: 6px; }

/* numbered steps */
.step { position: relative; padding-left: 62px; }
.step .num {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 18px;
}

/* split rows: art one side, words the other */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); }
.split.flip > *:first-child { order: 2; }

.ticklist { list-style: none; padding: 0; margin: 22px 0 0; }
.ticklist li { display: flex; gap: 12px; margin-bottom: 13px; align-items: flex-start; }
.ticklist li::before {
  content: "✓"; color: var(--green); font-weight: 800; flex: none; margin-top: 1px;
}

/* report list - the Nepal-only argument */
.reports-wide { background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); }
.reports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 34px; }
.reports div { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.reports div::before { content: "▸"; color: var(--crimson); font-weight: 800; }

/* download */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.dl {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; text-align: center; box-shadow: var(--shadow);
}
.dl .k { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); font-weight: 700; }
.dl h3 { margin: 10px 0 8px; }
/* Sideload small print. Quiet, but it has to be readable: both sentences
   here are a support call that did not happen. */
.dl .fineprint {
  font-size: 13px; line-height: 1.5; color: var(--grey);
  margin: 14px 0 16px; text-align: left;
}
.dl .btn { margin-top: 4px; }

.dl .soon {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #9a6d0b; background: none; padding: 0;
}
.dl .soon::before {
  content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--gold);
}

/* ERP */
.erp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.erp {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px; padding: 20px 22px;
}
.erp h3 { color: #fff; margin-bottom: 4px; font-size: 19px; }
.erp p { color: #c9c4bd; font-size: 15px; margin: 0; }

/* FAQ */
details.faq {
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 20px 24px; margin-bottom: 12px;
}
details.faq summary {
  cursor: pointer; font-weight: 700; font-size: 17.5px; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: var(--crimson); font-size: 24px; font-weight: 700; }
details.faq[open] summary::after { content: "−"; }
details.faq p { margin: 14px 0 0; color: var(--grey); }

/* CTA band */
.cta-band { background: var(--ink); color: #fff; border-radius: 24px; padding: clamp(36px, 5vw, 64px); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: #c9c4bd; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* footer */
footer.site { background: var(--ink); color: #b9b3ab; padding-block: 56px 32px; font-size: 15px; }
footer.site a { color: #e8e4de; text-decoration: none; }
footer.site a:hover { color: #fff; text-decoration: underline; }
footer.site .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
footer.site h4 { color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 14px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 9px; }
.legal-bar {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-size: 13.5px; color: #8e8880;
}

/* ── about: figures strip ─────────────────────────────────────────────────── */
/* Four numbers stood on a hairline. Same furniture as the proof strip on the
   home page, but the number carries the weight instead of the sentence. */
.figures { display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.figures > div { padding: 26px clamp(12px, 1.6vw, 26px); border-left: 1px solid var(--border); }
.figures > div:first-child { border-left: 0; }
.figures .n { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: var(--crimson); }
.figures .l { display: block; margin-top: 10px; font-size: 14.5px; color: var(--grey); font-weight: 500; }

/* ── about: the plaque ────────────────────────────────────────────────────── */
/* The facts about T-Data, set as a record rather than as prose: the shape of
   a company plate on a door. */
.plaque { background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow); }
.plaque dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
.plaque dt { font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--crimson); }
.plaque dd { margin: 6px 0 0; font-weight: 500; }
.plaque dd + dt { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.plaque a { color: var(--crimson); font-weight: 700;
  text-decoration-color: rgba(181, 37, 42, .35); text-underline-offset: 3px; }
.plaque a:hover { color: var(--crimson); text-decoration-color: currentColor; }

/* ── about: two-column argument ───────────────────────────────────────────── */
/* Two halves of the same sentence, so they have to sit at the same height and
   read as a pair rather than as two cards that happen to be adjacent. */
.facing { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.facing > div { padding: clamp(26px, 3.2vw, 40px); }
/* Cream, not mist: this block sits ON a mist band, and tinting the second
   half with the band's own colour made the card look like it stopped
   half-way across. */
.facing > div + div { border-left: 1px solid var(--border); background: var(--cream); }
.facing h3 { margin-bottom: 14px; }
.facing p:last-child { margin-bottom: 0; }
.facing .said { font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 10px; }

/* ── about: the people ────────────────────────────────────────────────────── */
/* A cut-out portrait needs somewhere to stand, or it floats. The well is that
   floor: a tinted box the figure is lit against and bleeds out of the bottom
   of, so the card reads as one object and not as a photo pasted on a panel.
   All three portraits are pre-scaled to one head size and one frame, so the
   row lines up at the eyes. */
.people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.person { background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column; }
.person .well {
  position: relative; aspect-ratio: 820 / 854; overflow: hidden;
  background:
    radial-gradient(112% 82% at 50% 8%, #fffdfa 0%, var(--mist) 58%, #e3dcd2 100%);
  border-bottom: 1px solid var(--border);
}
/* A soft crimson wash low in the well, so the black clothing has something
   warm to sit against instead of dying into grey. */
.person .well::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, rgba(181, 37, 42, .10), rgba(181, 37, 42, 0));
}
.person .well img { position: relative; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 0; }
.person .body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.person h3 { margin-bottom: 2px; }
.person .role { font-size: 12.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--crimson); }
.person .bio { color: var(--grey); font-size: 15.5px; margin: 14px 0 0; }
.person .bio:last-child { margin-bottom: 0; }
.person .tag { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 700;
  color: var(--ink); background: rgba(230, 168, 23, .16); border-radius: 8px; padding: 5px 11px; }

/* Small square links under a person. Icon only, so the name above stays the
   loudest thing on the card. */
.socials { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; }
.socials a {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--border); color: var(--grey); background: var(--cream);
  transition: color .14s ease, border-color .14s ease, transform .14s ease;
}
.socials a:hover { color: var(--crimson); border-color: var(--crimson); transform: translateY(-2px); }
.socials svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* ── about: the pull quote ────────────────────────────────────────────────── */
.pull { max-width: 30ch; }
.pull blockquote { margin: 0; font-size: clamp(22px, 2.5vw, 30px); font-weight: 700;
  line-height: 1.3; letter-spacing: -0.02em; }
.pull cite { display: block; margin-top: 18px; font-style: normal; font-size: 15px;
  color: var(--grey); font-weight: 600; }

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hero-grid, .split, .g4, .g3, .erp-grid, .dl-grid, footer.site .cols,
  .people, .facing { grid-template-columns: 1fr; }
  .chips, .figures { grid-template-columns: repeat(2, 1fr); }
  .figures > div:nth-child(odd) { border-left: 0; }
  .figures > div:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .facing > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .pull { max-width: none; }
  /* One column means one portrait at full page width, which is far too much
     picture for a name and three lines. Cap the column instead. */
  .people { max-width: 420px; margin-inline: auto; }
  .chip:nth-child(odd) { border-left: 0; }
  .chip:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .split.flip > *:first-child { order: 0; }
  .g2, .reports { grid-template-columns: 1fr; }
  nav.main {
    display: none; position: absolute; top: 74px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    flex-direction: column; gap: 0; padding: 8px 20px 18px;
  }
  nav.main.open { display: flex; }
  nav.main a { padding: 12px 0; border-bottom: 1px solid var(--border); width: 100%; }
  nav.main .btn { margin-top: 12px; width: 100%; }
  .nav-toggle { display: block; }
  .hero-art { max-width: 520px; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card { transition: none; }
}

/* ── guide pages (tally-on-mobile.html) ───────────────────────────────── */
.crumbs { font-size: 14px; color: var(--grey); margin-bottom: 18px; }
.crumbs a { color: var(--grey); }
.crumbs span { margin-inline: 6px; opacity: .6; }
.byline { font-size: 14px; color: var(--grey); margin: -4px 0 28px; }
.answer { background: var(--white); border-left: 4px solid var(--crimson); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); }
.answer h2 { font-size: clamp(20px, 2vw, 24px); margin: 0 0 12px; }
.answer p { color: var(--ink); }
.answer p:last-child { margin-bottom: 0; }
.steps-list { padding-left: 22px; margin: 22px 0 0; }
.steps-list li { margin-bottom: 14px; padding-left: 6px; }
.steps-list li::marker { color: var(--crimson); font-weight: 800; }
.video { margin: 28px 0 0; }
.video button, .video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--ink); cursor: pointer; position: relative; }
.video button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video .play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; background: var(--crimson); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.video .play::after { content: ""; position: absolute; left: 30px; top: 23px; border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
.video figcaption { font-size: 14px; color: var(--grey); margin-top: 10px; }

/* Nepali pages: DM Sans draws the Latin, Noto the Devanagari, and the matras
   need more room above and below than Latin line-heights give them. */
html[lang="ne"] body { font-family: "DM Sans", "Noto Sans Devanagari", system-ui, sans-serif; line-height: 1.8; }
html[lang="ne"] h1, html[lang="ne"] h2, html[lang="ne"] h3 { line-height: 1.35; letter-spacing: 0; }
html[lang="ne"] .eyebrow:not([lang="en"]) { letter-spacing: 0; text-transform: none; font-size: 15px; font-weight: 700; }

/* ── press.html ───────────────────────────────────────────────────────────── */
.press-head { max-width: 760px; margin-bottom: 34px; }
.press-hero { margin: 0; }
.press-hero img { width: 100%; height: auto; display: block; border-radius: 22px;
  box-shadow: var(--shadow); border: 1px solid var(--border); }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 26px; }
.badges { display: flex; gap: 12px; align-items: center; }
.badge img { height: 48px; width: auto; display: block; }
.stores-note { margin: 0; color: var(--grey); font-size: 15px; max-width: 52ch; }
.stores-note b { color: var(--ink); }
.release { max-width: 760px; margin-inline: auto; }
.release h2 { margin-bottom: 16px; }
.release h3 { margin: 38px 0 10px; }
.release p { font-size: 17.5px; line-height: 1.75; }
.release .standfirst { font-size: clamp(18px, 1.6vw, 21px); color: var(--grey); line-height: 1.6;
  padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--border); }
.release .dateline { letter-spacing: .04em; }
.release a { color: var(--crimson); font-weight: 700; }
.release .endmark { text-align: center; color: var(--grey); letter-spacing: .3em; margin-top: 34px; }
.bigquote { margin: 36px 0; padding: 4px 0 4px 26px; border-left: 4px solid var(--crimson); }
.bigquote blockquote { margin: 0; font-size: clamp(21px, 2.3vw, 28px); font-weight: 700;
  line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
.bigquote figcaption { margin-top: 14px; font-size: 15px; color: var(--grey); }
.bigquote figcaption b { color: var(--ink); }
.release.np p { line-height: 1.9; }
.release.np .bigquote blockquote { letter-spacing: 0; line-height: 1.6; }
.spotlight { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px); align-items: center; }
.spot-photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 724 / 893;
  background: radial-gradient(110% 80% at 50% 10%, #2a2a40 0%, var(--ink) 70%); box-shadow: var(--shadow); }
.spot-photo::before { content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(181, 37, 42, .35), rgba(181, 37, 42, 0)); }
.spot-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.spot-body h2 { margin-bottom: 6px; }
.spot-role { display: block; font-size: 13px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--crimson); margin-bottom: 18px; }
.spot-body p { color: var(--grey); }
.spot-body .lede { color: var(--ink); }
.spot-cta { margin: 22px 0 0; }
.spot-body .socials { margin-top: 0; }
.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kit-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 18px; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow); transition: transform .14s ease, border-color .14s ease; }
.kit-item:hover { transform: translateY(-3px); border-color: var(--crimson); }
.kit-item > span:last-child { font-size: 14px; color: var(--grey); }
.kit-item b::after { content: "  \2193"; color: var(--crimson); }
.kit-thumb { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: var(--mist); margin-bottom: 12px; }
.kit-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kit-thumb.light img, .kit-thumb.dark img { object-fit: contain; padding: 18px; }
.kit-thumb.dark { background: var(--ink); }
@media (max-width: 860px) {
  .spotlight { grid-template-columns: 1fr; }
  .spot-photo { max-width: 420px; }
  .kit { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .kit { grid-template-columns: 1fr; }
  .badge img { height: 42px; }
}

/* Blog post (kuberax-copyright-registered.html): reuses .release, adds the chat, the certificate and the big line */
.post h1 { font-size: clamp(32px, 4.4vw, 52px); margin: 10px 0 14px; }
.post .byline a { color: var(--ink); font-weight: 700; text-decoration: none; }
.post .post-h { font-size: clamp(22px, 2.4vw, 28px); margin: 44px 0 12px; }
.post .chat { display: grid; gap: 10px; margin: 18px 0 22px; }
.post .chat p { margin: 0; padding: 12px 18px; border-radius: 18px; max-width: 30ch; font-weight: 600; }
.post .chat-out { justify-self: end; background: var(--crimson); color: #fff; border-bottom-right-radius: 6px; }
.post .chat-in { justify-self: start; background: var(--mist); color: var(--ink); border-bottom-left-radius: 6px; }
.post .cert { margin: 30px auto; max-width: 520px; }
.post .cert img { width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(28, 28, 46, .12); }
.post .cert figcaption { margin-top: 12px; font-size: 14px; color: var(--grey); text-align: center; }
.post .post-big { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.35;
  color: var(--ink); margin: 28px 0; }
.post .plaque { margin: 8px 0 10px; }

/* Launch countdown (index.html, top of the page until 9 Oct 2026, then removed by its script) */
.launch { position: relative; overflow: hidden; color: #fff; padding: 0;
  background: radial-gradient(120% 160% at 85% 0%, rgba(181, 37, 42, .55) 0%, rgba(181, 37, 42, 0) 55%),
              radial-gradient(90% 140% at 0% 100%, rgba(230, 168, 23, .14) 0%, rgba(230, 168, 23, 0) 60%),
              var(--ink);
  max-height: 400px; transition: max-height .8s ease, opacity .6s ease; }
.launch[hidden] { display: none; }
.launch.launch-done { max-height: 0; opacity: 0; }
.launch-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px;
  padding-block: 18px; flex-wrap: wrap; }
.launch-copy { display: grid; gap: 4px; }
.launch-live { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: #f3c9ca; }
.launch-live i { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f;
  box-shadow: 0 0 0 0 rgba(255, 90, 95, .6); animation: launch-pulse 2s ease-out infinite; }
.launch-title { margin: 0; font-size: clamp(17px, 1.7vw, 21px); font-weight: 500; color: #e9e4dd; }
.launch-title b { color: #fff; font-weight: 800; }
.launch-clock { display: flex; align-items: flex-start; gap: 10px; }
.launch-unit { display: grid; justify-items: center; gap: 7px; }
.launch-unit > span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #b9b3ab; }
.launch-tile { display: flex; gap: 3px; padding: 6px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 24px rgba(0, 0, 0, .25); }
.launch-digit { position: relative; display: block; width: 1.05em; height: 1.35em; overflow: hidden;
  font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.35em; text-align: center;
  font-variant-numeric: tabular-nums; border-radius: 8px; background: rgba(0, 0, 0, .28); }
.launch-digit::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: rgba(0, 0, 0, .35); }
.launch-digit > span { position: absolute; inset: 0; }
.launch-digit .next { animation: launch-in .6s cubic-bezier(.22, 1, .36, 1) both; }
.launch-digit .out { animation: launch-out .6s cubic-bezier(.22, 1, .36, 1) both; }
.launch-sep { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; color: rgba(255, 255, 255, .35);
  line-height: 1; padding-top: .45em; }
.launch-cta { justify-self: start; margin-top: 2px; color: #f3c9ca; font-weight: 700; font-size: 14px;
  text-decoration: none; border-bottom: 1px solid rgba(243, 201, 202, .35); transition: color .2s ease, border-color .2s ease; }
.launch-cta:hover { color: #fff; border-color: #fff; }
@keyframes launch-in { from { transform: translateY(-100%); opacity: 0; filter: blur(2px); }
                       to { transform: translateY(0); opacity: 1; filter: blur(0); } }
@keyframes launch-out { from { transform: translateY(0); opacity: 1; }
                        to { transform: translateY(60%); opacity: 0; filter: blur(2px); } }
@keyframes launch-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 95, .6); }
                          100% { box-shadow: 0 0 0 10px rgba(255, 90, 95, 0); } }
@media (max-width: 860px) {
  .launch-inner { justify-content: center; text-align: center; gap: 16px; padding-block: 18px 20px; }
  .launch-copy { justify-items: center; }
  .launch-cta { justify-self: center; }
}
@media (max-width: 420px) {
  .launch-clock { gap: 6px; }
  .launch-tile { padding: 4px; gap: 2px; border-radius: 11px; }
  .launch-digit { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .launch-digit .next, .launch-digit .out, .launch-live i { animation: none; }
  .launch-digit .out { display: none; }
}