/* ============================================================
   Clear Mint — Sign-in (split showcase + form)
   Rebuilt to match the "Financial Clarity for Your Family" hero.
   Tokens from clearmint.css. Serif (Playfair) for the wordmark,
   the hero headline, "Welcome Back", and big figures only.
   ============================================================ */

.au {
  min-height: 100vh; margin: 0;
  background:
    radial-gradient(120% 90% at 18% 8%, #0f3424 0%, transparent 55%),
    radial-gradient(130% 100% at 90% 100%, #0c2a1d 0%, transparent 60%),
    #07140d;
  color: var(--ink-700);
  display: flex; align-items: center; justify-content: center;
  padding: 30px 26px; position: relative;
}
.au * { box-sizing: border-box; }
.au p, .au h1, .au h2, .au h3 { margin: 0; }
.au button { font-family: inherit; }

/* =====================  SHELL  ===================== */
.au-shell {
  width: min(1180px, 100%);
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(160deg, #0e3122, #0a2418);
  box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(212,169,93,.10);
  display: flex; flex-direction: column;
}
.au-body { display: grid; grid-template-columns: 1.07fr 0.93fr; }

/* =====================  LEFT — HERO  ===================== */
.au-hero {
  position: relative; overflow: hidden; min-height: 568px;
  padding: 34px 36px 30px;
  display: flex; flex-direction: column;
}
/* photographic scene (shows through the empty image-slot) */
.au-scene {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(85% 48% at 50% 72%, rgba(233,196,120,.34), transparent 62%),
    radial-gradient(60% 30% at 50% 80%, rgba(245,214,150,.40), transparent 60%),
    radial-gradient(120% 70% at 50% 120%, rgba(8,18,12,.85), transparent 60%),
    linear-gradient(178deg, #0c2c1e 0%, #123c29 46%, #15402c 60%, #0a1d14 100%);
}
/* rotating, faded family imagery — a soft shade behind the hero */
.au-bgphoto {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center right;
  opacity: 0; transition: opacity 1.1s ease;
  filter: saturate(.92);
}
.au-bgphoto.in { opacity: .32; }
/* the family photo drop target, full-bleed behind the content */
.au-photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.au-photo::part(frame) { background: transparent; }
.au-photo::part(ring) { border-color: rgba(212,169,93,.30); border-width: 1px; }
.au-photo::part(empty) { color: rgba(236,226,200,.66); }
/* legibility veil over whatever fills the scene */
.au-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,20,12,.62) 0%, rgba(7,20,12,.10) 30%, rgba(7,20,12,.18) 56%, rgba(7,20,12,.80) 100%),
    linear-gradient(95deg, rgba(7,20,12,.50) 0%, rgba(7,20,12,0) 42%);
}
/* decorative gold botanicals */
.au-leaf { position: absolute; z-index: 3; color: var(--gold); pointer-events: none; opacity: .9; }
.au-leaf.tr { top: -18px; right: -10px; width: 188px; transform: rotate(8deg); opacity: .8; }
.au-leaf.br { bottom: 8px; right: 14px; width: 150px; transform: rotate(-6deg); opacity: .7; }

.au-hero-in { position: relative; z-index: 4; display: flex; flex-direction: column; flex: 1; pointer-events: none; }

.au-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; pointer-events: auto; width: max-content; }
.au-logo .mark { width: 34px; height: 34px; color: var(--gold); flex: 0 0 34px; }
.au-logo .lk { line-height: 1.05; }
.au-logo .name { font-family: var(--font-serif); font-size: 25px; font-weight: 600; color: #FBFAF4; letter-spacing: .01em; display: block; }
.au-logo .tag { font-size: 10.5px; color: rgba(232,224,200,.62); font-weight: 600; letter-spacing: .01em; margin-top: 1px; }

.au-display {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(32px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.01em;
  margin-top: 30px;
}
.au-display .g { color: var(--gold); display: block; }
.au-display .w { color: #F4F1E8; display: block; }
.au-rule { width: 52px; height: 3px; border-radius: 2px; background: var(--gold); margin: 18px 0 0; }
.au-lede { margin-top: 16px; max-width: 360px; font-size: 14.5px; line-height: 1.55; color: rgba(233,228,212,.80); }

/* stat cards over the scene */
.au-stats { margin-top: auto; padding-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.au-stat {
  position: relative; overflow: hidden;
  background: rgba(7,21,13,.50); border: 1px solid rgba(212,169,93,.20);
  border-radius: 14px; padding: 13px 14px 14px; backdrop-filter: blur(7px);
}
.au-stat .ic {
  width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212,169,93,.40); color: var(--gold); margin-bottom: 9px;
}
.au-stat .k { font-size: 11px; font-weight: 700; color: rgba(231,224,206,.72); letter-spacing: .01em; }
.au-stat .v { font-family: var(--font-serif); font-size: 23px; font-weight: 600; color: #FBFAF4; line-height: 1; margin-top: 4px; }
.au-stat .d { display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: #7FD0A0; margin-top: 8px; white-space: nowrap; }
.au-stat .d span { color: rgba(231,224,206,.55); font-weight: 600; }
.au-stat .spark { position: absolute; right: 0; bottom: 0; left: 0; height: 22px; opacity: .85; pointer-events: none; }

/* =====================  RIGHT — FORM CARD  ===================== */
.au-card {
  margin: 16px 16px 16px 0;
  background: #F3EDE1; border-radius: 18px;
  padding: 30px 36px 26px; display: flex; flex-direction: column;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.au-lang {
  align-self: flex-end;
  display: inline-flex; align-items: center; gap: 7px;
  background: #FBF8F1; border: 1px solid #E3DAC8; border-radius: 10px;
  padding: 7px 11px; font-size: 12.5px; font-weight: 700; color: var(--ink-700); cursor: pointer;
}
.au-lang svg { color: var(--ink-500); }
.au-lang .chev { margin-left: 2px; color: var(--ink-400); }

.au-h { font-family: var(--font-serif); font-size: 33px; font-weight: 600; color: #20342A; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.au-h .leaf { width: 25px; height: 25px; color: var(--gold); flex: 0 0 25px; }
.au-hsub { font-size: 14px; color: var(--ink-500); margin-top: 7px; }

.au-msg { border-radius: 10px; padding: 10px 13px; font-size: 13px; margin-top: 14px; display: none; }
.au-msg.err { background: #FBEEE9; border: 1px solid #E7C3B6; color: #A4502F; }

.au-field { margin-top: 18px; }
.au-field:first-of-type { margin-top: 22px; }
.au-field label { display: block; font-size: 12.5px; font-weight: 800; color: #2C3A30; margin-bottom: 8px; letter-spacing: .01em; }
.au-input { position: relative; }
.au-input > .lic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-400); pointer-events: none; display: flex; }
.au-input input {
  width: 100%; padding: 14px 44px 14px 42px;
  border: 1px solid #E0D7C5; border-radius: 12px;
  font-family: inherit; font-size: 14px; color: var(--ink-900); background: #FBF8F1;
  outline: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
.au-input input::placeholder { color: var(--ink-400); }
.au-input input:focus { border-color: var(--green-500); background: #fff; box-shadow: 0 0 0 3px rgba(46,125,91,.12); }
.au-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;
  border: 0; background: transparent; color: var(--ink-400); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.au-eye:hover { color: var(--forest); }

.au-utils { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 0; }
.au-remember { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #2C3A30; cursor: pointer; user-select: none; white-space: nowrap; }
.au-remember input { width: 16px; height: 16px; accent-color: var(--forest); cursor: pointer; }
.au-forgot { border: 0; background: transparent; font-size: 13px; font-weight: 700; color: var(--gold-ink, #B08433); cursor: pointer; white-space: nowrap; }
.au-forgot:hover { color: var(--forest); }

.au-submit {
  width: 100%; margin-top: 20px; padding: 15px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, #1E5E45, #134734);
  color: #F6F1E4; font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  box-shadow: 0 10px 22px rgba(15,55,40,.30); transition: filter .15s, transform .05s;
}
.au-submit .leaf { width: 18px; height: 18px; color: var(--gold); }
.au-submit:hover { filter: brightness(1.06); }
.au-submit:active { transform: translateY(1px); }

.au-div { display: flex; align-items: center; gap: 12px; margin: 17px 0; font-size: 12.5px; font-weight: 600; color: var(--ink-400); }
.au-div::before, .au-div::after { content: ''; flex: 1; height: 1px; background: #E2D9C7; }

.au-social {
  width: 100%; margin-top: 11px; padding: 13px 16px;
  border: 1px solid #E0D7C5; border-radius: 12px; background: #FBF8F1;
  font-size: 14px; font-weight: 700; color: var(--ink-800, #33433a); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 11px; transition: .15s;
}
.au-social svg { width: 18px; height: 18px; }
.au-social:hover { border-color: var(--green-500); background: #fff; }

/* demo button — green outline (matches the app's demo entry) */
.au-demo { border: 1.5px solid var(--green-500, #10B981); background: transparent; color: var(--green-600, #059669); font-weight: 700; }
.au-demo svg { width: 13px; height: 13px; }
.au-demo:hover { background: var(--mint-50, #EAF7F1); border-color: var(--green-600, #059669); }

/* trust badges */
.au-trust { margin-top: auto; padding-top: 22px; border-top: 1px solid #E4DBC9; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.au-tb { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.au-tb .ic { color: var(--gold); display: flex; }
.au-tb .t { font-size: 11.5px; font-weight: 800; color: #2C3A30; }
.au-tb .s { font-size: 10.5px; color: var(--ink-400); line-height: 1.3; }

/* =====================  FOOTER BAR  ===================== */
.au-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 30px; background: #081710; border-top: 1px solid rgba(212,169,93,.14);
}
.au-foot .fl { display: flex; align-items: center; gap: 12px; }
.au-foot .sh { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
  background: rgba(212,169,93,.14); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.au-foot .ft b { color: #F2ECDD; font-size: 12.5px; font-weight: 800; }
.au-foot .ft p { color: rgba(228,222,206,.58); font-size: 11.5px; margin-top: 2px; }
.au-foot .fr { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.au-foot .fr .need { color: var(--gold); }
.au-foot .fr a { color: #EDE7D7; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.au-foot .fr a:hover { color: #fff; }

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 880px) {
  .au { padding: 18px 14px; }
  .au-body { grid-template-columns: 1fr; }
  .au-hero { min-height: 0; padding: 28px 26px 26px; }
  .au-leaf.tr { width: 130px; }
  .au-card { margin: 14px; }
  .au-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 560px) {
  .au-stats { gap: 10px; }
  .au-display { font-size: 30px; }
  .au-card { padding: 26px 22px 22px; }
  .au-trust { gap: 6px; }
}