:root{
    /* Brand palette (Molaris AI brand guidelines) */
    --dark-blue:   #15202B;  /* foundational background / core brand */
    --dark-blue-2: #1A2835;  /* raised surface */
    --dark-blue-3: #203141;  /* higher surface / hover */
    --light-blue:  #BEE1FB;  /* primary accent / interactive / emphasis */
    --lime:        #D8F84F;  /* SECONDARY — single attention signal only */
    --offwhite:    #EBEBE6;
    --white:       #FFFFFF;

    /* Derived text tones (all AA+ on --dark-blue) */
    --text-hi:   #F3F5F4;    /* primary text */
    --text-mid:  #C6D3DD;    /* secondary text */
    --text-low:  #8DA2B4;    /* helper / muted  (~5.3:1 on dark-blue) */
    --text-done: #6E8296;    /* completed-row muted */

    --line:        rgba(190,225,251,.14);
    --line-strong: rgba(190,225,251,.22);

    --radius-card: 20px;
    --radius-row:  14px;
    --radius-btn:  11px;

    --gutter: 16px;
    --maxw-landing: 440px;
    --maxw-home: 720px;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }

  body{
    background:var(--dark-blue);
    color:var(--text-hi);
    font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-weight:400;
    line-height:1.5;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    position:relative;
  }

  /* ----------------------------------------------------------------
     Background graphic language: faint wireframe ellipse "globes"
     + soft blurred ellipse blobs. Minimal, generous negative space.
     ---------------------------------------------------------------- */
  .bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
  .bg .blob{
    position:absolute; border-radius:50%;
    filter:blur(90px); opacity:.55;
  }
  .bg .blob.a{
    width:620px; height:760px; left:-180px; top:-220px;
    background:radial-gradient(closest-side, rgba(190,225,251,.10), transparent 70%);
  }
  .bg .blob.b{
    width:720px; height:820px; right:-240px; bottom:-280px;
    background:radial-gradient(closest-side, rgba(190,225,251,.09), transparent 70%);
  }
  .bg .wire{
    position:absolute; width:min(1200px, 150vw); height:auto;
    stroke:rgba(190,225,251,.16); fill:none;
  }
  .bg .wire.one{ right:-18%; top:-16%; transform:rotate(14deg); opacity:.7; }
  .bg .wire.two{ left:-24%; bottom:-24%; transform:rotate(-8deg); opacity:.55; }

  /* ----------------------------------------------------------------
     Screen plumbing + top preview toggle
     ---------------------------------------------------------------- */
  .stage{ position:relative; z-index:1; min-height:100vh; }

  .toggle{
    position:fixed; z-index:30; top:14px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:6px;
    padding:5px; border-radius:999px;
    background:rgba(21,32,43,.72);
    border:1px solid var(--line-strong);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 8px 30px rgba(0,0,0,.35);
  }
  .toggle .lbl{
    font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--text-low); padding:0 6px 0 10px; white-space:nowrap;
  }
  .toggle button{
    font-family:inherit; font-size:12.5px; font-weight:500;
    color:var(--text-mid); background:transparent; border:0; cursor:pointer;
    padding:7px 14px; border-radius:999px; transition:all .18s ease; white-space:nowrap;
  }
  .toggle button:hover{ color:var(--text-hi); }
  .toggle button[aria-pressed="true"]{ background:var(--light-blue); color:var(--dark-blue); font-weight:600; }
  .toggle button:focus-visible{ outline:2px solid var(--light-blue); outline-offset:2px; }

  .screen{ display:none; }
  .screen.active{ display:block; }

  /* ----------------------------------------------------------------
     Logo (inline SVG mark + wordmark) — light-on-dark
     ---------------------------------------------------------------- */
  .logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
  .logo svg{ display:block; }
  .logo img{ display:block; height:40px; width:auto; }
  .card .logo img{ height:58px; }
  .topbar .logo img{ height:56px; }
  .logo .word{
    font-weight:600; font-size:20px; letter-spacing:-.01em; color:var(--light-blue);
    line-height:1;
  }
  .logo .word b{ font-weight:600; }
  .logo .word .ai{ font-weight:300; margin-left:.28em; letter-spacing:.02em; }

  /* ================================================================
     SCREEN 1 — LANDING (pre-auth)
     ================================================================ */
  .landing{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:88px var(--gutter) 40px;
  }
  .card{
    width:100%; max-width:var(--maxw-landing);
    background:linear-gradient(180deg, rgba(32,49,65,.55), rgba(21,32,43,.55));
    border:1px solid var(--line-strong);
    border-radius:var(--radius-card);
    padding:40px 34px 30px;
    text-align:center;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 30px 80px rgba(0,0,0,.45);
  }
  .card .logo{ justify-content:center; margin-bottom:28px; }

  h1.headline{
    font-family:"Fraunces", Georgia, "Times New Roman", serif;
    font-weight:500; font-optical-sizing:auto;
    color:var(--text-hi);
    line-height:1.08; letter-spacing:-.01em; margin:0;
  }
  .landing h1{ font-size:30px; margin-bottom:12px; }

  .sub{ color:var(--text-mid); font-size:14.5px; font-weight:300; margin:0 auto; max-width:34ch; }
  .landing .sub{ margin-bottom:28px; }

  /* Google button — standard styling, sits on dark theme */
  .gbtn{
    width:100%; display:inline-flex; align-items:center; justify-content:center; gap:12px;
    background:var(--white); color:#1F1F1F;
    font-family:"Roboto","Poppins",sans-serif; font-size:14.5px; font-weight:500;
    border:1px solid #DADCE0; border-radius:var(--radius-btn);
    padding:13px 18px; cursor:pointer; transition:box-shadow .15s ease, transform .05s ease;
    box-shadow:0 1px 2px rgba(0,0,0,.25);
  }
  .gbtn:hover{ box-shadow:0 2px 6px rgba(0,0,0,.35); }
  .gbtn:active{ transform:translateY(1px); }
  .gbtn:focus-visible{ outline:2px solid var(--light-blue); outline-offset:3px; }
  .gbtn svg{ flex:0 0 auto; }

  .card .foot{
    margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
    font-size:12px; color:var(--text-low); letter-spacing:.01em;
  }
  .card .foot .dot{ opacity:.6; margin:0 6px; }

  /* ================================================================
     SCREEN 2 — ONBOARDING HOME (post-auth)
     ================================================================ */
  .topbar{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:16px var(--gutter);
    background:rgba(21,32,43,.78);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .topbar .inner{ width:100%; max-width:var(--maxw-home); margin:0 auto;
    display:flex; align-items:center; justify-content:space-between; gap:12px; }

  .userchip{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--dark-blue-2); border:1px solid var(--line-strong);
    border-radius:999px; padding:5px 12px 5px 5px;
  }
  .userchip .avatar{
    width:32px; height:32px; border-radius:50%; flex:0 0 auto;
    display:grid; place-items:center;
    background:var(--light-blue); color:var(--dark-blue);
    font-weight:600; font-size:14px;
  }
  .userchip .who{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
  .userchip .who .nm{ font-size:13px; font-weight:500; color:var(--text-hi); }
  .userchip .who .em{ font-size:11.5px; color:var(--text-low); overflow:hidden; text-overflow:ellipsis; }

  .home-wrap{ max-width:var(--maxw-home); margin:0 auto; padding:34px var(--gutter) 56px; }

  .home-head{ margin-bottom:24px; }
  .home-head h1{ font-size:32px; margin:0 0 8px; }
  .home-head .sub{ margin:0; text-align:left; max-width:44ch; }

  /* Progress meta */
  .progress{
    display:flex; align-items:center; gap:12px; margin:22px 0 14px;
    font-size:12.5px; color:var(--text-low);
  }
  .progress .bar{ flex:1; height:6px; border-radius:999px; background:var(--dark-blue-3); overflow:hidden; }
  .progress .bar i{ display:block; height:100%; width:20%; border-radius:999px; background:var(--light-blue); }

  /* Checklist */
  .checklist{
    list-style:none; margin:0; padding:0;
    background:linear-gradient(180deg, rgba(32,49,65,.40), rgba(21,32,43,.40));
    border:1px solid var(--line-strong); border-radius:var(--radius-card);
    overflow:hidden;
  }
  .item{
    display:flex; align-items:flex-start; gap:14px;
    padding:18px 20px;
    border-top:1px solid var(--line);
  }
  .item:first-child{ border-top:0; }
  .item.done{ opacity:.92; }

  /* status icon */
  .status{ flex:0 0 auto; width:26px; height:26px; margin-top:1px; position:relative; }
  .status .ring{
    width:26px; height:26px; border-radius:50%;
    border:2px solid var(--line-strong); display:grid; place-items:center;
  }
  .status.done .ring{ background:var(--light-blue); border-color:var(--light-blue); }
  .status.done .ring svg{ stroke:var(--dark-blue); }
  /* lime attention dot sits on the ring of the compliance item */
  .status .alert{
    position:absolute; top:-3px; right:-3px;
    width:11px; height:11px; border-radius:50%;
    background:var(--lime); border:2px solid var(--dark-blue);
    box-shadow:0 0 0 2px rgba(216,248,79,.18);
  }

  .item .body{ flex:1 1 auto; min-width:0; }
  .item .ttl{ display:flex; align-items:center; gap:9px; flex-wrap:wrap;
    font-size:14.5px; font-weight:500; color:var(--text-hi); }
  .item.done .ttl{ color:var(--text-done); }
  .item.done .ttl .name{ text-decoration:line-through; text-decoration-color:rgba(142,162,180,.5); }

  .badge{
    font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    padding:2px 8px; border-radius:999px; line-height:1.5;
  }
  .badge.done{ color:var(--text-done); background:rgba(110,130,150,.16); }
  .badge.attention{ color:var(--lime); background:rgba(216,248,79,.12); border:1px solid rgba(216,248,79,.35); }

  .item .help{ font-size:12.5px; color:var(--text-low); margin-top:3px; font-weight:300; }

  /* inline fields preview (item 2) */
  .fields{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .field{
    display:flex; flex-direction:column; gap:1px;
    background:var(--dark-blue); border:1px solid var(--line);
    border-radius:9px; padding:7px 11px;
  }
  .field .k{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-low); }
  .field .v{ font-size:12.5px; color:var(--text-mid); font-weight:500; }

  /* right-side action */
  .action{ flex:0 0 auto; display:flex; align-items:center; }
  .btn{
    font-family:inherit; font-size:13px; font-weight:500; cursor:pointer;
    border-radius:var(--radius-btn); padding:9px 16px; white-space:nowrap;
    transition:all .16s ease; border:1px solid transparent;
  }
  .btn:focus-visible{ outline:2px solid var(--light-blue); outline-offset:2px; }
  .btn.secondary{ background:transparent; color:var(--light-blue); border-color:var(--line-strong); }
  .btn.secondary:hover{ border-color:var(--light-blue); background:rgba(190,225,251,.07); }
  .btn.ghost{ background:transparent; color:var(--text-mid); border-color:var(--line-strong); }
  .btn.ghost:hover{ color:var(--text-hi); border-color:var(--text-low); }
  .btn.disabled, .btn[disabled]{ opacity:.5; cursor:default; }

  .item .done-mark{ font-size:12.5px; color:var(--text-done); display:inline-flex; align-items:center; gap:6px; }

  /* bottom primary */
  .cta-row{ display:flex; justify-content:flex-end; margin-top:22px; }
  .btn.primary{
    background:var(--light-blue); color:var(--dark-blue); font-weight:600; font-size:14px;
    padding:13px 26px; border-radius:var(--radius-btn);
    box-shadow:0 10px 26px rgba(190,225,251,.14);
  }
  .btn.primary:hover{ filter:brightness(1.05); }
  .btn.primary:active{ transform:translateY(1px); }

  /* ----------------------------------------------------------------
     Responsive — phone width
     ---------------------------------------------------------------- */
  @media (max-width:560px){
    /* Move the preview toggle to the bottom on phones so it never
       collides with the onboarding top bar / logo. */
    .toggle{ top:auto; bottom:16px; }
    .toggle .lbl{ display:none; }

    .landing{ padding:36px var(--gutter) 92px; }
    .card{ padding:32px 22px 24px; }
    .landing h1{ font-size:26px; }
    .home-head h1{ font-size:27px; }
    .home-wrap{ padding-bottom:100px; }
    .userchip .who{ display:none; }          /* collapse to avatar on tiny screens */
    .userchip{ padding:4px; }

    .item{ flex-wrap:wrap; }
    .action{ width:100%; padding-left:40px; margin-top:2px; }
    .action .btn{ width:100%; }
    .cta-row .btn.primary{ width:100%; }
  }

  @media (prefers-reduced-motion:reduce){
    *{ transition:none !important; animation:none !important; }
  }