:root {
  --ink: #07101d;
  --ink-2: #0b1728;
  --ink-3: #101f34;
  --paper: #f2f0e9;
  --paper-2: #e7e6e0;
  --white: #ffffff;
  --muted: #98a6b8;
  --line: rgba(255, 255, 255, 0.13);
  --blue: #1477ff;
  --electric: #4394ff;
  --violet: #7666ff;
  --green: #34d6a0;
  --orange: #ff9d38;
  --font-inter: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ink);
}

body {
  margin: 0;
  padding-left: 34px;
  padding-right: 34px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
}

.site-launch-tape {
  position: fixed;
  z-index: 1000;
  inset: 0 auto 0 0;
  width: 34px;
  overflow: hidden;
  color: #fff;
  border-right: 1px solid rgba(188,222,255,.62);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 18%, transparent 82%, rgba(255,255,255,.1)),
    #1478ff;
  box-shadow: 6px 0 28px rgba(20,120,255,.22);
}

.site-launch-tape-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  animation: site-launch-tape-scroll 28s linear infinite;
}

.site-launch-tape-track span {
  display: block;
  padding: 20px 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .18em;
}

.site-launch-tape-right {
  inset: 0 0 0 auto;
  border-right: 0;
  border-left: 1px solid rgba(188,222,255,.62);
  box-shadow: -6px 0 28px rgba(20,120,255,.22);
}

@keyframes site-launch-tape-scroll {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.site-header {
  position: relative;
  z-index: 20;
  height: 82px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-header-light {
  color: var(--ink);
  border-bottom-color: rgba(7, 16, 29, 0.12);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 850;
  letter-spacing: -0.05em;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(46, 129, 255, 0.25);
}

.brand-mark img {
  width: 31px;
  height: 21px;
  object-fit: cover;
}

.brand-name {
  font-size: 20px;
}

.brand-name span {
  color: var(--electric);
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 580;
  color: #c3cfdd;
}

.site-header-light .desktop-nav {
  color: #4f5b6b;
}

.desktop-nav a,
.text-link {
  transition: color 160ms ease;
}

.desktop-nav a:hover,
.text-link:hover {
  color: var(--electric);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  font-weight: 600;
}

.mobile-menu {
  display: none;
  position: relative;
}

.mobile-menu summary {
  width: 38px;
  height: 38px;
  display: grid;
  place-content: center;
  gap: 5px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu summary span {
  width: 17px;
  height: 1px;
  background: currentColor;
}

.mobile-menu nav {
  position: absolute;
  top: 48px;
  right: 0;
  width: 220px;
  display: grid;
  padding: 10px;
  background: #0b1728;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.mobile-menu nav a {
  padding: 12px 13px;
  border-radius: 9px;
  font-size: 14px;
}

.mobile-menu nav a:hover {
  background: rgba(255, 255, 255, 0.07);
}

.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-small {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 10px;
  font-size: 12px;
}

.button-primary {
  color: #fff;
  background: linear-gradient(135deg, #0969ed, #2789ff 65%, #7168ff);
  box-shadow: 0 10px 30px rgba(20, 119, 255, 0.24), inset 0 1px 0 rgba(255,255,255,.22);
}

.button-primary:hover {
  background: linear-gradient(135deg, #1a78f5, #499aff 65%, #827aff);
}

.button-ghost {
  color: #d9e5f3;
  border-color: rgba(255,255,255,.21);
  background: rgba(7, 16, 29, 0.34);
  backdrop-filter: blur(12px);
}

.button-ghost:hover {
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.08);
}

.button-ink {
  color: #fff;
  background: var(--ink);
}

.button-full {
  width: 100%;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow-dark {
  color: #9fb4ce;
}

.eyebrow-light {
  color: #526172;
}

.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(52, 214, 160, 0.14);
}

.hero {
  position: relative;
  min-height: 780px;
  overflow: hidden;
  background: #07101d;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 82px 0 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,16,29,.98) 0%, rgba(7,16,29,.88) 32%, rgba(7,16,29,.18) 64%, rgba(7,16,29,.08) 100%),
    linear-gradient(0deg, #07101d 0%, rgba(7,16,29,0) 30%);
}

.hero-media {
  position: absolute;
  inset: 82px 0 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 160px rgba(4, 11, 20, 0.48);
}

.hero-grid {
  position: relative;
  z-index: 3;
  min-height: 612px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 72px;
  padding-top: 42px;
  padding-bottom: 60px;
}

.hero-copy {
  padding-top: 18px;
}

.hero h1 {
  max-width: 700px;
  margin: 0;
  font-size: clamp(58px, 6vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.072em;
  font-weight: 760;
}

.hero h1 em,
.precision-copy h2 em,
.network-copy h2 em {
  color: var(--electric);
  font-style: normal;
}

.hero-lead {
  max-width: 560px;
  margin: 26px 0 0;
  color: #b7c4d4;
  font-size: 17px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 31px;
}

.price-line {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}

.price-line strong {
  font-size: 29px;
  line-height: 1;
  letter-spacing: -0.06em;
}

.price-line span {
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.19);
  color: #8293a7;
  font-size: 11px;
  line-height: 1.45;
}

.answer-card {
  align-self: end;
  width: min(100%, 392px);
  margin-left: auto;
  margin-bottom: 28px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  background: rgba(8, 19, 34, 0.8);
  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.answer-top {
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 17px;
  border-bottom: 1px solid rgba(255,255,255,.11);
  color: #88a4c6;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
}

.answer-top i {
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
}

.answer-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 6px;
  background: var(--blue);
  font-weight: 800;
}

.answer-question {
  margin: 0;
  padding: 21px 20px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: #e9f2ff;
  font-size: 15px;
  font-weight: 650;
}

.answer-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 19px 20px 10px;
}

.status-ring {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,157,56,.35);
  border-radius: 50%;
}

.status-ring i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 20px rgba(255,157,56,.9);
}

.answer-status div {
  display: grid;
  gap: 4px;
}

.answer-status small {
  color: #7489a2;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .14em;
}

.answer-status strong {
  font-size: 14px;
}

.answer-copy {
  margin: 0;
  padding: 9px 20px 20px 76px;
  color: #aebdce;
  font-size: 12px;
  line-height: 1.7;
}

.answer-foot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #71859d;
  font-size: 9px;
}

.answer-foot span:first-child {
  color: #a6e9d0;
}

.answer-foot i {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--green);
}

.hero-proof {
  position: relative;
  z-index: 4;
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(7,16,29,.73);
  backdrop-filter: blur(15px);
}

.proof-grid {
  min-height: 82px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.proof-grid span {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: #7f91a8;
  font-size: 11px;
}

.proof-grid span:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.1);
}

.proof-grid strong {
  color: #d7e2ef;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.precision-section {
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
}

.blueprint-grid {
  position: absolute;
  inset: 0;
  opacity: .48;
  background-image:
    linear-gradient(rgba(44, 83, 126, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 83, 126, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 0, #000 46%, #000 100%);
}

.precision-grid {
  position: relative;
  min-height: 810px;
  display: grid;
  grid-template-columns: 1fr .88fr;
  align-items: center;
  gap: 100px;
  padding-block: 104px;
}

.precision-copy h2,
.section-heading h2,
.network-copy h2,
.pricing-grid h2,
.download-grid h2,
.inner-hero h1 {
  margin: 0;
  font-size: clamp(42px, 5vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.062em;
}

.section-lead {
  margin: 25px 0 0;
  color: #5b6877;
  font-size: 16px;
  line-height: 1.75;
}

.step-list {
  display: grid;
  margin-top: 42px;
  border-top: 1px solid rgba(7,16,29,.15);
}

.step-list article {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding: 21px 0;
  border-bottom: 1px solid rgba(7,16,29,.15);
}

.step-list article > span {
  padding-top: 3px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.step-list h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.step-list p {
  max-width: 430px;
  margin: 0;
  color: #687584;
  font-size: 12px;
  line-height: 1.65;
}

.phone-stage {
  position: relative;
  min-height: 610px;
  display: grid;
  place-items: center;
}

.phone-stage::before,
.phone-stage::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(31,92,166,.16);
  border-radius: 50%;
}

.phone-stage::before {
  width: 520px;
  height: 520px;
}

.phone-stage::after {
  width: 390px;
  height: 390px;
}

.phone-glow {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,130,255,.25), transparent 70%);
  filter: blur(10px);
}

.phone-frame {
  position: relative;
  z-index: 3;
  width: 268px;
  height: 557px;
  padding: 10px;
  overflow: hidden;
  border: 2px solid #1c2530;
  border-radius: 44px;
  background: #0d1116;
  box-shadow: 0 35px 80px rgba(23,48,78,.28), inset 0 0 0 1px rgba(255,255,255,.22);
  transform: rotate(2deg);
}

.phone-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 34px;
}

.phone-speaker {
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 50%;
  width: 67px;
  height: 18px;
  border-radius: 30px;
  background: #0c1016;
  transform: translateX(-50%);
}

.technical-label,
.technical-callout {
  position: absolute;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.label-top {
  top: 14px;
  right: 20px;
  color: #6a7d94;
}

.technical-callout {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: #526172;
  border: 1px solid rgba(31,92,166,.18);
  background: rgba(242,240,233,.78);
  backdrop-filter: blur(8px);
}

.technical-callout span {
  color: var(--blue);
  font-weight: 800;
}

.callout-one { top: 135px; left: -30px; }
.callout-two { top: 315px; right: -28px; }
.callout-three { bottom: 87px; left: -15px; }

.feature-section {
  padding: 116px 0 126px;
  background:
    radial-gradient(circle at 85% 10%, rgba(43,103,200,.14), transparent 24%),
    var(--ink);
}

.section-heading {
  display: grid;
  grid-template-columns: 1.2fr .55fr;
  align-items: end;
  gap: 80px;
  margin-bottom: 56px;
}

.section-heading p {
  margin: 0 0 7px;
  color: #8393a7;
  font-size: 14px;
  line-height: 1.75;
}

.feature-bento {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
}

.bento-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.bento-card h3 {
  margin: 22px 0 0;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.045em;
}

.bento-card p {
  max-width: 470px;
  margin: 18px 0 0;
  color: #8091a6;
  font-size: 13px;
  line-height: 1.7;
}

.bento-number {
  color: #6f839d;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .15em;
}

.bento-large {
  grid-row: span 2;
  min-height: 636px;
  background:
    linear-gradient(135deg, rgba(31,110,232,.13), transparent 45%),
    rgba(255,255,255,.035);
}

.question-stack {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: 83%;
  display: grid;
  gap: 10px;
}

.question-stack div {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 58px;
  padding: 0 18px;
  color: #c8d4e3;
  border: 1px solid rgba(255,255,255,.12);
  border-right: 0;
  border-radius: 13px 0 0 13px;
  background: rgba(9,24,43,.88);
  box-shadow: 0 12px 35px rgba(0,0,0,.2);
  font-size: 13px;
}

.question-stack span {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: #80b7ff;
  border-radius: 50%;
  background: rgba(45,129,255,.16);
  font-family: var(--font-mono);
  font-size: 8px;
}

.bento-photo {
  background:
    radial-gradient(circle at 50% 50%, rgba(68,131,255,.16), transparent 52%),
    rgba(255,255,255,.035);
}

.scan-window {
  position: absolute;
  top: 63px;
  right: 27px;
  width: 128px;
  height: 117px;
  display: grid;
  place-items: center;
}

.dashboard-symbol {
  width: 63px;
  height: 63px;
  display: grid;
  place-items: center;
  border: 2px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-size: 27px;
  font-weight: 800;
  box-shadow: 0 0 30px rgba(255,157,56,.17);
}

.corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: var(--electric);
  border-style: solid;
}

.corner-a {
  top: 0; left: 0; border-width: 1px 0 0 1px;
}

.corner-b {
  right: 0; bottom: 0; border-width: 0 1px 1px 0;
}

.scan-line {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--electric), transparent);
  box-shadow: 0 0 10px var(--electric);
  animation: scan 3s ease-in-out infinite;
}

@keyframes scan {
  0%, 100% { transform: translateY(-45px); opacity: .4; }
  50% { transform: translateY(45px); opacity: 1; }
}

.control-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 35px;
}

.control-row > span {
  aspect-ratio: 1.15;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  color: #85b9ff;
  font-size: 22px;
}

.control-row small {
  color: #72849a;
  font-family: var(--font-mono);
  font-size: 7px;
}

.safety-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 35px;
  padding: 8px 10px;
  color: #9be8cf;
  border: 1px solid rgba(52,214,160,.22);
  border-radius: 8px;
  background: rgba(52,214,160,.06);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
}

.safety-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

.network-section {
  color: var(--ink);
  background: var(--paper);
}

.network-grid {
  min-height: 690px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 80px;
  padding-block: 100px;
}

.network-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 33px;
}

.plain-arrow {
  font-size: 12px;
  font-weight: 650;
}

.plain-arrow span {
  margin-left: 8px;
  color: var(--blue);
}

.network-map {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  border: 1px solid rgba(27,65,104,.18);
  border-radius: 26px;
  background:
    linear-gradient(rgba(54,89,126,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54,89,126,.06) 1px, transparent 1px),
    #e9e8e2;
  background-size: 28px 28px;
  box-shadow: 0 28px 80px rgba(30,55,83,.12);
}

.map-road {
  position: absolute;
  height: 16px;
  border-top: 1px solid rgba(34,75,116,.22);
  border-bottom: 1px solid rgba(34,75,116,.22);
  transform-origin: center;
}

.road-one { width: 120%; top: 45%; left: -10%; transform: rotate(-9deg); }
.road-two { width: 90%; top: 34%; left: 15%; transform: rotate(50deg); }
.road-three { width: 70%; bottom: 20%; left: -8%; transform: rotate(18deg); }

.map-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(18,78,150,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.91);
  box-shadow: 0 10px 28px rgba(29,61,95,.14);
  font-size: 9px;
}

.map-pin i {
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(20,119,255,.15);
}

.pin-one { top: 22%; left: 19%; }
.pin-two { top: 51%; right: 12%; }
.pin-three { bottom: 20%; left: 32%; }

.map-search {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  height: 55px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border: 1px solid rgba(22,63,106,.18);
  border-radius: 13px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 32px rgba(29,61,95,.13);
  color: #6f7b88;
  font-size: 12px;
}

.map-search span {
  color: var(--blue);
  font-size: 23px;
}

.pricing-section {
  padding: 110px 0;
  background:
    radial-gradient(circle at 13% 50%, rgba(41,106,208,.15), transparent 28%),
    #0a1422;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  align-items: center;
  gap: 100px;
}

.pricing-grid > div > p {
  max-width: 520px;
  margin: 25px 0 0;
  color: #8798ad;
  line-height: 1.75;
}

.price-card {
  padding: 32px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(37,111,231,.14), transparent 40%),
    rgba(255,255,255,.045);
  box-shadow: 0 35px 90px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06);
}

.price-card-top {
  display: flex;
  justify-content: space-between;
  color: #7e91a9;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .14em;
}

.price {
  display: flex;
  align-items: flex-start;
  margin: 32px 0 25px;
  font-size: 88px;
  line-height: .85;
  letter-spacing: -.08em;
  font-weight: 780;
}

.price sup {
  margin: 8px 4px 0 0;
  color: #8ea0b7;
  font-size: 21px;
}

.price > span {
  margin-top: 9px;
  color: var(--electric);
  font-size: 39px;
}

.price small {
  align-self: flex-end;
  margin: 0 0 6px 12px;
  color: #778ba4;
  font-size: 10px;
  letter-spacing: 0;
}

.price-card ul {
  display: grid;
  gap: 14px;
  margin: 0 0 27px;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
  list-style: none;
}

.price-card li {
  position: relative;
  padding-left: 24px;
  color: #b3c1d1;
  font-size: 12px;
}

.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
}

.price-note {
  display: block;
  margin-top: 14px;
  color: #667b94;
  text-align: center;
  font-size: 9px;
  line-height: 1.5;
}

.download-section {
  padding: 95px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  background: var(--ink);
}

.download-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: end;
  gap: 90px;
}

.download-grid h2 {
  font-size: clamp(40px, 4.5vw, 61px);
}

.store-area p {
  margin: 0 0 18px;
  color: #8393a8;
  font-size: 12px;
  line-height: 1.6;
}

.store-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.store-badge {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  color: #dce8f5;
}

.store-badge b {
  font-size: 19px;
}

.store-badge small {
  display: grid;
  font-size: 7px;
  letter-spacing: .03em;
}

.store-badge strong {
  margin-top: 2px;
  font-size: 13px;
  letter-spacing: 0;
}

.site-footer {
  padding: 65px 0 25px;
  border-top: 1px solid rgba(255,255,255,.09);
  background: #050b13;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 70px;
}

.footer-grid > div:not(:first-child) {
  display: grid;
  align-content: start;
  gap: 13px;
  color: #71849c;
  font-size: 11px;
}

.footer-title {
  margin: 3px 0 7px;
  color: #d6e1ee;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.footer-note {
  max-width: 280px;
  margin: 20px 0 0;
  color: #63768d;
  font-size: 11px;
  line-height: 1.6;
}

.footer-grid a:hover {
  color: var(--electric);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 65px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #52667f;
  font-size: 9px;
}

/* Inner pages */
.inner-page {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
}

.inner-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 92px;
  color: #fff;
  background:
    radial-gradient(circle at 83% 22%, rgba(30,118,255,.31), transparent 24%),
    linear-gradient(130deg, #07101d, #0d1b2e);
}

.inner-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(90deg, transparent, #000);
}

.inner-hero .shell {
  position: relative;
  z-index: 2;
}

.inner-hero p {
  max-width: 700px;
  margin: 24px 0 0;
  color: #a8b8cb;
  font-size: 17px;
  line-height: 1.75;
}

.provider-types,
.process-section {
  padding: 95px 0;
}

.provider-types {
  background: var(--paper);
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 44px;
}

.provider-type {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  padding: 25px;
  border: 1px solid rgba(7,16,29,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.42);
}

.provider-type > span {
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 9px;
}

.provider-type h3 {
  margin: 27px 0 13px;
  font-size: 21px;
  letter-spacing: -.035em;
}

.provider-type p {
  margin: 0;
  color: #6a7684;
  font-size: 12px;
  line-height: 1.65;
}

.provider-type small {
  margin-top: auto;
  padding-top: 20px;
  color: #536276;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.provider-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 42px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  overflow: hidden;
}

.process-section {
  color: #fff;
  background: var(--ink);
}

.provider-step {
  min-height: 215px;
  padding: 25px;
  background: rgba(255,255,255,.025);
}

.provider-step:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.1);
}

.provider-step span {
  color: var(--electric);
  font-family: var(--font-mono);
  font-size: 9px;
}

.provider-step h3 {
  margin: 35px 0 12px;
  font-size: 17px;
}

.provider-step p {
  margin: 0;
  color: #8092a8;
  font-size: 11px;
  line-height: 1.7;
}

.join-panel {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 70px;
  margin-top: 70px;
  padding: 42px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(33,116,255,.15), rgba(255,255,255,.03));
}

.join-panel h2 {
  margin: 0;
  font-size: 39px;
  line-height: 1.05;
  letter-spacing: -.05em;
}

.join-panel p {
  margin: 16px 0 0;
  color: #8799ad;
  font-size: 13px;
  line-height: 1.7;
}

.join-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}

/* Portal and dashboards */
.portal-login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  background: var(--ink);
}

.login-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 38px 56px 56px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7,16,29,.08), rgba(7,16,29,.72)),
    url("/media/hero-roadside.jpg") center / cover;
}

