/* THE BRANDED WELCOME (Chase picked "A · Branded welcome", 29 Oct 2026: "The
   first time you log onto the app should be special"). Four phone screens:
   the setup link opens, choose your password, make it yours, your first
   Home. The first three are the dark screens of layouts/first_login; the
   fourth is the real Home, with its first-day greeting and card.

   Plain unlayered rules under .fl-*, like password_peek.css, so they draw the
   same on an old phone that threw Tailwind's layers away. No style="" and no
   inline <style>: the content security policy forbids both.

   The faces: the design's Zilla Slab and DM Sans are not on our host (fonts
   load only from 'self'), so each falls back to the nearest face the phone
   already has: a slab-serif where there is one, then Charter or Georgia. */

.fl-body, .fl-day {
  --fl-bg: #201c17;
  --fl-deep: #161310;
  --fl-card: #27221b;
  --fl-card-2: #2a241c;
  --fl-well: #1a1612;
  --fl-edge: #3d3529;
  --fl-line: #4a4135;
  --fl-rule: #5c5142;
  --fl-text: #f4ebdd;
  --fl-muted: #bdb09b;
  --fl-faint: #9c8f7c;
  --fl-amber: #e0953a;
  --fl-amber-ink: #1d1914;
  --fl-amber-deep: #3a2914;
  --fl-button: #2f2920;
  --fl-slab: "Zilla Slab", Rockwell, "Roboto Slab", "Rockwell Nova", Charter, "Bitstream Charter", Georgia, serif;
  --fl-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.fl-body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--fl-deep); color: var(--fl-text);
           font-family: var(--fl-sans); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
.fl-body *, .fl-body *::before, .fl-body *::after { box-sizing: border-box; }
.fl-screen { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 440px; min-height: 100vh;
             min-height: 100dvh; margin: 0 auto; background: var(--fl-bg); overflow-x: hidden; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .fl-body { padding: 32px 16px; }
  .fl-screen { min-height: 0; border-radius: 28px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); overflow: hidden; }
}

.fl-body a { color: inherit; }
.fl-body :focus-visible { outline: 2px solid var(--fl-amber); outline-offset: 2px; }
.fl-contents { display: contents; }
.fl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- buttons ------------------------------------------------------------ */
.fl-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; padding: 0 18px;
          border: 0; border-radius: 14px; font-family: var(--fl-sans); font-size: 16px; font-weight: 700; line-height: 1.2;
          text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.fl-btn svg { flex: none; margin-left: 10px; }
.fl-btn .fl-btn-lead { margin: 0 10px 0 0; }
.fl-btn-amber { background: var(--fl-amber); color: var(--fl-amber-ink); }
.fl-btn-line { background: transparent; color: var(--fl-text); border: 1.5px solid var(--fl-rule); }
.fl-btn-tall { min-height: 58px; border-radius: 16px; font-size: 17px; }
.fl-btn-big { min-height: 60px; border-radius: 16px; font-family: var(--fl-slab); font-size: 23px; letter-spacing: 0.01em; }
.fl-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 0;
            background: transparent; color: var(--fl-muted); font-family: var(--fl-sans); font-size: 15px; font-weight: 600;
            cursor: pointer; text-decoration: none; }
.fl-quiet svg { margin-left: 8px; }

