/* Four solution areas use the shared Paper, image and dark section families. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: var(--text-md); line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: var(--weight-medium); letter-spacing: var(--tracking-display); }
.area-hero { position: relative; isolation: isolate; padding: clamp(80px, 10vw, 144px) 0; color: var(--white); }
.area-hero__art { position: absolute; z-index: -2; inset: 0; background: url('/img/concept/hero-night-landing.webp') center 54% / cover no-repeat; }
.area-hero--development .area-hero__art { background-image: url('/img/concept/hero-day-landing.webp'); }
.area-hero--community .area-hero__art { background-image: url('/img/concept/hero-day-landing.webp'); background-position: center 65%; }
.area-hero__copy { max-width: var(--measure-prose); }
.area-eyebrow { font-size: 12px; line-height: 1.4; color: var(--cobalt); }
.area-hero .area-eyebrow, .area-closing .area-eyebrow { color: rgba(255, 255, 255, .78); }
.area-hero h1 { max-width: var(--measure-prose); margin-top: 20px; font-size: clamp(36px, 4.1vw, 56px); line-height: 1.06; }
.area-hero__lede { max-width: var(--measure-narrow); margin-top: 28px; font-size: var(--text-lg); line-height: 1.65; color: rgba(255, 255, 255, .88); }
.area-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.area-section { padding: var(--section-y) 0; }
.area-section + .area-section { border-top: 1px solid var(--line); }
.area-heading { max-width: var(--measure-prose); margin-bottom: 48px; }
.area-heading h2 { margin-top: 16px; font-size: var(--text-display); line-height: 1.1; }
.area-heading > p:last-child { margin-top: 24px; max-width: var(--measure-narrow); }
.area-foundation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.area-foundation li { border-top: 1px solid var(--line); padding-top: 24px; }
.area-foundation h3 { font-size: var(--text-2xl); line-height: 1.2; margin-bottom: 12px; }
.area-foundation p { font-size: var(--text-base); color: var(--ink-soft); }
.area-study { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.area-study .area-heading { margin-bottom: 0; }
.area-study__record { padding: 32px; border: 1px solid var(--line); }
.area-study__record h3 { font-size: var(--text-2xl); line-height: 1.2; margin-bottom: 16px; }
.area-study__record p { font-size: var(--text-base); margin-bottom: 24px; }
.area-study__record .button { margin-top: 0; }
.area-closing { padding: var(--section-y) 0; background: #0d1113; color: var(--white); text-align: center; }
.area-closing h2 { max-width: var(--measure-prose); margin: 16px auto 24px; font-size: var(--text-display); line-height: 1.1; }
.area-closing p:not(.area-eyebrow) { max-width: var(--measure-narrow); margin: 0 auto 32px; color: rgba(255, 255, 255, .78); }
.area-foundation a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.area-page [id] { scroll-margin-top: 110px; }
.area-page .button { transition: transform 180ms ease, opacity 180ms ease; }
@media (max-width: 980px) {
  .area-foundation, .area-study { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .area-foundation { max-width: var(--measure-prose); }
  .area-heading h2, .area-closing h2 { font-size: 36px; }
  .area-study__record { padding: 24px; }
}
@media (max-width: 430px) {
  .area-hero__actions { flex-direction: column; align-items: stretch; }
  .area-heading h2, .area-closing h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .area-page .button { transition: none; } }

/* ── Real dashboard boards ───────────────────────────────────────────────
   The capture is a picture of the shipped module; the frame around it is
   page chrome. Each area declares its own crop so the pages show different
   boards instead of repeating the same module header. Percentage margins
   resolve against the frame's width, so a crop stays proportional at every
   viewport. */
.board { margin: 0; border: 1px solid #c7cad8; background: #e8eaf3; }
.board__bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 14px 24px; border-bottom: 1px solid #c7cad8; color: #1a1d2e; font: 500 13px/1.4 var(--sans); }
.board__bar svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.board__label { margin-left: auto; color: #646b7d; font-weight: 400; font-size: var(--text-sm); }
.board__view { --crop-top: 0%; --crop-bottom: 0%; display: flow-root; overflow: clip; }
.board__frame { display: flow-root; overflow: clip; }
.board__frame img { display: block; width: 100%; height: auto; margin-block: calc(var(--crop-top) * -1) calc(var(--crop-bottom) * -1); }
.board__view:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.board figcaption { padding: 14px 24px; border-top: 1px solid #c7cad8; color: #5a6176; font-size: var(--text-sm); line-height: 1.5; }
.board__hint { display: none; margin-top: 8px; color: #646b7d; font-size: var(--text-sm); }
.board__view--module { --crop-top: 29.5%; }
.board__view--rnd { --crop-top: 26.5%; }
.board__view--top { --crop-bottom: 34%; }

/* Area showcases stack their copy above a full-rail board, so the capture
   stays at its captured scale instead of being squeezed into a column. */
.area-page .showcase__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.area-page .showcase__copy { max-width: none; }
.area-page .showcase__copy > .showcase__eyebrow,
.area-page .showcase__copy > h3,
.area-page .showcase__copy > p { max-width: var(--measure-prose); }
.area-page .showcase__copy > .board { margin: var(--space-8) 0 var(--space-7); }
.area-page .showcase__copy > .button { margin-top: 0; }
.area-page .showcase__note { max-width: var(--measure-prose); }
/* Outranks `.area-closing p:not(.area-eyebrow)`, which sets margin on every
   paragraph in this section. Without the extra class the divider lands flush
   against the CTA's bottom edge and reads as a line through the button. */
.area-closing p.area-closing__proof { max-width: var(--measure-narrow); margin: 48px auto 0; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); font-size: var(--text-base); line-height: 1.6; }
.area-closing__proof a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 980px) {
  .board__bar { padding-inline: 20px; }
  .board figcaption { padding-inline: 20px; }
  /* A board is a picture of an app. Shrunk to a phone rail it stops being
     readable, so the frame keeps its own width and the view scrolls. */
  .board__view { overflow-x: auto; overflow-y: clip; overscroll-behavior-x: contain; }
  .board__frame { width: 880px; }
  .board__hint { display: block; }
}
.showcase__tab { display: flex; align-items: center; gap: 10px; }
.showcase__tab svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Per-board crops. Each area shows a different region so the pages do not
   repeat one screenshot, and every crop excludes the client product name. */
.board__view--ads { --crop-top: 29.5%; --crop-bottom: 1%; }
.board__view--partnerships { --crop-top: 29.5%; --crop-bottom: 10.5%; }
.board__view--promotions { --crop-top: 29.5%; --crop-bottom: 1%; }
.board__view--product-rd { --crop-top: 26.5%; --crop-bottom: 4%; }
.board__view--brand-rd { --crop-top: 26.5%; --crop-bottom: 28.5%; }
.board__view--discovery { --crop-top: 26.5%; --crop-bottom: 27%; }
.board__view--design { --crop-top: 26.5%; --crop-bottom: 2%; }
.board__view--urgent { --crop-top: 29.5%; --crop-bottom: 36%; }
.board__view--loyalty { --crop-top: 26%; --crop-bottom: 28%; }
.board__view--opinions { --crop-top: 2%; --crop-bottom: 28%; }
.board__view--signals { --crop-top: 4.4%; --crop-bottom: 47%; }
.board__view--charts { --crop-top: 24.5%; --crop-bottom: 6%; }