/* =========================================================
   Inner pages, in the homepage's language.
   Loaded after styles.css and chrome.css on every page except the
   homepage. It restyles the blocks the generators already write
   (hero, lead, understand, stats, features, steps, trust, pricing,
   compare, faq, cta-banner, moments, the about, pricing, services,
   nurses and blog pages), so no page content changes.
   Same tokens as home.css: ink, creams, pinks, dusty rose, PT Serif
   and Satoshi, 25px radius and pills.
   ========================================================= */

:root {
  --rose: #e3adb4;
  --rose-ink: #c7848d;
  --pink-soft: #f9e7e7;
  --p-muted: rgba(17, 17, 17, 0.68);
  --r: 25px;
  --sec: clamp(64px, 9vw, 120px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

body { color: var(--ink); background: var(--cream-light); }
.shell { background: var(--cream-light); }
.shell p { text-wrap: pretty; }
.shell h1, .shell h2 { font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; }
html[lang^="zh"] .shell h1, html[lang^="zh"] .shell h2 { letter-spacing: 0.01em; }
html[lang^="zh"] .shell em, html[lang^="zh"] .shell i { font-style: normal; }

/* one rhythm for every section */
.shell > .section, .shell > section, .shell > main > section {
  padding: var(--sec) var(--gut);
  margin: 0;
  background: transparent;
  border-radius: 0;
}
.shell > section > *, .shell > .section > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

/* section heads, left-aligned like the homepage */
.block__head, .pricing__head, .services__head, .why__head {
  max-width: var(--wrap); margin: 0 auto clamp(28px, 4vw, 48px); text-align: left;
}
.block__head h2, .pricing__head h2, .services__head h2, .why__head h2, .faq > h2, .trust__inner h2 {
  font-size: clamp(30px, 4vw, 50px); line-height: 1.12; margin: 0;
}
.block__head p, .pricing__head p, .services__head p, .why__head p { margin: 16px 0 0; max-width: 60ch; color: var(--p-muted); font-size: 17px; }

/* ---------- buttons inside pages ---------- */
.shell .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  font: 500 16px/1.2 var(--sans); box-shadow: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease;
}
.shell .btn:hover { transform: none; }
.shell .btn:active { transform: scale(0.97); }
.shell .btn--primary { background: var(--ink); color: var(--cream-light); border: 1px solid var(--ink); }
.shell .btn--ghost { background: transparent; color: var(--ink); border: 1px solid rgba(17,17,17,0.22); }
@media (hover: hover) and (pointer: fine) {
  .shell .btn--primary:hover { background: #2a2a2a; }
  .shell .btn--ghost:hover { border-color: var(--ink); background: transparent; }
}
.hero__ctas, .cta-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__ctas > .cta-banner__actions { display: contents; }

/* ---------- hero (market, city and service pages) ---------- */
.shell > .hero { padding-top: clamp(40px, 6vw, 80px); }
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; max-width: var(--wrap); margin: 0 auto; }
.hero__title { font-size: clamp(40px, 5.4vw, 70px); line-height: 1.06; margin: 0; }
html[lang^="zh"] .hero__title { line-height: 1.18; font-size: clamp(36px, 4.8vw, 62px); }
.hero__sub, .hero__copy > p { margin: 22px 0 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 19px); color: var(--p-muted); }
.hero__ctas { margin-top: 30px; }
.hero__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 5 / 4; background: var(--cream); box-shadow: none; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; border-radius: 0; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 4 / 3; }
}

/* ---------- page hero (about, pricing, services) ---------- */
.page-hero { text-align: center; background: transparent; padding-bottom: clamp(32px, 5vw, 56px); }
.page-hero__inner { max-width: 900px; margin: 0 auto; }
.page-hero__title { font-size: clamp(42px, 6vw, 82px); line-height: 1.05; margin: 0; }
html[lang^="zh"] .page-hero__title { line-height: 1.18; font-size: clamp(36px, 5.2vw, 70px); }
.page-hero__sub { margin: 22px auto 0; max-width: 36em; font-size: clamp(17px, 1.5vw, 19px); color: var(--p-muted); }

/* ---------- lead: a paragraph you read slowly ---------- */
.lead { padding-top: 0; }
.lead__inner { max-width: 820px; margin: 0 auto; }
.lead__inner p { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.5; color: var(--ink); margin: 0 0 0.8em; }
.lead__inner p:last-child { margin-bottom: 0; color: var(--p-muted); }

