/* Сторінки практик — ті самі токени й правила, що й головна (DESIGN-2.md): чорне тло, великі тонкі заголовки,
   бурштинові підписи, фото з радіусом 24px, дві колонки без карток і рамок. */
.detail { --gap: var(--spacing-96, 96px); }
.detail .back { display: inline-flex; gap: var(--spacing-12, 12px); margin-bottom: var(--spacing-36, 36px); font-size: var(--text-nav-label, 14px); line-height: var(--leading-nav-label, 1.2); font-weight: var(--font-weight-semibold, 600); letter-spacing: var(--tracking-nav-label, .35px); text-transform: uppercase; color: var(--color-ash-gray, #9a9a9a); text-decoration: none; }
.detail .back:hover { color: var(--color-bone-white, #fff); }

.d-hero { padding: var(--spacing-60, 60px) 0 var(--spacing-120, 120px); }
.d-hero .wrap, .d-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.d-two { align-items: start; }
.d-hero-text { display: flex; flex-direction: column; align-items: flex-start; }
.d-hero h1 { margin: var(--spacing-18, 18px) 0 var(--spacing-30, 30px); font-size: clamp(var(--text-heading, 48px), 6.4vw, var(--text-heading-lg, 78px)); line-height: var(--leading-heading-lg, 1.1); letter-spacing: -0.04em; font-weight: var(--font-weight-regular, 400); }
.d-hero .eyebrow { margin: 0 0 var(--spacing-18, 18px); }
.d-hero .lead { max-width: 520px; margin: 0; font-size: var(--text-body, 18px); line-height: var(--leading-body, 1.5); font-weight: var(--font-weight-extralight, 200); color: var(--color-bone-white, #fff); }
.d-hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-24, 24px); margin-top: var(--spacing-30, 30px); }
.d-hero .cta .btn-line svg { width: 18px; height: 18px; }

.d-photo { margin: 0; border-radius: var(--radius-cards, 24px); overflow: hidden; aspect-ratio: 4 / 3; background: color-mix(in srgb, var(--color-bone-white, #fff) 5%, var(--color-void, #000)); }
.d-photo img { width: 100%; height: 100%; object-fit: cover; }
.d-hero .d-photo img { border-radius: var(--radius-cards, 24px); view-transition-name: svc-photo; }  /* сюди «перелітає» фото з картки на головній */

.detail h2 { margin: var(--spacing-18, 18px) 0 var(--spacing-30, 30px); font-size: clamp(var(--text-heading-sm, 42px), 4.4vw, 60px); line-height: var(--leading-heading, 1.1); letter-spacing: -0.04em; font-weight: var(--font-weight-regular, 400); }
.detail .d-copy p:not(.eyebrow), .d-head p:not(.eyebrow) { max-width: 560px; margin: 0 0 var(--spacing-18, 18px); font-size: var(--text-body, 18px); line-height: var(--leading-body, 1.5); color: var(--color-silver-mist, #bdbdbd); font-weight: var(--font-weight-extralight, 200); }
.d-head { max-width: 760px; margin-bottom: var(--spacing-60, 60px); }
.d-what .d-copy { max-width: 760px; }  /* «Що це» — лише текст: друге фото прибрано (Alex, 29.09); фото практики — тільки на першому екрані */

.d-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-60, 60px) var(--gap); }
.d-benefits li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--spacing-18, 18px); row-gap: var(--spacing-6, 6px); align-items: start; }
.d-ic { grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: var(--radius-full, 9999px); display: grid; place-items: center; color: var(--color-saffron-spark, #ffb829); background: color-mix(in srgb, var(--color-saffron-spark, #ffb829) 10%, transparent); }
.d-ic svg { width: 22px; height: 22px; }
.d-benefits h3 { margin: 10px 0 0; font-size: var(--text-heading-2xs, 24px); line-height: var(--leading-heading-2xs, 1.25); letter-spacing: var(--tracking-heading-2xs, -.48px); font-weight: var(--font-weight-regular, 400); }
.d-benefits p { margin: 0; font-size: var(--text-body, 18px); line-height: var(--leading-body, 1.5); color: var(--color-silver-mist, #bdbdbd); font-weight: var(--font-weight-extralight, 200); }
.d-evidence { max-width: 760px; margin: var(--spacing-96, 96px) 0 0; font-size: var(--text-body, 18px); line-height: var(--leading-body, 1.5); color: var(--color-silver-mist, #bdbdbd); font-weight: var(--font-weight-extralight, 200); }
.d-evidence span { display: block; margin-bottom: var(--spacing-12, 12px); font-size: var(--text-nav-label, 14px); line-height: var(--leading-nav-label, 1.2); font-weight: var(--font-weight-semibold, 600); letter-spacing: var(--tracking-nav-label, .35px); text-transform: uppercase; color: var(--color-saffron-spark, #ffb829); }

.d-limits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-18, 18px); }
.d-limits li { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: var(--spacing-18, 18px); font-size: var(--text-body, 18px); line-height: var(--leading-body, 1.5); color: var(--color-bone-white, #fff); font-weight: var(--font-weight-extralight, 200); }
.d-limits li::before { content: ""; width: 6px; height: 6px; margin-top: .65em; border-radius: 50%; background: var(--color-saffron-spark, #ffb829); }

.d-more .eyebrow { margin: 0 0 var(--spacing-30, 30px); }
.d-others { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-36, 36px) var(--spacing-24, 24px); }
.d-others a { display: grid; gap: var(--spacing-12, 12px); text-decoration: none; color: var(--color-bone-white, #fff); }
.d-others img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-cards, 24px); transition: transform .6s cubic-bezier(.2, .75, .15, 1); }
.d-others a:hover img { transform: scale(1.03); }
.d-others span { font-size: var(--text-body, 18px); line-height: var(--leading-heading-2xs, 1.25); }
.d-others a:hover span { color: var(--color-saffron-spark, #ffb829); }

/* «Детальніше» на головній */
.more { display: inline-flex; gap: 8px; margin-top: var(--spacing-12, 12px); font-size: var(--text-nav-label, 14px); line-height: var(--leading-nav-label, 1.2); font-weight: var(--font-weight-semibold, 600); letter-spacing: var(--tracking-nav-label, .35px); text-transform: uppercase; color: var(--color-saffron-spark, #ffb829); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 860px) {
  .detail { --gap: var(--spacing-36, 36px); }
  .d-hero { padding: var(--spacing-24, 24px) 0 var(--spacing-60, 60px); }
  .d-hero .wrap, .d-two { grid-template-columns: minmax(0, 1fr); }
  .d-hero h1 { font-size: var(--text-heading, 48px); }
  .detail h2 { font-size: 34px; }
  .d-benefits { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-36, 36px); }
  .d-evidence { margin-top: var(--spacing-60, 60px); }
  .d-others { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24, 24px) var(--spacing-18, 18px); }
  .d-others span { font-size: 15px; }
}
@media (max-width: 400px) {
  .d-hero h1 { font-size: 40px; }
}