/* Hallmark · shape: product showcase and editorial rows · genre: modern-minimal · theme: brand · redesign: full
 * hero: Stage (Vamo, Vanish), Banner (Monitor, Products) · signature: existing working product demonstrations
 * nav and footer: shared system · v2.0.0 · approved mascot and product facts retained */
/* Critique: reduce decorative competition and give each product one clear reading order. */
/* Hallmark · dismissed 25 · 43–44ch measures are short introductions and availability notes, not long-form prose. */
/* Hallmark · answered F7 · product rows are open and ruled; conversation frames and interactive controls retain distinct surfaces. */
:root {
  --product-head-shadow: drop-shadow(0 24px 28px rgb(5 5 6 / 0.12));
  --product-frame-shadow: none;
  --product-hero-gap: clamp(32px, 5vw, 64px);
}

/* Product identity and hierarchy. The product name remains useful context. */
.page-products .pd-cell__k { color: var(--ink-3); }
:is(.page-vamo, .page-vanish, .page-monitor, .page-products) .page-hero .eyebrow {
  font-size: var(--fs-body); font-weight: 600; color: var(--ink); margin-bottom: 20px;
}
:is(.page-vamo, .page-vanish, .page-monitor, .page-products) .page-hero__title {
  margin-top: 0; font-size: var(--fs-hero); font-weight: var(--weight-display); letter-spacing: var(--tracking-mega);
}
:is(.page-vamo, .page-vanish, .page-monitor, .page-products) .section-head { max-width: none; }
:is(.page-vamo, .page-vanish, .page-monitor, .page-products) .section-head > .display { max-width: 19ch; }
:is(.page-vamo, .page-vanish, .page-monitor, .page-products) .section-head > .lead { max-width: 58ch; }
:is(.page-vamo, .page-vanish, .page-monitor, .page-products) :is(.section-head, .page-hero__inner) .eyebrow + .display { margin-top: 16px; }
:is(.page-vamo, .page-vanish, .page-monitor, .page-products) .section--flush-top { padding-top: var(--section-y-sm); }
:is(.page-vamo, .page-vanish, .page-monitor, .page-products) .statement em { color: inherit; font-style: normal; }
:is(.page-vamo, .page-vanish, .page-monitor, .page-products) main :where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.page-vamo .vask-card--link:active { color: var(--accent-text); }

/* Vamo: a single approved head, suspended in an open composition. */
.page-vamo .vhero { padding-block: calc(var(--header-h) + 64px) 64px; }
.page-vamo .vhero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--product-hero-gap); }
.page-vamo .vhero__title { max-width: 11ch; }
.page-vamo .vhero__figure { max-width: 560px; }
.page-vamo .vhero__scope, .page-vamo .vhero__floor { display: none; }
.page-vamo .vhero__img { width: 94%; bottom: 3%; filter: var(--product-head-shadow); }
.page-vamo .vhero__modes { margin-top: 40px; border-color: var(--line-2); }
.page-vamo .vhero__modes li { align-items: center; padding-block: 16px; }
.page-vamo .vhero__modes li + li { border-left: 0; padding-left: 8px; }
.page-vamo .vhero__modes .icon { color: var(--ink-3); }

