:root {
      color-scheme: dark;
      --navy: #102d42;
      --navy-deep: #0a2233;
      --navy-soft: #173b52;
      --mint: #64e2c2;
      --mint-bright: #8ff0d6;
      --ink: #f7fbfc;
      --muted: #b8cad4;
      --line: rgba(184, 202, 212, 0.18);
    }

    * { box-sizing: border-box; }

    html { min-width: 320px; background: var(--navy-deep); scrollbar-gutter: stable; }
    /* Keep page alignment consistent when the vertical scrollbar appears. */
    @supports not (scrollbar-gutter: stable) {
      html { overflow-y: scroll; }
    }

    body {
      min-height: 100svh;
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 84% 30%, rgba(100, 226, 194, 0.13), transparent 28rem),
        radial-gradient(circle at 18% 92%, rgba(76, 141, 171, 0.13), transparent 32rem),
        linear-gradient(135deg, var(--navy-deep), var(--navy) 58%, #0d293c);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
    }

    button, a { font: inherit; }

    .page {
      position: relative;
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 100svh;
      overflow: hidden;
      isolation: isolate;
    }

    .page::before,
    .page::after {
      position: absolute;
      z-index: -1;
      width: 28rem;
      height: 28rem;
      border: 1px solid rgba(100, 226, 194, 0.08);
      border-radius: 50%;
      content: "";
    }

    .page::before { top: -18rem; right: -8rem; }
    .page::after { right: 6rem; bottom: -24rem; width: 40rem; height: 40rem; }

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

    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block: 28px;
      border-bottom: 1px solid var(--line);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 13px;
      color: var(--ink);
      text-decoration: none;
    }

    .brand-mark {
      position: relative;
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      overflow: hidden;
      border-radius: 13px;
      background: var(--mint);
      box-shadow: 0 10px 28px rgba(100, 226, 194, 0.18);
    }

    .brand-mark span {
      position: absolute;
      height: 7px;
      border-radius: 999px;
      background: var(--navy);
      transform: rotate(-15deg);
    }

    .brand-mark span:first-child { top: 12px; left: 7px; width: 28px; }
    .brand-mark span:last-child { top: 25px; left: 12px; width: 18px; }

    .brand-name {
      font-size: 1.65rem;
      font-weight: 760;
      letter-spacing: -0.055em;
    }

    .login-button {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      gap: 10px;
      padding: 0 18px;
      border: 1px solid rgba(247, 251, 252, 0.24);
      border-radius: 12px;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.045);
      cursor: pointer;
      transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
    }

    .login-button:hover {
      border-color: rgba(100, 226, 194, 0.72);
      background: rgba(100, 226, 194, 0.08);
      transform: translateY(-1px);
    }

    .login-button:focus-visible {
      outline: 3px solid rgba(100, 226, 194, 0.45);
      outline-offset: 3px;
    }

    .login-button svg { width: 18px; height: 18px; }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.75fr);
      align-items: center;
      gap: clamp(48px, 8vw, 120px);
      padding-block: clamp(72px, 12vh, 140px);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 24px;
      color: var(--mint-bright);
      font-size: 0.79rem;
      font-weight: 750;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      width: 28px;
      height: 2px;
      border-radius: 10px;
      background: var(--mint);
      content: "";
    }

    h1 {
      max-width: 760px;
      margin: 0;
      font-size: clamp(3rem, 7vw, 6.2rem);
      font-weight: 680;
      line-height: 0.97;
      letter-spacing: -0.065em;
      text-wrap: balance;
    }

    h1 span { color: var(--mint); }

    .intro {
      max-width: 650px;
      margin: 28px 0 0;
      color: var(--muted);
      font-size: clamp(1.08rem, 2vw, 1.3rem);
      line-height: 1.65;
    }

    .availability {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-top: 34px;
      color: #dbe8ed;
      font-size: 0.95rem;
    }

    .availability-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--mint);
      box-shadow: 0 0 0 7px rgba(100, 226, 194, 0.1);
    }

    .preview {
      position: relative;
      width: 100%;
      max-width: 440px;
      justify-self: end;
    }

    .preview::before {
      position: absolute;
      inset: -22px 28px 22px -22px;
      z-index: -1;
      border: 1px solid rgba(100, 226, 194, 0.16);
      border-radius: 30px;
      content: "";
    }

    .evidence-card {
      padding: 28px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 24px;
      background: rgba(247, 251, 252, 0.96);
      color: var(--navy);
      box-shadow: 0 34px 90px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(14px);
    }

    .card-label {
      margin: 0 0 20px;
      color: #438676;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .question {
      margin-left: 30px;
      padding: 14px 16px;
      border-radius: 14px 14px 3px 14px;
      background: #e7f0f3;
      font-size: 0.95rem;
      line-height: 1.45;
    }

    .answer {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 12px;
      margin-top: 24px;
      font-size: 0.95rem;
      line-height: 1.55;
    }

    .answer-icon {
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      border-radius: 10px;
      color: #167b68;
      background: #daf6ed;
    }

    .answer-icon svg { width: 18px; height: 18px; }

    .evidence-label {
      margin: 26px 0 10px;
      color: #6d808a;
      font-size: 0.69rem;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .evidence-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border: 1px solid #cfdee4;
      border-radius: 13px;
      background: #fff;
    }

    .document-icon {
      display: grid;
      width: 36px;
      height: 36px;
      flex: 0 0 auto;
      place-items: center;
      border-radius: 10px;
      color: #198370;
      background: #e0f7f0;
    }

    .document-icon svg { width: 18px; height: 18px; }

    .evidence-copy { min-width: 0; flex: 1; }
    .evidence-copy strong { display: block; font-size: 0.86rem; }
    .evidence-copy small { display: block; margin-top: 3px; color: #64808c; font-size: 0.76rem; }

    .confidence {
      display: flex;
      gap: 3px;
      align-items: center;
    }

    .confidence span {
      width: 13px;
      height: 4px;
      border-radius: 9px;
      background: #278b77;
    }

    .site-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding-block: 24px 30px;
      border-top: 1px solid var(--line);
      color: #94acb8;
      font-size: 0.84rem;
    }

    .status-message {
      min-height: 1.25em;
      color: var(--mint-bright);
      text-align: right;
    }

    @media (max-width: 820px) {
      .hero { grid-template-columns: 1fr; gap: 70px; }
      .preview { max-width: 520px; justify-self: start; }
      .site-footer { align-items: flex-start; flex-direction: column; }
      .status-message { text-align: left; }
    }

    @media (max-width: 520px) {
      .site-header,
      .hero,
      .site-footer { width: min(100% - 32px, 1180px); }
      .site-header { padding-block: 20px; }
      .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
      .brand-mark span:first-child { top: 10px; left: 6px; width: 24px; height: 6px; }
      .brand-mark span:last-child { top: 21px; left: 10px; width: 16px; height: 6px; }
      .brand-name { font-size: 1.42rem; }
      .login-button { min-height: 42px; padding-inline: 14px; }
      .login-button span { display: none; }
      .hero { padding-block: 64px 84px; }
      h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
      .intro { font-size: 1.05rem; }
      .evidence-card { padding: 20px; border-radius: 20px; }
      .preview::before { inset: -14px 18px 18px -14px; }
      .confidence { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
    }

    .demo-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      margin-top: 24px;
      padding: 13px 26px;
      border: 1px solid var(--mint);
      border-radius: 12px;
      background: var(--mint);
      color: var(--navy-deep);
      font-weight: 700;
      cursor: pointer;
    }
    .demo-button:hover { background: var(--mint-bright); }
    .demo-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

    @media (min-width: 821px) and (max-height: 850px) {
      .hero { padding-block: 32px; }
      .eyebrow { margin-bottom: 18px; }
      h1 { font-size: clamp(3rem, 7vh, 4.5rem); }
      .intro { margin-top: 20px; font-size: 1.08rem; }
      .availability { margin-top: 20px; }
      .demo-button { margin-top: 12px; }
    }
  

    /* Demo form styles are isolated from the existing page. */
    .demo-dialog {
      width: min(560px, calc(100% - 32px));
      max-height: calc(100dvh - 32px);
      margin: auto;
      padding: 28px;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--navy);
      color: var(--ink);
      box-shadow: 0 24px 90px rgba(0, 0, 0, 0.4);
    }
    .demo-dialog::backdrop { background: rgba(4, 17, 26, 0.78); }
    body:has(.demo-dialog[open]) { overflow: hidden; }
    .demo-dialog [hidden] { display: none !important; }
    .demo-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    .demo-dialog h2 { margin: 0; font-size: 1.8rem; letter-spacing: -0.035em; }
    .demo-dialog p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
    .demo-close { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); font-size: 1.6rem; cursor: pointer; }
    .demo-fields { display: grid; gap: 16px; margin: 20px 0 0; padding: 0; border: 0; min-width: 0; }
    .demo-field { display: grid; gap: 7px; font-size: 0.9rem; font-weight: 600; }
    .demo-field small { font-weight: 400; color: var(--muted); }
    .demo-field input, .demo-field textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #526a77; border-radius: 9px; font: inherit; font-size: 1rem; font-weight: 400; background: var(--navy-deep); color: var(--ink); }
    .demo-field textarea { min-height: 88px; resize: vertical; }
    .demo-dialog a { color: var(--mint-bright); text-underline-offset: 3px; }
    .demo-dialog :is(input, textarea, button, a):focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; }
    .demo-dialog .demo-button { margin: 0; width: 100%; }
    .demo-dialog button:disabled { cursor: wait; opacity: 0.7; }
    .demo-dialog .demo-note { margin: 0; font-size: 0.8rem; }
    .demo-dialog .demo-error { color: #ffd1c7; }
    .demo-success { margin-top: 20px; }
    .demo-success strong { display: block; font-size: 1.2rem; color: var(--mint-bright); }
    .demo-noscript { color: var(--muted); }
    .demo-noscript a { color: var(--mint-bright); }
    @media (min-width: 521px) {
      .demo-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .demo-fields > :nth-child(n+3) { grid-column: 1 / -1; }
    }
    @media (min-width: 521px) and (max-height: 700px) {
      .demo-dialog { padding: 20px; }
      .demo-dialog h2 { font-size: 1.6rem; }
      .demo-dialog p { margin-block: 12px; }
      .demo-fields { margin-top: 14px; gap: 10px; }
      .demo-field input { padding-block: 9px; }
      .demo-field textarea { height: 72px; min-height: 72px; }
      .demo-dialog .demo-note { margin: 0; }
    }
    @media (max-width: 520px) {
      .demo-dialog { padding: 20px; }
    }
  

    a.login-button { text-decoration: none; }
    .footer-purpose { display:block; margin-top:8px; line-height:1.5; }
    .footer-links { display:flex; flex-wrap:wrap; gap:12px 24px; }
    .footer-links a { color:var(--muted); text-underline-offset:4px; }
    a:focus-visible { outline:3px solid var(--mint); outline-offset:5px; }
    .auth-main { width:min(480px,calc(100% - 32px)); margin:56px auto; }
    .auth-card { border:1px solid var(--line); border-radius:24px; padding:32px; background:rgba(10,34,51,.7); box-shadow:0 24px 80px #0002; }
    .auth-card h1,.privacy-main h1 { font-size:clamp(2rem,6vw,2.7rem); line-height:1.12; letter-spacing:-.04em; }
    .auth-card p,.privacy-main p { color:var(--muted); line-height:1.65; }
    .auth-card a,.privacy-main a { color:var(--mint-bright); text-underline-offset:4px; }
    .access-note { padding:14px 16px; border:1px solid #64e2c244; border-radius:12px; background:#64e2c20a; font-size:.88rem; }
    .auth-fields { border:0; padding:0; margin:24px 0 0; display:grid; gap:18px; min-width:0; }
    .auth-fields label { display:grid; gap:8px; font-size:.9rem; }
    .auth-fields input { width:100%; min-width:0; padding:13px; font:inherit; border:1px solid #526a77; border-radius:9px; background:var(--navy-deep); color:var(--ink); }
    .auth-fields:disabled input { opacity:.65; }
    .auth-fields .demo-button { margin:4px 0 0; width:100%; }
.auth-fields input:disabled { opacity:.5; cursor:not-allowed; }
.auth-fields :is(input,button):focus-visible { outline:3px solid var(--mint); outline-offset:3px; }
.auth-error { padding:14px 16px; border:1px solid #ffd1c755; border-radius:12px; color:#ffd1c7 !important; font-size:.9rem; }
    .auth-switch { text-align:center; margin:24px 0 0; font-size:.9rem; }
    .auth-help { font-size:.85rem; text-align:center; }
    .privacy-main { width:min(760px,calc(100% - 32px)); margin:60px auto; }
    .privacy-main h2 { font-size:1.2rem; margin-top:30px; }
    @media(max-width:520px) { .auth-main {margin-block:32px;} .auth-card {padding:24px;} .site-header .login-button span {display:inline;} }