/* ---------- understand: what families tell us ---------- */
.understand__list { list-style: none; padding: 0; margin: 0 auto; max-width: var(--wrap); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.understand__list li {
  position: relative; padding: 28px 0 0; border-top: 1px solid var(--line);
  font-family: var(--serif); font-size: clamp(19px, 1.8vw, 23px); line-height: 1.5; color: var(--ink);
  background: none; box-shadow: none; border-radius: 0;
}
.understand__list li::before { content: "“"; position: absolute; top: -2px; left: 0; font-size: 44px; line-height: 1; color: var(--rose); transform: translateY(-60%); background: var(--cream-light); padding-right: 8px; }
@media (max-width: 860px) { .understand__list { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- stats: a plain row, no boxes ---------- */
.stats { padding-top: 0; }
.stats__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 28px 24px 28px 0; background: none; box-shadow: none; border-radius: 0; text-align: left; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }
.stat__value { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; color: var(--ink); }
.stat__label { margin-top: 6px; font-size: 14px; color: var(--p-muted); }
@media (max-width: 760px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- features: a two-column list ---------- */
.feature__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.feature { padding: 26px 0 28px; border-top: 1px solid var(--line); background: none; box-shadow: none; border-radius: 0; }
.feature h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.25; margin: 0; }
.feature p { margin: 8px 0 0; color: var(--p-muted); font-size: 16px; }
@media (max-width: 960px) { .feature__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .feature__grid { grid-template-columns: 1fr; } }

/* ---------- steps: three numbered columns with a drawn rule ---------- */
.steps__grid { list-style: none; padding: 0; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); counter-reset: none; }
.step { position: relative; padding: 28px 0 0; background: none; box-shadow: none; border-radius: 0; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); opacity: 0.18; transform-origin: 0 50%; }
.step__num { display: block; width: auto; height: auto; margin: 0 0 18px; padding: 0; background: none; border-radius: 0; font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; color: var(--rose-ink); }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2vw, 26px); line-height: 1.25; margin: 0; }
.step p { margin: 10px 0 0; color: var(--p-muted); }
@media (max-width: 760px) { .steps__grid { grid-template-columns: 1fr; } }

/* ---------- trust: a heading beside its reason ---------- */
.trust__inner {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 4vw, 64px); align-items: start;
  background: var(--pink-soft); border-radius: var(--r); text-align: left; box-shadow: none;
}
.trust__inner p { margin: 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; color: rgba(17,17,17,0.8); }
@media (max-width: 760px) { .trust__inner { grid-template-columns: 1fr; } }

