#blogin { --green: #1FA05E; --green-d: #04353D; --green-mid: #0C6C78; --green-br: #2CC178; --teal: #0C6C78; --teal-d: #04353D; --teal-mid: #1B8A96; --ink-teal: #0A3A42; --gold: #D9942B; --gold-br: #FCA824; --gold-soft: #FBF4E0; --gold-ink: #8A5A10; --cream: #EFEBE2; --card: #FFFFFF; --ink: #172033; --ink-soft: #5E6472; --navy: #13294A; --red: #D64541; --cloud: #CFE0D2; --line: #E8E2D5; --line-d: rgba(224,188,99,.26); --radius: 16px; --radius-lg: 22px; --shadow: 0 14px 34px rgba(4,53,61,.11); --shadow-sm: 0 6px 16px rgba(4,53,61,.08); }
@media (max-width: 499px){#blogin { overflow-y: auto; min-height: 0px !important; }}
@media (max-width: 499px){#blogin .ltop { padding: 20px 24px 8px; }}
@media (max-width: 499px){#blogin .lmark { width: 74px; height: 74px; margin-bottom: 13px; }}
@media (max-width: 499px){#blogin .lmark svg, #blogin .lmark img { width: 60px; height: 60px; }}
@media (max-width: 499px){#blogin .ltitle { font-size: 27px; margin-bottom: 9px; }}
@media (max-width: 499px){#blogin .lready { margin-top: 16px; padding: 8px 16px; }}
@media (max-width: 499px){#blogin .lpitch { margin-top: 14px; font-size: 15px; }}
@media (max-width: 499px){#blogin .lsig b { font-size: 22px; }}
@media (max-width: 499px){#blogin .lbottom { padding: 0 20px calc(22px + env(safe-area-inset-bottom,10px)); }}
@media (max-width: 499px){#blogin .lform-wrap { padding: 18px 20px calc(24px + env(safe-area-inset-bottom,10px)); }}
@media (max-width: 499px) and (max-height: 700px){#blogin .ltop { padding: 12px 24px 4px; }}
@media (max-width: 499px) and (max-height: 700px){#blogin .lmark { width: 60px; height: 60px; margin-bottom: 9px; animation: auto ease 0s 1 normal none running none; }}
@media (max-width: 499px) and (max-height: 700px){#blogin .lmark svg, #blogin .lmark img { width: 48px; height: 48px; }}
@media (max-width: 499px) and (max-height: 700px){#blogin .ltitle { font-size: 23px; }}
@media (max-width: 499px) and (max-height: 700px){#blogin .lpitch { display: none; }}
#blogin .tslNotYou { display: block; width: 100%; text-align: center; background: none; border: 0px; padding: 11px 0px 0px; font-size: 12px; color: rgb(94, 122, 128); text-decoration: underline; cursor: pointer; }
#blogin .tslStayHint { text-align: center; font-size: 10.5px; line-height: 1.45; color: rgb(94, 122, 128); opacity: 0.85; margin: 6px 12px 0px; }
#blogin * { margin: 0px; padding: 0px; box-sizing: border-box; }
#blogin h1, #blogin h2, #blogin h3, #blogin h4 { font-family: Archivo, sans-serif; line-height: 1.08; }
#blogin button { font-family: inherit; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; }
#blogin img { max-width: 100%; display: block; }
#blogin { position: absolute; inset: 0px; z-index: 130; display: flex; flex-direction: column; overflow-y: auto; transition: opacity 0.35s, transform 0.35s; --lbg: linear-gradient(180deg,#FBF7EE 0%,#F2EDE1 42%,#CFE3E6 74%,#9CC6CC 100%); --lblobA: rgba(252,168,36,.20); --lblobB: rgba(12,108,120,.10); --lphoto: none; --lwash: none; --lstrip: none; --lheadline: #0A3A42; --lword: #0C6C78; --leyebrow: #B87C12; --ltag: #5E7A80; --lmuted: #3F6067; --lpill-bg: rgba(255,255,255,.6); --lpill-bd: rgba(252,168,36,.5); --lpill-tx: #8A5A10; --lpill-dot: #E09612; --lcard-pin: rgba(255,255,255,.9); --lcard-pin-bd: rgba(255,255,255,.9); --lcard-pin-sh: 0 6px 18px rgba(4,53,61,.1); --lcard-t: #0A3A42; --lcard-s: #5E7A80; --lchev: rgba(0,0,0,.24); --lfield-bg: rgba(255,255,255,.72); --lfield-bd: rgba(12,108,120,.24); --lfield-tx: #0A3A42; --lfield-ph: rgba(10,58,66,.36); background: var(--lbg); }
#blogin .lphoto { position: absolute; inset: 0px; z-index: 0; background-size: cover; background-position: center top; background-image: var(--lphoto); display: none; }
#blogin .lwash { position: absolute; inset: 0px; z-index: 1; background: var(--lwash); display: none; }
#blogin .lstrip { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 5px; z-index: 1; background: var(--lstrip); display: none; }
#blogin .lblobA { position: absolute; top: -70px; right: -70px; width: 240px; height: 240px; border-radius: 50%; background: var(--lblobA); z-index: 1; }
#blogin .lblobB { position: absolute; bottom: -95px; left: -90px; width: 255px; height: 255px; border-radius: 50%; background: var(--lblobB); z-index: 1; }
#blogin .ltop { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 26px 14px; text-align: center; position: relative; z-index: 2; }
#blogin .lmark { width: 92px; height: 92px; margin-bottom: 19px; border-radius: 50%; background: rgb(255, 255, 255); border: 3px solid var(--gold-br); box-shadow: rgba(0, 0, 0, 0.34) 0px 12px 30px, rgba(252, 168, 36, 0.14) 0px 0px 0px 6px; animation: 3.5s ease-in-out 0s infinite normal none running floatLogo; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#blogin .lmark svg, #blogin .lmark img { width: 74px; height: 74px; display: block; object-fit: contain; padding: 2px; }
#blogin .leyebrow { font-family: Archivo; font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em; color: var(--leyebrow); text-transform: uppercase; margin-bottom: 10px; }
#blogin .ltitle { font-family: Archivo; font-weight: 900; font-size: 33px; color: var(--lheadline); line-height: 1.08; letter-spacing: -0.019em; margin-bottom: 12px; }
#blogin .ltitle i { font-style: normal; color: var(--lword); }
#blogin .ltitle sup { font-size: 13px; vertical-align: super; font-weight: 700; opacity: 0.75; }
#blogin .ltag { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: Archivo; font-weight: 800; font-size: 10.5px; letter-spacing: 0.19em; text-transform: uppercase; color: var(--ltag); }
#blogin .ltag svg { width: 13px; height: 13px; color: rgb(232, 72, 58); animation: 1.7s ease-in-out 0s infinite normal none running beat; }
#blogin .lready { margin-top: 27px; display: inline-flex; align-items: center; gap: 9px; background: var(--lpill-bg); border: 1px solid var(--lpill-bd); border-radius: 30px; padding: 10px 19px; font-family: Archivo; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--lpill-tx); text-transform: uppercase; animation: 2.8s ease-in-out 0s infinite normal none running pulseBar; }
#blogin .lready .rd { width: 7px; height: 7px; border-radius: 50%; background: var(--lpill-dot); animation: 2.8s ease-in-out 0s infinite normal none running pulseDot; }
#blogin .lbottom { padding: 0px 22px 34px; position: relative; z-index: 2; }
#blogin .lchoice-label { font-family: Archivo; font-size: 10.5px; font-weight: 800; letter-spacing: 0.15em; color: var(--lmuted); text-transform: uppercase; text-align: center; margin-bottom: 13px; }
#blogin .lcards { display: flex; flex-direction: column; gap: 12px; }
#blogin .lcard { border-radius: 18px; padding: 14px 15px; display: flex; align-items: center; gap: 13px; text-align: left; transition: 0.18s; width: 100%; }
#blogin .lcard.pw { background: linear-gradient(135deg, rgb(31, 160, 94), rgb(18, 110, 67)); box-shadow: rgba(18, 110, 67, 0.3) 0px 8px 22px; border: 1.5px solid rgba(255, 255, 255, 0.16); }
#blogin .lcard.pw .lc1 { color: rgb(255, 255, 255); }
#blogin .lcard.pw .lc2 { color: rgba(255, 255, 255, 0.74); }
#blogin .lcard.pw .lca { color: rgba(255, 255, 255, 0.5); }
#blogin .lcard.pin { background: var(--lcard-pin); border: 1.5px solid var(--lcard-pin-bd); box-shadow: var(--lcard-pin-sh); }
#blogin .lcard.pin .lc1 { color: var(--lcard-t); }
#blogin .lcard.pin .lc2 { color: var(--lcard-s); }
#blogin .lcard.pin .lca { color: var(--lchev); }
#blogin .lcard .lci { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#blogin .lcard .lci svg { width: 36px; height: 36px; }
#blogin .lct { flex: 1 1 0%; min-width: 0px; }
#blogin .lcard .lc1 { display: block; font-family: Archivo; font-weight: 900; font-size: 15px; letter-spacing: -0.01em; }
#blogin .lcard .lc2 { display: block; font-size: 11px; margin-top: 2px; line-height: 1.38; }
#blogin .lcard .lca { font-size: 20px; flex-shrink: 0; }
#blogin .lform-wrap { display: none; flex: 1 1 0%; flex-direction: column; padding: 24px 22px 30px; position: relative; z-index: 2; }
#blogin .lback { align-self: flex-start; display: flex; align-items: center; gap: 7px; color: var(--lmuted); font-family: Archivo; font-weight: 800; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 0px; margin-bottom: 16px; }
#blogin .lback svg { width: 15px; height: 15px; }
#blogin .lfhd { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
#blogin .lfhd .lci { width: 42px; height: 42px; flex-shrink: 0; }
#blogin .lfhd .lci svg { width: 42px; height: 42px; }
#blogin .lfhd h2 { font-family: Archivo; font-weight: 900; font-size: 23px; color: var(--lheadline); letter-spacing: -0.015em; }
#blogin .lfsub { font-size: 12.5px; color: var(--lmuted); line-height: 1.55; margin-bottom: 20px; }
#blogin .lform { width: 100%; text-align: left; }
#blogin .lform label { display: block; font-family: Archivo; font-size: 10px; font-weight: 800; color: var(--leyebrow); letter-spacing: 0.09em; text-transform: uppercase; margin: 0px 0px 7px 2px; }
#blogin .lform input { width: 100%; border: 1.5px solid var(--lfield-bd); background: var(--lfield-bg); border-radius: 13px; padding: 14px; font-size: 16px; color: var(--lfield-tx); font-family: Inter; outline: none; margin-bottom: 15px; appearance: none; }
#blogin #lPin { font-family: Archivo; font-weight: 900; font-size: 26px; letter-spacing: 0.42em; text-align: center; padding: 15px 14px 15px 24px; }
#blogin .pinnote { display: flex; gap: 10px; align-items: flex-start; background: rgba(252, 168, 36, 0.14); border: 1px solid rgba(252, 168, 36, 0.44); border-radius: 13px; padding: 12px 13px; margin: 2px 0px 16px; }
#blogin .pinnote svg { width: 17px; height: 17px; color: rgb(184, 124, 18); flex-shrink: 0; margin-top: 1px; }
#blogin .pinnote span { font-size: 11.5px; color: rgb(122, 84, 16); line-height: 1.55; }
#blogin .pinnote b { color: rgb(138, 90, 16); }
#blogin .pinnote a { color: rgb(184, 124, 18); font-weight: 800; }
#blogin .lstay { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 2px 0px; color: var(--lmuted); font-size: 11.5px; }
#blogin .sw { width: 40px; height: 23px; border-radius: 12px; background: rgba(120, 130, 135, 0.34); position: relative; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
#blogin .sw.on { background: rgb(31, 160, 94); }
#blogin .lbtn { width: 100%; background: linear-gradient(rgb(255, 193, 99), rgb(252, 168, 36)); border-radius: 999px; padding: 16px; color: rgb(32, 19, 10); font-family: Archivo; font-weight: 900; font-size: 15.5px; margin-top: 16px; box-shadow: rgba(252, 168, 36, 0.4) 0px 10px 26px; }
#blogin .lerr { display: none; background: rgba(214, 69, 65, 0.14); border: 1px solid rgba(214, 69, 65, 0.55); border-radius: 11px; padding: 11px 13px; font-size: 12px; color: rgb(150, 32, 29); margin-bottom: 14px; line-height: 1.5; font-weight: 500; }
#blogin .lfoot { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--lmuted); }
#blogin .lfoot a { color: var(--leyebrow); text-decoration: none; font-weight: 700; }
#blogin .lfoot .sep { opacity: 0.35; padding: 0px 7px; }
#blogin .lfoot .sep { opacity: 0.3; padding: 0px 7px; }
#blogin .lfoot a { color: var(--gold-br); font-weight: 700; text-decoration: none; }
#blogin .lpitch { margin: 20px auto 0px; max-width: 300px; text-align: center; font-family: Archivo, sans-serif; font-weight: 800; font-size: 16.5px; line-height: 1.28; color: rgb(12, 85, 96); letter-spacing: 0.005em; }
#blogin .lpitch span { display: block; margin-top: 7px; font-family: Inter, sans-serif; font-weight: 500; font-size: 12px; line-height: 1.5; color: rgba(20, 45, 50, 0.72); letter-spacing: 0px; }
#blogin .lpitch b { color: rgb(169, 116, 26); }
#blogin .lsig { margin: 9px auto 0px; display: flex; align-items: center; justify-content: center; gap: 5px; font-family: Inter, sans-serif; font-size: 12.5px; font-style: italic; color: rgba(20, 45, 50, 0.72); }
#blogin .lsig b { font-family: "Great Vibes", cursive; font-style: normal; font-weight: 400; font-size: 25px; line-height: 1; color: rgb(12, 85, 96); letter-spacing: 0.01em; }
#blogin .lsig svg { width: 13px; height: 13px; color: rgb(255, 111, 165); margin-left: 2px; animation: 1.7s ease-in-out 0s infinite normal none running beat; }
#blogin .lcontact { display: flex; gap: 11px; margin: 16px 14px 0px; justify-content: center; }
#blogin .lcbtn { flex: 1 1 0%; max-width: 170px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 10px; border-radius: 14px; background: rgb(12, 85, 96); border: 1px solid rgb(12, 85, 96); color: rgb(255, 255, 255); font-family: Archivo, sans-serif; font-weight: 800; font-size: 13.5px; text-decoration: none; -webkit-tap-highlight-color: transparent; box-shadow: rgba(12, 85, 96, 0.3) 0px 6px 16px; }
#blogin .lcbtn svg { width: 16px; height: 16px; color: var(--gold-br,#E6C15A); }
#blogin .lcbtn.gold { background: rgb(230, 193, 90); border-color: rgb(230, 193, 90); color: rgb(12, 59, 66); box-shadow: rgba(201, 162, 75, 0.34) 0px 6px 16px; }
#blogin .lcbtn.gold svg { color: rgb(12, 85, 96); }
#blogin .lcinfo { margin: 13px 14px 0px; text-align: center; font-size: 11.5px; line-height: 1.6; color: rgba(20, 45, 50, 0.74); }
#blogin .lcinfo b { color: rgb(12, 85, 96); font-weight: 700; }
@media (max-width: 499px){#blogin { min-height: 100dvh; }}
#blogin #login, #blogin #sheet { max-width: 480px !important; margin-left: auto !important; margin-right: auto !important; }
#blogin #tslDoorway { margin: 14px 0px 16px; padding: 16px 16px 14px; border-radius: 18px; background: rgb(232, 194, 53); box-shadow: rgba(43, 51, 39, 0.18) 0px 6px 18px; text-align: center; font-family: Inter, system-ui, sans-serif; box-sizing: border-box; }
#blogin #tslDoorway .dw-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(43, 51, 39); margin: 0px 0px 4px; }
#blogin #tslDoorway .dw-title { font-family: Archivo, Inter, sans-serif; font-size: 21px; font-weight: 800; line-height: 1.15; color: rgb(43, 51, 39); margin: 0px 0px 6px; }
#blogin #tslDoorway .dw-sub { font-size: 13px; line-height: 1.4; color: rgb(43, 51, 39); margin: 0px 0px 12px; }
#blogin #tslDoorway a.dw-btn { display: block; padding: 14px 12px; border-radius: 11px; background: rgb(44, 90, 43); font-weight: 800; font-size: 16px; text-decoration: none; letter-spacing: 0.02em; color: rgb(255, 255, 255) !important; }
#blogin { width: 100% !important; min-width: 0px !important; box-sizing: border-box !important; align-items: stretch !important; }
#blogin > .ltop, #blogin > .lbottom, #blogin > .lform-wrap { width: 100% !important; min-width: 0px !important; box-sizing: border-box !important; flex-shrink: 0 !important; }
@media (max-width: 499px){#blogin { left: 0px !important; right: 0px !important; max-width: 100% !important; margin: 0px !important; overflow: hidden auto !important; }}
@media (max-width: 499px){#blogin > .ltop { flex: 0 0 auto !important; }}
#blogin .lform-wrap.on { display: flex; }
#blogin.step2 .ltop, #blogin.step2 .lbottom { display: none; }
#blogin .lerr.on { display: block; }
@keyframes beat { 
#blogin 0%, #blogin 100% { transform: scale(1); }
#blogin 14% { transform: scale(1.22); }
#blogin 28% { transform: scale(1); }
#blogin 42% { transform: scale(1.18); }
}
@keyframes floatLogo { 
#blogin 0%, #blogin 100% { transform: translateY(0px); }
#blogin 50% { transform: translateY(-10px); }
}
@keyframes pulseBar { 
#blogin 0%, #blogin 100% { opacity: 0.75; }
#blogin 50% { opacity: 1; }
}
@keyframes pulseDot { 
#blogin 0%, #blogin 100% { transform: scale(1); }
#blogin 50% { transform: scale(1.45); }
}
/* new app: the sign-in fills the phone screen; on a computer it's a centered phone-width column */
#blogin{position:fixed!important;inset:0;z-index:50;overflow-y:auto;overflow-x:hidden!important}
@media (min-width:500px){#blogin{left:50%!important;right:auto!important;width:430px!important;transform:translateX(-50%)!important;box-shadow:0 0 60px rgba(4,53,61,.18)}body:has(#login:not(.hidden)){background:#EAE3D5}}
#blogin.hidden{display:none!important}
#blogin .dmk{position:relative;overflow:hidden;aspect-ratio:351/374;height:62px;display:block}
#blogin .lmark .dmk img{position:absolute;width:437.6%!important;height:auto!important;max-width:none;left:-82.34%;top:-79.14%}
#blogin button{font:inherit;cursor:pointer;border:0}
#blogin .lsig b{font-family:"Great Vibes",cursive}
#blogin .okmsg{color:#17803d;font-size:13px;margin:4px 0 8px}
#blogin .lform input{width:100%}
header.hero{display:none}