/* Nori (mydu.app/nori and its legal pages). Load after base.css, kit.css (app page) or legal.css (legal pages).
   Palette = the app's Palette.swift: road-sign blue #1450D2 / #8DB4FF, Nori's amber cap #FFB21E.
   CSP-safe: no inline styles anywhere on the pages; every value lives here. */

:root{
  --n-blue:#1450D2;--n-amber:#FFB21E;--n-amber-text:#985600;
  --n-bg:#F3F5FA;--n-bg-2:#E7EBF4;--n-card:#FFFFFF;--n-text:#111827;--n-text-2:#50586C;--n-line:#DDE2EC;
  --n-link:#1450D2;--n-band:#1450D2;--n-band-text:#FFFFFF;--n-band-text-2:#DCE6FF;
  --site-canvas:var(--n-bg);--site-canvas-2:var(--n-bg-2);--site-surface:var(--n-card);
  --site-ink:var(--n-text);--site-ink-2:var(--n-text-2);--site-ink-3:var(--n-text-2);--site-line:var(--n-line);
  --site-accent:var(--n-blue);--site-link:var(--n-link);--site-focus:var(--n-link);
  --site-band:var(--n-band);--site-on-band:var(--n-band-text);--site-on-band-2:var(--n-band-text-2);--site-focus-on-band:var(--n-amber);
  --site-highlight:var(--n-amber);--site-on-highlight:#111827;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --n-blue:#8DB4FF;--n-amber-text:#FFC24D;
  --n-bg:#0B0D14;--n-bg-2:#181B26;--n-card:#181B26;--n-text:#F3F4F8;--n-text-2:#A8AFC3;--n-line:#2C3142;
  --n-link:#8DB4FF;--n-band:#13244F;--n-band-text:#F3F4F8;--n-band-text-2:#B9C8EE}}
:root[data-theme="dark"]{
  --n-blue:#8DB4FF;--n-amber-text:#FFC24D;
  --n-bg:#0B0D14;--n-bg-2:#181B26;--n-card:#181B26;--n-text:#F3F4F8;--n-text-2:#A8AFC3;--n-line:#2C3142;
  --n-link:#8DB4FF;--n-band:#13244F;--n-band-text:#F3F4F8;--n-band-text-2:#B9C8EE}

body.app-nori{background:var(--n-bg);color:var(--n-text);font-family:var(--m-font)}

/* Header: mark / icon Nori · Support · status */
.n-header{position:sticky;top:0;z-index:50;height:var(--m-bar-h);transition:background-color .2s,box-shadow .2s}
.n-header.is-stuck,html:not(.js) .n-header{background:color-mix(in oklab,var(--n-bg) 84%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);box-shadow:0 1px 0 var(--n-line)}
.n-header__in{height:100%;display:flex;align-items:center;gap:4px}
.n-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--n-text);font-weight:700;font-size:17px;text-decoration:none}
.n-brand img{width:32px;height:32px;border-radius:var(--m-r-icon)}
.n-nav{margin-inline-start:auto;display:flex;align-items:center;gap:8px;font-size:15px}
.n-nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;color:var(--n-text-2);text-decoration:none}
.n-nav a:hover,.n-nav a[aria-current="page"]{color:var(--n-text)}
.n-status{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--n-text-2)}
.n-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--n-amber)}
@media (max-width:719.98px){.n-status{display:none}}

/* App page sections: headline + one sentence + one visual */
.n-hero{padding-block:clamp(2.5rem,1.5rem + 5vw,6rem) clamp(3rem,2rem + 5vw,7rem)}
.n-hero__in,.n-sec__in{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (min-width:960px){
  .n-hero__in{grid-template-columns:1.15fr .85fr}
  .n-sec__in{grid-template-columns:1fr 1fr}
  .n-sec--flip .n-sec__media{order:-1}
}
.n-app{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:20px}
.n-app img{width:56px;height:56px;border-radius:var(--m-r-icon);box-shadow:0 1px 2px rgb(0 0 0 / .08),0 8px 24px rgb(20 80 210 / .18)}
.n-h1{margin-top:20px;font-size:clamp(2.6rem,1.4rem + 5.4vw,5.4rem);font-weight:800;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.n-h1 em{font-style:normal;color:var(--n-blue)}
.n-lead{margin-top:20px;max-width:34ch;font-size:var(--m-t-lead);line-height:1.45;color:var(--n-text-2);text-wrap:pretty}
.n-langs{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.n-langs li{padding:6px 12px;border-radius:999px;background:var(--n-card);box-shadow:0 0 0 1px var(--n-line);font-size:15px;font-weight:600}
.n-langs li:first-child{background:var(--n-amber);box-shadow:none;color:#111827}
.n-soon{margin-top:28px;font-weight:600;color:var(--n-amber-text)}
.n-sec{padding-block:clamp(3.5rem,2.5rem + 5vw,8rem);border-top:1px solid var(--n-line)}
.n-h2{font-size:var(--m-t-h2);font-weight:750;letter-spacing:-.035em;line-height:1.02;text-wrap:balance;max-width:16ch}
.n-sec .n-lead{margin-top:16px}

/* Screens in iPhone frames (kit.css .m-device); iPhone 17 captures are 1206 × 2622 */
.n-shot{justify-self:center;width:min(100%,300px)}
.n-shot .m-device{--m-dev-ratio:1206 / 2622}
.n-hero .n-shot{width:min(100%,320px)}

/* Closing band */
.n-band{background:var(--n-band);color:var(--n-band-text);text-align:center;padding-block:clamp(3.5rem,2.5rem + 5vw,7rem)}
.n-band__title{font-size:var(--m-t-h2);font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
.n-band__sub{margin:16px auto 0;max-width:36ch;font-size:var(--m-t-lead);line-height:1.45;color:var(--n-band-text-2)}
.n-band :focus-visible{outline-color:var(--n-amber)}

/* Footer */
.n-footer{padding:36px 0 56px;font-size:14px;color:var(--n-text-2);border-top:1px solid var(--n-line)}
.n-footer__in{display:grid;gap:14px}
.n-footer__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
.n-footer__row a{display:inline-flex;align-items:center;min-height:44px;color:var(--n-text-2);text-decoration:none}
.n-footer__row a:hover{color:var(--n-text);text-decoration:underline;text-underline-offset:3px}
.n-disc{max-width:80ch;font-size:13px;line-height:1.55}
.n-disc + .n-disc{margin-top:6px}

/* Legal pages */
body.app-nori.legal .m-legal__body .m-note{background:var(--n-bg-2)}
body.app-nori.legal .m-legal__body details{border-bottom:1px solid var(--n-line)}
body.app-nori.legal .m-legal__body details:first-of-type{border-top:1px solid var(--n-line)}
body.app-nori.legal .m-legal__body summary{min-height:56px;padding:14px 0;font-weight:600;cursor:pointer}
body.app-nori.legal .m-legal__body details > div{padding-bottom:18px;color:var(--n-text-2)}
body.app-nori.legal .m-legal__body details > div > * + *{margin-top:.8em}
.n-lang{margin-top:16px;font-size:15px}
.n-lang a{color:var(--n-link)}
body.app-nori .m-legal :is(h1,h2,summary){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
body.app-nori.legal .m-legal__body .m-note > * + *{margin-top:.6em}
