/* Small, original SVG stories. No provider logo is animated or recolored. */
.reading-steps { padding-block:clamp(2.5rem,5vw,4rem); border-block:1px solid var(--line); }
.paper-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(2rem,4vw,4rem); }
.paper-benefit { min-width:0; }
.paper-motion { display:block; width:100%; max-width:300px; height:auto; margin:0 auto 1.65rem; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5; }
.motion-guide { stroke:var(--line); }
.motion-sheet { fill:var(--card); stroke:var(--line-2); }
.motion-back { fill:var(--accent-soft); stroke:var(--line); }
.motion-line { stroke:var(--ink-2); opacity:.65; }
.motion-tint { fill:var(--accent-soft); }
.motion-accent,.scan-corners,.scan-light { stroke:var(--accent); stroke-width:2; }
.motion-badge { fill:var(--paper); stroke:var(--accent); }
.folder-back { fill:var(--accent-soft); stroke:var(--line-2); }
.folder-front { fill:var(--accent-soft); stroke:var(--accent); }
.read-connector { stroke:var(--accent); stroke-dasharray:3 5; }
.step-number { display:block; margin-bottom:.55rem; color:var(--accent); font-size:.75rem; font-weight:600; letter-spacing:.09em; font-variant-numeric:tabular-nums; }
.reading-steps h2 { font-size:clamp(1.25rem,2vw,1.7rem); line-height:1.3; letter-spacing:-.035em; }
.reading-steps .step-copy p { color:var(--ink-2); font-size:.9375rem; line-height:1.65; margin-top:.6rem; max-width:24rem; }
.steps-foot { position:relative; display:flex; justify-content:center; align-items:center; gap:1rem; min-height:44px; margin-top:2.75rem; }
.reading-steps .originals-reminder { max-width:none; margin:0; font-size:.8125rem; line-height:1.6; text-align:center; color:var(--ink-2); }
.motion-toggle { position:absolute; right:0; display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:44px; padding:.5rem .25rem; background:none; color:var(--ink-2); border:0; font:inherit; font-size:.75rem; cursor:pointer; }
.motion-toggle[hidden] { display:none; }
.motion-toggle:hover { color:var(--accent); }
.motion-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.motion-toggle svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.5; }
.motion-toggle .pause-symbol { display:none; }
.motion-toggle[aria-pressed="true"] .pause-symbol { display:block; }
.motion-toggle[aria-pressed="true"] .play-symbol { display:none; }

/* Motion starts only after the controller observes the section. */
.scan-light { --paper-animation:scan-line; }
.scan-check { --paper-animation:scan-confirm; transform-origin:219px 148px; }
.read-highlight { --paper-animation:read-highlight; }
.read-detail { --paper-animation:read-detail; }
.read-detail-second { --paper-delay:.45s; }
.file-away { --paper-animation:file-away; }
.find-glass { --paper-animation:find-glass; }
[data-motion-ready] :is(.scan-light,.scan-check,.read-highlight,.read-detail,.file-away,.find-glass) {
  animation:var(--paper-animation) 7s ease-in-out var(--paper-delay,0s) infinite;
}
/* The site's static default still applies unless the visitor explicitly plays. */
@media (prefers-reduced-motion:reduce) {
  [data-motion-ready][data-motion-explicit] :is(.scan-light,.scan-check,.read-highlight,.read-detail,.file-away,.find-glass) {
    animation:var(--paper-animation) 7s ease-in-out var(--paper-delay,0s) infinite !important;
  }
}
[data-motion-running="false"] .paper-motion * { animation-play-state:paused !important; }
@keyframes scan-line { 0%,10% { transform:translateY(0); opacity:0; } 18% {opacity:1;} 55% { transform:translateY(98px); opacity:1; } 63%,100% {transform:translateY(98px);opacity:0;} }
@keyframes scan-confirm { 0%,48% {opacity:0;transform:scale(.82);} 60%,88% {opacity:1;transform:scale(1);} 100% {opacity:0;transform:scale(.82);} }
@keyframes read-highlight { 0%,13%,100% {opacity:.35;} 32%,80% {opacity:1;} }
@keyframes read-detail { 0%,18%,100% {opacity:.45;transform:translate(-8px,4px);} 38%,85% {opacity:1;transform:translate(0,0);} }
@keyframes file-away { 0%,12%,100% {transform:translateY(-6px);} 42%,85% {transform:translateY(21px);} }
@keyframes find-glass { 0%,20%,100% {transform:translate(-5px,3px);} 50%,80% {transform:translate(3px,-3px);} }

.ai-apps { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.75rem; list-style:none; padding:0; margin:1.65rem 0 1rem; max-width:30rem; }
.ai-apps li { display:flex; flex-direction:column; align-items:center; gap:.55rem; color:var(--ink-2); font-size:.6875rem; font-weight:500; }
.ai-app-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:#fff; border:1px solid #e1e7ea; border-radius:12px; }
.ai-app-icon img { display:block; width:26px; height:26px; object-fit:contain; }
.protocol-copy .demo-compatibility { max-width:29rem; margin:0; text-align:left; color:var(--ink-2); font-size:.8125rem; line-height:1.6; }
.ai-guide-link { display:inline-flex; align-items:center; min-height:44px; margin-top:.3rem; font-size:.875rem; font-weight:600; text-underline-offset:4px; }
.ai-sharing-note { display:flex; gap:.75rem; max-width:30rem; margin-top:1.1rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.ai-sharing-note > svg { width:22px; height:22px; margin-top:.15rem; flex-shrink:0; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ai-sharing-note p { margin:0; color:var(--ink-2); font-size:.8125rem; line-height:1.7; }
.ai-sharing-note strong { display:block; color:var(--ink); font-weight:600; }
.ai-sharing-note a { display:inline-flex; align-items:center; min-height:44px; font-size:.8125rem; text-underline-offset:4px; }
@media (max-width:63rem) {
  .ai-apps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; max-width:18rem; }
  .steps-foot { flex-direction:column; gap:.3rem; }
  .motion-toggle { position:static; }
}
@media (max-width:47.99rem) {
  .paper-benefits { grid-template-columns:minmax(0,1fr); gap:2rem; }
  .paper-benefit { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:1.25rem; align-items:center; }
  .paper-motion { margin:0; }
  .step-number { margin-bottom:.4rem; }
  .reading-steps h2 { font-size:1.2rem; }
  .reading-steps .step-copy p { font-size:.875rem; }
  .ai-apps { grid-template-columns:repeat(6,minmax(0,1fr)); max-width:30rem; gap:.35rem; }
}
@media (max-width:23rem) {
  .paper-benefit { grid-template-columns:minmax(0,1fr); gap:.75rem; }
  .ai-apps { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:18rem; gap:1rem; }
}