/* UTTE site theme: implements the landing-page-design visual system. Loaded after forms.css. */
:root{--ease:cubic-bezier(.22,1,.36,1);--font:Manrope,"Noto Sans Devanagari",system-ui,sans-serif}

/* ---- B1 typography: one typeface, no italics, no ultra bold, no orphans ---- */
html,body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,.font-display,.font-sans{font-family:var(--font)!important}
.font-nepali{font-family:"Noto Sans Devanagari",Mukta,system-ui,sans-serif!important}
*,*::before,*::after{font-style:normal!important}
.font-extrabold,.font-black{font-weight:700!important}
h1,h2,h3,h4{text-wrap:balance}
p,li{text-wrap:pretty}

/* ---- B4 flat backgrounds, approved dark surface ---- */
.bg-slate-900{background-color:#181818!important}
.blur-3xl{display:none!important}
[style*="radial-gradient"]{background-image:none!important}
.bg-gradient-to-r[class*="from-terracotta"]{background-image:none!important;background-color:#123fa8}
.bg-gradient-to-r[class*="via-terracotta/20"]{background-image:none!important;background-color:#e2e8f0}
#top>div.select-none{display:none}
.space-y-5.border-l-2{border:2px solid rgba(18,63,168,.2)!important;border-radius:12px;padding:1.5rem!important}

/* ---- B5 hero: gradient heading text, 680px cap ---- */
#top h1{background-image:linear-gradient(to right,#000,#666);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;max-width:680px}
#top h1 *{background:none!important;color:inherit!important;-webkit-text-fill-color:transparent!important}
#top p{max-width:680px}
.utte-hdr+section.bg-slate-900 h1,.utte-hdr+main>section.bg-slate-900:first-child h1{font-size:2.25rem!important;line-height:2.5rem!important;background-image:linear-gradient(to right,#fff,#9b9b9b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;max-width:680px;margin-left:auto;margin-right:auto}
.utte-hdr+section.bg-slate-900 h1 *,.utte-hdr+main>section.bg-slate-900:first-child h1 *{background:none!important;color:inherit!important;-webkit-text-fill-color:transparent!important}
@media(min-width:640px){.utte-hdr+section.bg-slate-900 h1,.utte-hdr+main>section.bg-slate-900:first-child h1{font-size:2.25rem!important}}
.utte-hdr+section.bg-slate-900,.utte-hdr+main>section.bg-slate-900:first-child{padding-bottom:2.5rem!important}
.utte-hdr+section.bg-slate-900 p,.utte-hdr+main>section.bg-slate-900:first-child p{line-height:1.5rem!important;max-width:680px;margin-left:auto;margin-right:auto}

/* ---- B2 buttons: 16px semibold, 8px by 12px padding; header buttons 14px ---- */
#root a.inline-flex.items-center.justify-center[class*="font-semibold"]{padding:.5rem .75rem!important;height:auto!important;min-height:0!important;font-size:1rem;line-height:1.5rem;font-weight:600}
.utte-pill a.inline-flex.items-center.justify-center{font-size:.875rem;line-height:1.25rem}

/* ---- B7 navigation: floating, content sized, translucent over blur ---- */
.utte-pill{width:fit-content!important;max-width:calc(100% - 1rem);gap:2rem;border-radius:16px!important;background:rgba(255,255,255,.72)!important;-webkit-backdrop-filter:blur(16px) saturate(180%)!important;backdrop-filter:blur(16px) saturate(180%)!important;transition:background .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)!important}
.utte-pill.scrolled{background:rgba(255,255,255,.5)!important;-webkit-backdrop-filter:blur(24px) saturate(200%)!important;backdrop-filter:blur(24px) saturate(200%)!important}
.utte-pill button[aria-expanded] svg{transition:transform .5s var(--ease)}
.utte-pill button[aria-expanded=true] svg{transform:rotate(90deg)}
[role=dialog][data-state=open]{background:rgba(250,249,246,.94)!important;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
[role=dialog][data-state=open] nav a{animation:utte-in .5s var(--ease) both}
[role=dialog][data-state=open] nav a:nth-child(2){animation-delay:60ms}
[role=dialog][data-state=open] nav a:nth-child(3){animation-delay:120ms}
[role=dialog][data-state=open] nav a:nth-child(4){animation-delay:180ms}
[role=dialog][data-state=open] nav a:nth-child(5){animation-delay:240ms}
[role=dialog][data-state=open] nav a:nth-child(6){animation-delay:300ms}
[role=dialog][data-state=open] nav a:nth-child(7){animation-delay:360ms}
[role=dialog][data-state=open] nav a:nth-child(n+8){animation-delay:400ms}
@keyframes utte-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---- B7 motion: one weighted curve, nothing under 200ms ---- */
*,*::before,*::after{transition-timing-function:var(--ease)!important}
[class*="transition"]:not([class*="duration-"]){transition-duration:.3s!important}
.rv{opacity:0;transform:translateY(32px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.rv{transform:none;transition:opacity .3s}
.utte-pill button[aria-expanded=true] svg{transform:none}
[role=dialog][data-state=open] nav a{animation:none}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ---- B11 tagline reveal ---- */
.utte-tag{background:#fff;padding:6rem 1rem}
.utte-tag-p{max-width:680px;margin:0 auto;font-weight:700;letter-spacing:-.02em;font-size:2.25rem;line-height:2.5rem;text-wrap:balance}
@media(min-width:768px){.utte-tag-p{font-size:3rem;line-height:1}}
.utte-tag-p span{color:rgba(15,23,42,.3);transition:color .5s var(--ease)!important}
.utte-tag-p span.on{color:#0f172a}

/* ---- B10 skip link ---- */
.utte-skip{position:absolute;left:1rem;top:-5rem;z-index:100;background:#123fa8;color:#fff;padding:.5rem 1rem;border-radius:8px;font-weight:600;transition:top .3s var(--ease)}
.utte-skip:focus{top:1rem;outline:2px solid #fff;outline-offset:2px}

/* radius to Tailwind defaults, small badges to the 12px step, header buttons 14px */
.rounded-md{border-radius:6px!important}
.rounded-xl{border-radius:12px!important}
[class*="text-[10px]"],[class*="text-[11px]"]{font-size:.75rem!important;line-height:1rem!important}
#root .utte-pill a.inline-flex.items-center.justify-center{font-size:.875rem!important;line-height:1.25rem!important}


/* phone fixes: headline words keep their spaces, floating badges stay inside the screen */
#top h1>span:not(:last-child){margin-right:.25em}
@media(max-width:640px){
#top div.absolute[class*="-left-4"]{left:.5rem!important}
#top div.absolute[class*="-right-4"]{right:.5rem!important}
}

/* header position and glass: 16px off the top edge, frosted white that stays light over dark sections */
.utte-pill{margin-top:0!important;position:relative;top:1rem;background:rgba(255,255,255,.9)!important;border:1px solid rgba(255,255,255,.7)!important;box-shadow:0 8px 32px -12px rgba(15,23,42,.35)!important}
.utte-pill.scrolled{background:rgba(255,255,255,.82)!important;-webkit-backdrop-filter:blur(20px) saturate(160%)!important;backdrop-filter:blur(20px) saturate(160%)!important}

/* legal pages */
.utte-legal h2{font-size:1.5rem;line-height:2rem;font-weight:700;color:#0f172a;margin:3rem 0 .75rem}
.utte-legal section:first-child h2{margin-top:0}
.utte-legal p,.utte-legal li{font-size:1rem;line-height:1.5rem;color:#475569}
.utte-legal p{margin:0 0 .75rem}
.utte-legal ul{margin:.75rem 0 0;padding-left:1.5rem;list-style:disc}
.utte-legal li{margin-bottom:.75rem}

/* back to top */
.utte-top{position:fixed;right:1.5rem;bottom:1.5rem;z-index:40;width:48px;height:48px;border-radius:9999px;border:1px solid rgba(255,255,255,.6);background:#123fa8;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px -8px rgba(18,63,168,.6);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s var(--ease),transform .5s var(--ease),background-color .3s var(--ease)!important}
.utte-top.show{opacity:1;transform:none;pointer-events:auto}
.utte-top.show:hover{background:#0d2f7e;transform:translateY(-2px)}
.utte-top.show:active{transform:scale(.98)}
.utte-top:focus-visible{outline:2px solid #123fa8;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.utte-top{transform:none}.utte-top.show:hover{transform:none}}

/* notice images: flat, 8px radius, shown whole (posters are portrait), only rendered when a notice has an image */
.utte-notice-media{padding:16px 16px 0}
.utte-notice-img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;background:#f1f5f9;border-radius:8px}
.utte-notice-media.open .utte-notice-img{max-height:80vh}
.utte-notice-home{display:block;width:100%;height:auto;max-height:320px;object-fit:contain;background:#f1f5f9;border-radius:8px;margin-bottom:16px}

/* a notice opened from a link stops below the floating header and the sticky filter bar */
article[id]{scroll-margin-top:144px}