/* RevMatic AI | investor-desk.css
   The Investor Desk page (2026-10-01): loaded after site.css and apps.css, tokens only, plus the page's own accent.
   --id-sky is the sky blue of the Investor Desk app icon. It marks Investor Desk things only (sample marks, step numbers,
   score chips, the chosen video, sublabels, glows), never a button and never in place of the violet .soft line.

   1 Accent and hero   2 The sample buy box   3 The deals it brings   4 Your morning   5 Watch it work   6 Who it is for
   Without JavaScript: the sample shows its top five as written, and all three videos show, one under the other. */

/* ================================================================ 1 Accent and hero */
:root { --id-sky: #7CC4FF; --id-sky-rgb: 124, 196, 255; }
.id-hero .hero__copy { max-width: 720px; }
/* the screens sit on the right of the hero still: keep the words clear of them on laptop widths */
@media (min-width: 1024px) and (max-width: 1399px) { .id-hero .hero__copy { max-width: 600px; } }
@media (min-width: 1024px) and (max-width: 1179px) { .id-hero .hero__copy { max-width: 540px; } }
.id-hero .app-meta__by::before { background: var(--id-sky); box-shadow: 0 0 0 3px rgba(var(--id-sky-rgb), 0.2), 0 0 10px rgba(var(--id-sky-rgb), 0.9); }

/* ================================================================ 2 The sample buy box
   A buy box beside the morning email, re-ranked live by /assets/js/pages/investor-desk.js.
   Without JavaScript the buttons hide, one line says what the sample buy box is, and the top five show as written. */
.demo__stage.id { box-shadow: 0 50px 120px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--id-sky-rgb), 0.08), 0 30px 100px rgba(var(--id-sky-rgb), 0.12); }
.id__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.id__box { padding: 24px 16px 26px; border-bottom: 1px solid var(--line); }
.id__mail { padding: 22px 16px 24px; min-width: 0; }
@media (min-width: 768px) {
  .id__box { padding: 30px 32px; }
  .id__mail { padding: 28px 32px 30px; }
}
@media (min-width: 1024px) {
  .id__grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .id__box { padding: 36px 36px 36px 40px; border-bottom: 0; border-right: 1px solid var(--line); background: rgba(7, 6, 11, 0.22); }
  .id__mail { padding: 34px 44px 36px 44px; }
}

/* ------------------------------------------------ the buy box */
.id__boxh { display: block; margin-bottom: 6px; letter-spacing: 0.1em; color: var(--id-sky); }
.id__static { margin-top: 8px; font: 400 16px/1.55 var(--font-text); color: var(--ink-88); }
.js .id__static { display: none; }
html:not(.js) .id-grp { display: none; }
.id-grp { margin-top: 20px; }
.id-grp__l { margin-bottom: 9px; font: 600 15px/1.3 var(--font-text); color: var(--platinum); }
.id-grp__l span { margin-left: 6px; font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--smoke); }
.id__note { min-height: 1.5em; margin-top: 14px; font: 400 14.5px/1.45 var(--font-text); color: var(--signal-soft); }

