/* ==========================================================================
   eFinder — section-specific composition
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2rem + 5vw, 7rem);
  border-bottom: 1px solid var(--line);
  background-color: var(--paper);
  overflow: hidden;
}

/* Generated contour texture, held far back so the type stays the subject.
   Painted as a background rather than an <img> so it cannot introduce a
   stacking context — the illustrations above it rely on mix-blend-mode
   reaching the section background.
   Strength is set by the alpha of the flat colour layer painted over the
   texture, not by a blend mode: multiply would darken it, not fade it. */
.hero {
  background-image: linear-gradient(rgba(251, 250, 247, 0.84), rgba(251, 250, 247, 0.94)),
    url('/assets/img/paper-contour.webp?v=7f2f106e');
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60rem 40rem at 78% 8%, rgba(169, 124, 47, 0.1), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, rgba(251, 250, 247, 0) 45%);
  pointer-events: none;
}

.hero > .wrap {
  position: relative;
  z-index: 2;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  align-items: center;
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  }
}

.hero h1 {
  font-size: var(--step-6);
  line-height: 0.99;
  max-width: 20ch;
}

.hero__lede {
  max-width: 46ch;
  margin-top: clamp(1.1rem, 0.8rem + 1vw, 1.6rem);
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.58;
}

.hero__actions {
  margin-top: clamp(1.4rem, 1rem + 1.2vw, 2rem);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: var(--space-l);
  font-size: 0.8rem;
  color: var(--ink-3);
}

.hero__proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero__proof svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--verified);
  flex: none;
}

/* --- Positioning strip ---------------------------------------------------- */

.strip {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.strip__grid {
  display: grid;
  gap: 0;
}

@media (min-width: 48rem) {
  .strip__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .strip__item + .strip__item {
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-left: clamp(1.5rem, 0.5rem + 2.5vw, 3rem);
  }
}

.strip__item {
  display: grid;
  gap: 0.3rem;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  padding-right: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
}

.strip__item + .strip__item {
  border-top: 1px solid var(--line);
}

.strip__figure {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.strip__item p {
  color: var(--ink-3);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* --- Problem: the two consoles ------------------------------------------- */

.verdict {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 40rem) {
  .verdict {
    grid-template-columns: 1fr 1fr;
  }
}

.verdict__panel {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}

.verdict__panel--cold {
  border-color: var(--cold-line);
  background: linear-gradient(180deg, #fdf8f7, var(--surface));
}

.verdict__panel--warm {
  border-color: var(--verified-line);
  background: linear-gradient(180deg, #f6fbf8, var(--surface));
  box-shadow: var(--shadow-m);
}

.verdict__source {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.verdict__query {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.verdict__query svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: none;
  color: var(--ink-3);
}

.verdict__outcome {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem;
  border-radius: var(--radius-s);
  font-size: 0.85rem;
}

.verdict__panel--cold .verdict__outcome {
  background: var(--cold-soft);
  color: var(--cold);
}

.verdict__panel--warm .verdict__outcome {
  background: var(--verified-soft);
  color: var(--verified);
}

.verdict__outcome strong {
  font-size: 0.9rem;
}

.verdict__outcome span {
  color: var(--ink-2);
  font-size: 0.79rem;
  line-height: 1.5;
}

.verdict__note {
  font-size: 0.76rem;
}

.verdict__panel--warm .verdict__outcome .result__email {
  font-size: 0.82rem;
}

/* Reasons the trail goes cold. */
.reasons {
  display: grid;
  gap: 0;
  margin-top: var(--space-l);
  border-top: 1px solid var(--line);
}

.reasons li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-2);
  line-height: 1.55;
}

.reasons svg {
  width: 1rem;
  height: 1rem;
  margin-top: 0.3rem;
  color: var(--cold);
  flex: none;
}

/* --- How it works: the six-signal ladder --------------------------------- */

.ladder {
  display: grid;
  gap: 0;
  counter-reset: rung;
  border-top: 1px solid var(--line);
}

.rung {
  display: grid;
  gap: 0.4rem 1.5rem;
  padding-block: clamp(1.25rem, 1rem + 0.8vw, 1.85rem);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background var(--dur-base) var(--ease-out);
}

@media (min-width: 52rem) {
  .rung {
    grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr);
    padding-inline: var(--space-m);
    margin-inline: calc(var(--space-m) * -1);
    border-radius: var(--radius-m);
  }

  .rung:hover {
    background: var(--surface);
  }
}

/* Six signals stacked one per row made this the tallest block on the page by a wide margin,
   while most of the line length sat empty. Past 64rem there is room for two columns, so the
   ladder reads across the width instead of running down it. The rung reverts to its stacked
   two-part shape inside a column, where a 15rem name track would leave the body squeezed. */
@media (min-width: 64rem) {
  .ladder {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-2xl);
    border-top: 0;
  }

  .ladder > .rung {
    border-top: 1px solid var(--line);
    border-bottom: 0;
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }

  /* The name and the body share the second track, so the index column stays a true gutter. */
  .ladder > .rung > .rung__name {
    grid-column: 2;
  }

  .ladder > .rung > .rung__body {
    grid-column: 2;
  }
}

.rung__index {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--brass-deep);
}

.rung__index::before {
  counter-increment: rung;
  content: '0' counter(rung);
}

.rung__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.rung__body {
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.65;
  max-width: 56ch;
}

.rung__body em {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  font-style: normal;
  color: var(--ink-3);
}

/* --- Evidence, confidence, fallback -------------------------------------- */

.bands {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--surface);
}

