/* /Components/Pages/AppAdminPages/EmergencyConversationAccess.razor.rz.scp.css */
/* Container contract for the break-glass transcript.

   The bubble classes themselves (chat-msg-row, chat-msg-bubble, chat-msg-annotations) come from
   norian-new.css and are written against a flex-column parent: the live chat gives them
   .chat-messages__inner. Without an equivalent here, align-self on the user rows silently does
   nothing - every message stacks flush left with no separation, which is not what the transcript
   looked like to the user.

   Kept as component-scoped CSS rather than another rule in norian-new.css because nothing
   outside this page uses it, and an unused global class is how dead CSS accumulates. */
.chat-transcript-breakglass[b-7gdokpnod5] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}
/* /Components/Pages/Overview.razor.rz.scp.css */
/* Scoped stylesheet for the anonymous Overview marketing page.
   Blazor scoped CSS isolates every selector with a generated [b-*] attribute,
   so class names reused from the app shell (.card, .eyebrow, .chip, .brand)
   cannot collide with the global norian-new.css bundle. Design tokens are
   declared locally on .ov-root so the page is fully self-contained and does
   not depend on the exact global token names surviving future refactors.
   Keyframes are NOT scoped by Blazor, so they are prefixed ov-* to stay unique. */

/* NOTE on .ov-root's horizontal overflow guard below: it MUST stay `clip`, never `hidden`.
   Per CSS Overflow 3, `overflow-y:visible` computes to `auto` as soon as the other axis is
   `hidden` - which silently turns .ov-root into a scroll container. The pillars column
   (.stick, position:sticky) then sticks to THAT container instead of the viewport, and
   because .ov-root itself never scrolls (the document does), the pinned "The difference"
   title/rail simply scrolled away with the page - reproduced in Edge/Chromium.
   `clip` is exempt from that rule (visible stays visible), so it keeps the same protection
   against the oversized .field decorations without breaking sticky. */

.ov-root[b-xvy7ee5tjw]{
  --navy-900:#022038; --navy-800:#033052; --navy-700:#043560; --navy-600:#0a4474;
  --navy-500:#114f82; --navy-400:#2c6394; --navy-300:#6f93b3; --navy-200:#b3c5d6;
  --navy-100:#dde6ef; --navy-050:#eef3f8;
  --blue-600:#1b639f; --blue-500:#2377ba; --blue-400:#4a92cd; --cyan-500:#0f9ed5;
  --cream:#fbf7ef; --cream-dark:#f2ebdd; --white:#ffffff;
  --ink-900:#11161c; --grey-700:#3a4651; --grey-600:#586672; --grey-500:#79858f;
  --grey-300:#cbd2d8; --grey-200:#e3e7ea; --grey-100:#eef1f3;
  --green-500:#4ea72e;

  --font-display:"Arial Black","Arial Bold",Arial,"Helvetica Neue",Helvetica,sans-serif;
  --font-sans:Arial,"Helvetica Neue",Helvetica,"Segoe UI",Roboto,sans-serif;

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);

  background:var(--cream); color:var(--grey-700);
  font-family:var(--font-sans); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:clip; min-height:100vh;
}
.ov-root[b-xvy7ee5tjw], .ov-root *[b-xvy7ee5tjw]{box-sizing:border-box}
h1[b-xvy7ee5tjw],h2[b-xvy7ee5tjw],h3[b-xvy7ee5tjw]{font-family:var(--font-display); color:var(--navy-700); letter-spacing:-.02em; line-height:1.04; margin:0}
p[b-xvy7ee5tjw]{margin:0}
a[b-xvy7ee5tjw]{color:inherit; text-decoration:none}
.wrap[b-xvy7ee5tjw]{max-width:var(--maxw); margin:0 auto; padding:0 32px}
.eyebrow[b-xvy7ee5tjw]{font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-500)}