/* The conversation becomes the principal object, without a second frame. */
.page-vamo .vask { border-top: 1px solid var(--line-2); padding-top: var(--section-y-sm); }
.page-vamo .vask__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px var(--gap-columns); align-items: start; }
.page-vamo .vask__copy { display: contents; }
.page-vamo .vask__title { grid-column: 1; font-size: var(--fs-display); max-width: 17ch; }
.page-vamo .vask__copy > .lead { grid-column: 2; margin: 0; padding-top: 4px; max-width: 43ch; }
.page-vamo .vask__steps { grid-column: 1; margin: 0; }
.page-vamo .vask__stage { grid-column: 2; padding: 0; }
.page-vamo .vask__stage-bg, .page-vamo .vask__corner { display: none; }
.page-vamo .vask__chat { border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: none; }
.page-vamo .vask__n { font-family: var(--font-label); color: var(--ink-3); }
.page-vamo .vask__steps li { padding-block: 24px; }
.page-vamo .vvoice { background: var(--night-1); border-color: var(--night-line); box-shadow: none; }
.page-vamo .vvoice__figure::after { display: none; }
.page-vamo .vvoice__state, .page-vamo .vvoice__states, .page-vamo .vnotch__state {
  font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0; text-transform: none;
}
.page-vamo .vvoice__states li::before { display: none; }
.page-vamo .vvoice__states li { padding-left: 0; }
.page-vamo .vnotch__stage { box-shadow: none; background: var(--night-2); }
.page-vamo .vtoday__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); border-top: 1px solid var(--line-2); }
.page-vamo .vask-card { padding: 32px 0; background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
.page-vamo .vask-card--link:hover { transform: none; box-shadow: none; }
.page-vamo .vask-card--link:hover .vask-card__tag .icon { transform: none; }
.page-vamo .vask-card__kicker, .page-vamo .vwhat__who, .page-vamo .vwhat__a .vwhat__who, .page-vamo .vlimits__quote footer {
  font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0; text-transform: none;
}
.page-vamo .vask-card__q { font-size: var(--fs-h3); }
.page-vamo .vask-card__tag { border-top: 0; padding-top: 8px; }
.page-vamo .vwhat { box-shadow: none; border-radius: var(--r-md); }
.page-vamo .vwhat-sec__head .display, .page-vamo .vlimits__head .display, .page-vamo .vposes__head .display { font-size: var(--fs-display); }
.page-vamo .vlimits__icon { background: none; justify-content: start; border-radius: 0; }
.page-vamo .vlimits__quote::before { display: none; }
.page-vamo .vlimits__quote { padding-left: 0; }
.page-vamo .vposes__row { gap: 24px; }
.page-vamo .vpose__art { background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--r-md); }
.page-vamo .vpose__n { font-family: var(--font-label); letter-spacing: 0; color: var(--ink-3); }
.page-vamo .vpose:hover .vpose__img { transform: translateX(-50%); filter: var(--product-head-shadow); }
.page-vamo .vcta__band { background: var(--night); box-shadow: none; }

/* Vanish: broad editorial introduction, then the actual sweep control. */
.page-vanish .vnhero { padding-block: calc(var(--header-h) + 64px) 64px; }
.page-vanish .vnhero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--product-hero-gap); align-items: center; }
.page-vanish .vnhero__copy { display: block; }
.page-vanish .vnhero__copy > .eyebrow { margin: 0 0 20px; }
.page-vanish .vnhero__title { grid-column: 1; grid-row: 2; max-width: 11ch; }
.page-vanish .vnhero__copy > .lead { margin: 24px 0 0; }
.page-vanish .vnhero__copy > .page-hero__actions { margin: 32px 0 0; }
.page-vanish .vsweep { grid-column: 2; grid-row: 1; align-self: center; background: var(--night-1); box-shadow: none; border: 1px solid var(--night-line); }
.page-vanish .vnhero__facts { grid-column: 1 / -1; margin-top: 40px; max-width: none; gap: 32px; border-color: var(--line-2); }
.page-vanish .vnhero__facts li { padding: 24px 0 0; }
.page-vanish .vnhero__facts li + li { border-left: 0; padding-left: 0; }
.page-vanish .vnhero__facts b { font-size: var(--fs-h2); font-weight: 600; }
.page-vanish .vnhero__facts li:last-child b { color: var(--ink); }
.page-vanish .vnhero__facts span { font-size: var(--fs-small); }
.page-vanish .vnhow { border-top: 1px solid var(--line-2); }
.page-vanish .vnhow__grid { gap: var(--gap-columns); }
.page-vanish .vflow { background: var(--night-1); box-shadow: none; }
.page-vanish .vnhow__sticky { top: calc(var(--header-h) + 32px); }
.page-vanish .vnstep { min-height: 0; padding-block: 32px; border-radius: 0; background: none; box-shadow: none; }
.page-vanish .js-flow .vnstep:not(.is-current) { opacity: 1; }
.page-vanish .vnstep::before { display: none; }
.page-vanish .vnstep__n { font-family: var(--font-label); letter-spacing: 0; color: var(--ink-3); }
.page-vanish .st, .page-vanish .vsweep__phase, .page-vanish .vsweep__label {
  font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0; text-transform: none;
}
.page-vanish .st { min-height: 26px; height: auto; border-radius: var(--r-tag, 4px); }
.page-vanish .vnconsent { background: var(--night-1); }
.page-vanish .vnconsent::after { display: none; }
.page-vanish .vnmatch__title { font-size: var(--fs-display); }
.page-vanish .vnletter__head span { color: var(--ink-3); }
.page-vanish .vncta .cta-band { background: var(--night); box-shadow: none; }

