/* Redesign draft: unslop polish pass. Overrides only; styles.css is untouched. */

/* Accent: saffron marks the primary action only */
.btn, .btn-small { border-radius: 8px; transition: background-color .15s ease-out, border-color .15s ease-out; }
.btn:active { transform: scale(.98); }
.stats-row { border-top: 1px solid var(--rule); }
.stats-row li { padding: 20px 24px; }
.price-list li:first-child { background: var(--tile); }
.price-list li { border-radius: 8px; }
.step { border-radius: 12px; }
.step:nth-child(2) { background: var(--navy); color: #f7f7f3; }
.step:nth-child(2)::after { background-image: url("/logo-mark-light.svg"); }
.step:nth-child(2) .step-num { background: #f7f7f3; color: var(--navy); }

/* Hero: one primary, one quiet link, centered against the portrait */
.hero { gap: 64px; padding-block: 48px 40px; }
.hero h1 { font-size: var(--fs-3xl); letter-spacing: -0.01em; max-width: 14ch; }
.hero .lede { margin-top: 24px; max-width: 34ch; }
.actions { gap: 24px; margin-top: 32px; }

/* The problem: the first line is the headline of the section */
#problem { padding-block: 24px 16px; }
#problem h2 { font-family: 'Instrument Sans', system-ui, sans-serif; font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
.problem { max-width: 44rem; margin-top: 12px; }
.problem p:first-child { font-family: 'Young Serif', Georgia, serif; font-size: var(--fs-2xl); line-height: 1.25; }
.problem p + p { margin-top: 16px; font-size: var(--fs-md); color: var(--muted); }

/* One-off inline margins moved onto the scale */
.method-links { margin-top: 28px; }
.policy-link { margin-top: 24px; }
.trio { gap: 40px; margin-top: 36px; }
.trio-item { padding-top: 16px; }
.trio-item p { margin-top: 8px; }

/* Footer headings: sentence case, no tracked uppercase */
.site-footer h2 { font-size: var(--fs-base); letter-spacing: 0; text-transform: none; color: #fff; font-weight: 500; }
.proof-line li + li::before { font-weight: 400; }

@media (max-width: 820px) {
  .hero { gap: 32px; padding-block: 32px 24px; }
  .hero h1 { max-width: none; }
}

/* Stacked hero (900px and under): the tile frame and the photo inside it must share one width.
   styles.css capped only the inner photo at 340px, so the tile border stretched across the page. */
@media (max-width: 900px) {
  .home .hero-photo { max-width: 380px; justify-self: start; margin-right: 0; }
  .hero-photo .star-frame { max-width: none; }
}

.tutors-method { margin-top: 16px; color: var(--muted); }

/* Trip programs: two kinds of trip under the featured one */
.programs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 48px; }
.programs-pair article { border-top: 3px solid var(--cobalt); padding-top: 16px; }
.programs-pair p { margin-top: 8px; color: var(--muted); }
.trip-cta { margin-top: 32px; }
@media (max-width: 820px) { .programs-pair { grid-template-columns: 1fr; gap: 28px; } }
.trip-respect { margin-top: 12px; }