/* ===========================================================================
   site.css — the whole site, written for this site.

   Replaces styled.css, which was Channel's compiled stylesheet recovered from
   the clone. Nothing here is derived from it: the layout was measured off the
   rendered page (band widths, the 1145px column, the type scale, the 24px card
   inset) and rebuilt from those numbers under our own names.

   Four bands — 작동원리, 대시보드, 데이터 보안 기술, 가격 — were four separate
   components in the original and are one here: headline, plate, a row of
   points. Same for the two dark bands, which are one card split across two
   sections rather than two cards that happen to touch.

   Order: tokens, type, layout, then components top to bottom.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* primitives */
  --mz-ink:    #04071e;   /* logo navy — dark plates, body ink on light */
  --mz-green:  #3ddc84;   /* primary accent — the terminal green        */
  --mz-amber:  #ffbd2e;   /* secondary accent                           */
  --mz-paper:  #f1f1e6;   /* warm off-white — light plates              */

  /* semantic */
  --mz-plate:        var(--mz-ink);
  --mz-plate-light:  var(--mz-paper);
  --mz-accent:       var(--mz-green);
  --mz-on-accent:    var(--mz-ink);      /* 11.2:1 on --mz-green */

  /* derived for the dark plate, measured against L 0.0027 */
  --mz-on-plate-1:   #e7e7dd;   /* 15.1:1 */
  --mz-on-plate-2:   #d3d3ca;   /* 12.4:1 */
  --mz-amber-lift:   #ffca5d;   /* 12.4:1 */
  --mz-amber-soft:   #f6c159;   /* 11.3:1 */

  /* atmosphere */
  --mz-glow-strong:  rgba(61, 220, 132, 0.10);
  --mz-glow-soft:    rgba(61, 220, 132, 0.06);

  /* ink at the four weights the page actually uses */
  --ink-90: rgba(4, 7, 30, 0.9);
  --ink-85: rgba(4, 7, 30, 0.85);
  --ink-60: rgba(4, 7, 30, 0.6);
  --ink-40: rgba(4, 7, 30, 0.4);
  --ink-08: rgba(4, 7, 30, 0.08);

  --on-dark-1:  #ffffff;
  --on-dark-60: rgba(255, 255, 255, 0.6);

  /* layout */
  --col:        1145px;   /* the content column, measured off the original */
  --col-dark:   1097px;   /* inside the dark card, which insets 24px       */
  --gutter:     140px;
  --band-end:   64px;
  --band-head:  84px;     /* space below a band's content                  */
  --card-inset: 24px;
  --card-round: 32px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------ type -- */

body {
  font-family: Pretendard, "Apple SD Gothic Neo", "Malgun Gothic",
    -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink-85);
  background: var(--mz-paper);
}

/* The scale, as measured. Tracking tightens as size grows — large Korean text
   reads too loose at 0, small text needs the room back. */
.t-display { font-size: 64px; line-height: 88px; letter-spacing: -2px;   font-weight: 600; }
.t-lead    { font-size: 42px; line-height: 54px; letter-spacing: -1px;   font-weight: 600; }
.t-stat    { font-size: 72px; line-height: 72px; letter-spacing: -2.88px; font-weight: 700; }
.t-title   { font-size: 24px; line-height: 34px; letter-spacing: -0.5px; font-weight: 600; }
.t-sub     { font-size: 20px; line-height: 30px; letter-spacing: -0.5px; font-weight: 600; }
.t-body    { font-size: 18px; line-height: 26px; letter-spacing: -0.4px; font-weight: 400; }
.t-ui      { font-size: 16px; line-height: 22px; letter-spacing: -0.4px; font-weight: 400; }
.t-fine    { font-size: 15px; line-height: 22px; font-weight: 400; }
.t-micro   { font-size: 13px; line-height: 18px; letter-spacing: 0.26px; font-weight: 700; }

.dim  { color: var(--ink-40); }
.mid  { color: var(--ink-60); }

/* ---------------------------------------------------------------- layout -- */

.band {
  padding: 0 var(--gutter) var(--band-end);
}

.band__inner {
  max-width: var(--col);
  margin: 0 auto;
}

.band__head {
  padding: var(--band-head) 0 44px;
  text-align: center;
}

/* The headline is one <h2> carrying one or two <span> lines — a heading for
   the section, not two loose paragraphs that merely look like one. The spans
   are inline by default and have to be told otherwise. */
.band__title { margin: 0; font-weight: inherit; }
.band__title > span { display: block; }
.band__head p { margin: 0; }