/* Monitor: left-aligned introduction and a full-width working console. */
.page-monitor .mn-hero { padding-block: calc(var(--header-h) + 64px) 80px; }
.page-monitor .mn-hero__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--gap-columns); text-align: left; }
.page-monitor .mn-hero__intro > .eyebrow { grid-column: 1 / -1; margin: 0; }
.page-monitor .mn-hero__title { grid-column: 1; grid-row: 2 / 4; max-width: 12ch; }
.page-monitor .mn-hero__lead { grid-column: 2; margin: 0; max-width: 45ch; }
.page-monitor .mn-hero__intro > .page-hero__actions { grid-column: 2; margin: 0; align-self: end; }
.page-monitor .mn-frame { margin-top: 48px; background: var(--night-1); box-shadow: none; animation: none; }
:root[data-theme="dark"] .page-monitor .mn-frame { box-shadow: none; }
.page-monitor .mn__bar { background: none; }
.page-monitor .mn__read, .page-monitor .mn__label, .page-monitor .mn__state, .page-monitor .sev {
  font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0; text-transform: none;
}
.page-monitor .mn__read { white-space: normal; }
.page-monitor .sev { min-height: 26px; height: auto; border-radius: var(--r-tag, 4px); }
.page-monitor .mn-kind { padding: 32px 0; background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
.page-monitor .mn-kinds { gap: var(--gap-columns); }
.page-monitor .mn-kind__top { justify-content: start; gap: 16px; }
.page-monitor .mn-principle { padding: 32px 0; background: none; border: 0; border-top: 1px solid var(--night-line); border-radius: 0; }
.page-monitor .mn-trust__statement { font-size: var(--fs-display); font-weight: var(--weight-display); max-width: 25ch; }
.page-monitor .mn-cta { background: var(--night-1); }
.page-monitor .mn-cta__inner { text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--gap-columns); }
.page-monitor .mn-cta__title { grid-column: 1; grid-row: 1 / 4; max-width: 14ch; margin: 0; }
.page-monitor .mn-cta__inner > :not(.mn-cta__title) { grid-column: 2; margin: 0; justify-content: start; }

