/* Fatra's advertising story: an illustration of the workflow, not an app replica. */
.story-site { background: #f7f8f3; }
.story-site .wrap { width: min(1240px, calc(100% - 64px)); }
.story-site button { font: inherit; cursor: pointer; }
.story-site button:disabled { cursor: default; opacity: .4; }
.story-site :focus-visible { outline: 3px solid #48936d; outline-offset: 5px; }
.story-site .site-header { border-bottom: 1px solid #dce5dc; }
.story-site .site-header__inner { min-height: 82px; }
.story-site .nav-cta { border-radius: 12px; }
.story-site .btn { border-radius: 12px; padding: 15px 23px; }
.story-site .btn--primary { color: #fff; background: #176448; border: 1px solid #176448; }
.story-site .btn--primary:hover { background: #104e36; transform: none; box-shadow: 0 5px 18px #1c5e3520; }
.story-site .btn--primary span { font-size: .7rem; }
.story-hero { padding: 64px 0 28px; }
.story-layout { display: grid; grid-template-columns: .93fr 1.1fr; align-items: center; gap: 64px; }
.story-intro { padding-bottom: 40px; }
.story-intro .eyebrow { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: #426453; }
.brand-dot { width: 8px; height: 8px; background: #328f62; border-radius: 50%; box-shadow: 0 0 0 5px #e6efe4; }
.story-intro h1 { font-size: clamp(2.8rem,4.3vw,4.25rem); line-height: 1.5; letter-spacing: -.065em; margin: 22px 0; color: #153d2d; }
.story-intro h1 em { font-style: normal; color: #438768; }
.story-lead { font-size: 1rem; color: #52695c; line-height: 2.1; max-width: 440px; margin: 0; }
.story-intro .cta-row { gap: 24px; margin-top: 32px; }
.text-link { font-size: .82rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.intro-points { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .65rem; color: #6a7f72; margin-top: 30px; }
.intro-points i { width: 3px; height: 3px; background: #91a898; border-radius: 50%; }
.story-frame { min-width: 0; color: #f5f9f1; border: 1px solid #2d5e48; border-radius: 22px; background: #103e2e; box-shadow: 0 25px 70px -35px #183c2b80; padding: 22px 26px 18px; }
.film-heading { display: flex; justify-content: space-between; align-items: center; color: #dfeddf; font-size: .76rem; padding-bottom: 19px; border-bottom: 1px solid #ffffff18; }
.film-heading>span:first-child { display: flex; align-items: center; gap: 10px; }
.film-heading img { border-radius: 8px; }
/* The page already reserves 100px for its sticky header. */
.story-frame { scroll-margin-top: 0; }
.film-label { color: #afc8b9; font-size: .6rem; }
.story-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: 17px; border: 1px solid #ffffff30; background: #092e23; border-radius: 12px; }
.story-mode button { min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: #d6e7d8; font-size: .76rem; font-weight: 700; }
.story-mode button[aria-pressed=true] { color: #19492f; background: #e0efcf; }
.story-mode button:not([aria-pressed=true]):hover { background: #ffffff0d; }
/* A stable viewport: scenes animate inside it; text zoom can scroll, never clip. */
.film-stage { display: grid; grid-template-rows: minmax(0, 1fr); block-size: 25rem; overflow: auto; scrollbar-width: thin; }
.film-scene { grid-area: 1 / 1; align-self: start; min-width: 0; min-height: 0; padding: 22px 0 12px; animation: scene-in .24s ease both; }
.scene-kicker { font-size: .62rem; color: #a3c9b3; margin: 0 0 9px; letter-spacing: .02em; }
.film-scene h2 { font-size: 1.65rem; line-height: 1.55; letter-spacing: -.03em; color: #f1f8ed; margin: 0 0 7px; }
.scene-subtitle { font-size: .68rem; color: #c0d5c7; margin: 0; }
.paper-selection { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 16px 0 12px; }
.paper { display: flex; flex-direction: column; align-items: flex-start; position: relative; padding: 16px 14px 13px; border-radius: 6px; border: 2px solid transparent; background: #f7f6ed; color: #214d39; text-align: start; box-shadow: 0 8px 10px #001a171a; transition: transform .2s, background .2s, border-color .2s; }
.paper:hover { transform: translateY(-5px); }
.story-site .paper:disabled { opacity: 1; border-color: transparent; cursor: default; transform: none; }
.story-frame[data-mode=watch] .paper-check { visibility: hidden; }
.paper[aria-pressed=true] { border-color: #a8d8aa; }
.paper[aria-pressed=false] { background: #dce4d8; }
.paper-check { position: absolute; inset-inline-end: 9px; top: 8px; width: 17px; height: 17px; line-height: 17px; border-radius: 50%; color: white; background: #367455; font-size: .6rem; text-align: center; }
.paper[aria-pressed=false] .paper-check { color: transparent; background: transparent; border: 1px solid #64836b; }
.paper-mark { font-size: .62rem; color: #47604b; margin: 10px 0 13px; }
.paper-lines { height: 24px; width: 100%; background: repeating-linear-gradient(to bottom,#bdcdbd 0 2px,transparent 2px 10px); margin-bottom: 12px; opacity: .6; }
.paper strong { font-family: 'Segoe UI',sans-serif; font-size: 1rem; letter-spacing: .08em; }
.paper b { font-family: 'Segoe UI',sans-serif; font-size: .96rem; margin-top: 11px; }
.paper small { font-size: .55rem; color: #435c48; }
.selection-caption { color: #bad3bf; font-size: .63rem; margin: 0; }
.reading-visual { display: grid; grid-template-columns: .8fr 1fr; gap: 30px; align-items: center; padding: 16px 10px 10px; }
.scan-document { position: relative; background: #f5f5ec; color: #327651; border-radius: 6px; padding: 25px 18px; height: 174px; box-shadow: 0 15px 30px #041e2724; overflow: hidden; }
.scan-document>span { display: block; font-size: 1.3rem; margin-bottom: 13px; }
.scan-document>i { display: block; height: 4px; background: #d9e3d5; margin-top: 10px; }
.scan-document>i:last-of-type { width: 55%; }
.scan-beam { position: absolute; height: 2px; background: #61bc7e; box-shadow: 0 -12px 28px 14px #7ae1a640; inset: 35px 0 auto; animation: scan-page 1.2s ease both; }
.extracted-fields { display: grid; gap: 10px; }
.extracted-fields>span { padding: 9px 12px; border: 1px solid #ffffff25; border-radius: 8px; background: #ffffff09; font-size: .71rem; animation: field-in .28s ease both; }
.extracted-fields>span:nth-child(2) { animation-delay: .12s; }
.extracted-fields>span:nth-child(3) { animation-delay: .24s; }
.extracted-fields>span:nth-child(4) { animation-delay: .36s; }
.extracted-fields i { color: #b7df9f; font-style: normal; margin-inline-end: 12px; }
.scene-note { font-size: .63rem; color: #bbd6c3; margin: 12px 0 0; }
.saved-lists { display: grid; gap: 7px; margin: 16px 0 8px; }
.saved-list { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #f3f6ee; color: #214331; border-radius: 8px; animation: field-in .24s ease both; }
.saved-list:nth-child(2) { animation-delay: .08s; }.saved-list:nth-child(3) { animation-delay: .16s; }
.saved-list>div { flex: 1; }.saved-list strong { display: block; font-size: .7rem; }.saved-list small { display: block; color: #627567; font-size: .55rem; }
.saved-list strong,.saved-list small { line-height: 1.6; }
.saved-list>b { font-family: 'Segoe UI',sans-serif; font-size: .88rem; text-align: end; }
.saved-check { color: #3d9061; font-size: .75rem; }.list-sheet { color: #5c8768; font-size: 1.4rem; }
.list-total { display: flex; justify-content: space-between; align-items: center; font-size: .7rem; padding: 5px 3px; }
.list-total strong { color: #c3e7ad; font-size: 1.1rem; }.list-total small { font-size: .65rem; font-weight: 500; }
.comparison-visual { margin: 16px 0 12px; display: grid; gap: 12px; }
.comparison-visual>div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: .74rem; }
.comparison-visual strong { font-family: 'Segoe UI',sans-serif; font-size: 1rem; line-height: 1.5; }.comparison-visual small { font-size: .6rem; font-weight: 500; }
.comparison-visual i { flex: 1 0 100%; height: 9px; border-radius: 20px; background: #ffffff15; overflow: hidden; }
.comparison-visual i b { display: block; width: 100%; height: 100%; background: #a9d491; border-radius: inherit; transform-origin: right; animation: bar-in .4s ease both; }
.comparison-visual>div:last-child i b { background: #76b6a0; animation-delay: .1s; }
.comparison-result { background: #fff1d9; border: 1px solid #e8d3a6; border-radius: 9px; color: #79541f; font-size: .8rem; line-height: 1.6; padding: 12px; animation: field-in .24s .12s ease both; }
.comparison-result.is-match { background: #dcefd5; color: #245536; border-color: #b0d5aa; }
.comparison-result strong { font-size: .8rem; }.comparison-result p { font-size: .64rem; margin: 6px 0 0; line-height: 1.8; }
.comparison-result .comparison-gap { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; margin-top: 6px; border-top: 1px solid #79541f30; }
.archive-scene { text-align: center; }
.archive-visual { position: relative; height: 96px; width: 138px; margin: 8px auto 12px; }
.archive-folder { position: absolute; bottom: 0; width: 138px; height: 78px; background: #b6d5a1; border-radius: 9px 9px 16px 16px; display: grid; place-items: center; box-shadow: 0 12px 25px #031f142f; }
.archive-folder:before { content: ''; position: absolute; top: -11px; right: 0; width: 60px; height: 16px; border-radius: 8px 10px 0 0; background: #b6d5a1; }
.archive-folder>span { background: #2d7048; color: white; width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; line-height: 34px; animation: check-in .25s .25s ease both; }
.archive-papers { position: absolute; width: 110px; height: 75px; top: 0; left: 14px; animation: archive-in .4s ease both; }
.archive-papers i { display: block; position: absolute; width: 100%; height: 65px; background: #f6f6ee; border-radius: 4px; border: 1px solid #bed1b5; }
.archive-papers i:nth-child(2) { top: 6px; }.archive-papers i:nth-child(3) { top: 12px; }
.archive-amount { font-size: 1.4rem; color: #d1e9bd; margin-top: 15px; font-family: 'Segoe UI',sans-serif; }
.archive-amount small { font: 500 .7rem Cairo,sans-serif; }.archive-amount>span { display: block; font: 500 .64rem Cairo,sans-serif; color: #c2d9c6; margin-top: 6px; }
.story-progress { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; padding: 12px 0 0; margin: 0; list-style: none; }
.story-progress li { border-top: 2px solid #ffffff27; color: #b8cdbb; padding: 8px 0 0; font-size: .63rem; text-align: start; min-height: 48px; }
.story-progress span { display: block; font: .58rem 'Segoe UI',sans-serif; opacity: .7; }
.story-progress [aria-current=step] { color: #e6f5d6; border-color: #bde4a6; }.story-progress .is-complete { border-color: #619778; }
.story-caption { font-size: .65rem; color: #c3d7c8; line-height: 1.8; block-size: 3.6em; overflow: auto; margin: 14px 0 9px; }
.story-controls { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 10px; align-items: center; }
.story-controls button { min-height: 48px; border-radius: 9px; font-size: .75rem; }
.story-action { background: #d3ebbd; color: #19492f; padding: 10px 20px; border: 0; font-weight: 800!important; }
.story-action:hover { background: #e2f4d0; }
.story-back { background: transparent; color: #d8e9d6; border: 1px solid #ffffff30; padding: 10px 8px; }
/* Keep the primary button in place when Back is unavailable; still inaccessible. */
.story-back[hidden] { display: block!important; visibility: hidden; pointer-events: none; }
.story-frame[data-mode=watch]:not(.is-playing) .scan-beam { animation-play-state: paused; }
.film-footnote { display: flex; justify-content: space-between; gap: 20px; font-size: .62rem; color: #7a8c7d; padding-top: 28px; }
.workflow-section { border-bottom: 1px solid #d8e3d8; padding: 80px 0; }
.story-site .section-head h2 { font-size: clamp(1.9rem,3vw,2.6rem); letter-spacing: -.04em; }
.workflow-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.workflow-grid article { border-top: 1px solid #c4d4c4; padding-top: 24px; }
.workflow-number { font: 500 .78rem 'Segoe UI',sans-serif; color: #7d9986; }
.workflow-grid h3 { font-size: 1.2rem; margin: 18px 0 12px; }.workflow-grid p { font-size: .82rem; line-height: 2; color: #5c7164; margin: 0; }
.feature-foot { display: flex; align-items: center; gap: 14px; margin-top: 25px; font-size: .66rem; color: #3e7254; }
.small-check { width: 24px; height: 24px; background: #dfeeda; border-radius: 50%; text-align: center; line-height: 24px; }
.inventory-section { background: #edf2ea; padding: 85px 0 60px; }
.inventory-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; }
.inventory-heading .section-head { margin-bottom: 26px; }.inventory-heading .section-head p:last-child { margin-bottom: 0; }
.inventory-heading .demo-filters { margin-bottom: 18px; gap: 5px; }
.inventory-heading .demo-filters button { display: flex; gap: 7px; align-items: center; padding: 10px 15px; background: transparent; border: 1px solid #c9d8c9; border-radius: 8px; }
.inventory-heading .demo-filters button[aria-pressed=true] { background: #174b3b; color: white; border-color: #174b3b; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }.safe-dot { background: #58a873; }.imminent-dot { background: #cba13e; }.expired-dot { background: #c06862; }
.medicine-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: start; min-height: 400px; }
.medicine-tile { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid #dbe4d9; transition: box-shadow .25s, transform .25s; animation: scene-in .3s ease both; }
.medicine-tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px #20422b12; }
.medicine-photo { position: relative; aspect-ratio: 1.45; overflow: hidden; background: #f8f8f6; }
.medicine-photo img { height: 100%; width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.medicine-status { display: inline-flex; padding: 4px 12px; margin-bottom: 12px; border-radius: 6px; font-size: .64rem; }
.medicine-info { padding: 22px 25px 20px; }.medicine-info>p { color: #7f8f80; font-size: .6rem; margin: 0 0 5px; }.medicine-info h3 { font-size: 1.15rem; margin: 0 0 18px; }
.medicine-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; border-top: 1px solid #e4ebe0; padding-top: 13px; font-size: .62rem; color: #778a79; }
.medicine-meta strong { display: block; color: #365340; font-size: .78rem; font-weight: 600; margin-top: 3px; }.medicine-meta>span+span { border-inline-start: 1px solid #e4ebe0; padding-inline-start: 20px; }
.medicine-line { height: 3px; }.safe-line { background: #60a57c; }.imminent-line { background: #d5ad5b; }.expired-line { background: #c57b70; }
.gallery-caption { display: flex; justify-content: space-between; gap: 30px; color: #718371; font-size: .6rem; margin-top: 22px; }.gallery-caption>span:first-child { flex-shrink: 0; }
.connected-section { padding: 85px 0; }.connected-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.connected-grid article { border: 1px solid #d3dfd0; padding: 36px; border-radius: 18px; background: #f1f4ed; }.connected-grid article:last-child { background: #e4ece1; }
.connected-grid h3 { font-size: 1.3rem; margin: 32px 0 8px; }.connected-grid p { font-size: .84rem; color: #5c7361; max-width: 470px; }
.connection-art { display: flex; align-items: center; gap: 12px; height: 60px; }.connection-art span { display: grid; place-items: center; border-radius: 50%; background: white; border: 1px solid #cadcc8; width: 58px; height: 58px; font-size: .68rem; }.connection-art i { flex: 0 1 40px; height: 1px; background: #a8c2a6; }.connection-art img { border-radius: 13px; }
.community-art { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 60px; }.community-art span { padding: 11px 16px; border: 1px solid #c6d6c1; background: #ffffff9e; border-radius: 10px; font-size: .75rem; }
.story-site .contact-panel { background: #103e2e; }.story-site .contact-panel .btn--primary { background: #d3ebbd; color: #214d31; }
.intro-discovery { margin: 16px 0 0; color: #5c7164; font-size: .76rem; line-height: 1.9; max-width: 410px; }
.discovery-section { padding: 0 0 40px; }
.discovery-panel { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 46px; padding: 32px; background: #e4ece1; border: 1px solid #ccdcca; border-radius: 18px; }
.discovery-panel h2 { font-size: clamp(1.5rem,2.5vw,2rem); line-height: 1.6; margin: 8px 0 10px; color: #164b36; }
.discovery-panel>div>p:last-child { max-width: 550px; margin: 0; font-size: .82rem; line-height: 1.9; color: #4d6756; }
.discovery-action { display: grid; gap: 10px; min-width: 0; text-align: center; }
.discovery-action>span { color: #536c5a; font-size: .6rem; }
.start-options { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border: 1px solid #b8cbb7; border-radius: 10px; }
.start-options button { padding: 10px 7px; min-height: 44px; border: 0; border-radius: 7px; background: transparent; color: #365a42; font-size: .72rem; line-height: 1.7; transition: background .18s, color .18s; }
.start-options button[aria-pressed=true] { background: #1c553f; color: #fff; }
.start-explanation { min-height: 70px; text-align: start; display: grid; align-items: center; }
.start-explanation p { color: #3d5d46; font-size: .75rem; line-height: 1.85; margin: 0; animation: scene-in .2s ease both; }
@media(max-width:800px) { .discovery-panel { grid-template-columns: 1fr; padding: 24px; gap: 20px; }.discovery-panel h2 { font-size: 1.5rem; }.start-options button { font-size: .68rem; }.start-explanation { min-height: 82px; } }
@keyframes scene-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes field-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scan-page { from { top: 30px; } to { top: 150px; } }
@keyframes bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes archive-in { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes check-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@media(max-width:1100px) { .story-layout { gap: 30px; grid-template-columns: .85fr 1fr; }.story-intro h1 { font-size: 3rem; }.story-lead { font-size: .9rem; }.story-frame { padding: 20px; }.inventory-heading { align-items: start; flex-direction: column; gap: 0; }.inventory-heading .demo-filters { padding-top: 0; }.workflow-grid { gap: 25px; } }
@media(max-width:800px) { .story-site .wrap { width: calc(100% - 40px); }.story-layout { grid-template-columns: 1fr; gap: 25px; }.story-hero { padding-top: 38px; }.story-intro { padding-bottom: 0; }.story-intro h1 { font-size: clamp(2.5rem,7.8vw,3.6rem); margin: 15px 0; }.story-lead { max-width: 560px; }.story-intro .cta-row { margin-top: 24px; }.intro-points { margin-top: 22px; }.story-frame { width: 100%; max-width: 600px; margin: 10px auto 0; }.film-footnote { flex-direction: column; gap: 4px; padding-top: 18px; }.workflow-section,.inventory-section,.connected-section { padding-top: 58px; padding-bottom: 58px; }.workflow-grid { grid-template-columns: 1fr; gap: 28px; }.workflow-grid article { position: relative; padding-inline-start: 43px; }.workflow-number { position: absolute; inset-inline-start: 0; top: 27px; }.workflow-grid h3 { margin-top: 0; }.feature-foot { margin-top: 16px; }.medicine-gallery { gap: 12px; }.medicine-info { padding: 18px 14px; }.medicine-info h3 { font-size: .95rem; }.medicine-meta { grid-template-columns: 1fr; gap: 9px; }.medicine-meta>span+span { border: 0; padding: 0; }.medicine-photo { aspect-ratio: 1; }.gallery-caption { flex-direction: column; gap: 5px; }.connected-grid { grid-template-columns: 1fr; }.connected-grid article { padding: 27px; } }
@media(max-width:480px) { .story-site .wrap { width: calc(100% - 32px); }.story-frame { padding: 17px 15px; border-radius: 16px; }.film-scene h2 { font-size: 1.42rem; }.scene-subtitle { font-size: .64rem; }.paper-selection { gap: 8px; }.paper { padding: 20px 8px 12px; }.paper-mark { font-size: .54rem; }.paper strong { font-size: .9rem; }.paper b { font-size: .85rem; }.paper small { font-size: .51rem; }.reading-visual { gap: 15px; padding-inline: 0; }.extracted-fields>span { padding: 10px 8px; font-size: .62rem; }.extracted-fields i { margin-inline-end: 6px; }.story-controls { gap: 6px; }.story-controls button { font-size: .72rem; }.medicine-gallery { grid-template-columns: 1fr; min-height: 0; gap: 18px; }.medicine-tile { display: grid; grid-template-columns: 42% 1fr; position: relative; }.medicine-photo { aspect-ratio: auto; min-height: 205px; }.medicine-info { padding: 24px 18px; }.medicine-meta { grid-template-columns: 1fr 1fr; gap: 12px; }.medicine-meta strong { font-size: .68rem; }.medicine-info h3 { font-size: 1.02rem; }.medicine-status { font-size: .57rem; }.medicine-line { position: absolute; bottom: 0; right: 0; left: 0; }.medicine-info>p { font-size: .54rem; }.inventory-heading .demo-filters button { padding: 9px 13px; font-size: .68rem; }.scene-kicker { font-size: .59rem; } }
@media(max-width:360px) { .story-site .wrap { width: calc(100% - 24px); }.story-intro h1 { font-size: 2.4rem; }.story-frame { padding-inline: 12px; }.paper small { font-size: .48rem; }.reading-visual { grid-template-columns: .65fr 1fr; gap: 12px; }.medicine-meta { grid-template-columns: 1fr; }.medicine-photo { min-height: 230px; }.medicine-info { padding: 22px 12px; } }
@media(max-width:480px) {
  .film-heading { padding-bottom: 12px; }
  .story-mode { margin-top: 12px; }
  .film-stage { block-size: 24rem; min-height: 0; }
  .film-scene { padding: 18px 0 8px; }
  .paper-selection { padding: 16px 0 10px; }
  .paper { padding: 16px 8px 10px; }
  .paper-mark { margin: 6px 0 9px; }
  .paper-lines { height: 18px; margin-bottom: 8px; }
  .paper b { margin-top: 8px; }
  .paper small { line-height: 1.7; }
  .story-progress li { min-height: 38px; padding-top: 6px; }
  .story-caption { min-height: 0; margin: 10px 0; }
}
@media(max-width:360px) {
  .film-stage { block-size: 26rem; }
  .story-caption { block-size: 5.4em; }
}
@media(prefers-reduced-motion:reduce) { .story-site *, .story-site *::before, .story-site *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }.paper:hover,.medicine-tile:hover { transform: none; }.scan-beam { top: 150px; } }