/* the dim first line, the solid second — the page's one headline idiom */
.band__head .line-1 { color: var(--ink-40); }
.band__head .line-2 { color: var(--ink-85); }

/* --------------------------------------------------------------- header --- */
/* One hover state, expressed once. Every part of the header — text, logo, CTA,
   the surface itself — reads from these custom properties, so inverting the bar
   is four lines rather than a rule per element.

   The header sits over the hero rather than above it: absolute at the top of
   the document, transparent, so the dark hero shows through. It scrolls away
   with the hero, which is why it can be transparent at all — a sticky bar would
   reach the cream bands and its white text would vanish. */
.site-header {
  --header-text: #ffffff;
  --header-bg: transparent;
  --header-cta-bg: #ffffff;
  --header-cta-text: var(--mz-ink);
  --header-backdrop: none;
  /* named for what they are, not for the background they sit on — that naming
     was inverted once and both logos ended up invisible at the same time */
  --logo-white: 1;
  --logo-ink: 0;

  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 16px 24px;
  color: var(--header-text);
  background-color: var(--header-bg);
  -webkit-backdrop-filter: var(--header-backdrop);
  backdrop-filter: var(--header-backdrop);
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease,
              color 0.35s ease;
}

/* focus-within as well as hover, so a keyboard user gets the readable state */
/* Sticky and transparent only works over the hero. Past it the bar would be
   white text on cream, so it takes the same inverted state it uses on hover —
   one set of values, three triggers. */
.site-header[data-stuck="1"],
.site-header:hover,
.site-header:focus-within {
  --header-text: var(--mz-ink);
  --header-bg: rgba(255, 255, 255, 0.9);
  --header-cta-bg: var(--mz-ink);
  --header-cta-text: #ffffff;
  --header-backdrop: blur(20px) saturate(180%);
  --logo-white: 0;
  --logo-ink: 1;
}

@media (prefers-reduced-transparency: reduce) {
  .site-header[data-stuck="1"],
  .site-header:hover,
  .site-header:focus-within { --header-bg: #ffffff; --header-backdrop: none; }
}

.site-header__logo {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: 200px;
  height: 28px;
}

.site-header__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.35s ease;
}

.site-header__logo-white { opacity: var(--logo-white); }
.site-header__logo-ink   { opacity: var(--logo-ink); }

.site-nav {
  display: flex;
  gap: 28px;
  margin: 0 auto;
}

.site-nav a {
  color: var(--header-text);
  opacity: 0.82;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  transition: color 0.35s ease, opacity 160ms var(--ease);
}

.site-nav a:hover { opacity: 1; }

.site-header__cta {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--header-cta-bg);
  color: var(--header-cta-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  transition: background-color 0.35s ease, color 0.35s ease, transform 160ms var(--ease);
}

.site-header__cta:hover { transform: translateY(-1px); }

.site-header__menu {
  display: none;
  width: 44px;
  height: 44px;
  color: var(--header-text);
  transition: color 0.35s ease;
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  margin-top: -70px;
  padding: 152px 24px 0;
  text-align: center;
  background-color: var(--mz-plate);
  background-image:
    radial-gradient(120% 46% at 50% 58%, rgba(4, 7, 30, 0.55), transparent 62%),
    linear-gradient(180deg,
      var(--mz-ink) 0%, var(--mz-ink) 38%, #0f1712 46%, #293d32 54%,
      #3e7055 62%, #4fae79 69%, #a6d6bb 77%, #d8ded4 82%,
      var(--mz-paper) 88%, var(--mz-paper) 100%);
}

.hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  gap: 0.65em;
  padding: 7px 14px 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--mz-on-plate-2);
  font-size: 14px;
  font-weight: 600;
}

/* A live-status dot, which is the whole reason this chip reads as a
   announcement rather than a label. The ripple is a ::after on the same dot so
   it scales from the dot's own size — em units throughout, so the chip stays
   one piece if its font-size changes. */
.hero__pill-dot {
  position: relative;
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--mz-accent);
}

.hero__pill-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--mz-accent);
  animation: mz-pill-ripple 2.4s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}

