/* Hallmark · genre: atmospheric · macrostructure: Split Studio / Workbench / Long Document · design-system: docs/design/PIPSLAB_HALLMARK.md · designed-as-app
 * theme: custom · vibe: "night foundry, technical gold, calm authority" · axes: dark / geometric-sans / warm
 * nav: N9 edge-aligned minimal · footer: Ft5 statement · enrichment: existing real media and product UI
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5
 * contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: exception (47; preserved product scanner)
 * tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57)
 * Slop test: 57/58 · gate 47 is a user-required product-component exception
 */

html {
  overflow-x: clip !important;
  background: var(--color-paper) !important;
}

body[data-design-variant="hallmark"] {
  --ink: var(--color-paper);
  --ink-soft: var(--color-paper-2);
  --panel: var(--color-paper-2);
  --panel-2: var(--color-paper-3);
  --paper: var(--color-ink);
  --txt: var(--color-ink);
  --muted: var(--color-muted);
  --muted-2: var(--color-muted);
  --dim: var(--color-muted);
  --gold: var(--color-accent);
  --gold-2: var(--color-accent);
  --gold-bright: var(--color-focus);
  --gold-dim: var(--color-accent-soft);
  --line: var(--color-rule-soft);
  --line-soft: var(--color-rule-soft);
  --gold-line: var(--color-rule);
  --display: var(--font-display);
  --body: var(--font-body);
  --mono: var(--font-mono);
  margin: 0;
  overflow-x: clip !important;
  background:
    linear-gradient(to bottom, color-mix(in oklch, var(--color-accent) 3%, transparent), transparent var(--space-4xl)),
    var(--color-paper) !important;
  color: var(--color-ink);
  font-family: var(--font-body) !important;
  font-size: var(--text-base);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

body[data-design-variant="hallmark"][data-preview-page] {
  --ink: var(--color-ink);
}

body[data-design-variant="hallmark"] *,
body[data-design-variant="hallmark"] *::before,
body[data-design-variant="hallmark"] *::after {
  box-sizing: border-box;
}

body[data-design-variant="hallmark"] h1,
body[data-design-variant="hallmark"] h2,
body[data-design-variant="hallmark"] h3,
body[data-design-variant="hallmark"] h4 {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-display) !important;
  font-style: normal !important;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

body[data-design-variant="hallmark"] p,
body[data-design-variant="hallmark"] li {
  text-wrap: pretty;
}

body[data-design-variant="hallmark"] button,
body[data-design-variant="hallmark"] a,
body[data-design-variant="hallmark"] input,
body[data-design-variant="hallmark"] select,
body[data-design-variant="hallmark"] textarea,
body[data-design-variant="hallmark"] summary {
  min-height: var(--tap-target);
  font-family: var(--font-body);
}

body[data-design-variant="hallmark"] input,
body[data-design-variant="hallmark"] select,
body[data-design-variant="hallmark"] textarea {
  border-width: var(--rule-thin) !important;
  outline: var(--rule-strong) solid transparent;
  outline-offset: var(--rule-thin);
}

body[data-design-variant="hallmark"] button,
body[data-design-variant="hallmark"] a {
  transition:
    color var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    opacity var(--dur-short) var(--ease-out),
    transform var(--dur-short) var(--ease-out);
}

body[data-design-variant="hallmark"] button:focus-visible,
body[data-design-variant="hallmark"] a:focus-visible,
body[data-design-variant="hallmark"] input:focus-visible,
body[data-design-variant="hallmark"] select:focus-visible,
body[data-design-variant="hallmark"] textarea:focus-visible,
body[data-design-variant="hallmark"] summary:focus-visible {
  outline: var(--rule-strong) solid var(--color-focus) !important;
  outline-offset: var(--space-3xs) !important;
}

body[data-design-variant="hallmark"] button:focus-visible,
body[data-design-variant="hallmark"] a:focus-visible {
  box-shadow: inset 0 0 0 var(--rule-strong) var(--color-accent-ink) !important;
}

body[data-design-variant="hallmark"] button:active,
body[data-design-variant="hallmark"] a:active {
  transform: translateY(var(--rule-thin));
}

body[data-design-variant="hallmark"] button:disabled,
body[data-design-variant="hallmark"] input:disabled,
body[data-design-variant="hallmark"] select:disabled,
body[data-design-variant="hallmark"] textarea:disabled,
body[data-design-variant="hallmark"] [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
}

body[data-design-variant="hallmark"] [aria-busy="true"] {
  cursor: progress;
  opacity: .7;
}

body[data-design-variant="hallmark"] [data-state="error"] {
  border-color: var(--color-danger) !important;
}

body[data-design-variant="hallmark"] [data-state="success"] {
  border-color: var(--color-ready) !important;
}

body[data-design-variant="hallmark"] .eyebrow,
body[data-design-variant="hallmark"] .kicker,
body[data-design-variant="hallmark"] .step-label,
body[data-design-variant="hallmark"] .panel-heading {
  color: var(--color-accent) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .12em !important;
  line-height: 1.4;
  text-transform: uppercase;
}

body[data-design-variant="hallmark"] .eyebrow::before,
body[data-design-variant="hallmark"] .kicker::before {
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .gold-button,
body[data-design-variant="hallmark"] .btn {
  min-height: 3.25rem !important;
  width: max-content;
  max-width: 100%;
  padding-inline: var(--space-md) !important;
  border: var(--rule-thin) solid var(--color-accent) !important;
  border-radius: var(--radius-input) !important;
  background: var(--color-accent) !important;
  box-shadow: 0 var(--space-xs) var(--space-lg) calc(var(--space-xs) * -1) var(--color-shadow) !important;
  color: var(--color-accent-ink) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-base) !important;
  font-weight: 720 !important;
  letter-spacing: -.015em !important;
  line-height: 1.1;
  white-space: nowrap;
}

body[data-design-variant="hallmark"] .gold-button:hover,
body[data-design-variant="hallmark"] .btn:hover {
  background: var(--color-focus) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 var(--space-xs) var(--space-lg) calc(var(--space-xs) * -1) var(--color-shadow) !important;
  transform: none !important;
}

/* Spanish acquisition CTA voice: Satoshi keeps long Spanish verbs clear while
 * the display face remains reserved for headlines and product identity. */
html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .btn,
html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .ghost {
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

body[data-design-variant="hallmark"] .outline-button,
body[data-design-variant="hallmark"] .ghost,
body[data-design-variant="hallmark"] .text-button,
body[data-design-variant="hallmark"] .class-ghost-action,
body[data-design-variant="hallmark"] .class-text-action {
  min-height: var(--tap-target) !important;
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-input) !important;
  background: var(--color-paper-2) !important;
  box-shadow: none !important;
  color: var(--color-ink) !important;
  font-size: var(--text-sm) !important;
  font-weight: 700;
  white-space: nowrap;
}

body[data-design-variant="hallmark"] .outline-button:hover,
body[data-design-variant="hallmark"] .ghost:hover,
body[data-design-variant="hallmark"] .text-button:hover,
body[data-design-variant="hallmark"] .class-ghost-action:hover,
body[data-design-variant="hallmark"] .class-text-action:hover {
  border-color: var(--color-rule) !important;
  background: var(--color-paper-2) !important;
  color: var(--color-accent) !important;
}

body[data-design-variant="hallmark"] .preview-ribbon {
  min-height: 2rem;
  padding: var(--space-2xs) var(--space-md) !important;
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper-2) !important;
  color: var(--color-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: .08em !important;
}

body[data-design-variant="hallmark"] .preview-ribbon span:first-child {
  color: var(--color-accent) !important;
}

body[data-design-variant="hallmark"] .review-language,
body[data-design-variant="hallmark"] .review-language a {
  font-size: var(--text-xs) !important;
}

.hm-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--rule-strong);
  pointer-events: none;
  background: var(--color-accent);
  transform: scaleX(var(--hm-progress, 0));
  transform-origin: left center;
}

/* Acquisition LP · Split Studio */
body[data-design-variant="hallmark"] .page {
  overflow: clip !important;
  background: var(--color-paper) !important;
}

body[data-design-variant="hallmark"] .page::before {
  opacity: .5;
  background-size: var(--space-3xl) var(--space-3xl) !important;
}

body[data-design-variant="hallmark"] .page::after,
body[data-design-variant="hallmark"] .hero-glow {
  display: none !important;
}

body[data-design-variant="hallmark"] .market-ticker {
  height: 2rem !important;
  border-bottom-color: var(--color-rule-soft) !important;
  background: var(--color-paper) !important;
  color: var(--color-muted) !important;
  font-family: var(--font-mono) !important;
}

body[data-design-variant="hallmark"] .market-ticker:hover .market-ticker-track,
body[data-design-variant="hallmark"] .market-ticker:focus-within .market-ticker-track {
  animation-play-state: paused;
}

body[data-design-variant="hallmark"] .btn:hover .cta-arrow,
body[data-design-variant="hallmark"] .ghost:hover .cta-arrow,
body[data-design-variant="hallmark"] .sk-cta:hover .ar {
  transform: none !important;
}

body[data-design-variant="hallmark"] .video-control:hover,
body[data-design-variant="hallmark"] .stream-play:hover {
  transform: translate(-50%, -50%) !important;
}

body[data-design-variant="hallmark"] [data-video-player].is-playing .video-control:hover {
  transform: none !important;
}

body[data-design-variant="hallmark"] .class-prep-toggle:hover,
body[data-design-variant="hallmark"] .class-live-support:hover,
body[data-design-variant="hallmark"] .stream-external-controls button:hover {
  border-color: var(--color-accent) !important;
  background: inherit !important;
}

body[data-design-variant="hallmark"] [id="recModal"] .record-source-link:hover {
  border-color: var(--color-rule) !important;
  background: inherit !important;
  color: var(--color-accent-ink) !important;
}

body[data-design-variant="hallmark"] .topbar {
  top: 2rem !important;
  padding-block: var(--space-md) !important;
}

body[data-design-variant="hallmark"] .brand {
  width: 5.5rem !important;
  height: 3.5rem !important;
}

body[data-design-variant="hallmark"] .hero {
  min-height: auto !important;
  padding: var(--space-2xl) 0 var(--space-3xl) !important;
  align-items: start !important;
}

body[data-design-variant="hallmark"] .hero-market-chart {
  opacity: .08 !important;
}

body[data-design-variant="hallmark"] .hero-stage {
  grid-template-columns: minmax(0, .8fr) minmax(34rem, 1.2fr) !important;
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl)) !important;
  align-items: center !important;
  padding-top: calc(var(--space-lg) + var(--space-2xs));
}

body[data-design-variant="hallmark"] .hero-copy {
  max-width: 39rem;
}

body[data-design-variant="hallmark"] .hero h1 {
  max-width: 11ch !important;
  margin: 0 0 var(--space-md) !important;
  color: var(--color-ink) !important;
  font-size: clamp(3rem, 5vw, 4.75rem) !important;
  font-weight: 730 !important;
  line-height: .98 !important;
}

body[data-design-variant="hallmark"] .hero-copy .lead {
  max-width: 34rem !important;
  margin-bottom: var(--space-lg) !important;
  color: var(--color-ink-2) !important;
  font-size: var(--text-md) !important;
  line-height: 1.5 !important;
}

body[data-design-variant="hallmark"] .hero-copy .hero-access {
  border-left: var(--rule-strong) solid var(--color-accent);
  padding-left: var(--space-sm) !important;
}

body[data-design-variant="hallmark"] .hero-visual {
  filter: none !important;
}

body[data-design-variant="hallmark"] .class-card {
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0 !important;
  background: var(--color-paper-2) !important;
  box-shadow: 0 var(--space-xl) var(--space-3xl) calc(var(--space-xl) * -1) var(--color-shadow) !important;
}

body[data-design-variant="hallmark"] .video-frame {
  aspect-ratio: 16 / 10;
  background: var(--color-paper-3) !important;
}

body[data-design-variant="hallmark"] .video-frame::after {
  background: linear-gradient(to top, var(--color-paper-2), transparent 48%) !important;
}

body[data-design-variant="hallmark"] .webinar-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "meta action"
    "title action"
    "line action"
    "count action"
    "under action"
    "includes includes"
    "incl incl" !important;
  gap: var(--space-xs) var(--space-md) !important;
  padding: var(--space-md) !important;
  border-color: var(--color-rule) !important;
  border-radius: 0 0 var(--radius-panel) var(--radius-panel) !important;
  background: var(--color-paper-2) !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .webinar-card h2 {
  font-size: var(--text-lg) !important;
  line-height: 1.05 !important;
}

body[data-design-variant="hallmark"] .webinar-card .btn {
  min-width: 13rem;
}

body[data-design-variant="hallmark"] .market-ticker-item,
body[data-design-variant="hallmark"] .webinar-card .incl-h,
body[data-design-variant="hallmark"] .webinar-card .ii b,
body[data-design-variant="hallmark"] .webinar-card .ii span {
  font-size: var(--text-xs) !important;
}

body[data-design-variant="hallmark"] .hero-proof {
  margin-top: var(--space-xl) !important;
  border-color: var(--color-rule-soft) !important;
}

body[data-design-variant="hallmark"] .hero-stat {
  padding-block: var(--space-md) !important;
}

body[data-design-variant="hallmark"] .hero-stat b {
  color: var(--color-ink) !important;
  font-size: var(--text-lg) !important;
}

body[data-design-variant="hallmark"] .hero-stat span {
  color: var(--color-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
}

body[data-design-variant="hallmark"] .webinar-count-status {
  font-size: var(--text-xs) !important;
}

body[data-design-variant="hallmark"] .section {
  padding-block: clamp(var(--space-2xl), 8vw, var(--space-4xl)) !important;
  border-top-color: var(--color-rule-soft) !important;
}

body[data-design-variant="hallmark"] .route-divider {
  opacity: .82;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklch, var(--color-accent) 32%, transparent) 12%,
    color-mix(in oklch, var(--color-accent) 52%, transparent) 50%,
    color-mix(in oklch, var(--color-accent) 32%, transparent) 88%,
    transparent
  ) !important;
}

body[data-design-variant="hallmark"] .recognition-head,
body[data-design-variant="hallmark"] .xau-head,
body[data-design-variant="hallmark"] .proof-head,
body[data-design-variant="hallmark"] .faq-layout {
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) !important;
  gap: clamp(var(--space-xl), 8vw, var(--space-4xl)) !important;
}

body[data-design-variant="hallmark"] .recognition-card {
  min-height: 0 !important;
  padding: var(--space-lg) 0 !important;
  border-width: 0 0 var(--rule-thin) !important;
  border-color: var(--color-rule-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .recognition-card:first-child {
  border-top: var(--rule-thin) solid var(--color-rule-soft) !important;
}

body[data-design-variant="hallmark"] .recognition-card h3,
body[data-design-variant="hallmark"] .system-item h3,
body[data-design-variant="hallmark"] .xau-benefit h3,
body[data-design-variant="hallmark"] .learn-panel h3 {
  font-size: var(--text-xl) !important;
}

body[data-design-variant="hallmark"] .system-head {
  max-width: 54rem !important;
  margin-bottom: var(--space-2xl) !important;
}

body[data-design-variant="hallmark"] .system-list {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--space-md) !important;
}

body[data-design-variant="hallmark"] .system-item {
  display: grid !important;
  min-height: 20rem !important;
  grid-template-columns: 8rem minmax(0, 1fr) !important;
  align-content: end !important;
  gap: var(--space-md) !important;
  padding: var(--space-lg) !important;
  border: var(--rule-thin) solid var(--color-rule-soft) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-paper-2) !important;
}

body[data-design-variant="hallmark"] .system-item:nth-child(1),
body[data-design-variant="hallmark"] .system-item:nth-child(2) {
  grid-column: span 6;
}

body[data-design-variant="hallmark"] .system-item:nth-child(3) {
  grid-column: span 7;
}

body[data-design-variant="hallmark"] .system-item:nth-child(4) {
  grid-column: span 5;
}

body[data-design-variant="hallmark"] .system-item.featured {
  border-color: var(--color-rule) !important;
  background: linear-gradient(145deg, color-mix(in oklch, var(--color-accent) 9%, var(--color-paper-2)), var(--color-paper-2)) !important;
}

body[data-design-variant="hallmark"] .system-icon {
  align-self: center;
  width: 8rem !important;
  height: 8rem !important;
}

body[data-design-variant="hallmark"] .system-item p {
  grid-column: 2;
  color: var(--color-ink-2) !important;
}

body[data-design-variant="hallmark"] .terminal {
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-panel) !important;
  background: var(--color-paper-2) !important;
  box-shadow: 0 var(--space-xl) var(--space-3xl) calc(var(--space-xl) * -1) var(--color-shadow) !important;
}

body[data-design-variant="hallmark"] .xau-benefits {
  border-color: var(--color-rule-soft) !important;
}

body[data-design-variant="hallmark"] .xau-benefit {
  background: transparent !important;
}

body[data-design-variant="hallmark"] .mentor-layout,
body[data-design-variant="hallmark"] .learn-layout {
  gap: clamp(var(--space-xl), 8vw, var(--space-4xl)) !important;
}

body[data-design-variant="hallmark"] .mentor-main,
body[data-design-variant="hallmark"] .mentor-desk,
body[data-design-variant="hallmark"] .learn-panel {
  border-color: var(--color-rule-soft) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-paper-2) !important;
}

body[data-design-variant="hallmark"] .proof-card,
body[data-design-variant="hallmark"] .telegram-card {
  border-color: var(--color-rule-soft) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-paper-2) !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .faq-list details {
  border-color: var(--color-rule-soft) !important;
  background: transparent !important;
}

body[data-design-variant="hallmark"] .faq-list summary {
  min-height: 4rem !important;
  color: var(--color-ink) !important;
  font-size: var(--text-md) !important;
}

html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-section,
html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .learn {
  display: block !important;
}

html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .faq-list details p {
  color: var(--color-ink-2) !important;
  font-size: var(--text-base) !important;
  line-height: 1.6 !important;
}

html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .registration-input {
  min-height: 3.25rem !important;
  border-color: var(--color-rule) !important;
  background: var(--color-paper-3) !important;
  color: var(--color-ink) !important;
  font-size: var(--text-base) !important;
}

html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .registration-input[aria-invalid="true"] {
  border-color: var(--color-danger) !important;
}

html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .registration-error {
  min-height: 1.4em;
  color: var(--color-danger) !important;
  font-size: var(--text-sm) !important;
}

