/* hader.site — motion graphics: the "day in Hader" story, the update pipeline, icon draw-in, scroll progress.
   Every animation describes only its starting frame ("from"), so with reduced motion everything shows its finished state. */
html { --dir: 1; }
html[dir="rtl"] { --dir: -1; }

/* ------------------------------------------------------------ scroll progress */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: linear-gradient(90deg, var(--brand), #7b5cf0, var(--gold)); transform-origin: left; transform: scaleX(0); }
html[dir="rtl"] .progress { transform-origin: right; }

/* ------------------------------------------------------------ feature icons draw themselves */
.f-ico svg { stroke-dasharray: 90; }
.js .reveal.in .f-ico svg { animation: draw 1.3s .25s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes draw { from { stroke-dashoffset: 90; } }
.feature:hover .f-ico { animation: nudge .6s ease; }
@keyframes nudge { 30% { transform: translateY(-4px) rotate(-6deg); } 60% { transform: translateY(1px) rotate(3deg); } }

/* ------------------------------------------------------------ a day in Hader */
.day-section { position: relative; overflow: hidden; }
.day { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.day-steps { display: grid; gap: 10px; align-content: start; }
.day-steps button { position: relative; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 4px 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: start; font-weight: 600; color: var(--ink-2); transition: border-color .25s, box-shadow .25s, color .25s; }
.day-steps button[aria-selected="true"] { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); color: var(--ink); box-shadow: var(--shadow); }
.ds-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
[aria-selected="true"] .ds-n { background: linear-gradient(135deg, #3d63e6, var(--brand-2)); color: #fff; }
.ds-bar { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin-top: 8px; }
.ds-bar i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 3px; }
.day.running [aria-selected="true"] .ds-bar i { animation: fill var(--scene-ms, 5200ms) linear both; }
.day.paused [aria-selected="true"] .ds-bar i { animation-play-state: paused; }
@keyframes fill { from { width: 0; } to { width: 100%; } }

.day-stage { position: relative; min-height: 470px; border-radius: 24px; border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-lg);
  background: radial-gradient(ellipse 90% 70% at 50% 0%, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface) 70%); }
.sky { position: absolute; inset: 0 0 auto; height: 90px; pointer-events: none; }
.sun { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe7a3, var(--gold) 60%, #e39b1f); box-shadow: 0 0 0 8px rgb(246 196 83 / .18), 0 0 40px 10px rgb(246 196 83 / .35);
  left: calc(var(--sun-x, 10) * 1%); top: calc(var(--sun-y, 50) * 1px); translate: -50% 0; transition: left 1.4s cubic-bezier(.4, 0, .2, 1), top 1.4s cubic-bezier(.4, 0, .2, 1); }
.day-time { position: absolute; top: 18px; inset-inline-end: 20px; font-weight: 700; font-size: 15px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); padding: 3px 12px; border-radius: 99px; font-variant-numeric: tabular-nums; }

.scene { position: absolute; inset: 70px 28px 28px; display: flex; align-items: center; justify-content: center; gap: 34px; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s .45s; }
.scene.on { opacity: 1; visibility: visible; transition: opacity .45s ease .1s; }
.line { display: block; height: 8px; border-radius: 6px; background: var(--bg-2); }
.w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; } .w50 { width: 50%; } .w60 { width: 60%; } .w80 { width: 80%; }