.login-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7,16,29,.93), transparent 65%);
}

.login-visual > * {
  position: relative;
  z-index: 2;
}

.login-quote {
  max-width: 540px;
}

.login-quote h1 {
  margin: 0;
  font-size: clamp(44px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -.065em;
}

.login-quote p {
  max-width: 470px;
  margin: 20px 0 0;
  color: #a5b5c8;
  line-height: 1.7;
}

.login-panel {
  display: grid;
  place-items: center;
  padding: 54px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #0a1422;
  background-size: 46px 46px;
}

.login-card {
  width: min(100%, 430px);
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 36px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: rgba(10,22,38,.9);
  box-shadow: 0 30px 100px rgba(0,0,0,.3);
}

.login-card h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -.045em;
}

.login-card > p {
  margin: 10px 0 26px;
  color: #8193aa;
  font-size: 12px;
  line-height: 1.6;
}

.preview-notice {
  margin-bottom: 24px;
  padding: 12px 14px;
  border: 1px solid rgba(67,148,255,.18);
  border-radius: 10px;
  color: #98bce9;
  background: rgba(67,148,255,.07);
  font-size: 10px;
  line-height: 1.5;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.field label {
  color: #9db0c7;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  outline: 0;
  color: #e9f2fc;
  background: rgba(255,255,255,.045);
}

.field textarea {
  min-height: 110px;
  padding-block: 13px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(67,148,255,.09);
}

.login-separator {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 25px 0 18px;
  color: #52677f;
  font-size: 9px;
}

.login-separator::before,
.login-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.09);
}

.preview-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.preview-links a {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  color: #8498af;
  text-align: center;
  font-size: 9px;
}

.preview-links a:hover {
  color: #fff;
  border-color: rgba(67,148,255,.5);
}

.portal-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 238px 1fr;
  color: #dce7f4;
  background: #07101d;
}

.portal-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 28px 20px 20px;
  border-right: 1px solid rgba(255,255,255,.09);
  background: #080f1a;
}

.portal-rail-label {
  margin: 42px 12px 10px;
  color: #536a84;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.portal-rail nav {
  display: grid;
  gap: 5px;
}

.portal-rail nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 9px;
  color: #71869e;
  font-size: 12px;
}

.portal-rail nav a:hover,
.portal-rail nav a.active {
  color: #e8f3ff;
  background: rgba(67,148,255,.1);
}

.rail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.portal-rail nav a.active .rail-dot {
  background: var(--electric);
  box-shadow: 0 0 9px var(--electric);
}

.rail-account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 11px;
}

.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #ddecff;
  background: linear-gradient(135deg, #156ee7, #6765ee);
  font-size: 10px;
  font-weight: 800;
}

.rail-account > span:last-child {
  display: grid;
  gap: 3px;
  font-size: 10px;
}

.rail-account small {
  color: #647991;
  font-size: 8px;
}

.portal-main {
  min-width: 0;
  padding: 28px 34px 50px;
  background:
    radial-gradient(circle at 80% -5%, rgba(47,114,224,.13), transparent 23%),
    #0a1421;
}

.portal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.portal-topbar h1 {
  margin: 5px 0 0;
  font-size: 27px;
  letter-spacing: -.045em;
}

.portal-kicker {
  color: #5e7793;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 33px;
  padding: 0 11px;
  border: 1px solid rgba(52,214,160,.18);
  border-radius: 8px;
  color: #93dfc7;
  background: rgba(52,214,160,.055);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.status-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.metric-card,
.dashboard-panel {
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 15px;
  background: rgba(255,255,255,.028);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.metric-card {
  min-height: 132px;
  padding: 19px;
}

.metric-card small {
  color: #617993;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-top: 19px;
  font-size: 31px;
  letter-spacing: -.055em;
}

.metric-card span {
  display: block;
  margin-top: 6px;
  color: #6f859e;
  font-size: 9px;
}

.admin-notification-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.admin-notification-bar button {
  min-height: 74px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 13px 15px;
  border: 1px solid rgba(67,148,255,.2);
  border-radius: 12px;
  color: #a9c4e3;
  background:
    linear-gradient(135deg, rgba(67,148,255,.1), rgba(52,214,160,.025));
  cursor: pointer;
  text-align: left;
}

.admin-notification-bar button:hover,
.admin-notification-bar button:focus-visible {
  border-color: rgba(67,148,255,.45);
  transform: translateY(-1px);
}

.admin-notification-bar span {
  font-size: 9px;
}

.admin-notification-bar strong {
  grid-row: span 2;
  color: #ecf6ff;
  font-size: 24px;
}

.admin-notification-bar small {
  color: #607b98;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 12px;
  margin-top: 12px;
}

.dashboard-panel {
  min-height: 280px;
  padding: 20px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.panel-header h2 {
  margin: 0;
  font-size: 14px;
}

.panel-header a {
  color: #69a6f6;
  font-size: 9px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 9px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-align: left;
  font-size: 9px;
}

.data-table th {
  color: #536b84;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.data-table td {
  color: #9cafc3;
}

.data-table td strong {
  display: block;
  color: #d7e4f1;
  font-size: 10px;
}

.data-table td small {
  color: #5d748c;
  font-size: 8px;
}

.table-action {
  display: inline-flex;
  padding: 6px 8px;
  border: 1px solid rgba(67,148,255,.21);
  border-radius: 6px;
  color: #7fb5ff;
  background: rgba(67,148,255,.06);
}

.activity-list {
  display: grid;
}

.activity-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.activity-icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #7eb4fb;
  background: rgba(67,148,255,.09);
  font-size: 10px;
}

.activity-item p {
  margin: 1px 0 3px;
  color: #afbdd0;
  font-size: 9px;
  line-height: 1.45;
}

.activity-item small {
  color: #566d86;
  font-size: 8px;
}

.ai-tool {
  min-height: 280px;
  padding: 24px;
  border: 1px solid rgba(67,148,255,.18);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(30,114,255,.1), transparent 60%),
    rgba(255,255,255,.025);
}

.ai-tool h2 {
  margin: 13px 0 8px;
  font-size: 18px;
}

.ai-tool > p {
  margin: 0;
  color: #768ba4;
  font-size: 10px;
  line-height: 1.6;
}

.ai-query {
  margin-top: 23px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(0,0,0,.12);
}

.ai-query small {
  color: #506a87;
  font-family: var(--font-mono);
  font-size: 7px;
}

.ai-query p {
  margin: 8px 0 0;
  color: #b0bfd0;
  font-size: 9px;
}

.portal-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,157,56,.15);
  border-radius: 12px;
  color: #9e8d78;
  background: rgba(255,157,56,.035);
  font-size: 9px;
}

@media (max-width: 1060px) {
  .desktop-nav { display: none; }
  .hero-grid { grid-template-columns: 1fr .65fr; gap: 32px; }
  .precision-grid { gap: 40px; }
  .provider-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .shell { width: min(100% - 32px, 680px); }
  .header-actions { display: none; }
  .mobile-menu { display: block; }
  .hero { min-height: auto; }
  .hero::after {
    background:
      linear-gradient(90deg, rgba(7,16,29,.96), rgba(7,16,29,.5)),
      linear-gradient(0deg, #07101d 0%, rgba(7,16,29,.2) 50%);
  }
  .hero-media { opacity: .74; }
  .hero-grid {
    grid-template-columns: 1fr;
    padding-block: 65px 72px;
  }
  .answer-card { margin: 15px 0 0; }
  .proof-grid { grid-template-columns: 1fr; padding-block: 15px; }
  .proof-grid span { min-height: 35px; }
  .proof-grid span:not(:last-child) { border-right: 0; }
  .precision-grid,
  .network-grid,
  .pricing-grid,
  .download-grid,
  .section-heading,
  .join-panel {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .precision-grid { padding-block: 85px; }
  .phone-stage { order: 2; }
  .section-heading { align-items: start; }
  .feature-bento { grid-template-columns: 1fr; }
  .bento-large { grid-row: auto; }
  .network-map { min-height: 390px; }
  .provider-steps { grid-template-columns: repeat(2, 1fr); }
  .provider-step:nth-child(2) { border-right: 0; }
  .provider-step:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .portal-login-page { grid-template-columns: 1fr; }
  .login-visual { min-height: 560px; }
  .portal-page { grid-template-columns: 1fr; }
  .portal-rail {
    position: relative;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    overflow-x: auto;
  }
  .portal-rail-label,
  .rail-account { display: none; }
  .portal-rail nav { display: flex; margin-left: auto; }
}

@media (max-width: 560px) {
  .shell { width: calc(100% - 28px); }
  .site-header { height: 70px; }
  .brand-name { font-size: 17px; }
  .hero-media { top: 70px; }
  .hero-media img { object-position: 65% center; }
  .hero h1 { font-size: 50px; }
  .hero-lead { font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .answer-card { width: 100%; }
  .answer-copy { padding-left: 20px; }
  .precision-copy h2,
  .section-heading h2,
  .network-copy h2,
  .pricing-grid h2,
  .download-grid h2,
  .inner-hero h1 { font-size: 40px; }
  .phone-stage { min-height: 570px; transform: scale(.88); margin-inline: -20px; }
  .feature-section { padding-block: 82px; }
  .bento-card { min-height: 300px; padding: 23px; }
  .bento-large { min-height: 570px; }
  .question-stack { width: 96%; }
  .network-grid,
  .pricing-section,
  .download-section { padding-block: 78px; }
  .price-card { padding: 24px; }
  .price { font-size: 73px; }
  .store-badges { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 35px; }
  .footer-bottom { flex-direction: column; }
  .provider-grid,
  .provider-steps { grid-template-columns: 1fr; }
  .provider-step:not(:last-child) { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .join-panel { padding: 27px; }
  .login-visual { min-height: 500px; padding: 28px; }
  .login-panel { padding: 25px 14px; }
  .login-card { padding: 25px; }
  .preview-links { grid-template-columns: 1fr; }
  .portal-rail { padding: 17px 14px; }
  .portal-rail .brand-name { display: none; }
  .portal-rail nav a { padding-inline: 8px; }
  .portal-main { padding: 23px 14px 40px; }
  .portal-topbar { align-items: flex-start; flex-direction: column; }
  .metric-grid,
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-panel { overflow-x: auto; }
  .data-table { min-width: 580px; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Authenticated portal appearance and live local clock */
.portal-experience-controls {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
}

.portal-theme-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(42px, 1fr));
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(142, 181, 229, .16);
  border-radius: 12px;
  background: rgba(3, 10, 20, .46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.portal-theme-switcher button {
  min-height: 34px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  color: #637a94;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 720;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.portal-theme-switcher button:hover {
  color: #b9d6f8;
}

.portal-theme-switcher button.is-selected {
  color: #f7fbff;
  background: linear-gradient(135deg, #126ff1, #526fff);
  box-shadow:
    0 7px 22px rgba(26, 116, 255, .24),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.portal-theme-switcher button:focus-visible {
  outline: 2px solid #6eb1ff;
  outline-offset: 2px;
}

.portal-digital-clock {
  position: relative;
  min-width: 276px;
  display: grid;
  grid-template-columns: 7px minmax(128px, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 12px 9px 10px;
  overflow: hidden;
  border: 1px solid rgba(116, 174, 247, .22);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(25, 86, 166, .19), transparent 58%),
    rgba(6, 16, 29, .86);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, .2),
    inset 0 1px 0 rgba(255, 255, 255, .055);
}

.portal-digital-clock::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .045), transparent 65%);
}

.clock-live-mark {
  width: 5px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, #73c1ff, #1677ff);
  box-shadow: 0 0 15px rgba(73, 158, 255, .78);
}

.clock-primary,
.clock-calendar {
  position: relative;
  z-index: 1;
  display: grid;
}

.clock-primary time {
  color: #f4f9ff;
  font-family: var(--font-mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: -.045em;
  line-height: 1;
  white-space: nowrap;
}

.clock-primary > span {
  margin-top: 5px;
  overflow: hidden;
  color: #7390ae;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.clock-calendar {
  justify-items: end;
  gap: 4px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .09);
  white-space: nowrap;
}

.clock-calendar strong {
  color: #c4d9ef;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.clock-calendar span {
  color: #607a96;
  font-size: 7px;
}

.portal-gate-controls {
  position: absolute;
  top: 20px;
  right: 34px;
}

.portal-main.billing-gate-main {
  position: relative;
  padding-top: 90px;
}

.portal-page .topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

html[data-portal-theme="light"] .portal-page {
  color: #17283b;
  background: #edf3fa;
}

html[data-portal-theme="light"] .portal-page .portal-rail {
  color: #182b40;
  border-right-color: rgba(25, 55, 91, .11);
  background:
    linear-gradient(180deg, rgba(34, 121, 255, .055), transparent 34%),
    #f9fbfe;
  box-shadow: 12px 0 35px rgba(35, 67, 105, .055);
}

html[data-portal-theme="light"] .portal-page .portal-rail nav a {
  color: #61748a;
}

html[data-portal-theme="light"] .portal-page .portal-rail nav a:hover,
html[data-portal-theme="light"] .portal-page .portal-rail nav a.active {
  color: #0e61cf;
  background: rgba(31, 118, 233, .09);
}

html[data-portal-theme="light"] .portal-page .rail-account {
  border-color: rgba(26, 57, 92, .11);
  background: rgba(255, 255, 255, .74);
}

html[data-portal-theme="light"] .portal-page .rail-account small,
html[data-portal-theme="light"] .portal-page .rail-signout,
html[data-portal-theme="light"] .portal-page .portal-rail-label {
  color: #718399;
}

html[data-portal-theme="light"] .portal-page .portal-main {
  color: #17283b;
  background:
    radial-gradient(circle at 82% -8%, rgba(48, 130, 240, .12), transparent 25%),
    #f1f5fa;
}

html[data-portal-theme="light"] .portal-page :is(h1, h2, h3) {
  color: #102237;
}

html[data-portal-theme="light"] .portal-page :is(
  .portal-kicker,
  .metric-card small,
  .metric-card span,
  .data-table th,
  .data-table td,
  .data-table td small,
  .panel-header a,
  .area-ai-panel p,
  .provider-account-hero > div > p:last-child,
  .provider-account-hero dt,
  .provider-account-hero dd,
  .provider-workspace-grid p,
  .billing-gate > div > p,
  .billing-gate > p,
  .billing-status-panel p,
  .billing-price-intro,
  .billing-price-row small,
  .billing-price-footnote,
  .account-creation-rule,
  .role-directory-list small,
  .review-message
) {
  color: #61758c;
}

html[data-portal-theme="light"] .portal-page :is(
  .metric-card strong,
  .data-table td strong,
  .provider-type-counts strong,
  .role-directory-list strong,
  .billing-price-row strong
) {
  color: #18304a;
}

html[data-portal-theme="light"] .portal-page :is(
  .metric-card,
  .dashboard-panel,
  .provider-account-hero,
  .billing-gate,
  .ai-tool,
  .ai-prompt-box,
  .secure-files,
  .provider-type-counts > div,
  .role-directory-list article,
  .billing-price-row,
  .trial-code-list > div
) {
  border-color: rgba(27, 61, 99, .12);
  background: rgba(255, 255, 255, .76);
  box-shadow:
    0 14px 38px rgba(31, 57, 89, .055),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

html[data-portal-theme="light"] .portal-page :is(
  .data-table th,
  .data-table td,
  .provider-account-hero dl div,
  .application-summary-list article
) {
  border-bottom-color: rgba(26, 57, 92, .1);
}

html[data-portal-theme="light"] .portal-page :is(
  input,
  select,
  textarea,
  .ai-route-control > div
) {
  color: #1a314a;
  border-color: rgba(27, 61, 99, .14);
  background: #ffffff;
}

html[data-portal-theme="light"] .portal-page :is(
  input,
  textarea
)::placeholder {
  color: #8798aa;
}

html[data-portal-theme="light"] .portal-page .portal-theme-switcher {
  border-color: rgba(31, 69, 111, .13);
  background: rgba(255, 255, 255, .8);
  box-shadow:
    0 10px 28px rgba(35, 67, 105, .07),
    inset 0 1px 0 #ffffff;
}

html[data-portal-theme="light"] .portal-page .portal-theme-switcher button {
  color: #6a7c90;
}

html[data-portal-theme="light"] .portal-page .portal-theme-switcher button:hover {
  color: #1c5fae;
}

html[data-portal-theme="light"] .portal-page .portal-theme-switcher button.is-selected {
  color: #ffffff;
}

html[data-portal-theme="light"] .portal-page .portal-digital-clock {
  border-color: rgba(30, 91, 163, .16);
  background:
    linear-gradient(135deg, rgba(44, 130, 238, .1), transparent 58%),
    rgba(255, 255, 255, .9);
  box-shadow:
    0 14px 38px rgba(35, 67, 105, .09),
    inset 0 1px 0 #ffffff;
}

html[data-portal-theme="light"] .portal-page .clock-primary time {
  color: #102b49;
}

html[data-portal-theme="light"] .portal-page .clock-primary > span,
html[data-portal-theme="light"] .portal-page .clock-calendar span {
  color: #667e98;
}

html[data-portal-theme="light"] .portal-page .clock-calendar {
  border-left-color: rgba(30, 65, 104, .12);
}

html[data-portal-theme="light"] .portal-page .clock-calendar strong {
  color: #355675;
}

html[data-portal-theme="light"] .portal-page .portal-note {
  color: #826b50;
  border-color: rgba(203, 125, 36, .18);
  background: rgba(255, 160, 52, .07);
}

html[data-portal-theme="light"] .portal-page .billing-divider {
  border-top-color: rgba(26, 57, 92, .1);
}

html[data-portal-theme="light"] .portal-page .billing-divider span {
  color: #6a7f96;
  background: #f1f5fa;
}

@media (max-width: 1120px) {
  .portal-page .portal-topbar {
    align-items: flex-start;
  }

  .portal-page .topbar-actions {
    max-width: 455px;
  }

}

@media (max-width: 820px) {
  .portal-experience-controls {
    width: 100%;
    justify-content: stretch;
  }

  .portal-theme-switcher {
    flex: 1 1 auto;
  }

  .portal-digital-clock {
    flex: 1 1 276px;
  }

  .portal-page .topbar-actions {
    width: 100%;
    max-width: none;
    justify-content: stretch;
  }

  .portal-page .status-chip {
    margin-left: 0;
  }

  .portal-gate-controls {
    position: static;
    width: min(680px, 100%);
    margin-bottom: 16px;
  }

  .portal-main.billing-gate-main {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding-top: 20px;
  }
}

@media (max-width: 620px) {
  .portal-experience-controls {
    flex-direction: column;
  }

  .portal-theme-switcher {
    width: 100%;
    flex: none;
  }

  .portal-digital-clock {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  .portal-page .portal-topbar {
    gap: 16px;
  }
}

/* Cinematic photo-first public homepage */
.photo-home {
  min-height: 100vh;
  color: #f7faff;
  background:
    radial-gradient(circle at 71% 24%, rgba(35, 121, 255, 0.13), transparent 30%),
    linear-gradient(135deg, #060a12 0%, #07101d 55%, #050911 100%);
  font-family: var(--font-inter), Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.photo-shell {
  width: min(1360px, calc(100% - 80px));
  margin-inline: auto;
}

.photo-header {
  position: relative;
  z-index: 20;
  height: 88px;
}

.photo-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
}

.photo-header .brand {
  gap: 12px;
  color: #f7faff;
  font-family: var(--font-inter), sans-serif;
  letter-spacing: -0.035em;
}

.photo-header .brand-mark {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
}

.photo-header .brand-mark img {
  width: 36px;
  height: 24px;
}

.photo-header .brand-name {
  font-size: 26px;
  font-weight: 680;
}

.photo-header .brand-name span {
  color: inherit;
}

.photo-nav {
  display: flex;
  align-items: center;
  gap: 42px;
  margin-left: auto;
}

.photo-nav a {
  color: #d4dce7;
  font-size: 16px;
  font-weight: 450;
  letter-spacing: -0.015em;
  transition: color 160ms ease;
}

.photo-nav a:hover {
  color: #66d9ff;
}

.photo-mobile-nav {
  display: none;
  position: relative;
  margin-left: auto;
}

.photo-mobile-nav summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;
  list-style: none;
  cursor: pointer;
}

.photo-mobile-nav summary::-webkit-details-marker {
  display: none;
}

.photo-mobile-nav summary span {
  width: 19px;
  height: 1px;
  background: #f7faff;
}

.photo-mobile-nav nav {
  position: absolute;
  top: 53px;
  right: 0;
  width: 230px;
  display: grid;
  padding: 10px;
  border: 1px solid rgba(102,180,255,.28);
  border-radius: 15px;
  background: rgba(8,17,30,.97);
  box-shadow: 0 24px 70px rgba(0,0,0,.4);
}

.photo-mobile-nav nav a {
  padding: 13px;
  border-radius: 9px;
  color: #c5d1df;
  font-size: 14px;
}

.photo-mobile-nav nav a:hover {
  color: #fff;
  background: rgba(47,128,255,.11);
}

.photo-hero {
  position: relative;
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 54px 0 74px;
}

.photo-glow {
  position: absolute;
  top: 20%;
  right: -4%;
  width: 70vw;
  height: 70vw;
  max-width: 1000px;
  max-height: 1000px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,119,255,.14), rgba(31,119,255,.04) 42%, transparent 68%);
  pointer-events: none;
}

.photo-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(360px, 5fr) minmax(640px, 7fr);
  align-items: center;
  gap: 60px;
}

.photo-hero-copy {
  max-width: 515px;
  animation: photo-rise 500ms ease both;
}

@keyframes photo-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.photo-intro {
  margin: 0 0 22px;
  color: #66d9ff;
  font-size: 14px;
  font-weight: 580;
  letter-spacing: -0.01em;
}

.photo-hero h1 {
  margin: 0;
  color: #f7faff;
  font-size: clamp(56px, 4.7vw, 68px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.052em;
}

.photo-lead {
  max-width: 500px;
  margin: 30px 0 0;
  color: #a9b8ca;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.02em;
}

.photo-cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 34px;
}

.photo-primary-button {
  min-width: 256px;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(100deg, #2f80ff, #2166f3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 34px rgba(33,102,243,.19);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  transition: transform 180ms ease, filter 180ms ease;
}

.photo-primary-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
}

.photo-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0;
  color: #a9b8ca;
}

.photo-price strong {
  color: #dce8f8;
  font-size: 21px;
  font-weight: 650;
}

.photo-price span {
  font-size: 15px;
}

.photo-coffee {
  margin: 16px 0 0;
  color: #65778d;
  font-size: 12px;
}

.live-photo-panel {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(102,180,255,.55);
  border-radius: 24px;
  background: rgba(8,17,30,.82);
  box-shadow:
    0 30px 80px rgba(0,28,72,.45),
    0 0 34px rgba(47,128,255,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  animation: photo-rise 550ms 100ms ease both;
  transition: transform 180ms ease, border-color 180ms ease;
}

.live-photo-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(102,180,255,.8);
}

.live-photo-image {
  position: relative;
  height: clamp(320px, 31vw, 458px);
  overflow: hidden;
  background: #050a12;
}

.live-photo-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(transparent, rgba(5,12,22,.88));
  pointer-events: none;
}

.live-photo-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selected-file {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 16px;
  max-width: calc(100% - 36px);
  overflow: hidden;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  color: #c7d4e2;
  background: rgba(5,12,22,.76);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.live-photo-controls {
  min-height: 78px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.camera-action,
.upload-action {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 18px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 540;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.camera-action {
  min-width: 158px;
  color: #73aaff;
  border: 1px solid rgba(84,150,255,.55);
  background: rgba(47,128,255,.1);
}

.camera-action:hover {
  color: #a6c8ff;
  background: rgba(47,128,255,.17);
}

.upload-action {
  color: #d7dee7;
}

.upload-action:hover {
  color: #66d9ff;
  background: rgba(255,255,255,.04);
}

.camera-icon {
  position: relative;
  width: 25px;
  height: 19px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.camera-icon::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 5px;
  width: 10px;
  height: 6px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.camera-icon::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 8px;
  width: 6px;
  height: 6px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.live-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  color: #66d9ff;
  font-size: 14px;
  white-space: nowrap;
}

.live-status span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #43d6ff;
  box-shadow: 0 0 12px rgba(67,214,255,.95);
  animation: photo-live 1.8s ease-in-out infinite;
}

@keyframes photo-live {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.live-result {
  min-height: 102px;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 16px;
  margin: 16px 20px 0;
  padding: 18px 20px;
  border: 1px solid rgba(153,184,220,.18);
  border-radius: 14px;
  background: rgba(16,28,45,.88);
  transition: opacity 160ms ease;
}

.live-result.is-reading {
  opacity: .72;
}

.result-symbol {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242,169,59,.35);
  border-radius: 50%;
  color: #f2a93b;
  font-size: 24px;
  font-weight: 700;
}

.live-result h2 {
  margin: 0;
  color: #f7faff;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.live-result p {
  margin: 6px 0 0;
  color: #a9b8ca;
  font-size: 14px;
  line-height: 1.45;
}

.live-disclaimer {
  margin: 0;
  padding: 14px 22px 18px;
  color: #7f90a6;
  font-size: 12px;
  line-height: 1.45;
}

.photo-trust-line {
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.018);
}

.photo-trust-line .photo-shell {
  min-height: 78px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.photo-trust-line p {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: #8191a5;
  font-size: 13px;
}

.photo-trust-line p:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.08);
}

.photo-trust-line span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f80ff;
}