body[data-design-variant="hallmark"] .final-card {
  border-block: var(--rule-thin) solid var(--color-rule) !important;
  border-inline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .sticky {
  border-color: var(--color-rule) !important;
  background: color-mix(in oklch, var(--color-paper-2) 94%, transparent) !important;
  box-shadow: 0 calc(var(--space-md) * -1) var(--space-xl) var(--color-shadow) !important;
}

body[data-design-variant="hallmark"] .sk-cta {
  min-height: var(--tap-target) !important;
}

body[data-design-variant="hallmark"] .registration-dialog::backdrop {
  background: color-mix(in oklch, var(--color-paper) 82%, transparent) !important;
  backdrop-filter: blur(var(--space-2xs));
}

body[data-design-variant="hallmark"] .modal-inner,
body[data-design-variant="hallmark"] .registration-shell {
  border: var(--rule-thin) solid var(--color-rule) !important;
  border-radius: var(--radius-panel) !important;
  background: var(--color-paper-2) !important;
  box-shadow: 0 var(--space-xl) var(--space-4xl) var(--color-shadow) !important;
}

body[data-design-variant="hallmark"] .choice,
body[data-design-variant="hallmark"] .choice-grid button {
  min-height: 4.5rem !important;
  border-color: var(--color-rule-soft) !important;
  border-radius: var(--radius-input) !important;
  background: var(--color-paper-3) !important;
  color: var(--color-ink) !important;
}

body[data-design-variant="hallmark"] .choice:hover,
body[data-design-variant="hallmark"] .choice-grid button:hover {
  border-color: var(--color-accent) !important;
  background: var(--color-paper-3) !important;
}

body[data-design-variant="hallmark"] .choice.selected,
body[data-design-variant="hallmark"] .choice-grid button[aria-pressed="true"],
body[data-design-variant="hallmark"] .choice-grid button[aria-checked="true"] {
  border-color: var(--color-accent) !important;
  background: color-mix(in oklch, var(--color-accent) 8%, var(--color-paper-3)) !important;
}

/* Shared marketing ecosystem · controlled editorial rhythm */
body[data-design-variant="hallmark"] .site-nav {
  align-self: stretch;
  gap: 0 !important;
  border-color: var(--color-rule-soft) !important;
  background: color-mix(in oklch, var(--color-paper) 92%, transparent) !important;
  backdrop-filter: blur(var(--space-sm));
}

body[data-design-variant="hallmark"] .site-nav a {
  display: inline-flex;
  min-height: 100%;
  align-items: center;
  gap: var(--space-2xs);
  padding-inline: var(--space-md);
  border-left: var(--rule-thin) solid var(--color-rule-soft);
  line-height: 1;
}

body[data-design-variant="hallmark"] .site-nav a::before {
  color: var(--color-accent-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}


body[data-design-variant="hallmark"] .site-nav .nav-cta {
  margin: 0;
  border: 0;
  border-left: var(--rule-thin) solid var(--color-rule-soft);
  border-radius: 0;
  background: transparent;
}

body[data-design-variant="hallmark"] .site-logo img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  transform: none !important;
}

body[data-design-variant="hallmark"] .site-footer a,
body[data-design-variant="hallmark"] .mode-grid article > a {
  display: inline-flex;
  min-height: var(--tap-target);
  align-items: center;
  white-space: nowrap;
}

body[data-design-variant="hallmark"] .academy-entry-card > div > span,
body[data-design-variant="hallmark"] .portrait-note > span,
body[data-design-variant="hallmark"] .live-ui-bar,
body[data-design-variant="hallmark"] .live-ui-actions,
body[data-design-variant="hallmark"] .agenda-card > span,
body[data-design-variant="hallmark"] .class-late-entry > span {
  font-size: var(--text-xs) !important;
}

body[data-design-variant="hallmark"] .container {
  width: min(74rem, calc(100% - (var(--space-xl) * 2))) !important;
}

body[data-design-variant="hallmark"] .ecosystem-hero {
  min-height: auto !important;
  padding-block: var(--space-2xl) var(--space-3xl) !important;
}

body[data-design-variant="hallmark"] .hero-grid,
body[data-design-variant="hallmark"] .profile-grid,
body[data-design-variant="hallmark"] .academy-home-hero-grid,
body[data-design-variant="hallmark"] .academy-mentor-grid {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
  gap: clamp(var(--space-xl), 8vw, var(--space-4xl)) !important;
  align-items: start !important;
}

body[data-design-variant="hallmark"] .hero-copy h1,
body[data-design-variant="hallmark"] .profile-copy h1,
body[data-design-variant="hallmark"] .academy-home-copy h1 {
  max-width: 14ch !important;
  color: var(--color-ink) !important;
  font-size: clamp(3rem, 4.5vw, 4rem) !important;
  font-weight: 720 !important;
  line-height: .98 !important;
}

body[data-design-variant="hallmark"] .portrait-stage,
body[data-design-variant="hallmark"] .academy-home-portrait,
body[data-design-variant="hallmark"] .academy-mentor-image,
body[data-design-variant="hallmark"] .live-hero-ui {
  max-height: 38rem;
  overflow: hidden;
}

body[data-design-variant="hallmark"] .hero-lead {
  max-width: 38rem !important;
  color: var(--color-ink-2) !important;
  font-size: var(--text-md) !important;
}

body[data-design-variant="hallmark"] .academy-home-copy h1 {
  max-width: 15ch !important;
  font-size: clamp(3rem, 4.2vw, 3.9rem) !important;
  text-wrap: pretty;
}

body[data-design-variant="hallmark"] .academy-home-hero-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
  gap: var(--space-3xl) !important;
}

body[data-design-variant="hallmark"] .portrait-stage,
body[data-design-variant="hallmark"] .profile-main,
body[data-design-variant="hallmark"] .academy-home-portrait,
body[data-design-variant="hallmark"] .academy-mentor-image,
body[data-design-variant="hallmark"] .live-hero-ui,
body[data-design-variant="hallmark"] .whop-card {
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-paper-2) !important;
  box-shadow: 0 var(--space-xl) var(--space-3xl) calc(var(--space-xl) * -1) var(--color-shadow) !important;
}

body[data-design-variant="hallmark"] .benefit-ledger article,
body[data-design-variant="hallmark"] .story-cards article,
body[data-design-variant="hallmark"] .mode-grid article,
body[data-design-variant="hallmark"] .academy-principles li,
body[data-design-variant="hallmark"] .academy-start-steps li {
  border-color: var(--color-rule-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .academy-entry-card {
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-paper-2) !important;
}

body[data-design-variant="hallmark"] .academy-entry-card-free {
  background: linear-gradient(145deg, color-mix(in oklch, var(--color-accent) 9%, var(--color-paper-2)), var(--color-paper-2)) !important;
}

body[data-design-variant="hallmark"] .site-footer {
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper) !important;
}

body[data-design-variant="hallmark"] .site-footer::before {
  content: "La claridad antes de la velocidad.";
  display: block;
  width: min(74rem, calc(100% - (var(--space-xl) * 2)));
  margin-inline: auto;
  padding: var(--space-2xl) 0 var(--space-xl);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
}

/* Private acquisition webinar · Workbench */
body[data-design-variant="hallmark"][data-preview-page="private-class"] {
  background: var(--color-paper) !important;
}

body[data-design-variant="hallmark"] .private-class-shell {
  width: min(74rem, calc(100% - (var(--space-xl) * 2))) !important;
  margin-inline: auto;
}

body[data-design-variant="hallmark"] .private-class-header {
  width: 100% !important;
  max-width: none !important;
  min-height: 5.5rem !important;
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper) !important;
}

body[data-design-variant="hallmark"] .private-class-atmosphere,
body[data-design-variant="hallmark"] .class-waiting-room,
body[data-design-variant="hallmark"] .class-live-room {
  width: 100% !important;
  max-width: none !important;
}

body[data-design-variant="hallmark"] .class-waiting-room {
  grid-template-columns: minmax(18rem, .78fr) minmax(0, 1.22fr) !important;
  grid-template-areas:
    "arrival countdown"
    "audio audio"
    "host host"
    "utilities utilities"
    "agenda agenda"
    "resources resources"
    "prep prep" !important;
  padding: 0 var(--space-xl) !important;
}

body[data-design-variant="hallmark"] .class-access-badge,
body[data-design-variant="hallmark"] .private-class-dev-pill,
body[data-design-variant="hallmark"] .class-live-session-state,
body[data-design-variant="hallmark"] .class-player-status {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  letter-spacing: .08em !important;
}

body[data-design-variant="hallmark"] .class-live-watermark span {
  font-size: var(--text-xs) !important;
}

body[data-design-variant="hallmark"] .class-support-link {
  font-size: var(--text-xs) !important;
}

body[data-design-variant="hallmark"] .class-arrival {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-2xl) var(--space-xl) var(--space-2xl) 0 !important;
  text-align: left !important;
}

body[data-design-variant="hallmark"] .class-access-badge {
  margin: 0 0 var(--space-sm) !important;
}

body[data-design-variant="hallmark"] .class-greeting h1,
body[data-design-variant="hallmark"] .class-single-state h1 {
  max-width: 12ch;
  font-size: var(--text-display-s) !important;
  line-height: .98 !important;
}

body[data-design-variant="hallmark"] .class-countdown-card {
  grid-template-columns: minmax(0, 1fr) 10rem !important;
  padding: var(--space-lg) !important;
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-paper-2) !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .class-countdown {
  color: var(--color-accent) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(3rem, 6vw, 4.5rem) !important;
  font-variant-numeric: tabular-nums;
}

body[data-design-variant="hallmark"] [data-countdown-phase="near"] .class-countdown,
body[data-design-variant="hallmark"] [data-countdown-phase="ready"] .class-countdown,
body[data-design-variant="hallmark"] [data-countdown-phase="live"] .class-countdown {
  color: var(--color-ready) !important;
}

body[data-design-variant="hallmark"] .class-countdown-ring-progress,
body[data-design-variant="hallmark"] .class-countdown-ring-hand,
body[data-design-variant="hallmark"] .class-countdown-ring-spark {
  color: var(--color-ready) !important;
  border-color: var(--color-ready) !important;
}

body[data-design-variant="hallmark"] .class-host {
  padding: var(--space-md) 0 !important;
  border-block: var(--rule-thin) solid var(--color-rule-soft) !important;
}

body[data-design-variant="hallmark"] .class-agenda,
body[data-design-variant="hallmark"] .class-resource-section,
body[data-design-variant="hallmark"] .class-prep-console {
  border-color: var(--color-rule-soft) !important;
  background: transparent !important;
}

body[data-design-variant="hallmark"] .class-agenda ol {
  counter-reset: lesson;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: var(--space-md) !important;
}

body[data-design-variant="hallmark"] .class-agenda li {
  min-height: 11rem !important;
  padding: var(--space-lg) !important;
  border-top: var(--rule-thin) solid var(--color-rule) !important;
  background: var(--color-paper-2) !important;
}

body[data-design-variant="hallmark"] .class-resources {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: var(--space-sm) !important;
}

body[data-design-variant="hallmark"] .class-resources article {
  border-color: var(--color-rule-soft) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-paper-2) !important;
}

body[data-design-variant="hallmark"] .class-resources article:first-child {
  grid-column: span 12;
  min-height: 8rem;
}

body[data-design-variant="hallmark"] .class-resources article:nth-child(2) {
  grid-column: span 7;
}

body[data-design-variant="hallmark"] .class-resources article:nth-child(3) {
  grid-column: span 5;
}

body[data-design-variant="hallmark"] .class-prep-console {
  border-block: var(--rule-thin) solid var(--color-rule) !important;
  border-inline: 0 !important;
  border-radius: 0 !important;
}

body[data-design-variant="hallmark"] .class-utility-row {
  border-color: var(--color-rule-soft) !important;
}

body[data-design-variant="hallmark"] .class-live-room {
  width: min(90rem, 100%) !important;
  padding: var(--space-md) !important;
}

body[data-design-variant="hallmark"] .class-live-heading {
  min-height: 5rem;
  border-bottom: var(--rule-thin) solid var(--color-rule-soft);
}

body[data-design-variant="hallmark"] .class-live-heading h1 {
  font-size: var(--text-xl) !important;
}

body[data-design-variant="hallmark"] .class-live-player {
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-paper-2) !important;
  box-shadow: 0 var(--space-xl) var(--space-3xl) calc(var(--space-xl) * -1) var(--color-shadow) !important;
}

body[data-design-variant="hallmark"] .class-live-support {
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper) !important;
  color: var(--color-muted) !important;
}

body[data-design-variant="hallmark"] .class-single-state,
body[data-design-variant="hallmark"] .class-rebook-shell,
body[data-design-variant="hallmark"] .class-offline-state,
body[data-design-variant="hallmark"] .class-opening-state,
body[data-design-variant="hallmark"] .class-validating-state {
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-panel) !important;
  background: var(--color-paper-2) !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .class-session-picker button {
  border-color: var(--color-rule-soft) !important;
  border-radius: var(--radius-input) !important;
  background: var(--color-paper-3) !important;
  color: var(--color-ink) !important;
}

body[data-design-variant="hallmark"] .class-session-picker button:hover,
body[data-design-variant="hallmark"] .class-session-picker button[aria-pressed="true"] {
  border-color: var(--color-accent) !important;
}

body[data-design-variant="hallmark"] .class-session-picker button:hover {
  background: var(--color-paper-3) !important;
}

/* Public webinar review room: keep the approved curriculum as one readable
 * sequence while retaining the existing section frame and type system. */
body[data-design-variant="hallmark"] .class-public-webinar-agenda-heading {
  margin-bottom: var(--space-md);
}

body[data-design-variant="hallmark"] .class-public-webinar-agenda-heading h2 {
  margin: var(--space-2xs) 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.15;
}

body[data-design-variant="hallmark"] .class-public-webinar-agenda-heading p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-base);
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"] .class-public-webinar-agenda ol {
  display: block !important;
  margin: 0;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"] .class-public-webinar-agenda li {
  min-height: 0 !important;
  padding: var(--space-md) 0 !important;
  display: grid !important;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  border: 0 !important;
  border-bottom: var(--rule-thin) solid var(--color-rule-soft) !important;
  background: transparent !important;
  text-align: left;
}

body[data-design-variant="hallmark"] .class-public-webinar-agenda li::before,
body[data-design-variant="hallmark"] .class-public-webinar-agenda li::after {
  display: none !important;
}

body[data-design-variant="hallmark"] .class-public-webinar-agenda .class-agenda-number {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .08em;
}

body[data-design-variant="hallmark"] .class-public-webinar-agenda b {
  padding: 0 !important;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base) !important;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

body[data-design-variant="hallmark"] .class-public-webinar-agenda small {
  margin-top: var(--space-3xs) !important;
  color: var(--color-muted);
  font-size: var(--text-sm) !important;
  line-height: 1.4;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"] .class-rebook-dialog {
  width: min(32.5rem, calc(100% - var(--space-md))) !important;
  max-height: calc(100dvh - var(--space-md)) !important;
  margin: auto !important;
  overflow: auto;
}

/* Member room · player first, chat readable */
body[data-design-variant="hallmark"] .live-shell,
body[data-design-variant="hallmark"] .console-shell {
  width: min(96rem, 100%) !important;
  padding: var(--space-md) !important;
  background: var(--color-paper) !important;
}

body[data-design-variant="hallmark"] .live-header,
body[data-design-variant="hallmark"] .console-header {
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper) !important;
}

body[data-design-variant="hallmark"] .live-state {
  margin-right: calc(6rem + var(--space-xs));
}

body[data-design-variant="hallmark"].console-page .review-language {
  top: var(--space-md);
  right: var(--space-sm);
}

body[data-design-variant="hallmark"] .live-layout {
  grid-template-columns: minmax(0, 1.85fr) minmax(20rem, .65fr) !important;
  gap: var(--space-md) !important;
}

body[data-design-variant="hallmark"] .live-stage,
body[data-design-variant="hallmark"] .room-panel,
body[data-design-variant="hallmark"] .studio-chat,
body[data-design-variant="hallmark"] .question-queue,
body[data-design-variant="hallmark"] .room-health {
  border-color: var(--color-rule-soft) !important;
  border-radius: var(--radius-card) !important;
  background: var(--color-paper-2) !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .stream-frame {
  border-color: var(--color-rule) !important;
  background: var(--color-paper-3) !important;
}

body[data-design-variant="hallmark"] .session-context {
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper-2) !important;
}

body[data-design-variant="hallmark"] .chat-list {
  color: var(--color-ink-2) !important;
  font-size: var(--text-base) !important;
}

body[data-design-variant="hallmark"] .chat-list b {
  color: var(--color-accent) !important;
  font-size: var(--text-sm) !important;
}

body[data-design-variant="hallmark"] .chat-list p {
  color: var(--color-ink-2) !important;
  font-size: var(--text-base) !important;
  line-height: 1.55 !important;
}

body[data-design-variant="hallmark"] .chat-composer {
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper-2) !important;
}

body[data-design-variant="hallmark"] .chat-composer input {
  min-width: 0;
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper-3) !important;
  color: var(--color-ink) !important;
  font-size: var(--text-base) !important;
}

body[data-design-variant="hallmark"] .reaction-bar button,
body[data-design-variant="hallmark"] .mobile-tabs button {
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper-3) !important;
  color: var(--color-ink) !important;
}

body[data-design-variant="hallmark"] .reaction-bar button:hover,
body[data-design-variant="hallmark"] .mobile-tabs button[aria-selected="true"] {
  border-color: var(--color-rule-soft) !important;
  background: var(--color-paper-3) !important;
  color: var(--color-accent) !important;
}

body[data-design-variant="hallmark"] .live-support {
  border-color: var(--color-rule-soft) !important;
  color: var(--color-muted) !important;
}

/* Studio + moderation · dense without tiny text */
body[data-design-variant="hallmark"] .console-header h1 {
  font-size: var(--text-3xl) !important;
  line-height: 1 !important;
}

body[data-design-variant="hallmark"] .console-main {
  padding: var(--space-md) !important;
}

body[data-design-variant="hallmark"] .studio-live-bar {
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-input) !important;
  background: var(--color-paper-2) !important;
}

body[data-design-variant="hallmark"] .studio-workspace {
  grid-template-columns: minmax(0, 1.4fr) minmax(22rem, .6fr) !important;
  gap: var(--space-md) !important;
}

body[data-design-variant="hallmark"] .moderation-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(20rem, .6fr) !important;
  gap: var(--space-md) !important;
}

body[data-design-variant="hallmark"] .question-queue article {
  padding: var(--space-lg) !important;
  border-color: var(--color-rule-soft) !important;
}

body[data-design-variant="hallmark"] .question-queue p,
body[data-design-variant="hallmark"] .studio-chat p,
body[data-design-variant="hallmark"] .health-metric,
body[data-design-variant="hallmark"] .console-status {
  font-size: var(--text-base) !important;
  line-height: 1.55 !important;
}

body[data-design-variant="hallmark"] .moderation-menu summary,
body[data-design-variant="hallmark"] .moderation-actions button,
body[data-design-variant="hallmark"] .slow-mode select {
  min-height: var(--tap-target) !important;
  border-color: var(--color-rule) !important;
  background: var(--color-paper-3) !important;
  color: var(--color-ink) !important;
  font-size: var(--text-sm) !important;
}

/* Hallmark review index · Index-First */
body[data-design-variant="hallmark"][data-preview-page="hallmark-index"] .preview-ribbon {
  position: sticky;
  top: 0;
  z-index: 20;
}

.hm-index {
  width: min(76rem, calc(100% - (var(--space-xl) * 2)));
  margin-inline: auto;
  padding: var(--space-xl) 0 var(--space-4xl);
}

.hm-index-hero {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(16rem, .45fr);
  gap: clamp(var(--space-lg), 5vw, var(--space-3xl));
  align-items: start;
  min-height: 70svh;
  padding: var(--space-2xl) 0;
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

.hm-wordmark {
  display: block;
  min-height: auto !important;
}

.hm-wordmark img {
  width: 6rem;
  height: auto;
}

.hm-kicker {
  margin: 0 0 var(--space-md);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .12em;
}

.hm-index-hero h1 {
  max-width: 13ch;
  margin: 0 0 var(--space-lg);
  font-size: var(--text-display);
  font-weight: 720;
  line-height: .96;
}

.hm-index-hero h1 span {
  color: var(--color-accent);
}

.hm-index-hero > div > p:last-child {
  max-width: 40rem;
  color: var(--color-ink-2);
  font-size: var(--text-md);
}

.hm-index-rule {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-2xl);
  color: var(--color-muted);
}