@keyframes mz-pill-ripple {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* A dot that pulses forever is exactly the kind of small looping motion the
   reduced-motion setting exists for. */
@media (prefers-reduced-motion: reduce) {
  .hero__pill-dot::after { animation: none; display: none; }
}

.hero__pill-chev { color: rgba(255, 255, 255, 0.55); }

/* Two gradients rather than flat white: pure white on this plate measures
   19.9:1 and haloes. These land at the luminances the reference actually
   used, and oklab keeps the traverse from stepping. */
.hero__title,
.hero__title-2 {
  margin: 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 700;
}

.hero__title   { background-image: linear-gradient(90deg, #b3b3a9 0%, #e6e6e2 100%); }
.hero__title-2 { background-image: linear-gradient(90deg, #fff3d9 0%, #f7f6e6 28%, #f2f2ee 50%, #ddfaea 76%, #caffe2 100%); }

@supports (background: linear-gradient(in oklab, red, blue)) {
  .hero__title   { background-image: linear-gradient(90deg in oklab, #b3b3a9 0%, #e6e6e2 100%); }
  .hero__title-2 { background-image: linear-gradient(90deg in oklab, #fff3d9 0%, #f7f6e6 28%, #f2f2ee 50%, #ddfaea 76%, #caffe2 100%); }
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  padding: 16px 28px;
  border-radius: 999px;
  background: linear-gradient(120deg, #ffd97a 0%, #6fe8ab 42%, var(--mz-green) 100%);
  color: var(--mz-on-accent);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  box-shadow: 0 10px 30px rgba(61, 220, 132, 0.28);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}

.hero__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(61, 220, 132, 0.34); }
.hero__cta:active { transform: translateY(0) scale(0.98); }

.hero__video {
  max-width: var(--col);
  margin: 72px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(4, 7, 30, 0.22);
}

.hero__video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------- statement -- */

.statement {
  padding: 96px var(--gutter);
  text-align: center;
  background:
    radial-gradient(52% 40% at 50% 42%, var(--mz-glow-soft), transparent 70%),
    var(--mz-paper);
}

.statement__mark { width: 102px; height: 102px; margin: 0 auto 40px; display: block; }

.statement p { margin: 0 0 18px; color: rgba(3, 18, 49, 0.45); }
.statement p:last-child { margin-bottom: 0; }
.statement b { color: var(--ink-90); font-weight: 600; }

/* ------------------------------------------------------------------ demo -- */

.demo {
  padding: 0 var(--gutter) 72px;
  border-radius: 34px 34px 0 0;
  background:
    radial-gradient(56% 26% at 50% 0%, var(--mz-glow-strong), transparent 72%),
    var(--mz-paper);
}

.demo__layout {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 72px;
  /* start, not center: the copy column is about half the height of the device,
     and centring it pushed the headline 177px down — which read as a hole
     between this band and the one above it. */
  align-items: start;
  max-width: var(--col);
  margin: 0 auto;
  padding-top: var(--band-head);
}

/* Grid items default to min-width:auto, so the chip row — which does not wrap
   on mobile — reports its full min-content width and forces the 1fr track wider
   than the viewport. This is the line that stops it. */
.demo__copy { min-width: 0; }
.demo__chips { min-width: 0; }

.demo__copy p { margin: 0; }
.demo__copy .band__title > span { display: block; }
.demo__copy .line-1 { color: var(--ink-40); }
.demo__copy .line-2 { color: var(--ink-85); }
.demo__copy .line-2.grad-accent { color: var(--mz-ink); }
.demo__hint { margin-top: 20px !important; color: var(--ink-60); }
.demo__chips-cap { margin: 36px 0 14px !important; font-size: 14px; font-weight: 600; color: var(--ink-40); }
.demo__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Phone proportions, not a wide panel — a device reads as a thing you could
   hold, and the copy gets the room a wide panel was taking. */
.demo__device { width: 430px; height: 690px; justify-self: end; }

/* --------------------------------------------------------------- partners - */

.partners { padding: 0 0 72px; text-align: center; overflow: hidden; }

.partners__cap { margin: 0 0 28px; color: var(--ink-60); }

.partners__mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.partners__track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: mz-marquee 32s linear infinite;
}

.partners__track img { height: 34px; width: auto; opacity: 0.72; }

@keyframes mz-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; }
}

/* ----------------------------------------------------------------- cases -- */

/* no padding-top here — .band__head already owns the space above the headline,
   and having both is what opened the gap under the marquee */
.cases { padding: 0 var(--gutter) var(--band-end); }

.cases__card {
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  aspect-ratio: 1145 / 645;
  border-radius: 20px;
  overflow: hidden;
}

.cases__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 25%;
  /* The room was lit flat and the sitter read as in shadow; 1.13 is the
     midpoint we settled on, solved against the copy band so the text keeps
     its contrast. */
  filter: brightness(1.13) saturate(1.03);
}

.cases__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(4, 7, 30, 0.84) 0%, rgba(4, 7, 30, 0.78) 34%,
    rgba(4, 7, 30, 0.42) 58%, rgba(4, 7, 30, 0.12) 78%, transparent 100%);
}

.cases__copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  max-width: 56%;
  padding: 56px 0 0 56px;
  color: #fff;
}

.cases__stat { color: #fff; }
.cases__stat small { display: block; margin-top: 6px; font: inherit; font-size: 16px; font-weight: 600; opacity: 0.72; }
.cases__quote { margin: 0; color: rgba(255, 255, 255, 0.92); }
.cases__note { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.cases__by { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-bottom: 40px; }
.cases__by img { position: static; width: 132px; height: auto; filter: none; }
.cases__by span { font-size: 15px; color: rgba(255, 255, 255, 0.78); }

/* ------------------------------------------------- feature band (shared) -- */
/* 작동원리 · 대시보드 · 데이터 보안 기술 · 가격 were four components; the only
   thing that differed between them was the plate and how many points sit
   under it. */

.feature__plate {
  /* width:100% matters — when the plate is an <img> it carries a width
     attribute, and without this it renders at its intrinsic size and pushes
     the whole page sideways on a phone. */
  width: 100%;
  max-width: var(--col);
  height: auto;
  margin: 0 auto 44px;
  border-radius: 20px;
  background-color: var(--mz-plate-light);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /* contain, never cover: these plates are charts and screenshots, and a frame
     with a fixed height crops a different amount at every window size */
  background-size: contain;
}

/* An <img> plate stops at its own resolution. Stretching the 870px context
   diagram to fill a 1145px column upscaled it 1.32x — softer, and the
   enlargement exaggerated the weight of the cards on its left, which is what
   made a centred drawing read as left-aligned.

   Capped with max-width, not width:auto. width:auto cancels the element's own
   width attribute, so before the file arrives the box is 0x0 — and a 0x0 box
   never intersects the viewport, so loading="lazy" never fires and the image
   never arrives. The two together deadlock. */
img.feature__plate {
  display: block;
  width: 100%;
  height: auto;
}

#how img.feature__plate { max-width: 870px; }

.feature__points {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 24px;
  max-width: var(--col);
  margin: 0 auto;
}

.feature__points > li {
  flex: 1 1 calc(33.333% - 16px);
  min-width: 260px;
  list-style: none;
}

.feature__points--half > li { flex: 0 0 calc(50% - 12px); }

.feature__points h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  color: var(--ink-85);
}

.feature__points h3 svg { flex: 0 0 auto; width: 24px; height: 24px; }
.feature__points p { margin: 0; color: var(--ink-60); }

/* ------------------------------------------------------------- dark card -- */
/* 보안 and 데이터 보안 기술 are one card: rounded at the top of the first and
   the bottom of the second, with nothing between them. */

.dark-card {
  margin: 0 var(--card-inset);
  padding: 0 var(--gutter) var(--band-end);
  background: var(--mz-plate);
  color: var(--on-dark-1);
}

.dark-card--top    { margin-top: var(--card-inset); border-radius: var(--card-round) var(--card-round) 0 0; }
/* The run does not stop, it dissolves. A hard edge here read as an abrupt
   colour change into the cream band below, so the card is masked away over its
   last 200px instead.

   Masking the card rather than painting a gradient inside it matters: a
   gradient would still leave the card's own side edges as hard vertical lines
   against the page for as long as it was darker than cream. The mask fades the
   whole shape — sides and rounded corners included — so nothing is left to
   draw a line.

   The extra bottom padding is what buys the room; the copy ends above the
   fade rather than inside it. */
.dark-card--bottom {
  margin-bottom: 0;
  padding-bottom: 240px;
  border-radius: 0 0 var(--card-round) var(--card-round);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 200px), transparent 100%);
}

.dark-card .band__head .line-1 { color: var(--on-dark-60); }
.dark-card .band__head .line-2 { color: var(--on-dark-1); }
.dark-card .feature__points h3 { color: var(--on-dark-1); }
.dark-card .feature__points p  { color: var(--on-dark-60); }
.dark-card .feature__plate { background-color: var(--mz-plate); max-width: var(--col-dark); }

/* the security band's picker: three cards, one lit */
.picker {
  display: flex;
  gap: 24px;
  max-width: var(--col-dark);
  margin: 0 auto;
}

.picker__item {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  text-align: left;
  color: inherit;
  background: none;

  /* A button centres its own contents vertically. The three cards stretch to a
     shared height, but only one of them has a three-line description, so the
     other two had their whole stack pushed down 13px — the accent rules and the
     badges stopped lining up across the row. Lay the contents out from the top
     instead. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Both of these are spans, and a span is inline until told otherwise — height
   and margin simply do not apply to it. Without this the 3px rule painted the
   full height of the card as a flat block of accent colour. */
/* The dim track is a pseudo-element, not opacity on the bar itself. opacity
   applies to the whole subtree, so putting 0.3 here dimmed the fill inside it
   too and the selected card looked exactly like the others. */
.picker__bar {
  position: relative;
  display: block;
  height: 3px;
  margin-bottom: 20px;
  border-radius: 2px;
  overflow: hidden;
}

.picker__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  opacity: 0.28;
}

.picker__body { display: block; }

.picker__fill {
  position: relative;   /* above the track */
  display: block;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease);
}