/* ------------------------------------------------ the morning email */
.id__mailhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k count" "best best"; align-items: center; gap: 4px 16px; }
.id__mailhead > .mono:first-child { grid-area: k; letter-spacing: 0.08em; }
.id__best { grid-area: best; font: 400 clamp(1.7rem, 1.2rem + 1vw, 2.2rem)/1.1 var(--font-sig); font-style: italic; color: var(--platinum); }
.id__count { grid-area: count; justify-self: end; color: var(--id-sky); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

/* the three counties, north to south, one mark per sample record */
.id-map { display: grid; gap: 8px; margin: 18px 0 8px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.id-map__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
.id-map__row .mono { font-size: 11px; letter-spacing: 0.08em; }
.id-map__dots { display: grid; grid-template-columns: repeat(12, minmax(0, 18px)); gap: 6px; }
.id-dot {
  display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 4px; border: 1px solid var(--line-strong);
  font: 600 10px/1 var(--font-mono); font-style: normal; color: transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, color 0.3s;
}
.id-dot.is-fit { border-color: rgba(var(--id-sky-rgb), 0.7); background: rgba(var(--id-sky-rgb), 0.24); }
.id-dot.is-top { border-color: var(--id-sky); background: var(--id-sky); color: var(--void); box-shadow: 0 0 12px rgba(var(--id-sky-rgb), 0.85); }

/* the top five */
.id__list { margin: 0; }
.id-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "score main tags"; gap: 4px 16px; align-items: start;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.id-row:last-child { border-bottom: 0; }
.id-empty { padding: 22px 0 8px; font: 400 clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem)/1.3 var(--font-sig); font-style: italic; color: var(--ink-88); }
.id-row.is-new { animation: rise 0.45s var(--ease-out); }
.id-score { grid-area: score; position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.id-score svg { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.id-score circle { fill: none; stroke-width: 3; }
.id-score__bg { stroke: var(--line-strong); }
.id-score__fg { stroke: rgba(var(--id-sky-rgb), 0.7); stroke-dasharray: 119.38; stroke-linecap: round; transition: stroke-dashoffset 0.6s var(--ease-out), stroke 0.3s; }
.id-score.is-hot .id-score__fg { stroke: var(--id-sky); }
.id-score.is-hot svg { filter: drop-shadow(0 0 5px rgba(var(--id-sky-rgb), 0.6)); }
.id-score b { position: relative; font: 800 15px/1 var(--font-display); font-stretch: 104%; font-variant-numeric: tabular-nums; color: var(--platinum); }
.id-row__main { grid-area: main; min-width: 0; }
.id-row__t { font: 600 16.5px/1.35 var(--font-text); color: var(--platinum); }
.id-row__f { margin-top: 3px; font: 400 14.5px/1.45 var(--font-text); color: var(--smoke); }
.id-row__why { margin-top: 5px; font: 400 14.5px/1.5 var(--font-text); color: var(--ink-78); }
.id-row__tags { grid-area: tags; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 220px; padding-top: 2px; }
.id-row__tags li { padding: 4px 8px; border-radius: 5px; background: rgba(var(--id-sky-rgb), 0.12); font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--id-sky); white-space: nowrap; }

@media (max-width: 767px) {
  .id__mailhead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "best" "count"; }
  .id__count { justify-self: start; margin-top: 4px; }
  .id-map__row { grid-template-columns: 78px minmax(0, 1fr); gap: 8px; }
  .id-map__row .mono { font-size: 10px; }
  .id-map__dots { gap: 4px; }
  .id-dot { font-size: 9px; border-radius: 3px; }
  .id-row { grid-template-columns: 46px minmax(0, 1fr); grid-template-areas: "score main" "score tags"; gap: 8px 14px; }
  .id-row__tags { justify-content: flex-start; max-width: none; padding-top: 0; }
  .id-row__t { font-size: 16px; }
}

/* ================================================================ 3 The deals it brings */
.idd__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.idd__groups { min-width: 0; }
.idd__g { padding: 26px 0 28px; border-top: 1px solid var(--line); }
.idd__h { display: flex; align-items: baseline; gap: 14px; font: 800 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1 var(--font-display); font-stretch: 108%; letter-spacing: -0.02em; color: var(--platinum); }
.idd__n { color: var(--id-sky); letter-spacing: 0.1em; }
.idd__list { margin-top: 14px; max-width: 34em; font: 500 16.5px/1.55 var(--font-text); color: var(--platinum); }
.idd__why { margin-top: 10px; max-width: 30em; font: 400 clamp(1.15rem, 1.05rem + 0.3vw, 1.3rem)/1.35 var(--font-sig); font-style: italic; color: var(--ink-78); }
.idd__rows { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.idd__rows li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "city score" "sit score"; align-items: center; gap: 2px 14px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.idd__city { grid-area: city; font: 600 15.5px/1.35 var(--font-text); color: var(--platinum); }
.idd__sit { grid-area: sit; font: 400 14.5px/1.4 var(--font-text); color: var(--smoke); }
.idd__score {
  grid-area: score; display: grid; place-items: center; min-width: 46px; height: 34px; padding: 0 8px; border-radius: 7px;
  border: 1px solid rgba(var(--id-sky-rgb), 0.5); background: rgba(var(--id-sky-rgb), 0.1);
  font: 800 15px/1 var(--font-display); font-stretch: 104%; font-variant-numeric: tabular-nums; color: var(--id-sky);
}
.idd__note { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); letter-spacing: 0.08em; }
.idd__note i, .idm__shot figcaption i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--id-sky); box-shadow: 0 0 10px rgba(var(--id-sky-rgb), 0.8); }
/* the drone loop: a band above the groups on phones, a tall frame beside them from 768px, never wider than the
   clip's own 540px, so it stays sharp. site.js gives it its file from 768px only (never on phones, reduced motion or
   data saver) and adds its pause button here. */