/* ---------- pricing tiles become one white card of rows ---------- */
.pricing__grid {
  max-width: 880px; margin: 0; display: block;
  padding: 8px clamp(20px, 3vw, 36px); border-radius: var(--r);
  background: #fff; box-shadow: 0 1px 0 var(--line), 0 30px 60px -36px rgba(17,17,17,0.22);
}
.pricing__tile {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px;
  padding: 20px 0; background: none; box-shadow: none; border-radius: 0; text-align: left;
}
.pricing__tile + .pricing__tile { border-top: 1px solid var(--line); }
.pricing__tile .label { font-family: var(--sans); font-style: normal; font-weight: 600; font-size: 17px; color: var(--ink); opacity: 1; }
.pricing__tile .time { grid-column: 1; margin: 2px 0 0; font-size: 14px; color: var(--p-muted); opacity: 1; }
.pricing__tile .amount { grid-row: 1 / 3; grid-column: 2; text-align: right; font-family: var(--serif); font-size: clamp(26px, 2.8vw, 34px); line-height: 1.1; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricing__tile .amount .currency { font-family: var(--sans); font-size: 14px; margin-right: 3px; vertical-align: 0.4em; opacity: 0.7; }
.pricing__tile .amount small { display: block; font-family: var(--sans); font-size: 13px; color: var(--p-muted); }

/* ---------- link lists: areas, further reading ---------- */
.area-list, .moments__grid { list-style: none; padding: 0; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.area-list li { border-top: 1px solid var(--line); }
.area-list a, .moment {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 4px; font-family: var(--serif); font-size: clamp(19px, 1.8vw, 22px); line-height: 1.3;
  color: var(--ink); text-decoration: none; background: none; border-radius: 0; box-shadow: none;
  transition: padding 240ms var(--ease-out);
}
.moment { border-top: 1px solid var(--line); }
.area-list a::after { content: "→"; font-family: var(--sans); }
.moment__arrow { font-family: var(--sans); transition: transform 240ms var(--ease-out); }
@media (hover: hover) {
  .area-list a:hover, .moment:hover { padding-left: 12px; }
  .moment:hover .moment__arrow { transform: translateX(3px); }
}
@media (max-width: 700px) { .area-list, .moments__grid { grid-template-columns: 1fr; } }

/* ---------- compare: plain beside Alma ---------- */
.compare__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare__col { padding: clamp(24px, 3vw, 40px); border-radius: var(--r); background: var(--cream-soft); box-shadow: none; border: 0; }
.compare__col--alma { background: var(--ink); color: var(--cream-light); }
.compare__col h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 18px; color: inherit; }
.compare__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.compare__col li { position: relative; padding-left: 28px; color: rgba(17,17,17,0.72); }
.compare__col li::before { content: "–"; position: absolute; left: 4px; color: rgba(17,17,17,0.4); }
.compare__col--alma li { color: rgba(248,245,239,0.86); }
.compare__col--alma li::before { content: "✓"; left: 0; color: var(--rose); }
@media (max-width: 760px) { .compare__grid { grid-template-columns: 1fr; } }

/* ---------- city pages: hospitals we know ---------- */
.why__head { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(20px, 4vw, 64px); align-items: start; }
.why__head p { margin: 0; max-width: none; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.75; }
@media (max-width: 760px) { .why__head { grid-template-columns: 1fr; } }

/* ---------- a founder's sentence ---------- */
.emo-quote { text-align: center; }
.emo-quote__text { max-width: 900px; margin: 0 auto; padding: 0; border: 0; font-family: var(--serif); font-size: clamp(26px, 3.2vw, 42px); line-height: 1.35; color: var(--ink); background: none; }
.emo-quote__text::before { content: ""; display: block; width: 44px; height: 1px; margin: 0 auto 28px; background: var(--rose-ink); }
.emo-quote__by { margin: 24px auto 0; font-size: 15px; color: var(--p-muted); }

/* ---------- questions ---------- */
.shell > .faq { background: var(--cream-soft); }
.faq > h2 { max-width: 820px; margin: 0 auto 28px; }
.faq__list { max-width: 820px; margin: 0 auto; }
.faq__item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; padding: 0; margin: 0; }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 4px; font: 500 18px/1.4 var(--sans); color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--cream-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition: transform 300ms var(--ease-out), background-color 200ms ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); background-color: var(--pink); }
.faq__item > p { margin: 0; padding: 0 4px 24px; color: var(--p-muted); max-width: 68ch; }
.faq__item[open] > p { animation: pg-open 360ms var(--ease-out); }
@keyframes pg-open { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- closing call to action: a photograph beside the ask ---------- */
.shell > .cta-banner {
  max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center;
  padding: var(--sec) var(--gut); background: transparent; border-radius: 0; box-shadow: none;
}
.shell > .cta-banner { position: static; isolation: auto; overflow: visible; min-height: 0; }
.cta-banner__media { position: relative; inset: auto; z-index: auto; height: auto; order: -1; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); box-shadow: none; }
.cta-banner__media::after { content: none; }
.cta-banner__media img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 50%; border-radius: 0; }
.cta-banner__copy { position: static; width: auto; margin: 0; padding: 0; justify-self: stretch; background: none; border-radius: 0; box-shadow: none; }
.cta-banner__copy > p { opacity: 1; line-height: 1.65; }
.cta-banner__actions .btn { padding: 12px 24px; font-size: 16px; }
.cta-banner__copy h2 { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.08; margin: 0; }
.cta-banner__copy > p { margin: 18px 0 0; max-width: 34em; color: var(--p-muted); font-size: 17px; }
.cta-banner__copy .hero__ctas, .cta-banner__copy > .cta-banner__actions { margin-top: 28px; }
@media (max-width: 860px) {
  .shell > .cta-banner { display: grid; grid-template-columns: 1fr; }
  .cta-banner__media { height: auto; }
  .cta-banner__copy { margin: 0; }
}