.band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.band:last-child {
  border-bottom: 0;
}

.band__score {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.band__verdict {
  font-weight: 600;
  font-size: 0.92rem;
}

.band__note {
  grid-column: 1 / -1;
  color: var(--ink-3);
  font-size: 0.79rem;
  line-height: 1.5;
}

@media (min-width: 34rem) {
  .band {
    grid-template-columns: 5.5rem 10rem minmax(0, 1fr);
  }

  .band__note {
    grid-column: auto;
  }
}

.band--high .band__score { color: var(--verified); }
.band--mid .band__score { color: var(--caution); }
.band--low .band__score { color: var(--cold); }
.band--none .band__score { color: var(--ink-3); }

/* --- Asia section --------------------------------------------------------- */

.asia {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #f2f5f6 0%, var(--paper-2) 100%);
  border-block: 1px solid var(--line);
}

.asia__map {
  width: 100%;
  border-radius: var(--radius-l);
}

.asia__facts {
  display: grid;
  gap: 0;
  margin-top: var(--space-l);
  border-top: 1px solid var(--line-strong);
}

.asia__facts > div {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.asia__facts dt {
  font-size: var(--step--1);
  font-weight: 600;
}

.asia__facts dd {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* --- ICP cards ------------------------------------------------------------ */

.icp-card {
  overflow: hidden;
  padding: 0;
}

.icp-card__art {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.icp-card__body {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
}

.icp-card__job {
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* On a phone these four cards stacked to roughly 2000px, and more than half of that was the
   artwork rendered full-bleed at 4:3. Laying the card on its side puts the picture in a fixed
   column and gives the text the width it was already asking for. Nothing is cropped away that
   was not already cropped: the art keeps object-fit: cover, just in a narrower frame. */
@media (max-width: 47.99rem) {
  .icp-card {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: stretch;
  }

  .icp-card__art {
    height: 100%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}

/* Below this the side-by-side leaves too little for the text, so it stacks again. */
@media (max-width: 22.5rem) {
  .icp-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .icp-card__art {
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

.icp-card__job strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--brass-deep);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Ways to work --------------------------------------------------------- */

/* The three entry points share the plain .card shape. The cost line is the
   point of each card, so it gets a rule of its own rather than running on as a
   third paragraph -- a reader scanning for price should find it without having
   to read. margin-top:auto works because .card is already a column flexbox, and
   it keeps all three cost lines on the same baseline however unevenly the copy
   above them wraps. */
.way-card__cost {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.way-card__cost strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--brass-deep);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Pricing -------------------------------------------------------------- */

.pricing__grid {
  display: grid;
  gap: var(--space-m);
  align-items: stretch;
}

/* Below 44rem the four tiers stacked to roughly 1600px, so a reader could never see two at once
   and comparing Individual against Professional, which is the actual decision, meant scrolling
   back and forth from memory. Swiping puts them side by side and costs one row instead of four.
   The next card is deliberately left peeking so it is obvious there is more than one. */
@media (max-width: 43.99rem) {
  .pricing__grid {
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Cards can lift on hover, so leave room rather than clipping the shadow. */
    padding: 0.25rem var(--gutter) 1rem;
    margin-inline: calc(var(--gutter) * -1);
    scrollbar-width: none;
  }

  .pricing__grid::-webkit-scrollbar {
    display: none;
  }

  .pricing__grid > .plan {
    scroll-snap-align: start;
  }
}

@media (min-width: 44rem) {
  .pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68rem) {
  .pricing__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pricing__grid > * {
  position: relative;
}

.usage {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  border: 1px solid var(--brass-line);
  border-radius: var(--radius-l);
  background: var(--brass-soft);
}

@media (min-width: 56rem) {
  .usage {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-xl);
    align-items: center;
  }
}

.usage h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.15;
}

.usage p {
  margin-top: 0.5rem;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.6;
}

.usage__table {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--brass-line);
}

.usage__table > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--brass-line);
  font-size: var(--step--1);
}

.usage__table dt {
  color: var(--ink-2);
}

.usage__table dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

/* Credit packs sit between the plan cards and the tariff: one-time credits for the buyer who
   has a list this quarter rather than a habit. Same panel shape as .usage, on plain surface
   rather than brass, so the two read as one ledger and not as a second pricing table. */
.packs {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}

@media (min-width: 56rem) {
  .packs {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-xl);
    align-items: center;
  }
}

.packs h3 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.15;
}

.packs__intro p {
  margin-top: 0.5rem;
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.6;
}

.packs__intro .btn {
  margin-top: var(--space-m);
}

.packs__list {
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 44rem) {
  .packs__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .packs__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pack {
  display: grid;
  gap: 0.3rem;
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--paper);
}

.pack__credits {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pack__price {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.03em;
}

.pack__meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}

/* --- Trust ---------------------------------------------------------------- */

.trust-grid {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 40rem) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 68rem) {
  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust-card {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1.25rem;
  border: 1px solid var(--line-night);
  border-radius: var(--radius-l);
  background: var(--night-2);
}

.trust-card h3 {
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.trust-card p {
  color: #a2a8b3;
  font-size: var(--step--1);
  line-height: 1.6;
}

.trust-card__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 0.35rem;
  border: 1px solid #3a4150;
  border-radius: var(--radius-s);
  color: #d9b26a;
}

.trust-card__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* --- Final CTA ------------------------------------------------------------ */

.final {
  position: relative;
  overflow: hidden;
  background: var(--night);
  color: var(--ink-inverse);
}

.final__texture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  pointer-events: none;
}

