/* ===========================================================================
   Opal Features™ — one page
   ---------------------------------------------------------------------------
   The heading holds the left, all four features sit to the right of it at one
   size, and any of them opens into the same close-up the work page uses. Same
   ground, same stone, same borrowed colour; nothing here is a second design.
   ========================================================================= */

.back {
  font-size: var(--sc-t-sm);
  color: var(--sc-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sc-hairline);
  padding-bottom: 2px;
  transition: border-color 160ms var(--sc-ease-out);
}
.back:hover { border-color: var(--live-ink); }

.featpage {
  display: grid;
  align-content: center;
  padding: clamp(4.5rem, 10vh, 6.5rem) var(--sc-gutter) clamp(1.25rem, 3vh, 2rem);
  max-width: var(--sc-maxw);
  margin-inline: auto;
  width: 100%;
}

.featpage__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

/* ─────────────────────────────────────────────────────────── the left ── */

.featpage__say h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.6rem);
  margin: 0;
  letter-spacing: var(--sc-track-tight);
  max-width: 11ch;
}
.tm {
  font-size: 0.3em;
  vertical-align: super;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--sc-ink-soft);
}
.featpage__say .sc-lede {
  margin-top: var(--sc-5);
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-base);
  max-width: 34ch;
}
.featpage__say .cta { margin-top: clamp(1.25rem, 3vh, 2rem); }
.featpage__back { margin: var(--sc-5) 0 0; font-size: var(--sc-t-sm); }
.featpage__back a {
  color: var(--sc-ink-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ────────────────────────────────────────────────────────── the right ──
   Four cells at one size. Equal columns and equal rows, so no feature is
   presented as bigger news than another. */

.featpage__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.6rem);
  align-content: center;
}
.fcard { margin: 0; }
/* explicit cells, so opening one does not shuffle the other three */
.featpage__grid > .fcard:nth-child(1) { grid-area: 1 / 1; }
.featpage__grid > .fcard:nth-child(2) { grid-area: 1 / 2; }
.featpage__grid > .fcard:nth-child(3) { grid-area: 2 / 1; }
.featpage__grid > .fcard:nth-child(4) { grid-area: 2 / 2; }
/* one shape for all four, close to what the clips are natively so the fill
   crops a sliver rather than a third of the frame */
.fcard .work__frame video { aspect-ratio: 16 / 8; }
.fcard figcaption { margin-top: clamp(0.5rem, 1.1vh, 0.8rem); }
.fcard h3 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug);
  line-height: 1.16;
  margin: 0;
  color: var(--own, var(--sc-ink));
}
.fcard__n {
  font-family: var(--sc-font-mono);
  font-size: 0.7em;
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink-soft);
  margin-right: 0.35em;
}
.fcard figcaption p {
  margin: var(--sc-2) 0 0;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-xs);
  line-height: 1.5;
  max-width: 44ch;
  /* the whole line is in the close-up; at rest a card shows its opening */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* opened, the card gives its line back in full */
.fcard.is-focused figcaption p {
  display: block; overflow: visible;
  font-size: var(--sc-t-sm);
}

.featpage__foot {
  width: 100%;
  max-width: var(--sc-maxw);
  margin: clamp(1rem, 3vh, 2rem) auto 0;
  padding-inline: var(--sc-gutter);
}

/* ───────────────────────────────────────────────────────────── mobile ── */

@media (max-width: 1000px) {
  .featpage { min-height: 0; padding-top: clamp(4.5rem, 12vh, 6rem); }
  .featpage__wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 5vh, 2.5rem); }
  .featpage__say h1 { max-width: none; }
  .featpage__say .sc-lede { max-width: 46ch; }
}

@media (max-width: 620px) {
  .featpage__grid { grid-template-columns: minmax(0, 1fr); }
  .fcard figcaption p { -webkit-line-clamp: 3; }
}

/* ───────────────────────────────────────────────────── integrations ──
   A second screen under the features, built on the same bones: the heading
   holds the left, the set sits to the right of it, every plate one size. No
   media here, so the plates carry a glyph instead of a frame. The glyphs are
   drawn to one box at one line weight, so the row reads as one system rather
   than as six logos pasted side by side. */

.intgpage {
  display: grid;
  align-content: center;
  padding: clamp(1rem, 2.5vh, 2rem) var(--sc-gutter) clamp(1.5rem, 4vh, 2.5rem);
  max-width: var(--sc-maxw);
  margin-inline: auto;
  width: 100%;
}
.intgpage__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.intgpage__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1.1rem);
}
.intg {
  background: var(--sc-surface);
  border-radius: var(--stone-sm);
  box-shadow: var(--sc-e1), var(--sc-edge),
              inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 9%, transparent);
  padding: clamp(0.85rem, 1.8vw, 1.3rem);
  transition: box-shadow 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .intg:hover { box-shadow: var(--sc-e2), var(--sc-edge),
                            inset 0 0 0 1px color-mix(in oklab, var(--own, var(--sc-ink)) 26%, transparent);
                transform: translateY(-2px); }
}
.intg__marks { display: flex; align-items: center; gap: var(--sc-2); color: var(--own, var(--sc-ink)); }
.intg__mark { width: clamp(18px, 1.5vw, 22px); height: auto; }
.intg h3 {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-base);
  letter-spacing: var(--sc-track-snug);
  line-height: 1.16;
  margin: var(--sc-3) 0 0;
  color: var(--own, var(--sc-ink));
}
.intg p {
  margin: var(--sc-2) 0 0;
  color: var(--sc-ink-soft);
  font-size: var(--sc-t-xs);
  line-height: 1.5;
}

@media (max-width: 1000px) {
  .intgpage__wrap { grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 5vh, 2.5rem); }
}
@media (max-width: 620px) {
  .intgpage__grid { grid-template-columns: minmax(0, 1fr); }
}