.fl-alert { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #4a1d14; color: #ffe1d6; font-size: 15px; font-weight: 600; }
.fl-notice { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #1f3a24; color: #dcf5df; font-size: 15px; font-weight: 600; }

/* ---- 1. the setup link opens ------------------------------------------- */
.fl-hero-logo { display: flex; justify-content: center; padding: 60px 28px 0; }
.fl-hero-logo img { display: block; width: 272px; max-width: 80%; height: auto; }
.fl-howdy { display: flex; flex-direction: column; align-items: center; padding: 38px 28px 0; text-align: center; }
.fl-eyebrow-row { display: flex; align-items: center; justify-content: center; }
.fl-eyebrow-row svg { flex: 0 1 auto; min-width: 18px; }
.fl-eyebrow { margin: 0 10px; color: var(--fl-amber); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.2em;
              text-transform: uppercase; white-space: nowrap; }
/* "Welcome to the outfit" stays one line between its two runs of wire on a narrow phone. */
@media (max-width: 380px) { .fl-eyebrow-row .fl-eyebrow { margin: 0 8px; letter-spacing: 0.14em; } }
.fl-howdy-title { margin: 16px 0 0; font-family: var(--fl-slab); font-size: 68px; font-weight: 700; line-height: 0.95; letter-spacing: -0.015em; color: var(--fl-text); }
.fl-howdy-title.is-long { font-size: 52px; }
.fl-howdy-title.is-longer { font-size: 40px; }
.fl-howdy-lead { max-width: 312px; margin: 18px 0 0; color: var(--fl-muted); font-size: 17px; line-height: 1.5; }
.fl-howdy-lead strong, .fl-strong { color: var(--fl-text); font-weight: 600; }
.fl-hero-fence { display: block; flex: none; width: 100%; height: auto; margin-top: 18px; }
.fl-hero-foot { flex: 1; display: flex; flex-direction: column; padding: 22px 28px 18px; background: var(--fl-deep); }
.fl-hero-foot form { margin: 0; }
.fl-hero-note { margin: 12px 0 0; text-align: center; color: var(--fl-faint); font-size: 14px; line-height: 20px; }
.fl-hero-small { margin: 14px 0 0; text-align: center; color: var(--fl-faint); font-size: 13px; line-height: 18px; }
.fl-not-me { margin-top: auto; padding-top: 18px; text-align: center; color: var(--fl-muted); font-size: 14px; }
.fl-not-me summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; cursor: pointer; list-style: none;
                     font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.fl-not-me summary::-webkit-details-marker { display: none; }
.fl-not-me p { margin: 4px auto 0; max-width: 300px; line-height: 1.45; }
.fl-returning { margin-top: 16px; text-align: center; }
.fl-returning summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--fl-muted); font-size: 14px; }
.fl-returning a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fl-amber); font-weight: 600; }

/* ---- the top bar and the three-step rail (screens 2 and 3) ------------- */
/* Three columns, the outer two the same width, so the mark stays centred
   whether the right is a 44px space or the crew's wider language switch. */
.fl-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; padding: 12px 12px 0; }
.fl-back, .fl-top-space { flex: none; width: 44px; height: 44px; }
.fl-top > :last-child { justify-self: end; }
.fl-lang-form { margin: 0; }
.fl-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px;
           padding: 0 10px; border: 1px solid var(--fl-amber); border-radius: 12px; background: transparent;
           color: var(--fl-text); font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap;
           overflow-wrap: normal; cursor: pointer; }
.fl-lang:hover { background: var(--fl-button); }
.fl-lang:focus-visible { outline: 2px solid var(--fl-amber); outline-offset: 2px; }
.fl-back { display: flex; align-items: center; justify-content: center; border: 1px solid var(--fl-line); border-radius: 22px; color: var(--fl-text); text-decoration: none; }
.fl-top img { display: block; width: 104px; height: auto; }
.fl-rail { display: flex; flex-direction: column; padding: 18px 28px 0; }
.fl-rail-bar { display: flex; align-items: center; }
.fl-rail-post { flex: none; width: 6px; height: 22px; border-radius: 2px; background: var(--fl-line); }
.fl-rail-wire { flex: 1; height: 4px; border-top: 2px solid var(--fl-line); border-bottom: 2px solid var(--fl-line); }
.fl-rail-post.is-on { background: var(--fl-amber); }
.fl-rail-wire.is-on { border-color: var(--fl-amber); }
.fl-rail-words { display: flex; margin: 10px 0 0; padding: 0; list-style: none; color: var(--fl-faint); font-size: 13px; font-weight: 600; line-height: 16px; text-align: center; }
.fl-rail-words li { flex: 1; display: flex; align-items: center; justify-content: center; }
.fl-rail-words li.is-done { color: var(--fl-muted); }
.fl-rail-words li.is-now { color: var(--fl-amber); }
.fl-rail-words svg { margin-right: 4px; }