.picker__item[data-mz-active="1"] .picker__fill { transform: scaleX(1); }

.picker__body { display: block; transition: opacity 240ms var(--ease); }
.picker__item[data-mz-active="0"] .picker__body { opacity: 0.3; }
.picker__item[data-mz-active="1"] .picker__body { opacity: 1; }
.picker__item[data-mz-active="0"]:hover .picker__body { opacity: 0.55; }

.picker__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.picker__badge svg { width: 16px; height: 16px; }
.picker__item h3 { margin: 0 0 8px; color: var(--on-dark-1); }
.picker__item p  { margin: 0; color: var(--on-dark-60); }

/* the three accents, in order */
.picker__item:nth-child(1) { color: #8debb7; }
.picker__item:nth-child(2) { color: #63e39c; }
.picker__item:nth-child(3) { color: var(--mz-amber-soft); }

@media (prefers-reduced-motion: reduce) {
  .picker__fill, .picker__body { transition-duration: 1ms; }
}

/* --------------------------------------------------------------- roadmap -- */

.roadmap__graphic {
  display: block;
  width: 100%;
  max-width: 1165px;
  height: auto;
  margin: 0 auto 44px;
}

.roadmap__phases {
  display: flex;
  gap: 32px;
  max-width: var(--col);
  margin: 0 auto;
}

.roadmap__phases > li { flex: 1 1 0; min-width: 0; list-style: none; }
.roadmap__phases h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--ink-85); }
.roadmap__phases h3 svg { width: 24px; height: 24px; }
.roadmap__phases p { margin: 0; color: var(--ink-60); }

