/* Components shared across section layouts; layout composition stays colocated. */
.reading-column { width: min(800px,calc(100% - 2 * var(--page-gutter))); margin-inline: auto; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-9); margin-bottom: var(--space-11); }
.section-heading > div { max-width: 800px; }
.section-heading h2 { margin: 0; font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--font-weight-medium); }
.section-heading p { max-width: 640px; margin: var(--space-6) 0 0; font-size: var(--text-section-body); line-height: var(--leading-body); color: var(--color-text-secondary); }
.section-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--touch-target); flex-shrink: 0; font-size: var(--text-small); line-height: var(--leading-body); font-weight: var(--font-weight-medium); text-decoration: none; }
.section-link::after { content: ''; width: 16px; height: 16px; background: url('../hero/arrow-right.svg') center/16px 16px no-repeat; }
.section-link:hover { color: var(--color-action-text); text-decoration: underline; }
.section-prose { font-size: var(--text-section-body); line-height: var(--leading-body); }
.section-prose > :first-child { margin-top: 0; }
.section-prose > :last-child { margin-bottom: 0; }
.section-prose h2 { margin-block: var(--space-9) var(--space-6); font-size: var(--text-h4); line-height: var(--leading-h4); font-weight: var(--font-weight-medium); }
.section-prose h3 { font-size: var(--text-h5); line-height: var(--leading-h5); }
.section-prose a { color: var(--color-action-text); }
.section-prose img { max-width: 100%; }
.feature-items { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-8); }
.feature-items--grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.feature-items li { display: flex; align-items: flex-start; gap: var(--space-7); min-width: 0; }
.feature-icon { display: block; width: 35px; height: 36px; object-fit: contain; flex-shrink: 0; }
.feature-items h3 { font-size: var(--text-base); line-height: var(--leading-body); margin: 0 0 var(--space-3); font-weight: var(--font-weight-medium); }
.feature-items p { margin: 0; font-size: var(--text-section-body); line-height: var(--leading-body); }
.card-number { font-size: var(--text-h4); line-height: var(--leading-h4); color: var(--color-action-text); font-weight: var(--font-weight-medium); flex-shrink: 0; }
.content-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-10); font-size: var(--text-small); color: var(--color-text-secondary); }
.content-breadcrumbs a { text-decoration: none; }
.content-breadcrumbs [aria-current] { color: var(--color-action-text); }
.accordion-list { display: grid; gap: var(--space-5); }
.accordion-list details { border: 1px solid var(--color-outline); border-radius: var(--radius-input); overflow: hidden; background: var(--color-white); }
.accordion-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); cursor: pointer; padding: var(--space-7) var(--space-8); min-height: var(--touch-target); font-weight: var(--font-weight-medium); }
.accordion-list summary::-webkit-details-marker { display: none; }
.accordion-list summary, .service-group summary { -webkit-user-select: none; user-select: none; }
.accordion-list summary::after { content: ''; width: 16px; height: 16px; flex-shrink: 0; background: url('../hero/arrow-right.svg') center/16px 16px no-repeat; transform: rotate(90deg); }
.accordion-list details[open] summary { background: var(--color-pink-soft); }
.accordion-list details[open] summary::after { transform: rotate(-90deg); }
.carousel-track { display: flex; gap: var(--space-8); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: var(--space-5); }
.carousel-track > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.carousel-controls { display: flex; justify-content: center; align-items: center; gap: var(--space-6); margin-top: var(--space-8); font-size: var(--text-small); }
.carousel-controls[hidden] { display: none; }
.carousel-controls button { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-outline); border-radius: var(--radius-circle); width: 44px; height: 44px; cursor: pointer; background: var(--color-white); }
.carousel-controls button img { width: 16px; height: 16px; }
.carousel-controls button:first-child img { transform: rotate(180deg); }
.carousel-controls button:disabled { opacity: .4; cursor: default; }
.comparison { position: relative; isolation: isolate; aspect-ratio: 520/464; border-radius: var(--radius-card); overflow: hidden; --comparison-position: 50%; }
.comparison__after, .comparison__before { position: absolute; inset: 0; }
.comparison__before { clip-path: inset(0 calc(100% - var(--comparison-position)) 0 0); }
.comparison__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.comparison__label { position: absolute; top: var(--space-5); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); background: var(--color-ink); color: var(--color-white); font-size: var(--text-small); }
.comparison__label--before { left: var(--space-5); }
.comparison__label--after { right: var(--space-5); background: var(--color-pink); color: var(--color-ink); }
.comparison__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ew-resize; opacity: 0; z-index: 2; }
.comparison:focus-within { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.comparison__handle { position: absolute; top: 50%; left: var(--comparison-position); transform: translate(-50%,-50%); width: 40px; height: 40px; display: grid; place-content: center; border-radius: var(--radius-circle); background: var(--color-white); color: var(--color-ink); pointer-events: none; box-shadow: 0 0 0 1px var(--color-outline); }
.comparison__handle::before { content: ''; position: absolute; width: 2px; height: 1500px; background: var(--color-white); left: 50%; top: -750px; z-index: -1; }
.listing-pagination { margin-top: var(--space-10); }
.listing-pagination ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin: 0; padding: 0; }
.listing-pagination a, .listing-pagination span { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: var(--radius-input); padding-inline: var(--space-5); text-decoration: none; }
.listing-pagination [aria-current] { background: var(--color-pink); color: var(--color-ink); }
.listing-pagination a:hover { background: var(--color-pink-soft); }
@media(max-width:767px) { .section-heading { flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-8); } .section-heading h2 { font-size: var(--text-h4); line-height: var(--leading-h4); } .feature-items--grid { grid-template-columns: 1fr; } }
.article-header { padding-block: var(--section-space); }
.article-header__content { max-width: 872px; margin-inline: auto; }
.article-header h1 { font-size: var(--text-title); line-height: var(--leading-title); margin: 0 0 var(--space-8); font-weight: var(--font-weight-medium); }
.article-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--text-small); color: var(--color-text-secondary); }
.article-header__meta a { text-decoration: none; color: var(--color-action-text); }
.article-native-body { padding-block: var(--space-8); }
.article-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); border-top: 1px solid var(--color-outline); padding-block: var(--space-9); }
.article-tags, .article-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--text-small); }
.article-tags a { padding: var(--space-2) var(--space-5); border: 1px solid var(--color-focus); color: var(--color-action-text); border-radius: var(--radius-pill); text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.article-share a, .article-share button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; min-width: 44px; border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); background: var(--color-pink-soft); border: 0; cursor: pointer; font: inherit; }
.article-share [hidden] { display: none; }
.article-share img { display: block; width: 20px; height: 20px; filter: invert(1); }
.not-found { display: flex; align-items: center; flex-direction: column; text-align: center; padding-block: var(--space-13); }
.not-found__image { display: block; width: min(452px,100%); height: 400px; object-fit: contain; }
.not-found h1 { font-size: var(--text-title); line-height: var(--leading-title); margin: var(--space-8) 0 0; }
.not-found p { max-width: 600px; }
@media(max-width:767px) { .article-meta { flex-direction: column; } .not-found__image { height: 300px; } }
.site-main--article .section-prose { font-size: var(--text-base); }
.rich-text-section--lead .section-prose > p:first-child { font-size: var(--text-h6); line-height: var(--leading-h6); }
@media(max-width:767px) { .rich-text-section--lead .section-prose > p:first-child { font-size: var(--text-base); line-height: var(--leading-body); } }