.idd__fig {
  position: relative; order: -1; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-card); border: 1px solid var(--line-strong); background: var(--plum);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), 0 0 80px rgba(var(--id-sky-rgb), 0.12);
}
.idd__fig picture, .idd__fig img, .idd__fig video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.idd__fig video { opacity: 0; transition: opacity 1.2s ease; }
.idd__fig video.is-playing { opacity: 1; }
.idd__fig::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7, 6, 11, 0) 60%, rgba(7, 6, 11, 0.45) 100%); }
.idd__fig .vidctl { z-index: 2; right: 12px; bottom: 12px; top: auto; }
@media (min-width: 768px) {
  .idd__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 40px; align-items: start; }
  .idd__fig { order: 0; aspect-ratio: 9 / 16; position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 1024px) {
  .idd__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 56px; }
}
@media (min-width: 1280px) {
  .idd__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 72px; }
  .idd__g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 40px; align-items: start; }
  .idd__rows { margin-top: 4px; }
}

/* ================================================================ 4 Your morning (five steps on real screens) */
.idm { list-style: none; margin: clamp(36px, 1.5rem + 2.4vw, 64px) 0 0; padding: 0; display: grid; gap: clamp(52px, 2rem + 3.6vw, 104px); }
.idm__step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.idm__txt { min-width: 0; }
.idm__num {
  display: block; font: 800 clamp(52px, 2.6rem + 2.4vw, 88px)/0.85 var(--font-display); font-stretch: 108%; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(var(--id-sky-rgb), 0.75);
}
.idm__num::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 18px; background: linear-gradient(90deg, var(--id-sky), rgba(var(--id-sky-rgb), 0)); }
.idm__t { margin-top: 18px; font: 600 clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem)/1.25 var(--font-text); letter-spacing: -0.01em; color: var(--platinum); }
.idm__p { margin-top: 12px; max-width: 31em; font: 400 16.5px/1.62 var(--font-text); color: var(--ink-88); }
.idm__shot { margin: 0; min-width: 0; }
.idm__shot picture { display: block; }
.idm__shot img {
  display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line-strong); background: #0b0e13;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 70px rgba(var(--id-sky-rgb), 0.1);
}
.idm__shot figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 11px; letter-spacing: 0.1em; }
.idm__shot--card picture, .idm__shot--card figcaption { max-width: 560px; margin-left: auto; margin-right: auto; }
.idm__shot--phone picture, .idm__shot--phone figcaption { width: min(290px, 78%); margin-left: auto; margin-right: auto; }
.idm__shot--phone img { border: 8px solid #0b0a0e; border-radius: 34px; box-shadow: 0 0 0 1px rgba(243, 240, 248, 0.16), 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 80px rgba(var(--id-sky-rgb), 0.16); }
.idm__shot--phone figcaption { justify-content: center; }
@media (max-width: 767px) {
  .idm__shot img { border-radius: 10px; }
  .idm__shot--phone img { border-width: 6px; border-radius: 28px; }
  /* the phone cut of the pipeline is narrow and tall: never much wider than its own size */
  .idm__shot--deals picture, .idm__shot--deals figcaption { max-width: 480px; margin-left: auto; margin-right: auto; }
}
/* tablets get the narrow cuts too (below 1024px the wide screens would shrink past reading size), near their own size */
@media (min-width: 768px) and (max-width: 1023px) {
  .idm__shot--fit picture, .idm__shot--fit figcaption { max-width: 760px; margin-left: auto; margin-right: auto; }
}
@media (min-width: 1024px) {
  .idm__step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .idm__step:nth-child(even):not(.idm__step--wide) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .idm__step:nth-child(even):not(.idm__step--wide) .idm__txt { order: 2; }
  /* a desktop screen is wide: the words sit in one row above it and the screen gets the full width, so it stays readable */
  .idm__step--wide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .idm__step--wide .idm__txt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "num p" "t p"; column-gap: 64px; align-items: end; }
  .idm__step--wide .idm__num { grid-area: num; }
  .idm__step--wide .idm__t { grid-area: t; }
  .idm__step--wide .idm__p { grid-area: p; margin-top: 0; align-self: end; }
}

/* ================================================================ 5 Watch it work: one stage, a chooser and a player.
   The same component as the Smooth Flow page, in sky. Each video has controls, preload none, a poster and burned-in
   captions, with a text summary under it. Without JavaScript the chooser stays hidden and all three videos show,
   one under the other. */