.fl-main { flex: 1; display: flex; flex-direction: column; padding: 30px 28px 18px; }
.fl-title { margin: 0; font-family: var(--fl-slab); font-size: 46px; font-weight: 700; line-height: 1.0; letter-spacing: -0.01em; color: var(--fl-text); }
.fl-lead { margin: 12px 0 0; color: var(--fl-muted); font-size: 16px; line-height: 1.5; }
.fl-foot { margin-top: auto; padding-top: 24px; }
.fl-foot-center { display: flex; justify-content: center; }

/* ---- 2. choose your password ------------------------------------------- */
.fl-form { flex: 1; display: flex; flex-direction: column; margin: 0; padding: 34px 28px 28px; }
.fl-badge { margin-top: 24px; padding: 5px; border-radius: 16px; background: var(--fl-card-2); }
.fl-badge-in { display: flex; align-items: center; padding: 12px 14px; border: 1px dashed #6b5f4e; border-radius: 12px; }
.fl-initial { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px;
              background: var(--fl-amber-deep); color: var(--fl-amber); font-family: var(--fl-slab); font-size: 22px; font-weight: 700; }
.fl-badge-words { flex: 1; min-width: 0; margin-left: 14px; }
.fl-badge-name { margin: 0; font-family: var(--fl-slab); font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--fl-text); }
.fl-badge-line { margin: 2px 0 0; color: var(--fl-muted); font-size: 14px; line-height: 1.4; }
.fl-badge svg { flex: none; margin-left: 10px; }
.fl-label { display: block; margin-top: 24px; color: var(--fl-text); font-size: 14px; font-weight: 600; line-height: 20px; }
.fl-pw .kf-peek { position: relative; display: block; margin-top: 10px; }
.fl-pw .kf-peek > input { display: block; width: 100%; height: 60px; padding: 0 104px 0 18px; border: 2px solid var(--fl-line); border-radius: 14px;
                          background: #15120e; color: var(--fl-text); font-family: var(--fl-sans); font-size: 20px; letter-spacing: 0.08em; outline: none; }
.fl-pw .kf-peek > input:focus { border-color: var(--fl-amber); }
.fl-pw .kf-peek-toggle { position: absolute; top: 8px; right: 8px; min-width: 0; min-height: 44px; height: 44px; margin: 0; padding: 0 12px 0 36px;
                         border: 0; border-radius: 10px; background: var(--fl-button); color: var(--fl-text); font-family: var(--fl-sans); font-size: 14px; font-weight: 600; }
.fl-pw .kf-peek-toggle::before { content: ""; position: absolute; left: 11px; top: 12px; width: 20px; height: 20px;
  background: no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4EBDD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.fl-pw .kf-peek-toggle[aria-pressed="true"] { background: var(--fl-amber-deep); color: var(--fl-amber); }
.fl-strength { display: flex; align-items: center; margin-top: 12px; min-height: 20px; color: var(--fl-muted); font-size: 14px; line-height: 20px; }
.fl-strength-bars { flex: none; display: flex; margin-right: 10px; }
.fl-strength-bars span { width: 22px; height: 4px; margin-right: 4px; border-radius: 2px; background: var(--fl-line); }
.fl-strength[data-level="1"] .fl-strength-bars span:nth-child(-n+1),
.fl-strength[data-level="2"] .fl-strength-bars span:nth-child(-n+2),
.fl-strength[data-level="3"] .fl-strength-bars span { background: var(--fl-amber); }
.fl-strength[data-level="0"] .fl-strength-bars { display: none; }
.fl-strength strong { color: var(--fl-text); font-weight: 600; }
.fl-rule { margin: 8px 0 0; color: var(--fl-faint); font-size: 13px; line-height: 1.45; }
.fl-stay { display: flex; align-items: center; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--fl-edge); border-radius: 16px; background: var(--fl-card); }
.fl-ring { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--fl-amber);
           border-radius: 22px; color: var(--fl-amber); }
.fl-stay-words { flex: 1; min-width: 0; margin-left: 14px; }
.fl-stay-title { margin: 0; color: var(--fl-text); font-size: 16px; font-weight: 600; line-height: 22px; }
.fl-stay-body { margin: 2px 0 0; color: var(--fl-muted); font-size: 14px; line-height: 1.4; }
.fl-form .fl-foot { padding-top: 28px; }