.hm-index-rule b {
  margin-top: var(--space-md);
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.hm-index-group {
  display: grid;
  grid-template-columns: minmax(15rem, .42fr) minmax(0, 1fr);
  gap: clamp(var(--space-xl), 7vw, var(--space-4xl));
  padding: var(--space-3xl) 0;
  border-bottom: var(--rule-thin) solid var(--color-rule-soft);
}

.hm-index-heading > span {
  display: block;
  margin-bottom: var(--space-lg);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.hm-index-heading h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-2xl);
  line-height: 1.05;
}

.hm-index-heading p {
  margin: 0;
  color: var(--color-muted);
}

.hm-link-ledger,
.hm-state-grid {
  display: grid;
  min-width: 0;
  border-top: var(--rule-thin) solid var(--color-rule);
}

.hm-link-ledger a {
  display: grid;
  grid-template-columns: minmax(12rem, .7fr) minmax(0, 1fr) auto;
  gap: var(--space-md);
  align-items: center;
  min-height: 5.5rem !important;
  padding: var(--space-md) 0;
  border-bottom: var(--rule-thin) solid var(--color-rule-soft);
  color: var(--color-ink);
  text-decoration: none;
}

.hm-link-ledger a:hover {
  color: var(--color-accent);
}

.hm-link-ledger b {
  font-size: var(--text-md);
}

.hm-link-ledger span {
  color: var(--color-muted);
}

.hm-link-ledger em {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
  white-space: nowrap;
}

.hm-state-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-md);
}

.hm-state-grid a {
  display: flex;
  min-width: 0;
  min-height: 6rem !important;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-md) 0;
  border-bottom: var(--rule-thin) solid var(--color-rule-soft);
  color: var(--color-ink);
  text-decoration: none;
}

.hm-state-grid a:hover {
  color: var(--color-accent);
}

