/* Editorial app pages share the site shell, buttons and phone/gallery component. */
.app-detail { color: var(--navy); padding-top: 40px; }
.detail-width { width: min(1120px, calc(100% - 92px)); margin-inline: auto; }
.app-detail p { line-height: 1.65; }
.app-detail h1, .app-detail h2, .app-detail h3 { color: var(--navy); font-weight: 900; }
.app-detail h1 { margin: 0 0 24px; max-width: none; font-size: clamp(32px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -1.4px; }
.app-detail h2 { margin: 10px 0 20px; font-size: clamp(28px, 2.7vw, 36px); line-height: 1.15; letter-spacing: -1px; }
.app-detail h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.4px; }
/* Match the Homepage strip's available column width at each existing breakpoint.
   The shared component alone controls the phones, bezel, inset and spacing. */
.detail-hero { --preview-width: min(477px, calc(50vw - 289px)); display: grid; grid-template-columns: minmax(0, 1fr) var(--preview-width); gap: 64px; align-items: start; padding-bottom: 64px; }
.detail-showcase { width: var(--preview-width); min-width: 0; }
.detail-download { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 18px; padding: 20px; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: 0 8px 28px #b7d5e526; }
.detail-download .app-icon { width: 64px; height: 64px; border-radius: 15px; }
.detail-download .detail-app-name { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.15; letter-spacing: -.7px; }
.detail-platform { display: flex; align-items: start; gap: 8px; margin: 10px 0 0; color: #526480; font-size: 13px; }
.detail-platform img { flex: 0 0 22px; margin-top: 2px; }
.detail-download-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.detail-download-actions > .button { flex: 1 1 100px; max-width: 163px; }
.detail-download-actions > .button-primary { flex: 0 0 163px; }
.detail-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 20px 0 26px; }
.detail-tags li { padding: 6px 12px; border-radius: 8px; background: #eaf4ff; color: #115398; font-size: 13px; font-weight: 700; }
.detail-tags li:nth-child(2) { background: #fff1e8; color: #925523; }
.detail-tags li:nth-child(3) { background: #edf7f2; color: #29634e; }
.detail-tags li:nth-child(4) { background: #eeefff; color: #484d94; }
.detail-gallery { width: 100%; }
.detail-gallery .app-phone-strip { width: 100%; margin: 0; }
.app-detail .detail-kicker { margin: 0; color: #0070d9; font-size: 12px; line-height: 1.4; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 800; }
.detail-copy p, .detail-section-heading > p:not(.detail-kicker) { color: var(--copy); font-size: 16px; margin: 0 0 18px; }
.detail-copy p:last-child { margin-bottom: 0; }
.detail-section { padding-block: 64px; border-top: 1px solid var(--border); }
.detail-section-heading { max-width: 750px; margin-bottom: 32px; }
.detail-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.detail-stages li { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-items: start; }
.detail-stage-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #e7f2ff; color: #006ee8; font-size: 23px; font-weight: 900; }
.detail-stages h3 { margin: 18px 0 12px; }
.detail-stages p { color: var(--copy); margin: 0 0 20px; font-size: 15px; }
.detail-stages .detail-stage-note { align-self: stretch; margin: 0; padding-top: 16px; border-top: 2px solid #cce4fb; font-size: 14px; color: #516b87; width: 100%; }
.detail-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; }
.detail-split--reverse { grid-template-columns: 1fr 1.15fr; }
.detail-split--reverse .detail-graphic, .detail-split--reverse .detail-phone-graphic { order: -1; }
.detail-selection-section { align-items: start; }
.detail-phone-graphic { width: 188px; max-width: 100%; justify-self: center; margin: 0; }
.detail-quiz-notes { margin: 0 0 18px; padding-left: 22px; color: var(--copy); font-size: 16px; line-height: 1.65; }
.detail-quiz-notes li + li { margin-top: 10px; }
.detail-graphic { width: 100%; max-width: 440px; justify-self: center; margin: 0; padding: 32px; border: 1px solid #d5e5f2; border-radius: 22px; background: #f1f7ff; box-shadow: 0 10px 30px #b7d5e51a; }
.detail-band { background: #edf6fc; }
.detail-band .detail-section { border-top: 0; }
.detail-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 0; padding: 0; list-style: none; }
.detail-benefits li { display: flex; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border); }
.detail-benefits li > span { flex: 0 0 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e1f3ec; color: #16765c; font-weight: 900; }
.detail-benefits h3 { margin: 0 0 7px; font-size: 17px; }
.detail-benefits p { font-size: 15px; color: var(--copy); margin: 0; }
.detail-source { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 64px; align-items: center; }
.detail-source h2 { margin-top: 0; }
@media (min-width: 1101px) and (max-width: 1399px) {
    .detail-hero { --preview-width: calc(50vw - 91px); gap: 40px; }
}
@media (max-width: 1100px) {
    .detail-width { width: calc(100% - 48px); }
    .detail-hero { --preview-width: calc(50vw - 69px); gap: 36px; }
    .detail-split { gap: 36px; }
    .detail-graphic { padding: 24px; }
    .detail-stages { column-gap: 24px; }
    .detail-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .detail-selection-section, .detail-quiz-section, .detail-results-section { grid-template-columns: 1fr; gap: 28px; }
    .detail-quiz-section .detail-phone-graphic { order: 0; }
    .detail-hero { grid-template-columns: 1fr; gap: 32px; padding-bottom: 44px; }
    .detail-intro { max-width: 680px; }
    .detail-showcase { justify-self: center; }
    .detail-download { padding: 18px; gap: 16px; }
}
@media (max-width: 800px) {
    .detail-intro h1 { max-width: 620px; }
    .detail-section { padding-block: 44px; }
    .detail-split, .detail-split--reverse { grid-template-columns: 1fr; gap: 28px; }
    .detail-split--reverse .detail-graphic, .detail-split--reverse .detail-phone-graphic { order: 0; }
    .detail-stages { grid-template-columns: 1fr; gap: 28px; }
    .detail-stages li { display: flex; flex-direction: column; grid-row: auto; padding-left: 62px; position: relative; }
    .detail-stage-number { position: absolute; left: 0; top: 0; }
    .detail-stages h3 { margin-top: 0; }
    .detail-stages p { margin-bottom: 12px; }
    .detail-source { grid-template-columns: 1fr; gap: 24px; }
    .detail-source > .button { width: 180px; }
}
@media (max-width: 620px) {
    .app-detail { padding-top: 24px; }
    .detail-width { width: calc(100% - 32px); }
    .detail-hero { --preview-width: calc(100vw - 62px); }
    .detail-download { border-radius: 16px; }
    .detail-tags { gap: 6px; margin-block: 16px 22px; }
    .detail-tags li { padding: 5px 8px; font-size: 12px; }
    .app-detail h1 { font-size: 32px; letter-spacing: -1px; }
    .app-detail h2 { font-size: 28px; }
    .detail-section-heading { margin-bottom: 26px; }
    .detail-benefits { grid-template-columns: 1fr; gap: 18px; }
    .detail-graphic { max-width: 380px; padding: 24px; border-radius: 18px; }
}
@media (max-width: 620px) and (orientation: portrait) {
    .detail-app-identity { container-type: inline-size; }
    /* Fit the measured title to its text column, retaining 24px when it fits. */
    .detail-download .detail-app-name { font-size: clamp(20px, 10.12cqw, 24px); }
}
@media (min-width: 621px) and (max-width: 1000px) and (max-height: 500px) and (orientation: landscape) {
    .detail-hero { grid-template-columns: 1fr; gap: 32px; }
    .detail-intro { max-width: 680px; }
    .detail-showcase { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) var(--preview-width); gap: 16px 32px; align-items: start; }
    .detail-download { grid-column: 1; grid-row: 1 / 3; }
    .detail-tags { grid-column: 2; grid-row: 1; gap: 6px; margin: 0; }
    .detail-tags li { padding: 5px 8px; font-size: 12px; }
    .detail-gallery { grid-column: 2; grid-row: 2; }
}