/* ------------------------------------------------------------------- cta -- */

.final-cta {
  padding: 24px;
  text-align: center;
}

.final-cta__inner {
  max-width: var(--col);
  margin: 0 auto;
  padding: 88px 24px 96px;
  border-radius: var(--card-round);
  background: var(--mz-paper);
}

.final-cta__title { margin: 0 0 28px; color: var(--ink-85); text-align: center; }

/* The second line carries the gradient — amber into green, the same pair the
   hero CTA runs on, so the page opens and closes on the same note.
   Two declarations: the flat colour is what shows if background-clip:text is
   not supported, and it has to be set before the clip or the text disappears. */
/* The house gradient for dark-on-light emphasis: amber into green, the same
   pair the hero CTA runs on, dropped in lightness so it reads on paper.
   The flat colour is declared first — it is what shows where background-clip
   is unsupported, and without it the text would simply vanish there. */
.grad-accent {
  color: var(--mz-ink);
  background-image: linear-gradient(96deg, #b8890f 0%, #2f9c60 52%, #1a7d4a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports (background: linear-gradient(in oklab, red, blue)) {
  .grad-accent {
    background-image: linear-gradient(96deg in oklab, #b8890f 0%, #2f9c60 52%, #1a7d4a 100%);
  }
}

.final-cta__checks {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 0 0 40px;
  padding: 0;
}

.final-cta__checks li {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  color: var(--ink-60);
}

.final-cta__checks svg { width: 18px; height: 18px; color: var(--mz-green); }

.final-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--mz-ink);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  transition: transform 160ms var(--ease);
}

.final-cta__button:hover { transform: translateY(-2px); }
.final-cta__button:active { transform: translateY(0) scale(0.98); }

/* ---------------------------------------------------------------- footer -- */

.site-footer {
  padding: 72px var(--gutter) 56px;
  background: #fff;
  color: var(--ink-60);
}