.comparison__handle img { display: block; width: 40px; height: 40px; }

.article-header { margin-bottom: var(--space-11); }
.article-header .content-breadcrumbs { line-height: var(--leading-caption-short); margin-bottom: var(--space-11); flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
.article-header .content-breadcrumbs [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.article-header h1 { font-size: var(--text-display); line-height: var(--leading-display-tight); margin-bottom: var(--space-7); }
.article-header__meta { align-items: center; gap: var(--space-6); font-size: var(--text-base); }
.article-header__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article-header__byline { display: flex; align-items: center; gap: var(--space-6); }
.article-header__byline a { font-weight: var(--font-weight-medium); color: var(--color-ink); }
.article-header__byline time { display: flex; gap: var(--space-6); }
@media(max-width:767px) {
  .article-header { margin-bottom: 0; }
  .article-header .content-breadcrumbs { line-height: var(--leading-body); margin-bottom: var(--space-8); }
  .article-header h1 { font-size: var(--text-h3); line-height: var(--leading-h3); margin-bottom: var(--space-8); }
  .article-header__byline { display: grid; gap: var(--space-1); }
  .article-header__byline time { font-size: var(--text-small); gap: var(--space-1); }
}

.comparison__label { top: var(--space-7); padding: var(--space-1) var(--space-5); font-size: var(--text-small); line-height: var(--leading-caption-short); font-weight: var(--font-weight-medium); }
.comparison__label--before { left: var(--space-8); }
.comparison__label--after { right: var(--space-7); }

/* Figma's 404 artwork is a wide 672×272 illustration. */
.not-found { padding-block: var(--space-11); }
.not-found__image { width: min(672px,100%); height: 272px; }
.not-found h1 { margin-top: var(--space-6); font-size: var(--text-display); line-height: var(--leading-display-tight); font-weight: var(--font-weight-medium); }
.not-found p { max-width: 714px; margin: var(--space-6) 0 var(--space-9); color: var(--color-text-secondary); }
.not-found .button { gap: var(--space-5); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6); border-radius: var(--radius-pill); }
.not-found .button::after { content: ''; width: 36px; height: 36px; border-radius: var(--radius-circle); background: var(--color-white) url('../hero/arrow-up-right.svg') center/20px 20px no-repeat; }
@media(max-width:767px) {
  .not-found { padding-block: var(--space-13) var(--space-15); }
  .not-found__image { height: 160px; }
  .not-found h1 { margin-top: var(--space-8); font-size: var(--text-h3); line-height: var(--leading-h3); }
  .not-found p { margin-block: var(--space-8); }
}

/* Desktop assemblies have a 48px outer gap; the Services index composes adjacent sections. */
@media(min-width:768px) {
  .site-main:not(.site-main--article):not(.site-main--services) > .alignfull + .alignfull { margin-top: var(--space-11); }
  .site-main--services > .hero + .services-section { margin-top: var(--space-11); }
  .home .site-main { margin-bottom: var(--space-11); }
  .site-main--prices { padding-top: var(--space-11); margin-bottom: var(--space-11); }
  .site-main--blog { padding-top: var(--space-4); margin-bottom: var(--space-4); }
}