/* mydu.app shared components (home, 404; any app page may opt in). Load after base.css. */

/* Site bar. Without site.js (no-JS visitors, 404.html) it is always in its stuck state, so it stays readable. */
.m-bar{position:sticky;top:0;z-index:50;height:var(--m-bar-h);transition:background-color .2s,box-shadow .2s}
.m-bar__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.m-bar__nav{display:flex;gap:clamp(16px,2.4vw,28px);font-size:15px}
.m-bar__nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;color:var(--site-ink-2);text-decoration:none}
.m-bar__nav a:hover{color:var(--site-ink)}
.m-bar.is-stuck,html:not(.js) .m-bar{background:color-mix(in oklab,var(--site-canvas) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 1px 0 var(--site-line)}

/* Section pattern */
.m-section{padding-block:var(--m-section-y)}
.m-eyebrow{font-size:var(--m-t-eyebrow);font-weight:600;line-height:1.4;color:var(--site-ink-3)}
.m-h1{font-size:var(--m-t-display);font-weight:700;letter-spacing:-.045em;line-height:.96;text-wrap:balance}
.m-h2{font-size:var(--m-t-h2);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance;max-width:18ch}
.m-h3{font-size:var(--m-t-h3);font-weight:600;letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
.m-lead{font-size:var(--m-t-lead);line-height:1.45;color:var(--site-ink-2);max-width:40ch;text-wrap:pretty}
.m-eyebrow + :is(.m-h1,.m-h2){margin-top:16px}
:is(.m-h1,.m-h2) + .m-lead{margin-top:20px}
.m-link{color:var(--site-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.m-link:hover{text-decoration-thickness:2px}

/* Device frames. .m-device is the size container; its children use cq units. */
.m-device{--m-dev-bezel:1.9cqw;--m-dev-r:15.5cqw;--m-dev-screen-r:13.6cqw;--m-dev-ratio:1320 / 2868;
  --m-dev-island-w:28cqw;--m-dev-island-h:8.4cqw;--m-dev-island-top:3.4cqw;--m-dev-color:#0B0B0D;--m-dev-edge:rgb(255 255 255 / .10);
  --m-dev-shadow:0 2px 4px rgb(0 0 0 / .06),0 30px 60px -18px rgb(0 0 0 / .30),0 60px 110px -30px rgb(0 0 0 / .22);
  container-type:inline-size;position:relative;width:var(--m-dev-w,100%);margin:0}
.m-device__frame{position:relative;padding:var(--m-dev-bezel);border-radius:var(--m-dev-r);background:var(--m-dev-color);box-shadow:0 0 0 1px var(--m-dev-edge),var(--m-dev-shadow)}
.m-device__screen{position:relative;overflow:clip;border-radius:var(--m-dev-screen-r);aspect-ratio:var(--m-dev-ratio);background:#F2F2F7}
.m-device__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.m-device--phone .m-device__frame::after{content:"";position:absolute;z-index:2;top:var(--m-dev-island-top);left:50%;translate:-50% 0;width:var(--m-dev-island-w);height:var(--m-dev-island-h);border-radius:999px;background:#000}
.m-device--pad{--m-dev-bezel:2.4cqw;--m-dev-r:4.2cqw;--m-dev-screen-r:3.2cqw;--m-dev-ratio:2064 / 2752}
.m-device--pad-land{--m-dev-bezel:1.6cqw;--m-dev-r:3.6cqw;--m-dev-screen-r:2.2cqw;--m-dev-ratio:2752 / 2064}
.m-device--cut .m-device__frame{padding-bottom:0;border-end-start-radius:0;border-end-end-radius:0}
.m-device--cut .m-device__screen{border-end-start-radius:0;border-end-end-radius:0}
.m-device--mac{--m-dev-ratio:1800 / 1125}
.m-device--mac .m-device__frame{padding:0;border-radius:0;background:none;box-shadow:none}
.m-device--mac .m-device__screen{overflow:visible;border-radius:0;background:none}
.m-device--mac .m-device__screen img{border-radius:2.5% / 4%;box-shadow:0 0 0 1px rgb(0 0 0 / .10),var(--m-dev-shadow)}

/* Film: a reel in a native dialog, opened by [data-m-film]; loop: a muted clip played only while visible */
.m-film{width:min(1120px,100vw - 32px);max-width:none;max-height:calc(100svh - 32px);padding:16px;border:0;border-radius:20px;background:#101010;color:#F2F1EC}
.m-film::backdrop{background:rgb(0 0 0 / .72)}
.m-film__title{font-size:17px;font-weight:600;margin-bottom:12px}
.m-film video{width:100%;height:auto;border-radius:12px;background:#000}
.m-film__desc{margin-top:12px;max-width:70ch;font-size:14px;color:rgb(255 255 255 / .8)}
.m-film__close{margin-top:12px;min-height:44px;padding:0 18px;border:0;border-radius:10px;background:rgb(255 255 255 / .12);color:#FFFFFF;font-weight:600;cursor:pointer}
.m-film :focus-visible{outline-color:#FFFFFF}
@media (min-width:960px){.m-film{padding:24px}}
.m-loop{width:100%;height:auto;border-radius:inherit;background:#000}

/* FAQ with details/summary */
.m-faq{border-top:1px solid var(--site-line)}
.m-faq details{border-bottom:1px solid var(--site-line)}
.m-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;font-weight:600;list-style:none;cursor:pointer}
.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--site-ink-3);border-bottom:2px solid var(--site-ink-3);rotate:45deg;translate:0 -3px;transition:rotate .2s var(--m-ease-out),translate .2s var(--m-ease-out)}
.m-faq details[open] summary::after{rotate:225deg;translate:0 2px}
.m-faq__a{max-width:62ch;padding-bottom:20px;color:var(--site-ink-2)}

/* Site footer (home, 404) */
body:has(> .m-foot){display:flex;flex-direction:column;min-height:100svh}
body:has(> .m-foot) > main{flex:1 0 auto}
.m-foot{padding:40px 0 56px;font-size:14px;color:var(--site-ink-3)}
.m-foot__in{display:grid;gap:12px}
.m-foot__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px}
.m-foot a{color:var(--site-ink-2);text-decoration:none}
.m-foot a:not(.m-mark){display:inline-block;padding-block:12px;margin-block:-12px}
.m-foot a:hover{color:var(--site-ink);text-decoration:underline;text-underline-offset:3px}
.m-foot .m-mark{color:var(--site-ink)}