.idv {
  position: relative; border-radius: var(--r-card); overflow: hidden; min-width: 0;
  background: linear-gradient(180deg, rgba(30, 24, 41, 0.92) 0%, rgba(20, 16, 29, 0.96) 100%);
  border: 1px solid rgba(243, 240, 248, 0.14);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.5), 0 30px 100px rgba(var(--id-sky-rgb), 0.1);
}
.idv::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, rgba(var(--id-sky-rgb), 0), rgba(var(--id-sky-rgb), 0.85), rgba(var(--id-sky-rgb), 0)); }
.idv__strip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 15px 32px; border-bottom: 1px solid var(--line); letter-spacing: 0.07em; }
.idv__strip i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--id-sky); box-shadow: 0 0 0 3px rgba(var(--id-sky-rgb), 0.18), 0 0 10px rgba(var(--id-sky-rgb), 0.8); }
.idv__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.idv__pick { display: grid; gap: 8px; padding: 20px 16px 4px; }
.idv__pick[hidden] { display: none; }
.idv__b {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; width: 100%; min-height: 44px;
  padding: 14px 14px 14px 12px; border-radius: var(--r-btn); border: 1px solid var(--line); background: rgba(7, 6, 11, 0.3);
  text-align: left; color: var(--ink-78); cursor: pointer; transition: border-color 0.18s, background-color 0.18s;
}
.idv__b:hover { border-color: rgba(var(--id-sky-rgb), 0.5); }
.idv__b[aria-pressed="true"] { border-color: rgba(var(--id-sky-rgb), 0.75); background: rgba(var(--id-sky-rgb), 0.1); }
.idv__b:focus-visible { outline: 2px solid var(--plasma-soft); outline-offset: 2px; }
.idv__n { padding-top: 3px; color: var(--smoke); }
.idv__b[aria-pressed="true"] .idv__n { color: var(--id-sky); }
.idv__bt b { display: block; font: 600 16.5px/1.3 var(--font-text); color: var(--platinum); }
.idv__bt span { display: block; margin-top: 3px; font: 400 14.5px/1.45 var(--font-text); color: var(--smoke); }
.idv__d { padding-top: 3px; color: var(--smoke); }
.idv__stage { display: grid; gap: 40px; padding: 20px 16px 24px; min-width: 0; }
.idv__item { margin: 0; min-width: 0; }
.idv__item[hidden] { display: none; }
.idv__frame {
  position: relative; overflow: hidden; border-radius: var(--r-btn); background: #000; aspect-ratio: 16 / 9;
  box-shadow: 0 0 0 1px rgba(243, 240, 248, 0.14), 0 0 60px rgba(var(--id-sky-rgb), 0.14);
}
.idv__frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.idv__cap { margin-top: 18px; }
.idv__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 600 clamp(1.15rem, 1rem + 0.4vw, 1.35rem)/1.3 var(--font-text); color: var(--platinum); }
.idv__h .mono { color: var(--smoke); font-size: 12px; }
.idv__cap p { margin-top: 8px; max-width: 44em; font: 400 16px/1.6 var(--font-text); color: var(--ink-88); }
@media (min-width: 768px) {
  .idv__pick { padding: 28px 32px 4px; }
  .idv__stage { padding: 28px 32px 32px; }
}
@media (min-width: 1024px) {
  .idv__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .idv__pick { align-content: start; padding: 36px 0 36px 36px; }
  .idv__stage { padding: 36px 36px 36px 32px; }
}
@media (max-width: 767px) {
  .idv__strip { padding: 12px 16px; font-size: 11px; }
  .idv__b { grid-template-columns: 26px minmax(0, 1fr) auto; padding: 12px; }
}

/* ================================================================ 6 Who it is for: the numbers and the group labels in sky */
.idwho .appwho__who .mono { color: var(--id-sky); }
.idg__k { display: block; margin: 30px 0 4px; font-size: 12px; letter-spacing: 0.12em; color: var(--id-sky); }
.appwho__wl + .idg__k { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .idd__fig video, .idv__b { transition: none; }
}

/* 2026-10-01 (Leo): his line, as a statement band between the hidden gems and the morning email */
.id-statement { padding-block: clamp(40px, 6vw, 84px); text-align: center; }
.id-statement__line { margin: 0 auto; max-width: 16em; font-family: var(--font-display); font-weight: 800; font-stretch: 108%;
  letter-spacing: -0.028em; font-size: var(--fs-h2-xl); line-height: 1.02; text-wrap: balance; color: var(--platinum); }
.id-statement__line .ln { display: block; }
.id-statement__line .soft { color: var(--plasma-soft); }
@media (max-width: 720px) { .id-statement__line { font-size: 34px; font-stretch: 104%; } }

/* ================================================================ 7 The 2026-10-06 rebuild
   The hero still and the morning steps are built from Investor Desk's own public samples (fictional addresses).
   7a hero: price line, the Desk's own number, a lighter feather so the samples read   7b videos   7c your morning   7d phones */