.photo-help-section {
  padding: 126px 0;
  color: #07101d;
  background: #f4f4f1;
}

.photo-section-heading {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  align-items: start;
  gap: 70px;
}

.photo-section-heading > p,
.photo-intro-dark {
  color: #34679f;
}

.photo-section-heading > p {
  margin: 9px 0 0;
  font-size: 14px;
  font-weight: 600;
}

.photo-section-heading h2,
.photo-story-copy h2,
.photo-steps-grid h2,
.photo-safety-grid h2,
.photo-price-grid h2 {
  margin: 0;
  font-size: clamp(45px, 4.6vw, 66px);
  font-weight: 620;
  line-height: 1.06;
  letter-spacing: -0.055em;
}

.photo-use-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 80px;
  border-top: 1px solid rgba(7,16,29,.17);
}

.photo-use-list article {
  min-height: 275px;
  padding: 28px 32px 30px 0;
  border-bottom: 1px solid rgba(7,16,29,.17);
}

.photo-use-list article:not(:last-child) {
  margin-right: 32px;
  border-right: 1px solid rgba(7,16,29,.17);
}

.photo-use-list span {
  color: #2f80ff;
  font-size: 12px;
  font-weight: 650;
}

.photo-use-list h3 {
  margin: 67px 0 15px;
  font-size: 25px;
  font-weight: 620;
  letter-spacing: -0.035em;
}

.photo-use-list p {
  max-width: 330px;
  margin: 0;
  color: #5d6977;
  font-size: 15px;
  line-height: 1.65;
}

.photo-story-section {
  min-height: 690px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  color: #f7faff;
  background: #07101d;
}

.photo-story-image {
  min-height: 690px;
  overflow: hidden;
}

.photo-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.photo-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px clamp(48px, 7vw, 120px);
}

.photo-story-copy h2 {
  max-width: 620px;
}

.photo-story-copy > p:not(.photo-intro) {
  max-width: 590px;
  margin: 28px 0 0;
  color: #a5b4c6;
  font-size: 17px;
  line-height: 1.7;
}

.photo-story-copy > a,
.photo-safety-grid a,
.photo-provider-banner a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin-top: 30px;
  color: #ddecff;
  font-size: 14px;
  font-weight: 600;
}

.photo-story-copy a span,
.photo-safety-grid a span,
.photo-provider-banner a span {
  color: #66d9ff;
  font-size: 20px;
  transition: transform 160ms ease;
}

.photo-story-copy a:hover span,
.photo-safety-grid a:hover span,
.photo-provider-banner a:hover span {
  transform: translateX(4px);
}

.photo-steps-section {
  padding: 126px 0;
  color: #07101d;
  background: #ffffff;
}

.photo-steps-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px;
}

.photo-steps-grid ol {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(7,16,29,.16);
  list-style: none;
}

.photo-steps-grid li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  padding: 27px 0;
  border-bottom: 1px solid rgba(7,16,29,.16);
}

.photo-steps-grid li > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #226fd8;
  background: #edf5ff;
  font-size: 12px;
  font-weight: 650;
}

.photo-steps-grid h3 {
  margin: 2px 0 7px;
  font-size: 19px;
  font-weight: 620;
  letter-spacing: -0.025em;
}

.photo-steps-grid li p {
  max-width: 530px;
  margin: 0;
  color: #647080;
  font-size: 14px;
  line-height: 1.65;
}

.photo-safety-section {
  padding: 114px 0;
  color: #f7faff;
  border-top: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 74% 40%, rgba(47,128,255,.11), transparent 28%),
    #081321;
}

.photo-safety-grid {
  display: grid;
  grid-template-columns: .5fr 1fr .75fr;
  align-items: start;
  gap: 58px;
}

.photo-safety-grid > p {
  margin: 8px 0 0;
  color: #66d9ff;
  font-size: 13px;
  font-weight: 600;
}

.photo-safety-grid > div > p {
  margin: 8px 0 0;
  color: #93a5ba;
  font-size: 15px;
  line-height: 1.7;
}

.photo-price-section {
  padding: 126px 0;
  color: #07101d;
  background: #f1f1ed;
}

.photo-price-grid {
  display: grid;
  grid-template-columns: 1fr .95fr;
  align-items: start;
  gap: 120px;
}

.photo-price-grid .photo-intro {
  color: #34679f;
}

.photo-price-offer {
  padding: 8px 0 0;
}

.photo-price-offer > p {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
}

.photo-price-offer > p strong {
  color: #07101d;
  font-size: 78px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.07em;
}

.photo-price-offer > p span {
  color: #647080;
  font-size: 16px;
}

.photo-price-offer ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin: 32px 0 0;
  padding: 28px 0;
  border-top: 1px solid rgba(7,16,29,.15);
  border-bottom: 1px solid rgba(7,16,29,.15);
  list-style: none;
}

.photo-price-offer li {
  position: relative;
  padding-left: 22px;
  color: #4d5b6a;
  font-size: 13px;
}

.photo-price-offer li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #1b73e8;
  font-weight: 700;
}

.photo-store-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}

.photo-store-row span {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(7,16,29,.17);
  border-radius: 10px;
  color: #566474;
  background: rgba(255,255,255,.55);
  font-size: 11px;
}

.photo-price-offer small {
  display: block;
  margin-top: 14px;
  color: #7a8795;
  font-size: 10px;
  line-height: 1.5;
}

.photo-provider-banner {
  padding: 74px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: #07101d;
}

.photo-provider-banner .photo-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.photo-provider-banner p {
  margin: 0 0 11px;
  color: #7590ad;
  font-size: 12px;
}

.photo-provider-banner h2 {
  margin: 0;
  font-size: clamp(31px, 3.4vw, 45px);
  font-weight: 600;
  letter-spacing: -0.045em;
}

.photo-provider-banner a {
  flex: 0 0 auto;
  margin: 0;
}

.photo-footer {
  padding: 68px 0 25px;
  color: #f7faff;
  background: #050a11;
}

.photo-footer .brand-name span {
  color: inherit;
}

.photo-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr;
  gap: 80px;
}

.photo-footer-grid > div:first-child > p {
  margin: 19px 0 0;
  color: #6d8097;
  font-size: 12px;
}

.photo-footer-grid nav,
.photo-footer-grid > div:last-child {
  display: grid;
  align-content: start;
  gap: 14px;
  color: #8394a8;
  font-size: 12px;
}

.photo-footer-grid a:hover {
  color: #66d9ff;
}

.photo-footer-grid > div:last-child p {
  margin: 0;
}

.photo-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 58px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #53677e;
  font-size: 10px;
}

@media (max-width: 1180px) {
  .photo-shell {
    width: min(100% - 48px, 1080px);
  }

  .photo-hero-grid {
    grid-template-columns: minmax(330px, .85fr) minmax(540px, 1.15fr);
    gap: 42px;
  }

  .photo-hero h1 {
    font-size: 52px;
  }

  .photo-lead {
    font-size: 17px;
  }

  .photo-cta-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
  }

  .photo-primary-button {
    min-width: 230px;
  }
}

@media (max-width: 920px) {
  .photo-shell {
    width: min(100% - 40px, 760px);
  }

  .photo-nav {
    display: none;
  }

  .photo-mobile-nav {
    display: block;
  }

  .photo-hero {
    padding: 70px 0 90px;
  }

  .photo-hero-grid,
  .photo-section-heading,
  .photo-steps-grid,
  .photo-safety-grid,
  .photo-price-grid {
    grid-template-columns: 1fr;
  }

  .photo-hero-grid {
    gap: 58px;
  }

  .photo-hero-copy {
    max-width: 650px;
  }

  .photo-cta-row {
    align-items: center;
    flex-direction: row;
  }

  .live-photo-image {
    height: min(58vw, 470px);
  }

  .photo-section-heading,
  .photo-steps-grid,
  .photo-safety-grid,
  .photo-price-grid {
    gap: 46px;
  }

  .photo-story-section {
    grid-template-columns: 1fr;
  }

  .photo-story-image {
    min-height: 500px;
  }

  .photo-story-copy {
    padding: 90px max(28px, calc((100vw - 720px) / 2));
  }

  .photo-safety-grid {
    gap: 24px;
  }
}

@media (max-width: 680px) {
  .photo-shell {
    width: calc(100% - 36px);
  }

  .photo-header {
    height: 74px;
  }

  .photo-header .brand-mark {
    width: 36px;
    height: 36px;
  }

  .photo-header .brand-name {
    font-size: 21px;
  }

  .photo-hero {
    min-height: auto;
    padding: 55px 0 72px;
  }

  .photo-hero h1 {
    font-size: clamp(42px, 12vw, 53px);
  }

  .photo-lead {
    font-size: 17px;
  }

  .photo-cta-row {
    align-items: stretch;
    flex-direction: column;
  }

  .photo-primary-button {
    width: 100%;
  }

  .photo-price {
    align-self: center;
  }

  .photo-coffee {
    text-align: center;
  }

  .live-photo-panel {
    border-radius: 18px;
  }

  .live-photo-image {
    height: 250px;
  }

  .live-photo-controls {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
  }

  .camera-action,
  .upload-action {
    min-width: 0;
    padding-inline: 10px;
    font-size: 13px;
  }

  .live-status {
    grid-column: 1 / -1;
    justify-content: flex-start;
    min-height: 38px;
    padding-inline: 5px;
  }

  .live-result {
    grid-template-columns: 42px 1fr;
    gap: 12px;
    margin: 12px 12px 0;
    padding: 14px;
  }

  .result-symbol {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .live-result h2 {
    font-size: 14px;
  }

  .live-result p {
    font-size: 13px;
  }

  .live-disclaimer {
    padding: 12px 14px 16px;
    font-size: 11px;
  }

  .photo-trust-line .photo-shell {
    grid-template-columns: 1fr;
    padding-block: 16px;
  }

  .photo-trust-line p {
    min-height: 35px;
  }

  .photo-trust-line p:not(:last-child) {
    border-right: 0;
  }

  .photo-help-section,
  .photo-steps-section,
  .photo-safety-section,
  .photo-price-section {
    padding: 86px 0;
  }

  .photo-section-heading h2,
  .photo-story-copy h2,
  .photo-steps-grid h2,
  .photo-safety-grid h2,
  .photo-price-grid h2 {
    font-size: 42px;
  }

  .photo-use-list {
    grid-template-columns: 1fr;
    margin-top: 55px;
  }

  .photo-use-list article {
    min-height: 235px;
    padding-right: 0;
  }

  .photo-use-list article:not(:last-child) {
    margin-right: 0;
    border-right: 0;
  }

  .photo-use-list h3 {
    margin-top: 48px;
  }

  .photo-story-image {
    min-height: 360px;
  }

  .photo-story-copy {
    padding: 78px 22px;
  }

  .photo-price-offer > p strong {
    font-size: 66px;
  }

  .photo-price-offer ul,
  .photo-store-row {
    grid-template-columns: 1fr;
  }

  .photo-provider-banner .photo-shell,
  .photo-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .photo-provider-banner a {
    margin-top: 25px;
  }

  .photo-footer-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

/* Full-bleed film homepage */
.film-home {
  min-height: 100vh;
  color: #f7faff;
  background: #030b16;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.film-shell {
  width: min(1292px, calc(100% - 148px));
  margin-inline: auto;
}

.film-hero {
  position: relative;
  min-height: 720px;
  height: 100svh;
  overflow: hidden;
  background: #07182d;
}

.film-hero-media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1586 / 992;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.film-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  animation: film-image-in 900ms ease both;
}

@keyframes film-image-in {
  from { transform: scale(1.015); }
  to { transform: scale(1); }
}

.film-precision-headlight {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.film-inner-glow {
  fill: url(#film-inner-bloom);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#film-lens-glow);
  animation: film-inner-bloom 560ms cubic-bezier(.2,.82,.2,1) forwards;
}

.film-inner-one { animation-delay: 520ms; }
.film-inner-two { animation-delay: 820ms; }
.film-inner-three { animation-delay: 1120ms; }

@keyframes film-inner-bloom {
  0% {
    opacity: 0;
    transform: scale(.55);
  }
  62% {
    opacity: .72;
    transform: scale(1.04);
  }
  100% {
    opacity: .42;
    transform: scale(1);
  }
}

.film-outer-glow {
  fill: url(#film-projector-bloom);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#film-lens-glow);
  animation: film-projector-ignite 580ms 1450ms cubic-bezier(.2,.82,.2,1) forwards;
}

@keyframes film-projector-ignite {
  0% {
    opacity: 0;
    transform: scale(.45);
  }
  62% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: .92;
    transform: scale(1);
  }
}

.film-projector-ray {
  fill: url(#film-ray-gradient);
  opacity: 0;
  transform-box: view-box;
  transform-origin: 1147px 426px;
  transform: scaleX(.02);
  mix-blend-mode: screen;
  animation: film-projector-ray 850ms 1720ms cubic-bezier(.18,.8,.2,1) forwards;
}

@keyframes film-projector-ray {
  0% {
    opacity: 0;
    transform: scaleX(.02);
  }
  28% {
    opacity: .48;
  }
  100% {
    opacity: .28;
    transform: scaleX(1);
  }
}

.film-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3,11,22,.94) 0%, rgba(3,11,22,.7) 29%, rgba(3,11,22,.2) 58%, rgba(3,11,22,0) 76%),
    linear-gradient(0deg, rgba(3,11,22,.38), transparent 42%);
}

.film-headlight-live {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.film-lamp {
  position: absolute;
  width: 18px;
  height: 10px;
  border-radius: 50%;
  background: #eef8ff;
  box-shadow:
    0 0 8px 3px rgba(225,244,255,.98),
    0 0 24px 10px rgba(128,202,255,.75),
    0 0 55px 19px rgba(43,140,255,.45);
  opacity: 0;
  transform: scale(.25);
  animation: film-lamp-ignite 520ms cubic-bezier(.2,.8,.2,1) forwards;
}

.film-lamp-inner {
  top: 43.7%;
  left: 65.4%;
  animation-delay: 520ms;
}

.film-lamp-middle {
  top: 43.4%;
  left: 68.7%;
  animation-delay: 940ms;
}

.film-lamp-outer {
  top: 42.9%;
  left: 72.2%;
  animation-delay: 1360ms;
}

.film-lamp-final {
  top: 42.3%;
  left: 75.1%;
  width: 27px;
  height: 13px;
  animation-delay: 1780ms;
  box-shadow:
    0 0 10px 4px rgba(238,249,255,1),
    0 0 32px 14px rgba(132,207,255,.88),
    0 0 80px 32px rgba(37,132,255,.55);
}

@keyframes film-lamp-ignite {
  0% { opacity: 0; transform: scale(.25); }
  52% { opacity: 1; transform: scale(1.35); }
  100% { opacity: .96; transform: scale(1); }
}

.film-headlight-beam {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 62% 38% at 70% 44%, rgba(212,241,255,.3), rgba(94,178,255,.12) 28%, transparent 69%),
    linear-gradient(168deg, transparent 20%, rgba(116,194,255,.16) 43%, rgba(209,239,255,.14) 57%, transparent 76%);
  mix-blend-mode: screen;
  transform-origin: 70% 44%;
  animation: film-beam-on 1050ms 1850ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes film-beam-on {
  0% { opacity: 0; transform: scale(.72); }
  58% { opacity: .9; transform: scale(1.035); }
  100% { opacity: .62; transform: scale(1); }
}

.film-header {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 31px 40px 0;
  animation: film-fade-in 350ms ease both;
}

@keyframes film-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.film-header .brand {
  color: #f7faff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.film-header .brand-mark {
  position: relative;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(72,150,255,.46),
    0 0 18px rgba(20,120,255,.58),
    0 0 42px rgba(20,120,255,.22);
  animation: film-brand-pulse 3.2s ease-in-out infinite;
}

.film-header .brand-mark img {
  width: 41px;
  height: auto;
}

.film-header .brand-name {
  position: relative;
  overflow: hidden;
  color: #f7faff;
  font-size: 29px;
  font-weight: 650;
  letter-spacing: -0.055em;
  text-shadow: 0 0 18px rgba(255,255,255,.18);
}

.film-header .brand-name span {
  color: #63a8ff;
  text-shadow: 0 0 12px rgba(35,135,255,.78);
}

.film-header .brand-name::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -35px;
  width: 24px;
  background: linear-gradient(90deg, transparent, rgba(128,194,255,.85), transparent);
  transform: skewX(-18deg);
  animation: film-brand-scan 4s ease-in-out infinite;
}

@keyframes film-brand-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

@keyframes film-brand-scan {
  0%, 22% { left: -35px; opacity: 0; }
  35% { opacity: 1; }
  56% { left: calc(100% + 18px); opacity: 0; }
  100% { left: calc(100% + 18px); opacity: 0; }
}

.film-nav {
  display: flex;
  align-items: center;
  gap: 42px;
  margin-left: auto;
}

.film-nav a {
  color: rgba(247,250,255,.87);
  font-size: 16px;
  font-weight: 450;
  letter-spacing: -0.018em;
  transition: color 160ms cubic-bezier(.2,.8,.2,1);
}

.film-nav a:hover {
  color: #fff;
}

.film-menu {
  display: none;
  position: relative;
  margin-left: auto;
}

.film-menu summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 11px;
  background: rgba(3,11,22,.22);
  list-style: none;
  backdrop-filter: blur(10px);
}