.final > .wrap {
  position: relative;
  z-index: 1;
}

.final__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-l);
  padding-block: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  text-align: center;
}

.final h2 {
  max-width: 18ch;
  font-size: var(--step-5);
  line-height: 1.02;
}

.final__lede {
  max-width: 52ch;
  color: #b6bac2;
  font-size: var(--step-1);
  line-height: 1.6;
}

.final .btn-row {
  justify-content: center;
}

.final__reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.15rem;
  font-size: 0.8rem;
  color: #8b909b;
}

.final__reassure li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.final__reassure svg {
  width: 0.85rem;
  height: 0.85rem;
  color: #d9b26a;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--space-xl);
  border-top: 1px solid var(--line-night);
  background: var(--night);
  color: #9aa0ab;
  font-size: 0.85rem;
}

.footer__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 48rem) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

.footer__brand {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  max-width: 32ch;
}

.footer__brand .brand {
  color: var(--ink-inverse);
}

.footer__col h2 {
  margin-bottom: 0.85rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #6e7480;
}

.footer__col li + li {
  margin-top: 0.5rem;
}

.footer__col a {
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__col a:hover {
  color: var(--ink-inverse);
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--line-night);
  font-size: 0.78rem;
  color: #7d8490;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

/* ==========================================================================
   Illustration furniture
   Generated artwork is decorative support: it is held back with opacity and
   blend modes so type always wins, and every instance carries real alt text
   or is explicitly hidden from assistive technology.
   ========================================================================== */

.figure {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

.figure img {
  width: 100%;
  border-radius: var(--radius-l);
  background: var(--surface);
}

.figure--bare img {
  border-radius: var(--radius-m);
  background: transparent;
  mix-blend-mode: multiply;
}

.figure figcaption {
  color: var(--ink-3);
  font-size: 0.78rem;
  line-height: 1.5;
  padding-left: 0.9rem;
  border-left: 2px solid var(--brass-line);
}

/* Small art tucked beside a section lede. */
.head-art {
  width: min(100%, 22rem);
  margin-top: var(--space-m);
  mix-blend-mode: multiply;
}

/* Convergence plate closing the "how it works" section. A 1200x670 diagram stretched to the full
   1275px container stood 729px tall, a whole screen of decoration in the middle of the page. It is
   a diagram, not a hero image, so it is capped and centred: the caption was already centre-styled,
   which is a good sign this was always the intent. */
.plate {
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
  max-width: min(100%, 46rem);
  margin-inline: auto;
}

.plate img {
  mix-blend-mode: multiply;
}

.plate figcaption {
  justify-self: center;
  text-align: center;
  border-left: 0;
  border-top: 2px solid var(--brass-line);
  padding: 0.6rem 0 0;
  max-width: 40ch;
}

/* Two "inside a signal" detail cards. */
.detail-band {
  display: grid;
  gap: var(--space-m);
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (min-width: 48rem) {
  .detail-band {
    grid-template-columns: 1fr 1fr;
  }
}

.detail-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.detail-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.detail-card__body {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
}

/* Same story as the use-case cards: on a phone the 4:3 art was taking roughly half the card.
   Laid on its side it keeps the picture and gives the text the width. */
@media (max-width: 47.99rem) {
  .detail-card {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: stretch;
  }

  .detail-card > img {
    height: 100%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
}

@media (max-width: 22.5rem) {
  .detail-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-card > img {
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Art paired with a heading, side by side. */
.titled-art {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-m);
  align-items: center;
  margin-bottom: var(--space-m);
}

.titled-art img {
  width: 100%;
  mix-blend-mode: multiply;
}

/* Art at the head of a card, in place of an icon. */
.card__art {
  width: min(100%, 15rem);
  margin-bottom: var(--space-xs);
  mix-blend-mode: multiply;
}

/* Full-bleed section washes.
   Backgrounds, not elements: an absolutely-positioned <img> would need a
   z-index'd wrapper above it, and that wrapper's stacking context stops the
   mix-blend-mode on the illustrations from reaching the paper beneath. */
.wash {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* A flat colour layer at high alpha sits over the texture; its alpha is the
   texture's visible strength. Around 8-12% is enough to feel like paper
   without competing with the type. */
.wash--guilloche {
  background-image: linear-gradient(rgba(244, 241, 234, 0.91), rgba(244, 241, 234, 0.91)),
    url('/assets/img/paper-guilloche.webp?v=7a95c6ef');
}

.wash--ledger {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, #fff 60%),
    url('/assets/img/ledger-grid.webp?v=f9b51e47');
  background-size: cover, 100% 55%;
  background-position: center, top center;
}

.wash--mesh {
  background-image: url('/assets/img/night-mesh.webp?v=54695e82');
}

/* Asia section visuals. */
.asia__visuals {
  display: grid;
  gap: var(--space-m);
}

.figure--inset img {
  border: 1px solid var(--line);
}

@media (min-width: 30rem) {
  .figure--inset {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-m);
  }

  .figure--inset figcaption {
    align-self: center;
  }
}

/* Plate above the standalone try-it console. */
.try__plate {
  width: min(100%, 30rem);
  margin: var(--space-m) auto 0;
  mix-blend-mode: multiply;
}

/* Ornamental divider. */
.divider-rule {
  width: min(100%, 26rem);
  margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.5rem);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

/* Trust section intro art. */
.trust-intro {
  display: grid;
  gap: var(--space-m);
}

.trust-intro__art {
  width: 100%;
  max-width: 9rem;
  justify-self: end;
  opacity: 0.6;
  /* Invert the ink drawing for the dark ground, then screen so the paper
     ground of the source image drops out instead of showing as a box. */
  filter: invert(1) brightness(0.72) contrast(1.25) saturate(0.6);
  mix-blend-mode: screen;
}

@media (min-width: 40rem) {
  .trust-intro {
    /* An `auto` track lets the images claim their intrinsic width and crush the
       copy to one word per line; the track must be explicit. */
    grid-template-columns: minmax(0, 1fr) 9rem;
    align-items: center;
    gap: var(--space-l);
  }
}

/* Footer ornament. */
.footer__ornament {
  width: 3.5rem;
  margin-top: var(--space-xs);
  opacity: 0.5;
  filter: invert(1) brightness(0.7) contrast(1.3) saturate(0.4);
  mix-blend-mode: screen;
}

/* --- Placements for the second artwork pass ------------------------------ */

/* Positioning strip marks. Small enough that only the silhouette reads. */
.strip__mark {
  width: auto;
  height: 1.9rem;
  margin-bottom: 0.55rem;
  mix-blend-mode: multiply;
}

/* Wide diagram sitting under a section lede. */
.head-art--wide {
  width: min(100%, 26rem);
}

/* Two supporting diagrams beneath the Asia map. */
.asia__pair {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-xs);
}

@media (min-width: 26rem) {
  .asia__pair {
    grid-template-columns: 1fr 1fr;
  }
}

.figure--stacked img {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
}

.figure--stacked figcaption {
  font-size: 0.74rem;
}

/* Faint woven paper behind the use-case cards. */
.wash--linen {
  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url('/assets/img/paper-linen.webp?v=b4ab1aa6');
}

/* Analyst-escalation mark above the usage heading. */
.usage__art {
  width: 4.5rem;
  margin-bottom: var(--space-s);
  mix-blend-mode: multiply;
}

/* Diagram closing the FAQ intro column. */
.faq__art {
  width: min(100%, 17rem);
  margin-top: var(--space-xs);
  mix-blend-mode: multiply;
}

/* --- Walkthrough ---------------------------------------------------------
   A silent screen recording of Resolve, high on the page so a first-time
   visitor sees the product before they read about it. The file is never
   fetched on load: preload is none and the source is only attached once the
   figure is on screen, so the initial page weight is unchanged. */

.film__frame {
  position: relative;
  margin: var(--space-xl) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-m);
  overflow: hidden;
}

.film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
}

/* Sits over the poster until the recording is playing. */
.film__play {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  box-shadow: var(--shadow-m);
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.film__play:hover {
  background: var(--paper);
  border-color: var(--brass-line);
}

.film__play[hidden] {
  display: none;
}

.film__play-icon {
  color: var(--brass-deep);
  flex: none;
}

.film__caption {
  padding: var(--space-s) var(--space-m);
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-3);
  font-size: var(--step--1);
}

/* Corner control. On a phone the recording renders at roughly a fifth of its
   own size, so the app's UI inside it is texture rather than text. Full screen
   rotates to landscape on iOS and Android and roughly doubles that scale,
   which is the difference between looking at the product and reading it. */
.film__expand {
  position: absolute;
  inset-block-start: 0.65rem;
  inset-inline-end: 0.65rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.film__expand:hover {
  background: var(--paper);
  color: var(--ink);
}

.film__expand[hidden] {
  display: none;
}

@media (max-width: 40rem) {
  .film__play-label {
    display: none;
  }

  /* Kept at the 44px touch minimum once the label is gone. */
  .film__play {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    justify-content: center;
  }

  /* Edge to edge, which is worth about 12% more width for the recording and
     reads as deliberate rather than as a card that ran out of room. */
  .film__frame {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
    border-radius: 0;
  }
}