/* B&G auth pages: sign in, sign up, forgot, verify, two-step, unsubscribe, public errors.
   One look for every logged-out screen. Started from the owner-approved sign-in redesign of
   2026-11-01 (landing_pages/bg-revamp-2026-11/login); the first block below is that page's
   styles, moved here unchanged. Everything is scoped under .bgl and sets its own colours, so
   the html.dark rules in app.css cannot repaint these pages.
   Linked from web/templates/auth/_bgl_head.html with ?v={{ static_version() }}. */

/* ── 1. The sign-in page's styles (unchanged) ───────────────────────────── */
.bgl{--navy:#001f3f;--deep:#00152a;--blue:#0074d9;--gold:#d4a843;--ink:#0b1b33;--mute:#5b6779;--line:#e3e7ee;--mist:#f4f6f9;
  --sans:"Inter Tight",Inter,system-ui,sans-serif;--serif:"Instrument Serif",Georgia,serif;--ease:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:#fff;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;z-index:1}
.bgl *{box-sizing:border-box}
.bgl a{color:inherit}
.bgl em{font-family:var(--serif);font-style:italic;font-weight:400}
.bgl .panel{position:relative;overflow:hidden;background:var(--deep);color:#fff;min-height:100vh}
.bgl .panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;transform:scale(1.08);animation:bglSettle 2.4s var(--ease) forwards}
@keyframes bglSettle{to{transform:scale(1)}}
.bgl .panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,15,32,.25) 0%,rgba(0,15,32,.05) 40%,rgba(0,15,32,.82) 100%)}
.bgl .panel-top{position:absolute;z-index:2;top:32px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center}
.bgl .logo{font-size:22px;font-weight:600;letter-spacing:-.02em;text-decoration:none;color:#fff}
.bgl .logo em{font-size:25px}
.bgl .back{font-size:14px;text-decoration:none;color:#fff;opacity:.85}.bgl .back:hover{opacity:1}
.bgl .panel-copy{position:absolute;z-index:2;left:40px;right:40px;bottom:44px;max-width:520px;opacity:0;transform:translateY(16px);animation:bglRise 1s var(--ease) .3s forwards}
@keyframes bglRise{to{opacity:1;transform:none}}
.bgl .panel-copy h2{margin:0;font-size:clamp(34px,3.4vw,52px);font-weight:400;letter-spacing:-.04em;line-height:1.04;color:#fff}
.bgl .panel-copy ul{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px;color:rgba(255,255,255,.85)}
.bgl .panel-copy li{display:flex;gap:10px;align-items:center}
.bgl .panel-copy li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.bgl .side{display:flex;flex-direction:column;justify-content:center;padding:60px clamp(28px,6vw,96px);background:#fff}
.bgl .box{width:100%;max-width:420px;margin:0 auto;opacity:0;transform:translateY(14px);animation:bglRise .9s var(--ease) .15s forwards}
.bgl .kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0}
.bgl h1{margin:14px 0 0;font-size:clamp(40px,3.6vw,56px);font-weight:400;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.bgl .sub{margin:12px 0 0;color:var(--mute);font-size:15px;line-height:1.5}
.bgl .tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:32px;background:var(--mist);border-radius:999px;padding:4px}
.bgl .tabs button{position:relative;z-index:1;height:42px;border:0;background:none;font:500 14px var(--sans);color:var(--mute);cursor:pointer;border-radius:999px;transition:color .3s}
.bgl .tabs button.on{color:var(--ink)}
.bgl .tabs .pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:#fff;border-radius:999px;box-shadow:0 1px 3px rgba(0,15,32,.12);transition:transform .45s var(--ease)}
.bgl .tabs.magic .pill{transform:translateX(100%)}
.bgl form{margin-top:26px}
.bgl .field{margin-bottom:18px}
.bgl label.lbl{display:block;font-size:13px;font-weight:500;color:var(--mute);margin-bottom:8px}
.bgl input[type=email],.bgl input[type=password],.bgl input[type=text]{width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:10px;font:400 16px var(--sans);color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.bgl input:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 4px rgba(0,31,63,.08)}
.bgl .pw{position:relative}
.bgl .pw button{position:absolute;right:8px;top:8px;height:36px;padding:0 10px;border:0;background:none;font:500 13px var(--sans);color:var(--mute);cursor:pointer}
.bgl .row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 22px;font-size:14px}
.bgl .check{display:flex;align-items:center;gap:8px;color:var(--mute);cursor:pointer}
.bgl .check input{width:16px;height:16px;accent-color:var(--navy)}
.bgl .row a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.bgl .cf-turnstile{margin-bottom:20px}
.bgl .btn{width:100%;height:52px;border:0;border-radius:10px;background:var(--navy);color:#fff;font:600 16px var(--sans);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background-color .3s,transform .15s}
.bgl .btn:hover{background:var(--blue)}
.bgl .btn:active{transform:scale(.99)}
.bgl .note{margin:0 0 18px;font-size:14px;color:var(--mute);line-height:1.5}
.bgl .msg{margin-top:22px;padding:14px 16px;border-radius:10px;font-size:14px;line-height:1.45}
.bgl .msg.err{background:#fdecec;color:#8a1c1c}
.bgl .msg.ok{background:#e9f6ee;color:#14532d}
.bgl .msg.warn{background:#fff6e0;color:#7a4d00}
.bgl .msg b{display:block}
.bgl .help{margin-top:14px;font-size:13px;color:var(--mute)}
.bgl .help a{color:var(--ink)}
.bgl .foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--mute);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bgl .foot a{color:var(--ink);font-weight:500}
@media (max-width:900px){
  .bgl{grid-template-columns:1fr;position:static;min-height:100vh}
  .bgl .panel{min-height:0;height:34vh;min-height:240px}
  .bgl .panel-copy ul{display:none}
  .bgl .panel-copy h2{font-size:30px}
  .bgl .panel-top{top:20px;left:20px;right:20px}.bgl .panel-copy{left:20px;right:20px;bottom:22px}
  .bgl .side{padding:36px 20px 60px;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.bgl .panel img,.bgl .panel-copy,.bgl .box{animation:none;opacity:1;transform:none}}
[x-cloak]{display:none!important}

/* ── 2. Shared additions for the other auth pages (2026-11-02) ──────────── */
/* More field types, same look as the sign-in inputs. */
.bgl input[type=tel],.bgl select,.bgl .inp{width:100%;height:52px;padding:0 16px;border:1px solid var(--line);border-radius:10px;font:400 16px var(--sans);color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.bgl select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6779' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center}
.bgl select option,.bgl select optgroup{color:var(--ink);background:#fff}
.bgl select:focus,.bgl .inp:focus{outline:0;border-color:var(--navy);box-shadow:0 0 0 4px rgba(0,31,63,.08)}
.bgl .inp.text-xl{font-size:22px;font-weight:600;letter-spacing:.12em;text-align:center}
.bgl .inp.code{font-size:24px;font-weight:600;letter-spacing:.18em;text-align:center}
.bgl .field .more{margin-top:10px}
.bgl .hint{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--mute)}
.bgl .check.small{margin-top:6px;min-height:40px;font-size:13px;line-height:1.4}
.bgl .check.small input{flex:none}
.bgl .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
@media (max-width:560px){.bgl .grid2{grid-template-columns:minmax(0,1fr)}}
.bgl .fine{margin:16px 0 0;font-size:12.5px;line-height:1.6;color:var(--mute)}
.bgl .fine a,.bgl .ul{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.bgl .chip{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:12px 14px;border-radius:10px;background:var(--mist);font-size:14px;line-height:1.45;color:var(--ink)}
.bgl .chip::before{content:"";width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--gold);flex:none}
.bgl .chip code{font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace}
.bgl a.btn{text-decoration:none}
.bgl .btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.bgl .btn.ghost:hover{background:var(--mist);box-shadow:inset 0 0 0 1px var(--navy)}
.bgl .btn.sm{width:auto;height:44px;padding:0 16px;font-size:14px;font-weight:500}
.bgl .btn:disabled{cursor:not-allowed}
.bgl .linkbtn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0;border:0;background:none;font:500 14px var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
.bgl .linkbtn:hover{text-decoration-color:var(--ink)}
.bgl .links{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;margin-top:14px;font-size:14px}
.bgl .links.center{justify-content:center;flex-direction:column;align-items:center}
.bgl .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bgl .actions .btn{flex:1 1 150px;width:auto}
.bgl .ic{width:52px;height:52px;margin-bottom:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mist);color:var(--navy)}
.bgl .ic svg{width:24px;height:24px}
.bgl .ic.err{background:#fdecec;color:#8a1c1c}
.bgl .ic.ok{background:#e9f6ee;color:#14532d}
.bgl .addr{display:block;margin-top:6px;color:var(--ink);font-weight:600;word-break:break-all}
.bgl .rule{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.bgl .rule form{margin-top:4px}
.bgl ol.steps{margin:22px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.55;color:var(--ink)}
.bgl .muted{color:var(--mute)}
.bgl .ok-text{display:flex;align-items:center;gap:8px;color:#14532d;font-size:14px;font-weight:500}
.bgl .ok-text svg{width:20px;height:20px}

/* Single-column pages (no photo panel): a slim top bar with the wordmark, form below. */
.bgl.solo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;align-content:start}
.bgl .topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px clamp(20px,4vw,48px);border-bottom:1px solid var(--line)}
.bgl .topbar .logo{color:var(--ink)}
.bgl .topbar .back{color:var(--mute);opacity:1;min-height:40px;display:inline-flex;align-items:center}
.bgl .topbar .back:hover{color:var(--ink)}
.bgl.solo .side{justify-content:flex-start;padding:clamp(40px,9vh,104px) 20px 72px}
.bgl.solo .box{max-width:440px}
.bgl .box.wide{max-width:600px}
.bgl.solo h1{font-size:clamp(38px,3.4vw,52px)}

/* Long forms (sign up): the photo stays put while the form scrolls. */
.bgl.tall .panel{position:sticky;top:0;height:100vh;min-height:0;align-self:start}
.bgl.tall .side{justify-content:flex-start;padding-top:72px;padding-bottom:72px}
.bgl.tall .box{max-width:520px}

@media (max-width:900px){
  .bgl.tall .panel{position:relative;height:30vh;min-height:220px}
  .bgl.tall .side{padding:32px 20px 60px}
  .bgl .topbar{padding:18px 20px}
  .bgl.solo .side{padding:36px 20px 60px}
}

/* app.css paints every input navy in dark mode (html.dark input{...!important}). These pages are
   white in both modes, so their fields stay white too; more specific + !important wins. */
html.dark .bgl input:not([type=checkbox]):not([type=radio]),html.dark .bgl select,html.dark .bgl textarea{background-color:#fff!important;color:var(--ink)!important;border-color:var(--line)!important}
html.dark .bgl input:focus,html.dark .bgl select:focus,html.dark .bgl textarea:focus{border-color:var(--navy)!important;box-shadow:0 0 0 4px rgba(0,31,63,.08)!important}
html.dark .bgl input::placeholder{color:#9ca3af!important}
html.dark .bgl *:focus-visible:not(input):not(textarea):not(select){outline-color:var(--blue)}

/* Two-step screens: the shared step markup carries dashboard classes that html.dark repaints.
   On this white page they keep light-page colours in both modes. */
.bgl .ts-adapt{color:var(--ink)!important}
.bgl .ts-adapt-muted{color:var(--mute)!important}
.bgl .ts-key-text{color:var(--navy)!important}
.bgl .ts-box{border:1px solid var(--line);border-radius:12px;padding:20px}
.bgl .ts-codes-box,html.dark .bgl .ts-codes-box,html.dark .bgl .ts-codes-box span{background:var(--mist)!important;border-color:var(--line)!important;color:var(--ink)!important}
.bgl .ts-btn-disabled:disabled,html.dark .bgl .ts-btn-disabled:disabled{background:var(--line)!important;color:var(--mute)!important}
.bgl .never{display:flex;align-items:center;justify-content:center;gap:6px;margin:18px 0 0;font-size:12.5px;color:var(--mute);text-align:center}
.bgl .never svg{width:16px;height:16px;flex:none}
.bgl .logout{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:14px;color:var(--ink);text-decoration:none}
.bgl .logout svg{width:16px;height:16px}
.bgl .logout:hover{text-decoration:underline;text-underline-offset:3px}
.bgl .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.bgl .ts-box form{margin-top:0}

/* Tap targets of at least 40px on the pages added here (the sign-in page keeps its approved sizes). */
.bgl .topbar .logo,.bgl.tall .panel-top a,.bgl.tall .foot a,.bgl.solo .foot a{min-height:40px;display:inline-flex;align-items:center;gap:.25em}
.bgl.tall .foot{align-items:center}
@media (max-width:900px){.bgl.tall .panel img{object-position:50% 8%}}