/* Sales & marketing systems: Penguin's light, editorial service-page treatment. */
.sm-wrap { width: min(calc(100% - 80px), 1120px); margin-inline: auto; }
.sm-eyebrow { margin: 0 0 18px; color: var(--pm-glacier-blue); font: 600 var(--pm-type-eyebrow) var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

.sm-hero { padding: 72px 0 76px; background: var(--pm-snow); border-bottom: 1px solid var(--color-border); }
.sm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(42px, 6vw, 84px); align-items: center; }
.sm-hero h1 { max-width: 15ch; margin: 0 0 22px; font-size: clamp(46px, 4.6vw, 64px); font-weight: 500; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
.sm-hero-lead { max-width: 44ch; margin: 0 0 30px; color: var(--pm-slate); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; }
.sm-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sm-hero-actions .btn-primary, .sm-hero-actions .sp-btn-ghost { white-space: nowrap; }
.sm-hero-figure, .sm-practice-figure { margin: 0; }
.sm-hero-figure { overflow: hidden; background: #e9f7ff; border: 1px solid var(--color-border); }
.sm-hero-figure img, .sm-practice-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

.sm-problem { padding: clamp(64px, 7vw, 96px) 0; background: var(--pm-white); }
.sm-problem-inner { max-width: 890px; }
.sm-problem h2, .sm-section-head h2, .sm-practice-copy h2, .sm-delivery h2 { font-size: clamp(36px, 3.4vw, 50px); line-height: 1.16; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
.sm-problem h2 { max-width: 19ch; margin-bottom: 18px; }
.sm-problem p { max-width: 65ch; color: var(--pm-slate); font-size: var(--pm-type-lead); line-height: 1.65; }

.sm-examples { padding: clamp(72px, 8vw, 112px) 0; background: var(--pm-secondary-surface); }
.sm-section-head { max-width: 760px; margin-bottom: 42px; }
.sm-section-head h2 { margin-bottom: 14px; }
.sm-section-head > p:last-child { color: var(--pm-slate); font-size: var(--pm-type-body); line-height: 1.6; }
.sm-example-list { border-top: 1px solid var(--pm-steel); }
.sm-example { display: grid; grid-template-columns: minmax(250px, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 7vw, 110px); padding: 26px 0 30px; border-bottom: 1px solid var(--color-border); }
.sm-example h3 { max-width: 20ch; font-size: clamp(22px, 2.1vw, 29px); line-height: 1.25; letter-spacing: -.025em; font-weight: 500; }
.sm-example strong { display: block; margin-bottom: 7px; color: var(--pm-ink); font-size: var(--pm-type-body); font-weight: 500; line-height: 1.4; }
.sm-example p { max-width: 60ch; color: var(--pm-slate); font-size: var(--pm-type-body-sm); line-height: 1.65; }

.sm-in-practice { padding: clamp(72px, 8vw, 112px) 0; background: var(--pm-white); }
.sm-practice-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(42px, 7vw, 94px); align-items: center; }
.sm-practice-copy h2 { max-width: 17ch; margin-bottom: 20px; }
.sm-practice-copy p { max-width: 54ch; color: var(--pm-slate); font-size: var(--pm-type-body); line-height: 1.7; }
.sm-practice-copy p + p { margin-top: 16px; }
.sm-practice-figure img { background: #e9f7ff; border: 1px solid var(--color-border); }
.sm-practice-figure figcaption { margin-top: 11px; color: var(--pm-slate); font-size: var(--pm-type-caption); line-height: 1.45; }

.sm-delivery { padding: clamp(72px, 8vw, 112px) 0; background: var(--pm-secondary-surface); }
.sm-delivery-heading { max-width: 780px; }
.sm-delivery h2 { max-width: 20ch; margin-bottom: 16px; }
.sm-delivery-heading p { max-width: 65ch; color: var(--pm-slate); font-size: var(--pm-type-body); line-height: 1.65; }
.sm-delivery-points { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(24px, 4vw, 54px); list-style: none; margin: 48px 0 30px; padding: 0; }
.sm-delivery-points li { padding-top: 20px; border-top: 2px solid var(--pm-glacier-blue); }
.sm-delivery-points strong { color: var(--pm-ink); font-size: var(--pm-type-title); font-weight: 500; line-height: 1.3; }
.sm-delivery-points p { max-width: 38ch; margin-top: 10px; color: var(--pm-slate); font-size: var(--pm-type-body-sm); line-height: 1.6; }
.sm-text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--pm-glacier-blue); font: 600 var(--pm-type-caption) var(--font-mono); letter-spacing: .04em; text-transform: uppercase; text-underline-offset: 4px; }
.sm-text-link:hover { color: var(--pm-glacier-deep); }
.sm-hero-actions .sp-btn-ghost:focus-visible, .sm-text-link:focus-visible { outline: 2px solid var(--pm-glacier-blue); outline-offset: 3px; }
.sm-hero-actions .sp-btn-ghost:active { transform: translateY(1px); }
main .cta-field-input::placeholder, main .cta-field-textarea::placeholder { color: #e7f8ff; opacity: 1; }
main .cta-field-optional, main .cta-trust span { color: rgba(255, 255, 255, .86); }
main .cta-field-input:focus-visible, main .cta-field-select:focus-visible, main .cta-field-textarea:focus-visible { border-bottom-width: 2px; }

/* This service page keeps motion to direct interaction; the shared reveal utility is static here. */
main .reveal { opacity: 1; transform: none; transition: none; }
@media (max-width: 900px) {
  .sm-hero-grid { gap: 32px; }
  .sm-hero h1 { font-size: clamp(40px, 5vw, 52px); }
  .sm-hero-lead { font-size: 16px; }
}
@media (max-width: 760px) {
  .sm-wrap { width: min(calc(100% - 40px), 560px); }
  .sm-hero { padding: 58px 0 66px; }
  .sm-hero-grid, .sm-practice-grid { grid-template-columns: 1fr; gap: 36px; }
  .sm-hero h1 { font-size: clamp(42px, 9vw, 56px); }
  .sm-hero-figure { max-width: 560px; }
  .sm-example { grid-template-columns: 1fr; gap: 11px; padding: 23px 0 26px; }
  .sm-example h3 { max-width: none; }
  .sm-delivery-points { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }
  .sm-delivery-points li { padding-top: 16px; }
}
@media (max-width: 440px) {
  .sm-hero-actions .btn-primary, .sm-hero-actions .sp-btn-ghost { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}