/* ---------- Top bar ---------- */
.bar[b-xvy7ee5tjw]{
  position:fixed; inset:0 0 auto 0; z-index:50; height:66px;
  display:flex; align-items:center;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  background:transparent; border-bottom:1px solid transparent;
}
.bar.solid[b-xvy7ee5tjw]{background:rgba(251,247,239,.86); backdrop-filter:blur(10px); border-bottom-color:var(--grey-200)}
.bar .wrap[b-xvy7ee5tjw]{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand[b-xvy7ee5tjw]{display:inline-flex; align-items:center; gap:9px; color:var(--navy-800); min-width:0}
.brand .mark[b-xvy7ee5tjw]{width:27px;height:27px;flex:0 0 27px; margin-right:3px;margin-left:3px}
.brand .logo[b-xvy7ee5tjw] {max-height: 27px;max-width: 200px;vertical-align: middle;margin-right: 3px}
.brand__ecit[b-xvy7ee5tjw]{font-family:var(--font-sans); font-size:18px; font-weight:400; letter-spacing:.02em}
.brand__bar[b-xvy7ee5tjw]{width:1px; height:18px; background:currentColor; opacity:.4}
.brand__norian[b-xvy7ee5tjw]{font-family:var(--font-display); font-weight:900; font-size:16px; letter-spacing:.14em}
.brand__product[b-xvy7ee5tjw]{font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--blue-600); margin-left:5px; letter-spacing:.01em}
.nav-cta[b-xvy7ee5tjw]{
  display:inline-flex; align-items:center; gap:9px; height:40px; padding:0 20px;
  background:var(--navy-700); color:var(--white); border-radius:8px;
  font-weight:700; font-size:14.5px; letter-spacing:.01em;
  transition:background .2s var(--ease), transform .2s var(--ease);
  /* The bar is a flex row and the brand lockup is wide; without nowrap the CTA label
     breaks over two lines on narrow viewports instead of the bar simply getting tight.
     flex:0 0 auto keeps the pill at its natural size so the brand yields instead. */
  white-space:nowrap; flex:0 0 auto;
}
.nav-cta:hover[b-xvy7ee5tjw]{background:var(--navy-600); transform:translateY(-1px)}
.nav-cta svg[b-xvy7ee5tjw]{width:15px;height:15px}

/* ---------- Section scaffolding ---------- */
section[b-xvy7ee5tjw]{position:relative}
.pad[b-xvy7ee5tjw]{padding:132px 0}
.dark[b-xvy7ee5tjw]{background:var(--navy-900); color:var(--navy-100)}
.dark h2[b-xvy7ee5tjw]{color:var(--white)}
.dark .eyebrow[b-xvy7ee5tjw]{color:var(--cyan-500)}

/* reveal */
.rise[b-xvy7ee5tjw]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.rise.in[b-xvy7ee5tjw]{opacity:1; transform:none}
.rise.d1[b-xvy7ee5tjw]{transition-delay:.08s}
.rise.d2[b-xvy7ee5tjw]{transition-delay:.16s}
.rise.d3[b-xvy7ee5tjw]{transition-delay:.24s}

/* ---------- Hero ---------- */
.hero[b-xvy7ee5tjw]{min-height:100svh; display:flex; align-items:center; overflow:hidden; padding-top:66px}
.hero .wrap[b-xvy7ee5tjw]{position:relative; z-index:2}
.hero-eyebrow[b-xvy7ee5tjw]{margin-bottom:26px}
.hero h1[b-xvy7ee5tjw]{font-size:clamp(44px,8.2vw,104px); color:var(--navy-900); max-width:14ch}
.hero-rot[b-xvy7ee5tjw]{
  height:1.35em; margin:30px 0 4px; overflow:hidden; position:relative;
  font-family:var(--font-display); font-size:clamp(19px,2.4vw,30px); color:var(--blue-600);
}
.hero-rot span[b-xvy7ee5tjw]{position:absolute; left:0; top:0; opacity:0; transform:translateY(.5em);
  transition:opacity .6s var(--ease), transform .6s var(--ease)}