.site-footer__top {
  display: flex;
  gap: 40px;
  max-width: 1160px;
  margin: 0 auto 56px;
}

/* 260px is a width here because the row runs horizontally. The mobile block
   turns this container into a column, which makes flex-basis a height — so the
   basis is reset there rather than carried across. */
.site-footer__brand { flex: 0 0 260px; }
.site-footer__brand img { display: block; max-width: 100%; height: auto; }

.site-footer__cols { display: flex; flex: 1 1 auto; gap: 40px; }
.site-footer__col { flex: 1 1 0; }
.site-footer__col h2 { margin: 0 0 18px; font-size: 16px; font-weight: 600; color: var(--ink-60); }
.site-footer__col ul { margin: 0; padding: 0; }
.site-footer__col li { list-style: none; margin-bottom: 12px; }
.site-footer__col a { color: var(--ink-60); transition: color 160ms var(--ease); }
.site-footer__col a:hover { color: var(--ink-85); }

.site-footer__legal {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--ink-08);
  color: #a7a7aa;
}

.site-footer__legal p { margin: 0 0 6px; }
.site-footer__legal a { color: inherit; text-decoration: underline; }

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1024px) {
  :root { --gutter: 40px; --band-end: 64px; }
  .t-display { font-size: 44px; line-height: 60px; letter-spacing: -1.4px; }
  .t-lead    { font-size: 32px; line-height: 44px; letter-spacing: -0.8px; }
  .t-stat    { font-size: 56px; line-height: 60px; }
}

@media (max-width: 768px) {
  /* Measured off the reference at 375px: a 16px gutter, and the dark card
     drops its side inset entirely rather than shrinking it — at this width a
     12px rail either side reads as a mistake, not as a card. */
  :root { --gutter: 16px; --card-inset: 0px; --card-round: 32px; }

  /* The nav collapses into the drawer, the CTA does not — it is the one thing
     on this bar someone came to press. */
  .site-nav { display: none; }
  .site-header { gap: 12px; padding: 12px 16px; }
  .site-header__logo { width: 148px; height: 21px; }
  .site-header__cta { margin-left: auto; padding: 9px 14px; font-size: 14px; }
  .site-header__menu { display: inline-flex; align-items: center; justify-content: center; }

  .t-display { font-size: 34px; line-height: 42px; letter-spacing: -1px; }
  .t-lead    { font-size: 30px; line-height: 42px; letter-spacing: -0.7px; }
  .t-title   { font-size: 18px; line-height: 26px; letter-spacing: -0.4px; }
  .t-body    { font-size: 16px; line-height: 22px; }
  .t-sub     { font-size: 17px; line-height: 26px; }
  .t-stat    { font-size: 44px; line-height: 48px; letter-spacing: -1.6px; }

  .band__head { padding: 64px 0 32px; }

  .feature__points > li,
  .feature__points--half > li { flex: 0 0 100%; }
  .picker, .roadmap__phases { flex-direction: column; gap: 28px; }

  .cases__card { aspect-ratio: 3 / 4; }
  .cases__copy { max-width: 100%; padding: 32px 24px 0; }
  .cases__by { padding-bottom: 24px; }

  .final-cta__checks { flex-direction: column; align-items: center; gap: 14px; }

  .site-footer { padding: 48px 20px 40px; }
  .site-footer__top { flex-direction: column; gap: 32px; }
  .site-footer__brand { flex: 0 0 auto; }
  .site-footer__cols { flex-wrap: wrap; gap: 28px; }
  .site-footer__col { flex: 1 1 40%; }
}

/* ----------------------------------------------------------- the plates -- */
/* Built by tools/recolor/*.py from our own artwork. contain, with the frame
   given the plate's aspect, so a chart is never cropped at any window size. */

[data-plate] { background-size: contain; }

[data-plate="rules"] {
  aspect-ratio: 2320 / 860;
  background-color: var(--mz-plate);
  background-image: url("../assets/brand/rules-plate-desktop.png?v=5");
  background-size: 115% auto;   /* trims the plate's outer edge, not the art */
}

[data-plate="security"] {
  aspect-ratio: 2194 / 946;
  background-color: var(--mz-plate);
  background-image: url("../assets/brand/security-plate.png?v=1");
}

[data-plate="dashboard"] {
  aspect-ratio: 2320 / 980;
  background-image: url("../assets/brand/dashboard-plate-desktop.png?v=2");
}

[data-plate="pricing"] {
  aspect-ratio: 2320 / 860;
  background-image: url("../assets/brand/pricing-plate-desktop.png?v=1");
}

