.dearroll-page .section { padding-block: 76px; }
.dearroll-page .section-heading { margin-bottom: 34px; }
.dearroll-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.dearroll-feature-grid article { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--paper); }
.dearroll-feature-art { display: grid; place-items: center; height: 210px; padding: 14px; background: #dfeae7; }
html[data-theme="dark"] .dearroll-feature-art { background: #142c2d; }
.dearroll-feature-art img { width: 190px; height: 190px; object-fit: contain; }
.dearroll-feature-copy { padding: 24px; }
.dearroll-feature-copy h3 { margin: 0 0 10px; font-size: 24px; }
.dearroll-feature-copy p { margin: 0; color: var(--muted); }
.dearroll-interactive-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 6vw, 80px); }
.dearroll-demo-copy h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.dearroll-demo-copy > p { color: var(--muted); }
.dearroll-demo-copy .eyebrow { color: var(--violet-dark); }
.dearroll-detail { font-size: .9rem; }
.dearroll-demo-copy .dearroll-note { margin-top: 24px; padding-left: 16px; border-left: 2px solid var(--line); font-size: .875rem; line-height: 1.65; max-width: 54ch; }
.dearroll-video-section { background: var(--paper); }
.dearroll-video { width: min(100%, 290px); margin: 0 auto; }
.dearroll-video video { display: block; width: 100%; height: auto; object-fit: contain; aspect-ratio: 1080 / 2210; }
.dearroll-video figcaption { margin-top: 16px; color: var(--muted); font-size: .85rem; }
.dearroll-video-toggle { display: block; width: 100%; min-height: 48px; margin-top: 16px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--violet); color: white; font: inherit; font-weight: 750; cursor: pointer; }
.dearroll-video-toggle[hidden] { display: none; }
.dearroll-detail-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 400px; margin-top: 28px; }
.dearroll-detail-shots figure { min-width: 0; margin: 0; }
.dearroll-detail-shots img { width: 100%; height: auto; }
.dearroll-detail-shots figcaption { margin-top: 12px; font-size: .9rem; font-weight: 700; }
.swipe-demo { --focus: #8fd5ff; width: 100%; max-width: 390px; justify-self: center; min-width: 0; padding: clamp(14px, 3vw, 22px); border: 1px solid #3a4e67; border-radius: 24px; background: #121c2a; color: #f4f6fc; }
.dearroll-video-steps { list-style: none; counter-reset: video-step; padding: 0; margin: 28px 0; }
.dearroll-video-steps li { counter-increment: video-step; position: relative; padding: 0 0 22px 48px; }
.dearroll-video-steps li::before { content: counter(video-step, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--violet-dark); font-weight: 800; }
.dearroll-video-steps p { color: var(--muted); margin: 4px 0 0; }
.dearroll-app-views { margin-top: 24px; border-top: 1px solid var(--line); }
.dearroll-app-views summary { padding: 16px 0; cursor: pointer; font-weight: 750; color: var(--violet-dark); }
.dearroll-app-views summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.swipe-demo [hidden] { display: none !important; }
.swipe-demo:focus-visible, .swipe-result:focus-visible { outline: 3px solid #8fd5ff; outline-offset: 5px; }
.swipe-progress { margin: 0 0 14px; color: #a9dbfa; font-size: 1rem; font-weight: 750; }
.swipe-stage { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background: #0b111b; touch-action: pan-y; }
.swipe-card { width: 100%; height: 100%; position: relative; user-select: none; touch-action: pan-y; cursor: grab; }
.swipe-card img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.swipe-card.is-dragging { cursor: grabbing; }
.swipe-card.is-settling { transition: transform .22s ease, opacity .22s ease; }
.swipe-feedback { position: absolute; top: 16px; left: 12px; right: 12px; width: fit-content; max-width: calc(100% - 24px); padding: 8px 12px; border: 2px solid currentColor; border-radius: 10px; color: #b8f5d1; background: #153c2f; font-weight: 800; opacity: 0; }
.swipe-feedback.is-select { color: #ffe2e2; background: #652d36; }
.swipe-loading, .swipe-error { position: absolute; inset: 0; display: grid; align-content: center; gap: 16px; padding: 20px; text-align: center; }
.swipe-error p { margin: 0; }
.swipe-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 10px; margin-top: 18px; }
.swipe-demo button { min-height: 48px; padding: 12px; border: 1px solid #8bb4d6; border-radius: 12px; background: #21496a; color: #fff; font: inherit; font-size: .95rem; font-weight: 750; line-height: 1.4; cursor: pointer; }
.swipe-demo button[aria-disabled="true"] { opacity: .5; cursor: wait; }
.swipe-demo .swipe-keep { background: #164d3b; border-color: #6fcfa4; }
.swipe-demo .swipe-select { background: #6b303b; border-color: #e9a1ad; }
.swipe-demo button:hover:not([aria-disabled="true"]) { filter: brightness(1.15); }
.swipe-counts { display: grid; gap: 4px; margin-top: 16px; color: #c8d4e4; font-size: .85rem; }
.swipe-result { padding-block: 22px; }
.swipe-result h3 { font-size: 1.8rem; color: #a9dbfa; }
.swipe-result button { width: 100%; margin-top: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 820px) {
  .dearroll-feature-grid { grid-template-columns: 1fr; }
  .dearroll-feature-grid article { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; }
  .dearroll-feature-art { height: 100%; min-height: 160px; padding: 12px; }
  .dearroll-feature-art img { width: 106px; height: 106px; }
  .dearroll-interactive-grid { grid-template-columns: minmax(0, 1fr); }
  .dearroll-video-section .dearroll-demo-copy { grid-row: 1; }
  .dearroll-detail-shots { max-width: 340px; }
}
@media (max-width: 520px) {
  .dearroll-page .section { padding-block: 52px; }
  .dearroll-feature-grid { gap: 14px; }
  .dearroll-feature-grid article { grid-template-columns: 88px minmax(0, 1fr); }
  .dearroll-feature-art { padding: 8px; }
  .dearroll-feature-art img { width: 72px; height: 72px; }
  .dearroll-feature-copy { padding: 18px 16px; }
  .dearroll-feature-copy h3 { font-size: 20px; }
  .dearroll-feature-copy p { font-size: 14px; }
}
@media (max-width: 360px) {
  .swipe-actions { grid-template-columns: minmax(0, 1fr); }
  .dearroll-page .header-inner { width: calc(100% - 20px); }
  .dearroll-page .header-wordmark span { font-size: 12px; }
  .dearroll-page .header-wordmark strong { font-size: 16px; }
  .dearroll-page .header-symbol { width: 26px; height: 26px; }
  .dearroll-page .header-actions { gap: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-card.is-settling { transition: none; }
}