/* 微笑管家 · 样式层（Token 值来源 docs/design-tokens.css，逐条一致；此处仅裁剪注释以适配 4Mbps 体积预算） */
.carousel { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-warm); border: 1px solid var(--border); }
.carousel__viewport { display: flex; transition: transform var(--motion-slow) var(--ease-standard); }
.carousel__slide { position: relative; min-width: 100%; aspect-ratio: 4 / 3; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__caption { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-6); background: linear-gradient(to top, rgba(31, 27, 22, 0.78), rgba(31, 27, 22, 0)); color: var(--accent-on); }
.carousel__caption h2 { font-size: var(--text-xl); color: var(--accent-on); }
.carousel__caption p { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.88); }
.carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.9); color: var(--fg); cursor: pointer; }
.carousel__nav--prev { left: var(--space-3); }
.carousel__nav--next { right: var(--space-3); }
.carousel__dots { position: absolute; inset-inline: 0; bottom: var(--space-3); display: flex; gap: var(--space-2); justify-content: center; }
.carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.55); cursor: pointer; }
.carousel__dot[aria-selected="true"] { background: var(--accent-on); width: 20px; }
.hero { background: var(--bg); }
.hero__grid { display: grid; gap: var(--space-10); align-items: center; grid-template-columns: 1fr; padding-block: var(--space-10); }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: 7fr 5fr; padding-block: var(--space-16); } }
.hero__title { font-size: var(--text-4xl); letter-spacing: var(--tracking-display); }
@media (min-width: 1024px) { .hero__title { font-size: var(--text-5xl); } }
.hero__lede { margin: var(--space-5) 0 0; max-width: 46ch; font-size: var(--text-lg); color: var(--muted); line-height: var(--leading-relaxed); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.hero__marks { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.hero__mark { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-emphasize); color: var(--fg-2); letter-spacing: var(--tracking-cn-sm); }
.hero__mark .icon { color: var(--accent); }
.hero__visual { order: -1; }
@media (min-width: 1024px) { .hero__visual { order: 0; } }
.hero__illust { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.svc-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .svc-grid { grid-template-columns: repeat(5, 1fr); } }
.svc-grid--home > .svc-card:nth-child(n + 6) { display: none; }
.svc-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); color: var(--fg); text-decoration: none; transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.svc-card:hover { transform: translateY(-2px); border-color: var(--card-hover-border); box-shadow: var(--card-hover-shadow); text-decoration: none; }
.svc-card__name { font-size: var(--text-lg); font-weight: var(--fw-announce); }
.svc-card__desc { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.svc-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--accent); font-weight: var(--fw-emphasize); }
.stats { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat__num { font-family: var(--font-num); font-size: var(--text-3xl); font-weight: var(--fw-announce); color: var(--fg); font-variant-numeric: tabular-nums; }
.stat__label { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.feature { display: grid; gap: var(--space-8); align-items: center; padding-block: var(--space-8); border-top: 1px solid var(--border-soft); }
.feature:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) { .feature { grid-template-columns: 1fr 1fr; gap: var(--space-12); } .feature--reverse .feature__media { order: 2; } }
.feature__media { margin: 0; }
.feature__media img, .feature__media svg { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }
.feature__body h3 { font-size: var(--text-2xl); }
.feature__body p { margin: var(--space-4) 0 0; color: var(--muted); line-height: var(--leading-relaxed); }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0; padding: 0; }
.chip-list li { padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--fg-2); background: var(--surface); }
.pros { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pros { grid-template-columns: repeat(3, 1fr); } }
.pro { padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pro h3 { margin-top: var(--space-4); font-size: var(--text-lg); }
.pro p { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--muted); }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .flow { grid-template-columns: repeat(5, 1fr); } }
.flow__step { position: relative; padding-top: var(--space-6); border-top: 2px solid var(--border); }
.flow__step--active { border-top-color: var(--accent); }
.flow__no { font-family: var(--font-num); font-size: var(--text-xl); font-weight: var(--fw-announce); color: var(--meta); font-variant-numeric: tabular-nums; }
.flow__step--active .flow__no { color: var(--accent); }
.flow__step h3 { margin-top: var(--space-2); font-size: var(--text-base); }
.flow__step p { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--muted); }
.area-wrap { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1024px) { .area-wrap { grid-template-columns: 5fr 7fr; gap: var(--space-12); } }
.area-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.area-tag { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg-2); font-size: var(--text-sm); text-decoration: none; transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.area-tag::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--accent-bright); }
.area-tag:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.quick-book { display: grid; gap: var(--space-8); align-items: center; padding: var(--space-8); background: var(--accent-soft); border: 1px solid var(--orange-100); border-radius: var(--radius-lg); }
@media (min-width: 1024px) { .quick-book { grid-template-columns: 1fr 1.2fr; padding: var(--space-10); } }
.quick-book h2 { font-size: var(--text-2xl); }
.quick-book__form { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .quick-book__form { grid-template-columns: 1fr 1fr; } }
.faq { display: grid; gap: var(--space-3); }
@media (min-width: 1024px) { .faq { grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-8); align-items: start; } }
.faq details { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); font-size: var(--text-base); font-weight: var(--fw-emphasize); color: var(--fg); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform var(--motion-fast) var(--ease-standard); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq__a { padding: 0 var(--space-5) var(--space-5); color: var(--muted); line-height: var(--leading-relaxed); }
.page-head { padding-block: var(--space-10) var(--space-6); background: var(--surface-warm); border-bottom: 1px solid var(--border); }
.page-head h1 { font-size: var(--text-4xl); }
.page-head p { margin: var(--space-4) 0 0; max-width: 62ch; color: var(--muted); font-size: var(--text-lg); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--text-sm); color: var(--muted); list-style: none; padding: 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.anchor-tabs { position: sticky; top: var(--header-h); z-index: var(--z-raised); background: var(--surface); border-bottom: 1px solid var(--border); }
@media (min-width: 1024px) { .anchor-tabs { top: var(--header-h-lg); } }
.anchor-tabs__list { display: flex; gap: var(--space-2); overflow-x: auto; padding-block: var(--space-2); list-style: none; margin: 0; }
.anchor-tabs__list a { display: inline-flex; align-items: center; white-space: nowrap; min-height: 44px; padding-inline: var(--space-4); border-bottom: 2px solid transparent; color: var(--fg-2); font-weight: var(--fw-emphasize); text-decoration: none; }
.anchor-tabs__list a:hover { color: var(--accent); text-decoration: none; }
.service-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
/* 服务卡片 v2（PAGE-DESIGNS 页面 2）：整卡单一 <a>，仅封面+名称+简介+价格；详情移入 /services/{id} */
.service-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; color: var(--fg); text-decoration: none; transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.service-card:hover { transform: translateY(-2px); border-color: var(--card-hover-border); box-shadow: var(--card-hover-shadow); text-decoration: none; }
.service-card:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--card-hover-shadow); }
.service-card__cover { position: relative; aspect-ratio: 16 / 10; background: var(--accent-soft); }
.service-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-card__flag { position: absolute; top: var(--space-3); left: var(--space-3); }
.service-card__dur { position: absolute; top: var(--space-3); right: var(--space-3); }
.service-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: var(--space-4) var(--space-5) var(--space-5); }
.service-card__name { font-size: var(--text-lg); font-weight: var(--fw-announce); margin: 0; }
.service-card__summary { margin: 0; font-size: var(--text-sm); color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.service-card__foot { margin-top: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); }
.service-card__price { flex: 1; min-width: 0; font-family: var(--font-num); font-size: var(--text-sm); color: var(--accent); font-weight: var(--fw-emphasize); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.service-card__more { flex: none; display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--accent); font-weight: var(--fw-emphasize); }
/* 封面空值兜底图形（列表卡片与详情页头图共用同一套样式，禁止两套；绝不出破图/空 src） */
.cover-seat { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: var(--accent-soft); background-image: radial-gradient(var(--accent-soft-2) 1.5px, transparent 1.5px), radial-gradient(var(--accent-soft-2) 1.5px, transparent 1.5px); background-size: 28px 28px; background-position: 0 0, 14px 14px; }
.cover-seat__tile { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--accent-soft-2); color: var(--accent); }
.section-cta { display: flex; justify-content: center; margin-top: var(--space-6); }
.detail-content :first-child { margin-top: 0; }
.detail-content h3, .detail-content h4 { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-2); }
.detail-content ul, .detail-content ol { padding-left: var(--space-6); margin: 0 0 var(--space-4); }
.detail-content li { margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--fg-2); }
.item-facts { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4); background: var(--surface-warm); border-radius: var(--radius-md); }
.item-facts dt { font-size: var(--text-xs); color: var(--meta); letter-spacing: var(--tracking-cn-sm); }
.item-facts dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--fg-2); }
[id^="cat-"] { scroll-margin-top: calc(var(--header-h) + 64px); }
@media (min-width: 1024px) { [id^="cat-"] { scroll-margin-top: calc(var(--header-h-lg) + 64px); } }
.detail-block { border-top: 1px solid var(--border-soft); }
.detail-block:first-of-type { border-top: 0; }
.detail-block__title { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); font-size: var(--text-lg); }
/* 服务详情页 /services/{id}（PAGE-DESIGNS 页面 2B）：左 8 正文 + 右 4 侧栏，<1024px 单列 */
.detail-layout { display: grid; gap: var(--space-10); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .detail-layout { grid-template-columns: 8fr 4fr; gap: var(--space-12); } }
.detail-hero { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .detail-hero { grid-template-columns: 5fr 7fr; align-items: center; } }
.detail-hero__cover { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; background: var(--accent-soft); }
.detail-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-hero__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.detail-hero__title h1 { font-size: var(--text-3xl); }
.detail-hero__price { margin: var(--space-3) 0 0; font-family: var(--font-num); font-size: var(--text-xl); color: var(--accent); font-weight: var(--fw-announce); }
.detail-hero__summary { margin: var(--space-4) 0 0; font-size: var(--text-lg); color: var(--muted); line-height: var(--leading-relaxed); }
.detail-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.detail-body { margin-top: var(--space-8); }
.detail-side { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .detail-side { position: sticky; top: calc(var(--header-h-lg) + var(--space-6)); } }
.detail-side__title { font-size: var(--text-base); letter-spacing: var(--tracking-cn-sm); }
.detail-side__phone { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-lg); font-weight: var(--fw-announce); }
.detail-side__phone a { color: var(--fg); text-decoration: none; }
.detail-side__phone a:hover { color: var(--accent); }
.detail-side__row { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--muted); }
.side-links { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; }
.side-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: var(--space-1) 0; border-bottom: 1px solid var(--border-soft); color: var(--fg-2); font-size: var(--text-sm); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard); }
.side-links li:last-child a { border-bottom: 0; }
.side-links a:hover { color: var(--accent); }
.side-links .icon { color: var(--meta); }
@media print { .detail-side, .section-cta { display: none; } }
.detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.detail-list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--fg-2); }
.detail-list .icon { margin-top: 3px; color: var(--success); }
.detail-list--no .icon { color: var(--muted); }
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: step; }
.step-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); color: var(--fg-2); }
.step-list li::before { counter-increment: step; content: counter(step); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-family: var(--font-num); font-size: var(--text-xs); font-weight: var(--fw-announce); }
.prose { max-width: 72ch; }
.prose p { line-height: var(--leading-relaxed); color: var(--fg-2); }
.team-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.avatar-initial { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-weight: var(--fw-announce); }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.timeline li { display: flex; gap: var(--space-4); }
.timeline .avatar-initial { width: 40px; height: 40px; font-size: var(--text-sm); }
.cert-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.cert-card__seal { width: 56px; height: 56px; border: 2px solid var(--accent); border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.contact-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: repeat(4, 1fr); } }
.contact-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.contact-card__label { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--meta); }
.contact-card__value { font-size: var(--text-lg); font-weight: var(--fw-announce); }
.contact-card__value a { color: var(--fg); text-decoration: none; }
.contact-card__value a:hover { color: var(--accent); }
.legal-index { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 768px) { .legal-index { grid-template-columns: repeat(3, 1fr); } }
.legal-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: flex-end; margin-bottom: var(--space-6); }
.legal-doc article { max-width: none; }
.legal-doc h2 { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
@media (min-width: 1024px) { .legal-doc h2 { scroll-margin-top: calc(var(--header-h-lg) + var(--space-6)); } }