.id-hero .hero__title { font-size: clamp(2.2rem, 1rem + 3vw, 3.6rem); }
@media (min-width: 1024px) { .id-hero .hero__copy { max-width: 600px; } }
@media (min-width: 1700px) { .id-hero .hero__copy { max-width: 680px; } }
@media (min-width: 1024px) and (max-width: 1179px) { .id-hero .hero__copy { max-width: 520px; } }
@media (min-width: 1024px) {
  .id-hero .hero__media {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 14%, rgba(0, 0, 0, 0.8) 28%, #000 40%), linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.45) 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 14%, rgba(0, 0, 0, 0.8) 28%, #000 40%), linear-gradient(180deg, #000 0%, #000 76%, rgba(0, 0, 0, 0.45) 90%, transparent 100%);
  }
}
@media (max-width: 1023px) {
  .id-hero .hero__media { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 99%); mask-image: linear-gradient(180deg, #000 78%, transparent 99%); }
}
.id-price { margin-top: 22px; font: 500 17px/1.5 var(--font-text); color: var(--platinum); }
.id-talk { margin-top: 4px; font: 400 16px/1.5 var(--font-text); color: var(--ink-88); }
.id-talk a { display: inline-flex; align-items: center; min-height: 44px; color: var(--platinum); border-bottom: 1px solid var(--line-strong); }
.close .id-talk { margin-top: 18px; }
.close__team { margin-top: 22px; font: 400 15px/1.45 var(--font-text); color: var(--smoke); }
.idd__more { margin-top: 14px; font: 400 15.5px/1.55 var(--font-text); color: var(--ink-88); }

/* 7b Watch it work: three click-to-play thumbnails (.ytl lives in site.css) */
.vgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) and (max-width: 1023px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1024px) { .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.vgrid__i { min-width: 0; }
.vgrid__i .ytl { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--id-sky-rgb), 0.12); }
.vgrid__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 18px; font: 600 clamp(1.1rem, 1rem + 0.3vw, 1.25rem)/1.3 var(--font-text); color: var(--platinum); }
.vgrid__t .mono { color: var(--smoke); font-size: 12px; }
.vgrid__p { margin-top: 8px; font: 400 15.5px/1.55 var(--font-text); color: var(--ink-88); }
.vgrid__n { margin-top: 10px; color: var(--id-sky); letter-spacing: 0.08em; }
.vgrid__all { margin-top: 30px; }

/* 7c Your morning: three steps beside the Desk's own samples */
.idn { display: grid; gap: clamp(48px, 2rem + 4vw, 96px); margin: 0; padding: 0; list-style: none; }
.idn__i { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
.idn__n {
  display: block; font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 56px; line-height: 0.85; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(var(--id-sky-rgb), 0.85);
}
.idn__t { margin-top: 18px; font: 600 clamp(1.3rem, 1.05rem + 0.7vw, 1.75rem)/1.25 var(--font-text); letter-spacing: -0.01em; color: var(--platinum); text-wrap: balance; }
.idn__p { margin-top: 12px; max-width: 32em; font: 400 16.5px/1.62 var(--font-text); color: var(--ink-88); }
.idn__shot { position: relative; isolation: isolate; margin: 0; min-width: 0; justify-self: center; width: 100%; }
.idn__shot::before {
  content: ""; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--id-sky-rgb), 0.18), rgba(var(--id-sky-rgb), 0)); filter: blur(30px);
}
.idn__shot picture { display: block; }
.idn__shot img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(243, 240, 248, 0.12); }
.idn__shot--card { max-width: 440px; }
.idn__shot--mail { max-width: 500px; }
.idn__shot--wide img { border-radius: var(--r-card); }
.idn__cap { margin-top: 14px; color: var(--smoke); letter-spacing: 0.08em; text-align: center; }
@media (min-width: 1024px) {
  .idn__i { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; }
  .idn__i:nth-child(even) .idn__copy { order: 2; }
  .idn__i--wide { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .idn__i--wide .idn__copy { max-width: 760px; }
}

/* 7d Phones: every label in the samples at least 12px, every tap at least 44px */
@media (max-width: 767px) {
  .id-grp__l span, .id-map__row .mono, .id-row__tags li, .idd__note, .idn__cap, .vgrid__t .mono { font-size: 12px; }
  .id-dot { font-size: 12px; }
  .id .demo__sample { font-size: 12px; }
  .idn__i { gap: 18px; }
  .idn__n { font-size: 40px; }
  .idn__t { margin-top: 12px; }
  .idn__shot img { border-radius: 14px; }
  .id-price { font-size: 16px; }
}