.film-menu summary::-webkit-details-marker {
  display: none;
}

.film-menu summary span {
  width: 18px;
  height: 1px;
  background: #fff;
}

.film-menu nav {
  position: absolute;
  top: 54px;
  right: 0;
  width: 230px;
  display: grid;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(3,11,22,.96);
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
  backdrop-filter: blur(16px);
}

.film-menu nav a {
  padding: 13px 12px;
  border-radius: 8px;
  color: rgba(247,250,255,.82);
  font-size: 14px;
}

.film-menu nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.film-hero-copy {
  position: absolute;
  z-index: 2;
  left: 74px;
  bottom: 112px;
  width: min(790px, calc(100% - 148px));
  animation: film-copy-in 520ms 100ms ease both;
}

@keyframes film-copy-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.film-hero-copy h1 {
  max-width: 790px;
  margin: 0;
  color: transparent;
  background:
    linear-gradient(90deg,
      rgba(7,18,32,.8) 0%,
      rgba(10,25,43,.82) 45%,
      #7fbeff 52%,
      #f7faff 60%,
      #f7faff 100%);
  background-size: 245% 100%;
  background-position: 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(58px, 5.1vw, 72px);
  font-weight: 450;
  line-height: 1.04;
  letter-spacing: -0.048em;
  text-wrap: balance;
  filter: drop-shadow(0 0 0 rgba(52,149,255,0));
  animation: film-headline-ignite 980ms 2120ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes film-headline-ignite {
  0% {
    background-position: 0 0;
    filter: drop-shadow(0 0 0 rgba(52,149,255,0));
  }
  62% {
    background-position: 100% 0;
    filter:
      drop-shadow(0 0 12px rgba(220,245,255,.98))
      drop-shadow(0 0 30px rgba(45,145,255,.82));
  }
  100% {
    background-position: 100% 0;
    filter:
      drop-shadow(0 0 8px rgba(210,240,255,.72))
      drop-shadow(0 0 22px rgba(45,145,255,.48));
  }
}

.film-hero-copy > p {
  max-width: 610px;
  margin: 30px 0 0;
  color: rgba(247,250,255,.78);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -0.018em;
}

.film-action-wrap {
  margin-top: 40px;
}

.film-action-row {
  display: flex;
  align-items: center;
  gap: 29px;
}

.film-photo-button {
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px;
  border-radius: 12px;
  color: #fff;
  background: #1478ff;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.018em;
  transition: background 160ms cubic-bezier(.2,.8,.2,1), transform 160ms cubic-bezier(.2,.8,.2,1);
}

.film-photo-button:hover {
  background: #2f8bff;
  transform: translateY(-1px);
}

.film-photo-button:active {
  background: #0867e8;
  transform: translateY(0);
}

.film-photo-button:focus-within {
  outline: 3px solid rgba(84,158,255,.72);
  outline-offset: 3px;
}

.film-camera-icon {
  position: relative;
  width: 27px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 5px;
}

.film-camera-icon::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 5px;
  width: 11px;
  height: 6px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

.film-camera-icon::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 8px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.film-photo-ready {
  max-width: 560px;
  min-height: 20px;
  margin: 14px 0 0;
  color: rgba(247,250,255,.74);
  font-size: 12px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.film-photo-ready.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.film-scroll {
  position: absolute;
  z-index: 2;
  right: 40px;
  bottom: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(247,250,255,.58);
  font-size: 11px;
}

.film-scroll span {
  width: 32px;
  height: 1px;
  background: currentColor;
}

.film-how {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 126px 0 118px;
  color: #0a1422;
  background: #f4f2ec;
}

.film-how::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(78vw, 950px);
  aspect-ratio: 1;
  background: url("/brand/maxxai-mark.png") center / contain no-repeat;
  opacity: .038;
  filter: grayscale(1);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.film-how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
  align-items: center;
  gap: clamp(68px, 8vw, 130px);
}

.film-how-kicker,
.film-statement .film-shell > p:first-child,
.film-guidance-copy > p:first-child,
.film-price-layout > div:first-child > p,
.film-partner p {
  margin: 0;
  color: #2a5f9c;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.film-how-copy h2,
.film-statement h2,
.film-guidance-copy h2,
.film-price-layout h2,
.film-partner h2 {
  margin: 0;
  font-size: clamp(45px, 4.7vw, 67px);
  font-weight: 450;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.film-how-copy h2 {
  margin-top: 26px;
}

.film-how-copy h2 em {
  color: #1478ff;
  font-style: normal;
}

.film-how-intro {
  max-width: 660px;
  margin: 28px 0 0;
  color: #596572;
  font-size: 16px;
  line-height: 1.68;
}

.film-step-list {
  display: grid;
  margin-top: 42px;
  border-top: 1px solid rgba(10,20,34,.18);
}

.film-step-list article {
  min-height: 122px;
  display: grid;
  grid-template-columns: 86px 1fr;
  align-items: center;
  gap: 22px;
  padding: 22px 8px 22px 0;
  border-bottom: 1px solid rgba(10,20,34,.18);
}

.film-step-list span {
  color: #1478ff;
  font-size: 64px;
  font-weight: 350;
  line-height: 1;
  letter-spacing: -.07em;
}

.film-step-list h3 {
  margin: 0 0 7px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.film-step-list p {
  max-width: 520px;
  margin: 0;
  color: #596572;
  font-size: 13px;
  line-height: 1.55;
}

.film-plan-name {
  color: #1478ff;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.film-phone-stage {
  position: relative;
  min-height: 720px;
  display: grid;
  place-items: center;
}

.film-phone-stage::before,
.film-phone-stage::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(20,120,255,.12);
  border-radius: 50%;
}

.film-phone-stage::before {
  width: 590px;
  height: 590px;
}

.film-phone-stage::after {
  width: 430px;
  height: 430px;
}

.film-phone-shell {
  position: relative;
  z-index: 2;
  width: 330px;
  padding: 12px;
  overflow: hidden;
  border: 7px solid #172334;
  border-radius: 54px;
  background: #172334;
  box-shadow: 0 36px 75px rgba(28,48,74,.18);
  transform: rotate(5deg);
}

.film-phone-shell img {
  width: 100%;
  border-radius: 37px;
}

.film-phone-speaker {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 50%;
  width: 92px;
  height: 24px;
  border-radius: 16px;
  background: #111b29;
  transform: translateX(-50%);
}

.film-phone-label {
  position: absolute;
  z-index: 3;
  padding: 10px 14px;
  color: #66778a;
  border: 1px solid rgba(20,120,255,.2);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.film-phone-label-one {
  top: 27%;
  left: -5%;
}

.film-phone-label-two {
  top: 54%;
  right: -9%;
}

.film-phone-label-three {
  bottom: 17%;
  left: -2%;
}

.film-statement {
  position: relative;
  overflow: hidden;
  padding: 132px 0;
  background:
    radial-gradient(circle at 85% 48%, rgba(20,120,255,.13), transparent 27%),
    #07182d;
}

.film-statement h2 {
  max-width: 990px;
  margin-top: 52px;
  color: #f7faff;
  font-size: clamp(53px, 6.2vw, 88px);
}

.film-statement-copy {
  max-width: 610px;
  margin: 48px 0 0 auto;
  color: rgba(247,250,255,.67);
  font-size: 17px;
  line-height: 1.7;
}

.film-value {
  position: relative;
  overflow: hidden;
  padding: 118px 0 126px;
  color: #f7faff;
  border-top: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 12% 0%, rgba(20,120,255,.15), transparent 32%),
    #030b16;
}

.film-value::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -270px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(80,155,255,.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 90px rgba(20,120,255,.025),
    0 0 0 180px rgba(20,120,255,.018);
  pointer-events: none;
}

.film-value-heading {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  align-items: start;
  gap: 70px;
}

.film-value-heading > p {
  margin: 10px 0 0;
  color: #7da0c8;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.film-value-heading h2 {
  max-width: 800px;
  margin: 0;
  font-size: clamp(46px, 5vw, 72px);
  font-weight: 450;
  line-height: 1.02;
  letter-spacing: -.052em;
}

.film-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 82px;
  border-top: 1px solid rgba(255,255,255,.13);
}

.film-value-grid article {
  position: relative;
  min-height: 285px;
  padding: 40px 42px 20px 0;
}

.film-value-grid article:not(:last-child) {
  margin-right: 42px;
  border-right: 1px solid rgba(255,255,255,.13);
}

.film-value-grid article::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 52px;
  height: 3px;
  background: #1478ff;
  box-shadow: 0 0 16px rgba(20,120,255,.72);
}

.film-value-grid h3 {
  margin: 0;
  color: #f7faff;
  font-size: clamp(37px, 3.6vw, 54px);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -.05em;
}

.film-value-grid p {
  max-width: 340px;
  margin: 30px 0 0;
  color: rgba(220,234,255,.64);
  font-size: 15px;
  line-height: 1.72;
}

.film-guidance {
  position: relative;
  min-height: 690px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #f7faff;
  background: #050f1d;
}

.film-guidance-image {
  position: absolute;
  inset: 0;
}

.film-guidance-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.film-guidance-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,11,22,.96) 0%, rgba(3,11,22,.78) 37%, rgba(3,11,22,.12) 70%);
}

.film-guidance-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(650px, 50%);
  min-height: 690px;
  padding: 90px 0 90px max(48px, calc((100vw - 1240px) / 2));
}

.film-guidance-copy > p:not(:first-child) {
  max-width: 590px;
  margin: 28px 0 0;
  color: rgba(247,250,255,.7);
  font-size: 16px;
  line-height: 1.7;
}

.film-guidance-copy > a,
.film-partner a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin-top: 31px;
  color: #dceaff;
  font-size: 14px;
  font-weight: 600;
}

.film-guidance-copy > a span,
.film-partner a span {
  color: #1478ff;
  font-size: 20px;
  transition: transform 160ms ease;
}

.film-guidance-copy > a:hover span,
.film-partner a:hover span {
  transform: translateX(4px);
}

.film-roadside {
  min-height: 690px;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  color: #0a1422;
  background: #f4f2ec;
}

.film-roadside-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px clamp(48px, 6vw, 105px);
}

.film-roadside-copy > p:first-child {
  margin: 0;
  color: #2a5f9c;
  font-size: 14px;
  font-weight: 600;
}

.film-roadside-copy h2 {
  margin: 22px 0 0;
  font-size: clamp(44px, 4.4vw, 64px);
  font-weight: 450;
  line-height: 1.05;
  letter-spacing: -.05em;
}

.film-roadside-copy > p:not(:first-child) {
  max-width: 610px;
  margin: 28px 0 0;
  color: #5b6875;
  font-size: 16px;
  line-height: 1.7;
}

.film-roadside-copy > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin-top: 28px;
  color: #0a3f78;
  font-size: 14px;
  font-weight: 650;
}

.film-roadside-copy > a.film-service-button {
  min-height: 58px;
  padding: 0 23px;
  border-radius: 10px;
  color: #fff;
  background: #1478ff;
  box-shadow: 0 12px 34px rgba(20,120,255,.22);
  transition: transform 160ms ease, background 160ms ease;
}

.film-roadside-copy > a.film-service-button:hover {
  background: #2d89ff;
  transform: translateY(-2px);
}

.film-roadside-copy > a.film-service-button span {
  color: #fff;
}

.film-roadside-copy > a span {
  color: #1478ff;
  font-size: 20px;
}

.film-roadside-image {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  background: #061225;
}

.film-roadside-media {
  position: absolute;
  top: 50%;
  left: 78%;
  height: 100%;
  aspect-ratio: 1672 / 941;
  transform: translate(-78%, -50%) scale(1.02);
  transform-origin: center;
}

.film-roadside-media img,
.film-hazard-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.film-roadside-media img {
  object-fit: fill;
}

.film-hazard-overlay {
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.film-hazard-segment {
  opacity: 0;
  filter: brightness(1.12) saturate(1.08) drop-shadow(0 0 2px rgba(255,46,38,.38));
  mix-blend-mode: screen;
}

.film-hazard-left-boost {
  clip-path: inset(0 27.4% 0 0);
  filter:
    brightness(.3)
    saturate(1.08)
    drop-shadow(0 0 4px rgba(255,46,38,.62));
}

.film-hazard-left-outer {
  filter:
    brightness(.3)
    saturate(1.08)
    drop-shadow(0 0 5px rgba(255,46,38,.72))
    drop-shadow(0 0 9px rgba(255,46,38,.38));
}

.film-roadside-image.is-hazard-active .film-hazard-inner {
  animation: film-hazard-inner 1.55s linear infinite;
}

.film-roadside-image.is-hazard-active .film-hazard-middle {
  animation: film-hazard-middle 1.55s linear infinite;
}

.film-roadside-image.is-hazard-active .film-hazard-outer {
  animation: film-hazard-outer 1.55s linear infinite;
}

@keyframes film-hazard-inner {
  0%, 10%, 68%, 100% { opacity: 0; }
  15%, 62% { opacity: .984; }
}

@keyframes film-hazard-middle {
  0%, 22%, 68%, 100% { opacity: 0; }
  27%, 62% { opacity: .984; }
}

@keyframes film-hazard-outer {
  0%, 34%, 68%, 100% { opacity: 0; }
  39%, 62% { opacity: .984; }
}

.film-price-section {
  padding: 126px 0;
  color: #0a1422;
  background: #fff;
}

.film-price-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 120px;
}

.film-price-block {
  padding: 28px;
  border: 1px solid rgba(10,20,34,.14);
  border-radius: 16px;
  background: #fafafa;
}

.film-price-block > p {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.film-price-block > p strong {
  font-size: 66px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.07em;
}

.film-price-block > p span {
  color: #66727e;
  font-size: 16px;
}

.film-price-block ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 24px;
  margin: 30px 0 0;
  padding: 27px 0;
  border-top: 1px solid rgba(10,20,34,.16);
  border-bottom: 1px solid rgba(10,20,34,.16);
  list-style: none;
}

.film-price-block li {
  position: relative;
  padding-left: 21px;
  color: #52606f;
  font-size: 13px;
}

.film-price-block li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #1478ff;
  font-weight: 700;
}

.film-store-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 23px;
}

.film-store-buttons span {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(10,20,34,.16);
  border-radius: 9px;
  color: #5e6b78;
  background: #fafafa;
  font-size: 11px;
}

.film-price-block small {
  display: block;
  margin-top: 13px;
  color: #83909d;
  font-size: 10px;
}

.film-pricing-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.film-price-commercial {
  color: #f7faff;
  border-color: #102b4d;
  background: #07182d;
}

.film-price-commercial .film-plan-name {
  color: #7eb5ff;
}

.film-price-commercial > p span,
.film-price-commercial li {
  color: #aab8c9;
}

.film-pricing-options .film-store-buttons,
.film-pricing-options > small {
  grid-column: 1 / -1;
}

.film-partner {
  padding: 78px 0;
  color: #f7faff;
  background: #07182d;
}

.film-partner .film-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

.film-partner p {
  color: #7da0c8;
}

.film-partner h2 {
  margin-top: 10px;
  font-size: clamp(34px, 3.5vw, 48px);
}

.film-partner a {
  flex: 0 0 auto;
  margin: 0;
  color: #f7faff;
}

.film-footer {
  padding: 70px 0 25px;
  color: #f7faff;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #030b16;
}

.film-footer .brand-name span {
  color: inherit;
}

.film-footer-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr .7fr;
  gap: 80px;
}

.film-footer-main > div:first-child > p {
  margin: 19px 0 0;
  color: #63758b;
  font-size: 12px;
}

.film-footer-main nav,
.film-footer-main > div:last-child {
  display: grid;
  align-content: start;
  gap: 14px;
  color: #8192a6;
  font-size: 12px;
}

