/* Selected transitions.dev recipes, tuned for a quiet editorial website. */
:root {
  --duration-stagger:40ms; --duration-quick:150ms; --duration-fast:250ms;
  --duration-slow:400ms; --duration-very-slow:500ms;
  --ease-smooth-out:cubic-bezier(.22,1,.36,1); --ease-in-out:ease-in-out;
  --distance-micro:4px; --distance-medium:12px; --blur-small:2px; --blur-medium:3px;
  --stagger-dur:var(--duration-very-slow); --stagger-stagger:var(--duration-stagger);
  --stagger-distance:var(--distance-medium); --stagger-blur:var(--blur-medium);
  --stagger-ease:var(--ease-smooth-out);
  --tabs-dur:var(--duration-fast); --tabs-ease:var(--ease-smooth-out);
  --acc-expand:var(--duration-fast); --acc-collapse:var(--duration-fast);
  --acc-chevron:var(--duration-fast); --acc-ease:var(--ease-smooth-out);
}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Only hidden after the observer and replay controls have been installed. */
.motion-ready .t-stagger-line {opacity:0;transform:translateY(var(--stagger-distance));filter:blur(var(--stagger-blur));transition:opacity var(--stagger-dur) var(--stagger-ease),transform var(--stagger-dur) var(--stagger-ease),filter var(--stagger-dur) var(--stagger-ease);transition-delay:calc(var(--stagger-stagger) * var(--reveal-order,0))}
.motion-ready .t-stagger-line.is-shown {opacity:1;transform:none;filter:none}
.motion-ready .t-stagger-line:focus-within {opacity:1;transform:none;filter:none}
.btn,.button-link {transition:transform var(--duration-fast) var(--ease-smooth-out);touch-action:manipulation}
.button-link:active,.btn:active {transform:scale(.98)}
.button-link:hover {box-shadow:0 12px 36px rgba(245,177,92,.14)}
.arrow,.motion-arrow {display:inline-block;transition:transform var(--duration-fast) var(--ease-smooth-out)}
.text-link {gap:12px}
.nav a,.site-nav a {min-height:44px;display:inline-flex;align-items:center}
@media(hover:hover) and (pointer:fine) {
  .btn:hover,.button-link:hover {transform:translateY(-2px)}
  a:hover>.arrow,a:hover>.motion-arrow {transform:translate(2px,-1px)}
  .floating .phone {transition:transform var(--duration-slow) var(--ease-smooth-out)}
  .hero:hover .floating.left .phone {transform:translateY(-4px)}
  .hero:hover .floating.right .phone {transform:translateY(4px)}
}
/* Sliding selection and a soft, user-controlled screen change. */
.screen-tabs.t-tabs {position:relative;display:inline-flex;flex-wrap:nowrap;gap:3px;padding:3px;background:#d9d3c9;border-radius:999px;width:max-content;max-width:100%;isolation:isolate}
.screen-tabs .t-tab {position:relative;z-index:1;border:0;border-radius:999px;background:transparent;padding:10px 15px;min-height:44px;font:500 12px/1.4 var(--sans);cursor:pointer;color:#454640;transition:color var(--tabs-dur) var(--tabs-ease)}
.screen-tabs .t-tab[aria-pressed=true] {background:transparent;color:#fff9ec;border-color:transparent}
.t-tabs-pill {position:absolute;z-index:0;top:3px;left:0;height:44px;border-radius:999px;background:#252a2a;pointer-events:none;transition:transform var(--tabs-dur) var(--tabs-ease),width var(--tabs-dur) var(--tabs-ease)}
.preview-phone,.product-visual .phone {isolation:isolate}
.preview-screen {position:relative;width:100%;aspect-ratio:1320/2868;border-radius:31px;overflow:hidden;background:linear-gradient(180deg,#0b2034,#06111e)}
.preview-phone .preview-screen {border-radius:30px}
.preview-screen>img {display:block;width:100%;height:100%;object-fit:cover;border-radius:0!important}
/* Clip the list at 88.4%; preserve only the navigation from the lower portion.
   The row dated 22 Sep falls outside both clips, including the bar's corners. */
.preview-screen[data-screen-kind=history]>img:first-child {clip-path:inset(0 0 11.6% 0)}
.preview-screen>.preview-navigation {position:absolute;inset:0;clip-path:inset(88.5% 4.15% 4.75% 4.15% round 6% / 2.6%)}
.preview-frame {position:absolute;inset:6px;width:calc(100% - 12px)!important;height:calc(100% - 12px)!important;object-fit:cover;border-radius:inherit!important}
.preview-phone::after,.product-visual .phone::after {z-index:4}
.preview-label {margin:14px 0 0;color:var(--ivory-soft);font:400 12px/1.5 var(--sans);text-align:center}
.preview-label span {margin-left:8px;color:var(--ember)}
/* Real screens replace the decorative mark; the existing night palette stays. */
body[data-site=unwander] .hero {min-height:740px;padding-block:64px 76px}
body[data-site=unwander] .hero__grid {grid-template-columns:minmax(0,1.12fr) minmax(320px,.85fr);gap:72px}
.app-preview {min-width:0;display:flex;flex-direction:column;align-items:center;position:relative}
.preview-stage {position:relative;display:grid;place-items:center;width:100%;padding:8px 0 28px}
.preview-orbit {position:absolute;inset:12% -4%;border:1px solid #b6c7df16;border-radius:50%;transform:rotate(-14deg)}
.preview-orbit::before {content:'';position:absolute;inset:12%;border:1px solid #b6c7df12;border-radius:50%}
.preview-phone {position:relative;width:232px;padding:6px;border:1px solid #73819578;border-radius:36px;background:#040d18;box-shadow:0 32px 64px #0005,0 0 100px #f5b15c0c;overflow:hidden;transform:rotate(3deg)}
.preview-phone img {display:block;width:100%;height:auto;aspect-ratio:1320/2868;border-radius:30px;object-fit:cover}
.preview-phone::after {content:'';position:absolute;width:28%;height:13px;top:13px;left:36%;border-radius:20px;background:#050708;pointer-events:none}
.app-preview .t-tabs {margin:0;background:#162c43;border:1px solid var(--rule)}
.app-preview .t-tabs-pill {background:#f5b15c}
.app-preview .t-tab {color:#c4d2dd}
.app-preview .t-tab[aria-pressed=true] {color:#2b1605}
.feature-card {min-height:355px}
.feature-card__number {margin-bottom:54px}
.faq-list {max-width:860px;margin:42px 0 28px;border-top:1px solid var(--rule)}
.t-acc {border-bottom:1px solid var(--rule)}
.t-acc h3 {margin:0}
.t-acc-head {width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;min-height:68px;text-align:left;color:var(--ivory);background:transparent;border:0;font:400 clamp(20px,2.5vw,27px)/1.35 var(--serif);cursor:pointer}
.t-acc-panel {display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--acc-collapse) var(--acc-ease)}
.t-acc-panel-inner {min-height:0;overflow:hidden;opacity:0;transition:opacity var(--acc-collapse) var(--acc-ease)}
.t-acc-panel-inner p {max-width:66ch;color:var(--ivory-soft);margin:0 0 22px}
.t-acc[data-open=true] .t-acc-panel {grid-template-rows:1fr;transition-duration:var(--acc-expand)}
.t-acc[data-open=true] .t-acc-panel-inner {opacity:1}
.t-acc-chevron {flex:0 0 24px;transform:scaleY(1);transition:transform var(--acc-chevron) var(--acc-ease)}
.t-acc-chevron svg {width:20px;fill:none;stroke:var(--ember);stroke-width:1.5}
.t-acc-chevron path {vector-effect:non-scaling-stroke}
.t-acc[data-open=true] .t-acc-chevron {transform:scaleY(-1)}
.mobile-download {display:none}
@media(max-width:880px) {
  body[data-site=unwander] .hero__grid {grid-template-columns:1fr;gap:54px}
  body[data-site=unwander] .hero {padding-block:64px 76px;min-height:0}
  .preview-stage {max-width:440px}
}
@media(max-width:700px) {
  .editorial .product-copy {padding:32px 26px}
  .editorial .work-card>.store-availability {padding-inline:26px}
  .editorial .product-visual {height:495px}
  .screen-tabs .t-tab {padding-inline:13px}
}
@media(max-width:640px) {
  body[data-site=unwander] .hero {padding-top:48px}
  body[data-site=unwander] .hero__grid {gap:42px}
  body[data-site=unwander] .hero__copy h1 {max-width:10ch}
  .preview-phone {width:208px;border-radius:32px}
  .preview-phone img {border-radius:26px}
  .preview-phone .preview-screen {border-radius:26px}
  .preview-phone::after {height:11px;top:12px}
  .mobile-download:not([hidden]) {display:flex;position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);left:18px;right:18px;z-index:50;justify-content:center;pointer-events:none}
  .mobile-download .button-link {pointer-events:auto;min-height:48px;box-shadow:0 10px 28px #0006;font-size:13px;gap:12px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto!important}
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .motion-ready .t-stagger-line {opacity:1;transform:none;filter:none}
  .floating .phone,.button-link:hover,.btn:hover {transform:none!important}
}