@media (max-width: 768px) {
  [data-plate="dashboard"] { aspect-ratio: 722 / 620; background-image: url("../assets/brand/dashboard-plate-phone.png?v=2"); }
  [data-plate="pricing"]   { aspect-ratio: 722 / 760; background-image: url("../assets/brand/pricing-plate-phone.png?v=1"); }
  [data-plate="security"]  { aspect-ratio: 722 / 760; background-image: url("../assets/brand/security-plate-phone.png?v=1"); }
  /* Same three pictograms, same order — only the frame is tighter, so the whole
     picture fits 358px instead of being cropped by a scroll strip. */
  [data-plate="rules"]     { aspect-ratio: 1080 / 480; background-image: url("../assets/brand/rules-plate-phone.png?v=6"); background-size: contain; }
}

/* ------------------------------------------------------------ demo chat -- */

.chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--ink-08);
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 27, 40, 0.14);
}

.chat__bar {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ink-08);
  background: linear-gradient(135deg, #4ddf8e, #74e6a7);
  color: var(--mz-on-accent);
}

.chat__avatar { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.35); padding: 6px; }
.chat__name   { font-size: 16px; font-weight: 700; }
.chat__status { font-size: 12px; opacity: 0.78; }
.chat__foot { padding: 12px 14px 16px; background: var(--mz-paper); }

.chat__reset {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 auto 10px;
  padding: 8px 14px; border: 1px solid var(--ink-08); border-radius: 999px;
  background: #fff; color: var(--ink-60);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(4, 7, 30, 0.06);
}
.chat__reset:hover { color: var(--mz-ink); }
.chat__reset svg { width: 16px; height: 16px; }

.chat__log {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 18px;
  overflow-y: auto;
  background: var(--mz-paper);
}

.chat__row { display: flex; }
.chat__row--user { justify-content: flex-end; }

.chat__bubble {
  max-width: 78%;
  padding: 11px 14px;
  border-radius: 16px;
  font-size: 14px; line-height: 1.55;
  white-space: pre-line;
  animation: mz-bubble 0.28s var(--ease) both;
}

