@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

    :root {
      --bg: #050A16; --navy-2: #0E1C3A; --navy-3: #14264E;
      --white: #F7F5F0; --dim: rgba(247,245,240,0.62); --dimmer: rgba(247,245,240,0.38);
      --gold: #FFD700; --amber: #FFA928; --gold-deep: #B8860B; --green: #7CE38B;
      --glass: rgba(150,180,255,0.05); --glass-2: rgba(150,180,255,0.09);
      --stroke: rgba(170,200,255,0.15); --stroke-soft: rgba(170,200,255,0.08);
      --gold-stroke: rgba(255,215,0,0.28);
      --g-blue: #4285F4; --g-red: #EA4335; --g-yellow: #FBBC05; --g-green: #34A853;
      --g-link: #1a0dab; --g-text: #202124; --g-sub: #4d5156; --g-grey: #70757a;
      --g-line: #ebecf0; --g-purple: #9B72CB;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Instrument Sans', sans-serif;
      background:
        radial-gradient(ellipse 120% 60% at 50% -10%, var(--navy-2), transparent 60%),
        radial-gradient(ellipse 80% 50% at 100% 110%, rgba(20,38,78,0.6), transparent 65%),
        var(--bg);
      background-attachment: fixed;
      color: var(--white); line-height: 1.6; min-height: 100vh;
      display: flex; flex-direction: column; overflow-x: hidden;
    }
    ::selection { background: var(--gold); color: #000; }
    @property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
    @keyframes spin { to { --angle: 360deg; } }
    @keyframes gradShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

    .bg-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .bg-fx::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(170,200,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(170,200,255,0.04) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: radial-gradient(ellipse 90% 65% at 50% 30%, black, transparent 82%);
    }
    .orb { position: absolute; border-radius: 50%; filter: blur(120px); }
    .orb-1 { width: 620px; height: 620px; background: radial-gradient(circle, rgba(255,215,0,0.14), transparent 70%); top: -220px; left: 30%; }
    .orb-2 { width: 460px; height: 460px; background: radial-gradient(circle, rgba(41,98,255,0.12), transparent 70%); bottom: -160px; left: -140px; }
    .orb-3 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(155,114,203,0.10), transparent 70%); bottom: -180px; right: -160px; }
    /* Ghosted product screenshot behind everything (never behind the card) */
    .auth-bg {
      position: fixed; inset: -60px; z-index: 0; pointer-events: none;
      background-image: url('https://nickquirk.com/seoapp2/bgsignin.jpg');
      background-size: cover; background-position: center;
      filter: blur(10px) brightness(0.55) saturate(1.2);
      opacity: 0.8;
      -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 20%, transparent 78%);
      mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 20%, transparent 78%);
    }

    .auth-top {
      position: relative; z-index: 2;
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.6rem 6%;
    }
    .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
    .brand-logo { height: 34px; width: auto; display: block; }
    .brand-fallback { display: none; align-items: center; gap: 0.5rem; font-family: 'Bricolage Grotesque'; font-weight: 700; color: var(--white); }
    .brand-icon { width: 28px; height: 28px; border-radius: 30%; background: linear-gradient(135deg, var(--gold), var(--amber)); display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 800; color: #1a1400; font-family: 'Bricolage Grotesque'; }
    .top-link { color: var(--dim); font-size: 0.92rem; }
    .top-link a { color: var(--gold); font-weight: 700; text-decoration: none; }
    .top-link a:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* Two-column stage: pitch + form */
    .auth-stage { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.5rem 5% 3.5rem; }
    .auth-grid {
      display: grid; grid-template-columns: 1fr 470px; gap: 3.5rem;
      align-items: center; width: 100%; max-width: 1000px;
    }

    /* Left pitch */
    .pitch h1 { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.08; }
    .pitch h1 .hl { background: linear-gradient(100deg, var(--gold), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .pitch > p { color: var(--dim); font-size: 1.08rem; margin-top: 1rem; max-width: 40ch; }
    .pitch-list { list-style: none; margin-top: 1.8rem; display: flex; flex-direction: column; gap: 0.9rem; }
    .pitch-list li { display: flex; align-items: flex-start; gap: 0.8rem; color: var(--white); font-size: 1rem; }
    .pitch-list .tick {
      flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(124,227,139,0.14); border: 1px solid rgba(124,227,139,0.35);
      color: var(--green); font-size: 0.72rem;
    }
    .pitch-list li b { color: var(--white); }
    .pitch-list li span { color: var(--dim); }
    .pitch-proof {
      margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.8rem;
      background: var(--glass); border: 1px solid var(--stroke-soft); border-radius: 100px;
      padding: 0.55rem 1.1rem 0.55rem 0.6rem;
    }
    .pitch-proof .stars { color: var(--gold); font-size: 0.78rem; }
    .pitch-proof .stars i { margin-right: 1px; }
    .pitch-proof span { font-size: 0.86rem; color: var(--dim); }
    .pitch-proof b { color: var(--white); font-weight: 700; }

    .sheet-stack { position: relative; }
    .sheet-stack::before {
      content: ''; position: absolute; inset: -40px; border-radius: 60px;
      background: conic-gradient(from var(--angle), rgba(255,215,0,0.35), rgba(66,133,244,0.22), rgba(155,114,203,0.22), rgba(255,169,40,0.3), rgba(255,215,0,0.35));
      animation: spin 9s linear infinite; filter: blur(72px); z-index: 0; pointer-events: none;
    }

    .auth-card {
      position: relative; z-index: 1; isolation: isolate;
      background: #fff; color: var(--g-text);
      border-radius: 30px;
      padding: 2.4rem clamp(1.6rem, 5vw, 2.6rem);
      box-shadow: 0 50px 110px -35px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.07), 0 0 90px -30px rgba(255,215,0,0.3);
    }
    .auth-card ::selection { background: var(--g-blue); color: #fff; }
    .auth-eyebrow { font-family: 'JetBrains Mono'; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-grey); margin-bottom: 0.5rem; }
    .auth-title { font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--g-text); line-height: 1.1; }
    .auth-sub { color: var(--g-sub); font-size: 0.96rem; margin-top: 0.45rem; margin-bottom: 1.5rem; }

    .g-btn {
      width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.7rem;
      background: #fff; border: 1px solid #dadce0; border-radius: 100px;
      padding: 0.82rem 1rem; cursor: pointer;
      font-family: 'Instrument Sans'; font-weight: 600; font-size: 0.94rem; color: var(--g-text);
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .g-btn:hover { background: #f8f9fa; box-shadow: 0 1px 6px rgba(32,33,36,0.18); }
    .g-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .divider-or { display: flex; align-items: center; gap: 1rem; margin: 1.35rem 0; color: var(--g-grey); font-size: 0.82rem; }
    .divider-or::before, .divider-or::after { content: ''; flex: 1; height: 1px; background: var(--g-line); }

    .field { margin-bottom: 1.05rem; }
    .field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
    .field label { display: block; font-family: 'JetBrains Mono'; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-grey); margin-bottom: 0.45rem; }
    .input-wrap { position: relative; }
    .input-wrap > i { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--g-grey); font-size: 0.9rem; }
    .field input {
      width: 100%; font-family: 'Instrument Sans'; font-size: 1rem; color: var(--g-text);
      background: #fff; border: 1.5px solid #dadce0; border-radius: 14px;
      padding: 0.88rem 1rem 0.88rem 2.7rem; outline: none;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .field input::placeholder { color: #9aa0a6; }
    .field input:focus { border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(66,133,244,0.15); }
    .toggle-pw { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--g-grey); cursor: pointer; padding: 0.5rem; font-size: 0.9rem; }
    .toggle-pw:hover { color: var(--g-text); }

    /* password strength */
    .pw-meter { display: flex; gap: 5px; margin: 0.6rem 0 0.2rem; }
    .pw-meter span { flex: 1; height: 5px; border-radius: 100px; background: #e8eaed; transition: background 0.25s ease; }
    .pw-hint { font-size: 0.76rem; color: var(--g-grey); min-height: 1.1em; }
    .pw-meter.s1 span:nth-child(1) { background: var(--g-red); }
    .pw-meter.s2 span:nth-child(-n+2) { background: var(--amber); }
    .pw-meter.s3 span:nth-child(-n+3) { background: #FBBC05; }
    .pw-meter.s4 span { background: var(--g-green); }

    .agree { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.84rem; color: var(--g-sub); margin: 0.5rem 0 1.3rem; cursor: pointer; }
    .agree input { width: 16px; height: 16px; margin-top: 0.15rem; accent-color: var(--g-blue); cursor: pointer; flex-shrink: 0; }
    .agree a { color: var(--g-link); text-decoration: none; font-weight: 600; }
    .agree a:hover { text-decoration: underline; }

    .submit {
      width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
      font-family: 'Bricolage Grotesque'; font-weight: 800; font-size: 1rem;
      padding: 1rem 1.5rem; border-radius: 16px; border: 2px solid transparent; cursor: pointer;
      color: #1a1400;
      background:
        linear-gradient(115deg, #FFE968, var(--gold), var(--amber), var(--gold), #FFE968) padding-box,
        conic-gradient(from var(--angle), #fff, var(--gold), var(--gold-deep), var(--amber), #fff) border-box;
      background-size: 300% 100%, 100% 100%;
      animation: gradShift 3.5s linear infinite alternate, spin 3s linear infinite;
      box-shadow: 0 0 20px -2px rgba(255,215,0,0.45), 0 4px 14px rgba(2,6,18,0.4);
      transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease;
      text-shadow: 0 1px 0 rgba(255,255,255,0.3);
    }
    .submit i { font-size: 0.85em; transition: transform 0.2s ease; }
    .submit:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 0 34px 0 rgba(255,215,0,0.6), 0 6px 18px rgba(2,6,18,0.4); }
    .submit:hover i { transform: translateX(4px); }
    .submit:active { transform: translateY(1px) scale(0.99); }

    .auth-foot { text-align: center; margin-top: 1.4rem; font-size: 0.92rem; color: var(--g-sub); }
    .auth-foot a { color: var(--g-link); font-weight: 700; text-decoration: none; }
    .auth-foot a:hover { text-decoration: underline; }

    a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
    @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
    @media (max-width: 900px) {
      .auth-grid { grid-template-columns: 1fr; max-width: 470px; gap: 2rem; }
      .pitch { text-align: center; }
      .pitch > p { margin-left: auto; margin-right: auto; }
      .pitch-list { max-width: 340px; margin-left: auto; margin-right: auto; }
      .pitch-proof { margin-left: auto; margin-right: auto; }
    }
    @media (max-width: 520px) {
      .auth-top { padding: 1.2rem 5%; }
      .top-link span { display: none; }
      .field.two { grid-template-columns: 1fr; }
      .pitch { display: none; }
    }