/* Products: give every product a generous, consistent editorial row. */
.page-products .pd-hero { padding-top: calc(var(--header-h) + 64px); padding-bottom: 80px; }
.page-products .pd-hero__title { font-size: var(--fs-hero); max-width: 22ch; }
/* The narrowest phones: "that commands it." stays on one line, so "that" is never alone on its own */
@media (max-width: 359px) { .page-products .pd-hero__title { font-size: 2.25rem; } }
.page-products .pd-dim { color: inherit; }
.page-products .pd-hero__row { gap: 24px var(--gap-columns); }
.page-products .pd-lineup { margin-top: 48px; box-shadow: none; border: 1px solid var(--night-line); }
.page-products .pd-lineup__bg { background: var(--night-1); }
.page-products .pd-lineup__bg::after { display: none; }
.page-products .pd-h2 { font-size: var(--fs-display); }
.page-products .pd-trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.page-products .pd-prod {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--gap-columns);
  padding: 48px; min-height: 0; border-radius: var(--r-md); box-shadow: none;
}
.page-products .pd-prod__top { grid-column: 1; grid-row: 1; flex-wrap: wrap; }
.page-products .pd-prod__title { grid-column: 1; grid-row: 2; font-size: var(--fs-h1); line-height: var(--lh-tight); max-width: 15ch; }
.page-products .pd-prod > p { grid-column: 1; grid-row: 3; max-width: 44ch; }
.page-products .pd-prod__link { grid-column: 1; grid-row: 5; padding-top: 8px; margin-top: 0; }
.page-products .pd-prod__facts { grid-column: 1; grid-row: 4; margin: 0; }
.page-products .pd-prod__vamo { grid-column: 2; grid-row: 1 / 6; min-height: 0; }
.page-products .pd-prod__vamo img { width: min(100%, 400px); filter: var(--product-head-shadow); }
.page-products .pd-prod--vamo:hover .pd-prod__vamo img { transform: none; }
.page-products .pd-prod--vamo, .page-products .pd-prod--vanish { background: var(--night-1); border: 1px solid var(--night-line); }
.page-products .pd-prod__big { grid-column: 2; grid-row: 1 / 3; margin: 0; align-self: center; }
.page-products .pd-steps { grid-column: 2; grid-row: 3 / 6; margin: 0; }
.page-products .pd-prod > .pd-prod__laws { grid-column: 1; grid-row: 4; margin: 0; }
.page-products .pd-prod--monitor { grid-column: auto; }
.page-products .pd-sources { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; }
.page-products .pd-sev { grid-column: 2; grid-row: 4 / 6; margin: 0; align-self: start; }
/* Platform support: devices stand on hairline shelves, grouped by maturity. Preview devices are drawn in full ink with one crimson posture arc; roadmap devices are quieter, with blank screens. */
.page-products .pd-platforms { padding-block: var(--section-y); background: var(--paper-2); }
.page-products .pd-shelf + .pd-shelf { margin-top: clamp(64px, 7vw, 104px); }
.page-products .pd-shelf__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 16px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.page-products .pd-shelf__label { margin: 0; font: inherit; }
.page-products .pd-shelf__label .status { gap: 8px; font-size: var(--fs-small); letter-spacing: -0.01em; }
.page-products .pd-shelf__label .status::before { width: 16px; height: 16px; }
.page-products .pd-shelf__note { margin: 0; font-size: var(--fs-micro); line-height: var(--lh-label); color: var(--ink-3); text-wrap: balance; }
/* 8px inline padding gives the focus ring even room; the negative margin keeps the text on the grid line */
.page-products .pd-shelf__action { justify-self: end; min-height: 44px; padding-inline: 8px; margin-inline: -8px; font-size: var(--fs-small); }
.page-products .pd-shelf__action:focus-visible { border-radius: var(--r-xs); }
.page-products .pd-shelf__action::after { left: 8px; right: 30px; bottom: 7px; bottom: calc(50% - 0.5lh - 3px); } /* hover underline hugs the text, not the 44px target */
.page-products .pd-runs { display: grid; gap: 0 var(--gap-columns, 32px); margin: 0; padding: 0; list-style: none; }
.page-products .pd-runs--now { --stage-h: clamp(176px, 16vw, 232px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-products .pd-runs--next { --stage-h: clamp(96px, 8.8vw, 128px); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-products .pd-run { min-width: 0; }
.page-products .pd-run__stage { display: flex; align-items: flex-end; justify-content: center; height: var(--stage-h); border-bottom: 1px solid var(--line-2); }
.page-products .pd-run__art { display: block; width: 100%; height: 100%; overflow: visible; color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.page-products .pd-run__art * { vector-effect: non-scaling-stroke; }
.page-products .pd-run__art .ui { stroke: var(--ink-3); stroke-width: 1.25; }
.page-products .pd-run__art .on { stroke: var(--accent-text); stroke-width: 1.75; }
.page-products .pd-run__art .solid { fill: currentColor; stroke: none; }
/* .cut marks a physical cut-out (Dynamic Island, notch, camera). Filled black on paper; on dark paper a white fill
   would invert it into the brightest mark, so it reads as an outline instead. */
:root[data-theme="dark"] .page-products .pd-run__art .cut { fill: none; stroke: currentColor; stroke-width: 1.25; }
.page-products .pd-runs--next .pd-run__art { color: rgb(var(--ink-rgb) / 0.42); }
.page-products .pd-run__body { display: grid; justify-items: center; align-content: start; gap: 4px; padding-top: 20px; text-align: center; }
.page-products .pd-run__name { margin: 0; font-size: var(--fs-h4); font-weight: 600; line-height: 1.2; letter-spacing: -0.018em; color: var(--ink); }
.page-products .pd-runs--next .pd-run__name { font-size: var(--fs-body); letter-spacing: -0.012em; color: var(--ink-2); }
.page-products .pd-run__os { margin: 0; font-size: var(--fs-micro); line-height: var(--lh-label); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.page-products .pd-run__what { margin: 8px 0 0; max-width: 48ch; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-2); text-wrap: balance; }
.page-products .pd-platforms__foot { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: clamp(64px, 7vw, 104px); padding-top: 32px; border-top: 1px solid var(--line); text-align: left; }
.page-products .pd-platforms__foot > p { margin: 0; max-width: 46ch; color: var(--ink-2); }
@media (max-width: 1000px) { .page-products .pd-platforms__foot { display: grid; justify-items: start; gap: 24px; } }
/* The roadmap head needs about 790px on one row; below that it stacks: label, note under the label text, then the link */
@media (max-width: 860px) {
  .page-products .pd-shelf__head { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .page-products .pd-shelf__note { padding-left: 24px; }
  .page-products .pd-shelf__action { justify-self: start; margin-top: 4px; }
}
@media (max-width: 760px) {
  .page-products .pd-runs--now { --stage-h: 176px; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .page-products .pd-runs--next { --stage-h: 96px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
  .page-products .pd-run__body { padding-top: 16px; }
  .page-products .pd-platforms__foot .btn { width: 100%; justify-content: center; }
}
@media (forced-colors: active) {
  .page-products .pd-run__art, .page-products .pd-run__art :is(.ui, .on) { stroke: CanvasText; }
  .page-products .pd-run__art .solid { fill: CanvasText; }
}
.page-products .pd-rule { background: none; border-radius: 0; box-shadow: none; border: 0; border-top: 1px solid var(--night-line); padding: 32px 0; }
.page-products .pd-cta { background: var(--night-1); }

@media (max-width: 1000px) {
  .page-vamo .vhero__inner, .page-vanish .vnhero__inner { grid-template-columns: minmax(0, 1fr); }
  .page-vamo .vhero__title { max-width: 14ch; }
  .page-vamo .vhero__figure { max-width: 480px; justify-self: center; margin-top: 0; }
  .page-vanish .vnhero__copy { display: block; }
  .page-vanish .vnhero__copy > .eyebrow { margin-bottom: 20px; }
  .page-vanish .vnhero__title { max-width: 15ch; }
  .page-vanish .vnhero__copy > .lead { margin-top: 24px; }
  .page-vanish .vnhero__copy > .page-hero__actions { margin-top: 32px; }
  .page-vanish .vnhero__facts { margin-top: 40px; }
  .page-vanish .vsweep { grid-column: 1; grid-row: auto; width: 100%; }
  .page-products .pd-prod { gap: 20px 32px; padding: 32px; }
  .page-monitor .mn-hero__intro { gap: 24px 32px; }
}
@media (max-width: 760px) {
  .page-vamo .vhero, .page-vanish .vnhero, .page-monitor .mn-hero, .page-products .pd-hero { padding-top: calc(var(--header-h) + 48px); padding-bottom: 64px; }
  .page-vamo .vask__grid { display: flex; flex-direction: column; gap: 32px; }
  .page-vamo .vask__copy > .lead { padding: 0; }
  .page-vamo .vask__steps, .page-vamo .vask__stage { width: 100%; }
  .page-vamo .vask__stage { order: 3; }
  .page-vamo .vask__steps { order: 4; }
  .page-vamo .vtoday__grid { grid-template-columns: minmax(0, 1fr); }
  .page-vamo .vposes__row { gap: 16px; }
  .page-vamo .vwhat-sec__head .display { max-width: 18ch; }
  .page-vanish .vnhow__grid { gap: 40px; }
  .page-vanish .vnhero__facts { gap: 16px; }
  .page-vanish .vnhero__facts span { font-size: var(--fs-micro); }
  .page-monitor .mn-hero__intro, .page-monitor .mn-cta__inner { display: block; }
  .page-monitor .mn-hero__intro > .eyebrow { margin-bottom: 20px; }
  .page-monitor .mn-hero__lead { margin-top: 24px; }
  .page-monitor .mn-hero__intro > .page-hero__actions { margin-top: 32px; }
  .page-monitor .mn-cta__inner > :not(.mn-cta__title) { margin-top: 24px; }
  .page-monitor .mn-frame { margin-top: 40px; }
  .page-monitor .mn-kinds { gap: 16px; }
  .page-products .pd-prod { display: flex; flex-direction: column; gap: 24px; padding: 28px; }
  .page-products .pd-prod__title { max-width: 18ch; }
  .page-products .pd-prod__vamo img { width: min(80%, 300px); }
  .page-products .pd-prod__link { margin-top: 0; }
  .page-products .pd-trio { gap: 24px; }
}
@media (max-width: 560px) {
  .page-vamo .vhero__modes { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
  .page-vamo .vhero__modes li { gap: 8px; padding: 16px 0; }
  .page-vamo .vhero__modes li + li { border-top: 0; padding-left: 0; }
  .page-vamo .vhero__modes b { font-size: var(--fs-micro); }
  .page-vamo .vhero__modes .icon { width: 16px; height: 16px; }
  .page-vamo .vhero__figure { max-width: 360px; }
  :is(.page-vamo, .page-vanish, .page-monitor, .page-products) .page-hero__actions .btn { flex: 1 1 100%; }
  .page-products .pd-prod { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-vamo .vhero__img { transition: none; transform: translateX(-50%); }
}