.film-footer-main a:hover {
  color: #fff;
}

.film-footer-main > div:last-child p {
  margin: 0;
}

.film-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 58px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #50647c;
  font-size: 10px;
}

.owner-access-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.owner-access-confirmed {
  color: #cfe0ff;
  border-color: rgba(52,214,160,.36);
  background: rgba(52,214,160,.08);
}

.access-restricted {
  color: #ffd9d9;
  border-color: rgba(255,105,105,.35);
  background: rgba(255,105,105,.08);
}

.owner-signout {
  margin-top: 9px;
  color: #7c8b9c;
  font-size: 12px;
  text-align: center;
}

.registration-closed {
  display: block;
  margin-top: 15px;
  color: #7c8b9c;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

@media (max-aspect-ratio: 1586 / 992) {
  .film-hero-media {
    width: auto;
    height: 100%;
  }
}

@media (max-width: 1100px) {
  .film-shell {
    width: min(100% - 96px, 1000px);
  }

  .film-header {
    padding-inline: 32px;
  }

  .film-nav {
    gap: 28px;
  }

  .film-hero-image {
    object-position: 58% center;
  }

  .film-hero-copy {
    left: 48px;
    bottom: 92px;
    width: min(660px, calc(100% - 96px));
  }

  .film-hero-copy h1 {
    font-size: 58px;
  }

  .film-price-layout {
    gap: 70px;
  }
}

@media (max-width: 820px) {
  .film-shell {
    width: calc(100% - 64px);
  }

  .film-nav {
    display: none;
  }

  .film-menu {
    display: block;
  }

  .film-hero-image {
    object-position: 62% center;
  }

  .film-hero-overlay {
    background:
      linear-gradient(90deg, rgba(3,11,22,.86), rgba(3,11,22,.12)),
      linear-gradient(0deg, rgba(3,11,22,.82), rgba(3,11,22,.06) 72%);
  }

  .film-lamp-inner { left: 60%; }
  .film-lamp-middle { left: 65%; }
  .film-lamp-outer { left: 70%; }
  .film-lamp-final { left: 75%; }

  .film-hero-copy {
    left: 32px;
    bottom: 68px;
    width: calc(100% - 64px);
  }

  .film-hero-copy h1 {
    max-width: 560px;
    font-size: 48px;
    line-height: 1.08;
  }

  .film-scroll {
    display: none;
  }

  .film-how-grid,
  .film-price-layout,
  .film-value-heading {
    grid-template-columns: 1fr;
    gap: 43px;
  }

  .film-value-grid {
    grid-template-columns: 1fr;
    margin-top: 58px;
  }

  .film-value-grid article {
    min-height: auto;
    padding: 38px 0 44px;
  }

  .film-value-grid article:not(:last-child) {
    margin-right: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.13);
  }

  .film-step-list {
    margin-top: 42px;
  }

  .film-step-list article {
    min-height: 116px;
    padding-right: 0;
  }

  .film-step-list h3 {
    margin-top: 0;
  }

  .film-phone-stage {
    min-height: 650px;
  }

  .film-phone-shell {
    width: 300px;
  }

  .film-guidance {
    min-height: 480px;
  }

  .film-guidance-copy {
    width: 68%;
    min-height: 600px;
    padding: 90px 0 90px 48px;
  }

  .film-roadside {
    grid-template-columns: 1fr;
  }

  .film-roadside-image {
    min-height: 520px;
    grid-row: 1;
  }

  .film-roadside-copy {
    padding: 90px 48px;
  }

  .film-price-layout {
    gap: 56px;
  }
}

