/* An extension of the portfolio's established visual system. */
.hp-case { padding-top: 64px; }
.hp-case h1, .hp-case h2, .hp-case h3 { text-wrap: balance; }
.hp-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 40px; padding-block: 28px 20px; }
.hp-intro-copy { min-width: 0; }
.hp-hero-screen { margin: 0; min-width: 0; justify-self: center; text-align: center; }
.hp-phone { display: block; position: relative; width: 340px; max-width: 100%; height: 440px; margin-inline: auto; padding: 0; overflow: hidden; border: 0; background: transparent; cursor: zoom-in; mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.hp-iphone-device { position: absolute; top: 16px; left: 50%; width: min(300px, calc(100% - 24px)); height: 650px; transform: translateX(-50%); }
.hp-iphone-frame { position: absolute; inset: 0; border: 2px solid #74767e; border-radius: 46px; background: #141518; box-shadow: 0 16px 32px rgba(16, 18, 23, .2); }
.hp-phone:focus-visible .hp-iphone-frame { outline: 3px solid var(--blue); outline-offset: 4px; }
.hp-iphone-frame::before, .hp-iphone-frame::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: #777981; }
.hp-iphone-frame::before { left: -4px; top: 90px; height: 64px; }
.hp-iphone-frame::after { right: -4px; top: 116px; height: 44px; }
.hp-iphone-screen { position: absolute; inset: 10px; display: block; overflow: hidden; border-radius: 36px; background: #1e1c24; }
.hp-iphone-screen img { display: block; width: 100%; height: auto; }
.hp-iphone-status { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 18px; color: white; font-size: 11px; font-weight: 600; }
.hp-iphone-status svg { width: 44px; height: 12px; }
.hp-iphone-island { position: absolute; top: 20px; left: 50%; width: 88px; height: 25px; transform: translateX(-50%); border-radius: 18px; background: #050506; }
.hp-iphone-island::after { content: ''; position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #151b2b; }
.hp-hero-screen figcaption { margin-top: 8px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.hp-intro h1 { max-width: 1000px; font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: var(--display-tracking); font-weight: 650; }
.hp-role { margin-top: 16px; font-size: 15px; font-weight: 600; line-height: 1.5; }
.hp-lead { margin-top: 12px; max-width: 76ch; color: var(--ink-soft); font-size: 18px; line-height: 1.5; }
.hp-preview-label { display: none; }
.hp-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 20px; }
.hp-links a, .hp-text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.hp-demo { padding: 28px clamp(16px, 3vw, 48px) 36px; background: var(--dark); color: white; }
.hp-demo-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1440px; margin: 0 auto 24px; }
.hp-demo-top h2 { font-size: 24px; letter-spacing: -.02em; line-height: 1.25; }
.hp-demo-top p { margin-top: 8px; font-size: 15px; color: var(--dark-soft); line-height: 1.5; }
.hp-demo .demo-showcase { max-width: 1440px; margin: 0 auto; padding-top: 0; }
.hp-demo .demo-showcase__desktop { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.hp-macbook-area { container-type: size; display: grid; flex: 1; min-height: 0; place-items: center; }
.hp-macbook { position: relative; width: min(100cqw, calc(100cqh * 1.637485)); aspect-ratio: 3984 / 2433; overflow: hidden; }
.hp-macbook-frame { position: absolute; z-index: 4; left: -11.4207%; top: -19.5232%; width: 122.8163%; max-width: none; height: auto; pointer-events: none; }
.hp-demo .hp-macbook .demo-embed__stage { position: absolute; left: 9.0896%; top: 2.2203%; width: 81.8775%; height: 86.6831%; border-radius: 8px 8px 0 0; }
.hp-demo .demo-embed__stage, .hp-demo .demo-showcase iframe { height: 820px; }
.hp-demo .demo-showcase__bar { flex-wrap: wrap; gap: 8px 24px; }
.hp-demo .demo-showcase__bar a { min-height: 44px; display: inline-flex; align-items: center; }
.hp-demo-enter { display: none; }
.hp-demo-guarded .demo-showcase__desktop[data-demo-state="ready"] .hp-demo-enter { display: block; position: absolute; inset: 0; z-index: 3; width: 100%; border: 0; background: transparent; color: white; cursor: pointer; }
.hp-demo-enter span { position: absolute; left: 16px; bottom: 16px; padding: 12px 16px; border: 1px solid #686870; border-radius: 8px; background: #17141d; font-weight: 600; }
.hp-demo-guarded .demo-showcase__desktop iframe { pointer-events: none; }
.hp-demo-guarded.is-fully-visible .demo-showcase__desktop iframe { pointer-events: auto; }
.hp-demo-guarded.is-fully-visible .hp-demo-enter { display: none !important; }
.hp-demo:not(.hp-demo-guarded) .hp-demo-enter { display: none !important; }
.hp-demo-note { max-width: 110ch; margin: 18px auto 0; color: var(--dark-soft); font-size: 14px; line-height: 1.6; }
.hp-demo .demo-showcase__mobile { margin-top: 0; }
.hp-demo .demo-showcase__mobile figure { margin: 0; }
.hp-demo .demo-showcase__mobile img { width: 100%; height: auto; }
.hp-chapter { padding-block: clamp(80px, 9vw, 128px); background: var(--surface); }
.hp-chapter + .hp-chapter:not(.hp-dark) { border-top: 1px solid var(--line); }
.hp-chapter h2 { max-width: 24ch; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -.03em; font-weight: 650; }
.hp-chapter h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.hp-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.hp-copy { color: var(--ink-soft); font-size: 18px; line-height: 1.7; max-width: 66ch; min-width: 0; }
.hp-copy > * + * { margin-top: 28px; }
.hp-copy strong { color: var(--ink); font-weight: 600; }
.hp-summary { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; padding: 0; }
.hp-summary > li { position: relative; border-top: 1px solid var(--line); padding-top: 20px; }
.hp-summary h3 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.hp-summary p { color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.hp-summary-arrow { position: absolute; width: 28px; height: 24px; right: -34px; top: 18px; fill: none; stroke: var(--blue); stroke-width: 1.5; }
.hp-summary-chapter { background: #f5f5f7; padding-block: 64px; }
.hp-project-details { background: var(--surface); padding-block: 48px 64px; border-top: 1px solid var(--line); }
.hp-project-details h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
.hp-project-details .hp-meta { border: 0; margin-top: 28px; padding-top: 0; }
.hp-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.hp-meta dt { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.hp-meta dd { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.hp-case-nav { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 28px; }
.hp-dark { color: white; background: var(--dark); }
.hp-dark .hp-copy, .hp-dark .hp-caption, .hp-dark .hp-decision p, .hp-dark .hp-ledger dd { color: var(--dark-soft); }
.hp-dark .hp-copy strong, .hp-dark .hp-ledger dt, .hp-dark h3 { color: white; }
.hp-dark .hp-text-link { color: var(--blue-light); }
.hp-flow { margin-top: 42px; }
.hp-flow ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; border-top: 1px solid var(--line); }
.hp-flow li { padding: 24px 28px 0 0; position: relative; }
.hp-flow li:not(:last-child)::after { content: ''; position: absolute; top: -5px; right: 28px; width: 8px; height: 8px; border-top: 1px solid var(--ink-muted); border-right: 1px solid var(--ink-muted); transform: rotate(45deg); }
.hp-flow strong { display: block; font-size: 18px; line-height: 1.4; margin-bottom: 10px; }
.hp-flow span { display: block; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.hp-caption { margin-top: 16px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.hp-ledger { margin-top: 48px; }
.hp-ledger > div { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(0, 1.3fr); gap: 28px; border-top: 1px solid var(--line); padding-block: 28px; }
.hp-ledger dt { font-size: 18px; line-height: 1.5; font-weight: 600; }
.hp-ledger dd { font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.hp-dark .hp-ledger > div { border-color: #343841; }
/* Visual anchors express authorship, the role handoff and the event lifespan. */
.hp-delivery-path { margin-top: 72px; }
.hp-delivery-path ol { border-top-color: var(--blue); }
.hp-delivery-path li { padding-top: 40px; }
.hp-delivery-path .hp-path-icon { position: absolute; top: -21px; left: 0; width: 42px; height: 42px; padding: 7px; color: var(--blue); background: var(--surface); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hp-delivery-path li:not(:last-child)::after { border-color: var(--blue); }
.hp-product-cycle { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.hp-product-cycle figcaption { font-size: 18px; font-weight: 600; line-height: 1.5; }
.hp-product-cycle ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin-top: 28px; gap: 32px; }
.hp-product-cycle li { position: relative; min-width: 0; }
.hp-product-cycle li:not(:last-child)::after { content: ''; position: absolute; top: 16px; left: 48px; right: 0; height: 1px; background: var(--line); }
.hp-product-cycle li:not(:last-child)::before { content: ''; position: absolute; right: 0; top: 13px; width: 7px; height: 7px; border-top: 1px solid var(--ink-muted); border-right: 1px solid var(--ink-muted); transform: rotate(45deg); }
.hp-product-cycle svg { display: block; width: 32px; height: 32px; margin-bottom: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hp-product-cycle strong { display: block; font-size: 18px; line-height: 1.4; }
.hp-product-cycle span { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.hp-cycle-handoff svg, .hp-cycle-handoff strong { color: var(--blue); }
.hp-event-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 64px; }
.hp-event-timeline > div { position: relative; border-top: 1px solid #686d77; padding: 28px 40px 0 0; }
.hp-event-timeline > div::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--dark-soft); }
.hp-event-timeline > div:nth-child(2)::before { background: var(--blue-light); }
.hp-event-timeline > div:last-child { padding-right: 0; }
.hp-event-timeline > div:last-child::before { background: var(--dark); border: 1px solid var(--dark-soft); }
.hp-event-timeline dt { font-size: 20px; font-weight: 600; line-height: 1.4; }
.hp-event-timeline dd { margin-top: 12px; max-width: 32ch; color: var(--dark-soft); font-size: 17px; line-height: 1.65; }
.hp-screen-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); margin-top: 40px; align-items: start; }
.hp-screen { margin: 0; min-width: 0; }
.hp-screen img { display: block; width: 100%; height: auto; }
.hp-screen figcaption { margin-top: 14px; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
.hp-dark .hp-screen figcaption { color: var(--dark-soft); }
.hp-decision + .hp-decision { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 28px; }
.hp-decision h3 { margin-bottom: 14px; }
.hp-decision p { color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
.hp-decision p + p { margin-top: 16px; }
.hp-dark .hp-decision + .hp-decision { border-color: #343841; }
/* Compact genuine UI excerpts; their complete states open inside the case. */
.hp-product-chapter { padding-block: 24px 16px; }
.hp-product-chapter h2 { max-width: none; font-size: clamp(30px, 3vw, 40px); scroll-margin-top: 24px; }
.hp-product-chapter .hp-screen-story { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; margin-top: 24px; }
.hp-product-chapter .hp-screen { width: 300px; max-width: 100%; }
.hp-product-chapter .hp-phone { width: 300px; height: 380px; mask-image: linear-gradient(to bottom, #000 96%, transparent); }
.hp-app-window { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid #565962; border-radius: 12px; background: #24232b; cursor: zoom-in; box-shadow: 0 12px 24px rgba(0, 0, 0, .15); }
.hp-app-window-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding-inline: 10px; background: #34353d; }
.hp-app-window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #f56860; }
.hp-app-window-bar i:nth-child(2) { background: #e8be4b; }
.hp-app-window-bar i:nth-child(3) { background: #61bc66; }
.hp-product-chapter .hp-app-window img { display: block; width: 100%; height: auto; max-height: none; }
.hp-product-chapter .hp-screen figcaption { font-size: 13px; line-height: 1.5; margin-top: 8px; }
.hp-product-chapter .hp-decision h3 { font-size: 21px; line-height: 1.25; margin-bottom: 12px; }
.hp-product-chapter .hp-decision p { font-size: 16px; line-height: 1.55; }
.hp-product-chapter .hp-decision p + p { margin-top: 12px; }
.hp-decision-detail { margin-top: 8px; }
.hp-decision-detail summary { display: list-item; min-height: 44px; padding-block: 10px; color: var(--blue); cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1.6; }
.hp-dark .hp-decision-detail summary { color: var(--blue-light); }
.hp-decision-detail p { margin-top: 8px; }
.hp-journey { margin-top: 20px; }
.hp-journey .hp-flow { margin-block: 16px 24px; }
@media (min-width: 1100px) {
  .hp-decisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .hp-decisions .hp-decision + .hp-decision { border: 0; margin: 0; padding: 0; }
}
@media (max-width: 900px) {
  .hp-intro { grid-template-columns: 1fr; gap: 20px; }
  .hp-hero-screen { width: min(100%, 480px); justify-self: center; }
  .hp-product-chapter .hp-screen-story { grid-template-columns: 1fr; }
  .hp-product-chapter .hp-screen { width: min(100%, 354px); justify-self: center; }
}
.hp-voting-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.hp-voting { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); column-gap: 40px; }
.hp-voting > div { display: grid; grid-template-rows: subgrid; grid-row: span 5; border-top: 1px solid var(--line); padding-top: 24px; }
.hp-voting h3 { margin-bottom: 16px; }
.hp-voting p { color: var(--ink-soft); font-size: 17px; line-height: 1.65; padding-bottom: 24px; }
.hp-voting dl { display: grid; grid-template-rows: subgrid; grid-row: span 3; margin-top: 0; }
.hp-voting dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.hp-voting dt { font-weight: 600; }
.hp-voting dd { color: var(--ink-soft); }
.hp-details { margin-top: 28px; border-block: 1px solid var(--line); }
.hp-details summary { cursor: pointer; min-height: 48px; padding-block: 14px; color: var(--ink); font-size: 17px; font-weight: 600; }
.hp-details p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; padding-bottom: 22px; }
.hp-result { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 48px; }
.hp-result strong { display: block; max-width: 32ch; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; letter-spacing: -.025em; font-weight: 600; }
.hp-result p { max-width: 74ch; margin-top: 20px; font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.hp-next { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.hp-next p { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
.hp-case .contact-section { padding-block: clamp(80px, 9vw, 128px) 28px; }
.hp-case .contact-section h2 { max-width: 24ch; }
.hp-case footer a { display: inline-flex; align-items: center; min-height: 44px; }
.hp-case :where(h2, h3, section[id], nav[id]) { scroll-margin-top: 100px; }
.hp-case :is(#case-summary, #voting) { scroll-margin-top: 24px; }
.hp-case :focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
.hp-case .hp-dark :focus-visible, .hp-case .hp-demo :focus-visible { outline-color: var(--blue-light); }
.hp-media-viewer { width: min(1000px, calc(100% - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 20px; border: 1px solid #4a4b52; border-radius: 16px; background: #17181b; color: white; }
.hp-media-viewer::backdrop { background: rgba(9, 10, 13, .84); }
.hp-media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.hp-media-toolbar h2 { font-size: 20px; line-height: 1.3; }
.hp-media-toolbar button { min-width: 64px; min-height: 44px; border: 1px solid #777880; border-radius: 6px; background: transparent; color: white; font: inherit; cursor: pointer; }
.hp-media-viewer figure { margin: 0; }
.hp-media-viewer img { display: block; width: 100%; height: calc(100svh - 192px); object-fit: contain; }
.hp-media-viewer figcaption { margin-top: 12px; color: #c5c6cd; font-size: 13px; line-height: 1.5; text-align: center; }
.hp-media-viewer :focus-visible { outline: 3px solid var(--blue-light); outline-offset: 4px; }
.hp-media-open { overflow: hidden; }
.hp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 721px) {
  .hp-demo { padding-top: 16px; }
  .hp-demo-viewport { display: flex; flex-direction: column; height: calc(100svh - 96px); min-height: 0; }
  .hp-demo-top { flex: 0 0 auto; width: 100%; margin-bottom: 16px; }
  .hp-demo .demo-showcase { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; }
  .hp-demo .demo-showcase__desktop { display: flex; flex: 1; min-height: 0; flex-direction: column; height: auto; }
  .hp-demo .demo-showcase__bar { flex: 0 0 auto; }
  .hp-demo .demo-embed__stage { flex: 1; min-height: 0; height: auto; }
  .hp-demo .demo-showcase iframe { height: 100%; }
}
@media (max-width: 860px) {
  .hp-grid { grid-template-columns: 1fr; }
  .hp-meta { grid-template-columns: 1fr 1fr; }
  .hp-screen-story { gap: 32px; }
  .hp-flow ol { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .hp-delivery-path ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hp-demo-top { align-items: start; }
}
@media (max-width: 720px) {
  .hp-delivery-path ol { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); margin-left: 20px; gap: 0; }
  .hp-delivery-path li { padding: 0 0 32px 32px; border: 0; }
  .hp-delivery-path li:last-child { padding-bottom: 0; }
  .hp-delivery-path .hp-path-icon { top: -6px; left: -21px; }
  .hp-delivery-path li:not(:last-child)::after { display: none; }
  .hp-product-cycle ol { grid-template-columns: 1fr; gap: 0; }
  .hp-product-cycle li { padding: 0 0 28px 56px; }
  .hp-product-cycle li:last-child { padding-bottom: 0; }
  .hp-product-cycle svg { position: absolute; left: 0; top: 0; }
  .hp-product-cycle li:not(:last-child)::after { left: 16px; right: auto; top: 40px; bottom: 8px; height: auto; width: 1px; }
  .hp-product-cycle li:not(:last-child)::before { left: 13px; right: auto; top: auto; bottom: 8px; transform: rotate(135deg); }
  .hp-product-cycle span { margin-top: 4px; }
  .hp-event-timeline { grid-template-columns: 1fr; margin-left: 4px; }
  .hp-event-timeline > div { border-top: 0; border-left: 1px solid #686d77; padding: 0 0 32px 28px; }
  .hp-event-timeline > div::before { top: 8px; left: -5px; }
  .hp-event-timeline > div:last-child { border-left-color: transparent; padding: 0 0 0 28px; }
  .hp-event-timeline dd { margin-top: 8px; max-width: none; }
  .hp-phone { width: 300px; height: 360px; }
  .hp-intro h1 { font-size: 32px; }
  .hp-intro { padding-top: 20px; }
  .hp-inline-label { display: none; }
  .hp-preview-label { display: inline; }
  .hp-links { margin-top: 12px; }
  .hp-demo-top { flex-direction: column; gap: 16px; }
  .hp-demo-top .cta-button { width: 100%; }
  .hp-demo .demo-showcase__mobile { display: grid; gap: 32px; }
  .hp-demo .demo-showcase__mobile img { max-height: 490px; object-fit: cover; object-position: top; }
  .hp-summary, .hp-screen-story, .hp-voting { grid-template-columns: 1fr; }
  .hp-voting { grid-template-rows: none; row-gap: 32px; }
  .hp-voting > div, .hp-voting dl { grid-template-rows: none; grid-row: auto; }
  .hp-media-viewer { padding: 12px; }
  .hp-summary { gap: 44px; }
  .hp-summary-arrow { left: 0; right: auto; top: auto; bottom: -35px; transform: rotate(90deg); }
  .hp-screen-story { margin-top: 28px; }
  .hp-screen { max-width: 480px; }
  .hp-screen img { max-height: 560px; object-fit: cover; object-position: top; }
  .hp-meta { gap: 24px; }
  .hp-ledger > div { grid-template-columns: 1fr; gap: 10px; }
  .hp-intro { padding-bottom: 28px; }
}
@media (max-width: 420px) {
  .hp-meta, .hp-flow ol { grid-template-columns: 1fr; }
  .hp-flow ol { border: 0; gap: 0; }
  .hp-flow li { border-top: 1px solid var(--line); padding: 20px 0 24px; }
  .hp-flow li:not(:last-child)::after { display: none; }
  .hp-delivery-path ol { border-left: 1px solid var(--line); }
  .hp-delivery-path li { border-top: 0; padding: 0 0 32px 32px; }
  .hp-links { column-gap: 24px; }
}
@media print {
  .hp-case { padding-top: 0; }
  .hp-demo, .hp-case-nav, .hp-links, .hp-case .contact-actions { display: none !important; }
  .hp-chapter, .hp-dark { background: white; color: black; padding-block: 30px; }
  .hp-copy, .hp-dark .hp-copy, .hp-dark .hp-ledger dd { color: #222; }
  .hp-event-timeline dd { color: #222; }
  .hp-event-timeline > div { border-color: #777; }
  .hp-event-timeline > div::before { background: #222; }
  .hp-event-timeline > div:last-child::before { background: white; border-color: #222; }
  .hp-grid, .hp-screen-story { grid-template-columns: 1fr; }
  .hp-screen { max-width: 240px; }
  .hp-case details > * { display: block; }
}

.hp-case #interactive-demo { scroll-margin-top: 0; }