/* ---------- about ---------- */
.philosophy { text-align: center; }
.philosophy__text { max-width: 900px; margin: 0 auto; font-family: var(--serif); font-size: clamp(24px, 3vw, 38px); line-height: 1.4; color: var(--ink); }
.img-trio { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; align-items: center; max-width: var(--wrap); }
.img-trio figure { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--cream); }
.img-trio img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.img-trio__side { aspect-ratio: 3 / 4; }
.img-trio__center { aspect-ratio: 4 / 5; }
.about-story { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: center; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; background: transparent; }
.about-story__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.about-story__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.about-story__copy .emo-quote__text { text-align: left; margin: 0; }
.about-story__copy .emo-quote__text::before { margin: 0 0 24px; }
.about-story__copy .emo-quote__by { text-align: left; margin-left: 0; }
.values__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.value { padding: 26px 0; border-top: 1px solid var(--line); background: none; box-shadow: none; border-radius: 0; text-align: left; }
.value__icon { display: none; }
.value h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 2vw, 26px); margin: 0; }
.value p { margin: 8px 0 0; color: var(--p-muted); }
.why-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; }
.why-split__card { padding: 0; background: none; box-shadow: none; }
.why-split__list { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 12px; }
.why-split__list li { position: relative; padding-left: 30px; }
.why-split__list li::before { content: "✓"; position: absolute; left: 0; color: var(--rose-ink); font-weight: 600; }
.why-split__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.why-split__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
@media (max-width: 860px) {
  .img-trio { grid-template-columns: 1fr 1fr; } .img-trio__center { grid-column: 1 / -1; order: -1; aspect-ratio: 4 / 3; }
  .about-story, .why-split { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: 1fr; }
}

/* ---------- pricing page ---------- */
.price-tiers__grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.price-tier { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 32px 28px; border-radius: var(--r); background: #fff; box-shadow: 0 1px 0 var(--line), 0 30px 60px -36px rgba(17,17,17,0.22); border: 0; text-align: left; }
.price-tier--feat { background: var(--ink); color: var(--cream-light); }
.price-tier__label { font-weight: 600; font-size: 17px; }
.price-tier__time, .price-tier__note { font-size: 14px; color: var(--p-muted); }
.price-tier--feat .price-tier__time, .price-tier--feat .price-tier__note { color: rgba(248,245,239,0.7); }
.price-tier__amount { margin: 14px 0 6px; font-family: var(--serif); font-size: clamp(40px, 4.4vw, 54px); line-height: 1; }
.price-tier__amount .currency { font-family: var(--sans); font-size: 16px; margin-right: 4px; vertical-align: 0.9em; }
.price-tier__tag { position: absolute; top: -13px; left: 28px; padding: 4px 14px; border-radius: 999px; background: var(--pink); color: var(--ink); font-size: 13px; font-weight: 600; }
.price-tier .btn { margin-top: auto; width: 100%; }
.price-tier--feat .btn--primary { background: var(--cream-light); color: var(--ink); border-color: var(--cream-light); }
.price-tiers__foot { max-width: 680px; margin: 24px auto 0; text-align: center; font-size: 15px; color: var(--p-muted); }
.included__grid { list-style: none; padding: 0; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.included__item { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); background: none; box-shadow: none; border-radius: 0; }
.included__check { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: var(--ink); font-size: 12px; }
@media (max-width: 860px) { .price-tiers__grid, .included__grid { grid-template-columns: 1fr; } }

/* ---------- services index ---------- */
.svc-hub__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.svc-hub__col { display: contents; }
.svc-hub__media { display: none; }
.svc-card { position: relative; display: block; padding: 26px 56px 26px 0; border-top: 1px solid var(--line); background: none; box-shadow: none; border-radius: 0; text-decoration: none; color: var(--ink); }
.svc-card__icon { display: none; }
.svc-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 28px); margin: 0; }
.svc-card p { margin: 8px 0 0; color: var(--p-muted); }
.svc-card__more { position: absolute; right: 0; top: 50%; margin-top: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(17,17,17,0.18); font-size: 0; transition: background-color 240ms ease, transform 240ms var(--ease-out); }
.svc-card__more::after { content: "→"; font-size: 16px; position: absolute; inset: 0; display: grid; place-items: center; }
@media (hover: hover) { .svc-card:hover .svc-card__more { background: var(--ink); color: var(--cream-light); transform: translateX(2px); } }
@media (max-width: 760px) { .svc-hub__grid { grid-template-columns: 1fr; } }

/* ---------- nurses page ---------- */
.benefits__grid, .process__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.benefit-card, .process-card { padding: 26px 0; border-top: 1px solid var(--line); background: none; box-shadow: none; border-radius: 0; text-align: left; }
.benefit-card .num, .process-card .num { font-family: var(--serif); font-style: italic; font-size: 36px; line-height: 1; color: var(--rose-ink); background: none; width: auto; height: auto; margin: 0 0 14px; }
.benefit-card h3, .process-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.9vw, 24px); margin: 0; }
.benefit-card p, .process-card p { margin: 8px 0 0; color: var(--p-muted); }
.requirements__grid, .testimonial__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.requirements__media, .testimonial__media { border-radius: var(--r); overflow: hidden; }
.requirements__media img, .testimonial__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.shell > .why { background: transparent; }
@media (max-width: 860px) { .benefits__grid, .process__grid { grid-template-columns: 1fr; } .requirements__grid, .testimonial__grid { grid-template-columns: 1fr; } }

