/* ==========================================================================
   Mirentha — the main pages. 2026-10 redesign ("Drawn to measure").

   The homepage, the service pages, audits, the Apps page, contact, the
   legal pages and the 404. chrome.css (loaded first) holds the tokens,
   the menu bar and the footer; this file holds everything between them.

   The idea: every page is drawn the way the M is, on construction lines
   you can see. Hairline guides, ruled seams between sections ticked on
   the grid, Martian Mono for the drawing's annotations, and every display
   heading ends on the coral dot. Outfit throughout: 500 for headings,
   300 for quotes and big numbers, 400 for reading.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--mx-paper);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mx-header-h) + 12px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.mx-site {
  margin: 0;
  background: var(--mx-paper);
  color: var(--mx-ink);
  font-family: var(--mx-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
.mx-site :where(h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl, dd) { margin: 0; }
.mx-site :where(img) { display: block; max-width: 100%; height: auto; }
/* Zero-specificity scope, so components (buttons, the menu bar, the footer)
   set their own link colours without a fight. */
:where(.mx-site) a { color: var(--mx-teal); }
:where(.mx-site) a:hover { color: var(--mx-teal-deep); }
.mx-site :focus-visible { outline: 2px solid var(--mx-teal); outline-offset: 3px; border-radius: 4px; }
.mx-site ::selection { background: rgba(213, 167, 63, .35); }

.wrap { max-width: var(--mx-max); margin: 0 auto; padding: 0 var(--mx-pad); position: relative; }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }

/* --- Type ---------------------------------------------------------------- */