/* ---- 3. make it yours -------------------------------------------------- */
.fl-cards { display: flex; flex-direction: column; margin: 22px 0 0; padding: 0; list-style: none; }
.fl-cards > li + li { margin-top: 12px; }
.fl-card { display: flex; align-items: center; padding: 14px 16px; border: 1px solid var(--fl-edge); border-radius: 16px; background: var(--fl-card); }
.fl-card.is-now { flex-direction: column; align-items: stretch; padding: 16px; border: 1.5px solid var(--fl-amber); border-radius: 18px; }
.fl-card-head { display: flex; align-items: flex-start; }
.fl-card.is-now .fl-card-head { align-items: flex-start; }
.fl-tile { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--fl-button); color: var(--fl-muted); }
.fl-card.is-now .fl-tile { background: var(--fl-amber-deep); color: var(--fl-amber); }
.fl-card.is-done .fl-tile { background: var(--fl-amber-deep); color: var(--fl-amber); }
.fl-card-words { flex: 1; min-width: 0; margin-left: 14px; }
.fl-now { margin: 0; color: var(--fl-amber); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; }
.fl-card-title { margin: 0; color: var(--fl-text); font-size: 16px; font-weight: 600; line-height: 22px; }
.fl-card.is-now .fl-card-title { margin-top: 2px; font-size: 17px; line-height: 1.3; }
.fl-card-body { margin: 2px 0 0; color: var(--fl-muted); font-size: 13px; line-height: 1.4; }
.fl-card.is-now .fl-card-body { margin-top: 3px; font-size: 14px; }
.fl-pill { flex: none; margin-left: 10px; padding: 5px 10px; border: 1px solid var(--fl-line); border-radius: 999px; color: var(--fl-faint); font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; }
.fl-change { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; padding: 0 10px; color: var(--fl-amber); font-size: 14px; font-weight: 600; text-decoration: none; }
.fl-card-acts { display: flex; margin-top: 14px; }
.fl-card-acts .fl-btn { flex: 1; }
.fl-card-acts .fl-btn + .fl-btn { flex: none; width: auto; margin-left: 10px; padding: 0 22px; }
.fl-card-note { margin: 12px 0 0; color: var(--fl-faint); font-size: 13px; line-height: 1.45; }
.fl-face { position: relative; flex: none; width: 52px; height: 52px; }
.fl-face img, .fl-face .fl-face-blank { display: block; width: 52px; height: 52px; border: 2px solid var(--fl-amber); border-radius: 26px; object-fit: cover; background: #6b5238; }
.fl-face .fl-face-blank { display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.fl-face-check { position: absolute; right: -3px; bottom: -3px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
                 border: 2px solid var(--fl-card); border-radius: 11px; background: var(--fl-amber); }
.fl-file { position: relative; display: block; margin-top: 14px; }
.fl-file input[type=file] { display: block; width: 100%; min-height: 48px; padding: 12px; border: 1px dashed var(--fl-rule); border-radius: 14px;
                            background: var(--fl-well); color: var(--fl-muted); font-family: var(--fl-sans); font-size: 14px; }
.fl-file input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 0; border-radius: 10px; background: var(--fl-button);
                                                  color: var(--fl-text); font-family: var(--fl-sans); font-weight: 600; }
.fl-handoff { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--fl-well); color: var(--fl-muted); font-size: 14px; line-height: 1.45; }
.fl-handoff a { color: var(--fl-amber); }