/* ---------- blog listing ---------- */
.blog-hero { text-align: center; max-width: 760px; margin-left: auto !important; margin-right: auto !important; padding-top: clamp(48px, 7vw, 88px) !important; padding-bottom: 24px !important; }
.blog-tools { padding-top: 8px !important; }
.blog-hero h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.06; }
.blog-tools { padding-top: 0; padding-bottom: 24px; }
.blog-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3vw, 40px) 24px; }
.post-card { display: flex; flex-direction: column; background: none; box-shadow: none; border-radius: 0; text-decoration: none; color: var(--ink); }
.post-card__media { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--cream); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
@media (hover: hover) { .post-card:hover .post-card__media img { transform: scale(1.04); } }
.post-card__body { padding: 18px 2px 0; background: none; }
.post-card__meta { font-size: 13px; color: var(--p-muted); }
.post-card__title { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.8vw, 23px); line-height: 1.3; margin: 8px 0 0; }
.post-card__excerpt { margin: 10px 0 0; color: var(--p-muted); font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card__more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; }
@media (max-width: 960px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- a blog post ---------- */
.post-wrap { padding-top: clamp(32px, 5vw, 64px); }
.post { max-width: 760px; margin: 0 auto; }
.post__crumbs { font-size: 14px; color: var(--p-muted); }
.post__crumbs a { color: var(--p-muted); text-decoration: none; }
.post__meta { margin-top: 18px; font-size: 14px; color: var(--p-muted); }
.post__title { margin: 12px 0 0; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.1; }
html[lang^="zh"] .post__title { line-height: 1.25; }
.post__cover { margin: clamp(28px, 4vw, 48px) calc(-1 * clamp(0px, 8vw, 120px)) 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--cream); }
.post__cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.post__body { margin-top: clamp(32px, 4vw, 48px); }
.post__p, .post__body > p { font-size: 18px; line-height: 1.85; color: rgba(17,17,17,0.86); margin: 0 0 1.2em; }
.post__h2 { margin: 2em 0 0.6em; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.2; }
.post__h3 { margin: 1.6em 0 0.5em; font-size: 20px; }
.post__list { padding-left: 1.2em; font-size: 18px; line-height: 1.8; color: rgba(17,17,17,0.86); }
.post__author { margin-top: 48px; padding: 28px; border-radius: var(--r); background: var(--cream-soft); box-shadow: none; }
@media (max-width: 860px) { .post__cover { margin-left: 0; margin-right: 0; } }

/* =========================================================
   Motion. chrome.js marks blocks with [data-rise] and adds .is-in
   when they arrive. Text rises and clears its blur; photographs open
   from the bottom edge and settle from a slight zoom; step rules draw
   left to right. Reduce motion keeps the fades and drops the travel.
   ========================================================= */
html.js [data-rise] {
  opacity: 0; transform: translateY(28px); filter: blur(8px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
html.js [data-rise].is-in { opacity: 1; transform: none; filter: none; }

html.js [data-open] { clip-path: inset(18% 0 0 0 round var(--r)); transition: clip-path 1200ms var(--ease-out); transition-delay: var(--rd, 0ms); }
html.js [data-open] img { transform: scale(1.14); transition: transform 1600ms var(--ease-out); transition-delay: var(--rd, 0ms); }
html.js [data-open].is-in { clip-path: inset(0 0 0 0 round var(--r)); }
html.js [data-open].is-in img { transform: none; }

html.js .step::before { transform: scaleX(0); transition: transform 1000ms var(--ease-in-out) 150ms; }
html.js .step.is-in::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html.js [data-rise] { transform: none; filter: none; transition: opacity 600ms ease; }
  html.js [data-open] { clip-path: none; transition: none; }
  html.js [data-open] img { transform: none; transition: none; }
  html.js .step::before { transform: none; transition: none; }
  .faq__item[open] > p { animation: none; }
}

/* No photographs of faces on the site: the blog covers all show faces, so
   the listing reads as text and posts open on their title. */
.post-card__media, .post__cover { display: none !important; }
.post-card { padding-top: 22px; border-top: 1px solid var(--line); }
.post-card__body { padding-top: 0; }