.hero-rot span.on[b-xvy7ee5tjw]{opacity:1; transform:none}
.hero-sub[b-xvy7ee5tjw]{max-width:56ch; margin-top:26px; font-size:clamp(17px,1.5vw,21px); color:var(--grey-600); line-height:1.6}
.scrollcue[b-xvy7ee5tjw]{margin-top:64px; display:inline-flex; align-items:center; gap:11px; color:var(--grey-500); font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.scrollcue .line[b-xvy7ee5tjw]{width:44px;height:1px;background:var(--grey-300); position:relative; overflow:hidden}
.scrollcue .line[b-xvy7ee5tjw]::after{content:""; position:absolute; inset:0; width:40%; background:var(--blue-500); animation:ov-sweep-b-xvy7ee5tjw 2.4s var(--ease) infinite}
@keyframes ov-sweep-b-xvy7ee5tjw{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}

/* ambient nordic contour field */
.field[b-xvy7ee5tjw]{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.field svg[b-xvy7ee5tjw]{position:absolute; width:150%; height:150%; top:-25%; left:-25%; opacity:.5}
.field .drift[b-xvy7ee5tjw]{animation:ov-drift-b-xvy7ee5tjw 34s ease-in-out infinite alternate}
.field .glow[b-xvy7ee5tjw]{position:absolute; width:60vw; height:60vw; right:-14vw; top:-16vw;
  background:radial-gradient(circle at center, rgba(35,119,186,.16), rgba(35,119,186,0) 62%); filter:blur(6px)}
@keyframes ov-drift-b-xvy7ee5tjw{from{transform:translate3d(0,0,0)}to{transform:translate3d(-3.5%,-2.5%,0)}}

/* ---------- The gap (dark) ---------- */
.lead[b-xvy7ee5tjw]{font-size:clamp(19px,1.7vw,23px); line-height:1.62; max-width:60ch; color:var(--navy-100)}
.gap-h[b-xvy7ee5tjw]{font-size:clamp(34px,5vw,64px); max-width:16ch; margin-bottom:34px}
.gap-h em[b-xvy7ee5tjw]{font-style:normal; color:var(--cyan-500)}

/* ---------- The idea (cream) ---------- */
.idea-h[b-xvy7ee5tjw]{font-size:clamp(32px,4.6vw,60px); max-width:17ch; margin-bottom:30px}
.idea-grid[b-xvy7ee5tjw]{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:start}
.idea-grid .lead[b-xvy7ee5tjw]{color:var(--grey-600)}
.pullbadge[b-xvy7ee5tjw]{
  display:inline-flex; align-items:center; gap:10px; margin-top:30px;
  padding:9px 16px 9px 13px; background:var(--white); border:1px solid var(--grey-200);
  border-radius:999px; font-size:14px; font-weight:700; color:var(--navy-700);
}
.pullbadge .dot[b-xvy7ee5tjw]{width:9px;height:9px;border-radius:50%;background:var(--cyan-500); box-shadow:0 0 0 4px rgba(15,158,213,.18)}

/* ---------- Pillars (sticky signature) ---------- */
.pillars[b-xvy7ee5tjw]{background:var(--cream)}
.pillars .wrap[b-xvy7ee5tjw]{display:grid; grid-template-columns:0.86fr 1.14fr; gap:70px; align-items:start}
.stick[b-xvy7ee5tjw]{position:sticky; top:112px; align-self:start; padding-bottom:40px}
.stick .eyebrow[b-xvy7ee5tjw]{margin-bottom:22px}
.stick-title[b-xvy7ee5tjw]{min-height:3.1em; margin-bottom:34px}
.stick-title h2[b-xvy7ee5tjw]{font-size:clamp(30px,3.4vw,46px); color:var(--navy-800); transition:opacity .4s var(--ease)}
.rail[b-xvy7ee5tjw]{display:flex; flex-direction:column; gap:0}
.rail button[b-xvy7ee5tjw]{
  all:unset; cursor:pointer; display:flex; align-items:center; gap:16px; padding:13px 0;
  border-top:1px solid var(--grey-200); color:var(--grey-500);
  font-weight:700; font-size:14.5px; transition:color .3s var(--ease);
}
.rail button:last-child[b-xvy7ee5tjw]{border-bottom:1px solid var(--grey-200)}
.rail button:focus-visible[b-xvy7ee5tjw]{outline:2px solid var(--cyan-500); outline-offset:3px}
.rail .lbl[b-xvy7ee5tjw]{flex:1; font-family:var(--font-sans); font-size:15px; letter-spacing:.005em; transition:color .3s var(--ease)}
.rail .tick[b-xvy7ee5tjw]{width:40px; flex:none; height:2px; background:var(--grey-200); position:relative; border-radius:2px}
.rail .tick[b-xvy7ee5tjw]::after{content:""; position:absolute; inset:0; width:0; background:var(--blue-500); border-radius:2px; transition:width .5s var(--ease)}
.rail button.active[b-xvy7ee5tjw]{color:var(--navy-800)}
.rail button.active .lbl[b-xvy7ee5tjw]{color:var(--navy-800)}
.rail button.active .tick[b-xvy7ee5tjw]::after{width:100%}

.cards[b-xvy7ee5tjw]{display:flex; flex-direction:column; gap:22px}
.card[b-xvy7ee5tjw]{
  position:relative; background:var(--white); border:1px solid var(--grey-200);
  border-radius:16px; padding:40px 42px 42px; overflow:hidden;
  box-shadow:0 1px 0 rgba(2,32,56,.02);
}
.card > *[b-xvy7ee5tjw]{position:relative; z-index:1}
.card h3[b-xvy7ee5tjw]{font-size:clamp(22px,2vw,28px); color:var(--navy-700); margin-bottom:14px; max-width:20ch}
.card p[b-xvy7ee5tjw]{color:var(--grey-600); max-width:52ch; font-size:17px}
.card .ki[b-xvy7ee5tjw]{display:inline-flex; align-items:center; justify-content:center; width:44px;height:44px; border-radius:12px;
  background:var(--navy-050); margin-bottom:20px}
.card .ki svg[b-xvy7ee5tjw]{width:22px;height:22px; stroke:var(--navy-600); fill:none; stroke-width:1.8}
.card.flag[b-xvy7ee5tjw]{border-color:var(--navy-100); background:linear-gradient(180deg,var(--white),var(--navy-050))}
/* Any card's chip, not just the .flag one. The p5 card ("Pick up where you left off") carries a
   chip too and was picking up nothing at all here, so "Off until you ask for it" rendered as a
   bare line of body text under the paragraph - it read like a stray sentence rather than the
   deliberate qualifier it is. The .flag card keeps its own gradient/border rule above. */
.card .chip[b-xvy7ee5tjw]{display:inline-block; margin-top:18px; padding:5px 12px; border-radius:999px;
  background:var(--navy-700); color:var(--white); font-size:12px; font-weight:700; letter-spacing:.04em}

/* ---------- Closing ---------- */
.close[b-xvy7ee5tjw]{background:var(--navy-900); color:var(--navy-100); overflow:hidden}
.close .wrap[b-xvy7ee5tjw]{position:relative; z-index:2; display:grid; grid-template-columns:1fr .92fr; gap:70px; align-items:center}
.close .wrap.close--noform[b-xvy7ee5tjw]{grid-template-columns:1fr}
.close h2[b-xvy7ee5tjw]{font-size:clamp(40px,6vw,78px); color:var(--white); margin-bottom:24px}
.close .lead[b-xvy7ee5tjw]{margin-bottom:8px}
.form[b-xvy7ee5tjw]{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:32px}
.form .row[b-xvy7ee5tjw]{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form label[b-xvy7ee5tjw]{display:block; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy-200); margin:16px 0 7px}
.form input[b-xvy7ee5tjw], .form textarea[b-xvy7ee5tjw]{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:10px; padding:12px 14px; color:var(--white); font-family:var(--font-sans); font-size:16px;
}
.form input[b-xvy7ee5tjw]::placeholder,.form textarea[b-xvy7ee5tjw]::placeholder{color:rgba(255,255,255,.4)}
.form input:focus[b-xvy7ee5tjw],.form textarea:focus[b-xvy7ee5tjw]{outline:none; border-color:var(--cyan-500); background:rgba(255,255,255,.09)}
.form textarea[b-xvy7ee5tjw]{resize:vertical; min-height:96px}
.form .send[b-xvy7ee5tjw]{
  margin-top:22px; width:100%; height:50px; border:none; cursor:pointer;
  background:var(--blue-500); color:var(--white); border-radius:999px; font-weight:700; font-size:16px;
  font-family:var(--font-sans); transition:background .2s var(--ease), transform .2s var(--ease);
}
.form .send:hover[b-xvy7ee5tjw]{background:var(--blue-400); transform:translateY(-1px)}
.form .send:disabled[b-xvy7ee5tjw]{opacity:.7; cursor:default; transform:none}
.form .note[b-xvy7ee5tjw]{margin-top:14px; font-size:12.5px; color:var(--navy-300); text-align:center}

footer[b-xvy7ee5tjw]{background:var(--navy-900); color:var(--navy-300); border-top:1px solid rgba(255,255,255,.08); padding:30px 0}
footer .wrap[b-xvy7ee5tjw]{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:13px}
footer a[b-xvy7ee5tjw]{color:var(--navy-200)}
footer a:hover[b-xvy7ee5tjw]{color:var(--white)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .pad[b-xvy7ee5tjw]{padding:86px 0}
  .idea-grid[b-xvy7ee5tjw]{grid-template-columns:1fr; gap:26px}
  .pillars .wrap[b-xvy7ee5tjw]{grid-template-columns:1fr; gap:34px}
  .stick[b-xvy7ee5tjw]{position:static; padding-bottom:0}
  .stick-title[b-xvy7ee5tjw]{display:none}
  .rail[b-xvy7ee5tjw]{display:none}
  .close .wrap[b-xvy7ee5tjw]{grid-template-columns:1fr; gap:34px}
  .card[b-xvy7ee5tjw]{padding:30px 26px 32px}
}
@media (max-width:560px){
  .wrap[b-xvy7ee5tjw]{padding:0 20px}
  .form .row[b-xvy7ee5tjw]{grid-template-columns:1fr}
}
/* Phone portrait. The brand lockup (logo + mark + "Agents") alone takes most of a
   ~390px viewport, so the CTA has no room left for its label. Collapse it to an
   icon-only pill; the accessible name stays on the anchor's aria-label, and the
   label span is only hidden visually, not removed from the markup. */
@media (max-width:480px){
  .nav-cta[b-xvy7ee5tjw]{gap:0; width:40px; padding:0; justify-content:center}
  .nav-cta__label[b-xvy7ee5tjw]{display:none}
  .brand .logo[b-xvy7ee5tjw]{max-width:140px}
}

@media (prefers-reduced-motion:reduce){
  .rise[b-xvy7ee5tjw]{opacity:1; transform:none; transition:none}
  .field .drift[b-xvy7ee5tjw]{animation:none}
  .scrollcue .line[b-xvy7ee5tjw]::after{animation:none}
  .hero-rot span[b-xvy7ee5tjw]{transition:none}
}