/* a phone drawn in HTML */
.mock-phone { position: relative; width: 210px; height: 370px; flex-shrink: 0; border-radius: 32px; padding: 16px 14px; background: var(--surface); border: 7px solid #0b0d12; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 12px; }
.mp-top { display: flex; align-items: center; gap: 8px; }
.mp-logo { width: 22px; height: 22px; border-radius: 7px; background: url("img/logo.svg") center / cover; }
.mp-hello { font-weight: 700; font-size: 15px; }
.mp-ring { position: relative; width: 132px; height: 132px; margin: 4px auto; }
.mp-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mp-ring circle { fill: none; stroke-width: 9; }
.mp-ring .t { stroke: var(--bg-2); }
.mp-ring .b { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 250; }
.mp-timer { position: absolute; inset: 0; display: grid; place-items: center; font-size: 19px; font-variant-numeric: tabular-nums; }
.mp-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 13px; background: linear-gradient(135deg, #3d63e6, var(--brand-2)); color: #fff; font-weight: 600; font-size: 14px; overflow: hidden; }
.mp-btn svg { font-size: 16px; }
.ripple { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: rgb(255 255 255 / .5); left: 50%; top: 50%; translate: -50% -50%; opacity: 0; }
.tap { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgb(255 255 255 / .35); border: 2px solid #fff; left: 62%; top: 50%; translate: -50% -50%; opacity: 0; pointer-events: none; }
.mp-ok { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ok); background: var(--ok-soft); padding: 8px 10px; border-radius: 11px; }

.s-clock.play .ripple { animation: ripple .7s 1.1s ease-out both; }
@keyframes ripple { from { opacity: .9; width: 30px; height: 30px; } to { opacity: 0; width: 320px; height: 320px; } }
.s-clock.play .tap, .s-req.play .mp-btn .tap { animation: tap 1.2s .5s ease both; }
@keyframes tap { 0% { opacity: 0; transform: scale(1.8); } 40% { opacity: 1; transform: scale(1); } 60% { opacity: 1; transform: scale(.8); } 100% { opacity: 0; transform: scale(1); } }
.s-clock.play .mp-ring .b { animation: ring-in 2.4s 1.3s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes ring-in { from { stroke-dashoffset: 314; } }
.s-clock.play .mp-ok { animation: pop-in .5s 1.6s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.92); } }

/* map with a work zone and a pin that drops into it */
.geo-map { position: relative; width: 300px; height: 300px; flex-shrink: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); box-shadow: var(--shadow); }
.road { position: absolute; background: var(--surface); }
.road.h { inset: 38% 0 auto; height: 18px; }
.road.h2 { inset: 78% 0 auto; height: 12px; }
.road.v { inset: 0 auto 0 30%; width: 16px; }
.building { position: absolute; border-radius: 6px; background: color-mix(in srgb, var(--line) 85%, var(--bg-2)); }
.b1 { left: 6%; top: 8%; width: 18%; height: 24%; } .b2 { left: 42%; top: 6%; width: 26%; height: 26%; } .b3 { left: 46%; top: 50%; width: 22%; height: 22%; }
.gm-zone { position: absolute; left: 58%; top: 52%; width: 170px; height: 170px; translate: -50% -50%; border-radius: 50%; background: rgb(47 85 212 / .14); border: 2px dashed var(--brand); }
.gm-pin { position: absolute; left: 58%; top: 52%; translate: -50% -100%; font-size: 40px; color: var(--brand); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .25)); }
.gm-pin svg { fill: var(--surface); }
.gm-label { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 12px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow); font-size: 12.5px; font-weight: 700; color: var(--ok); }
.s-clock.play .gm-zone { animation: zone-in .8s .2s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes zone-in { from { transform: scale(.3); opacity: 0; } }
.s-clock.play .gm-pin { animation: pin-drop .7s 1.3s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes pin-drop { from { transform: translateY(-140px); opacity: 0; } 60% { opacity: 1; } }
.s-clock.play .gm-label { animation: pop-in .5s 2s cubic-bezier(.2, .9, .3, 1.3) both; }

/* live dashboard */
.dash-card { width: 340px; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 16px; }
.dc-head { display: flex; align-items: center; justify-content: space-between; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #e5484d; letter-spacing: .08em; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.dc-big { display: flex; align-items: baseline; gap: 8px; }
.dc-big b { font-size: 54px; line-height: 1; letter-spacing: -.03em; color: var(--brand); font-variant-numeric: tabular-nums; }
.dc-big span { color: var(--muted); font-weight: 600; }
.dc-avatars { display: flex; }
.dc-avatars i { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 3px solid var(--surface); margin-inline-start: -8px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; }
.dc-avatars i:first-child { margin-inline-start: 0; }
.dc-avatars .more { background: var(--bg-2); color: var(--ink-2); width: auto; padding: 0 8px; border-radius: 99px; }
.s-dash.play .dc-avatars i { animation: pop-in .45s var(--d) cubic-bezier(.2, .9, .3, 1.4) both; }
.dc-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.dc-bars i { flex: 1; height: var(--h); border-radius: 7px 7px 3px 3px; background: color-mix(in srgb, var(--brand) 55%, var(--bg-2)); transform-origin: bottom; }
.dc-bars .today { background: linear-gradient(180deg, #5b7cf5, var(--brand-2)); }
.s-dash.play .dc-bars i { animation: grow .8s var(--d) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes grow { from { transform: scaleY(0); } }
.feed { display: grid; gap: 10px; width: 250px; }
.feed-row { display: grid; grid-template-columns: 10px 1fr; gap: 2px 10px; align-items: center; padding: 12px 14px; border-radius: 15px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 13px; }
.feed-row b { font-size: 13.5px; }
.feed-row > span:last-child { grid-column: 2; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; grid-row: span 2; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--gold); } .dot.info { background: var(--brand); }
.s-dash.play .feed-row { animation: slide-in .55s var(--d) cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes slide-in { from { opacity: 0; transform: translateX(calc(var(--dir) * 40px)); } }

/* request flies from the phone to the manager, who approves it */
.s-req { gap: 0; }
.rq-title { font-weight: 700; font-size: 16px; }
.rq-field { padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: grid; gap: 6px; }
.rq-field.tall { padding-block: 12px; }
.mp-btn.send { margin-top: auto; }
.flight { position: relative; width: 150px; height: 60px; flex-shrink: 0; }
.trail { position: absolute; top: 50%; inset-inline: 6px; border-top: 2px dashed color-mix(in srgb, var(--brand) 50%, transparent); }
.fly { position: absolute; top: 50%; inset-inline-start: 0; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brand); color: #fff; font-size: 22px; box-shadow: 0 10px 24px -8px rgb(47 85 212 / .7); opacity: 0; }
.s-req.play .fly { animation: fly 1.3s 1.2s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes fly { 0% { opacity: 0; transform: translateX(0) scale(.6); } 15% { opacity: 1; transform: translateX(0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(var(--dir) * 110px)) scale(.7); } }
.s-req.play .trail { animation: trail 1.3s 1.2s ease both; }
@keyframes trail { from { clip-path: inset(0 100% 0 0); } }
html[dir="rtl"] .s-req.play .trail { animation-name: trail-rtl; }
@keyframes trail-rtl { from { clip-path: inset(0 0 0 100%); } }
.mgr { position: relative; width: 300px; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 14px; }
.mgr-head { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.bell { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--bg-2); font-size: 19px; }
.bell i { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 19px; height: 19px; border-radius: 99px; background: #e5484d; color: #fff; font: 700 11px/19px var(--font); text-align: center; }
.s-req.play .bell { animation: ring-bell .8s 2.5s ease both; }
@keyframes ring-bell { 20% { transform: rotate(16deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(9deg); } 80% { transform: rotate(-5deg); } }
.s-req.play .bell i { animation: pop-in .4s 2.4s cubic-bezier(.2, .9, .3, 1.5) both; }
.mgr-row { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 12px; padding: 12px; border-radius: 15px; background: var(--bg-2); }
.mgr-row .av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #2f9e6a; color: #fff; font-weight: 700; }
.mgr-row b { display: block; font-size: 14px; }
.mgr-row div span { font-size: 12.5px; color: var(--muted); }
.approve { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--ok); color: #fff; font-size: 18px; stroke-width: 3; }
.approve .tap { left: 50%; border-color: var(--ok); background: rgb(16 145 88 / .25); }
.s-req.play .mgr-row { animation: pop-in .5s 2.4s cubic-bezier(.2, .9, .3, 1.2) both; }
.s-req.play .approve .tap { animation: tap 1s 3.2s ease both; }
.stamp { justify-self: center; padding: 8px 18px; border-radius: 12px; border: 2px solid var(--ok); color: var(--ok); font-weight: 700; rotate: -4deg; }
.s-req.play .stamp { animation: stamp .55s 3.9s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stamp { from { opacity: 0; transform: scale(2.2); } }

/* the month's report builds itself, then becomes files */
.sheet { width: 400px; padding: 20px 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; gap: 12px; }
.sh-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sh-head b { font-size: 17px; }
.sh-head span { color: var(--muted); font-size: 12.5px; }
.sh-row { display: grid; grid-template-columns: 90px 1fr 46px; align-items: center; gap: 12px; }
.sh-row .line { width: auto; }
.sh-row b { font-size: 13px; text-align: end; font-variant-numeric: tabular-nums; }
.sh-bar { height: 10px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.sh-bar i { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 70%, #fff)); }
html[dir="rtl"] .sh-bar i { margin-inline-start: auto; }
.sh-bar.warn i { background: var(--gold); }
.s-rep.play .sh-row { animation: slide-in .5s var(--d) ease both; }
.s-rep.play .sh-bar i { animation: bar-w 1s calc(var(--d) + .25s) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bar-w { from { width: 0; } }
.files { position: relative; display: grid; gap: 14px; justify-items: center; }
.file { display: grid; justify-items: center; gap: 4px; width: 92px; padding: 14px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 34px; }
.file b { font-size: 13px; }
.file.xls { color: #107c41; } .file.pdf { color: #d93025; }
.s-rep.play .file { animation: file-in .6s var(--d) cubic-bezier(.2, .9, .3, 1.35) both; }
@keyframes file-in { from { opacity: 0; transform: translateX(calc(var(--dir) * -60px)) rotate(-12deg) scale(.6); } }
.dl-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 20px; }
.s-rep.play .dl-arrow { animation: pop-in .4s 2.4s both, bounce 1s 2.8s ease-in-out 2; }
@keyframes bounce { 50% { transform: translateY(6px); } }

/* ------------------------------------------------------------ update pipeline (servers band) */
.pipeline { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; grid-template-rows: auto auto; gap: 18px 22px; align-items: center; max-width: 860px; margin: 0 auto 46px; padding: 26px 30px; border-radius: 24px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1); }
.pl-node { display: grid; justify-items: center; gap: 2px; text-align: center; }
.pl-node b { font-size: 15px; }
.pl-node > span:last-child { font-size: 12.5px; color: #b9c3e6; }
.pl-ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: rgb(255 255 255 / .1); font-size: 28px; margin-bottom: 6px; }
.pl-node.server .pl-ico { animation: glow 7s infinite; }
@keyframes glow { 0%, 50% { box-shadow: 0 0 0 0 rgb(69 208 138 / 0); } 58% { box-shadow: 0 0 0 10px rgb(69 208 138 / .25); } 70%, 100% { box-shadow: 0 0 0 0 rgb(69 208 138 / 0); } }
.pl-track { position: relative; height: 44px; }
.pl-line { position: absolute; top: 50%; inset-inline: 0; border-top: 2px dashed rgb(255 255 255 / .28); }
.pl-packet { position: absolute; top: 50%; inset-inline-start: 0; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border-radius: 13px; background: linear-gradient(135deg, var(--gold), #e39b1f); color: #1b1300; font-size: 20px; box-shadow: 0 0 24px rgb(246 196 83 / .55); animation: packet 7s infinite cubic-bezier(.5, 0, .3, 1); }
@keyframes packet { 0% { inset-inline-start: 0; opacity: 0; transform: scale(.6); } 6% { opacity: 1; transform: scale(1); } 40% { inset-inline-start: calc(100% - 40px); opacity: 1; transform: scale(1); } 48%, 100% { inset-inline-start: calc(100% - 40px); opacity: 0; transform: scale(.4); } }
.pl-steps { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pl-steps li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 13px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); font-size: 13.5px; font-weight: 600; color: #dfe5fb; animation: step-lit 7s calc(3.2s + var(--i) * .55s) infinite both; }
.chk { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / .1); font-size: 13px; stroke-width: 3; flex-shrink: 0; animation: chk-lit 7s calc(3.2s + var(--i) * .55s) infinite both; }
@keyframes step-lit { 0%, 100% { border-color: rgb(255 255 255 / .08); } 6%, 55% { border-color: rgb(69 208 138 / .55); background: rgb(69 208 138 / .1); } 62% { border-color: rgb(255 255 255 / .08); background: rgb(255 255 255 / .05); } }
@keyframes chk-lit { 0%, 100% { background: rgb(255 255 255 / .1); color: transparent; } 6%, 55% { background: #45d08a; color: #06210f; } 62% { background: rgb(255 255 255 / .1); color: transparent; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1060px) {
  .day { grid-template-columns: 1fr; }
  .day-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .day-steps button { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 12px 8px; }
}
@media (max-width: 760px) {
  .day-stage { min-height: 0; height: 640px; }
  .scene { inset: 64px 14px 18px; flex-direction: column; gap: 16px; }
  .mock-phone { width: 190px; height: 330px; }
  .s-clock .mock-phone { height: auto; gap: 10px; }
  .s-clock .mp-ok { font-size: 12px; white-space: nowrap; }
  .mp-ring { width: 100px; height: 100px; }
  .geo-map { width: 100%; max-width: 300px; height: 180px; flex-shrink: 0; }
  .gm-zone { width: 130px; height: 130px; }
  .dash-card, .sheet, .mgr { width: 100%; max-width: 340px; }
  .feed { width: 100%; max-width: 340px; grid-template-columns: 1fr 1fr; }
  .feed-row:nth-child(n+3) { display: none; }
  .flight { height: 54px; width: 60px; rotate: 90deg; }
  html[dir="rtl"] .flight { rotate: -90deg; }
  .s-req .mock-phone { height: 290px; }
  .s-req .rq-field.tall { display: none; }
  .fly { --dir: 1; }
  @keyframes fly { 0% { opacity: 0; transform: translateX(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(26px) scale(.7); } }
  .files { grid-auto-flow: column; align-items: center; }
  .pipeline { grid-template-columns: auto minmax(60px, 1fr) auto; padding: 20px 16px; }
  .pl-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .day-steps { gap: 6px; }
  .day-steps button { padding: 10px 4px; font-size: 12.5px; }
  .ds-n { width: 28px; height: 28px; border-radius: 9px; }
  .sh-row { grid-template-columns: 60px 1fr 40px; }
}
.mock-phone > * { flex-shrink: 0; } /* the drawn phone's contents keep their size; the request form's spacer gives way instead */
.mock-phone > .rq-field.tall { flex-shrink: 1; min-height: 0; overflow: hidden; }