.hm-state-grid span {
  margin-top: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.hm-index-close {
  padding-top: var(--space-3xl);
}

.hm-index-close p {
  max-width: 20ch;
  margin: 0 0 var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.02;
}

.hm-index-close span {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .1em;
}

@media (max-width: 64rem) {
  body[data-design-variant="hallmark"] .hero-stage,
  body[data-design-variant="hallmark"] .class-arrival,
  body[data-design-variant="hallmark"] .live-layout,
  body[data-design-variant="hallmark"] .studio-workspace,
  body[data-design-variant="hallmark"] .moderation-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-design-variant="hallmark"] .hero-copy {
    max-width: 48rem;
  }

  body[data-design-variant="hallmark"] .hero h1 {
    max-width: 14ch !important;
  }

  body[data-design-variant="hallmark"] .hero-visual {
    width: min(100%, 46rem);
  }

  body[data-design-variant="hallmark"] .class-arrival {
    padding: var(--space-2xl) 0 var(--space-xl) !important;
  }

  body[data-design-variant="hallmark"] .class-waiting-room {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "arrival"
      "countdown"
      "audio"
      "host"
      "utilities"
      "agenda"
      "resources"
      "prep" !important;
  }

  body[data-design-variant="hallmark"] .class-agenda ol {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hm-index-hero {
    grid-template-columns: 6rem minmax(0, 1fr);
  }

  .hm-index-rule {
    grid-column: 2;
    padding-top: 0;
  }

  .hm-index-group {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 48rem) {
  body[data-design-variant="hallmark"] .container,
  body[data-design-variant="hallmark"] .private-class-shell,
  .hm-index {
    width: min(100% - (var(--space-md) * 2), 46rem) !important;
  }

  body[data-design-variant="hallmark"] .preview-ribbon span:last-child {
    display: none;
  }

  body[data-design-variant="hallmark"] .topbar {
    top: 0 !important;
    padding-block: var(--space-2xs) !important;
  }

  body[data-design-variant="hallmark"] .brand {
    width: var(--space-2xl) !important;
    height: var(--space-xl) !important;
  }

  body[data-design-variant="hallmark"]:not([data-preview-page]) .review-language {
    top: var(--space-2xs);
    right: var(--space-2xs);
  }

  body[data-design-variant="hallmark"] .market-ticker {
    display: none !important;
  }

  body[data-design-variant="hallmark"] .hero {
    padding: var(--space-2xl) 0 var(--space-3xl) !important;
  }

  body[data-design-variant="hallmark"] .hero-stage {
    gap: var(--space-md) !important;
    padding-top: 0;
  }

  body[data-design-variant="hallmark"] .hero-copy .lead {
    margin-bottom: var(--space-sm) !important;
    font-size: var(--text-base) !important;
    line-height: 1.45 !important;
  }

  body[data-design-variant="hallmark"] .site-nav {
    align-self: auto;
  }

  body[data-design-variant="hallmark"] .site-nav a {
    min-height: var(--tap-target);
    padding-inline: var(--space-sm);
    border-left: 0;
  }

  body[data-design-variant="hallmark"] .site-nav .nav-cta {
    border-left: 0;
  }

  body[data-design-variant="hallmark"] .class-waiting-room {
    padding-inline: var(--space-sm) !important;
  }

  body[data-design-variant="hallmark"] .class-greeting {
    margin-bottom: var(--space-3xs) !important;
    font-size: var(--text-lg) !important;
    line-height: 1.3 !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell {
    width: 100% !important;
    padding-inline: var(--space-2xs) !important;
  }

  body[data-design-variant="hallmark"] .private-class-header {
    min-height: var(--space-2xl) !important;
    grid-template-columns: 3.5rem minmax(0, 1fr) !important;
    gap: var(--space-2xs) !important;
    padding-inline: var(--space-2xs) calc(6rem + var(--space-2xs)) !important;
  }

  body[data-design-variant="hallmark"] .private-class-brand,
  body[data-design-variant="hallmark"] .private-class-brand img {
    width: 3.5rem !important;
  }

  body[data-design-variant="hallmark"] .private-class-room-name span,
  body[data-design-variant="hallmark"] .private-class-room-name b {
    font-size: var(--text-xs) !important;
    line-height: 1.2 !important;
  }

  body[data-design-variant="hallmark"] .class-single-state {
    width: 100% !important;
    padding-inline: var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .hero-stage,
  body[data-design-variant="hallmark"] .recognition-head,
  body[data-design-variant="hallmark"] .xau-head,
  body[data-design-variant="hallmark"] .proof-head,
  body[data-design-variant="hallmark"] .faq-layout,
  body[data-design-variant="hallmark"] .hero-grid,
  body[data-design-variant="hallmark"] .profile-grid,
  body[data-design-variant="hallmark"] .academy-home-hero-grid,
  body[data-design-variant="hallmark"] .academy-mentor-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-xl) !important;
  }

  body[data-design-variant="hallmark"] .hero-stage {
    gap: var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .hero h1,
  body[data-design-variant="hallmark"] .hero-copy h1,
  body[data-design-variant="hallmark"] .profile-copy h1,
  body[data-design-variant="hallmark"] .academy-home-copy h1,
  body[data-design-variant="hallmark"] .class-greeting h1,
  body[data-design-variant="hallmark"] .class-single-state h1 {
    max-width: 16ch !important;
    font-size: clamp(2.55rem, 12vw, 4rem) !important;
  }

  body[data-design-variant="hallmark"] .webinar-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "meta"
      "action"
      "title"
      "line"
      "count"
      "under"
      "includes"
      "incl" !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-phone-benefits-variant="compact"]) .webinar-card {
    grid-template-areas:
      "meta"
      "action"
      "under"
      "title"
      "line"
      "count"
      "includes"
      "incl" !important;
    row-gap: var(--space-2xs) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-phone-benefits-variant="compact"]) .webinar-card .btn {
    padding-inline: var(--space-sm) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-phone-benefits-variant="compact"]) .webinar-card .under-cta {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start;
    gap: var(--space-2xs) !important;
    margin: 0 !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-phone-benefits-variant="compact"]) .webinar-card .under-cta i {
    min-width: 0;
    justify-content: center;
    text-align: center;
    font-size: var(--text-xs) !important;
    line-height: 1.2;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-phone-benefits-variant="compact"]) .webinar-card .under-cta i:last-child {
    grid-column: auto !important;
  }

  body[data-design-variant="hallmark"] .webinar-card .cc-top {
    margin-bottom: 0 !important;
  }

  body[data-design-variant="hallmark"] .webinar-card .btn,
  body[data-design-variant="hallmark"] .gold-button,
  body[data-design-variant="hallmark"] .btn {
    width: 100% !important;
  }

  body[data-design-variant="hallmark"] .hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-design-variant="hallmark"] .hero-stat:nth-child(3)::before {
    display: none;
  }

  body[data-design-variant="hallmark"] .system-list {
    grid-template-columns: 1fr !important;
  }

  body[data-design-variant="hallmark"] .system-item,
  body[data-design-variant="hallmark"] .system-item:nth-child(n) {
    grid-column: auto !important;
    min-height: 0 !important;
    grid-template-columns: 5.5rem minmax(0, 1fr) !important;
    padding: var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .system-icon {
    width: 5.5rem !important;
    height: 5.5rem !important;
  }

  body[data-design-variant="hallmark"] .system-item h3 {
    align-self: center;
    font-size: var(--text-lg) !important;
  }

  body[data-design-variant="hallmark"] .system-item p {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  /* Acquisition LP only: keep the fixed CTA from casting a dark veil over iPhone content. */
  body[data-design-variant="hallmark"]:not([data-preview-page]) .sticky {
    background: var(--color-paper-2) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Spanish acquisition LP only: compact first action, editorial product ledger, and safe closing CTA. */
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .review-language {
    position: absolute;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .topbar {
    min-height: var(--space-2xl);
    padding-block: var(--space-2xs) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .topbar-inner {
    min-height: calc(var(--space-xl) + var(--space-2xs));
    padding-right: calc(7rem + var(--space-xs));
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .brand {
    width: var(--space-2xl) !important;
    height: var(--space-xl) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .brand-logo {
    top: calc(var(--space-2xs) * -1) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero {
    padding: calc(var(--space-2xl) + var(--space-sm)) 0 var(--space-md) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-stage {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-sm) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero h1 {
    margin-bottom: var(--space-sm) !important;
    font-size: clamp(2.1rem, 9.5vw, 3.25rem) !important;
    line-height: 1 !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-copy .lead {
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-copy .lead p {
    margin-bottom: var(--space-2xs) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .video-frame {
    aspect-ratio: 16 / 8.5;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "meta"
      "action"
      "under"
      "title"
      "line"
      "count"
      "includes"
      "incl" !important;
    gap: var(--space-2xs) !important;
    padding: var(--space-sm) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card h2,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-line {
    margin: 0 !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-count {
    width: 100%;
    min-height: var(--space-xl);
    align-self: stretch;
    align-items: baseline;
    justify-content: flex-end;
    gap: var(--space-2xs) !important;
    margin: 0 !important;
    padding: var(--space-sm) 0 !important;
    border-block: var(--rule-thin) solid var(--color-rule-soft);
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-count::before {
    content: "COMIENZA EN";
    margin-right: auto;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .08em;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-count .cunit b {
    font-size: var(--text-lg) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-includes {
    display: grid !important;
    grid-template-columns: var(--space-lg) minmax(0, 1fr);
    width: calc(100% + var(--space-lg));
    align-self: stretch;
    align-items: start;
    gap: var(--space-xs) !important;
    margin: 0 calc(var(--space-sm) * -1) !important;
    padding: var(--space-sm) !important;
    border-top: 0 !important;
    border-bottom: var(--rule-thin) solid var(--color-rule-soft) !important;
    border-inline: 0 !important;
    background: var(--color-paper-3) !important;
    color: var(--color-ink-2) !important;
    font-size: var(--text-sm) !important;
    line-height: 1.5 !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-includes::before {
    width: var(--space-lg) !important;
    height: var(--space-lg) !important;
    flex-basis: var(--space-lg) !important;
    margin-top: var(--space-3xs) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-count-status {
    width: 100%;
    min-height: var(--space-xl);
    align-self: stretch;
    justify-content: flex-start;
    margin: 0;
    padding: var(--space-sm) 0;
    border-block: var(--rule-thin) solid var(--color-rule-soft);
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2xs);
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-spot {
    padding-inline: var(--space-2xs);
    font-size: var(--text-xs) !important;
    letter-spacing: .08em;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-when {
    padding-top: 0;
    border-top: 0;
    text-align: right;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-when b {
    font-size: var(--text-sm) !important;
    line-height: 1.2;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-when span,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) [id="skWhenTime"] {
    font-size: var(--text-xs) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .btn {
    min-height: calc(var(--tap-target) + var(--space-2xs)) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .btn,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .ghost {
    justify-content: space-between !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .btn .cta-arrow,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .ghost .cta-arrow,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .sk-cta .ar {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .sticky .sk-in {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: var(--space-2xs) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .sticky .sk-stack,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .sticky .sk-stack > b {
    gap: var(--space-3xs) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) [id="skWhenLabel"] {
    font-family: var(--font-body) !important;
    font-size: var(--text-sm) !important;
    font-weight: 700;
    line-height: 1.15;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) [id="skWhenTime"] {
    font-size: var(--text-sm) !important;
    font-weight: 500;
    letter-spacing: 0 !important;
    line-height: 1.15;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .sk-cta {
    min-width: 0 !important;
    width: auto !important;
    padding-inline: var(--space-xs) !important;
    font-size: var(--text-base) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .proof-action .btn,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .mentor-copy .ghost,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .record-cta .ghost {
    font-size: var(--text-sm) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-proof {
    margin-top: var(--space-md) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: center;
    gap: var(--space-3xs);
    min-height: calc(var(--space-2xl) + var(--space-2xs));
    padding: var(--space-xs) var(--space-2xs) !important;
    text-align: center;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-stat:nth-child(n + 3) {
    border-top: var(--rule-thin) solid var(--color-rule-soft);
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-stat + .hero-stat::before {
    top: var(--space-xs);
    bottom: var(--space-xs);
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-stat span {
    margin-top: 0 !important;
    max-width: 16ch;
    justify-self: center;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .recognition .kicker,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .mentor .eyebrow,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .learn > .shell > .kicker,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .proof > .shell > .eyebrow,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .faq .kicker,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .final .eyebrow {
    display: none !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.recognition,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.system,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.faq,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.final {
    padding-block: var(--space-xl) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.recognition {
    padding-top: var(--space-md) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.xau-section,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.mentor,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.learn,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.proof {
    padding-block: var(--space-2xl) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-head {
    margin-bottom: var(--space-lg) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-list {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    border-block: var(--rule-thin) solid var(--color-rule-soft);
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .mentor-layout,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .learn-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-item,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-item:nth-child(n) {
    grid-template-columns: var(--space-2xl) minmax(0, 1fr) !important;
    grid-template-rows: auto auto;
    align-content: center !important;
    gap: var(--space-3xs) var(--space-xs) !important;
    padding: var(--space-md) 0 !important;
    border-width: 0 0 var(--rule-thin) !important;
    border-color: var(--color-rule-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-item:last-child {
    border-bottom: 0 !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-icon {
    grid-row: 1 / 3;
    width: var(--space-2xl) !important;
    height: var(--space-2xl) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-item:first-child .system-icon picture {
    width: calc(100% + var(--space-xs));
    height: auto;
    aspect-ratio: 1;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-item h3,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-item p {
    grid-column: 2;
    margin: 0;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-item p {
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .terminal-top,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .terminal-scan,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .pst-time,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .ph-top,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .ph-top b,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .win em,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .win-sub,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .pstat,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .prow span,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .al-top,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .al-top b,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .al-sym,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .al-sym .dir,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .al-rows span,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .al-rows b,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .al-view,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-scanner .delivery-pill,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .xau-disc {
    font-size: var(--text-xs) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .final-card {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: clip;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .final-card::after {
    display: none;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .final-copy,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .final-action {
    min-width: 0;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .final-action {
    width: 100%;
    padding-inline: 0 !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .final .reassure {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: stretch;
    gap: var(--space-2xs) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .final .reassure span,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .final .reassure span:last-child {
    grid-column: auto;
    justify-self: start;
    white-space: normal;
  }

  body[data-design-variant="hallmark"] .class-countdown-card {
    grid-template-columns: minmax(0, 1fr) 7rem !important;
    padding: var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .class-agenda ol,
  body[data-design-variant="hallmark"] .class-resources {
    grid-template-columns: 1fr !important;
  }

  body[data-design-variant="hallmark"] .class-agenda li,
  body[data-design-variant="hallmark"] .class-resources article,
  body[data-design-variant="hallmark"] .class-resources article:first-child {
    grid-column: auto !important;
    min-height: 0;
  }

  body[data-design-variant="hallmark"] .class-agenda ol {
    gap: 0 !important;
  }

  body[data-design-variant="hallmark"] .class-agenda li {
    min-height: 0 !important;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) calc(var(--space-xl) + var(--space-2xs)) !important;
    border-top: 0 !important;
    background:
      linear-gradient(var(--color-rule-soft), var(--color-rule-soft))
        calc(var(--space-xl) + var(--space-2xs)) 0 /
        calc(100% - (var(--space-xl) + var(--space-2xs))) var(--rule-thin)
        no-repeat,
      var(--color-paper-2) !important;
  }

  body[data-design-variant="hallmark"] .class-agenda li::after {
    display: none !important;
  }

  body[data-design-variant="hallmark"] .site-footer::before {
    width: min(100% - (var(--space-md) * 2), 46rem);
    font-size: var(--text-xl);
  }

  .hm-index-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: var(--space-xl) 0 var(--space-2xl);
  }

  .hm-wordmark img {
    width: 5rem;
  }

  .hm-index-rule {
    grid-column: auto;
  }

  .hm-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hm-link-ledger a {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hm-link-ledger span {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body[data-design-variant="hallmark"] .live-shell {
    padding: var(--space-2xs) !important;
  }

  body[data-design-variant="hallmark"] .live-header {
    height: var(--space-2xl) !important;
    min-height: var(--space-2xl) !important;
    grid-template-columns: 3.5rem minmax(0, 1fr) !important;
    gap: var(--space-2xs) !important;
    padding-inline: var(--space-2xs) calc(6rem + var(--space-2xs)) !important;
  }

  body[data-design-variant="hallmark"] .live-brand,
  body[data-design-variant="hallmark"] .live-brand img {
    width: 3.5rem !important;
    height: 3.5rem !important;
  }

  body[data-design-variant="hallmark"] .live-state {
    justify-self: start;
    margin-right: 0;
    font-size: var(--text-xs) !important;
  }

  body[data-design-variant="hallmark"].console-page .review-language {
    top: var(--space-2xs);
    right: var(--space-2xs);
  }

  body[data-design-variant="hallmark"] .console-shell {
    padding: var(--space-sm) !important;
  }

  body[data-design-variant="hallmark"] .console-header {
    padding-top: calc(var(--space-xl) + var(--space-2xs)) !important;
  }

  body[data-design-variant="hallmark"] .console-header h1 {
    margin-top: var(--space-2xs) !important;
    font-size: var(--text-2xl) !important;
    line-height: 1.04 !important;
  }

  body[data-design-variant="hallmark"] .demo-chip {
    width: 100%;
    border-radius: var(--radius-input) !important;
    font-size: var(--text-xs) !important;
    line-height: 1.45;
  }
}

@media (max-width: 25.875rem) {
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-phone-benefits-variant="compact"]) .webinar-card .btn {
    font-size: var(--text-base) !important;
  }

  body[data-design-variant="hallmark"] .hero h1,
  body[data-design-variant="hallmark"] .hero-copy h1,
  body[data-design-variant="hallmark"] .profile-copy h1,
  body[data-design-variant="hallmark"] .academy-home-copy h1,
  body[data-design-variant="hallmark"] .class-greeting h1,
  body[data-design-variant="hallmark"] .class-single-state h1 {
    font-size: clamp(2.35rem, 11vw, 3.25rem) !important;
  }

  body[data-design-variant="hallmark"] .academy-home-copy h1 {
    font-size: clamp(2rem, 10vw, var(--text-2xl)) !important;
  }

  body[data-design-variant="hallmark"] .class-countdown-card {
    grid-template-columns: 1fr !important;
  }

  body[data-design-variant="hallmark"] .class-countdown-ring {
    justify-self: start;
  }

  .hm-state-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 22rem) {
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "meta"
      "action"
      "under"
      "title"
      "line"
      "count"
      "includes"
      "incl" !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-when b {
    font-size: var(--text-xs) !important;
    white-space: nowrap;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-count {
    padding-right: 0 !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero-includes {
    grid-template-columns: var(--space-lg) minmax(0, 1fr);
    width: calc(100% + var(--space-lg));
    margin-inline: calc(var(--space-sm) * -1) !important;
    padding: var(--space-sm) var(--space-xs) !important;
    border-top: 0 !important;
    border-bottom: var(--rule-thin) solid var(--color-rule-soft) !important;
    border-inline: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-design-variant="hallmark"] *,
  body[data-design-variant="hallmark"] *::before,
  body[data-design-variant="hallmark"] *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/* Review controls occupy their own row; they must never cover product navigation.
 * Layout transforms (skip links, centered controls, dividers) survive reduced motion. */
body[data-design-variant="hallmark"][data-preview-page] .review-language {
  position: relative !important;
  inset: auto !important;
  width: calc(100% - var(--space-lg));
  max-width: 74rem;
  margin: var(--space-2xs) auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  z-index: 2;
}

body[data-design-variant="hallmark"][data-preview-page="private-class"]:has(.private-class-shell[data-event-audience="public-webinar"]) .review-language {
  margin-block: 0;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"] {
  padding-top: 0 !important;
}

body[data-design-variant="hallmark"] .gold-button,
body[data-design-variant="hallmark"] .outline-button {
  font-family: var(--font-body) !important;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

body[data-design-variant="hallmark"] .site-nav a::before {
  content: none;
}

body[data-design-variant="hallmark"] .nav-toggle i {
  background: var(--color-ink);
}

body[data-design-variant="hallmark"] .empty-state {
  padding: var(--space-md);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  body[data-design-variant="hallmark"] .reveal,
  body[data-design-variant="hallmark"] .reveal-pending {
    opacity: 1 !important;
    transform: none !important;
  }
}

body[data-design-variant="hallmark"][data-preview-page] .review-language > span {
  display: none;
}
body[data-design-variant="hallmark"][data-preview-page] .review-language > div {
  margin-left: auto;
}
body[data-design-variant="hallmark"] .review-language .hm-review-home {
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-input);
  color: var(--color-muted);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 48rem) {
  body[data-design-variant="hallmark"] .academy-home-copy h1 {
    font-size: clamp(1.5rem, calc(7.4vw + 1px), 2rem) !important;
    overflow-wrap: normal;
  }
  body[data-design-variant="hallmark"] .class-countdown-card {
    position: relative;
    grid-template-columns: minmax(0, 1fr) !important;
    padding: var(--space-md) !important;
    min-height: 0;
  }
  body[data-design-variant="hallmark"] .class-countdown-copy {
    max-width: none;
  }
  body[data-design-variant="hallmark"] .class-countdown-meta {
    padding-right: var(--space-2xl);
  }
  body[data-design-variant="hallmark"] .class-countdown-ring {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: var(--space-2xl);
    height: var(--space-2xl);
    opacity: .65;
    pointer-events: none;
  }
  body[data-design-variant="hallmark"] .class-card-kicker {
    margin-top: var(--space-md);
  }
}

/* WebKit's native compact select ignores min-height until appearance is reset. */
body[data-design-variant="hallmark"] .slow-mode {
  position: relative;
}
body[data-design-variant="hallmark"] .slow-mode select {
  appearance: none;
  min-height: var(--tap-target) !important;
  padding-right: var(--space-xl);
  font-size: var(--text-base);
}
body[data-design-variant="hallmark"] .slow-mode::after {
  content: "";
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-md);
  width: var(--space-2xs);
  height: var(--space-2xs);
  border-right: var(--rule-strong) solid var(--color-ink);
  border-bottom: var(--rule-strong) solid var(--color-ink);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Fit editorial headlines to their column without splitting Spanish words. */
body[data-design-variant="hallmark"] .academy-home-copy h1,
body[data-design-variant="hallmark"] .profile-copy h1 {
  max-width: none;
  font-size: clamp(2rem, 3.1vw, 3.5rem) !important;
  overflow-wrap: normal;
  hyphens: none;
}
body[data-design-variant="hallmark"] .class-countdown-copy > p {
  max-width: none;
}
@media (max-width: 48rem) {
  body[data-design-variant="hallmark"] .profile-copy h1 {
    font-size: clamp(1.75rem, 7.6vw, 2.25rem) !important;
  }
  body[data-design-variant="hallmark"] .academy-home-copy h1 {
    font-size: clamp(1.5rem, calc(7.4vw + 1px), 2rem) !important;
  }
  body[data-design-variant="hallmark"]:not(.hm-ready) .nav-toggle {
    display: none;
  }
  body[data-design-variant="hallmark"]:not(.hm-ready) .nav-inner {
    height: auto;
    flex-wrap: wrap;
  }
  body[data-design-variant="hallmark"]:not(.hm-ready) .site-nav {
    position: static;
    display: flex;
    flex-basis: 100%;
    margin-bottom: var(--space-sm);
  }
}

body[data-design-variant="hallmark"] .private-class-dev-pill,
body[data-design-variant="hallmark"] .fixture-note,
body[data-design-variant="hallmark"] .preview-ribbon span:last-child {
  color: var(--color-muted) !important;
  opacity: 1 !important;
}
body[data-design-variant="hallmark"] .hm-no-script {
  margin: var(--space-md);
  padding: var(--space-md);
  border: var(--rule-thin) solid var(--color-rule);
  color: var(--color-ink);
  font-size: var(--text-base);
}
body[data-design-variant="hallmark"] .telegram-marquee:focus-visible {
  outline: var(--rule-strong) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}

/* Both review languages use the same readable action face and wrapping rule. */
body[data-design-variant="hallmark"] .btn {
  font-family: var(--font-body) !important;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

body[data-design-variant="hallmark"] .story-number,
body[data-design-variant="hallmark"] .xau-scanner .st.done {
  color: var(--color-muted) !important;
}

/* Direct interaction feedback: it confirms a tap or an invalid field without
 * adding a second validation path or holding up the registration flow. */
body[data-design-variant="hallmark"] .registration-input,
body[data-design-variant="hallmark"] .choice,
body[data-design-variant="hallmark"] .choice-grid button {
  transition:
    border-color var(--dur-short) var(--ease-out),
    background-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-short) var(--ease-out),
    transform var(--dur-instant) var(--ease-out);
}

body[data-design-variant="hallmark"] .registration-input[aria-invalid="true"] {
  box-shadow: 0 0 0 var(--space-3xs) color-mix(in oklch, var(--color-danger) 24%, transparent) !important;
}

body[data-design-variant="hallmark"] .choice[aria-checked="true"],
body[data-design-variant="hallmark"] .choice-grid button[aria-checked="true"],
body[data-design-variant="hallmark"] .choice-grid button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 var(--rule-thin) var(--color-accent), 0 var(--space-2xs) var(--space-md) calc(var(--space-sm) * -1) var(--color-shadow) !important;
}

body[data-design-variant="hallmark"] .choice:active,
body[data-design-variant="hallmark"] .choice-grid button:active {
  transform: scale(.985);
}

@media (prefers-reduced-motion: no-preference) {
  body[data-design-variant="hallmark"] .registration-screen:not([hidden]) {
    animation: hm-registration-step-in var(--dur-short) var(--ease-out) both;
  }
}

@keyframes hm-registration-step-in {
  from { opacity: .01; transform: translateY(var(--space-2xs)); }
  to { opacity: 1; transform: none; }
}

/* September mobile density pass: preserve the market-instrument hierarchy while
 * removing repeated display-scale titles and stacked desktop whitespace. */
@media (max-width: 48rem) {
  body[data-design-variant="hallmark"] {
    --hm-phone-section: clamp(2rem, 9vw, 2.5rem);
    --hm-phone-section-tight: clamp(2rem, 8vw, 2.25rem);
    --hm-phone-card: var(--space-sm);
    --hm-phone-gap: var(--space-sm);
    --hm-phone-heading: clamp(1.75rem, 7.5vw, 2rem);
    --hm-phone-hero: clamp(2.25rem, 9.5vw, 2.375rem);
    --hm-phone-control: 3rem;
  }

  body[data-design-variant="hallmark"] .section,
  body[data-design-variant="hallmark"] .ecosystem-hero,
  body[data-design-variant="hallmark"] .class-arrival {
    padding-block: var(--hm-phone-section) !important;
  }

  body[data-design-variant="hallmark"] .recognition,
  body[data-design-variant="hallmark"] .system,
  body[data-design-variant="hallmark"] .faq,
  body[data-design-variant="hallmark"] .final,
  body[data-design-variant="hallmark"] .class-host,
  body[data-design-variant="hallmark"] .class-agenda,
  body[data-design-variant="hallmark"] .class-resource-section,
  body[data-design-variant="hallmark"] .class-prep-console {
    padding-block: var(--hm-phone-section-tight) !important;
  }

  body[data-design-variant="hallmark"] .hero {
    padding: var(--space-xl) 0 var(--hm-phone-section) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero {
    padding: calc(var(--space-2xl) + var(--space-sm)) 0 var(--space-lg) !important;
  }

  body[data-design-variant="hallmark"] .hero-stage,
  body[data-design-variant="hallmark"] .hero-grid,
  body[data-design-variant="hallmark"] .profile-grid,
  body[data-design-variant="hallmark"] .academy-home-hero-grid,
  body[data-design-variant="hallmark"] .academy-mentor-grid,
  body[data-design-variant="hallmark"] .recognition-head,
  body[data-design-variant="hallmark"] .xau-head,
  body[data-design-variant="hallmark"] .proof-head,
  body[data-design-variant="hallmark"] .faq-layout,
  body[data-design-variant="hallmark"] .hm-index-group {
    gap: var(--hm-phone-gap) !important;
  }

  body[data-design-variant="hallmark"] .hero h1,
  body[data-design-variant="hallmark"] .hero-copy h1,
  body[data-design-variant="hallmark"] .class-greeting h1,
  body[data-design-variant="hallmark"] .class-single-state h1 {
    font-size: var(--hm-phone-hero) !important;
    line-height: 1.02 !important;
  }

  body[data-design-variant="hallmark"] .section-heading h2,
  body[data-design-variant="hallmark"] .section > .shell > h2,
  body[data-design-variant="hallmark"] .academy-home-heading h2,
  body[data-design-variant="hallmark"] .academy-mentor-copy h2,
  body[data-design-variant="hallmark"] .story-copy h2,
  body[data-design-variant="hallmark"] .mentor-copy h2,
  body[data-design-variant="hallmark"] .proof-head h2,
  body[data-design-variant="hallmark"] .faq-intro h2,
  body[data-design-variant="hallmark"] .final-copy h2,
  body[data-design-variant="hallmark"] .system-head h2,
  body[data-design-variant="hallmark"] .phone-benefits-copy h2 {
    font-size: var(--hm-phone-heading) !important;
    line-height: 1.08 !important;
  }

  body[data-design-variant="hallmark"] .webinar-card,
  body[data-design-variant="hallmark"] .class-countdown-card,
  body[data-design-variant="hallmark"] .question-queue article,
  body[data-design-variant="hallmark"] .live-shell,
  body[data-design-variant="hallmark"] .console-shell,
  body[data-design-variant="hallmark"] .console-main {
    padding: var(--hm-phone-card) !important;
  }

  body[data-design-variant="hallmark"] .class-agenda li,
  body[data-design-variant="hallmark"] .class-resources article,
  body[data-design-variant="hallmark"] .class-resources article:first-child,
  body[data-design-variant="hallmark"] .system-item,
  body[data-design-variant="hallmark"] .system-item:nth-child(n) {
    min-height: 0 !important;
  }

  body[data-design-variant="hallmark"] .class-agenda ol,
  body[data-design-variant="hallmark"] .class-resources,
  body[data-design-variant="hallmark"] .live-layout,
  body[data-design-variant="hallmark"] .studio-workspace,
  body[data-design-variant="hallmark"] .moderation-grid {
    gap: var(--hm-phone-gap) !important;
  }

  body[data-design-variant="hallmark"] .gold-button,
  body[data-design-variant="hallmark"] .btn,
  body[data-design-variant="hallmark"] .registration-input,
  body[data-design-variant="hallmark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  body[data-design-variant="hallmark"] select,
  body[data-design-variant="hallmark"] textarea {
    min-height: var(--hm-phone-control) !important;
    font-size: var(--text-base) !important;
  }

  body[data-design-variant="hallmark"] .choice,
  body[data-design-variant="hallmark"] .choice-grid button {
    min-height: var(--hm-phone-control) !important;
  }

  /* Text enlargement can turn inherited rem-based CTA minimums into a wider
   * control than its card. Keep the action inside its real column and let the
   * label add a line instead of clipping behind an overflow-hidden ancestor. */
  body[data-design-variant="hallmark"] .webinar-card,
  body[data-design-variant="hallmark"] .record-cta,
  body[data-design-variant="hallmark"] .mentor-copy,
  body[data-design-variant="hallmark"] .proof-action {
    min-width: 0 !important;
  }

  body[data-design-variant="hallmark"] .webinar-card .btn,
  body[data-design-variant="hallmark"] .record-cta .ghost,
  body[data-design-variant="hallmark"] .mentor-copy .ghost,
  body[data-design-variant="hallmark"] .proof-action .btn {
    min-width: 0 !important;
    max-inline-size: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  body[data-design-variant="hallmark"] .class-live-heading,
  body[data-design-variant="hallmark"] .private-class-header {
    min-height: var(--space-2xl) !important;
  }

  body[data-design-variant="hallmark"] .hm-index {
    padding: var(--space-lg) 0 var(--space-2xl) !important;
  }

  body[data-design-variant="hallmark"] .hm-index-hero {
    gap: var(--space-md) !important;
    padding: var(--space-lg) 0 var(--space-xl) !important;
  }

  body[data-design-variant="hallmark"] .hm-index-hero h1 {
    font-size: var(--hm-phone-hero) !important;
  }

  body[data-design-variant="hallmark"] .hm-index-group {
    padding-block: var(--hm-phone-section) !important;
  }

  body[data-design-variant="hallmark"] .hm-index-group h2 {
    font-size: var(--hm-phone-heading) !important;
    line-height: 1.08 !important;
  }

  body[data-design-variant="hallmark"] .hm-link-ledger a,
  body[data-design-variant="hallmark"] .hm-state-grid a {
    min-height: var(--hm-phone-control) !important;
    padding-block: var(--space-xs) !important;
  }

  /* The Spanish LP has earlier, deliberately specific mobile review rules.
   * This final layer trims its repeated section padding without changing its
   * protected player/media ratio or its readable acquisition hero. */
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section {
    padding-block: var(--hm-phone-section) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.recognition,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.system,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.faq,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.final {
    padding-block: var(--hm-phone-section-tight) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section h2 {
    font-size: clamp(1.5rem, 6.4vw, 1.625rem) !important;
    line-height: 1.08 !important;
  }

  /* The webinar title is a card label, not a section heading. */
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card h2 {
    font-size: var(--text-lg) !important;
    line-height: 1.12 !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .mentor-layout {
    gap: var(--hm-phone-gap) !important;
  }

  body[data-design-variant="hallmark"] .section.xau-section,
  body[data-design-variant="hallmark"] .section.mentor,
  body[data-design-variant="hallmark"] .section.learn,
  body[data-design-variant="hallmark"] .section.proof {
    padding-block: var(--hm-phone-section) !important;
  }

  body[data-design-variant="hallmark"] .xau-scanner .mkt {
    height: 12.5rem !important;
  }

  body[data-design-variant="hallmark"] .proof-head + .proof-marquee {
    margin-top: var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .proof-label {
    margin-block: var(--space-lg) var(--space-xs) !important;
  }

  /* Preserve portrait media proportions while making the horizontal galleries
   * read as rails instead of consuming a full phone viewport per card. */
  body[data-design-variant="hallmark"] .proof-card {
    flex-basis: min(51vw, 12rem) !important;
  }

  body[data-design-variant="hallmark"] .telegram-card {
    flex-basis: calc((100vw - var(--space-lg)) * .58) !important;
  }

  body[data-design-variant="hallmark"][data-preview-page="home"] .academy-mentor-grid {
    gap: var(--hm-phone-gap) !important;
  }

  body[data-design-variant="hallmark"][data-preview-page="home"] .academy-home-close-inner {
    gap: var(--space-md) !important;
    padding-block: var(--space-lg) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .recognition-close strong {
    font-size: clamp(1.5rem, 6.8vw, 1.75rem) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-head {
    margin-bottom: var(--space-md) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-list {
    margin-top: var(--space-md) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-item,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-item:nth-child(n) {
    grid-template-columns: min(4.125rem, 22vw) minmax(0, 1fr) !important;
    gap: var(--space-3xs) var(--space-xs) !important;
    padding-block: var(--space-sm) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-icon {
    width: min(4.125rem, 22vw) !important;
    height: min(4.125rem, 22vw) !important;
    justify-self: end;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-icon picture {
    justify-self: end;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .system-icon img {
    filter:
      brightness(1.42)
      saturate(1.08)
      contrast(1.02)
      drop-shadow(0 var(--space-2xs) var(--space-sm) color-mix(in oklch, var(--color-accent) 12%, transparent)) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) blockquote {
    margin-block: var(--space-lg) var(--space-sm) !important;
    padding-block: var(--space-sm) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .learn-layout {
    gap: var(--hm-phone-gap) !important;
    margin-top: var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] button,
  body[data-design-variant="hallmark"] a,
  body[data-design-variant="hallmark"] input,
  body[data-design-variant="hallmark"] select,
  body[data-design-variant="hallmark"] textarea {
    touch-action: manipulation;
  }

  /* Use logical padding after the shared section rule so the absolute mobile
   * header never overlaps the acquisition headline. */
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero.section {
    padding-block: calc(var(--space-2xl) + var(--space-sm)) var(--space-lg) !important;
  }

  body[data-design-variant="hallmark"] .hero.section {
    padding-block: calc(var(--space-2xl) + var(--space-sm)) var(--space-lg) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .hero h1 {
    font-size: clamp(2rem, 8.5vw, 2.125rem) !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.xau-section,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.mentor,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.learn,
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .section.proof {
    padding-block: var(--hm-phone-section) !important;
  }

  body[data-design-variant="hallmark"] .hm-index-hero {
    grid-template-columns: 4rem minmax(0, 1fr) !important;
    align-items: start !important;
    gap: var(--space-md) !important;
    padding-block: var(--space-md) var(--space-lg) !important;
  }

  body[data-design-variant="hallmark"] .hm-index-hero > div {
    grid-column: 2 !important;
  }

  body[data-design-variant="hallmark"] .hm-index-hero h1 {
    font-size: clamp(1.875rem, 8.5vw, 2.125rem) !important;
  }

  body[data-design-variant="hallmark"] .hm-index-rule {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--space-2xs) var(--space-sm) !important;
  }

  /* Waiting-room information remains complete, but the access status, timer,
   * and prep surfaces no longer repeat large blank bands on a phone. */
  body[data-design-variant="hallmark"] .class-arrival {
    gap: var(--space-2xs) !important;
    padding-block: var(--space-lg) 0 !important;
  }

  body[data-design-variant="hallmark"] .class-access-badge {
    margin-bottom: var(--space-2xs) !important;
  }

  body[data-design-variant="hallmark"] .class-countdown-copy {
    padding-block: var(--space-sm) !important;
  }

  body[data-design-variant="hallmark"] .class-host,
  body[data-design-variant="hallmark"] .class-agenda,
  body[data-design-variant="hallmark"] .class-resource-section,
  body[data-design-variant="hallmark"] .class-prep-console {
    padding-block: var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .live-shell {
    padding: var(--space-2xs) !important;
  }
}

@media (max-width: 48rem) and (orientation: landscape) {
  body[data-design-variant="hallmark"] .hero.section {
    padding-block-start: 6.5rem !important;
  }
}

@media (max-width: 64rem) and (orientation: landscape) {
  body[data-design-variant="hallmark"] .hero.section {
    padding-block-start: 6.5rem !important;
  }
}

/* Illustration panels use a real media region followed by document content.
 * Keeping headings off the artwork prevents the mobile density layer from
 * turning product imagery into a low-contrast text background. */
body[data-design-variant="hallmark"] .learn-panel.live-panel,
body[data-design-variant="hallmark"] .learn-panel.playbook-panel {
  display: flex !important;
  min-height: 0 !important;
  flex-direction: column;
  justify-content: flex-start !important;
  padding: var(--space-lg) !important;
  background: var(--color-paper-2) !important;
}

body[data-design-variant="hallmark"] .learn-panel.live-panel::after {
  display: none !important;
}

body[data-design-variant="hallmark"] .learn-panel .live-class-image,
body[data-design-variant="hallmark"] .learn-panel .playbook-image {
  position: relative !important;
  inset: auto !important;
  order: 0;
  display: block;
  width: 100% !important;
  height: clamp(13rem, 23vw, 19rem) !important;
  max-width: none !important;
  margin: 0 0 var(--space-md) !important;
  overflow: hidden;
  isolation: isolate;
  transform: none !important;
  border: var(--rule-thin) solid var(--color-rule-soft);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body[data-design-variant="hallmark"] .learn-panel .live-class-image::after,
body[data-design-variant="hallmark"] .learn-panel .playbook-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, color-mix(in oklch, black 27%, transparent), color-mix(in oklch, black 38%, transparent));
  pointer-events: none;
}

body[data-design-variant="hallmark"] .learn-panel .live-class-image img,
body[data-design-variant="hallmark"] .learn-panel .playbook-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: center;
  filter: brightness(85%);
}

body[data-design-variant="hallmark"] .learn-panel.live-panel .panel-number,
body[data-design-variant="hallmark"] .learn-panel.live-panel h3,
body[data-design-variant="hallmark"] .learn-panel.live-panel p,
body[data-design-variant="hallmark"] .learn-panel.playbook-panel > div {
  order: 1;
  position: relative;
  z-index: 1;
}

body[data-design-variant="hallmark"] .learn-panel.live-panel .panel-number {
  align-self: flex-start;
  width: auto;
  min-height: 0;
  margin: 0 0 var(--space-2xs) !important;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-muted);
}

body[data-design-variant="hallmark"] .learn-panel h3 {
  margin: 0 0 var(--space-xs) !important;
  font-size: clamp(1.375rem, 2.4vw, 2rem) !important;
}

body[data-design-variant="hallmark"] .learn-panel p {
  margin: 0 0 var(--space-xs) !important;
  color: var(--color-ink-2) !important;
}

body[data-design-variant="hallmark"] .learn-panel p:last-child {
  margin-bottom: 0 !important;
}

/* CTAs keep the established gold hierarchy, but gain a made surface and a
 * short pressed depth so the action is no longer visually flat. */
body[data-design-variant="hallmark"] .btn,
body[data-design-variant="hallmark"] .gold-button,
body[data-design-variant="hallmark"] .sk-cta,
body[data-design-variant="hallmark"] .site-nav .nav-cta {
  background: linear-gradient(180deg, var(--color-focus), var(--color-accent)) !important;
  border-color: color-mix(in oklch, var(--color-focus) 70%, var(--color-accent)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 65%, transparent),
    inset 0 -1px 0 color-mix(in oklch, black 20%, transparent),
    0 3px 0 color-mix(in oklch, var(--color-accent) 35%, black),
    0 9px 18px color-mix(in oklch, black 22%, transparent) !important;
  text-shadow: 0 1px 0 color-mix(in oklch, white 12%, transparent);
  color: var(--color-accent-ink) !important;
}

body[data-design-variant="hallmark"] .btn:hover,
body[data-design-variant="hallmark"] .gold-button:hover,
body[data-design-variant="hallmark"] .sk-cta:hover,
body[data-design-variant="hallmark"] .site-nav .nav-cta:hover {
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-focus) 82%, white), var(--color-accent)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 76%, transparent),
    inset 0 -1px 0 color-mix(in oklch, black 20%, transparent),
    0 4px 0 color-mix(in oklch, var(--color-accent) 35%, black),
    0 11px 20px color-mix(in oklch, black 26%, transparent) !important;
}

body[data-design-variant="hallmark"] .btn:active,
body[data-design-variant="hallmark"] .gold-button:active,
body[data-design-variant="hallmark"] .sk-cta:active,
body[data-design-variant="hallmark"] .site-nav .nav-cta:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, white 45%, transparent),
    inset 0 1px 0 color-mix(in oklch, black 18%, transparent),
    0 1px 0 color-mix(in oklch, var(--color-accent) 35%, black),
    0 4px 10px color-mix(in oklch, black 20%, transparent) !important;
}

body[data-design-variant="hallmark"] .ghost,
body[data-design-variant="hallmark"] .outline-button,
body[data-design-variant="hallmark"] .class-ghost-action {
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-paper-3) 84%, var(--color-ink)), var(--color-paper-2)) !important;
  border-color: var(--color-rule) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 6%, transparent), 0 2px 0 color-mix(in oklch, black 45%, transparent), 0 6px 14px color-mix(in oklch, black 16%, transparent) !important;
}

body[data-design-variant="hallmark"] .ghost:active,
body[data-design-variant="hallmark"] .outline-button:active,
body[data-design-variant="hallmark"] .class-ghost-action:active {
  transform: translateY(1px) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 4%, transparent), 0 1px 0 color-mix(in oklch, black 45%, transparent), 0 3px 8px color-mix(in oklch, black 14%, transparent) !important;
}

@keyframes hm-dialog-enter {
  from { opacity: 0; transform: translateY(var(--space-sm)) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hm-dialog-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

body[data-design-variant="hallmark"] .registration-dialog[open] .modal-inner,
body[data-design-variant="hallmark"] .registration-dialog[open] .registration-shell,
body[data-design-variant="hallmark"] .class-rebook-dialog[open] .class-rebook-shell,
body[data-design-variant="hallmark"] .class-agenda-dialog[open] .class-agenda-dialog-shell {
  animation: hm-dialog-enter var(--dur-short) var(--ease-out) both;
}

body[data-design-variant="hallmark"] .registration-dialog .registration-step-label {
  padding-inline-end: calc(var(--tap-target) + var(--space-xs));
}

body[data-design-variant="hallmark"] .faq-list details[open] > p {
  animation: hm-dialog-enter var(--dur-short) var(--ease-out) both;
}

body[data-design-variant="hallmark"] .registration-dialog::backdrop {
  transition: background-color var(--dur-short) var(--ease-out), backdrop-filter var(--dur-short) var(--ease-out);
}

body[data-design-variant="hallmark"] .registration-dialog[open]::backdrop,
body[data-design-variant="hallmark"] .class-rebook-dialog[open]::backdrop,
body[data-design-variant="hallmark"] .class-agenda-dialog[open]::backdrop {
  animation: hm-dialog-backdrop-enter var(--dur-short) var(--ease-out) both;
}

/* Modern engines retain the native dialog in the top layer while it closes.
 * Older engines keep the entry keyframe above and preserve instant native close. */
@supports (transition-behavior: allow-discrete) and (overlay: auto) {
  body[data-design-variant="hallmark"] .registration-dialog {
    opacity: 0;
    transform: translateY(var(--space-sm)) scale(.985);
    transition:
      opacity var(--dur-short) var(--ease-out),
      transform var(--dur-short) var(--ease-out),
      overlay var(--dur-short) allow-discrete,
      display var(--dur-short) allow-discrete;
  }

  body[data-design-variant="hallmark"] .registration-dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  @starting-style {
    body[data-design-variant="hallmark"] .registration-dialog[open] {
      opacity: 0;
      transform: translateY(var(--space-sm)) scale(.985);
    }
  }

  body[data-design-variant="hallmark"] .registration-dialog[open] .modal-inner {
    animation: none;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"] .class-rebook-dialog {
    opacity: 0;
    transform: translateY(var(--space-sm)) scale(.985);
    transition:
      opacity var(--dur-short) var(--ease-out),
      transform var(--dur-short) var(--ease-out),
      overlay var(--dur-short) allow-discrete,
      display var(--dur-short) allow-discrete;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"] .class-rebook-dialog[open] {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  @starting-style {
    body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"] .class-rebook-dialog[open] {
      opacity: 0;
      transform: translateY(var(--space-sm)) scale(.985);
    }
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"] .class-rebook-dialog[open] .class-rebook-shell {
    animation: none;
  }
}

@media (max-width: 48rem) {
  body[data-design-variant="hallmark"] .registration-dialog .registration-step-label {
    margin-top: calc(var(--tap-target) - var(--space-xs));
  }

  body[data-design-variant="hallmark"] .learn-panel.live-panel,
  body[data-design-variant="hallmark"] .learn-panel.playbook-panel {
    padding: var(--hm-phone-card) !important;
  }

  body[data-design-variant="hallmark"] .learn-panel .live-class-image,
  body[data-design-variant="hallmark"] .learn-panel .playbook-image {
    height: clamp(11.5rem, 57vw, 14rem) !important;
    margin-bottom: var(--space-sm) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-design-variant="hallmark"] .registration-dialog[open] .modal-inner,
  body[data-design-variant="hallmark"] .registration-dialog[open] .registration-shell,
  body[data-design-variant="hallmark"] .class-rebook-dialog[open] .class-rebook-shell,
  body[data-design-variant="hallmark"] .class-agenda-dialog[open] .class-agenda-dialog-shell,
  body[data-design-variant="hallmark"] .registration-dialog {
    animation: none !important;
    transition: none !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"] .class-rebook-dialog {
    animation: none !important;
    transition: none !important;
  }

  body[data-design-variant="hallmark"] .registration-dialog[open]::backdrop,
  body[data-design-variant="hallmark"] .class-rebook-dialog[open]::backdrop,
  body[data-design-variant="hallmark"] .class-agenda-dialog[open]::backdrop {
    animation: none !important;
  }

  body[data-design-variant="hallmark"] .faq-list details[open] > p {
    animation: none !important;
  }
}

/* Phone follow-up: make the recognition rail legible as one centered journey,
 * then let the three XAU benefits read as supporting points instead of three
 * consecutive display headlines. */
@media (max-width: 48rem) {
  body[data-design-variant="hallmark"] .recognition-journey::before {
    left: 1.4375rem;
  }

  body[data-design-variant="hallmark"] .recognition-card {
    grid-template-columns: 2.875rem minmax(0, 1fr) !important;
    column-gap: var(--space-sm) !important;
    align-items: center !important;
  }

  body[data-design-variant="hallmark"] .recognition-marker {
    align-self: stretch;
    place-items: center !important;
    padding-top: 0 !important;
  }

  body[data-design-variant="hallmark"] .recognition-icon {
    width: 2.375rem !important;
    height: 2.375rem !important;
    box-shadow: 0 0 0 .375rem var(--color-paper) !important;
  }

  body[data-design-variant="hallmark"] .recognition-icon svg {
    width: 2rem !important;
    height: 2rem !important;
  }

  body[data-design-variant="hallmark"] .recognition-close {
    padding-inline-start: 3.875rem !important;
  }

  body[data-design-variant="hallmark"] .recognition-close::before {
    left: 1.4375rem !important;
  }

  body[data-design-variant="hallmark"] .recognition-spark {
    left: .8125rem !important;
  }

  body[data-design-variant="hallmark"] .xau-benefits {
    border-bottom: var(--rule-thin) solid var(--color-rule-soft) !important;
  }

  body[data-design-variant="hallmark"] .xau-benefit {
    padding: var(--space-sm) var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .xau-benefit + .xau-benefit {
    border-top: var(--rule-thin) solid var(--color-rule-soft);
  }

  body[data-design-variant="hallmark"] .xau-benefit h3 {
    max-width: 22ch;
    margin: 0 0 var(--space-2xs) !important;
    font-size: var(--text-lg) !important;
    line-height: 1.12 !important;
    text-wrap: pretty;
  }

  body[data-design-variant="hallmark"] .xau-benefit p {
    line-height: 1.5 !important;
  }
}

body[data-design-variant="hallmark"] .record-cta .ghost {
  border-color: color-mix(in oklch, var(--color-accent) 82%, var(--color-rule)) !important;
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-accent) 8%, var(--color-paper-3)), var(--color-paper-2)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--color-focus) 18%, transparent),
    0 2px 0 color-mix(in oklch, var(--color-accent) 38%, black),
    0 7px 16px color-mix(in oklch, black 18%, transparent) !important;
  color: var(--color-focus) !important;
}

body[data-design-variant="hallmark"] .record-cta .ghost:hover {
  border-color: var(--color-focus) !important;
  background: linear-gradient(180deg, color-mix(in oklch, var(--color-accent) 13%, var(--color-paper-3)), var(--color-paper-2)) !important;
  color: var(--color-focus) !important;
}

body[data-design-variant="hallmark"] .record-cta .ghost:active {
  transform: translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--color-focus) 12%, transparent),
    0 1px 0 color-mix(in oklch, var(--color-accent) 38%, black),
    0 3px 8px color-mix(in oklch, black 14%, transparent) !important;
}

/* Founder phone review: the schedule reads as one event block, the product
 * artwork carries less masking now that its titles sit below the media, and
 * the closing decision is composed as one intentional end panel. */
body[data-design-variant="hallmark"] .learn-panel .live-class-image::after,
body[data-design-variant="hallmark"] .learn-panel .playbook-image::after {
  background: linear-gradient(
    180deg,
    color-mix(in oklch, black 16%, transparent),
    color-mix(in oklch, black 24%, transparent)
  );
}

body[data-design-variant="hallmark"] .final-card {
  overflow: hidden;
  border: var(--rule-thin) solid var(--color-rule) !important;
  border-radius: var(--radius-panel) !important;
  padding: clamp(var(--space-lg), 5vw, var(--space-3xl)) !important;
  background: linear-gradient(
    150deg,
    color-mix(in oklch, var(--color-accent) 7%, var(--color-paper-2)),
    var(--color-paper) 58%
  ) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--color-focus) 10%, transparent),
    0 var(--space-xl) var(--space-3xl) calc(var(--space-xl) * -1) var(--color-shadow) !important;
}

body[data-design-variant="hallmark"] .final-card::before {
  display: none !important;
}

body[data-design-variant="hallmark"] .final-card::after {
  display: none !important;
}

body[data-design-variant="hallmark"] .final-action {
  border: 0 !important;
  border-top: var(--rule-thin) solid var(--color-rule-soft) !important;
  border-radius: 0 !important;
  padding: var(--space-lg) 0 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"] .final-risk {
  max-width: 40rem !important;
  margin-top: var(--space-lg) !important;
  padding-top: var(--space-sm);
  border-top: var(--rule-thin) solid var(--color-rule-soft);
  color: var(--color-muted) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  line-height: 1.55 !important;
  text-align: left !important;
}

@media (max-width: 48rem) {
  body[data-design-variant="hallmark"] .final-card {
    gap: var(--space-md) !important;
    padding: var(--space-lg) var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .final h2 {
    margin-block: var(--space-sm) var(--space-md) !important;
    text-wrap: pretty;
  }

  body[data-design-variant="hallmark"] .final .lead p + p {
    margin-top: var(--space-sm) !important;
  }

  body[data-design-variant="hallmark"] .final-action {
    max-width: none !important;
    padding-top: var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .final-call {
    font-size: var(--text-lg) !important;
    overflow-wrap: anywhere;
  }

  body[data-design-variant="hallmark"] .final .btn {
    margin-top: var(--space-sm) !important;
  }

  body[data-design-variant="hallmark"] .final .reassure {
    grid-template-columns: 1fr !important;
    justify-content: start !important;
    gap: var(--space-xs) !important;
    margin-top: var(--space-md) !important;
  }

  body[data-design-variant="hallmark"] .final .reassure span,
  body[data-design-variant="hallmark"] .final .reassure span:last-child {
    grid-column: auto !important;
    justify-self: start !important;
  }

  body[data-design-variant="hallmark"] .final-risk {
    margin-top: var(--space-md) !important;
    padding-inline: var(--space-2xs);
    font-size: var(--text-xs) !important;
  }
}

/* Founder-selected schedule option 1: preserve the original horizontal event
 * row, then tighten its typography and alignment so both halves breathe. */
@media (max-width: 48rem) {
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-top,
  body[data-design-variant="hallmark"]:not([data-preview-page]) .webinar-card .cc-top {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: space-between;
    gap: var(--space-2xs) !important;
    margin-bottom: var(--space-xs) !important;
  }

  body[data-design-variant="hallmark"]:not([data-preview-page]) .webinar-card .cc-signal {
    width: auto !important;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-spot,
  body[data-design-variant="hallmark"]:not([data-preview-page]) .webinar-card .cc-spot {
    padding: var(--space-2xs) !important;
    font-size: calc(var(--text-xs) - var(--space-3xs)) !important;
    letter-spacing: .09em;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-when,
  body[data-design-variant="hallmark"]:not([data-preview-page]) .webinar-card .cc-when {
    min-width: 0;
    flex: 1 1 calc(var(--space-3xl) + var(--space-sm));
    padding: 0 !important;
    border: 0 !important;
    text-align: right !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-when b,
  body[data-design-variant="hallmark"]:not([data-preview-page]) .webinar-card .cc-when b {
    color: var(--color-accent) !important;
    font-size: var(--text-xs) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-when span,
  body[data-design-variant="hallmark"]:not([data-preview-page]) .webinar-card .cc-when span {
    margin-top: var(--space-3xs) !important;
    color: var(--color-muted) !important;
    font-size: var(--text-xs) !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 22rem) {
  html[lang="es"] body[data-design-variant="hallmark"]:not([data-preview-page]):not([data-phone-benefits-variant="compact"]) .webinar-card .cc-when b,
  body[data-design-variant="hallmark"]:not([data-preview-page]) .webinar-card .cc-when b {
    white-space: normal !important;
  }
}

/* Private-class phone refinement: keep the countdown radar legible, give the
 * two utility actions a quiet card treatment, and present the three included
 * resources as one compact set instead of three consecutive rows. */
@media (max-width: 48rem) {
  body[data-design-variant="hallmark"] .class-countdown-meta {
    padding-right: calc(var(--space-2xl) + var(--space-lg));
  }

  body[data-design-variant="hallmark"] .class-countdown-ring {
    width: calc(var(--space-2xl) + var(--space-xs));
    height: calc(var(--space-2xl) + var(--space-xs));
    opacity: .78;
  }

  body[data-design-variant="hallmark"] .class-utility-row {
    gap: var(--space-xs) !important;
    padding: var(--space-xs) 0 var(--space-sm);
    border-bottom-color: var(--color-rule-soft) !important;
  }

  body[data-design-variant="hallmark"] .class-utility-row button,
  body[data-design-variant="hallmark"] .class-utility-row button + button {
    min-height: calc(var(--tap-target) + var(--space-xs)) !important;
    padding: var(--space-xs) var(--space-sm) !important;
    border: var(--rule-thin) solid var(--color-rule-soft) !important;
    border-radius: var(--radius-input) !important;
    background: linear-gradient(
      145deg,
      color-mix(in oklch, var(--color-accent) 5%, var(--color-paper-3)),
      var(--color-paper-2)
    ) !important;
    box-shadow:
      inset 0 1px 0 color-mix(in oklch, white 5%, transparent),
      0 var(--space-3xs) var(--space-sm) color-mix(in oklch, black 22%, transparent) !important;
  }

  body[data-design-variant="hallmark"] .class-utility-row button:hover,
  body[data-design-variant="hallmark"] .class-utility-row button:focus-visible {
    border-color: color-mix(in oklch, var(--color-accent) 58%, var(--color-rule)) !important;
    background: linear-gradient(
      145deg,
      color-mix(in oklch, var(--color-accent) 8%, var(--color-paper-3)),
      var(--color-paper-2)
    ) !important;
  }

  body[data-design-variant="hallmark"] .class-resources {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: stretch;
    gap: var(--space-2xs) !important;
  }

  body[data-design-variant="hallmark"] .class-resource-section {
    container-name: class-resources;
    container-type: inline-size;
  }

  body[data-design-variant="hallmark"] .class-resources article,
  body[data-design-variant="hallmark"] .class-resources article:first-child {
    grid-column: auto !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: calc(var(--space-2xl) + var(--space-2xs)) auto !important;
    align-content: start;
    align-items: start;
    min-height: 0 !important;
    padding: var(--space-2xs) !important;
    text-align: center;
  }

  body[data-design-variant="hallmark"] .class-resources img {
    width: 100% !important;
    height: calc(var(--space-2xl) + var(--space-2xs)) !important;
    padding: var(--space-3xs) !important;
  }

  body[data-design-variant="hallmark"] .class-resources article > div {
    width: 100%;
    padding: var(--space-2xs) var(--space-3xs) var(--space-xs) !important;
  }

  body[data-design-variant="hallmark"] .class-resources b {
    font-size: var(--text-sm) !important;
    line-height: 1.2;
    text-wrap: balance;
  }

  body[data-design-variant="hallmark"] .class-resources small {
    margin-top: var(--space-3xs);
    font-size: var(--text-xs) !important;
    line-height: 1.35;
    overflow-wrap: normal;
    hyphens: none;
  }
}

/* Preserve whole resource names on narrow phones while retaining three cards. */
@container class-resources (min-width: 15.01rem) and (max-width: 19rem) {
  body[data-design-variant="hallmark"] .class-resources article,
  body[data-design-variant="hallmark"] .class-resources article:first-child {
    padding: 6px !important;
  }

  body[data-design-variant="hallmark"] .class-resources article > div {
    padding-inline: 0 !important;
  }

  body[data-design-variant="hallmark"] .class-resources b {
    font-size: 12px !important;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@container class-resources (max-width: 15rem) {
  body[data-design-variant="hallmark"] .class-resources {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body[data-design-variant="hallmark"] .class-resources article,
  body[data-design-variant="hallmark"] .class-resources article:first-child {
    grid-template-columns: minmax(0, .3fr) minmax(0, .7fr) !important;
    grid-template-rows: auto !important;
    align-items: center;
    text-align: left;
  }

  body[data-design-variant="hallmark"] .class-resources img {
    height: auto !important;
    aspect-ratio: 1;
  }

  body[data-design-variant="hallmark"] .class-resources article > div {
    padding-inline: var(--space-3xs) 0 !important;
  }
}

/* Approved concept 04. Scoped to the opt-in comparison; tokens keep it in the page palette. */
body[data-phone-benefits-variant="compact"] .phone-benefits-comparison {
  padding-block: clamp(2rem, 5vw, 4rem) !important;
  scroll-margin-top: 5rem;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-layout {
  max-width: 54rem;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-copy h2 {
  margin: 1rem 0 1.125rem !important;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-intro {
  max-width: 40rem;
  margin: 0;
  color: var(--color-ink-2);
  font-size: 1rem;
  line-height: 1.55;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.75rem;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-list article {
  min-width: 0;
  padding: 1.25rem;
  border: var(--rule-thin) solid var(--color-rule);
  border-top-color: color-mix(in oklch, var(--color-accent) 76%, var(--color-rule));
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, var(--color-paper-3), var(--color-paper-2) 70%);
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--color-accent) 12%, transparent);
}
body[data-phone-benefits-variant="compact"] .phone-benefits-label {
  display: block;
  margin-bottom: .875rem;
  color: var(--color-accent);
  font: 500 .687rem/1.4 var(--font-mono);
  letter-spacing: .12em;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-list h3 {
  margin: 0 0 .625rem !important;
  font-family: var(--font-body) !important;
  font-size: 1.125rem !important;
  font-weight: 700;
  line-height: 1.25 !important;
  letter-spacing: -.015em !important;
  color: var(--color-ink);
  text-wrap: initial;
  overflow-wrap: normal;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-list p {
  margin: 0;
  color: var(--color-ink-2);
  font-size: 1rem;
  line-height: 1.45;
  text-wrap: initial;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-close {
  margin: 1.5rem 0;
  color: var(--color-muted);
  font: 400 1rem/1.5 var(--font-body);
  text-align: center;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-action {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-action .btn {
  width: 100%;
  min-height: 3.5rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  white-space: normal;
  line-height: 1.35;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-action p {
  margin: .875rem 0 0;
  color: var(--color-muted);
  font-size: .875rem;
}
@media (max-width: 25.875rem) {
  body[data-phone-benefits-variant="compact"] .phone-benefits-list article {
    padding: 1rem .875rem;
  }
}
@media (max-width: 22rem) {
  body[data-phone-benefits-variant="compact"] .phone-benefits-list {
    gap: .5rem;
  }
  body[data-phone-benefits-variant="compact"] .phone-benefits-list article {
    padding: .875rem .625rem;
  }
  body[data-phone-benefits-variant="compact"] .phone-benefits-list h3 {
    font-size: 1rem !important;
  }
}

/* Approved readable treatment: dark scanner and compact dark benefit rows. */
body[data-phone-benefits-variant="compact"] .terminal {
  border-color: var(--color-accent) !important;
  padding: 0 !important;
  --scanner-gold: color-mix(in oklch, var(--color-accent) 82%, var(--color-focus));
  background: var(--color-paper-2) !important;
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--color-focus), 0 16px 36px var(--color-shadow) !important;
}
body[data-phone-benefits-variant="compact"] .terminal-inner {
  background: transparent;
  border: 0;
  border-radius: inherit;
  overflow: hidden;
}
body[data-phone-benefits-variant="compact"] .terminal-top {
  padding: 1rem 1.25rem;
  color: var(--color-ink);
  border-color: color-mix(in oklch, var(--color-accent) 45%, transparent);
}
body[data-phone-benefits-variant="compact"] .terminal-scan {
  min-block-size: 2lh;
  color: var(--color-ink);
}
body[data-phone-benefits-variant="compact"] .xau-scanner {
  padding: 1rem 1rem 1.5rem;
  background: transparent;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .phone {
  background: var(--color-paper-2);
  border-color: color-mix(in oklch, var(--color-accent) 30%, var(--color-rule));
  box-shadow: 0 8px 20px var(--color-shadow);
}
body[data-phone-benefits-variant="compact"] .xau-scanner .st,
body[data-phone-benefits-variant="compact"] .xau-scanner .st.done {
  color: var(--color-ink-2);
}
body[data-phone-benefits-variant="compact"] .xau-scanner .st.act {
  color: var(--color-focus);
}
body[data-phone-benefits-variant="compact"] .xau-scanner .state-cap {
  display: grid;
  place-items: center;
  min-height: 4.5rem;
  color: var(--color-ink);
  font-size: 1rem !important;
  line-height: 1.5;
  max-width: 40rem;
}
body[data-phone-benefits-variant="compact"] .xau-benefits {
  gap: 0;
  background: var(--color-paper-2);
  border: 0 !important;
  border-top: var(--rule-thin) solid var(--color-rule-soft) !important;
}
body[data-phone-benefits-variant="compact"] .xau-benefit {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: .875rem;
  align-content: start;
  padding: 1rem 1.25rem !important;
}
body[data-phone-benefits-variant="compact"] .xau-benefit-icon {
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  align-self: start;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: 0;
  color: var(--color-focus);
  background: transparent;
}
body[data-phone-benefits-variant="compact"] .xau-benefit-icon svg {
  width: 1.625rem;
  height: 1.625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body[data-phone-benefits-variant="compact"] .xau-benefit h3 {
  grid-column: 2;
  max-width: none;
  margin: 0 0 .25rem !important;
  font-family: var(--font-body) !important;
  font-size: 1.125rem !important;
  line-height: 1.25 !important;
  letter-spacing: -.015em;
  color: var(--color-ink) !important;
}
body[data-phone-benefits-variant="compact"] .xau-benefit p {
  grid-column: 2;
  color: var(--color-muted) !important;
  font-size: 1rem !important;
  line-height: 1.5;
}
body[data-phone-benefits-variant="compact"] .xau-emphasis {
  grid-template-columns: minmax(0, 32.5rem);
  padding: .25rem 1.25rem 1.25rem;
  background: var(--color-paper-2);
  border-top: var(--rule-thin) solid var(--color-rule-soft);
}
body[data-phone-benefits-variant="compact"] .record-cta {
  min-width: 0;
}
body[data-phone-benefits-variant="compact"] .record-cta .ghost {
  background: var(--color-focus) !important;
  border-color: var(--color-focus) !important;
  min-height: 3.25rem;
  font-size: 1rem !important;
  color: var(--color-accent-ink) !important;
  white-space: normal;
  text-align: center;
}
body[data-phone-benefits-variant="compact"] .verified {
  color: var(--color-ink) !important;
  font-size: .75rem !important;
  font-weight: 700;
  letter-spacing: .08em;
}
body[data-phone-benefits-variant="compact"] .verified circle {
  fill: var(--verify);
}
@media (max-width: 48rem) {
  body[data-phone-benefits-variant="compact"] .xau-benefits {
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-phone-benefits-variant="compact"] .xau-benefit + .xau-benefit {
    border-top-color: var(--color-rule-soft);
  }
}

body[data-phone-benefits-variant="compact"] .xau-scanner .ph-status,
body[data-phone-benefits-variant="compact"] .xau-scanner .notch,
body[data-phone-benefits-variant="compact"] .xau-scanner .calc,
body[data-phone-benefits-variant="compact"] .xau-scanner .win,
body[data-phone-benefits-variant="compact"] .xau-scanner .scan,
body[data-phone-benefits-variant="compact"] .xau-scanner .ticks,
body[data-phone-benefits-variant="compact"] .xau-scanner .grid,
body[data-phone-benefits-variant="compact"] .xau-scanner .mkt::before,
body[data-phone-benefits-variant="compact"] .xau-scanner .mkt::after {
  display: none !important;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .alert {
  background: var(--color-paper-4) !important;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .phone {
  width: min(40rem, 100%);
  border-radius: 1rem;
  border-width: var(--rule-thin);
}
body[data-phone-benefits-variant="compact"] .xau-scanner .mkt {
  height: clamp(17.5rem, 65vw, 23rem) !important;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .track {
  width: min(40rem, 100%);
  letter-spacing: .025em;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .prow {
  min-height: 3rem;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .prow span {
  color: var(--color-ink-2);
  font-size: .75rem !important;
  letter-spacing: .035em;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .prow b {
  font-size: 1rem !important;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .ph-top {
  color: var(--color-ink-2);
}
@media (min-width: 48.001rem) {
  body[data-phone-benefits-variant="compact"] .xau-benefit + .xau-benefit {
    border-left: var(--rule-thin) solid var(--color-rule-soft);
  }
}

/* Approved toolkit concept 01: compact editorial rows, comparison only. */
body[data-phone-benefits-variant="compact"] .toolkit-compact {
  scroll-margin-top: 6rem;
}
body[data-phone-benefits-variant="compact"] .toolkit-compact .system-head {
  margin-bottom: 1.75rem !important;
}
body[data-phone-benefits-variant="compact"] .toolkit-list {
  border-top: var(--rule-thin) solid var(--color-rule);
}
body[data-phone-benefits-variant="compact"] .toolkit-row {
  display: grid;
  grid-template-columns: clamp(5rem, 20vw, 7.5rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: 1.5rem;
  border-bottom: var(--rule-thin) solid var(--color-rule);
}
body[data-phone-benefits-variant="compact"] .toolkit-icon-frame {
  inline-size: clamp(5rem, 20vw, 7.5rem);
  aspect-ratio: 1;
  overflow: hidden;
}
body[data-phone-benefits-variant="compact"] .toolkit-icon-frame .toolkit-icon {
  display: block;
  width: 138%;
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transform: translate(-13.8%, -11%);
  filter: none;
}
body[data-phone-benefits-variant="compact"] .toolkit-copy {
  min-width: 0;
}
body[data-phone-benefits-variant="compact"] .toolkit-copy h3 {
  margin: 0 0 .5rem;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(1.125rem, 3.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--color-ink);
}
body[data-phone-benefits-variant="compact"] .toolkit-copy p {
  margin: 0;
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink-2);
}
body[data-phone-benefits-variant="compact"] .toolkit-close {
  margin: 1.5rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink-2);
}
@media (min-width: 64rem) {
  body[data-phone-benefits-variant="compact"] .toolkit-compact > .shell {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 0 clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  body[data-phone-benefits-variant="compact"] .toolkit-compact .system-head {
    display: block;
  }
  body[data-phone-benefits-variant="compact"] .toolkit-close {
    grid-column: 2;
  }
}

/* Keep the comparison CTA opaque throughout pointer entry and exit. */
body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .record-cta .ghost,
body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .record-cta .ghost:hover {
  background-color: var(--color-focus) !important;
  background-image: none !important;
  color: var(--color-accent-ink) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .record-cta .ghost:hover {
  border-color: var(--color-focus) !important;
  box-shadow: inset 0 1px 0 color-mix(in oklch, white 30%, transparent) !important;
}

/* One status-line footprint across viewports and animation states. */
body[data-phone-benefits-variant="compact"] .xau-scanner .pstat {
  box-sizing: border-box;
  block-size: 2.4rem;
  padding-block: 0;
}

/* Completion keeps every flow slot. The real, translated target status is
 * painted over the confidence panel without moving phone chrome or the rows. */
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) > .xau-meter-panel,
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) > .xau-status-strip > .xau-meter-panel,
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) > .loadline,
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) > .xau-status-strip > .loadline {
  visibility: hidden;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat {
  position: relative;
  z-index: 1;
  justify-content: center;
  gap: .75rem;
  box-sizing: border-box;
  block-size: 2.4rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: var(--rule-thin) solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-accent-ink) !important;
  font-size: 1.125rem !important;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
  text-align: center;
  translate: 0 -4.0625rem;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.05rem 0;
  border-radius: .5rem;
  background: var(--color-ready);
}
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat .ico,
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat span,
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat .ico::after {
  color: var(--color-accent-ink) !important;
  border-color: currentColor !important;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat span:not(.ico) {
  min-width: 0;
  white-space: normal;
}

/* Visible analysis progress below the chart; same confidence progression as the demo. */
body[data-phone-benefits-variant="compact"] .xau-meter-panel {
  padding: .875rem;
  margin: .875rem 0 .5rem;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: .625rem;
  background: var(--color-paper-3);
  color: var(--color-focus);
  transition: border-color .3s ease, color .3s ease;
}
body[data-phone-benefits-variant="compact"] .xau-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .625rem;
}
body[data-phone-benefits-variant="compact"] .xau-meter-head span {
  font: 600 .8125rem/1.4 var(--font-body);
  color: var(--color-ink-2);
}
body[data-phone-benefits-variant="compact"] .xau-meter-head strong {
  min-width: 4ch;
  text-align: right;
  font: 700 1.5rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
body[data-phone-benefits-variant="compact"] .xau-meter-track {
  height: .5rem;
  border-radius: .25rem;
  background: var(--color-rule);
  overflow: hidden;
}
body[data-phone-benefits-variant="compact"] .xau-meter-track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transform: scaleX(var(--xau-meter-fill, 0));
  transform-origin: left;
  transition: transform .2s linear, background-color .3s ease;
}
body[data-phone-benefits-variant="compact"] .xau-meter-panel[data-phase="scan"] .xau-meter-track i,
body[data-phone-benefits-variant="compact"] .xau-meter-panel[data-phase="level"] .xau-meter-track i {
  width: 28%;
  transform: none;
  animation: confidence-search 2.8s ease-in-out infinite;
}
body[data-phone-benefits-variant="compact"] .xau-meter-panel[data-phase="analyze"] {
  border-color: var(--color-accent);
}
body[data-phone-benefits-variant="compact"] .xau-meter-panel:not([data-phase="scan"]):not([data-phase="level"]):not([data-phase="analyze"]) {
  color: var(--color-ready);
  border-color: var(--color-ready);
}
body[data-phone-benefits-variant="compact"] .xau-scanner .scan {
  display: block !important;
  left: 0;
  width: 16%;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--color-accent) 9%, transparent) 75%, color-mix(in oklch, var(--color-focus) 65%, transparent));
  animation: readable-chart-sweep 2.4s linear infinite;
  animation-play-state: paused;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .mkt.watch .scan,
body[data-phone-benefits-variant="compact"] .xau-scanner .mkt.hold .scan,
body[data-phone-benefits-variant="compact"] .xau-scanner .mkt.compute .scan {
  opacity: .65;
  animation-play-state: running;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .scan.s2 {
  animation-delay: -.8s;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .scan.s3 {
  animation-delay: -1.6s;
}
@keyframes readable-chart-sweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(725%); }
}
@keyframes confidence-search {
  from { transform: translateX(-110%); }
  to { transform: translateX(460%); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-phone-benefits-variant="compact"] .xau-scanner .scan {
    display: none !important;
    animation: none;
  }
  body[data-phone-benefits-variant="compact"] .xau-meter-panel,
  body[data-phone-benefits-variant="compact"] .xau-meter-track i {
    animation: none !important;
    transition: none !important;
  }
}
/* Keep the readout compact instead of stretching rows to fill the phone. */
body[data-phone-benefits-variant="compact"] .xau-scanner .phone > .rows {
  display: block;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .prow {
  min-height: 3rem;
  padding-block: .625rem;
  align-items: center;
}

/* A brief completion moment above the unchanged, exact trade readout. */
body[data-phone-benefits-variant="compact"] .xau-scanner .win {
  display: grid !important;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  column-gap: .625rem;
  row-gap: .25rem;
  inset: auto 4.375rem .75rem .625rem;
  padding: .875rem;
  border: var(--rule-thin) solid var(--color-ready);
  border-radius: .625rem;
  background: color-mix(in oklch, var(--color-paper-2) 96%, var(--color-ready));
  box-shadow: 0 .25rem 1.25rem var(--color-shadow);
}
body[data-phone-benefits-variant="compact"] .xau-scanner .win .win-ring {
  grid-row: span 2;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border-color: var(--color-ready);
  background: var(--color-ready-soft);
  box-shadow: none;
  animation: none;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .win .win-ring::after {
  left: .4375rem;
  top: .5625rem;
  border-color: var(--color-ready);
}
body[data-phone-benefits-variant="compact"] .xau-scanner .win em {
  color: var(--color-ready);
  font: 700 .75rem/1.3 var(--font-mono);
  letter-spacing: .035em;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .win b {
  color: var(--color-ready);
  font: 800 clamp(1.75rem, 9vw, 2.375rem)/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}
body[data-phone-benefits-variant="compact"] .xau-scanner .win-sub {
  display: none;
}
body[data-phone-benefits-variant="compact"] .xau-meter-panel[data-phase="analyze"] .xau-meter-track i {
  transition-duration: .12s;
}
@media (prefers-reduced-motion: no-preference) {
  body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat {
    animation: target-arrival .75s ease-out both;
  }
}
@keyframes target-arrival {
  from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-ready) 60%, transparent); transform: scale(.97); }
  35% { transform: scale(1.015); }
  to { box-shadow: 0 0 0 .75rem transparent; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-phone-benefits-variant="compact"] .xau-scanner .win,
  body[data-phone-benefits-variant="compact"] .xau-scanner .win .win-ring::after {
    animation: none !important;
    transition: none !important;
  }
  body[data-phone-benefits-variant="compact"] .xau-scanner .win .win-ring::after {
    transform: rotate(-45deg) scale(1);
  }
}

/* The completed price move is already animated inside the chart. Keep its row
 * footprint so the benefit panel below does not move when the state changes. */
body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .prow:nth-child(3) {
  visibility: hidden;
}

/* Selected reference: class and time above a large full-width action. */
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] {
  left: .5rem; right: .5rem; bottom: calc(.25rem + env(safe-area-inset-bottom));
  width: auto; max-width: 36rem; margin-inline: auto; padding: .625rem !important;
  border: var(--rule-thin) solid var(--color-accent-soft) !important;
  border-radius: 1rem !important; background: var(--color-paper-2) !important;
  box-shadow: 0 .25rem 1rem var(--color-shadow) !important;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-in {
  border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none;
  display: grid; grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas: "event" "cta"; gap: .5rem !important; max-width: none; width: 100%;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-event {
  min-width: 0; min-height: 0; width: 100%; border: 0; padding: 0; align-items: center;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-stack {
  gap: 0 !important; width: 100%;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-stack > b {
  flex-direction: row; align-items: center; justify-content: space-between;
  gap: .625rem !important; width: 100%;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-lab, html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-incl, html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-div, html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-zoom, html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-sheet {
  display: none !important;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] [id="skWhenLabel"] {
  display: flex; align-items: center; gap: .5rem;
  color: var(--color-ink); font: 750 .9375rem/1.15 var(--font-body) !important;
  letter-spacing: -.015em;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] [id="skWhenLabel"]::before {
  content: ""; flex: 0 0 .375rem; width: .375rem; height: .375rem;
  border-radius: 50%; background: var(--color-focus);
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"].live [id="skWhenLabel"]::before {
  background: var(--color-ready);
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] [id="skWhenTime"] {
  padding-left: 0; text-align: right; font: 600 .75rem/1.2 var(--font-body) !important;
  color: var(--color-accent-soft); letter-spacing: 0 !important; white-space: nowrap;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-cta {
  display: flex; align-items: center; justify-content: center !important;
  gap: .625rem; align-self: center; height: 3rem; min-height: 3rem !important;
  width: 100% !important; min-width: 0 !important; padding: .75rem 1rem !important;
  border-radius: .75rem !important; border: var(--rule-thin) solid var(--color-focus) !important;
  background: var(--color-focus) !important; color: var(--color-accent-ink) !important;
  font: 750 1rem/1.1 var(--font-body) !important; letter-spacing: -.015em;
  white-space: nowrap; box-shadow: 0 2px 0 var(--color-accent-soft) !important;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-cta-label {
  white-space: nowrap; flex: 0 0 auto;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-cta .ar {
  flex: 0 0 1rem; width: 1rem; height: 1rem; margin: 0 !important;
}
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .sticky[id="sticky"] .sk-cta .ar svg {
  width: 1rem; height: 1rem;
}

/* Approved webinar concept 01: one surface, with time and countdown together. */
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .hero-visual { border: var(--rule-thin) solid var(--color-rule) !important; border-radius: 1.25rem !important; overflow: hidden; gap: 0 !important; padding: 0 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .class-card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .video-frame { aspect-ratio: 16 / 9 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .video-frame img, html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .video-frame video { filter: none !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .video-frame::after { background: linear-gradient(to top, var(--color-paper-2), transparent 30%) !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card { display: flex !important; flex-direction: column; gap: 1rem !important; padding: clamp(1rem, 3vw, 1.5rem) !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card h2 { order: 0 !important; margin: 0 !important; max-width: 22ch; font-size: clamp(1.5rem, 3vw, 2rem) !important; line-height: 1.12 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .cc-line { order: 0 !important; max-width: none !important; margin: 0 !important; font-size: .9375rem !important; line-height: 1.5 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-schedule { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .625rem; width: 100%; padding: .75rem; border: var(--rule-thin) solid var(--color-rule); border-radius: .75rem; background: color-mix(in oklch, var(--color-accent) 7%, var(--color-paper-2)); }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .cc-top { display: block !important; min-width: 0; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .cc-signal, html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .incl, html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .under-cta i:first-child { display: none !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .cc-when { min-width: 0; text-align: left !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .cc-when b { white-space: normal !important; font: 700 .875rem/1.3 var(--font-body) !important; letter-spacing: 0 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .cc-when span { display: block; margin-top: .25rem; font: 400 .75rem/1.35 var(--font-body) !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count { display: grid !important; grid-template-columns: repeat(3, auto); gap: .125rem !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 0 .625rem !important; border: 0 !important; border-left: var(--rule-thin) solid var(--color-rule) !important; align-self: center !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count::before { content: "STARTS IN"; grid-column: 1 / -1; margin: 0 0 .25rem !important; color: var(--color-muted); font: 500 .625rem/1.2 var(--font-mono); letter-spacing: .08em; }
html[lang="es"] body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count::before { content: "COMIENZA EN"; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count .cunit { display: flex; gap: .125rem; background: none !important; filter: none !important; -webkit-text-fill-color: var(--color-accent) !important; color: var(--color-accent); }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count .cunit b { font: 700 1.25rem/1.15 var(--font-mono) !important; font-variant-numeric: tabular-nums; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count .cunit + .cunit::before { content: ":"; font: 500 1.125rem/1.2 var(--font-mono); }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count .cunit small { display: none !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count-status { min-height: 0 !important; width: auto !important; margin: 0 !important; padding: .5rem !important; border: 0 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count[hidden], html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count-status[hidden] { display: none !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card > .btn { order: 0 !important; width: 100% !important; min-width: 0 !important; min-height: 3.25rem !important; margin: 0 !important; padding: .875rem 1rem !important; font-size: 1rem !important; border-radius: .75rem !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .under-cta { order: 0 !important; display: flex !important; flex-wrap: wrap; justify-content: center !important; gap: .5rem 1rem !important; margin: 0 !important; padding: 0 !important; font-size: .75rem !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .hero-includes { order: 0 !important; display: grid !important; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: start; width: 100% !important; max-width: none !important; gap: .75rem !important; margin: 0 !important; padding: 1rem 0 0 !important; border: 0 !important; border-top: var(--rule-thin) solid var(--color-rule-soft) !important; background: transparent !important; font-size: .8125rem !important; line-height: 1.5 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card .hero-includes::before { width: 1.5rem !important; height: 1.5rem !important; margin: .125rem 0 0 !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-schedule > * { grid-area: auto !important; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-card h2 { width: 100%; align-self: stretch; text-align: left; }
html body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .webinar-count::before { display: block !important; }

/* Approved ocean terrace photo; complete benefit descriptions stay below it. */
body[data-phone-benefits-variant="compact"] .phone-benefits-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 1.5rem 0 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
}
body[data-phone-benefits-variant="compact"] .phone-benefits-image + .phone-benefits-list {
  margin-top: 1rem;
}

/* Concept 01: the photograph and all four benefits share one quiet surface. */
body[data-phone-benefits-variant="compact"] .phone-benefits-panel {
  margin-top: 1.5rem;
  overflow: hidden;
  border: var(--rule-thin) solid var(--color-accent-soft);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
}
body[data-phone-benefits-variant="compact"] .phone-benefits-panel .phone-benefits-image {
  margin: 0;
  border: 0;
  border-radius: 0;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-panel .phone-benefits-list {
  margin: 0;
  padding: 0 1rem;
  gap: 0 1rem;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-panel article {
  padding: 1.25rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-panel article:nth-child(n+3) {
  border-top: var(--rule-thin) solid var(--color-rule);
}
body[data-phone-benefits-variant="compact"] .phone-benefits-panel .phone-benefits-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
  letter-spacing: .08em;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-label svg {
  flex: 0 0 1.375rem;
  width: 1.375rem;
  height: 1.375rem;
}
@media (max-width: 22rem) {
  body[data-phone-benefits-variant="compact"] .phone-benefits-panel .phone-benefits-list {
    padding-inline: .75rem;
    column-gap: .75rem;
  }
  body[data-phone-benefits-variant="compact"] .phone-benefits-panel .phone-benefits-label {
    gap: .375rem;
    letter-spacing: .03em;
  }
}

/* Acquisition review: keep reading surfaces clear in both language versions. */
html body[data-design-variant="hallmark"]:not([data-preview-page])::before, html body[data-design-variant="hallmark"]:not([data-preview-page])::after { display: none !important; }
html body[data-design-variant="hallmark"]:not([data-preview-page]) .review-language { position: absolute !important; }
html body[data-design-variant="hallmark"]:not([data-preview-page]) .scroll-arrival,
html body[data-design-variant="hallmark"]:not([data-preview-page]) .system.is-scroll-ready .system-head > *,
html body[data-design-variant="hallmark"]:not([data-preview-page]) .system.is-scroll-ready .system-item,
html body[data-design-variant="hallmark"]:not([data-preview-page]) .system.is-scroll-ready .system-icon img,
html body[data-design-variant="hallmark"]:not([data-preview-page]) .system.is-scroll-ready .system-close,
html body[data-design-variant="hallmark"]:not([data-preview-page]) .recognition.is-scroll-ready .recognition-card,
html body[data-design-variant="hallmark"]:not([data-preview-page]) .recognition.is-scroll-ready .recognition-close {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
@media (max-width: 48rem) {
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .topbar-inner { min-height: 3rem; padding-right: 7rem; }
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .hero-proof { margin-top: 2rem !important; }
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .hero-stats { row-gap: 0 !important; }
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .hero-stat { min-height: 4.5rem !important; padding: .875rem .5rem !important; }
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .hero-stat span { margin-top: .25rem !important; }
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .system:not(.toolkit-compact) .system-item {
    display: grid !important;
    grid-template-columns: 4rem minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-content: start;
    gap: .75rem 1rem !important;
    min-height: 0 !important;
    padding: 1rem !important;
  }
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .system:not(.toolkit-compact) .system-icon { width: 4rem !important; height: 4rem !important; }
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .system:not(.toolkit-compact) .system-item p { grid-column: 1 / -1; margin: 0 !important; }
}
@media (min-width: 64rem) {
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .hero-copy h1 { font-size: clamp(3rem, 4vw, 3.5rem) !important; }
}

/* Form v53: stable steps and distinct hover, selected and keyboard states. */
body[data-design-variant="hallmark"] .registration-dialog {
  height: min(780px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow: hidden;
}
body[data-design-variant="hallmark"] .registration-dialog .modal-inner {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body[data-design-variant="hallmark"] .registration-screen:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-inline: 4px;
  animation: none;
}
body[data-design-variant="hallmark"] .registration-question:focus {
  outline: none;
}
body[data-design-variant="hallmark"] .registration-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  position: sticky;
  bottom: 0;
  z-index: 1;
  flex-shrink: 0;
  margin-top: auto;
  padding-block: 16px 4px;
  background: var(--color-paper-2);
}
body[data-design-variant="hallmark"] .registration-nav > button {
  min-height: 52px !important;
  min-width: 0;
  order: 0;
  transform: none !important;
}
body[data-design-variant="hallmark"] .registration-dialog .registration-progress {
  padding-inline-end: 48px;
}
body[data-design-variant="hallmark"] .registration-dialog .registration-step-label {
  margin-top: 0;
}
body[data-design-variant="hallmark"] .registration-back {
  color: var(--color-ink);
}
body[data-design-variant="hallmark"] .registration-dialog .choice {
  flex-shrink: 0;
  transform: none !important;
  box-shadow: none !important;
}
body[data-design-variant="hallmark"] .registration-dialog .choice[aria-checked="false"] {
  border-color: var(--color-rule-soft) !important;
}
body[data-design-variant="hallmark"] .registration-dialog .choice span {
  color: var(--color-muted);
}
body[data-design-variant="hallmark"] .registration-dialog .choice::after {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font: 700 15px/1 var(--font-body);
}
body[data-design-variant="hallmark"] .registration-dialog .choice[aria-checked="true"] {
  border-color: var(--color-accent) !important;
  background: color-mix(in oklch, var(--color-accent) 12%, var(--color-paper-3)) !important;
}
body[data-design-variant="hallmark"] .registration-dialog .choice[data-choice-type="multiple"][aria-checked="true"]::after {
  content: "✓";
  background: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: none;
}
body[data-design-variant="hallmark"] .registration-dialog .choice[data-choice-type="single"][aria-checked="true"]::after {
  background: var(--color-accent);
  box-shadow: inset 0 0 0 5px var(--color-paper-3);
}
@media (hover: hover) and (pointer: fine) {
  body[data-design-variant="hallmark"] .registration-dialog .choice[aria-checked="false"]:hover {
    border-color: var(--color-accent-soft) !important;
  }
  body[data-design-variant="hallmark"] .registration-back:hover {
    border-color: var(--color-accent-soft);
    background: var(--color-paper-3);
  }
}
/* Final desktop pass: keep the reference scale after the later shared rules. */
@media (min-width: 49rem) {
  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) {
    width: 100% !important;
    max-width: none !important;
    padding-inline: clamp(3.5rem, 8vw, 4.3rem) !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-waiting-room {
    width: calc(100% + 5.5rem) !important;
    margin-inline: -2.75rem !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading .class-card-kicker {
    font-size: 1rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading h2 {
    font-size: clamp(3rem, 6.3vw, 3.375rem);
    text-wrap: balance;
    white-space: normal;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions b {
    font-size: 1.25rem !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda b {
    font-size: clamp(1.75rem, 3.6vw, 2rem) !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda small {
    font-size: clamp(1.25rem, 2.8vw, 1.5rem) !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-waiting-room {
    width: calc(100% + 5.5rem) !important;
    margin-inline: -2.75rem !important;
  }
}

@media (min-width: 49rem) {
  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) {
    width: 100% !important;
    max-width: none !important;
    padding-inline: clamp(3.5rem, 8vw, 4.3rem) !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-brand {
    overflow: hidden;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-brand img {
    width: 13.75rem;
    max-width: none;
    object-fit: contain;
    object-position: left center;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading .class-card-kicker {
    font-size: 1rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading h2 {
    font-size: clamp(3rem, 6.3vw, 3.375rem);
    text-wrap: balance;
    white-space: normal;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions b {
    font-size: 1.25rem !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda b {
    font-size: clamp(1.75rem, 3.6vw, 2rem) !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda small {
    font-size: clamp(1.25rem, 2.8vw, 1.5rem) !important;
  }
}


/* Public webinar waiting view: reference 01. Keep the reservation/countdown
 * flow intact and apply the reference treatment only to its waiting state. */
body[data-design-variant="hallmark"][data-preview-page="private-class"]:has(.private-class-shell[data-event-audience="public-webinar"] .class-waiting-room) .review-language {
  position: absolute !important;
  top: 2rem !important;
  right: max(calc((100% - 45.25rem) / 2 + 1.25rem), 1.25rem) !important;
  width: auto;
  margin: 0;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) {
  --class-max: 45.25rem;
  padding: 0 1.25rem 3rem !important;
  background: var(--color-paper) !important;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-atmosphere,
body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-room-name b,
body[data-design-variant="hallmark"][data-preview-page="private-class"]:has(.private-class-shell[data-event-audience="public-webinar"] .class-waiting-room) .review-language .hm-review-home {
  display: none !important;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-header {
  min-height: 5.5rem;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0;
  border: 0;
  border-bottom: var(--rule-thin) solid var(--color-rule-soft);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-brand {
  width: 3.5rem;
  height: 2rem;
  overflow: hidden;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-brand img {
  width: 3.5rem;
  height: 3.5rem;
  max-width: none;
  object-fit: cover;
  object-position: top center;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-room-name {
  display: flex;
  align-items: center;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-room-name span {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: .2em;
}

body[data-design-variant="hallmark"][data-preview-page="private-class"]:has(.private-class-shell[data-event-audience="public-webinar"] .class-waiting-room) .review-language > div {
  gap: .75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-design-variant="hallmark"][data-preview-page="private-class"]:has(.private-class-shell[data-event-audience="public-webinar"] .class-waiting-room) .review-language a {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--color-muted);
  font-family: var(--font-display);
  font-size: var(--text-sm) !important;
  font-weight: 650;
  letter-spacing: .04em;
}

body[data-design-variant="hallmark"][data-preview-page="private-class"]:has(.private-class-shell[data-event-audience="public-webinar"] .class-waiting-room) .review-language a + a::before {
  content: "/";
  display: inline-block;
  margin-right: .75rem;
  color: var(--color-ink);
}

body[data-design-variant="hallmark"][data-preview-page="private-class"]:has(.private-class-shell[data-event-audience="public-webinar"] .class-waiting-room) .review-language a[aria-current="page"] {
  color: var(--color-accent) !important;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-waiting-room {
  grid-template-areas:
    "arrival countdown"
    "audio audio"
    "host host"
    "utilities utilities"
    "agenda agenda"
    "resources resources"
    "prep prep";
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions {
  min-height: 4rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: var(--rule-thin) solid var(--color-rule-soft);
  background: transparent;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions button,
body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions button + button {
  min-height: 4rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.1rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-ink);
  font-size: var(--text-base);
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions button + button {
  border-left: var(--rule-thin) solid var(--color-rule-soft) !important;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions svg,
body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions small {
  display: none;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions b {
  margin: 0 !important;
  font-family: var(--font-body);
  font-size: var(--text-base) !important;
  font-weight: 500;
  letter-spacing: 0;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions i {
  color: var(--color-ink);
  font-size: 1.5rem;
  font-style: normal;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda {
  padding: 3.3rem 0 0;
  border: 0;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading {
  margin: 0 0 2.5rem;
  padding: 0 .6rem;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading .class-card-kicker {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .24em;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading h2 {
  margin: 1rem 0 .7rem;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
  font-weight: 720;
  line-height: 1.03;
  letter-spacing: -.055em;
  text-wrap: nowrap;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading p {
  font-size: clamp(1.15rem, 2.9vw, 1.55rem);
  line-height: 1.35;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda ol {
  margin: 0;
  padding: 0;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda li {
  min-height: 8.8rem !important;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: 3.25rem;
  padding: 1.7rem .6rem !important;
  border-bottom: var(--rule-thin) solid var(--color-rule-soft) !important;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda .class-agenda-number {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-right: 2.9rem;
  border-right: var(--rule-thin) solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -.04em;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda b {
  font-size: clamp(1.35rem, 3.1vw, 1.75rem) !important;
  font-weight: 720;
  line-height: 1.18;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda small {
  margin-top: .35rem !important;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem) !important;
  line-height: 1.35;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-resource-section {
  padding: 4.5rem .6rem 2rem;
  border: 0;
}

body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-resource-section .class-card-kicker {
  color: var(--color-ink);
  font-size: var(--text-sm);
  letter-spacing: .32em;
}

@media (max-width: 48rem) {
  body[data-design-variant="hallmark"][data-preview-page="private-class"]:has(.private-class-shell[data-event-audience="public-webinar"] .class-waiting-room) .review-language {
    top: 1.85rem;
    right: 1.5rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) {
    padding-inline: 1.1rem !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-header {
    min-height: 4.65rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-brand {
    width: 3.5rem;
    height: 2.4rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-brand img {
    width: 3.5rem;
    height: 3.5rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .private-class-room-name span {
    font-size: 1rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-waiting-room {
    grid-template-columns: 1fr;
    grid-template-areas:
      "arrival"
      "countdown"
      "audio"
      "host"
      "utilities"
      "agenda"
      "resources"
      "prep";
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions button,
  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions button + button {
    padding-inline: .8rem;
    font-size: var(--text-sm);
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions b {
    font-size: var(--text-sm) !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda {
    padding-top: 3rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading {
    margin-bottom: 1.8rem;
    padding: 0;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading h2 {
    font-size: clamp(2rem, 10vw, 2.45rem);
    text-wrap: balance;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading p {
    font-size: 1.05rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda li {
    min-height: 7.7rem !important;
    grid-template-columns: 3.55rem minmax(0, 1fr);
    gap: 1.35rem;
    padding: 1.25rem 0 !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda .class-agenda-number {
    padding-right: 1.1rem;
    font-size: 1.35rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda b {
    font-size: 1.25rem !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda small {
    font-size: 1rem !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-resource-section {
    padding: 3.5rem 0 1.5rem;
  }
}

/* Final desktop pass: keep the reference scale after the later shared rules. */
@media (min-width: 49rem) {
  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) {
    width: 100% !important;
    max-width: none !important;
    padding-inline: clamp(3.5rem, 8vw, 4.3rem) !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading .class-card-kicker {
    font-size: 1rem;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda-heading h2 {
    font-size: clamp(3rem, 6.3vw, 3.375rem);
    text-wrap: balance;
    white-space: normal;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-actions b {
    font-size: 1.25rem !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda b {
    font-size: clamp(1.75rem, 3.6vw, 2rem) !important;
  }

  body[data-design-variant="hallmark"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-public-webinar-agenda small {
    font-size: clamp(1.25rem, 2.8vw, 1.5rem) !important;
  }
}


/* Public-webinar mobile interaction: keep focus inside the control and reserve
 * the scroll-gutter space needed by the registration form. Keyboard focus stays
 * visible; a pointer-returned dialog opener has no duplicate outer halo. */
body[data-design-variant="hallmark"] .registration-screen:not([hidden]) {
  padding-inline: 8px;
}

body[data-design-variant="hallmark"] .registration-dialog .registration-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  border-color: var(--color-focus) !important;
  box-shadow: inset 0 0 0 var(--rule-strong) var(--color-focus) !important;
}

body[data-design-variant="hallmark"] .registration-dialog .choice[aria-checked="true"] {
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}

body[data-design-variant="hallmark"][data-input-modality="keyboard"] .registration-dialog .choice:focus-visible {
  outline: var(--rule-strong) solid var(--color-focus) !important;
  outline-offset: -4px !important;
}

body[data-design-variant="hallmark"][data-input-modality="pointer"] .registration-dialog .choice:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

body[data-design-variant="hallmark"][data-input-modality="pointer"] .private-class-shell[data-event-audience="public-webinar"]:has(.class-waiting-room) .class-utility-row button:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}

@media (max-width: 48rem) {
  body[data-design-variant="hallmark"] .registration-dialog {
    box-sizing: border-box;
    inset:
      max(16px, env(safe-area-inset-top))
      12px
      max(16px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: var(--radius-panel) !important;
  }
}

/* Compact landing hero: the approved rendered glass-candle artwork stays
 * behind the Hallmark foreground and fades before the video card. */
body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .hero-glass-chart {
  inset: 3.5rem 23% auto auto !important;
  inline-size: min(62rem, 72vw);
  block-size: min(46rem, 78vw);
  overflow: hidden;
  opacity: .26 !important;
  -webkit-mask-image: linear-gradient(to bottom, color-mix(in oklch, var(--color-ink) 100%, transparent) 0%, color-mix(in oklch, var(--color-ink) 100%, transparent) 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, color-mix(in oklch, var(--color-ink) 100%, transparent) 0%, color-mix(in oklch, var(--color-ink) 100%, transparent) 76%, transparent 100%);
}
body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .hero-glass-chart::after {
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-paper) 16%, transparent) 0%, transparent 56%);
}
body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .hero-glass-art {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-inline-size: none;
  transform: translate3d(0, var(--hero-glass-y, 0px), 0);
  transform-origin: center top;
  will-change: transform;
}
@media (max-width: 48rem) {
  body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .hero-glass-chart {
    inset: 5.75rem 0 auto 0 !important;
    inline-size: 100%;
    block-size: min(31rem, 125vw);
    opacity: .26 !important;
    -webkit-mask-image: linear-gradient(to bottom, color-mix(in oklch, var(--color-ink) 100%, transparent) 0%, color-mix(in oklch, var(--color-ink) 79%, transparent) 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, color-mix(in oklch, var(--color-ink) 100%, transparent) 0%, color-mix(in oklch, var(--color-ink) 79%, transparent) 72%, transparent 100%);
  }
  body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .hero-glass-chart::after {
    background: linear-gradient(90deg, color-mix(in oklch, var(--color-paper) 18%, transparent) 0%, transparent 56%);
  }
}

@media (min-width: 75rem) {
  body[data-design-variant="hallmark"][data-phone-benefits-variant="compact"] .hero-glass-chart {
    inset: 8rem 48% auto auto !important;
    inline-size: min(50rem, 58vw);
    block-size: 44rem;
  }
}

/* Compact learning video: the existing image is the immediate fallback. */
body[data-phone-benefits-variant="compact"] .phone-benefits-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0 0;
  overflow: hidden;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}
body[data-phone-benefits-variant="compact"] .phone-benefits-media .phone-benefits-image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: cover;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
  object-fit: contain;
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out);
}
body[data-phone-benefits-variant="compact"] .phone-benefits-media.is-ready .phone-benefits-video {
  opacity: 1;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-panel .phone-benefits-media {
  margin: 0;
  border: 0;
  border-radius: 0;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-media-control {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 1;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  margin: 0;
  padding: 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: 50%;
  background: color-mix(in oklch, var(--color-paper) 88%, transparent);
  color: var(--color-accent);
  box-shadow: none;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-media-control[hidden] {
  display: none;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-media-control svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-media-control path[hidden] {
  display: none;
}
body[data-phone-benefits-variant="compact"] .phone-benefits-media-control:hover {
  background: var(--color-paper);
}
body[data-phone-benefits-variant="compact"] .phone-benefits-media-control:focus-visible {
  outline: var(--rule-thick) solid var(--color-accent);
  outline-offset: var(--space-3xs);
}
@media (prefers-reduced-motion: reduce) {
  body[data-phone-benefits-variant="compact"] .phone-benefits-media:not(.is-opted-in) .phone-benefits-video {
    opacity: 0;
  }
}

body[data-design-variant="hallmark"] .system-icon .toolkit-gold-icon img,
body[data-design-variant="hallmark"] .class-resources .toolkit-gold-icon > img {
  width: 138% !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  transform: translate(-13.8%, -11%) !important;
  filter: none !important;
}

html body[data-design-variant="hallmark"]:not([data-preview-page]) .system:not(.toolkit-compact) .system-icon .toolkit-gold-icon {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}
html body[data-design-variant="hallmark"]:not([data-preview-page]) .system.is-scroll-ready .system-icon .toolkit-gold-icon > img {
  transform: translate(-13.8%, -11%) !important;
}
@media (max-width: 48rem) {
  html body[data-design-variant="hallmark"]:not([data-preview-page]) .system:not(.toolkit-compact) .system-icon:has(.toolkit-gold-icon) {
    grid-row: 1 !important;
    grid-column: 1 !important;
    margin: 0 !important;
  }
}

/* Approved 01 mobile terminal: dimensions derive from the reference card,
 * not the inherited phone mockup. One container scale keeps its proportions. */
@media (max-width:48rem) {
 body[data-phone-benefits-variant="compact"] .terminal { container-type:inline-size; border-radius:4cqw; }
 body[data-phone-benefits-variant="compact"] .terminal-inner { padding:0; }
 body[data-phone-benefits-variant="compact"] .terminal-top { height:12.4cqw; min-height:0; box-sizing:border-box; padding:0 4cqw; border-color:var(--color-rule-soft); }
 body[data-phone-benefits-variant="compact"] .terminal-top .terminal-product { display:block; color:var(--color-ink); font:750 4.4cqw/1 var(--font-body); letter-spacing:0; }
 body[data-phone-benefits-variant="compact"] .terminal-market { margin-left:auto; gap:1.5cqw; font:600 2.6cqw/1 var(--font-mono); letter-spacing:0; }
 body[data-phone-benefits-variant="compact"] .terminal-market i { width:1.8cqw; height:1.8cqw; }
 body[data-phone-benefits-variant="compact"] .terminal-scan,
 body[data-phone-benefits-variant="compact"] .xau-scanner .ph-top { display:none!important; }
 body[data-phone-benefits-variant="compact"] .xau-scanner { padding:0 3.4cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .track { width:100%; height:10.2cqw; margin:0; gap:2cqw; font:500 2.6cqw/1.2 var(--font-body); letter-spacing:0; text-transform:none; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .st { gap:1.5cqw; white-space:nowrap; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .st .pip { width:1.7cqw; height:1.7cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .trail { min-width:2cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .stage { display:block; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone { display:block; width:100%; padding:0; border:0!important; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .mkt { height:42.7cqw!important; margin:0; border-radius:2.2cqw; }
 body[data-phone-benefits-variant="compact"] .xau-status-strip { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); grid-template-rows:10cqw 1.6cqw; gap:0 2cqw; align-items:center; height:15.6cqw; box-sizing:border-box; padding-top:1.5cqw; margin:0; border-bottom:var(--rule-thin) solid var(--color-rule); }
 body[data-phone-benefits-variant="compact"] .xau-status-strip .xau-meter-panel { display:contents; }
 body[data-phone-benefits-variant="compact"] .xau-status-strip .xau-meter-head { grid-column:2; grid-row:1; display:flex; gap:1.2cqw; margin:0; line-height:1.2; justify-content:flex-end; }
 body[data-phone-benefits-variant="compact"] .xau-status-strip .xau-meter-head span { font:500 2.9cqw/1.2 var(--font-body); }
 body[data-phone-benefits-variant="compact"] .xau-status-strip .xau-meter-head strong { min-width:3ch; font:700 4cqw/1 var(--font-body); flex-shrink:0; }
 body[data-phone-benefits-variant="compact"] .xau-status-strip .xau-meter-track { grid-column:1/-1; grid-row:2; height:1.6cqw; }
 body[data-phone-benefits-variant="compact"] .xau-status-strip .loadline { display:none; }
 body[data-phone-benefits-variant="compact"] .xau-status-strip .pstat { grid-column:1; grid-row:1; block-size:auto; min-height:0; margin:0; padding:0; border:0; font:600 2.8cqw/1.25 var(--font-mono)!important; letter-spacing:0; gap:2cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .pstat .ico { width:4cqw; height:4cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .rows { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,13.2cqw); padding:0; margin:0; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .prow { display:grid; grid-template-columns:minmax(0,1fr); align-content:center; align-items:center; min-height:0; gap:1cqw; padding:2cqw; box-sizing:border-box; border-bottom:var(--rule-thin) solid var(--color-rule-soft); }
 body[data-phone-benefits-variant="compact"] .xau-scanner .prow:nth-child(odd) { border-right:var(--rule-thin) solid var(--color-rule-soft); }
 body[data-phone-benefits-variant="compact"] .xau-scanner .prow span { font:500 2.9cqw/1.2 var(--font-body)!important; letter-spacing:0; text-transform:none; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .prow b { text-align:left; font:700 3.9cqw/1.15 var(--font-body)!important; font-variant-numeric:tabular-nums; letter-spacing:0; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .prow b[data-kind="range"] { font-size:3.6cqw!important; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .prow b[data-kind="text"] { font-size:3.2cqw!important; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .state-cap { display:none; }
 body[data-phone-benefits-variant="compact"] .xau-benefits { display:block; margin:0 3.4cqw; border-top-color:var(--color-accent)!important; }
 body[data-phone-benefits-variant="compact"] .xau-benefit { min-height:13.8cqw; box-sizing:border-box; padding:2.4cqw .5cqw!important; grid-template-columns:7.4cqw minmax(0,1fr); gap:.75cqw 4.2cqw; align-content:center; border-bottom:var(--rule-thin) solid var(--color-rule); }
 body[data-phone-benefits-variant="compact"] .xau-benefit + .xau-benefit { border-top:0; }
 body[data-phone-benefits-variant="compact"] .xau-benefit-icon { width:7.4cqw; height:7.4cqw; align-self:center; border:var(--rule-thin) solid var(--color-accent); border-radius:1.8cqw; }
 body[data-phone-benefits-variant="compact"] .xau-benefit-icon svg { width:5cqw; height:5cqw; }
 body[data-phone-benefits-variant="compact"] .xau-benefit h3 { font:700 3.7cqw/1.25 var(--font-body)!important; margin:0!important; letter-spacing:0!important; }
 body[data-phone-benefits-variant="compact"] .xau-benefit p { font:400 3.1cqw/1.4 var(--font-body)!important; margin:0; }
 body[data-phone-benefits-variant="compact"] .xau-emphasis { display:block; border:0; padding:2.2cqw 2.6cqw 2.4cqw; }
 body[data-phone-benefits-variant="compact"] .record-cta .ghost { min-height:9.6cqw; height:9.6cqw; padding:1.5cqw 3cqw; font:700 3.3cqw/1.2 var(--font-body)!important; border-radius:2.2cqw; }
 body[data-phone-benefits-variant="compact"] .verified { margin-top:3cqw; gap:1.5cqw; font-size:2.35cqw!important; line-height:1.3; letter-spacing:.05em; }
 body[data-phone-benefits-variant="compact"] .verified svg { width:3.4cqw; height:3.4cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .scan { top:5cqw; bottom:2.4cqw; width:calc((100% - 14cqw) * .1); animation:compact-chart-sweep 2.4s linear infinite; animation-play-state:paused; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .scan.s2 { animation-delay:-.8s; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .scan.s3 { animation-delay:-1.6s; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .xau-status-strip { background:var(--color-ready-soft); border-radius:1.5cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat { grid-column:1/-1; grid-row:1/-1; justify-content:center; block-size:auto; padding:0; border:0; background:transparent; color:var(--color-ready)!important; font-size:3.6cqw!important; translate:none; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat::before { display:none; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat span,
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .pstat .ico::after { color:var(--color-ready)!important; border-color:currentColor!important; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .xau-meter-head,
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .xau-meter-track { visibility:hidden; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .prow:nth-child(3) { display:none; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .prow:nth-child(4) { grid-column:1/-1; grid-row:2; text-align:center; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .phone:has(.mkt.done) .prow:nth-child(4) b { text-align:center; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .win { inset:auto 12cqw 6cqw 3cqw; padding:2.5cqw; grid-template-columns:6cqw minmax(0,1fr); gap:1cqw 2cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .win em { font-size:2.8cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .win b { font-size:8cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .win .win-ring { width:6cqw; height:6cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .alert { left:1.5cqw; right:1.5cqw; top:5.4cqw; padding:3cqw; border-radius:2cqw; transform:translateY(-2cqw); transition:transform .28s var(--ease-out),opacity .22s ease,visibility 0s .28s; visibility:hidden; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .alert.on { transform:translateY(0); visibility:visible; transition-delay:0s; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-top { margin-bottom:1cqw; gap:1cqw; font:500 2.6cqw/1.25 var(--font-body); letter-spacing:0; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-top b { font:700 2.6cqw/1.25 var(--font-body); letter-spacing:0; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-h { font:750 3.8cqw/1.3 var(--font-body)!important; letter-spacing:0!important; margin-bottom:1cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-sym { font:500 2.6cqw/1.3 var(--font-body); letter-spacing:0; gap:1cqw; margin-bottom:1.5cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-sym .dir { font:500 2.6cqw/1.3 var(--font-body); letter-spacing:0; padding:.5cqw 1cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-rows { gap:1cqw; margin:1.5cqw 0 0; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-rows div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-rows span { font:500 2.6cqw/1.4 var(--font-body); letter-spacing:0; text-transform:none; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-rows b { font:700 3cqw/1.4 var(--font-body); font-variant-numeric:tabular-nums; white-space:nowrap; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .al-view { margin-top:1.5cqw; padding-top:1.5cqw; font:500 2.8cqw/1.4 var(--font-body); letter-spacing:0; gap:1cqw; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .delivery-pill { margin-top:1.5cqw; padding:1.5cqw; font:700 2.6cqw/1.3 var(--font-body); letter-spacing:0; text-transform:none; }
}
@keyframes compact-chart-sweep { from {transform:translateX(-100%)} to {transform:translateX(900%)} }
@media (prefers-reduced-motion:reduce) {
 body[data-phone-benefits-variant="compact"] .xau-scanner .scan { animation:none!important; }
 body[data-phone-benefits-variant="compact"] .xau-scanner .alert,
 body[data-phone-benefits-variant="compact"] .xau-scanner .state-cap { transition:none!important; }
}

@media (max-width:48rem) {
 body[data-phone-benefits-variant="compact"] .record-cta { gap:0; }
 body[data-phone-benefits-variant="compact"] .record-cta .ghost { min-height:44px; }
}

@media (max-width:48rem) {
 body[data-phone-benefits-variant="compact"] .xau-scanner .prow b.gold { color:var(--color-ink); }
}