@media (max-width: 560px) {
  body {
    padding-left: 25px;
    padding-right: 25px;
  }

  .site-launch-tape {
    width: 25px;
  }

  .site-launch-tape-track span {
    font-size: 7px;
    letter-spacing: .14em;
  }

  .film-shell {
    width: calc(100% - 44px);
  }

  .film-hero {
    min-height: 680px;
  }

  .film-header {
    padding: 22px 22px 0;
  }

  .film-header .brand-mark {
    width: 42px;
    height: 42px;
  }

  .film-header .brand-name {
    font-size: 25px;
  }

  .film-hero-image {
    object-position: 66% center;
  }

  .film-hero-overlay {
    background:
      linear-gradient(90deg, rgba(3,11,22,.76), rgba(3,11,22,.04)),
      linear-gradient(0deg, rgba(3,11,22,.92), rgba(3,11,22,.1) 76%);
  }

  .film-lamp {
    top: 38%;
    transform: scale(.2);
  }

  .film-lamp-inner { left: 53%; }
  .film-lamp-middle { left: 61%; }
  .film-lamp-outer { left: 69%; }
  .film-lamp-final { left: 76%; }

  .film-headlight-beam {
    transform-origin: 67% 39%;
  }

  .film-hero-copy {
    left: 22px;
    bottom: 44px;
    width: calc(100% - 44px);
  }

  .film-hero-copy h1 {
    max-width: 11ch;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.06;
  }

  .film-hero-copy > p {
    margin-top: 23px;
    font-size: 17px;
    line-height: 1.47;
  }

  .film-action-wrap {
    margin-top: 29px;
  }

  .film-action-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .film-photo-button {
    width: min(100%, 360px);
  }

  .film-photo-ready {
    margin-top: 10px;
  }

  .film-how,
  .film-statement,
  .film-value,
  .film-price-section {
    padding: 88px 0;
  }

  .film-value-heading h2 {
    font-size: 43px;
  }

  .film-value-grid h3 {
    font-size: 42px;
  }

  .film-how-copy h2,
  .film-guidance-copy h2,
  .film-price-layout h2 {
    font-size: 43px;
  }

  .film-step-list article {
    grid-template-columns: 58px 1fr;
    gap: 16px;
  }

  .film-step-list span {
    font-size: 49px;
  }

  .film-phone-stage {
    min-height: 560px;
  }

  .film-phone-stage::before {
    width: 460px;
    height: 460px;
  }

  .film-phone-stage::after {
    width: 340px;
    height: 340px;
  }

  .film-phone-shell {
    width: 255px;
    border-width: 5px;
    border-radius: 44px;
  }

  .film-phone-label {
    font-size: 7px;
  }

  .film-phone-label-one {
    left: -4%;
  }

  .film-phone-label-two {
    right: -4%;
  }

  .film-statement h2 {
    margin-top: 38px;
    font-size: 48px;
  }

  .film-statement-copy {
    margin-top: 39px;
  }

  .film-guidance-image {
    min-height: 0;
  }

  .film-guidance-copy {
    width: 100%;
    min-height: 640px;
    padding: 78px 22px;
  }

  .film-guidance-image img {
    object-position: 68% center;
  }

  .film-guidance-image::after {
    background:
      linear-gradient(0deg, rgba(3,11,22,.96), rgba(3,11,22,.2)),
      linear-gradient(90deg, rgba(3,11,22,.74), transparent);
  }

  .film-roadside-image {
    min-height: 380px;
  }

  .film-roadside-copy {
    padding: 78px 22px;
  }

  .film-roadside-copy h2 {
    font-size: 43px;
  }

  .film-price-block > p strong {
    font-size: 58px;
  }

  .film-pricing-options,
  .film-price-block ul,
  .film-store-buttons {
    grid-template-columns: 1fr;
  }

  .film-partner .film-shell,
  .film-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .film-partner a {
    margin-top: 26px;
  }

  .film-footer-main {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-hero-image,
  .film-header,
  .film-hero-copy {
    animation: none;
  }

  .film-inner-glow {
    opacity: .42;
    transform: scale(1);
    animation: none;
  }

  .film-outer-glow {
    opacity: .92;
    animation: none;
  }

  .film-projector-ray {
    opacity: .13;
    transform: scaleX(1);
    animation: none;
  }

  .film-roadside-image.is-hazard-active .film-hazard-segment {
    opacity: .78;
    animation: none;
  }

  .film-lamp {
    opacity: .82;
    transform: scale(1);
    animation: none;
  }

  .film-headlight-beam {
    opacity: .32;
    transform: none;
    animation: none;
  }

  .film-hero-copy h1 {
    background-position: 100% 0;
    filter: drop-shadow(0 0 8px rgba(45,145,255,.28));
    animation: none;
  }

  .film-photo-button,
  .film-photo-ready {
    transition-duration: 100ms;
  }
}

/* Isolated first-page headlight proof — not linked into the full site */
.hero-proof-page {
  min-height: 100vh;
  overflow: hidden;
  color: #f7faff;
  background: #030b16;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hero-proof {
  position: relative;
  height: max(720px, 100svh);
  overflow: hidden;
  background: #07182d;
}

.hero-proof-media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1586 / 992;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.hero-proof-media > img,
.hero-proof-shade,
.hero-proof-headlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-proof-media > img {
  object-fit: fill;
  animation: film-image-in 900ms ease both;
}

.hero-proof-shade {
  background:
    linear-gradient(90deg, rgba(3,11,22,.94) 0%, rgba(3,11,22,.7) 29%, rgba(3,11,22,.2) 58%, rgba(3,11,22,0) 76%),
    linear-gradient(0deg, rgba(3,11,22,.38), transparent 42%);
}

.hero-proof-headlight {
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.hero-inner-glow {
  fill: url(#hero-inner-bloom);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#hero-lens-glow);
  animation: hero-inner-bloom 560ms cubic-bezier(.2,.82,.2,1) forwards;
}

.hero-inner-one { animation-delay: 520ms; }
.hero-inner-two { animation-delay: 820ms; }
.hero-inner-three { animation-delay: 1120ms; }

@keyframes hero-inner-bloom {
  0% {
    opacity: 0;
    transform: scale(.55);
  }
  62% {
    opacity: .72;
    transform: scale(1.04);
  }
  100% {
    opacity: .42;
    transform: scale(1);
  }
}

.hero-outer-glow {
  fill: url(#hero-projector-bloom);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: url(#hero-lens-glow);
  animation: hero-projector-ignite 580ms 1450ms cubic-bezier(.2,.82,.2,1) forwards;
}

@keyframes hero-projector-ignite {
  0% {
    opacity: 0;
    transform: scale(.45);
  }
  62% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: .92;
    transform: scale(1);
  }
}

.hero-projector-ray {
  fill: url(#hero-ray-gradient);
  opacity: 0;
  transform-box: view-box;
  transform-origin: 1147px 426px;
  transform: scaleX(.02);
  mix-blend-mode: screen;
  animation: hero-projector-ray 850ms 1720ms cubic-bezier(.18,.8,.2,1) forwards;
}

@keyframes hero-projector-ray {
  0% {
    opacity: 0;
    transform: scaleX(.02);
  }
  28% {
    opacity: .48;
  }
  100% {
    opacity: .28;
    transform: scaleX(1);
  }
}

.hero-proof-copy {
  position: absolute;
  z-index: 2;
  left: 74px;
  bottom: 192px;
  width: min(790px, calc(100% - 148px));
  animation: film-copy-in 520ms 100ms ease both;
}

.hero-proof-copy h1 {
  max-width: 790px;
  margin: 0;
  color: transparent;
  background:
    linear-gradient(90deg,
      rgba(7,18,32,.8) 0%,
      rgba(10,25,43,.82) 45%,
      #7fbeff 52%,
      #f7faff 60%,
      #f7faff 100%);
  background-size: 245% 100%;
  background-position: 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(58px, 5.1vw, 72px);
  font-weight: 450;
  line-height: 1.04;
  letter-spacing: -.048em;
  text-wrap: balance;
  filter: drop-shadow(0 0 0 rgba(52,149,255,0));
  animation: hero-proof-copy-light 980ms 2120ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes hero-proof-copy-light {
  0% {
    background-position: 0 0;
    filter: drop-shadow(0 0 0 rgba(52,149,255,0));
  }
  62% {
    background-position: 100% 0;
    filter:
      drop-shadow(0 0 12px rgba(220,245,255,.98))
      drop-shadow(0 0 30px rgba(45,145,255,.82));
  }
  100% {
    background-position: 100% 0;
    filter:
      drop-shadow(0 0 8px rgba(210,240,255,.72))
      drop-shadow(0 0 22px rgba(45,145,255,.48));
  }
}

.hero-proof-copy > p {
  max-width: 610px;
  margin: 30px 0 0;
  color: rgba(247,250,255,.78);
  font-size: 19px;
  line-height: 1.48;
  letter-spacing: -.018em;
}

.hero-proof-copy .film-action-wrap {
  margin-top: 40px;
}

.hero-proof-note {
  position: absolute;
  z-index: 4;
  right: 24px;
  bottom: 20px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  background: rgba(3,11,22,.54);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

@media (max-aspect-ratio: 1586 / 992) {
  .hero-proof-media {
    width: auto;
    height: 100%;
  }
}

@media (max-width: 900px) {
  .hero-proof-copy {
    left: 32px;
    bottom: 68px;
    width: calc(100% - 64px);
  }

  .hero-proof-copy h1 {
    font-size: clamp(47px, 8vw, 66px);
  }

  .hero-proof-note {
    display: none;
  }
}

@media (max-width: 620px) {
  .hero-proof-copy {
    left: 22px;
    bottom: 44px;
    width: calc(100% - 44px);
  }

  .hero-proof-copy h1 {
    font-size: clamp(40px, 11.3vw, 54px);
  }

  .hero-proof-copy > p {
    margin-top: 24px;
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-inner-glow {
    opacity: .42;
    transform: scale(1);
    animation: none;
  }

  .hero-outer-glow {
    opacity: .92;
    animation: none;
  }

  .hero-projector-ray {
    opacity: .13;
    transform: scaleX(1);
    animation: none;
  }

  .hero-proof-copy h1 {
    background-position: 100% 0;
    filter: drop-shadow(0 0 8px rgba(45,145,255,.28));
    animation: none;
  }
}

/* Fixed-route experience: the document stays still; only bounded work panels
   can scroll when a small screen or open keyboard makes that unavoidable. */
.fixed-page {
  position: fixed;
  z-index: 100;
  inset: 0 34px;
  width: auto;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

.fixed-page-header {
  position: relative;
  z-index: 30;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(22px, 4vw, 58px);
  color: #f7faff;
  border-bottom: 1px solid rgba(255,255,255,.11);
  background: rgba(4,13,25,.9);
  backdrop-filter: blur(18px);
}

.fixed-page-header .brand-mark {
  width: 42px;
  height: 42px;
  box-shadow:
    0 0 0 1px rgba(72,156,255,.38),
    0 0 22px rgba(20,120,255,.2);
}

.fixed-page-header .brand-name {
  font-size: 22px;
}

.fixed-back {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #b8c9dd;
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 650;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.fixed-back:hover {
  color: #fff;
  border-color: rgba(86,163,255,.7);
  background: rgba(67,148,255,.1);
}

.fixed-back span {
  color: #5ba2ff;
  font-size: 18px;
}

.fixed-back-dark {
  position: absolute;
  top: 22px;
  right: 28px;
  z-index: 5;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(104,175,255,.82);
  outline-offset: 3px;
}

.film-coming-note,
.film-partner-note {
  display: inline-flex;
  width: fit-content;
  margin-top: 29px;
  color: #8ab9f5;
  font-size: 13px;
  font-weight: 600;
}

.film-coming-note-dark {
  color: #315d8f;
}

.film-partner-note {
  max-width: 440px;
  margin: 0;
  color: #86a8d2;
  line-height: 1.6;
  text-align: right;
}

/* Partner selection page */
.partner-hub {
  color: #f7faff;
  background:
    radial-gradient(circle at 84% 20%, rgba(34,121,255,.23), transparent 26%),
    linear-gradient(135deg, #030b16, #091a2f);
}

.partner-hub::before {
  content: "";
  position: absolute;
  inset: 76px 0 0;
  opacity: .22;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(113,168,235,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(113,168,235,.08) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}

.partner-hub-content {
  position: relative;
  z-index: 2;
  height: calc(100dvh - 76px);
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: clamp(42px, 7vw, 110px);
  padding: clamp(28px, 5vw, 72px) clamp(28px, 6vw, 92px);
  overflow: hidden;
}

.partner-hub-intro h1 {
  max-width: 650px;
  margin: 16px 0 0;
  font-size: clamp(50px, 5.6vw, 82px);
  font-weight: 460;
  line-height: .96;
  letter-spacing: -.065em;
}

.partner-hub-intro h1 em {
  color: #4698ff;
  font-style: normal;
}

.partner-hub-intro > p:not(.application-kicker) {
  max-width: 590px;
  margin: 24px 0 0;
  color: #9bacc0;
  font-size: 15px;
  line-height: 1.7;
}

.partner-type-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.partner-registration-email {
  display: inline-flex;
  width: fit-content;
  margin-top: 14px;
  color: #78aef2;
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.application-email-link {
  margin-right: 14px;
  color: #78aef2;
}

.partner-type-cloud span {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: #7f94ad;
  background: rgba(255,255,255,.03);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .05em;
}

.partner-paths {
  display: grid;
  gap: 12px;
}

.partner-path-card {
  min-height: 210px;
  display: grid;
  align-content: center;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.partner-path-primary {
  border-color: rgba(74,157,255,.34);
  background:
    linear-gradient(135deg, rgba(30,119,255,.16), transparent 60%),
    rgba(255,255,255,.035);
}

.partner-path-card > span {
  color: #6faeff;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
}

.partner-path-card h2 {
  margin: 16px 0 0;
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 520;
  letter-spacing: -.045em;
}

.partner-path-card p {
  max-width: 660px;
  margin: 12px 0 0;
  color: #899bb0;
  font-size: 12px;
  line-height: 1.6;
}

.partner-path-card a {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 19px;
  color: #eaf3ff;
  font-size: 12px;
  font-weight: 700;
}

.partner-path-card a b {
  color: #4d9cff;
  font-size: 18px;
}

.partner-login-note {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 4px;
  color: #667b94;
  font-size: 10px;
}

.partner-login-note a {
  color: #80b6fb;
  font-weight: 700;
}

/* Application wizards */
.application-viewport {
  color: #f7faff;
  background:
    radial-gradient(circle at 14% 75%, rgba(25,112,238,.15), transparent 28%),
    #06101d;
}

.application-stage {
  height: calc(100dvh - 76px);
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(560px, 1.28fr);
  align-items: center;
  gap: clamp(34px, 6vw, 92px);
  padding: clamp(22px, 4vw, 52px) clamp(28px, 6vw, 92px);
  overflow: hidden;
}

.application-side-note h2 {
  max-width: 560px;
  margin: 13px 0 0;
  font-size: clamp(42px, 4.7vw, 70px);
  font-weight: 460;
  line-height: .98;
  letter-spacing: -.06em;
}

.application-side-note > p {
  margin: 0;
  color: #4e98f6;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.application-side-note > span {
  display: block;
  max-width: 500px;
  margin-top: 25px;
  color: #8296ae;
  font-size: 13px;
  line-height: 1.7;
}

.application-card,
.application-success {
  width: min(100%, 760px);
  height: min(590px, calc(100dvh - 112px));
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(40,120,231,.09), transparent 38%),
    rgba(10,23,40,.94);
  box-shadow: 0 32px 100px rgba(0,0,0,.28);
}

.application-form-slot {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.application-card {
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) 76px;
}

.application-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #667f9d;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.application-progress strong {
  color: #9bbce5;
}

.application-progress i {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #318cff;
  box-shadow: 0 0 12px rgba(49,140,255,.7);
  transition: width 200ms ease;
}

.application-card-body {
  min-height: 0;
  padding: clamp(20px, 3vw, 34px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(82,145,225,.55) transparent;
}

.application-step h1,
.application-success h1 {
  margin: 8px 0 23px;
  font-size: clamp(27px, 3vw, 40px);
  font-weight: 540;
  letter-spacing: -.045em;
}

.application-kicker {
  margin: 0;
  color: #559cf5;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.compact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.compact-form-grid label,
.application-select,
.application-textarea {
  display: grid;
  gap: 7px;
  color: #92a6bd;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.compact-form-grid input,
.compact-form-grid select,
.application-select select,
.application-textarea textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 10px;
  outline: 0;
  color: #e9f3ff;
  background: rgba(255,255,255,.045);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.application-select {
  margin-bottom: 17px;
}

.application-textarea {
  margin-top: 16px;
}

.application-textarea textarea {
  min-height: 92px;
  padding-block: 12px;
  resize: none;
  line-height: 1.55;
}

.compact-form-grid-text .application-textarea {
  margin-top: 18px;
}

.compact-form-grid-text .application-textarea textarea {
  min-height: 116px;
}

.service-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.service-choice-grid legend {
  margin-bottom: 8px;
  color: #92a6bd;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.service-choice-grid label {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px;
  color: #91a4bb;
  background: rgba(255,255,255,.025);
  font-size: 10px;
  line-height: 1.3;
}

.service-choice-grid input,
.routing-choice input,
.application-consent input {
  accent-color: #2887ff;
}

.routing-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.routing-choice > label {
  min-height: 76px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 11px;
  color: #778da6;
  background: rgba(255,255,255,.025);
  font-size: 9px;
  line-height: 1.5;
}

.routing-choice strong {
  display: block;
  margin-bottom: 3px;
  color: #c6d6e8;
  font-size: 10px;
}

.application-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  color: #8296ae;
  font-size: 9px;
  line-height: 1.55;
}

.application-consent input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.screening-notice {
  padding: 16px;
  border: 1px solid rgba(67,148,255,.2);
  border-radius: 12px;
  color: #a5b9d1;
  background: rgba(67,148,255,.06);
}

.screening-notice strong {
  color: #e0ecfa;
  font-size: 11px;
}

.screening-notice p {
  margin: 7px 0 0;
  font-size: 10px;
  line-height: 1.55;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.application-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.application-actions > div:last-child {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.application-message {
  max-width: 340px;
  color: #f0ad74;
  font-size: 9px;
  line-height: 1.4;
}

.application-button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #287eea;
  border-radius: 9px;
  color: #fff;
  background: #1478ff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.application-button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.application-button-muted {
  color: #9bb0c8;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.035);
}

.application-success {
  display: grid;
  place-content: center;
  padding: 50px;
  text-align: center;
}

.application-success > span {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  color: #06141f;
  background: #45ddb0;
  box-shadow: 0 0 32px rgba(69,221,176,.22);
  font-size: 25px;
  font-weight: 900;
}

.application-success > p:not(.application-kicker) {
  max-width: 470px;
  margin: 0 auto;
  color: #8ba0b8;
  font-size: 12px;
  line-height: 1.65;
}

.application-home-link {
  margin-top: 22px;
  color: #70acfb;
  font-size: 11px;
  font-weight: 700;
}

/* Fixed informational pages */
.info-viewport {
  color: #091522;
  background: #f2f0e9;
}

.info-viewport .fixed-page-header {
  color: #0b1727;
  border-bottom-color: rgba(7,16,29,.12);
  background: rgba(245,243,237,.93);
}

.info-viewport .fixed-back {
  color: #41546a;
  border-color: rgba(7,16,29,.15);
  background: rgba(255,255,255,.42);
}

.info-viewport-content,
.pricing-viewport-content {
  height: calc(100dvh - 76px);
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  align-items: center;
  gap: clamp(50px, 8vw, 130px);
  padding: clamp(28px, 5vw, 74px) clamp(28px, 7vw, 108px);
  overflow: hidden;
}

.info-heading h1 {
  max-width: 650px;
  margin: 13px 0 0;
  font-size: clamp(44px, 5.2vw, 78px);
  font-weight: 480;
  line-height: .98;
  letter-spacing: -.065em;
}

.info-heading > p:last-child {
  max-width: 600px;
  margin: 23px 0 0;
  color: #657381;
  font-size: 14px;
  line-height: 1.7;
}

.info-step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid rgba(7,16,29,.13);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.38);
  box-shadow: 0 30px 80px rgba(27,48,74,.08);
}

.info-step-grid article {
  min-height: 370px;
  display: flex;
  flex-direction: column;
  padding: 28px;
}

.info-step-grid article:not(:last-child) {
  border-right: 1px solid rgba(7,16,29,.11);
}

.info-step-grid strong {
  color: #1877ee;
  font-size: clamp(72px, 7vw, 106px);
  font-weight: 520;
  line-height: .9;
  letter-spacing: -.08em;
}

.info-step-grid span {
  margin-top: auto;
  font-size: 18px;
  font-weight: 740;
}

.info-step-grid p {
  margin: 13px 0 0;
  color: #64717f;
  font-size: 11px;
  line-height: 1.65;
}

.pricing-viewport {
  color: #f7faff;
  background:
    radial-gradient(circle at 12% 70%, rgba(33,116,255,.17), transparent 28%),
    #06101d;
}

.pricing-viewport-content {
  grid-template-columns: .7fr 1.3fr;
}

.pricing-heading h1 {
  color: #f7faff;
}

.pricing-heading > p:last-child {
  color: #8094aa;
}

.pricing-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.pricing-card-grid article {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 22px;
  background: rgba(255,255,255,.035);
}

.pricing-card-grid article > span {
  color: #7392b6;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .13em;
}

.pricing-card-grid article > p {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 34px 0 24px;
}

.pricing-card-grid strong {
  font-size: clamp(52px, 5vw, 72px);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -.075em;
}

.pricing-card-grid small {
  color: #7489a2;
  font-size: 11px;
}

.pricing-card-grid ul {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  list-style: none;
}

.pricing-card-grid li {
  position: relative;
  padding-left: 20px;
  color: #a0b0c2;
  font-size: 11px;
}

.pricing-card-grid li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #36d6a2;
}

.pricing-card-grid em {
  margin-top: auto;
  color: #5d7692;
  font-size: 9px;
  font-style: normal;
}

.pricing-card-commercial {
  border-color: rgba(55,143,255,.32) !important;
  background:
    linear-gradient(145deg, rgba(41,126,239,.14), transparent 55%),
    rgba(255,255,255,.035) !important;
}

/* Role dashboards */
.portal-page.fixed-page {
  min-height: 0;
}

.portal-page .portal-rail {
  position: relative;
  height: 100dvh;
}

.portal-page .portal-main {
  height: 100dvh;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rail-signout {
  display: block;
  margin-top: 10px;
  padding: 8px 12px;
  color: #5f7690;
  text-align: center;
  font-size: 9px;
}

.security-form {
  display: grid;
  gap: 13px;
}

.security-step,
.security-identity {
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid rgba(67,148,255,.2);
  border-radius: 10px;
  background: rgba(67,148,255,.07);
}

.security-step span,
.security-identity span {
  color: #6f93bd;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.security-step strong,
.security-identity strong {
  color: #dceaff;
  font-size: 11px;
}

.security-field {
  display: grid;
  gap: 7px;
  color: #91a7c0;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.security-field input {
  width: 100%;
  min-height: 47px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  outline: none;
  color: #fff;
  background: rgba(255,255,255,.045);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
}

.security-field input:focus {
  border-color: var(--electric);
  box-shadow: 0 0 0 3px rgba(67,148,255,.1);
}

.password-input-wrap {
  position: relative;
  display: block;
}

.password-input-wrap input {
  padding-right: 48px;
}

.password-input-wrap button {
  position: absolute;
  inset: 1px 1px 1px auto;
  width: 44px;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.09);
  border-radius: 0 9px 9px 0;
  color: #78aef2;
  background: rgba(7,16,29,.7);
  cursor: pointer;
  font-size: 18px;
}

.password-rules,
.registration-closed {
  display: block;
  color: #607791;
  font-size: 8px;
  line-height: 1.55;
}

.security-message {
  min-height: 16px;
  margin: 0;
  color: #ffb274;
  font-size: 9px;
  line-height: 1.5;
}

.security-instruction {
  margin: 0;
  color: #879bb2;
  font-size: 10px;
  line-height: 1.55;
}

.authenticator-key {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px dashed rgba(67,148,255,.36);
  border-radius: 10px;
  background: rgba(3,9,17,.46);
}

.authenticator-key code {
  color: #b9d7ff;
  overflow-wrap: anywhere;
  font-size: 12px;
  letter-spacing: .08em;
}

.authenticator-key a,
.login-switch-email {
  color: #6fa9ff;
  font-size: 9px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-switch-email {
  display: block;
  margin-top: 16px;
  text-align: center;
}

.security-recovery h3 {
  margin: 14px 0 6px;
  color: #f1f7ff;
  font-size: 17px;
}

.security-recovery > p {
  margin: 0 0 13px;
  color: #8298b0;
  font-size: 10px;
}

.security-success {
  padding: 10px 12px;
  border: 1px solid rgba(52,214,160,.28);
  border-radius: 9px;
  color: #76e5bf;
  background: rgba(52,214,160,.08);
  font-size: 10px;
  font-weight: 700;
}

.recovery-code-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 16px;
}

.recovery-code-grid code {
  padding: 8px;
  border-radius: 7px;
  color: #c8dcf4;
  background: rgba(255,255,255,.05);
  text-align: center;
  font-size: 9px;
}

.security-badge {
  width: fit-content;
  margin-top: 7px;
  padding: 4px 7px;
  border: 1px solid rgba(255,157,56,.24);
  border-radius: 999px;
  color: #ffb66c;
  background: rgba(255,157,56,.07);
  font-size: 7px;
}

.security-badge.is-ready {
  border-color: rgba(52,214,160,.25);
  color: #68dcb4;
  background: rgba(52,214,160,.07);
}

.account-security-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.security-reset-button {
  min-height: 31px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 7px;
  color: #8297ae;
  background: transparent;
  cursor: pointer;
  font-size: 8px;
}

.security-reset-button:hover {
  color: #dbe9f8;
  border-color: rgba(67,148,255,.35);
}

.access-manager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.access-assignment-panel {
  grid-row: span 2;
}

.access-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.access-form label {
  display: grid;
  gap: 6px;
  color: #65809e;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.access-form input,
.access-form select {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  color: #dce9f6;
  background: rgba(255,255,255,.04);
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: none;
}

.access-form button {
  min-height: 40px;
  grid-column: 1 / -1;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #1478ff;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}

.access-service-types {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
}

.access-service-types legend {
  padding: 0 6px;
  color: #65809e;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.access-service-types label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 7px;
  color: #90a3b8;
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 0;
  text-transform: none;
}

.access-service-types input {
  width: 14px;
  min-height: 14px;
}

.account-creation-rule {
  display: block;
  margin-top: 8px;
  color: #526b86;
  font-size: 8px;
  line-height: 1.5;
}

.account-directory-panel {
  grid-row: span 2;
}

.account-tabs {
  display: flex;
  gap: 6px;
  padding-bottom: 11px;
  overflow-x: auto;
}

.account-tabs button {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #6f849b;
  background: transparent;
  cursor: pointer;
  font-size: 8px;
}

.account-tabs button.is-active {
  color: #dfeeff;
  border-color: rgba(67,148,255,.34);
  background: rgba(67,148,255,.1);
}

.account-tabs strong {
  color: #a9c8ef;
  font-size: 8px;
}

.account-state-icon {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
  background: #6f849b;
}

.state-area_admin,
.state-service_provider {
  background: #4394ff;
}

.state-suspended {
  background: #ff9d38;
}

.state-inactive {
  background: #7e8ba0;
}

.state-deleted {
  background: #f06b79;
}

.account-directory-list {
  max-height: 330px;
  padding-right: 3px;
  overflow-y: auto;
}

.account-security-actions select {
  min-height: 31px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 7px;
  color: #9bb0c7;
  background: #101d2d;
  font-size: 8px;
}

.root-account-label {
  color: #75d3b6;
  font-size: 8px;
}

.ai-control-panel {
  margin-top: 12px;
}

.ai-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ai-prompt-box,
.secure-files {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}

.ai-prompt-box > label,
.secure-files form > label {
  display: grid;
  gap: 7px;
  color: #6d86a2;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-prompt-box textarea {
  min-height: 74px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #d8e5f3;
  background: rgba(255,255,255,.035);
  resize: vertical;
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: none;
}

.ai-prompt-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ai-response {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(78, 158, 255, 0.3);
  border-radius: 0.9rem;
  background: rgba(7, 24, 48, 0.72);
  white-space: pre-wrap;
}

.ai-response span {
  display: block;
  margin-bottom: 0.55rem;
  color: #73b5ff;
  font: 700 0.66rem/1 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.ai-response p {
  margin: 0;
}

.area-ai-input {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1rem;
  font: 700 0.68rem/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.area-ai-input textarea {
  min-height: 7.5rem;
  resize: vertical;
  padding: 0.9rem;
  border: 1px solid rgba(111, 168, 237, 0.26);
  border-radius: 0.8rem;
  background: rgba(7, 22, 43, 0.64);
  color: inherit;
  font: 400 0.94rem/1.55 var(--font-display);
  letter-spacing: normal;
  text-transform: none;
}

.ai-prompt-actions button,
.secure-files form > button {
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid rgba(67,148,255,.28);
  border-radius: 7px;
  color: #bcd8fb;
  background: rgba(67,148,255,.09);
  cursor: pointer;
  font-size: 8px;
}

.ai-prompt-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.ai-prompt-box > small,
.ai-route-control > small {
  display: block;
  margin-top: 8px;
  color: #5c728b;
  font-size: 8px;
  line-height: 1.5;
}

.ai-route-control {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.ai-route-control > span {
  color: #6d86a2;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-route-control > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: rgba(3,9,17,.38);
}

.ai-route-control button {
  min-height: 31px;
  border: 0;
  border-radius: 7px;
  color: #637b94;
  background: transparent;
  cursor: pointer;
  font-size: 8px;
}

.ai-route-control button.is-active {
  color: #fff;
  background: #1478ff;
}

.secure-files form {
  display: grid;
  gap: 8px;
}

.secure-files input {
  width: 100%;
  color: #7f94aa;
  font-family: var(--font-display);
  font-size: 8px;
  text-transform: none;
}

.secure-files > p {
  min-height: 13px;
  margin: 7px 0;
  color: #7094bf;
  font-size: 8px;
}

.secure-file-list {
  max-height: 118px;
  display: grid;
  gap: 5px;
  overflow-y: auto;
}

.secure-file-list a {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
}

.secure-file-list a > span {
  min-width: 0;
  display: grid;
}

.secure-file-list strong,
.secure-file-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.secure-file-list strong {
  color: #adbed0;
  font-size: 8px;
}

.secure-file-list small {
  color: #536b84;
  font-size: 7px;
}

.secure-file-list b {
  color: #70a9ee;
  font-size: 7px;
}

.area-ai-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
}

.area-ai-panel h2 {
  margin: 4px 0 5px;
}

.area-ai-panel p {
  max-width: 650px;
  margin: 0;
  color: #6e839a;
  font-size: 9px;
  line-height: 1.5;
}

.provider-type-count-panel {
  margin-top: 12px;
}

.provider-type-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.provider-type-counts > div {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}

.provider-type-counts span {
  color: #7790aa;
  font-size: 8px;
}

.provider-type-counts strong {
  color: #cfe2f7;
  font-size: 16px;
}

.access-message {
  min-height: 14px;
  margin: 10px 0 0;
  color: #7da5d7;
  font-size: 9px;
}

.role-directory .panel-header > span {
  color: #607993;
  font-size: 8px;
}

.role-directory-list {
  display: grid;
  gap: 7px;
}

.role-directory-list article {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background: rgba(255,255,255,.02);
}

.role-directory-list article > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.role-directory-list strong {
  color: #cbd9e8;
  font-size: 9px;
}

.role-directory-list small {
  overflow: hidden;
  color: #5e7690;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-toggle {
  min-width: 92px;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid rgba(255,120,120,.2);
  border-radius: 999px;
  color: #bf8585;
  background: rgba(255,85,85,.05);
  cursor: pointer;
  font-size: 8px;
}

.access-toggle span {
  width: 15px;
  height: 15px;
  display: block;
  border-radius: 50%;
  background: currentColor;
}

.access-toggle.is-active {
  color: #75d3b6;
  border-color: rgba(52,214,160,.2);
  background: rgba(52,214,160,.05);
}

.empty-state {
  margin: 10px 0;
  color: #637b95;
  font-size: 9px;
}

.admin-review-grid {
  grid-template-columns: 1.35fr .65fr;
}

.data-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.data-table td small {
  display: block;
  margin-top: 3px;
}

.review-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.review-controls .invitation-result,
.review-controls .review-message {
  flex: 1 0 100%;
}

.review-controls .invitation-result {
  display: grid;
  gap: 5px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid rgba(52,214,160,.2);
  border-radius: 8px;
  color: #9ecfbe;
  background: rgba(52,214,160,.045);
  font-size: 8px;
}

.review-controls .invitation-result code {
  overflow-wrap: anywhere;
  color: #e9fff7;
  font-size: 9px;
}

.review-controls .invitation-result a {
  color: #8dc9ff;
  text-decoration: underline;
}

.review-controls button {
  min-height: 26px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  color: #7991aa;
  background: rgba(255,255,255,.03);
  cursor: pointer;
  font-size: 7px;
}

.review-controls .review-approve {
  color: #7ed8bc;
  border-color: rgba(52,214,160,.18);
}

.review-controls .review-reject {
  color: #d99393;
  border-color: rgba(255,105,105,.16);
}

.review-controls button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.queue-filter-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
}

.queue-filter-tabs button {
  min-height: 28px;
  flex: 0 0 auto;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #6f849b;
  background: transparent;
  cursor: pointer;
  font-size: 7px;
}

.queue-filter-tabs button.is-active {
  color: #dfeeff;
  border-color: rgba(67,148,255,.34);
  background: rgba(67,148,255,.1);
}

.application-summary-list {
  display: grid;
  gap: 8px;
}

.application-summary-list article {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 11px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.application-summary-list article > div {
  display: grid;
  gap: 4px;
}

.application-summary-list strong {
  color: #c9d8e8;
  font-size: 9px;
}

.application-summary-list small,
.application-summary-list article > span {
  color: #607994;
  font-size: 8px;
}

.metric-grid-compact {
  grid-template-columns: repeat(3, 1fr);
}

.area-queue-panel {
  margin-top: 12px;
}

.provider-workspace {
  display: flex;
  flex-direction: column;
}

.provider-account-hero {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 55px;
  padding: clamp(30px, 5vw, 66px);
  border: 1px solid rgba(67,148,255,.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 20%, rgba(52,132,255,.16), transparent 30%),
    rgba(255,255,255,.028);
}

.provider-account-hero h2 {
  max-width: 680px;
  margin: 12px 0 0;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.provider-account-hero > div > p:last-child {
  max-width: 620px;
  margin: 22px 0 0;
  color: #8398b0;
  font-size: 12px;
  line-height: 1.7;
}

.provider-account-hero dl {
  display: grid;
  align-content: center;
  gap: 1px;
  margin: 0;
}

.provider-account-hero dl div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.provider-account-hero dt {
  color: #607a97;
  font-size: 9px;
}

.provider-account-hero dd {
  margin: 0;
  color: #b9c9db;
  font-size: 9px;
  text-align: right;
}

.provider-workspace-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.provider-workspace-grid .dashboard-panel {
  min-height: 190px;
}

.provider-workspace-grid h2 {
  margin: 13px 0 0;
  font-size: 20px;
}

.provider-workspace-grid p {
  max-width: 650px;
  margin: 13px 0 0;
  color: #748ba4;
  font-size: 10px;
  line-height: 1.7;
}

.provider-workspace-grid a {
  display: inline-block;
  margin-top: 18px;
  color: #71aafb;
  font-size: 10px;
}

@media (max-width: 980px) {
  .partner-hub-content,
  .application-stage,
  .info-viewport-content,
  .pricing-viewport-content {
    gap: 30px;
    padding-inline: 32px;
  }

  .application-stage {
    grid-template-columns: minmax(220px, .55fr) minmax(520px, 1.45fr);
  }

  .application-side-note h2 {
    font-size: 42px;
  }

  .info-viewport-content,
  .pricing-viewport-content {
    grid-template-columns: 1fr 1.45fr;
  }

  .info-step-grid article {
    min-height: 340px;
    padding: 21px;
  }
}

@media (max-width: 820px) {
  .fixed-page-header {
    height: 64px;
    padding-inline: 18px;
  }

  .fixed-page-header .brand-mark {
    width: 36px;
    height: 36px;
  }

  .fixed-page-header .brand-name {
    font-size: 18px;
  }

  .fixed-back {
    min-height: 38px;
    padding-inline: 11px;
    font-size: 10px;
  }

  .partner-hub::before {
    inset: 64px 0 0;
  }

  .partner-hub-content {
    height: calc(100dvh - 64px);
    grid-template-columns: 1fr;
    align-content: center;
    gap: 18px;
    padding: 18px 22px;
  }

  .partner-hub-intro h1 {
    font-size: clamp(38px, 10vw, 56px);
  }

  .partner-hub-intro > p:not(.application-kicker) {
    margin-top: 13px;
    font-size: 11px;
  }

  .partner-type-cloud {
    display: none;
  }

  .partner-path-card {
    min-height: 150px;
    padding: 19px;
  }

  .partner-path-card h2 {
    margin-top: 10px;
    font-size: 23px;
  }

  .partner-path-card p {
    margin-top: 7px;
    font-size: 10px;
  }

  .partner-path-card a {
    margin-top: 11px;
  }

  .application-stage {
    height: calc(100dvh - 64px);
    display: block;
    padding: 12px;
  }

  .application-side-note {
    display: none;
  }

  .application-card,
  .application-success {
    width: 100%;
    height: 100%;
    border-radius: 16px;
  }

  .application-form-slot {
    height: 100%;
  }

  .application-card {
    grid-template-rows: 50px minmax(0, 1fr) 66px;
  }

  .application-card-body {
    padding: 18px;
  }

  .application-step h1 {
    margin-bottom: 17px;
    font-size: 27px;
  }

  .info-viewport-content,
  .pricing-viewport-content {
    height: calc(100dvh - 64px);
    grid-template-columns: 1fr;
    align-content: center;
    gap: 22px;
    padding: 20px 22px;
  }

  .info-heading h1 {
    font-size: clamp(36px, 9vw, 52px);
  }

  .info-heading > p:last-child {
    margin-top: 12px;
    font-size: 11px;
  }

  .info-step-grid article {
    min-height: 220px;
    padding: 18px;
  }

  .info-step-grid strong {
    font-size: 62px;
  }

  .pricing-card-grid article {
    min-height: 280px;
    padding: 20px;
  }

  .pricing-card-grid article > p {
    margin: 18px 0 12px;
  }

  .pricing-card-grid ul {
    gap: 8px;
    padding: 13px 0;
  }

  .portal-login-page.fixed-page {
    grid-template-columns: 1fr;
  }

  .portal-login-page.fixed-page .login-visual {
    display: none;
  }

  .portal-login-page.fixed-page .login-panel {
    height: 100dvh;
    min-height: 0;
    padding: 20px;
  }

  .portal-page.fixed-page {
    grid-template-columns: 1fr;
    grid-template-rows: 70px minmax(0, 1fr);
  }

  .portal-page .portal-rail {
    width: 100%;
    height: 70px;
    padding: 11px 14px;
    flex-direction: row;
  }

  .portal-page .portal-rail nav {
    display: flex;
    margin-left: auto;
  }

  .portal-page .portal-rail nav a:not(.active),
  .portal-page .rail-account,
  .portal-page .rail-signout,
  .portal-page .portal-rail-label {
    display: none;
  }

  .portal-page .portal-main {
    height: calc(100dvh - 70px);
    padding: 20px;
  }

  .access-manager,
  .admin-review-grid,
  .provider-account-hero,
  .provider-workspace-grid {
    grid-template-columns: 1fr;
  }

  .access-assignment-panel {
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .fixed-page {
    inset-inline: 34px;
  }

  .fixed-back {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .compact-form-grid,
  .compact-form-grid-text,
  .routing-choice {
    grid-template-columns: 1fr;
  }

  .compact-form-grid {
    gap: 10px;
  }

  .service-choice-grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-choice-grid label {
    min-height: 42px;
    padding: 6px 8px;
    font-size: 8px;
  }

  .application-actions {
    padding-inline: 12px;
  }

  .application-message {
    display: none;
  }

  .application-actions > div:last-child {
    width: 100%;
  }

  .application-button {
    flex: 1;
  }

  .partner-login-note {
    display: none;
  }

  .pricing-card-grid {
    gap: 8px;
  }

  .pricing-card-grid article {
    min-height: 245px;
    padding: 14px;
  }

  .pricing-card-grid strong {
    font-size: 42px;
  }

  .pricing-card-grid li {
    font-size: 8px;
  }

  .info-step-grid article {
    min-height: 190px;
    padding: 12px;
  }

  .info-step-grid strong {
    font-size: 50px;
  }

  .info-step-grid span {
    font-size: 13px;
  }

  .info-step-grid p {
    font-size: 8px;
  }

  .metric-grid,
  .metric-grid-compact {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-height: 700px) {
  .partner-hub-content {
    padding-block: 14px;
  }

  .partner-hub-intro h1 {
    font-size: clamp(38px, 5vw, 60px);
  }

  .partner-path-card {
    min-height: 170px;
  }

  .application-card,
  .application-success {
    height: calc(100dvh - 90px);
  }

  .application-stage {
    padding-block: 7px;
  }

  .application-card-body {
    padding-block: 15px;
  }

  .info-step-grid article {
    min-height: 300px;
  }

  .pricing-card-grid article {
    min-height: 360px;
  }
}

@media (max-width: 1100px) {
  .admin-notification-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .admin-notification-bar {
    grid-template-columns: 1fr;
  }

  .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Phase 4 unified Super Admin operations */
.operations-control-center {
  scroll-margin-top: 24px;
}

.operations-module-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.operations-module-nav button {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(3, 12, 22, .42);
  color: var(--white);
  text-align: left;
  cursor: pointer;
}

.operations-module-nav button:hover,
.operations-module-nav button:focus-visible,
.operations-module-nav button.is-active {
  border-color: rgba(48, 131, 255, 0.62);
  background: rgba(48, 131, 255, 0.12);
  outline: none;
}

.operations-module-nav button > span {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(48, 131, 255, 0.16);
  color: #8abaff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.operations-module-nav button strong {
  font-size: 13px;
  line-height: 1.25;
}

.operations-module-body {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.operations-module-heading {
  margin-bottom: 16px;
}

.operations-module-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.operations-module-heading h3 {
  margin: 4px 0 0;
  font-size: clamp(20px, 2vw, 28px);
}

.operations-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.operations-summary-grid article {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(3, 12, 22, .42);
}

.operations-summary-grid small,
.operations-summary-grid span {
  color: var(--muted);
}

.operations-summary-grid strong {
  margin: 5px 0;
  font-size: 24px;
  line-height: 1.1;
  text-transform: capitalize;
}

.operations-empty,
.operations-copy {
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: rgba(3, 12, 22, .42);
  color: var(--muted);
}

.operations-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

#ai-configuration,
#pricing-management {
  scroll-margin-top: 24px;
}

@media (max-width: 1080px) {
  .operations-module-nav,
  .operations-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .operations-module-nav,
  .operations-summary-grid {
    grid-template-columns: 1fr;
  }

  .operations-module-nav button {
    min-height: 58px;
  }
}

/* Secure billing, provider review, invitation, and public Area Admin directory */
.email-invitation-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 0 11px;
  border: 1px solid rgba(67,148,255,.28);
  border-radius: 8px;
  color: #bcd8fb;
  background: rgba(67,148,255,.09);
  font-size: 8px;
  font-weight: 700;
}

.admin-review-grid-single {
  grid-template-columns: 1fr;
}

.provider-review-stack {
  min-width: 270px;
  display: grid;
  gap: 6px;
}

.provider-review-stack > select,
.review-plan-row select {
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: #9fb4cb;
  background: #101d2d;
  font-size: 7px;
}

.review-plan-row {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 5px;
}

.checkout-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.checkout-link-actions a {
  padding: 5px 7px;
  border: 1px solid rgba(52,214,160,.2);
  border-radius: 5px;
  color: #7ed8bc;
  background: rgba(52,214,160,.06);
  font-size: 7px;
}

.review-message {
  max-width: 270px;
  color: #7892ae;
  font-size: 7px;
  line-height: 1.4;
}

.review-controls {
  flex-wrap: wrap;
}

.review-controls .review-information {
  color: #9dbdf3;
  border-color: rgba(91,155,255,.22);
}

.review-controls .review-suspend,
.review-controls .review-reinstate,
.review-controls .review-delete {
  color: #e5aa82;
  border-color: rgba(235,151,92,.2);
}

.complimentary-review-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px;
}

.complimentary-review-row select,
.complimentary-review-row button {
  min-height: 30px;
  border: 1px solid rgba(130,112,255,.24);
  border-radius: 6px;
  color: #b9b1ff;
  background: rgba(113,91,255,.08);
  font-size: 7px;
}

.complimentary-review-row select {
  padding: 0 7px;
  background-color: #101d2d;
}

.complimentary-review-row button {
  padding: 0 9px;
  cursor: pointer;
}

.complimentary-review-row button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.retained-review-note,
.complimentary-access-result {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(67,148,255,.18);
  border-radius: 7px;
  color: #8ca8c7;
  background: rgba(67,148,255,.055);
  font-size: 7px;
  line-height: 1.45;
}

.retained-review-note strong,
.complimentary-access-result strong {
  color: #b9d5f3;
}

.application-review-details {
  width: min(300px, 42vw);
  margin-top: 7px;
  color: #7892ae;
  font-size: 7px;
  line-height: 1.5;
}

.application-review-details summary {
  color: #8bbcff;
  cursor: pointer;
}

.application-review-details strong {
  display: block;
  margin-top: 8px;
  color: #b9d5f3;
}

.application-review-details p {
  margin: 3px 0 0;
  white-space: pre-wrap;
}

.complimentary-access-result {
  border-color: rgba(52,214,160,.2);
  background: rgba(52,214,160,.055);
}

.complimentary-access-result code {
  padding: 6px;
  border-radius: 5px;
  color: #d6fff0;
  background: rgba(0,0,0,.24);
  font-size: 9px;
  overflow-wrap: anywhere;
}

.complimentary-access-result a,
.complimentary-access-result button {
  color: #7ed8bc;
  text-decoration: underline;
}

.complimentary-access-result button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.billing-gate-main {
  display: grid;
  place-items: center;
  align-content: center;
}

.billing-gate {
  width: min(680px, 100%);
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid rgba(67,148,255,.25);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 12%, rgba(34,121,255,.18), transparent 32%),
    rgba(255,255,255,.025);
}

.billing-gate h1 {
  margin: 10px 0;
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -.055em;
}

.billing-gate > div > p,
.billing-gate > p {
  color: #8197af;
  font-size: 11px;
  line-height: 1.65;
}

.billing-gate > .button {
  margin-top: 18px;
}

.billing-divider {
  margin: 22px 0 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

.billing-divider span {
  position: relative;
  top: -7px;
  padding: 0 8px;
  color: #607994;
  background: #081525;
  font-size: 8px;
}

.billing-code-form,
.trial-code-form {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 9px;
}

.billing-code-form label,
.trial-code-form label {
  display: grid;
  gap: 6px;
  color: #66809d;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.billing-code-form input,
.trial-code-form input,
.trial-code-form select {
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  color: #dce9f6;
  background: #101d2d;
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: none;
}

.billing-code-form button,
.trial-code-form button,
.generated-code button {
  min-height: 39px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: #1478ff;
  cursor: pointer;
  font-size: 8px;
  font-weight: 750;
}

.billing-status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 12px;
}

.billing-status-panel h2 {
  margin: 5px 0;
}

.billing-status-panel p {
  margin: 0;
  color: #7188a1;
  font-size: 9px;
}

.trial-code-panel {
  margin-top: 12px;
}

.trial-code-form {
  grid-template-columns: .6fr 1fr auto;
}

.generated-code {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(52,214,160,.25);
  border-radius: 9px;
  background: rgba(52,214,160,.06);
}

.generated-code code {
  color: #9ce7cf;
  font-size: 14px;
  letter-spacing: .08em;
}

.trial-code-list {
  max-height: 130px;
  display: grid;
  gap: 5px;
  margin-top: 9px;
  overflow-y: auto;
}

.trial-code-list > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 7px;
}

.trial-code-list strong {
  color: #a9c8ef;
  font-size: 8px;
}

.trial-code-list span {
  color: #607994;
  font-size: 8px;
}

.billing-price-manager {
  margin-top: 12px;
}

.billing-price-intro {
  max-width: 760px;
  margin: 0 0 13px;
  color: #7188a1;
  font-size: 9px;
  line-height: 1.6;
}

.billing-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.billing-price-row {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}

.billing-price-row > span:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.billing-price-row strong {
  color: #dce9f6;
  font-size: 9px;
}

.billing-price-row small,
.billing-price-footnote {
  color: #647d98;
  font-size: 7px;
  line-height: 1.45;
}

.billing-price-input {
  display: grid;
  grid-template-columns: auto 88px auto;
  align-items: center;
  gap: 5px;
}

.billing-price-input b {
  color: #68a7ff;
  font-size: 10px;
}

.billing-price-input input {
  width: 88px;
  min-height: 32px;
  padding: 0 7px;
  border: 1px solid rgba(67,148,255,.22);
  border-radius: 6px;
  color: #dce9f6;
  background: #101d2d;
  font-size: 9px;
}

.billing-price-input button {
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: #1478ff;
  cursor: pointer;
  font-size: 8px;
  font-weight: 750;
}

.billing-price-input button:disabled {
  cursor: wait;
  opacity: .65;
}

.billing-price-footnote {
  display: block;
  margin-top: 10px;
}

.area-admin-directory {
  display: grid;
  grid-template-columns: .7fr 1fr;
  gap: 8px 12px;
  padding: 14px;
  border: 1px solid rgba(67,148,255,.17);
  border-radius: 14px;
  background: rgba(67,148,255,.045);
}

.area-admin-directory h2 {
  margin: 4px 0 0;
  font-size: 16px;
}

.area-admin-directory > label {
  display: grid;
  gap: 5px;
  color: #66809d;
  font-size: 7px;
}

.area-admin-directory input {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  color: #dce9f6;
  background: rgba(3,9,17,.55);
}

.area-admin-results {
  grid-column: 1 / -1;
  max-height: 86px;
  display: grid;
  gap: 5px;
  overflow-y: auto;
}

.area-admin-results article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 7px;
  background: rgba(255,255,255,.035);
}

.area-admin-results article > div {
  display: grid;
}

.area-admin-results strong {
  color: #d5e4f5;
  font-size: 8px;
}

.area-admin-results span,
.area-admin-results a,
.area-admin-results p {
  color: #7492b3;
  font-size: 7px;
}

.invitation-only-card {
  height: min(480px, calc(100dvh - 130px));
  display: grid;
  align-content: center;
}

@media (max-width: 820px) {
  .provider-review-stack {
    min-width: 230px;
  }

  .trial-code-form,
  .billing-code-form,
  .area-admin-directory,
  .billing-price-grid {
    grid-template-columns: 1fr;
  }

  .billing-price-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .area-admin-results {
    grid-column: 1;
  }

  .billing-status-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Isolated role demos ----------------------------------------------------- */

.demo-portal-page {
  --demo-blue: #4b9dff;
  --demo-mint: #44d9ae;
}

.demo-portal-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.demo-portal-rail {
  background:
    linear-gradient(180deg, rgba(42, 112, 221, .08), transparent 34%),
    #080f1a;
}

.demo-rail-safety {
  display: grid;
  gap: 8px;
  margin: auto 0 14px;
  padding: 13px;
  border: 1px solid rgba(75, 157, 255, .24);
  border-radius: 11px;
  background: rgba(75, 157, 255, .07);
}

.demo-rail-safety span,
.demo-label {
  width: max-content;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border: 1px solid rgba(80, 168, 255, .32);
  border-radius: 999px;
  color: #a9d1ff;
  background: rgba(69, 145, 255, .12);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.demo-rail-safety p {
  margin: 0;
  color: #70869f;
  font-size: 8px;
  line-height: 1.55;
}

.demo-safety-banner {
  min-height: 48px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(68, 217, 174, .24);
  border-radius: 11px;
  color: #9db3ca;
  background:
    linear-gradient(90deg, rgba(68, 217, 174, .08), rgba(75, 157, 255, .055));
  font-size: 9px;
}

.demo-safety-banner > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  color: #06141b;
  background: var(--demo-mint);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.demo-safety-banner p {
  margin: 0;
}

.demo-safety-banner a {
  color: #8dc2ff;
  font-size: 8px;
  white-space: nowrap;
}

.demo-top-controls {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
}

.view-as-role-menu {
  display: grid;
  grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 22px;
  border: 1px solid rgba(75, 157, 255, .2);
  border-radius: 15px;
  background:
    radial-gradient(circle at 85% 10%, rgba(75, 157, 255, .11), transparent 34%),
    rgba(255, 255, 255, .025);
}

.view-as-role-menu h2 {
  margin: 7px 0 0;
  color: #dce8f5;
  font-size: 18px;
}

.view-as-role-menu p {
  max-width: 450px;
  margin: 10px 0 0;
  color: #70869f;
  font-size: 9px;
  line-height: 1.6;
}

.view-as-role-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.view-as-role-links a {
  position: relative;
  min-height: 116px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 11px;
  color: #d8e7f6;
  background: rgba(255, 255, 255, .026);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.view-as-role-links a:hover,
.view-as-role-links a:focus-visible {
  border-color: rgba(75, 157, 255, .43);
  background: rgba(75, 157, 255, .07);
  transform: translateY(-2px);
}

.view-as-role-links strong {
  font-size: 12px;
}

.view-as-role-links small {
  max-width: 270px;
  color: #6f859e;
  font-size: 8px;
  line-height: 1.5;
}

.view-as-role-links b {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: #78aff7;
  font-size: 14px;
}

.view-as-role-menu.is-compact {
  min-width: 330px;
  flex: 1;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
}

.view-as-role-menu.is-compact h2 {
  margin: 3px 0 0;
  font-size: 11px;
}

.view-as-role-menu.is-compact p,
.view-as-role-menu.is-compact .view-as-role-links small {
  display: none;
}

.view-as-role-menu.is-compact .view-as-role-links {
  justify-content: end;
  grid-template-columns: repeat(2, minmax(125px, 180px));
}

.view-as-role-menu.is-compact .view-as-role-links a {
  min-height: 48px;
  align-content: center;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 8px 30px 8px 9px;
}

.view-as-role-menu.is-compact .view-as-role-links strong {
  font-size: 9px;
}

.view-as-role-menu.is-compact .view-as-role-links b {
  right: 10px;
  bottom: 15px;
}

.view-as-role-menu.is-compact .demo-label {
  min-height: 18px;
  font-size: 6px;
}

.demo-picker-heading {
  align-items: flex-end;
  margin-top: 22px;
}

.demo-picker-heading p {
  max-width: 650px;
  margin: 12px 0 0;
  color: #71879f;
  font-size: 10px;
  line-height: 1.6;
}

.demo-workspace {
  display: grid;
  gap: 12px;
}

.demo-workspace .portal-topbar {
  margin: 6px 0 2px;
}

.demo-reset-button,
.demo-primary-button,
.demo-account-button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(75, 157, 255, .27);
  border-radius: 8px;
  color: #b7d6fa;
  background: rgba(75, 157, 255, .085);
  cursor: pointer;
  font-size: 8px;
  font-weight: 750;
}

.demo-reset-button:hover,
.demo-primary-button:hover,
.demo-account-button:hover {
  border-color: rgba(75, 157, 255, .53);
  background: rgba(75, 157, 255, .14);
}

.demo-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.demo-provider-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
}

.demo-job-panel,
.demo-application-panel {
  min-height: 520px;
}

.demo-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.demo-filter-row button,
.demo-row-actions button {
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 7px;
  color: #7f96af;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  font-size: 8px;
}

.demo-filter-row button:hover,
.demo-filter-row button:focus-visible,
.demo-filter-row button.is-active,
.demo-row-actions button:hover,
.demo-row-actions button:focus-visible {
  border-color: rgba(75, 157, 255, .38);
  color: #c9e1fb;
  background: rgba(75, 157, 255, .09);
}

.demo-job-list,
.demo-application-list {
  display: grid;
  gap: 8px;
}

.demo-job-card,
.demo-application-card {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 10px;
  background: rgba(3, 10, 18, .22);
}

.demo-job-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
}

.demo-job-summary > div,
.demo-application-summary > div {
  display: grid;
  gap: 4px;
}

.demo-job-summary strong,
.demo-application-summary strong {
  color: #d4e3f2;
  font-size: 9px;
}

.demo-job-summary small,
.demo-application-summary small {
  color: #61778f;
  font-size: 7px;
}

.demo-job-place {
  text-align: right;
}

.demo-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid rgba(75, 157, 255, .22);
  border-radius: 6px;
  color: #86baff;
  background: rgba(75, 157, 255, .07);
  font-family: var(--font-mono);
  font-size: 7px;
  text-transform: uppercase;
}

.demo-status.is-accepted,
.demo-status.is-under_review {
  border-color: rgba(255, 174, 76, .27);
  color: #eabd84;
  background: rgba(255, 174, 76, .075);
}

.demo-status.is-en_route,
.demo-status.is-info_requested {
  border-color: rgba(181, 128, 255, .26);
  color: #caa7fb;
  background: rgba(181, 128, 255, .07);
}

.demo-status.is-completed,
.demo-status.is-approved {
  border-color: rgba(68, 217, 174, .25);
  color: #85d9bf;
  background: rgba(68, 217, 174, .07);
}

.demo-status.is-rejected {
  border-color: rgba(255, 101, 110, .24);
  color: #ef9da2;
  background: rgba(255, 101, 110, .07);
}

.demo-job-detail,
.demo-application-detail {
  margin-top: 10px;
  padding: 11px;
  border-top: 1px solid rgba(255, 255, 255, .065);
}

.demo-job-detail span,
.demo-application-detail span {
  color: #516b87;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.demo-job-detail p,
.demo-application-detail p {
  margin: 6px 0 0;
  color: #93a7bb;
  font-size: 8px;
  line-height: 1.55;
}

.demo-row-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.demo-row-actions button.is-primary {
  border-color: rgba(68, 217, 174, .28);
  color: #a0e6d2;
  background: rgba(68, 217, 174, .08);
}

.demo-row-actions button.is-danger,
.demo-account-button.is-danger {
  border-color: rgba(255, 101, 110, .25);
  color: #f0a5aa;
  background: rgba(255, 101, 110, .07);
}

.demo-side-stack {
  display: grid;
  align-content: start;
  gap: 12px;
}

.demo-side-stack .dashboard-panel {
  min-height: 0;
}

.demo-toggle {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  color: #8298af;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  font-size: 8px;
  text-align: left;
}

.demo-toggle span {
  position: relative;
  width: 31px;
  height: 18px;
  border-radius: 999px;
  background: #233346;
}

.demo-toggle span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #788ba0;
  transition: transform .2s ease, background .2s ease;
}

.demo-toggle.is-on {
  color: #a4dfce;
  border-color: rgba(68, 217, 174, .23);
}

.demo-toggle.is-on span {
  background: rgba(68, 217, 174, .3);
}

.demo-toggle.is-on span::after {
  background: var(--demo-mint);
  transform: translateX(13px);
}

.demo-field {
  display: grid;
  gap: 6px;
  margin-top: 13px;
  color: #637d98;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.demo-field :is(input, select, textarea) {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  color: #d2e0ee;
  background: rgba(2, 8, 14, .42);
  outline: none;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.demo-field textarea {
  min-height: 78px;
  resize: vertical;
}

.demo-field :is(input, select, textarea):focus {
  border-color: rgba(75, 157, 255, .48);
  box-shadow: 0 0 0 3px rgba(75, 157, 255, .08);
}

.demo-primary-button {
  width: 100%;
  margin-top: 8px;
}

.demo-note-list {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.demo-note-list > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .028);
}

.demo-note-list p {
  margin: 0;
  color: #879db4;
  font-size: 8px;
  line-height: 1.5;
}

.demo-note-list button {
  border: 0;
  color: #7189a3;
  background: transparent;
  cursor: pointer;
  font-size: 7px;
}

.demo-notice {
  border-color: rgba(75, 157, 255, .17);
  color: #8da2b9;
}

.demo-notice strong {
  color: #6fbfa7;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.demo-application-panel,
.demo-provider-directory {
  margin-top: 0;
}

.demo-queue-tools {
  display: grid;
  grid-template-columns: minmax(220px, .4fr) minmax(0, 1fr);
  align-items: end;
  gap: 14px;
  margin-bottom: 14px;
}

.demo-queue-tools .demo-field {
  margin-top: 0;
}

.demo-queue-tools .demo-filter-row {
  justify-content: flex-end;
  margin-bottom: 0;
}

.demo-application-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) auto;
  align-items: center;
  gap: 14px;
}

.demo-application-detail {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 16px;
}

.demo-provider-directory {
  min-height: 0;
}

.demo-provider-directory .role-directory-list article {
  grid-template-columns: 1fr auto;
}

html[data-portal-theme="light"] .portal-page :is(
  .demo-job-card,
  .demo-application-card,
  .demo-note-list > div,
  .demo-toggle,
  .view-as-role-links a
) {
  border-color: rgba(24, 67, 115, .12);
  background: rgba(255, 255, 255, .54);
}

html[data-portal-theme="light"] .portal-page :is(
  .demo-job-summary strong,
  .demo-application-summary strong,
  .view-as-role-menu h2
) {
  color: #183554;
}

html[data-portal-theme="light"] .portal-page .demo-field :is(
  input,
  select,
  textarea
) {
  border-color: rgba(24, 67, 115, .16);
  color: #15334f;
  background: rgba(255, 255, 255, .78);
}

@media (max-width: 1120px) {
  .demo-top-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .view-as-role-menu.is-compact {
    min-width: 0;
  }

  .demo-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-provider-grid {
    grid-template-columns: 1fr;
  }

  .demo-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .demo-queue-tools {
    grid-template-columns: 1fr;
  }

  .demo-queue-tools .demo-filter-row {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .demo-safety-banner {
    grid-template-columns: auto 1fr;
  }

  .demo-safety-banner a {
    grid-column: 1 / -1;
  }

  .view-as-role-menu,
  .view-as-role-menu.is-compact {
    grid-template-columns: 1fr;
  }

  .view-as-role-menu.is-compact .view-as-role-links,
  .view-as-role-links {
    grid-template-columns: 1fr;
  }

  .demo-metric-grid,
  .demo-side-stack {
    grid-template-columns: 1fr;
  }

  .demo-job-summary,
  .demo-application-summary {
    grid-template-columns: 1fr;
  }

  .demo-job-place {
    text-align: left;
  }

  .demo-application-detail {
    grid-template-columns: 1fr;
  }
}

.mobile-access-code-manager {
  display: grid;
  gap: 16px;
}

.admin-export-panel {
  display: grid;
  gap: 14px;
}

.admin-export-panel .panel-header p {
  max-width: 720px;
  margin: 6px 0 0;
  color: #8299b1;
  font-size: 9px;
  line-height: 1.6;
}

.admin-export-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.admin-export-grid a {
  display: grid;
  min-height: 76px;
  align-content: center;
  justify-items: start;
  gap: 6px;
  text-align: left;
}

.admin-export-grid a small {
  color: #7890a8;
  font-size: 7px;
  font-weight: 500;
  line-height: 1.45;
  text-transform: none;
}

.admin-audit-log {
  display: grid;
  gap: 14px;
}

.admin-audit-log .panel-header p {
  max-width: 720px;
  margin: 6px 0 0;
  color: #8299b1;
  font-size: 9px;
  line-height: 1.6;
}

.admin-audit-filter {
  display: grid;
  min-width: 190px;
  gap: 6px;
  color: #7790aa;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.admin-audit-filter select {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  color: #d2e0ee;
  background: rgba(2, 8, 14, .42);
}

.admin-audit-log code {
  color: #86a0ba;
  font-family: var(--font-mono);
  font-size: 7px;
  overflow-wrap: anywhere;
}

html[data-portal-theme="light"] .admin-audit-filter select {
  border-color: rgba(24, 67, 115, .16);
  color: #15334f;
  background: rgba(255, 255, 255, .78);
}

.mobile-access-code-intro,
.mobile-access-code-note {
  max-width: 760px;
  margin: 6px 0 0;
  color: #8299b1;
  font-size: 9px;
  line-height: 1.65;
}

.mobile-access-code-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 10px;
}

.mobile-access-code-form label {
  display: grid;
  gap: 6px;
  color: #7790aa;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mobile-access-code-form :is(input, select) {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  color: #d2e0ee;
  background: rgba(2, 8, 14, .42);
  outline: none;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.mobile-access-code-form :is(input, select):focus {
  border-color: rgba(75, 157, 255, .48);
  box-shadow: 0 0 0 3px rgba(75, 157, 255, .08);
}

.mobile-access-code-form input:disabled {
  opacity: .55;
}

.mobile-access-code-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(111, 191, 167, .25);
  border-radius: 10px;
  background: rgba(36, 119, 94, .08);
}

.mobile-access-code-result > div {
  display: grid;
  gap: 4px;
  margin-right: auto;
}

.mobile-access-code-result small {
  color: #7fa597;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mobile-access-code-result code {
  color: #d8fff1;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .18em;
}

.mobile-access-code-table .code-status-active {
  color: #75d5b3;
}

.mobile-access-redemptions {
  display: grid;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.mobile-access-redemptions h3 {
  margin: 3px 0 0;
  color: #d8e6f4;
  font-size: 13px;
}

.mobile-access-code-table :is(
  .code-status-revoked,
  .code-status-expired,
  .code-status-redeemed
) {
  color: #8ca0b5;
}

html[data-portal-theme="light"] .mobile-access-code-form :is(input, select) {
  border-color: rgba(24, 67, 115, .16);
  color: #15334f;
  background: rgba(255, 255, 255, .78);
}

html[data-portal-theme="light"] .mobile-access-code-result code {
  color: #176247;
}

/* Phase 5 Early Access widget. Injected after the certified homepage hydrates. */
.film-early-access {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  color: #f7faff;
  background:
    radial-gradient(circle at 12% 8%, rgba(67, 148, 255, .24), transparent 34%),
    radial-gradient(circle at 88% 92%, rgba(118, 102, 255, .18), transparent 38%),
    #091424;
}

.film-early-access::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}

.film-early-access-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
  align-items: center;
  gap: clamp(48px, 7vw, 100px);
}

.film-early-access-kicker {
  margin: 0 0 18px;
  color: #7fb5ff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.film-early-access-copy h2 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(45px, 5.6vw, 78px);
  font-weight: 760;
  letter-spacing: -.065em;
  line-height: .98;
}

.film-early-access-intro {
  max-width: 670px;
  margin: 28px 0 0;
  color: #aebed1;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.65;
}

.film-early-access-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 17px;
  margin-top: 34px;
}

.film-early-access-actions > span {
  max-width: 310px;
  color: #6f88a5;
  font-size: 12px;
  line-height: 1.5;
}

.film-early-access-button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border: 1px solid rgba(171, 213, 255, .52);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #1477ff, #7666ff);
  box-shadow: 0 16px 42px rgba(20, 119, 255, .27);
  cursor: pointer;
  font-weight: 760;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.film-early-access-button:hover,
.film-early-access-button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(20, 119, 255, .38);
  outline: 2px solid rgba(166, 211, 255, .9);
  outline-offset: 3px;
}

.film-early-access-button:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}

.film-early-access-messages {
  display: grid;
  gap: 14px;
}

.film-early-access-messages article {
  padding: 26px;
  border: 1px solid rgba(141, 185, 235, .18);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(18, 42, 72, .88), rgba(8, 22, 39, .82));
  box-shadow: 0 26px 70px rgba(0, 5, 14, .22);
}

.film-early-access-messages article:last-child {
  margin-left: 38px;
}

.film-early-access-messages span {
  color: #7fb5ff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.film-early-access-messages h3 {
  margin: 12px 0;
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.23;
}

.film-early-access-messages p {
  margin: 0;
  color: #91a8c2;
  font-size: 13px;
  line-height: 1.7;
}

body.early-access-open {
  overflow: hidden;
}

.early-access-dialog {
  width: min(920px, calc(100% - 30px));
  max-width: none;
  max-height: min(900px, calc(100dvh - 30px));
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 25px;
  color: #eef6ff;
  background: transparent;
}

.early-access-dialog::backdrop {
  background: rgba(1, 7, 15, .82);
  backdrop-filter: blur(12px);
}

.early-access-dialog-frame {
  position: relative;
  max-height: min(900px, calc(100dvh - 30px));
  padding: clamp(24px, 4vw, 42px);
  overflow: auto;
  border: 1px solid rgba(129, 181, 239, .28);
  border-radius: 25px;
  background:
    radial-gradient(circle at 95% 3%, rgba(67,148,255,.22), transparent 32%),
    #091625;
  box-shadow: 0 38px 110px rgba(0,0,0,.55);
}

.early-access-close {
  position: absolute;
  top: 18px;
  right: 18px;
  min-width: 44px;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: #9eb3ca;
  background: rgba(3, 11, 21, .5);
  cursor: pointer;
  font-size: 11px;
}

.early-access-dialog-heading {
  padding-right: 60px;
}

.early-access-dialog-heading > span,
.early-access-success > span {
  color: #7fb5ff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.early-access-dialog-heading h2 {
  margin: 9px 0 7px;
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -.05em;
}

.early-access-dialog-heading p,
.early-access-success p {
  margin: 0;
  color: #91a7c0;
  line-height: 1.6;
}

.early-access-form {
  margin-top: 30px;
}

.early-access-step[hidden],
.early-access-success[hidden],
.early-access-area-notice[hidden] {
  display: none;
}

.early-access-step fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.early-access-step legend,
.early-access-step > h3 {
  margin: 0 0 18px;
  padding: 0;
  color: #dcecff;
  font-size: 16px;
  font-weight: 740;
}

.early-access-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.early-access-category-option {
  position: relative;
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 13px 15px;
  border: 1px solid rgba(127, 162, 201, .18);
  border-radius: 13px;
  color: #b9cade;
  background: rgba(4, 14, 26, .58);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.35;
}

.early-access-category-option input {
  position: absolute;
  opacity: 0;
}

.early-access-category-option:has(input:checked) {
  color: #fff;
  border-color: rgba(84, 159, 255, .78);
  background: rgba(31, 102, 202, .2);
  box-shadow: inset 0 0 0 1px rgba(84, 159, 255, .16);
}

.early-access-category-option:has(input:focus-visible) {
  outline: 2px solid #9bcdff;
  outline-offset: 2px;
}

.early-access-category-description {
  min-height: 73px;
  margin: 14px 0 18px;
  padding: 15px 17px;
  border-left: 3px solid #4394ff;
  color: #a9bdd4;
  background: rgba(27, 77, 137, .12);
  font-size: 12px;
  line-height: 1.65;
}

.early-access-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.ea-field {
  display: grid;
  gap: 7px;
  color: #95aac1;
  font-size: 11px;
}

.ea-field:last-child {
  grid-column: 1 / -1;
}

.ea-field input {
  width: 100%;
  min-height: 47px;
  padding: 10px 13px;
  border: 1px solid rgba(133, 170, 211, .2);
  border-radius: 11px;
  color: #fff;
  background: rgba(3, 12, 23, .68);
  outline: none;
}

.ea-field input:focus {
  border-color: #4394ff;
  box-shadow: 0 0 0 3px rgba(67, 148, 255, .13);
}

.ea-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.early-access-checkbox {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 11px;
  margin-top: 17px;
  color: #a5b8cd;
  font-size: 11px;
  line-height: 1.55;
}

.early-access-checkbox input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: #4394ff;
}

.early-access-checkbox + a {
  display: inline-block;
  margin: 12px 0 0 31px;
  color: #7fb5ff;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.early-access-area-notice {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(73, 190, 151, .28);
  border-radius: 12px;
  background: rgba(35, 126, 96, .1);
}

.early-access-area-notice strong {
  color: #a8f2d5;
  font-size: 13px;
}

.early-access-area-notice p {
  margin: 7px 0 0;
  color: #8fb5a6;
  font-size: 11px;
  line-height: 1.6;
}

.early-access-detail-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

.early-access-back {
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: #a9bdd3;
  background: transparent;
  cursor: pointer;
}

.early-access-form-status {
  min-height: 20px;
  margin: 14px 0 0;
  color: #a8caff;
  font-size: 12px;
}

.early-access-success {
  padding: 35px 0 8px;
  text-align: center;
}

.early-access-success h3 {
  margin: 10px 0;
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -.05em;
}

.early-access-success p {
  max-width: 590px;
  margin-inline: auto;
}

.early-access-success .film-early-access-button {
  margin-top: 24px;
}

@media (max-width: 820px) {
  .film-early-access {
    padding: 78px 0;
  }

  .film-early-access-shell {
    grid-template-columns: 1fr;
  }

  .film-early-access-messages article:last-child {
    margin-left: 0;
  }
}

@media (max-width: 580px) {
  .film-early-access-copy h2 {
    font-size: 42px;
  }

  .early-access-category-grid,
  .early-access-fields {
    grid-template-columns: 1fr;
  }

  .ea-field:last-child {
    grid-column: auto;
  }

  .early-access-dialog-frame {
    padding: 24px 17px;
  }

  .early-access-detail-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .early-access-back {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .film-early-access-button {
    transition: none;
  }
}

@media (max-width: 1120px) {
  .admin-export-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-access-code-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .admin-export-grid {
    grid-template-columns: 1fr;
  }

  .mobile-access-code-form {
    grid-template-columns: 1fr;
  }

  .mobile-access-code-result {
    align-items: stretch;
    flex-direction: column;
  }
}