/* NU Product Development, rev 4: the public page. Builds on ui.css. */

main.page { padding-bottom: 8px; }
@media (max-width: 900px) { .bar nav a.l { display: none; } }
@media (max-width: 460px) { .brand span { display: none; } }

/* Lead */
.lead { padding: clamp(22px, 5vw, 64px) 0 clamp(18px, 3vw, 40px); }
h1 { font: 700 clamp(1.9rem, 5vw, 3.5rem)/1.1 var(--sans); letter-spacing: -.03em; color: var(--navy); }
.statement { margin-top: 14px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-2); max-width: 40em; }
.lead .card { margin-top: clamp(24px, 3.5vw, 40px); }

/* Leader: the mark stays fixed, the word rolls out of its frame and the next rolls in */
.flip { display: flex; align-items: baseline; gap: .3em; }
.slot { position: relative; display: inline-block; white-space: nowrap; }
.slot.left { flex: none; }
.slot.right { perspective: 700px; clip-path: inset(-.06em -100vw -.24em -.1em); }
.face { display: inline-block; transform-origin: 50% 50%; backface-visibility: hidden; }
.fmark { height: .74em; width: auto; fill: var(--logo); display: block; transform: translateY(.03em); }
.face.out { position: absolute; left: 0; top: 0; animation: roll-out .5s cubic-bezier(.6, 0, .4, 1) forwards; }
.face.in { animation: roll-in .5s cubic-bezier(.6, 0, .4, 1) both; }
@keyframes roll-out { to { transform: translateY(-115%) rotateX(70deg); opacity: 0; } }
@keyframes roll-in { from { transform: translateY(115%) rotateX(-70deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Sections */
.sec { margin-top: 18px; }
@media (min-width: 761px) { .sec table.t tbody th { width: 21%; } }
.sec .t td:last-child { color: var(--ink-2); }
.process .n { color: var(--brand-600); font-weight: 700; margin-right: 12px; }
.process td:last-child { color: var(--ink) !important; font-weight: 500; }
.notes { list-style: none; margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.notes li { padding: 3px 0 3px 20px; position: relative; }
.notes li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); opacity: .55; }
.notes.plain { margin-top: 0; color: var(--ink); }
.notes.plain li { padding: 11px 0 11px 20px; border-bottom: 1px solid var(--line); }
.notes.plain li:last-child { border-bottom: 0; padding-bottom: 0; }
.notes.plain li:first-child { padding-top: 0; }
.notes.plain li::before { top: 1.2em; }
.notes.plain li:first-child::before { top: .5em; }
.contact-form { margin-top: 20px; max-width: 760px; }

/* ---------------------------------------------------------------- portal teaser */
.promo { position: relative; color: #fff; margin: 0 0 clamp(10px, 2vw, 30px); padding: clamp(34px, 6vw, 88px) 0 clamp(48px, 8vw, 112px); overflow: hidden;
  background: radial-gradient(900px 520px at 22% 68%, rgba(34, 104, 235, .55) 0%, rgba(34, 104, 235, 0) 62%), radial-gradient(700px 420px at 92% 8%, rgba(10, 163, 158, .28) 0%, rgba(10, 163, 158, 0) 60%), linear-gradient(160deg, #06173a 0%, #0a2250 52%, #0d3175 100%); }
.promo::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 28% 62%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 28% 62%, #000 0%, transparent 70%); }
.promo > .wrap { position: relative; }
.kicker { text-align: center; font: 700 clamp(1.85rem, 5.4vw, 3.9rem)/1.06 var(--sans); letter-spacing: -.035em; margin-bottom: clamp(14px, 5vw, 64px); }
.kicker em { display: block; font-style: normal; background: linear-gradient(90deg, #8db8ff 0%, #5fe3d4 60%, #b9f5c8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.promo-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 940px) { .promo-in { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); } }
.promo .eyebrow { display: flex; align-items: center; gap: 12px; font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #9fe6de; }
.promo .new { font: 700 11px/1 var(--sans); letter-spacing: .08em; padding: 6px 11px; border-radius: 999px; background: linear-gradient(90deg, #2f7bff, #12c2b2); color: #fff; box-shadow: 0 0 24px rgba(47, 123, 255, .8); animation: glow 2.6s ease-in-out infinite; }
.promo h2 { font: 700 clamp(1.8rem, 3.6vw, 2.8rem)/1.1 var(--sans); letter-spacing: -.025em; margin-top: 18px; }
.promo p.t { margin-top: 16px; font-size: clamp(1rem, 1.3vw, 1.15rem); color: #d3def5; max-width: 30em; }
.promo ul { list-style: none; margin-top: 22px; display: grid; gap: 11px; color: #eef3ff; font-size: 15.5px; }
.promo li { display: flex; gap: 12px; align-items: flex-start; }
.promo li .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(18, 194, 178, .22); color: #6ff0e2; stroke-width: 2.6; margin-top: 1px; }
.promo .actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.promo .btn { background: #fff; color: var(--navy); border-color: #fff; padding: 14px 22px; font-size: 15.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.promo .btn:hover { background: #e6eeff; border-color: #e6eeff; transform: translateY(-1px); }
.promo .btn.line { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .4); box-shadow: none; }
.promo .btn.line:hover { border-color: #fff; background: rgba(255, 255, 255, .16); }

/* The isometric scene: one orthographic 3D space, panels float above the dashboard */
.iso-wrap { position: relative; height: clamp(400px, 46vw, 540px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; --s: 1.12; }
@media (max-width: 1180px) { .iso-wrap { --s: .9; } }
@media (max-width: 939px) { .iso-wrap { --s: .95; height: 450px; } }
@media (max-width: 560px) { .iso-wrap { --s: .6; height: 300px; } .statement { margin-top: 10px; } }
@media (max-width: 380px) { .iso-wrap { --s: .52; height: 300px; } }
.iso-wrap::before { content: ""; position: absolute; width: 78%; height: 70%; left: 8%; top: 18%; background: radial-gradient(closest-side, rgba(73, 148, 255, .7), rgba(18, 194, 178, .22) 58%, transparent 76%); filter: blur(22px); animation: breathe 6s ease-in-out infinite; }
.iso { position: relative; left: -34px; width: 430px; height: 292px; flex: none; transform-style: preserve-3d; transform: scale(var(--s)) rotateX(24deg) rotateY(32deg); }
.iso > * { position: absolute; }
.iso-ground { inset: 8% 3%; background: rgba(2, 8, 28, .6); filter: blur(28px); transform: translateZ(-80px); }
.iso-slab { inset: 0; border-radius: 20px; background: linear-gradient(135deg, #9fc0ff, #5d8ee8); transform: translateZ(-14px); }
.iso-panel { inset: 0; border-radius: 20px; background: #fff; color: var(--ink); padding: 16px 18px; overflow: hidden; font-size: 13px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
.ip-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ip-top svg { height: 15px; width: auto; fill: var(--logo); }
.ip-top b { font-weight: 700; font-size: 13.5px; margin-right: auto; }
.ip-track { display: grid; grid-template-columns: repeat(6, 1fr); margin: 22px 0 4px; border-top: 4px solid #e3e9f2; }
.ip-track span { position: relative; padding-top: 12px; font: 600 10px/1.2 var(--sans); color: var(--ink-3); }
.ip-track span::before { content: ""; position: absolute; z-index: 1; left: 0; top: -10px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #cdd7e6; }
.ip-track span.d { color: var(--ink); }
.ip-track span.d::before { background: var(--navy); border-color: var(--navy); }
.ip-track span.a { color: var(--brand-600); }
.ip-track span.a::before { background: var(--brand); border-color: var(--brand); animation: ping 2.2s ease-out infinite; }
.ip-track span.d::after, .ip-track span.a::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: var(--navy); }
.ip-track span.a::after { background: linear-gradient(90deg, var(--navy), var(--brand)); right: 55%; }
.ip-rows { margin-top: 12px; }
.ip-rows div { display: grid; grid-template-columns: 78px 1fr 38px; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-weight: 600; }
.ip-rows i { display: block; height: 8px; border-radius: 4px; background: #e3e9f2; position: relative; overflow: hidden; }
.ip-rows i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: 4px; background: var(--navy); }
.ip-rows .on i::after { background: linear-gradient(90deg, var(--brand), #12c2b2); animation: fill 6s ease-in-out infinite; }
.ip-rows em { font-style: normal; text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ip-rows .on em { color: var(--brand-600); }
.ip-sh { position: absolute; border-radius: 14px; background: rgba(10, 34, 80, .13); filter: blur(8px); }
.ip-sh.s1 { right: -84px; top: -44px; width: 176px; height: 60px; }
.ip-sh.s2 { left: -120px; bottom: -84px; width: 208px; height: 116px; }
.ip-sh.s3 { right: -92px; bottom: 16px; width: 210px; height: 42px; }

.iso-card { border-radius: 14px; padding: 12px 14px; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.3; box-shadow: 0 0 0 1px rgba(255, 255, 255, .7); transform: translateZ(var(--z)); animation: lift 5s ease-in-out infinite alternate; }
.iso-card small { display: block; font: 700 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.iso-card b { font-weight: 700; }
.iso-card.dark { background: rgba(12, 32, 80, .94); color: #fff; box-shadow: 0 0 0 1px rgba(140, 178, 255, .55), 0 0 34px rgba(56, 132, 255, .45); }
.iso-card.dark small { color: #9db9f0; }
.c-gate { --z: 96px; right: -84px; top: -44px; display: flex; gap: 10px; align-items: center; }
.c-gate .tick { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.c-gate .tick .ic { stroke-width: 3; }
.c-gate strong { color: var(--ok); }
.c-cr { --z: 72px; left: -120px; bottom: -84px; width: 208px; animation-delay: -2s; }
.c-cr p { color: #c9d8f6; margin-top: 2px; }
.ap { position: relative; display: inline-block; margin-top: 9px; padding: 7px 14px; border-radius: 8px; background: var(--brand); font: 700 12px/1 var(--sans); animation: apbg 6s infinite; }
.ap b { display: block; animation: a1 6s infinite; }
.ap b + b { position: absolute; inset: 0; display: grid; place-items: center; animation-name: a2; }
.c-doc { --z: 104px; right: -92px; bottom: 16px; white-space: nowrap; display: flex; gap: 9px; align-items: center; padding: 10px 14px; border-radius: 999px; font-weight: 600; animation-delay: -3.4s; }
.c-doc .ic { color: #7fe9dc; }
.iso-cursor { left: -22px; bottom: -106px; width: 26px; height: 26px; fill: #fff; stroke: var(--navy); stroke-width: 1.4; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); transform: translateZ(170px); animation: cur 6s ease-in-out infinite; }
.spark { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #a9c9ff; box-shadow: 0 0 14px 4px rgba(127, 176, 255, .75); animation: twinkle 3.4s ease-in-out infinite; }
.spark.k1 { left: 9%; top: 20%; } .spark.k2 { left: 78%; top: 12%; animation-delay: -1.1s; } .spark.k3 { left: 90%; top: 62%; animation-delay: -2s; background: #7fe9dc; box-shadow: 0 0 14px 4px rgba(95, 227, 212, .7); }
.spark.k4 { left: 20%; top: 86%; animation-delay: -.6s; } .spark.k5 { left: 52%; top: 4%; animation-delay: -2.7s; width: 3px; height: 3px; }

@keyframes lift { to { transform: translateZ(calc(var(--z) + 18px)); } }
@keyframes breathe { 50% { opacity: .65; transform: scale(1.06); } }
@keyframes glow { 50% { box-shadow: 0 0 34px rgba(18, 194, 178, .95); } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(27, 95, 224, .55); } 100% { box-shadow: 0 0 0 12px rgba(27, 95, 224, 0); } }
@keyframes fill { 0%, 12% { width: 8%; } 55%, 100% { width: var(--w); } }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes apbg { 0%, 48% { background: #1b5fe0; } 54%, 92% { background: #12a05f; } 100% { background: #1b5fe0; } }
@keyframes a1 { 0%, 48% { opacity: 1; } 54%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes a2 { 0%, 48% { opacity: 0; } 54%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cur { 0%, 8% { transform: translateZ(170px) translate(86px, -54px); } 40%, 46% { transform: translateZ(170px) translate(0, 0); } 50% { transform: translateZ(170px) translate(0, 0) scale(.82); } 55%, 88% { transform: translateZ(170px) translate(0, 0); } 100% { transform: translateZ(170px) translate(86px, -54px); } }
@media (prefers-reduced-motion: reduce) {
  .face.out, .face.in, .iso-card, .iso-cursor, .spark, .ap, .ap b, .promo .new, .iso-wrap::before, .ip-track span.a::before, .ip-rows .on i::after { animation: none; }
  .face.out { display: none; }
  .ap b + b { opacity: 0; }
}

/* ---------------------------------------------------------------- phone dropdowns
   On wide screens the fold buttons are plain text. On phones, once site.js has run
   (body.fold-ready), each one opens the supporting text beneath it. */
.fold-b { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; letter-spacing: inherit; cursor: default; display: block; width: 100%; }
.fold-h, .meta { display: none; }
@media (max-width: 760px) {
  .fold-ready .fold-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 3px 0; -webkit-tap-highlight-color: transparent; }
  .fold-ready .fold-b::after { content: ""; flex: none; width: 9px; height: 9px; margin: -4px 5px 0 4px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s, margin .2s; }
  .fold-ready .fold.open > .fold-b::after, .fold-ready .fold.open > th > .fold-b::after, .fold-ready .fold.open > dt > .fold-b::after, .fold-ready .fold.open > h2 > .fold-b::after { transform: rotate(-135deg); margin-top: 4px; }
  .fold-ready .fold-b:focus-visible { outline: 3px solid rgba(27, 95, 224, .35); outline-offset: 4px; border-radius: 6px; }
  .fold-ready .meta { display: inline; margin-left: auto; font: 500 13.5px/1 var(--sans); color: var(--ink-3); white-space: nowrap; }
  .fold-ready td.dup { display: none !important; }

  /* rows in the scope and process tables */
  .fold-ready tr.fold:not(.open) td { display: none !important; }
  .fold-ready .t.stack tbody tr.fold { padding: 9px 0; }
  .fold-ready .t.stack tbody tr.fold th { padding-bottom: 0; font-size: 15.5px; }
  .fold-ready .t.stack tbody tr.fold.open th { padding-bottom: 8px; }
  .fold-ready tr.fold.open td { display: block !important; padding: 2px 0 8px; color: var(--ink-2); }
  .fold-ready tr.fold.open td[data-l]::before { display: block; margin-bottom: 1px; }
  .fold-ready tr.fold.open td.dup { display: none !important; }

  /* label and value rows */
  .fold-ready .kv .fold { padding: 9px 0; }
  .fold-ready .kv .fold dt { font: 600 15.5px/1.4 var(--sans); color: var(--ink); }
  .fold-ready .kv .fold:not(.open) dd { display: none; }
  .fold-ready .kv .fold.open dd { padding: 6px 0 4px; color: var(--ink-2); }

  /* whole cards */
  .fold-ready .foldcard:not(.open) > :not(h2) { display: none; }
  .fold-ready .foldcard > h2 { margin-bottom: 0; }
  .fold-ready .foldcard.open > h2 { margin-bottom: 14px; }

  /* lists behind a labelled button */
  .fold-ready .fold-h { display: flex; font-weight: 600; font-size: 15px; }
  .fold-ready .notes-fold { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .fold-ready .notes-fold .fold-h { color: var(--brand-600); }
  .fold-ready .notes-fold:not(.open) > ul, .fold-ready .promo-fold:not(.open) > ul { display: none; }
  .fold-ready .notes-fold .notes { margin-top: 10px; }
  .fold-ready .promo-fold { margin-top: 20px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(255, 255, 255, .06); }
  .fold-ready .promo-fold .fold-b::after { border-color: #cfe0ff; }
  .fold-ready .promo-fold > ul { margin-top: 12px; }

  /* a little more air on phones */
  .sec.card { padding: 18px 16px; }
  .lead .kv > div { padding: 9px 0; }
}