/* James Allen Mortgage Team brand for the team tools (letter tool, letter chat,
   agent form, sign-in). Carried over from jamesallenteam.com (assets/site.css):
   Manrope, teal accent, frosted glass panels over a soft color field, pill
   buttons, the headshot + signature + MORTGAGE TEAM lockup. Light only, like
   the website. The preapproval letter itself keeps its own styles and fonts. */

:root{
  /* Site tokens */
  --bg:#F4F6F9; --ink:#0E1726; --muted:#586374; --accent:#0B5F6A; --accent-ink:#FFFFFF;
  --accent-soft:#E3F1F0; --focus:#2F6FEB; --gold:#A6720A;
  --line:rgba(14,23,38,.1); --line-strong:rgba(14,23,38,.18);
  --r-xl:28px; --r-lg:22px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --glass-panel:rgba(255,255,255,.52);
  --glass-strong:rgba(255,255,255,.78);
  --blur:blur(30px) saturate(190%);
  --sheen:linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 60%, rgba(255,255,255,.22) 100%);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,1), inset 1px 0 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.25);
  --glass-shadow:0 1px 1px rgba(14,23,38,.03), 0 18px 44px -20px rgba(22,40,70,.34);
  --font:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Names the tool pages already use, mapped onto the brand */
  --surface:rgba(255,255,255,.72); --sunk:rgba(14,23,38,.045);
  --brand:var(--accent); --brand-ink:var(--accent-ink); --brand-soft:var(--accent-soft);
  --link:var(--accent); --red:#B42318;
  --ok:#137A5F; --ok-bg:#DDF3EA; --warn:#8A5A00; --warn-bg:#FBEFD5; --fail:#B42318; --fail-bg:#FBE4E1;
  --sans:var(--font); --cond:var(--font);
  --r:var(--r-sm);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font-family:var(--font);font-size:15px;line-height:1.55;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
}
/* The website's soft color field, fixed behind every page. */
body::before{
  content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36vmax 30vmax at 16% 20%, rgba(96,205,190,.62), transparent 70%),
    radial-gradient(40vmax 32vmax at 88% 16%, rgba(140,155,255,.56), transparent 70%),
    radial-gradient(32vmax 28vmax at 64% 58%, rgba(255,178,150,.42), transparent 70%),
    radial-gradient(38vmax 34vmax at 20% 82%, rgba(125,185,255,.5), transparent 70%),
    radial-gradient(30vmax 26vmax at 90% 90%, rgba(190,160,255,.38), transparent 70%),
    var(--bg);
}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
a{color:var(--accent)}
[hidden]{display:none!important}

/* ---------- Glass ---------- */
.glass{
  background:var(--sheen), var(--glass-panel);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--r-lg);
  box-shadow:var(--glass-hi), var(--glass-shadow);
}

/* ---------- App bar: lockup, app name, navigation ---------- */
.appbar{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  padding:10px 16px 10px 12px;margin:14px 16px 0;border-radius:999px}
.lockup{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--ink)}
.lockup .head{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(14,23,38,.08), 0 6px 16px -8px rgba(14,23,38,.5)}
.lockup .sig{width:104px;height:auto;display:block;flex:none}
.lockup .team{font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;padding-top:3px}
.lockup .appname{font-weight:750;font-size:15px;letter-spacing:-.01em;white-space:nowrap;padding-left:14px;margin-left:4px;border-left:1px solid var(--line-strong)}
.navpills{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.navpills a,.navpills button{font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:999px;border:0;background:none;cursor:pointer;white-space:nowrap}
.navpills a:hover,.navpills button:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.navpills a[aria-current="page"]{color:var(--accent);background:var(--glass-strong);box-shadow:inset 0 1px 0 #fff, 0 2px 8px -4px rgba(22,40,70,.25)}
.navpills a.grab{color:var(--accent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 35%, transparent)}
.navpills a.grab:hover{background:var(--accent-soft);color:var(--accent)}
.navpills .who{font-size:13px;font-weight:650;color:var(--muted);padding:0 6px 0 10px}
@media (max-width:760px){
  .appbar{border-radius:var(--r-lg);margin:10px 10px 0;padding:10px 12px}
  .lockup .team{display:none}
  .lockup .sig{width:86px}
  .navpills .who{display:none}
}

/* ---------- Buttons: the website's pills ---------- */
.btn{font:inherit;font-weight:700;font-size:14px;min-height:42px;padding:0 18px;border-radius:999px;color:var(--ink);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.55));border:1.5px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 0 #fff, 0 2px 8px -4px rgba(22,40,70,.22);transition:transform .1s var(--ease), border-color .15s var(--ease), filter .15s var(--ease)}
.btn:hover{border-color:rgba(14,23,38,.2)}
.btn:active{transform:scale(.98)}
.btn.primary{color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 80%, black);
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 78%, white), var(--accent) 55%, color-mix(in srgb,var(--accent) 85%, black));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.15), 0 8px 22px -10px color-mix(in srgb,var(--accent) 80%, transparent)}
.btn.primary:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;filter:none;pointer-events:none}
.btn .arrow{font-weight:800}

/* ---------- Fields ---------- */
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field>span{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.field small{color:var(--muted);font-size:12px;line-height:1.4}
.field input,.field select,.field textarea,.input{
  width:100%;min-width:0;font:inherit;font-size:14.5px;color:var(--ink);
  background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:12px;padding:9px 12px;
  box-shadow:inset 0 1px 2px rgba(14,23,38,.04);transition:border-color .15s var(--ease), box-shadow .15s var(--ease)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%, transparent)}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}

/* ---------- Photo band, as on the website ---------- */
.photo{position:relative;overflow:hidden;border-radius:var(--r-xl);isolation:isolate;display:flex;align-items:flex-end;color:#fff;
  box-shadow:var(--glass-shadow)}
.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, rgba(14,23,38,0) 20%, rgba(14,23,38,.5) 68%, rgba(14,23,38,.74) 100%)}
.photo .in{padding:22px 26px;max-width:62ch;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.photo .eyebrow{color:#CFEBE8}
.photo h1,.photo h2{color:#fff;margin:0 0 6px;font-weight:750;letter-spacing:-.02em;line-height:1.1}
.photo p{margin:0;color:rgba(255,255,255,.92);font-weight:550}
.photo .credit{position:absolute;right:14px;bottom:8px;font-size:10.5px;color:rgba(255,255,255,.72);font-weight:600}
.photo .credit a{color:inherit}
/* Short bands with text across them: shade from the left so the words stay readable. */
.photo.shade-left::before{background:linear-gradient(90deg, rgba(14,23,38,.78) 0%, rgba(14,23,38,.5) 45%, rgba(14,23,38,.12) 80%, rgba(14,23,38,0) 100%)}
@media (max-width:480px){ .photo{border-radius:var(--r-lg)} .photo .in{padding:18px 18px} .photo.shade-left::before{background:linear-gradient(90deg, rgba(14,23,38,.8), rgba(14,23,38,.55))} }

/* ---------- Status pills and toasts ---------- */
.pill{font-size:11.5px;font-weight:750;border-radius:99px;padding:3px 10px;background:rgba(14,23,38,.06);color:var(--muted);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.fail{background:var(--fail-bg);color:var(--fail)}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }