/* Public marketing content. Loaded after the existing brand styles. */
html { scroll-padding-top: 100px; }

.offer-note {
  font-size: .9rem;
  line-height: 1.65;
}

.hero-offer { max-width: 38rem; margin: 18px 0 22px; color: var(--brand-copy); }
.hero-offer a { color: var(--brand-teal-dark); font-weight: 700; }
.product-hero .hero-actions .button-light:hover {
  color: var(--brand-navy);
  background: var(--brand-mint);
  border-color: var(--brand-teal);
}
.product-hero .product-window-wrap { min-height: 0; }
.product-hero .hero-product-window { width: 100%; transform: none; }
.product-hero .hero-product-window > img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.detail-hero .offer-note { max-width: 42rem; margin: 16px 0 0; color: #fff; }
.detail-hero-actions { margin-top: 24px; }
.detail-hero-actions > a:not(.button) { color: #fff; text-decoration: underline; }
.detail-hero .button-light { color: var(--brand-navy); background: var(--brand-gold); border-color: var(--brand-gold); }
.detail-hero .button-light:hover { background: #f5c968; border-color: #f5c968; }
.detail-hero-card strong { color: var(--brand-ink); }
.detail-hero-card span, .detail-hero-card p { color: var(--brand-copy); }
.detail-hero-card span::before { color: var(--brand-teal-dark); }

.workflow-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0 40px;
  padding: 0;
  list-style: none;
}

.workflow-preview li {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: 18px;
}

.workflow-number { display: block; margin-bottom: 18px; color: var(--brand-teal); font-weight: 700; }
.workflow-preview h3 { margin-bottom: 12px; font-size: 1.3rem; }
.workflow-preview p { margin-bottom: 16px; color: var(--brand-copy); }
.workflow-preview a { color: var(--brand-teal-dark); font-weight: 700; text-decoration: underline; }
.workflow-preview .workflow-screenshot {
  display: block;
  margin: auto 0 18px;
  overflow: hidden;
  border: 1px solid var(--brand-line);
  border-radius: 10px;
}
.workflow-screenshot img { display: block; width: 100%; height: auto; }
.walkthrough-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; }
.walkthrough-actions > a:not(.button) { color: var(--brand-teal-dark); font-weight: 700; text-decoration: underline; }
.walkthrough-note { margin: 18px 0 0; text-align: center; color: var(--brand-copy); }

@media (min-width: 1101px) {
  .product-tour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.trial-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin-top: 38px;
  padding: clamp(24px, 3vw, 38px);
  color: var(--brand-ink);
  background: var(--brand-mint);
  border: 1px solid var(--brand-line);
  border-radius: 20px;
}

.trial-panel h2 { margin: 10px 0 14px; font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.2; }
.trial-panel p { margin-bottom: 12px; }
.trial-panel .offer-note { margin-bottom: 0; color: var(--brand-copy); }
.trial-panel-actions { display: grid; gap: 16px; text-align: center; }
.trial-panel-actions > a:not(.button) { color: var(--brand-teal-dark); font-weight: 700; text-decoration: underline; }
.trial-panel .button { white-space: normal; }

.resource-preview { background: var(--brand-mint); }
.resource-preview-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 60px; align-items: center; }
.resource-preview h2 { max-width: 42rem; margin-bottom: 18px; font-size: clamp(2rem, 3.5vw, 3.2rem); line-height: 1.1; }
.resource-preview p { max-width: 40rem; margin-bottom: 22px; color: var(--brand-copy); }
.resource-preview ul { display: grid; gap: 18px; padding-left: 24px; font-size: 1.1rem; }

.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; }
.faq-layout h2 { margin-bottom: 20px; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.12; }
.faq-layout p { color: var(--brand-copy); line-height: 1.75; }
.faq-layout a { color: var(--brand-teal-dark); text-decoration: underline; }
.faq-list { border-top: 1px solid var(--brand-line); }
.faq-list details { padding: 22px 0; border-bottom: 1px solid var(--brand-line); }
.faq-list summary { cursor: pointer; color: var(--brand-ink); font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
.faq-list details p { margin: 16px 0 0; }
.faq-list summary:focus-visible { outline: 3px solid var(--brand-teal); outline-offset: 5px; }
.article-byline { margin-bottom: 28px; color: var(--brand-copy); font-size: .95rem; }
.guide-checklist { padding: 28px; border: 1px solid var(--brand-line); border-radius: 18px; background: var(--brand-mint); }
.practical-checklist { display: grid; gap: 14px; padding-left: 22px; margin: 20px 0; list-style: square; }
.record-example { margin: 24px 0; border-top: 1px solid var(--brand-line); }
.record-example > div { display: grid; grid-template-columns: minmax(130px, .45fr) minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--brand-line); }
.record-example dt { font-weight: 700; }
.record-example dd { margin: 0; color: var(--brand-copy); }

@media (max-width: 1080px) {
  html:not(.js-enabled) .site-header .header-inner { flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
  html:not(.js-enabled) .site-header .site-nav { position: static; display: grid; width: 100%; flex-basis: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; padding: 12px 0 0; }
  html:not(.js-enabled) .menu-button { display: none; }
  .trial-panel { grid-template-columns: 1fr; }
  .trial-panel-actions { justify-items: start; text-align: left; }
}

@media (max-width: 820px) {
  .workflow-preview, .resource-preview-grid, .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .workflow-preview { margin-top: 24px; }
  .resource-preview ul { font-size: 1rem; }
  .record-example > div { grid-template-columns: 1fr; gap: 6px; }
}

@media print {
  .site-header, .site-footer, .detail-sidebar, .trial-panel, .inline-cta, .detail-hero-actions, .detail-hero .offer-note { display: none !important; }
  .detail-layout, .detail-hero-grid { display: block; }
  .detail-hero-card { display: none; }
  body, .detail-hero, .guide-checklist, .mission-callout { color: #000 !important; background: #fff !important; }
  .detail-hero *, .detail-content * { color: #000 !important; }
  .detail-hero { padding: 20px 0; }
  .detail-content { padding: 20px 0; }
  .detail-section, .record-example > div { break-inside: avoid; }
  a { text-decoration: underline; }
}