.chat__row--bot  .chat__bubble { border-bottom-left-radius: 6px;  background: #fff; color: var(--mz-ink); box-shadow: 0 1px 3px rgba(4,7,30,0.07); }
.chat__row--user .chat__bubble { border-bottom-right-radius: 6px; background: var(--mz-green); color: var(--mz-on-accent); }

@keyframes mz-bubble { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.chat__typing { display: inline-flex; gap: 4px; padding: 14px; }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: #b6b7bd; animation: mz-typing 1s infinite ease-in-out; }
.chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.chat__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes mz-typing { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chip {
  padding: 8px 12px; border: 1px solid var(--ink-08); border-radius: 999px;
  background: #fff; color: var(--ink-60); font-size: 13px;
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.chip:hover { border-color: var(--mz-green); color: var(--mz-ink); }

.chat__form { display: flex; gap: 10px; }
.chat__input {
  flex: 1 1 auto; padding: 12px 16px;
  border: 1px solid var(--ink-08); border-radius: 999px; background: #fff;
  font-size: 14px; color: var(--mz-ink);
}
.chat__input:focus { outline: none; border-color: var(--mz-green); }
.chat__send {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--mz-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat__send svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .chat__bubble, .chat__typing i { animation: none; }
}

/* ---------------------------------------------------------------- drawer -- */

/* [hidden] in base.css cannot win against a later display:flex at equal
   specificity, so the hidden state is spelled out here. And the drawer has no
   business existing above the breakpoint that shows its button. */
.drawer[hidden] { display: none; }

@media (min-width: 769px) {
  .drawer { display: none !important; }
}

.drawer {
  position: absolute;
  top: 100%; left: 0; right: 0;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 20px 24px;
  background: var(--mz-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.drawer a { padding: 12px 4px; color: rgba(255,255,255,0.82); font-size: 17px; font-weight: 600; }
.drawer__cta {
  margin-top: 8px; padding: 14px; border-radius: 999px;
  background: #fff; color: var(--mz-ink) !important; text-align: center;
}

/* ------------------------------------------------------ mobile specifics -- */

@media (max-width: 768px) {
  /* The roadmap graphic is 4.3:1. Fitted to 343px it renders 79px tall and the
     stage labels stop being readable, so it keeps a legible size and the strip
     scrolls instead. The scroll lives on the wrapper, never on the page. */
  /* Nothing here scrolls sideways any more. A clipped graphic reads as broken
     however scrollable it is, so each wide drawing is handled at the source
     instead: the roadmap folds to two rows, the rules plate ships a tighter
     frame, and the context diagram simply fits. */
  .roadmap__graphic { width: 100%; max-width: 559px; margin: 0 auto 40px; }
  #how img.feature__plate { max-width: 100%; }

  /* Touch targets. 33px chips and a 38px menu button are below the 44px the
     platform guidance asks for, and both are things people actually poke. */
  .chip { min-height: 44px; padding: 8px 14px; }
  .site-header__menu { width: 44px; height: 44px; }
  .chat__send { width: 46px; height: 46px; }

  /* The chat is a fixed 620px on desktop; on a phone it needs the room the
     chips take, and the log should still be the part that scrolls. */
  .demo__layout { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; }
  .demo__device { width: 100%; max-width: 420px; height: auto; aspect-ratio: 430 / 690; justify-self: center; }
  .demo__chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .demo__chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; min-height: 44px; }
  .chat__log { padding: 16px 14px; }
  .chat__foot { padding: 10px 12px 14px; }
  .chat__bar { padding: 12px 14px; }
  .chat__reset span { display: none; }

  .hero { margin-top: -68px; padding: 116px 16px 0; }
  .hero__video { margin-top: 48px; border-radius: 14px; }
  .statement { padding: 80px var(--gutter); }
  .statement__mark { width: 72px; height: 72px; margin-bottom: 28px; }
  .demo { padding-bottom: 64px; border-radius: 24px 24px 0 0; }
  .partners { padding-bottom: 64px; }
  .partners__track { gap: 44px; }
  .partners__track img { height: 26px; }
  .feature__plate { margin-bottom: 36px; }
  .final-cta__inner { padding: 56px 20px 64px; }
}

@media (max-width: 768px) {
  /* Footer links render 19px tall as inline text. Padding gives them a real
     target without changing how the column reads. */
  .site-footer__col li { margin-bottom: 2px; }
  .site-footer__col a { display: inline-block; padding: 11px 0; }
  .site-footer__legal a { display: inline-block; padding: 6px 0; }
  .chat__reset { min-height: 40px; padding: 8px 12px; }
}

/* ---------------------------------------------------------------------- FAQ
   Seven rows of rules on a band that otherwise has none. The restraint is the
   point: this sits directly above the final CTA, and anything with a border,
   a fill and a shadow would compete with the one button the page is built to
   deliver someone to. A hairline between rows is enough to say "list".

   Native <details>, so the rows work with the keyboard and with the script
   switched off, and so the answers are in the HTML rather than assembled at
   runtime. That last part is why this section exists at all.

   No max-height animation. <details> does not animate its own open state
   without JS, and faking it would mean measuring every answer on resize for a
   transition nobody asked for. The chevron turns; the row appears. */

.faq__list { max-width: 860px; margin: 0 auto; }

.faq__item { border-top: 1px solid var(--ink-08); }
.faq__item:last-child { border-bottom: 1px solid var(--ink-08); }

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 2px;
  color: var(--ink-85);
  cursor: pointer;
  /* Two rules, because the default marker is a <summary> quirk rather than a
     normal list marker: WebKit needs its own pseudo-element told to go away. */
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__q svg {
  flex: none;
  /* The chevron is optical, not textual — it should not grow with the row's
     line-height, and it should sit on the first line of a question that wraps. */
  margin-top: 4px;
  color: var(--ink-40);
  transition: transform 260ms var(--ease), color 260ms var(--ease);
}
.faq__item[open] > .faq__q svg { transform: rotate(180deg); color: var(--ink-85); }

.faq__q:hover { color: var(--mz-ink); }
.faq__q:hover svg { color: var(--ink-85); }

.faq__a { padding: 0 2px 28px; color: var(--ink-60); }
/* The answer column stops short of the question's, so a long answer breaks
   into lines a reader can track rather than running the full 860px. */
.faq__a p { margin: 0; max-width: 680px; }
.faq__a p + p { margin-top: 14px; }

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

@media (max-width: 768px) {
  /* 26px of padding either side of a two-line question leaves the rows nearly
     touching. Tighter here, and the chevron drops a size so a wrapped question
     keeps more of the width. */
  .faq__q { gap: 16px; padding: 20px 0; }
  .faq__q svg { width: 20px; height: 20px; margin-top: 3px; }
  .faq__a { padding: 0 0 22px; }
}