/* The shared Add to Home Screen steps (shared/_add_to_home_screen_steps), on the dark card. */
.fl-a2hs .kf-a2hs > section { margin-top: 14px; padding: 8px 12px 4px; border-radius: 12px; background: var(--fl-well); }
.fl-a2hs .kf-a2hs-os { margin: 6px 0 2px; color: var(--fl-text); font-size: 14px; font-weight: 700; }
.fl-a2hs .kf-a2hs ol { margin: 0; padding: 0 0 0 1.4rem; color: var(--fl-muted); font-size: 15px; line-height: 1.4; }
.fl-a2hs .kf-a2hs li { margin: 8px 0; padding-left: 2px; }
.fl-a2hs .kf-a2hs li::marker { color: var(--fl-amber); font-weight: 700; }
.fl-a2hs .kf-a2hs svg { display: inline-block; height: 38px; width: auto; max-width: 100%; margin: 6px 6px 0 0; vertical-align: middle; }
.fl-a2hs .f-soft { fill: var(--fl-button); }
.fl-a2hs .f-card { fill: #241f19; }
.fl-a2hs .f-line { fill: var(--fl-line); }
.fl-a2hs .f-ink { fill: var(--fl-text); }
.fl-a2hs .f-none { fill: none; }
.fl-a2hs .s-edge { stroke: var(--fl-rule); }
.fl-a2hs .s-ink { stroke: var(--fl-text); }
.fl-a2hs .s-ios { stroke: #4aa3ff; }

/* ---- 4. the first Home ------------------------------------------------- */
.fl-day-eyebrow { margin: 0; color: #7a3e12; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; }
.fl-day-title { margin: 6px 0 0; font-family: "Zilla Slab", Rockwell, "Roboto Slab", "Rockwell Nova", Charter, "Bitstream Charter", Georgia, serif;
                font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: #201c17; }
.fl-day-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.fl-day-head h2 { margin: 0; color: #5f5446; font-size: 13px; font-weight: 700; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; }
.fl-day { position: relative; padding-bottom: 20px; font-family: var(--fl-sans); }
.fl-day-behind, .fl-day-behind-2 { position: absolute; height: 60px; border-radius: 22px; }
.fl-day-behind { left: 13px; right: 13px; bottom: 10px; background: #e9dece; }
.fl-day-behind-2 { left: 26px; right: 26px; bottom: 0; background: #ddd0bd; }
.fl-day-card { position: relative; display: flex; flex-direction: column; padding: 20px; border-radius: 24px; background: var(--fl-bg); color: var(--fl-text); }
.fl-day-card svg.fl-day-art { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.fl-day-kind { margin: 14px 0 0; color: var(--fl-amber); font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.16em; text-transform: uppercase; }
.fl-day-card h3 { margin: 8px 0 0; font-family: var(--fl-slab); font-size: 26px; font-weight: 600; line-height: 1.12; color: var(--fl-text); }
.fl-day-card p.fl-day-body { margin: 8px 0 0; color: var(--fl-muted); font-size: 15px; line-height: 1.45; }
.fl-day-card .fl-btn { margin-top: 10px; color: var(--fl-text); }
.fl-day-card .fl-btn-amber { margin-top: 18px; min-height: 52px; color: var(--fl-amber-ink); }
.fl-day-card .fl-btn svg { margin: 0 10px 0 0; }
.fl-alerts-off { display: flex; align-items: center; margin-top: 16px; padding: 12px 12px 12px 14px; border: 1px solid #e2d7c6; border-radius: 18px;
                 background: #fffdf8; font-family: var(--fl-sans); color: #201c17; }
.fl-alerts-off .fl-bell { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; background: #f1e6d6; color: #7a3e12; }
.fl-alerts-off-words { flex: 1; min-width: 0; margin-left: 12px; }
.fl-alerts-off-words p { margin: 0; }
.fl-alerts-off-title { font-size: 15px; font-weight: 600; line-height: 20px; }
.fl-alerts-off-body { margin-top: 1px; color: #5f5446; font-size: 13px; line-height: 1.4; }
.fl-alerts-off a { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-left: 10px; padding: 0 16px; border-radius: 12px;
                   background: #201c17; color: #f4ebdd; font-size: 14px; font-weight: 700; text-decoration: none; }
.fl-yours-form { flex: 1; display: flex; flex-direction: column; margin: 0; }
.fl-card [data-phone-sign-in-address] { margin-top: 8px; color: var(--fl-muted); font-size: 14px; }
.fl-card [data-phone-sign-in-address] .text-muted { color: var(--fl-faint); }
.fl-card [data-phone-sign-in-address] a { color: var(--fl-amber); font-weight: 600; }