.h2 {
  font-weight: 500;
  font-size: clamp(38px, 4.1vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h3 {
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.lede { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--mx-ink-2); max-width: 31em; text-wrap: pretty; }
.body { font-size: 16px; line-height: 1.6; color: var(--mx-ink-2); max-width: 32em; text-wrap: pretty; }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: var(--mx-teal);
  font: 500 15px/1 var(--mx-sans);
  text-decoration: none;
  border-bottom: 1px solid rgba(4, 96, 129, .35);
  padding-bottom: 6px;
  transition: color .2s ease, border-color .2s ease;
}
.tlink:hover { color: var(--mx-teal-deep); border-bottom-color: var(--mx-teal-deep); }
.tlink span[aria-hidden], .mx-btn span[aria-hidden] { transition: transform .25s var(--mx-ease); }
.tlink:hover span[aria-hidden], .mx-btn:hover span[aria-hidden] { transform: translateX(3px); }

/* --- Sections and their seams ------------------------------------------- */

.sec { position: relative; padding: 0 0 104px; }
.sec--band { background: var(--mx-band); }
.sec--night { background: var(--mx-night); color: var(--mx-on-night); }
.seam {
  height: 9px;
  border-top: 1px solid rgba(4, 96, 129, .22);
  background-image: repeating-linear-gradient(90deg, rgba(4, 96, 129, .38) 0 1px, transparent 1px calc(100% / 24));
}
.sec--night .seam, .seam--dk {
  border-top-color: rgba(127, 196, 222, .2);
  background-image: repeating-linear-gradient(90deg, rgba(127, 196, 222, .32) 0 1px, transparent 1px calc(100% / 24));
}
.sec__label { padding-top: 22px; color: var(--mx-ink-3); }
.sec--night .sec__label { color: var(--mx-on-night-3); }
.sec__head { margin-top: 56px; align-items: end; row-gap: 24px; }
.sec__head .h2 { grid-column: 1 / span 6; }
.sec__head .h2--wide { grid-column: 1 / span 7; }
.sec__head .lede, .sec__head .body { grid-column: 8 / span 5; font-size: 17px; }
.sec--night .lede, .sec--night .body { color: var(--mx-on-night-2); }

/* --- Homepage hero: the mark, drawn on its construction lines ------------ */

.hero { position: relative; background: var(--mx-paper); }
.hero__stage { position: relative; height: 100svh; min-height: 640px; max-height: 1100px; overflow: hidden; }
.hero__frame {
  --mh: min(620px, calc(100svh - var(--mx-header-h) - 150px));
  --mt: calc(var(--mx-header-h) + max(28px, (100svh - var(--mx-header-h) - var(--mh)) / 2 - 18px));
  position: relative;
  height: 100%;
}
.hero__m {
  position: absolute;
  right: max(24px, calc((100% - var(--mx-max)) / 2 + var(--mx-pad) - 32px));
  top: var(--mt);
  height: var(--mh);
  width: calc(var(--mh) * 1150 / 1090);
  overflow: visible;
}
.hero__copy {
  position: absolute;
  z-index: 2;
  left: max(var(--mx-pad), calc((100% - var(--mx-max)) / 2 + var(--mx-pad)));
  top: var(--mt);
  height: var(--mh);
  width: min(680px, 50vw);
}
/* The copy hangs on the M's own lines: the eyebrow sits on the apex line
   (14.7% down the mark), the headline under it, the standfirst below the
   valley line (60.6%) and the buttons straddle the base line (88.1%). */
.hero__eyebrow { position: absolute; left: 0; top: calc(14.7% - 26px); display: flex; align-items: center; gap: 14px; color: var(--mx-ink-3); }
.hero__eyebrow i { width: 18px; height: 1px; background: currentColor; }
.hero__title {
  position: absolute;
  left: 0;
  top: calc(14.7% + 26px);
  font-weight: 500;
  font-size: clamp(44px, min(6.4vw, calc((var(--mh) * .459 - 48px) / 2)), 92px);
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.hero__lede { position: absolute; left: 0; top: calc(60.6% + 22px); max-width: 33em; font-size: clamp(16px, 1.3vw, 19px); }
.hero__actions { position: absolute; left: 0; top: calc(88.1% - 26px); display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.hero__foot {
  position: absolute;
  left: 0; right: 0;
  bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--mx-ink-3);
}
.hero__foot p { display: flex; align-items: center; gap: 12px; }
.hero__foot i { width: 1px; height: 28px; background: var(--mx-teal); }

/* The mark's parts */
.mk-guides { fill: none; stroke: var(--mx-teal); stroke-opacity: .2; stroke-width: 1; }
.mk-guides .mk-long { stroke-opacity: .17; }
.mk-dims { fill: none; stroke: var(--mx-teal); stroke-opacity: .55; stroke-width: 1; }
.mk-labels { fill: var(--mx-ink-3); font-family: var(--mx-mono); font-size: 19px; letter-spacing: .04em; }
.mk-ghost { fill: none; stroke: var(--mx-ink); stroke-linecap: round; opacity: .06; }
.mk-ink path { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.mk-dot { fill: var(--mx-coral); }

/* Before site.js takes over, the head script hides the ink (js-m) so the
   finished mark never flashes up and vanishes. If site.js never arrives,
   the head script gives the class back after four seconds. */
.js-m .mk-ink path, .js-m .mk-dot, .js-m [data-at] { opacity: 0; }

/* Between tablet and small laptop the copy and the mark share less room:
   the mark is held to 46% of the width and the headline scales with it,
   so the type never runs into the left leg. */
@media (min-width: 960px) and (max-width: 1279px) {
  .hero__frame { --mh: min(620px, calc(100svh - var(--mx-header-h) - 150px), calc(46vw * 1090 / 1150)); }
  .hero__copy { width: 45vw; }
  .hero__title { font-size: clamp(40px, min(5.1vw, calc((var(--mh) * .459 - 48px) / 2)), 92px); }
  .hero__lede { max-width: 100%; top: calc(60.6% + 16px); font-size: 15px; line-height: 1.5; }
  .hero__actions { top: calc(88.1% - 20px); }
  .hero__actions .mx-btn { height: 44px; }
}

/* Scroll build on wide screens: the hero holds for 80% of a screen while
   site.js draws the strokes. Without JS, or with reduced motion, the mark
   is simply shown finished. */
html.m-scroll .hero { height: calc(100svh + 80svh); }
html.m-scroll .hero__stage { position: sticky; top: 0; }

@media (max-width: 959px) {
  .hero__stage { height: auto; min-height: 0; max-height: none; padding: calc(var(--mx-header-h) + 20px) 0 56px; }
  .hero__frame { height: auto; display: flex; flex-direction: column; }
  .hero__m { position: relative; right: auto; top: auto; order: -1; width: min(300px, 74vw); height: auto; aspect-ratio: 1150 / 1090; align-self: center; }
  .hero__copy { position: static; width: auto; height: auto; margin-top: 30px; padding: 0 var(--mx-pad); display: flex; flex-direction: column; }
  .hero__eyebrow, .hero__title, .hero__lede, .hero__actions { position: static; }
  .hero__eyebrow { font-size: 10px; gap: 8px; }
  .hero__eyebrow i { width: 10px; }
  .hero__title { margin-top: 16px; font-size: clamp(38px, 11.6vw, 60px); line-height: 1.02; white-space: normal; }
  .hero__lede { margin-top: 20px; font-size: 17px; }
  .hero__actions { margin-top: 26px; flex-direction: column; align-items: stretch; gap: 8px; }
  .hero__actions .mx-btn { height: 54px; font-size: 16px; }
  .hero__actions .tlink { align-self: center; border: 0; min-height: 44px; }
  .hero__foot { display: none; }
  .mk-labels, .mk-dims { display: none; }
}

/* --- 02 The apps ------------------------------------------------------------ */

.apps {
  list-style: none;
  margin: 72px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 56px;
}
.app { display: flex; flex-direction: column; gap: 14px; color: var(--mx-ink); text-decoration: none; }
.app:hover { color: var(--mx-ink); }
.app img {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(13, 37, 48, .06), 0 10px 24px -14px rgba(13, 37, 48, .35);
  transition: transform .3s var(--mx-ease), box-shadow .3s var(--mx-ease);
}
.app:hover img { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(13, 37, 48, .06), 0 16px 30px -16px rgba(13, 37, 48, .45); }
.app__text { display: flex; flex-direction: column; gap: 6px; }
.app__name { font-size: 17px; font-weight: 500; line-height: 1.3; }
.app__line { font-size: 14px; line-height: 1.45; color: var(--mx-ink-2); }
.app__status { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--mx-ink-3); }
.app__status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; border: 1px solid currentColor; }
.app__status.is-live { color: var(--mx-teal); }
.app__status.is-live::before { width: 7px; height: 7px; border: 0; background: currentColor; }
.apps-foot { margin-top: 72px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.apps-foot .mx-mono { color: var(--mx-ink-3); }

@media (max-width: 1199px) { .apps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 699px) {
  /* A home screen: four across, the name under each icon. */
  .apps { margin-top: 34px; column-gap: 12px; row-gap: 26px; }
  .app { align-items: center; gap: 8px; }
  .app img { width: 64px; height: 64px; border-radius: 15px; }
  .app__text { align-items: center; }
  .app__name { font-size: 12.5px; font-weight: 400; display: flex; align-items: center; gap: 5px; }
  .app__line, .app__status { display: none; }
  .app.is-live .app__name::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--mx-teal); }
  .apps-foot { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--mx-line); flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --- 03 Services ------------------------------------------------------------- */

.svcs { margin-top: 72px; display: flex; flex-direction: column; }
.svc { position: relative; border-top: 1px solid var(--mx-line); min-height: 300px; }
.svc:last-child { border-bottom: 1px solid var(--mx-line); }
.svc__plate { position: absolute; top: 1px; bottom: 0; right: calc(var(--mx-pad) * -1); width: 58%; overflow: hidden; pointer-events: none; }
.svc__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
.svc__body { position: relative; padding: 40px 0 44px; }
.svc__num { grid-column: 1 / span 1; padding-top: 10px; color: var(--mx-ink-3); }
.svc__text { grid-column: 2 / span 5; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.svc__kind { color: var(--mx-teal); }
.svc__text .tlink { margin-top: 6px; }
.svc__text strong { color: var(--mx-ink); font-weight: 500; }
.svc--audit { min-height: 340px; }

@media (max-width: 959px) {
  .svc { min-height: 0; }
  .svc__plate { position: relative; inset: auto; right: auto; width: auto; height: 176px; margin: 0 calc(var(--mx-pad) * -1); }
  .svc__plate img { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%); }
  .svc__body { padding: 8px 0 36px; }
  .svc__num { display: none; }
  .svc__text { grid-column: 1 / -1; gap: 12px; }
  .svc--audit .svc__plate { display: none; }
  .svc--audit .svc__body { padding-top: 32px; }
}

/* The AI answer, asked three times: used on the homepage's audits row and
   the audits page. Sized in em so one font-size scales the whole drawing. */
.answers { position: absolute; font-size: 16px; width: 37em; height: 17em; }
.answers__sheet {
  position: absolute;
  width: 22.5em;
  min-height: 12.25em;
  background: #FFFFFF;
  border: 1px solid rgba(4, 96, 129, .16);
  border-radius: .4em;
}
.answers__sheet:nth-child(1) { left: 0; top: 0; opacity: .45; }
.answers__sheet:nth-child(2) { left: 2.2em; top: 1.6em; opacity: .75; }
.answers__sheet:nth-child(3) {
  left: 4.4em;
  top: 3.2em;
  padding: 1.15em 1.25em 1.25em;
  border-color: rgba(4, 96, 129, .22);
  box-shadow: 0 1.1em 2.5em -1.75em rgba(13, 37, 48, .35);
  display: flex;
  flex-direction: column;
  gap: .75em;
}
.answers .mx-mono { font-size: .625em; color: var(--mx-ink-3); }
.answers__q { font-size: .94em; color: var(--mx-ink); }
.answers__rows { display: grid; grid-template-columns: .9em 1fr; align-items: center; gap: .5em .65em; }
.answers__rows i { display: block; height: .5em; border-radius: .25em; background: rgba(13, 37, 48, .13); }
.answers__miss { color: var(--mx-teal) !important; border: 1px dashed rgba(4, 96, 129, .5); border-radius: .25em; padding: .8em 1em; }
.answers__callout { position: absolute; left: 26.9em; top: 13.2em; display: flex; align-items: center; gap: .5em; }
.answers__callout i { width: 2.75em; height: 1px; background: var(--mx-teal); }
.answers__callout .mx-mono { width: 15em; font-size: .6875em; color: var(--mx-teal); }
.svc--audit .answers { left: 6%; top: 40px; font-size: 15px; }

/* --- 04 Approach ------------------------------------------------------------- */

.sec--approach { overflow: hidden; }
.sec__wash { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .07; filter: grayscale(.4); pointer-events: none; }
.sec--approach > :not(.sec__wash) { position: relative; }
.dimline { position: relative; margin-top: 88px; height: 24px; }
.dimline::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--mx-teal); }
.dimline > i { position: absolute; top: -2px; width: 1px; height: 28px; background: var(--mx-teal); }
.dimline > i:first-of-type { left: 0; }
.dimline > i:last-of-type { right: 0; }
.dimline svg { position: absolute; top: 6px; width: 12px; height: 12px; fill: var(--mx-teal); }
.dimline svg:first-of-type { left: 0; }
.dimline svg:last-of-type { right: 0; }
.dimline .mx-mono { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 3px 16px; background: var(--mx-band); color: var(--mx-teal); white-space: nowrap; }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; row-gap: 32px; }
.steps li { display: flex; flex-direction: column; gap: 12px; padding-right: 12px; }
.steps .mx-mono { color: var(--mx-teal); }
.steps h3 { font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.steps p { font-size: 15px; line-height: 1.6; color: var(--mx-ink-2); }
@media (max-width: 959px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .steps { grid-template-columns: 1fr; } .dimline { margin-top: 56px; } }

/* --- 05 Principles (night) ------------------------------------------------- */

.principles { grid-column: 6 / span 7; display: flex; flex-direction: column; }
.principle { display: grid; grid-template-columns: 56px 1fr; padding: 36px 0; border-top: 1px solid var(--mx-line-dk); }
.principle:first-child { padding-top: 0; border-top: 0; }
.principle:last-child { padding-bottom: 0; }
.principle .mx-mono { color: var(--mx-gold); padding-top: 10px; }
.principle h3 { font-size: clamp(24px, 2.1vw, 30px); font-weight: 500; line-height: 1.2; letter-spacing: -0.025em; }
.principle p { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--mx-on-night-2); }
.sec--principles .sec__head { align-items: start; }
.sec--principles .sec__head .h2 { grid-column: 1 / span 4; }

/* --- 06 About ------------------------------------------------------------------- */

.about { margin-top: 64px; align-items: start; row-gap: 48px; }
.about__quote { grid-column: 1 / span 6; }
.about__quote blockquote {
  font-weight: 300;
  font-size: clamp(34px, 3.5vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.about__quote figcaption { margin-top: 28px; color: var(--mx-ink-3); }
.about__text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.about__text h2 { font-size: 24px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.about__text .mx-btn { margin-top: 10px; }
.stats { margin: 96px 0 0; padding-top: 36px; border-top: 1px solid var(--mx-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; row-gap: 32px; }
.stats div { display: flex; flex-direction: column-reverse; gap: 10px; }
.stats dt { color: var(--mx-ink-3); }
.stats dd { font-weight: 300; font-size: clamp(56px, 5vw, 72px); line-height: 1; letter-spacing: -0.04em; }
@media (max-width: 959px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 64px; } }

/* --- 07 FAQ -------------------------------------------------------------------- */

.faq-layout { margin-top: 56px; align-items: start; row-gap: 40px; }
.faq-layout > div:first-child { grid-column: 1 / span 4; }
.faq-layout .h2 { font-size: clamp(36px, 3.4vw, 48px); }
.faq-layout .body { margin-top: 20px; }
.faqs { grid-column: 6 / span 7; border-bottom: 1px solid rgba(4, 96, 129, .18); }
.faq { border-top: 1px solid rgba(4, 96, 129, .18); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  list-style: none;
  font-size: 19px;
  line-height: 1.4;
  color: var(--mx-ink);
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 16px; height: 16px; stroke: var(--mx-teal); stroke-width: 1.5; stroke-linecap: round; fill: none; transition: transform .3s var(--mx-ease); }
.faq[open] summary svg { transform: rotate(45deg); }
.faq summary:hover { color: var(--mx-teal-deep); }
.faq p { margin: -6px 0 28px; max-width: 36em; font-size: 16px; line-height: 1.65; color: var(--mx-ink-2); }

/* --- 08 Contact (night) ------------------------------------------------------- */

.contact-layout { margin-top: 56px; align-items: start; row-gap: 48px; }
.contact__text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 22px; }
.next { list-style: none; margin: 18px 0 0; padding: 0; }
.next li { display: grid; grid-template-columns: 48px 1fr; padding: 18px 0; border-top: 1px solid var(--mx-line-dk); font-size: 16px; line-height: 1.55; }
.next li:last-child { border-bottom: 1px solid var(--mx-line-dk); }
.next .mx-mono { color: var(--mx-gold); padding-top: 3px; }
.form {
  position: relative;
  grid-column: 7 / span 6;
  background: var(--mx-night-2);
  border-radius: 20px;
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: 14px; color: var(--mx-on-night-2); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--mx-night);
  border: 1px solid rgba(127, 196, 222, .22);
  border-radius: 10px;
  color: var(--mx-on-night);
  font: 400 16px/1.4 var(--mx-sans);
  padding: 14px 16px;
  min-height: 52px;
  transition: border-color .2s ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239FB3BB' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--mx-teal-light); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--mx-teal-light); outline-offset: 2px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .cf-turnstile { grid-column: 1 / -1; }
.form__end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.form__end p { font-size: 13px; color: var(--mx-on-night-3); }
.form__end p a { color: var(--mx-teal-light); }
.form__status { grid-column: 1 / -1; font-size: 14px; color: var(--mx-on-night-2); min-height: 1em; }
.form__status.is-error { color: #F08A7E; }
.form .mx-btn[disabled] { opacity: .7; cursor: default; }
@media (max-width: 699px) {
  .form { grid-template-columns: 1fr; padding: 24px 20px; }
  .form__end { flex-direction: column; align-items: stretch; }
  .form__end .mx-btn { height: 54px; }
}

/* --- Layout breaks for the grid sections ------------------------------------- */

@media (max-width: 959px) {
  .g12 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
  .g12 > * { grid-column: 1 / -1 !important; }
  .sec { padding-bottom: 72px; }
  .sec__head { margin-top: 36px; }
  .apps-foot .tlink { border: 0; }
}

/* ==========================================================================
   Service pages, audits and contact
   ========================================================================== */

.page-hero { position: relative; min-height: 660px; padding-top: var(--mx-header-h); overflow: hidden; background: var(--mx-paper); }
.page-hero__guide { position: absolute; left: 0; right: 0; height: 1px; background: var(--mx-guide); }
.page-hero__plate { position: absolute; right: 0; top: calc(var(--mx-header-h) + 40px); width: 62%; height: 600px; pointer-events: none; }
.page-hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
  opacity: .9;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 58% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 58% 50%, #000 58%, transparent 100%);
}
.page-hero__text { position: relative; z-index: 2; max-width: var(--text-w, 600px); padding: 112px 0 96px; }
.crumbs { display: flex; gap: 12px; align-items: center; color: var(--mx-ink-3); }
.crumbs a { color: var(--mx-ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--mx-ink); }
.crumbs b { font-weight: 400; color: var(--mx-teal); }
.page-hero h1 {
  margin-top: 30px;
  font-weight: 500;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.page-hero .lede { margin-top: 48px; }
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-top: 40px; }
.page-hero__fig { position: absolute; right: var(--mx-pad); bottom: 30px; color: var(--mx-ink-3); }
.page-hero > .answers { right: var(--mx-pad); top: calc(var(--mx-header-h) + 92px); font-size: 19px; width: 32em; height: 24em; }
.page-hero > .answers__sheet { width: 23em; }
.page-hero > .answers__callout { left: 4.4em; top: 20em; width: 23em; flex-direction: column; gap: .6em; }
.page-hero > .answers__callout i { width: 100%; height: 1px; position: relative; }
.page-hero > .answers__callout i::before, .page-hero > .answers__callout i::after { content: ''; position: absolute; top: -6px; width: 1px; height: 13px; background: var(--mx-teal); }
.page-hero > .answers__callout i::before { left: 0; }
.page-hero > .answers__callout i::after { right: 0; }
.page-hero > .answers__callout .mx-mono { width: auto; text-align: center; font-size: .58em; }
@media (max-width: 1199px) { .page-hero > .answers { font-size: 15px; } }
@media (max-width: 959px) {
  .page-hero { min-height: 0; }
  .page-hero__plate { position: relative; top: auto; width: auto; height: 220px; margin-top: 8px; }
  .page-hero__plate img { -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 50%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 50%, transparent 100%); }
  .page-hero__text { padding: 40px 0 56px; }
  .page-hero .lede { margin-top: 24px; }
  .page-hero__actions { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 28px; }
  .page-hero__actions .mx-btn { height: 54px; }
  .page-hero__actions .tlink { align-self: center; border: 0; min-height: 44px; }
  .page-hero__fig, .page-hero__guide { display: none; }
  .page-hero > .answers { position: relative; right: auto; top: auto; margin: 32px 0 0 var(--mx-pad); font-size: min(14px, 3.4vw); width: 27em; height: 23em; }
}

/* The proof strip */
.proof { background: var(--mx-band); }
.proof__in { padding-top: 40px; padding-bottom: 44px; align-items: center; row-gap: 24px; }
.proof__text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 10px; }
.proof__text .mx-mono { color: var(--mx-ink-3); }
.proof__text h2 { font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
.proof__icons { grid-column: 7 / span 6; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 14px; }
.proof__icons img { width: 56px; height: 56px; border-radius: 13px; }
.proof__icons .tlink { margin-left: 12px; }
@media (max-width: 959px) { .proof__icons { justify-content: flex-start; } .proof__icons img { width: 48px; height: 48px; border-radius: 11px; } }

/* Three figures */
.figs { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 48px; }
.fig { display: flex; flex-direction: column; gap: 18px; }
.fig__img { height: 220px; border: 1px solid rgba(4, 96, 129, .18); border-radius: 4px; overflow: hidden; background: #FFFFFF; }
.fig__img img { width: 100%; height: 100%; object-fit: cover; opacity: .8; filter: saturate(.6); }
.fig figcaption { display: flex; flex-direction: column; gap: 10px; }
.fig .mx-mono { color: var(--mx-teal); }
.fig h3 { font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.fig p { font-size: 15px; line-height: 1.6; color: var(--mx-ink-2); }
@media (max-width: 959px) { .figs { grid-template-columns: 1fr; } .fig__img { height: 200px; } }

.sec__note { margin-top: 56px; font-size: 16px; line-height: 1.6; color: var(--mx-ink-2); }

/* The closing band */
.cta { position: relative; overflow: hidden; background: var(--mx-night); color: var(--mx-on-night); }
.cta__in { padding-top: 96px; padding-bottom: 104px; }
.cta__text { max-width: 680px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.cta h2 { font-weight: 500; font-size: clamp(38px, 4.1vw, 58px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.cta p { font-size: 18px; line-height: 1.6; color: var(--mx-on-night-2); }
.cta .mx-btn { margin-top: 12px; }
.cta__mark { position: absolute; right: var(--mx-pad); top: 60px; width: 340px; height: auto; overflow: visible; pointer-events: none; }
@media (max-width: 959px) { .cta__mark { display: none; } .cta__in { padding-top: 64px; padding-bottom: 72px; } }

/* Audits page: the two audits, side by side */
.two { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; row-gap: 64px; }
.audit { display: flex; flex-direction: column; gap: 18px; }
.audit .mx-mono { color: var(--mx-teal); }
.audit h2 { font-size: clamp(30px, 2.8vw, 40px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.pillars { list-style: none; margin: 10px 0 0; padding: 0; border-bottom: 1px solid rgba(4, 96, 129, .16); }
.pillars li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; padding: 18px 0; border-top: 1px solid rgba(4, 96, 129, .16); }
.pillars .mx-mono { padding-top: 3px; }
.pillars b { font-size: 17px; font-weight: 500; }
.pillars span:last-child { grid-column: 2; font-size: 15px; line-height: 1.55; color: var(--mx-ink-2); }
.audit__verdict { margin-top: 6px; font-size: 15px; line-height: 1.6; }
.audit__verdict b { font-weight: 500; }
.honest { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 40px; }
.honest div { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--mx-line-dk); }
.honest .mx-mono { color: var(--mx-gold); }
.honest h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.honest p { font-size: 15px; line-height: 1.65; color: var(--mx-on-night-2); }
.sec__h2 { margin-top: 56px; max-width: 16em; }
@media (max-width: 959px) { .two, .honest { grid-template-columns: 1fr; } }

/* Contact page */
.contact-hero { padding-top: var(--mx-header-h); background: var(--mx-paper); overflow: hidden; position: relative; }
.contact-hero .page-hero__text { max-width: 760px; }

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal { padding: calc(var(--mx-header-h) + 72px) 0 112px; background: var(--mx-paper); }
.legal__head { max-width: 760px; }
.legal__head h1 { margin-top: 24px; font-weight: 500; font-size: clamp(44px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.035em; }
.legal__head .mx-mono { color: var(--mx-ink-3); }
.legal__updated { margin-top: 20px; color: var(--mx-ink-3); }
.legal__body { margin-top: 64px; max-width: 760px; padding-top: 8px; border-top: 1px solid var(--mx-line); }
.legal__body h2 { margin: 56px 0 16px; font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; }
.legal__body h3 { margin: 32px 0 12px; font-size: 19px; font-weight: 500; }
.legal__body p, .legal__body li { font-size: 17px; line-height: 1.7; color: var(--mx-ink-2); }
.legal__body p + p { margin-top: 16px; }
.legal__body ul, .legal__body ol { margin: 16px 0; padding-left: 1.25em; }
.legal__body li + li { margin-top: 8px; }
.legal__body strong { color: var(--mx-ink); font-weight: 500; }
.legal__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal__body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
.legal__body th, .legal__body td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--mx-line); color: var(--mx-ink-2); }
.legal__body th { color: var(--mx-ink); font-weight: 500; }

/* ==========================================================================
   404: the construction lines, and nothing drawn on them
   ========================================================================== */

.lost { position: relative; min-height: 100svh; padding: calc(var(--mx-header-h) + 64px) 0 96px; overflow: hidden; background: var(--mx-paper); display: flex; align-items: center; }
.lost__mark { position: absolute; right: max(24px, calc(var(--mx-pad) - 32px)); top: 50%; transform: translateY(-46%); width: min(560px, 46vw); height: auto; overflow: visible; pointer-events: none; }
.lost__text { position: relative; z-index: 1; max-width: 600px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.lost__text .mx-mono { color: var(--mx-ink-3); }
.lost h1 { font-weight: 500; font-size: clamp(44px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.lost__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 12px; }
@media (max-width: 959px) {
  .lost { display: block; }
  .lost__mark { position: relative; right: auto; top: auto; transform: none; width: min(300px, 74vw); margin: 0 auto 32px; }
  .lost__links { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .lost__links .tlink { align-self: center; border: 0; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .app img, .tlink span[aria-hidden], .mx-btn span[aria-hidden], .faq summary svg { transition: none; }
}

.contact-hero__mark { top: calc(var(--mx-header-h) + 56px); width: 300px; }
.lost > .wrap { width: 100%; }

/* ==========================================================================
   Second pass, 2026-10-20: colour and motion below the hero.

   site.js sets each [data-scene] element's scroll progress as --p (0 to 1)
   and everything below is a function of it, mostly through clamp(). With
   reduced motion or without JS, --p keeps its default of 1, so every scene
   is simply shown finished.
   ========================================================================== */

@property --glow { syntax: '<color>'; inherits: true; initial-value: #4F6B41; }
[data-scene] { --p: 1; }
:root {
  --c-teal-deep: #03445B;
  --c-gold-tint: #F6EEDC;
  --c-coral-tint: #FBE4DE;
  --c-indigo: #2E3378;
  --c-indigo-deep: #1B1F4E;
}

/* --- 02 The shelf: the twelve apps, each in its own colours -------------- */

.shelf {
  --glow: #4F6B41;
  position: relative;
  background: var(--mx-night);
  color: var(--mx-on-night);
  transition: --glow .9s ease;
}
.shelf::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 58% at 66% 62%, color-mix(in srgb, var(--glow) 46%, transparent), transparent 72%),
    radial-gradient(36% 44% at 6% 100%, rgba(4, 96, 129, .42), transparent 72%);
  pointer-events: none;
}
.shelf__pin { position: relative; padding-bottom: 64px; }
.shelf__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 24px; align-items: end; }
.shelf__head > div:first-child { grid-column: 1 / span 6; }
.shelf__head .sec__label { color: var(--mx-on-night-3); }
.shelf__head .h2 { margin-top: 40px; }
.shelf__intro { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 18px; }
.shelf__intro .lede { color: var(--mx-on-night-2); font-size: 17px; }
.shelf__count { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.shelf__count .mx-mono { color: var(--mx-on-night-3); }
.shelf .tlink { color: var(--mx-teal-light); border-bottom-color: rgba(127, 196, 222, .4); }
.shelf .tlink:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; }

.shelf__window { position: relative; margin-top: 48px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shelf__window::-webkit-scrollbar { display: none; }
.shelf__track {
  --edge: max(var(--mx-pad), calc((100vw - var(--mx-max)) / 2 + var(--mx-pad)));
  list-style: none;
  margin: 0;
  padding: 28px var(--edge) 40px;
  display: flex;
  gap: 28px;
  width: max-content;
  will-change: transform;
}
.card { --k: 0; flex: none; width: clamp(264px, 22vw, 316px); scroll-snap-align: start; scroll-margin-left: var(--mx-pad); }
.card a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: clamp(360px, calc(100svh - 400px), 430px);
  padding: 26px 26px 24px;
  border-radius: 26px;
  background: var(--t);
  color: var(--mx-ink);
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 34px 70px -38px var(--a), 0 1px 0 rgba(255, 255, 255, .5) inset;
  transform: translateY(calc(var(--k) * 26px)) scale(calc(1 - var(--k) * .05));
  transition: box-shadow .3s ease;
}
.card a::before {
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: var(--a);
  opacity: .13;
}
.card a::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 64px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid var(--a);
  opacity: .22;
}
.card a:hover { box-shadow: 0 40px 80px -34px var(--a), 0 1px 0 rgba(255, 255, 255, .5) inset; }
.card__top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.card__top img { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 14px 28px -14px var(--a); }
.card__num { color: var(--a); font-size: 12px; }
.card__name { position: relative; z-index: 1; margin-top: 10px; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.card__line { position: relative; z-index: 1; flex: 1; font-size: 15px; line-height: 1.5; color: #344A54; }
.card__foot { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--a) 22%, transparent); }
.card__status { padding: 5px 10px; border-radius: 999px; font-size: 10px; color: var(--a); border: 1px solid color-mix(in srgb, var(--a) 45%, transparent); }
.card__status.is-live { background: var(--a); color: #FFFFFF; border-color: var(--a); }
.card__price { font-size: 13px; line-height: 1.4; color: #344A54; }
.card__cat { font-size: 10px; color: #4F6670; }

.shelf__ruler { position: relative; margin-top: 4px; display: none; }
.shelf__line { position: relative; height: 1px; background: rgba(127, 196, 222, .2); }
.shelf__line i { position: absolute; inset: 0; background: var(--mx-gold); transform-origin: left; transform: scaleX(var(--p)); }
.shelf__ruler ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; justify-content: space-between; }
.shelf__ruler li { font-family: var(--mx-mono); font-size: 10px; letter-spacing: .06em; color: var(--mx-on-night-3); transition: color .3s ease; }
.shelf__ruler li.is-on { color: var(--mx-gold); }

/* Wide screens with motion: the shelf holds still while the track slides.
   site.js sets the section's height to one screen plus the track's travel. */
html.m-pin .shelf__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  padding-top: calc(var(--mx-header-h) - 18px);   /* the label stays clear of the menu bar if it shows */
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}
html.m-pin .shelf__pin > .seam { display: none; }
html.m-pin .shelf__pin > .wrap { width: 100%; }   /* auto margins would shrink them in the flex column */
html.m-pin .shelf__window { flex: 1; display: flex; align-items: center; margin-top: 12px; overflow: visible; scroll-snap-type: none; }
html.m-pin .shelf__ruler { display: block; margin-bottom: 40px; }

@media (max-width: 959px) {
  .shelf__head > div:first-child, .shelf__intro { grid-column: 1 / -1; }
  .shelf__head { grid-template-columns: 1fr; }
  .shelf__head .h2 { margin-top: 28px; }
  .shelf__window { margin-top: 28px; }
  .shelf__track { padding: 20px var(--mx-pad) 32px; gap: 16px; }
  .card { width: min(300px, 78vw); }
  .card a { height: 400px; }
}

/* --- 03 Services: four colour panels that build themselves ---------------- */

.svcs2 { margin-top: 88px; display: flex; flex-direction: column; gap: 128px; }
.svc2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: center; }
.svc2__text { grid-column: 1 / span 5; grid-row: 1; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.svc2__text strong { color: var(--mx-ink); font-weight: 500; }
.svc2__text .tlink { margin-top: 6px; }
.svc2__num { color: var(--mx-teal); }
.svc2__panel { grid-column: 7 / span 6; grid-row: 1; position: relative; height: 460px; border-radius: 28px; overflow: hidden; isolation: isolate; }
.svc2--flip .svc2__text { grid-column: 8 / span 5; }
.svc2--flip .svc2__panel { grid-column: 1 / span 6; }

/* 3.1 Websites: a page drawn block by block, then its phone version */
.panel--web {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 48px),
    linear-gradient(140deg, #0A7AA3 0%, #046081 45%, var(--c-teal-deep) 100%);
}
.pweb { --win: clamp(0, calc(var(--p) * 6), 1); --ph: clamp(0, calc((var(--p) - .62) * 4), 1); position: absolute; inset: 0; }
.pweb__win {
  position: absolute;
  left: 7%; top: 11%;
  width: 68%; height: 76%;
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .55);
  opacity: var(--win);
  transform: translateY(calc((1 - var(--win)) * 30px));
}
.pweb__bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #EEF2F4; }
.pweb__bar i { width: 9px; height: 9px; border-radius: 50%; background: #E05E4F; }
.pweb__bar i:nth-child(2) { background: #D5A73F; }
.pweb__bar i:nth-child(3) { background: #5FB3D3; }
.pweb__bar span { margin-left: 12px; flex: 1; max-width: 46%; height: 12px; border-radius: 6px; background: #FFFFFF; }
.pweb__body {
  position: absolute;
  top: 30px; left: 0; right: 0; bottom: 0;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 10px 20px 20px 24px 30px minmax(0, 1fr);
  grid-template-areas:
    "nav nav nav nav nav nav"
    "h1 h1 h1 art art art"
    "h1b h1b h1b art art art"
    "txt txt txt art art art"
    "btn btn btn art art art"
    "c1 c1 c2 c2 c3 c3";
  gap: 10px 14px;
}
.blk {
  --s: clamp(0, calc((var(--p) - .1 - var(--d, 0) * .045) * 7), 1);
  --f: clamp(0, calc((var(--p) - .42 - var(--d, 0) * .03) * 7), 1);
  position: relative;
  border-radius: 6px;
  transform-origin: left center;
  transform: scaleX(var(--s));
  box-shadow: inset 0 0 0 1px rgba(4, 96, 129, .35);
}
.blk::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--fill); opacity: var(--f); }
.blk--nav { grid-area: nav; --fill: rgba(13, 37, 48, .12); }
.blk--h1 { grid-area: h1; --fill: #0D2530; }
.blk--h1b { grid-area: h1b; width: 72%; --fill: #0D2530; }
.blk--txt { grid-area: txt; --fill: rgba(13, 37, 48, .22); }
.blk--btn { grid-area: btn; width: 56%; border-radius: 999px; --fill: #046081; }
.blk--art { grid-area: art; border-radius: 10px; overflow: hidden; --fill: #D5A73F; }
.blk--art i { position: absolute; z-index: 1; right: 16%; top: 16%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #E05E4F; opacity: var(--f); }
.blk--c1 { grid-area: c1; --fill: #DCEEF5; }
.blk--c2 { grid-area: c2; --fill: #F6EEDC; }
.blk--c3 { grid-area: c3; --fill: #FBE4DE; }
.pweb__phone {
  position: absolute;
  right: 6%; bottom: 8%;
  width: 25%; height: 72%;
  padding: 10px 9px;
  border-radius: 26px;
  background: #FFFFFF;
  border: 7px solid #0B1D25;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .6);
  opacity: var(--ph);
  transform: translateY(calc((1 - var(--ph)) * 60px));
}
.pweb__phone .blk { --s: 1; --f: 1; transform: none; box-shadow: none; flex: none; }
.pweb__phone .blk--art { height: 32%; }
.pweb__phone .blk--h1 { height: 11px; }
.pweb__phone .blk--txt { height: 8px; width: 80%; }
.pweb__phone .blk--btn { height: 16px; width: 60%; }
.pweb__phone .blk--c1, .pweb__phone .blk--c2 { flex: 1; }

/* 3.2 Apps: a phone filling with the real icons, more floating past */
.panel--apps { background: radial-gradient(circle at 28% 18%, #EDCB78 0%, #D5A73F 42%, #B9852A 100%); }
.pphone {
  position: absolute;
  left: 50%; top: 50%;
  width: 232px; height: 404px;
  margin: -202px 0 0 -116px;
  padding: 11px;
  border-radius: 42px;
  background: #0B1D25;
  box-shadow: 0 46px 80px -34px rgba(80, 45, 0, .65);
  transform: translateY(calc((1 - var(--p)) * 46px));
}
.pphone__screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  padding: 40px 16px;
  background: linear-gradient(165deg, #2D7FA3 0%, #1B2340 72%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 16px;
  align-content: start;
}
.pphone__screen img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 23%;
  transform: scale(clamp(0, calc((var(--p) - .12 - var(--i) * .035) * 6), 1));
}
.float {
  position: absolute;
  z-index: 2;
  border-radius: 22%;
  box-shadow: 0 22px 40px -18px rgba(70, 40, 0, .6);
  transform: translateY(calc((1 - var(--p)) * var(--y))) rotate(var(--r));
}
.f1 { left: 7%; top: 10%; width: 96px; height: 96px; --y: 150px; --r: -12deg; }
.f2 { right: 8%; top: 16%; width: 88px; height: 88px; --y: 240px; --r: 10deg; }
.f3 { left: 11%; bottom: 11%; width: 80px; height: 80px; --y: 90px; --r: 8deg; }
.f4 { right: 13%; bottom: 9%; width: 72px; height: 72px; --y: 190px; --r: -9deg; }

/* 3.3 AI: a recap whose names are picked out and filed */
.panel--ai { background: radial-gradient(circle at 80% 10%, #4A50A8 0%, var(--c-indigo) 40%, var(--c-indigo-deep) 100%); }
.pai { position: absolute; inset: 0; padding: 44px 40px 56px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; }
.pai__note { padding: 22px 24px 24px; border-radius: 14px; background: #FBF8F1; color: var(--mx-ink); transform: rotate(-1.5deg); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .65); }
.pai__note .mx-mono { margin-bottom: 12px; font-size: 10px; color: var(--mx-ink-3); }
.pai__text { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; isolation: isolate; }
.pai__text .w { position: relative; opacity: clamp(.12, calc((var(--p) - .04 - var(--i) * .022) * 6), 1); }
.pai__text .w.is-n, .pai__text .w.is-p, .pai__text .w.is-t { font-weight: 500; }
.pai__text .w.is-n::before, .pai__text .w.is-p::before, .pai__text .w.is-t::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 -3px;
  border-radius: 5px;
  background: var(--hl);
  opacity: calc(clamp(0, calc((var(--p) - .42) * 6), 1) * .6);
}
.is-n { --hl: #E8B84E; }
.is-p { --hl: #7FC4DE; }
.is-t { --hl: #F08A7E; }
.pai__filed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pai__filed li {
  --s: clamp(0, calc((var(--p) - .55 - var(--k) * .08) * 6), 1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #FFFFFF;
  opacity: var(--s);
  transform: translateX(calc((1 - var(--s)) * -40px));
}
.pai__filed b { font-weight: 500; font-size: 16px; }
.pai__filed .mx-mono { padding: 4px 8px; border-radius: 999px; font-size: 10px; color: var(--mx-ink); background: var(--hl); }
.pai__cap { position: absolute; left: 40px; bottom: 22px; color: rgba(255, 255, 255, .62); }

/* 3.4 Audits: a sample report builds itself. Nine recorded answers flip in
   (two name the firm), the count ticks up, the four pillar scores fill and
   the verdict settles on its place in the scale. Integers count via
   registered properties. */
@property --rc { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --sv { syntax: '<integer>'; inherits: false; initial-value: 0; }
.panel--audit {
  background:
    radial-gradient(circle at 90% 6%, rgba(224, 94, 79, .5), transparent 44%),
    radial-gradient(circle at 0% 100%, rgba(4, 96, 129, .55), transparent 52%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 40px),
    linear-gradient(160deg, #15323E, #0B1D25 70%);
  color: var(--mx-on-night);
}
.rep {
  position: absolute;
  inset: 0;
  padding: 30px 32px 32px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "head head" "runs pillars" "runs verdict";
  gap: 22px 30px;
}
.rep__head { grid-area: head; display: flex; flex-direction: column; gap: 8px; opacity: clamp(0, calc(var(--p) * 10), 1); }
.rep__head .mx-mono { font-size: 10px; color: #F08A7E; }
.rep__q { font-size: 18px; color: #FFFFFF; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rep__q em { font-style: normal; font-size: 10px; color: var(--mx-on-night-3); }
.rep__runs { grid-area: runs; display: flex; flex-direction: column; gap: 18px; }
.rep__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; perspective: 700px; }
.rep__grid li {
  --s: clamp(0, calc((var(--p) - .1 - var(--i) * .03) * 9), 1);
  position: relative;
  height: 54px;
  padding: 10px 26px 10px 10px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  opacity: var(--s);
  transform-origin: top;
  transform: rotateX(calc((1 - var(--s)) * -85deg));
}
.rep__grid li i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.rep__grid li i:nth-child(1) { width: 90%; }
.rep__grid li i:nth-child(2) { width: 66%; }
.rep__grid li i:nth-child(3) { width: 78%; }
.rep__grid li::after { content: ''; position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-coral); box-shadow: 0 0 10px rgba(224, 94, 79, .8); }
.rep__grid li.is-named { background: rgba(127, 196, 222, .16); border-color: rgba(127, 196, 222, .9); box-shadow: 0 0 26px -6px rgba(127, 196, 222, .9); }
.rep__grid li.is-named i:nth-child(2) { background: #7FC4DE; }
.rep__grid li.is-named::after { background: #7FC4DE; box-shadow: 0 0 10px rgba(127, 196, 222, .9); }
.rep__count { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.rep__num {
  --rc: calc(clamp(0, calc((var(--p) - .22) * 100), 1) + clamp(0, calc((var(--p) - .34) * 100), 1));
  counter-reset: rc var(--rc);
  font-size: 64px;
  font-weight: 300;
  line-height: .9;
  letter-spacing: -0.04em;
  color: #FFFFFF;
}
.rep__num::after { content: counter(rc); }
.rep__of { font-size: 26px; font-weight: 300; color: var(--mx-on-night-3); }
.rep__count .mx-mono { flex-basis: 100%; font-size: 10px; color: var(--mx-on-night-2); }
.rep__pillars { grid-area: pillars; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.rep__pillars li { --f: clamp(0, calc((var(--p) - .46 - var(--j) * .06) * 6), 1); display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 7px 10px; opacity: clamp(.25, calc(var(--f) * 4), 1); }
.rep__pillars span { font-size: 13px; color: var(--mx-on-night-2); }
.rep__pillars b { --sv: calc(var(--v) * var(--f)); counter-reset: sv var(--sv); font-family: var(--mx-mono); font-size: 11px; font-weight: 400; color: #FFFFFF; }
.rep__pillars b::after { content: counter(sv) " / 10"; }
.rep__pillars i { grid-column: 1 / -1; position: relative; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.rep__pillars i::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 10%); border-radius: 4px; background: var(--c); box-shadow: 0 0 12px var(--c); transform-origin: left; transform: scaleX(var(--f)); }
.rep__verdict {
  --s: clamp(0, calc((var(--p) - .76) * 8), 1);
  --h: clamp(0, calc((var(--p) - .88) * 10), 1);
  grid-area: verdict;
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 9px;
  opacity: var(--s);
  transform: translateY(calc((1 - var(--s)) * 10px));
}
.rep__verdict .mx-mono { font-size: 10px; color: var(--mx-on-night-3); }
.rep__scale { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; overflow: hidden; }
.rep__scale li { padding: 8px 0 9px; text-align: center; font-size: 13px; color: var(--mx-on-night-3); }
.rep__scale li + li { border-left: 1px solid rgba(255, 255, 255, .14); }
.rep__scale li.is-on {
  color: rgba(255, 255, 255, calc(.55 + var(--h) * .45));
  font-weight: 500;
  background: rgba(255, 255, 255, calc(var(--h) * .08));
  box-shadow: inset 0 -2px 0 rgba(232, 184, 78, var(--h));
}
.rep__verdict small { font-size: 12px; color: var(--mx-on-night-2); }

@media (max-width: 959px) {
  .svcs2 { margin-top: 48px; gap: 72px; }
  .svc2 { grid-template-columns: 1fr; }
  .svc2__panel, .svc2--flip .svc2__panel { grid-column: 1; grid-row: 1; height: 340px; border-radius: 22px; }
  .svc2__text, .svc2--flip .svc2__text { grid-column: 1; grid-row: 2; margin-top: 28px; }
  .pphone { width: 184px; height: 320px; margin: -160px 0 0 -92px; border-radius: 34px; padding: 9px; }
  .pphone__screen { border-radius: 26px; padding: 26px 14px; gap: 14px 12px; }
  .f1 { width: 70px; height: 70px; } .f2 { width: 64px; height: 64px; } .f3 { width: 58px; height: 58px; } .f4 { width: 52px; height: 52px; }
  .panel--ai { height: auto !important; }
  .pai { position: relative; inset: auto; grid-template-columns: 1fr; padding: 28px 22px 56px; gap: 20px; }
  .pai__cap { left: 22px; }
  .panel--audit { height: auto !important; }
  .rep { position: relative; inset: auto; padding: 24px 20px 28px; grid-template-columns: 1fr; grid-template-areas: "head" "runs" "pillars" "verdict"; }
}

/* --- 04 Approach: a warm band; the dimension line draws, lighting each step */

.approach {
  --l: clamp(0, calc((var(--p) - .12) * 1.6), 1);
  position: relative;
  overflow: hidden;
  background: var(--c-gold-tint);
}
.approach > :not(.arcs) { position: relative; }
.approach .dimline { display: none; }
.arcs { position: absolute; right: -180px; top: -160px; width: 780px; height: 780px; pointer-events: none; }
.arcs circle, .arcs line {
  stroke: #C08C30;
  stroke-opacity: .4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--p) - var(--o)) * 2.2), 1));
}
.dim2 { position: relative; margin-top: 88px; height: 28px; }
.dim2__line { position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: rgba(4, 96, 129, .18); }
.dim2__line i { position: absolute; inset: 0; background: var(--mx-teal); transform-origin: left; transform: scaleX(var(--l)); }
.dim2__mark { position: absolute; top: 6px; left: calc(var(--i) * (100% + 32px) / 4); width: 15px; height: 15px; border-radius: 50%; background: var(--c-gold-tint); border: 1.5px solid var(--mx-teal); }
.dim2__mark::after { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--mx-gold); opacity: clamp(0, calc((var(--l) - var(--i) * .25) * 30), 1); }
.dim2__label { position: absolute; right: 0; top: -24px; color: var(--mx-teal); opacity: clamp(0, calc((var(--l) - .9) * 10), 1); }
.steps--live li { opacity: clamp(.3, calc((var(--l) - var(--i) * .25) * 8 + .3), 1); }
.steps--live .mx-mono { color: #9A6A12; }
@media (max-width: 959px) {
  .dim2__mark, .dim2__label { display: none; }
  .arcs { width: 460px; height: 460px; right: -200px; top: -120px; }
}

/* --- 05 Principles: deep teal, contour lines moving behind ----------------- */

.sec--teal { background: linear-gradient(160deg, #046081 0%, var(--c-teal-deep) 58%, #03303F 100%); color: #EAF4F7; }
.sec--teal .sec__label { color: rgba(234, 244, 247, .72); }
.contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.principles2 { position: relative; overflow: hidden; }
.principles2 .contours { opacity: .8; }
.principles2 > :not(.contours) { position: relative; }
.principles2__grid { margin-top: 56px; align-items: start; }
.principles2__grid .h2 { grid-column: 1 / span 4; position: sticky; top: 120px; }
.principles2 .principles { grid-column: 6 / span 7; }
.principles2 .principle { border-top-color: rgba(234, 244, 247, .16); }
.principles2 .principle .mx-mono { color: var(--mx-gold); }
.principles2 .principle h3 { font-size: clamp(26px, 2.4vw, 34px); }
.principles2 .principle p { color: rgba(234, 244, 247, .86); }
[data-ink] .w2 { opacity: clamp(.22, calc(var(--p) * (var(--n) + 3) - var(--i) - 1), 1); }
@media (max-width: 959px) { .principles2__grid .h2 { position: static; } }

/* --- 06 About: the numbers count up, in colour ----------------------------- */

.stat--teal dd { color: var(--mx-teal); }
.stat--gold dd { color: #9A6A12; }
.stat--coral dd { color: var(--mx-coral); }

/* --- 08 Contact: the contour lines behind the form ------------------------- */

.contact2 { position: relative; overflow: hidden; }
.contact2 .contours { opacity: .6; }
.contact2 > :not(.contours) { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .shelf { transition: none; }
}

/* Service pages: the matching colour panel in the hero, built as the page
   opens (data-scene="play"), and the three "what you get" points as colour
   cards rather than pictures. */
.page-hero__panel {
  position: absolute;
  right: max(var(--mx-pad), calc((100% - var(--mx-max)) / 2 + var(--mx-pad)));
  top: calc(var(--mx-header-h) + 72px);
  width: min(46vw, 640px);
  height: 470px;
}
/* Below 1300px the 46vw panel reaches over the heading and lede, so beside
   it the text takes only the width the panel leaves. */
@media (min-width: 960px) and (max-width: 1299px) {
  .page-hero__panel + .wrap > .page-hero__text { max-width: min(var(--text-w, 600px), calc(100% - 46vw - 40px)); }
}
.fig { position: relative; overflow: hidden; padding: 34px 30px 36px; border-radius: 24px; min-height: 280px; isolation: isolate; }
.fig::before { content: ''; position: absolute; z-index: -1; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: currentColor; opacity: .08; }
.fig:nth-child(1) { background: linear-gradient(150deg, #0A7AA3, #046081 60%, var(--c-teal-deep)); color: #FFFFFF; }
.fig:nth-child(2) { background: radial-gradient(circle at 25% 15%, #EDCB78, #D5A73F 50%, #C08C30); color: var(--mx-ink); }
.fig:nth-child(3) { background: radial-gradient(circle at 80% 10%, #4A50A8, var(--c-indigo) 45%, var(--c-indigo-deep)); color: #FFFFFF; }
.fig .mx-mono { color: inherit; opacity: .8; }
.fig h3 { margin-top: 36px; }
.fig p { color: inherit; opacity: .88; }
@media (max-width: 959px) {
  .page-hero__panel { position: relative; right: auto; top: auto; width: auto; height: 330px; margin: 0 var(--mx-pad); }
  .fig { min-height: 0; }
}

/* Audits page: the two audits as colour cards, their verdicts as chips. */
.audit { padding: 40px 40px 42px; border-radius: 28px; color: #FFFFFF; position: relative; overflow: hidden; isolation: isolate; }
.audit--web { background: linear-gradient(150deg, #0A7AA3 0%, #046081 50%, var(--c-teal-deep) 100%); }
.audit--ai {
  background:
    radial-gradient(circle at 92% 4%, rgba(224, 94, 79, .5), transparent 46%),
    linear-gradient(160deg, #15323E, #0B1D25 70%);
}
.audit::before { content: ''; position: absolute; z-index: -1; right: -90px; top: -90px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); }
.audit .mx-mono { color: #E8B84E; }
.audit h2 { color: #FFFFFF; }
.audit .body { color: rgba(255, 255, 255, .86); }
.audit .pillars { border-bottom-color: rgba(255, 255, 255, .18); }
.audit .pillars li { border-top-color: rgba(255, 255, 255, .18); }
.audit .pillars b { color: #FFFFFF; }
.audit .pillars span:last-child { color: rgba(255, 255, 255, .82); }
.audit__verdict { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.audit__verdict .mx-mono { color: rgba(255, 255, 255, .72); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips b { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); }
@media (max-width: 959px) { .audit { padding: 28px 22px 30px; border-radius: 22px; } }
/* Side by side, the two cards share one set of rows (label, title, intro, the four pillars,
   the verdict), so every line on one card sits level with its partner on the other. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 960px) {
    .two { row-gap: 0; }
    .audit { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 18px; align-content: start; }
    .audit .pillars { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .audit__verdict { margin-top: 10px; }
  }
}

/* ==========================================================================
   The Apps page (/apps/): our own apps, and yours. One page for the list of
   every app and the app-development service (app-development.html now
   redirects to #build). The shelf and entry markup is the format the
   app-site-page pipeline reads and writes (.sp-shelf, .sp-entry, the tally's
   data-count), so it is styled here rather than rewritten.
   ========================================================================== */

/* Hero: the tally under the lede, two numbers on coloured rules */
.sp-tally { display: flex; gap: 40px; margin-top: 40px; }
.sp-tally div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; min-width: 148px; padding-top: 14px; border-top: 2px solid var(--mx-teal); }
.sp-tally .sp-tally__soon { border-top-color: var(--mx-gold); }
.sp-tally dt { color: var(--mx-ink-3); }
.sp-tally dd { font-weight: 300; font-size: clamp(48px, 4.6vw, 64px); line-height: .92; letter-spacing: -0.045em; }
.apps-hero .page-hero__text { padding-bottom: 88px; }
.apps-hero .lede { margin-top: 36px; }

/* The list */
.applist { position: relative; padding-bottom: 112px; background: var(--mx-paper); }
.sp-shelf-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; row-gap: 12px; }
.sp-shelf-head .sec__label { grid-column: 1 / -1; }
.sp-shelf-head .h2 { margin-top: 44px; }
.sp-shelf-meta { color: var(--mx-ink-3); padding-bottom: 8px; text-align: right; }
#coming-soon { margin-top: 96px; }
.sp-entries { list-style: none; margin: 32px 0 0; padding: 0; }
.sp-entries > :nth-child(1) { --i: 0; }  .sp-entries > :nth-child(2) { --i: 1; }
.sp-entries > :nth-child(3) { --i: 2; }  .sp-entries > :nth-child(4) { --i: 3; }
.sp-entries > :nth-child(5) { --i: 4; }  .sp-entries > :nth-child(6) { --i: 5; }
.sp-entries > :nth-child(7) { --i: 6; }  .sp-entries > :nth-child(8) { --i: 7; }
.sp-entries > :nth-child(9) { --i: 8; }  .sp-entries > :nth-child(n+10) { --i: 9; }
/* Each entry's own progress: the shelf's --p, staggered down the list */
.sp-entry { --q: clamp(0, calc(var(--p) * 2 - var(--i) * .2), 1); }

.sp-entry-link {
  position: relative;
  display: grid;
  align-items: center;
  text-decoration: none;
  color: var(--mx-ink);
  isolation: isolate;
  transition: transform .35s var(--mx-ease), box-shadow .35s var(--mx-ease), background-color .25s ease;
}
:where(.mx-site) .sp-entry-link:hover { color: var(--mx-ink); }
.sp-entry-link:focus-visible { outline-color: var(--app-accent); }
.sp-entry-icon { width: 100%; height: auto; aspect-ratio: 1; }
.sp-entry-name { font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.sp-entry-line { margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--mx-ink-2); text-wrap: pretty; }
.sp-entry-cat { font: 400 11px/1.5 var(--mx-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mx-ink-3); }
.sp-entry-price { font-size: 15px; font-weight: 500; line-height: 1.4; }
.sp-entry-go { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .72); transition: background-color .25s ease, transform .35s var(--mx-ease); }
.sp-entry-go svg { width: 20px; height: 20px; fill: none; stroke: var(--app-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease; }
.sp-entry-link:hover .sp-entry-go { background: var(--app-accent); transform: translateX(3px); }
.sp-entry-link:hover .sp-entry-go svg { stroke: #FFFFFF; }

/* On the App Store: a stack of colour bars, each app's tint drawn in from
   the left as the shelf comes up the screen, like a chart filling. */
[data-status="live"] .sp-entries { display: flex; flex-direction: column; gap: 12px; }
[data-status="live"] .sp-entry-link {
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 17em) 46px;
  column-gap: 32px;
  padding: 20px 24px 20px 20px;
  border-radius: 26px;
  background: linear-gradient(var(--app-tint), var(--app-tint)) no-repeat 0 0 / calc(var(--q) * 100%) 100%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 22%, transparent);
}
[data-status="live"] .sp-entry-link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 30%, transparent), 0 26px 50px -32px var(--app-accent); }
[data-status="live"] .sp-entry-icon { border-radius: 20px; box-shadow: 0 14px 28px -16px var(--app-accent); transform: scale(calc(.86 + var(--q) * .14)); transition: transform .2s linear; }
[data-status="live"] .sp-entry-name { font-size: clamp(24px, 2.2vw, 30px); }
[data-status="live"] .sp-entry-meta { display: flex; flex-direction: column; gap: 6px; }

/* Coming soon: quieter rows in two columns, each on a ruled line whose
   first stretch is drawn in the app's own colour. The tint shows on hover. */
[data-status="soon"] .sp-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-bottom: 1px solid var(--mx-line); }
[data-status="soon"] .sp-entry { border-top: 1px solid var(--mx-line); position: relative; }
[data-status="soon"] .sp-entry::before { content: ''; position: absolute; left: 0; top: -1px; width: 88px; height: 2px; background: var(--app-accent); transform-origin: left; transform: scaleX(var(--q)); }
[data-status="soon"] .sp-entry-link {
  grid-template-columns: 60px minmax(0, 1fr) 46px;
  grid-template-rows: auto auto;
  column-gap: 20px;
  row-gap: 10px;
  margin: 10px -16px;
  padding: 16px;
  border-radius: 20px;
}
[data-status="soon"] .sp-entry-link:hover { background-color: var(--app-tint); }
[data-status="soon"] .sp-entry-icon { grid-row: 1 / span 2; align-self: start; border-radius: 14px; }
[data-status="soon"] .sp-entry-text { grid-column: 2; }
[data-status="soon"] .sp-entry-meta { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
[data-status="soon"] .sp-entry-go { grid-column: 3; grid-row: 1 / span 2; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-accent) 35%, transparent); }
[data-status="soon"] .sp-entry-name { font-size: 22px; }
[data-status="soon"] .sp-entry-line { font-size: 15px; }
[data-status="soon"] .sp-entry-price { font-size: 14px; font-weight: 400; color: var(--mx-ink-2); }

@media (max-width: 959px) {
  .sp-tally { gap: 24px; margin-top: 28px; }
  .sp-tally div { min-width: 0; flex: 1; }
  .apps-hero .page-hero__text { padding-bottom: 48px; }
  .apps-hero .lede { margin-top: 24px; }
  .sp-shelf-head { grid-template-columns: 1fr; }
  .sp-shelf-meta { text-align: left; padding-bottom: 0; }
  #coming-soon { margin-top: 72px; }
  [data-status="live"] .sp-entry-link { grid-template-columns: 60px minmax(0, 1fr) 40px; grid-template-rows: auto auto; column-gap: 16px; row-gap: 12px; padding: 16px; border-radius: 22px; }
  [data-status="live"] .sp-entry-icon { grid-row: 1 / span 2; align-self: start; border-radius: 14px; }
  [data-status="live"] .sp-entry-meta { grid-column: 2; grid-row: 2; }
  [data-status="live"] .sp-entry-go { grid-column: 3; grid-row: 1 / span 2; align-self: start; }
  [data-status="live"] .sp-entry-name { font-size: 22px; }
  .sp-entry-line { font-size: 15px; }
  .sp-entry-go { width: 40px; height: 40px; }
  [data-status="soon"] .sp-entries { grid-template-columns: 1fr; }
  [data-status="soon"] .sp-entry-link { grid-template-columns: 52px minmax(0, 1fr) 40px; column-gap: 16px; margin: 6px -12px; padding: 14px 12px; }
}

/* Why we make our own: the homepage's teal principles band */
.apps-why .principles2__grid .h2 { grid-column: 1 / span 5; }

/* Built for you */
.apps-build { padding-bottom: 112px; }