.feature-detail-fallback { margin-top: 2rem; }
.feature-detail-fallback > details { border-bottom: 1px solid var(--line); padding-block: 1rem; }
.feature-detail-fallback > details > summary { cursor: pointer; font-size: var(--lead); font-weight: 600; }
.js-dialog-ready .feature-detail-fallback { display: none; }
.feature-dialog { padding: 0; border: 0; border-radius: 32px; width: 86vw; max-width: none; max-height: 90dvh; background: #fff; color: var(--ink); overflow: hidden; opacity: 0; transform: translateY(24px) scale(.98); transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.feature-dialog[open] { display: flex; flex-direction: column; }
.feature-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.feature-dialog.is-closing { opacity: 0; transform: translateY(16px) scale(.985); transition-duration: 260ms; }
.feature-dialog::backdrop { background: #02091aca; backdrop-filter: blur(7px); opacity: 0; transition: opacity 360ms ease; }
.feature-dialog.is-visible::backdrop { opacity: 1; }
.feature-dialog.is-closing::backdrop { opacity: 0; transition-duration: 260ms; }
.dialog-toolbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.6rem 1.1rem 3.5vw; background: #fff; border-bottom: 1px solid #e7edf7; }
.dialog-toolbar p { font-size: var(--caption); color: #627b9f; letter-spacing: .07em; }
.dialog-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #edf2f8; color: #374c70; font-size: 27px !important; line-height: 1; display: grid; place-items: center; }
.dialog-close:hover { background: #dbe5f3; }
.dialog-content { overflow-y: auto; overscroll-behavior: contain; padding: 3.7vw; }
.dialog-content > [data-detail-body] { max-width: 100%; }
.detail-header { max-width: 45em; margin-bottom: 2.3rem; }
.detail-header .home-kicker { margin-bottom: .9rem !important; }
.detail-header h3 { font-size: var(--card-title); line-height: 1.3; font-weight: 700; letter-spacing: -.035em; margin-bottom: 1rem; }
.detail-header .home-lead { max-width: 35em; }
.detail-header.detail-hero { position: relative; isolation: isolate; overflow: hidden; max-width: none; min-height: clamp(280px, 24vw, 420px); padding: clamp(2rem, 3.5vw, 4rem); border-radius: 24px; background: #e5efff; }
.detail-hero-image { position: absolute; z-index: 0; right: 0; bottom: 6%; left: auto; top: auto; width: min(54%, 44rem); max-height: 88%; height: auto; object-fit: contain; object-position: right bottom; opacity: .38; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%); mask-image: linear-gradient(90deg, transparent 0%, #000 52%); }
.detail-hero--expertise .detail-hero-image,
.detail-hero--production .detail-hero-image,
.detail-hero--publishing .detail-hero-image { bottom: 0; max-height: 100%; }
.detail-hero::before { content: none; }
.detail-hero-copy { position: relative; z-index: 1; max-width: 38em; }
.detail-hero h3 { font-size: clamp(1.75rem, 2.8vw, 3.5rem); max-width: 14em; text-wrap: balance; }
.detail-hero h3 span { white-space: nowrap; }
.detail-hero .home-lead { max-width: 24em; color: #536b93; }
.detail-header.detail-hero--blue { color: white; background: #0268fb; }
.detail-hero--blue .home-kicker, .detail-hero--blue .home-lead { color: #d2e1ff; }
.detail-intro { max-width: 48em; margin-bottom: 2.5rem !important; }
.detail-demo-stack { display: grid; gap: 1.5rem; min-width: 0; }
.detail-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5vw; align-items: start; }
.detail-steps { padding: 0; margin: 0; list-style: none; counter-reset: detail-step; }
.detail-steps li { padding: 1.15rem 0 1.15rem 2.5rem; position: relative; border-bottom: 1px solid var(--line); }
.detail-steps li:first-child { padding-top: 0; }
.detail-steps li::before { counter-increment: detail-step; content: "0" counter(detail-step); position: absolute; left: 0; color: #7b91b0; font-family: Arial,sans-serif; font-size: var(--caption); padding-top: .35rem; }
.detail-steps strong { font-size: var(--lead); font-weight: 600; line-height: 1.4; }
.detail-steps p { margin-top: .6rem; color: var(--muted); font-size: var(--body); }
.detail-demo { padding: 1.6rem; background: #edf4ff; border-radius: 24px; font-size: var(--body); }
.detail-demo-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; margin-bottom: 1.1rem; color: #5375aa; font-size: var(--caption); }
.detail-demo h4 { font-size: var(--lead); font-weight: 600; margin: 0 0 .6rem; }
.detail-demo .demo-intro { color: #647c9f; margin-bottom: 1.2rem; font-size: var(--caption); }
.demo-choice { display: block; width: 100%; background: #fff; border: 1px solid #d8e4f6; border-radius: 12px; text-align: left; padding: 1rem; margin-top: .6rem; font-size: var(--caption) !important; line-height: 1.55; }
.demo-choice[aria-pressed="true"] { border-color: #1252ea; box-shadow: 0 0 0 1px #1252ea; color: #1444a4; }
.demo-choice small { display: block; font-size: var(--caption); color: #657c9e; margin-bottom: .25rem; }
.demo-feedback { margin-top: 1.1rem; padding: 1rem; border-radius: 12px; background: #ddeaff; color: #2d568e; font-size: var(--caption); line-height: 1.65; }
.demo-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.demo-tabs button { background: #fff; border: 1px solid #cad9ef; padding: .6rem .9rem; border-radius: 99px; font-size: var(--caption); min-height: 44px; }
.demo-tabs button[aria-pressed="true"] { background: #124edd; border-color: #124edd; color: white; }
.demo-sheet { background: #fff; padding: 1.3rem; border-radius: 14px; border: 1px solid #dce6f5; }
.demo-sheet p { font-size: var(--caption); color: #526889; }
.demo-sheet p + p { margin-top: .75rem; }
.demo-sheet strong { display: block; font-size: var(--lead); line-height: 1.5; margin-bottom: 1rem; color: #183c80; }
.demo-outline { margin: 0; padding-left: 1.1rem; font-size: var(--caption); color: #426088; }
.demo-outline li { margin-block: .6rem; }
.demo-note { margin-top: 1rem; padding: .85rem 1rem; background: #fff7ec; border-left: 3px solid #ed8730; color: #775f43; font-size: var(--caption); }
.demo-date-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1rem; }
.demo-date-row button { flex: 1; min-width: 80px; border: 1px solid #cedbf0; border-radius: 12px; background: white; padding: .9rem .6rem; font-size: var(--caption); }
.demo-date-row button[aria-pressed="true"] { color: #fff; background: #104cd8; border-color: #104cd8; }
.demo-date-row strong { display: block; font-size: var(--lead); margin-bottom: .25rem; }
.demo-schedule { width: 100%; border: 0; border-radius: 12px; padding: .9rem; font-size: var(--caption); background: #114ada; color: #fff !important; min-height: 48px; }
.demo-reset { border: 0; background: transparent; text-decoration: underline; font-size: var(--caption); min-height: 44px; padding: .5rem 0; color: #496da6 !important; }
.detail-control { margin-top: 2.5rem; padding: 1.5rem 1.7rem; background: #f6f8fc; border-radius: 18px; max-width: 60em; }
.detail-control strong { display: block; font-size: var(--lead); margin-bottom: .6rem; }
.detail-control p { color: var(--muted); font-size: var(--body); }
.detail-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; padding-bottom: 1rem; }
@media (max-width: 1000px) { .detail-layout { grid-template-columns: 1fr; gap: 2rem; } .feature-dialog { width: 90vw; } }
@media (max-width: 767px) {
 .feature-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; transform: translateY(22px); }
 .dialog-toolbar { padding: max(.8rem, env(safe-area-inset-top)) 1.2rem .8rem; }
 .dialog-toolbar p { font-size: .875rem; }
 .dialog-content { padding: 1.6rem 6vw max(1.6rem,env(safe-area-inset-bottom)); }
 .detail-header { margin-bottom: 1.7rem; }
 .detail-header .home-lead { font-size: 1.125rem; }
 .detail-header.detail-hero { min-height: 0; padding: 1.5rem 1.5rem 9.5rem; border-radius: 20px; }
 .detail-hero h3 { font-size: 1.75rem; }
 .detail-hero .home-kicker { display: none; }
 .detail-hero-image { width: min(86%, 24rem); max-height: 52%; opacity: .32; right: 0; bottom: -14%; }
 .detail-hero--expertise .detail-hero-image,
 .detail-hero--production .detail-hero-image,
 .detail-hero--publishing .detail-hero-image { bottom: -18%; max-height: 56%; }
 .detail-demo { padding: 1.2rem; border-radius: 18px; }
 .detail-control { padding: 1.2rem; margin-top: 1.8rem; }
 .detail-bottom { align-items: start; flex-direction: column; }
 .detail-bottom .home-button { width: 100%; }
}