@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');
:root{--bg:#f8f5ef;--paper:#fffdf9;--ink:#222a22;--muted:#667063;--line:#e4e2d8;--green:#285a3d;--accent:#e9a943;--radius:20px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;line-height:1.5}a{color:var(--green);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}button{cursor:pointer}.container{width:min(1100px,calc(100% - 32px));margin-inline:auto}.site-header{background:var(--paper);border-bottom:1px solid var(--line)}.header-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-family:'Fraunces',serif;font-size:1.55rem;color:var(--ink);white-space:nowrap}.brand strong{color:var(--green)}.site-header nav{display:flex;align-items:center;gap:24px}.site-header nav a,.text-button{font-size:.9rem;font-weight:700;color:var(--ink)}.inline{display:inline}.text-button{border:0;background:none;padding:0}.button{border:0;border-radius:999px;padding:14px 24px;display:inline-flex;justify-content:center;align-items:center;font-weight:700;min-height:48px}.button:hover{text-decoration:none}.primary{background:var(--green);color:#fff}.secondary{background:#e7ede5;color:var(--green)}.auth-card,.onboarding-card{width:min(520px,calc(100% - 32px));margin:64px auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,5vw,48px)}h1,h2,h3{font-family:'Fraunces',serif;line-height:1.15;letter-spacing:-.025em}h1{font-size:clamp(2.15rem,5vw,3.4rem);margin:.25em 0}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--green);font-size:.72rem;font-weight:700}.muted{color:var(--muted)}.lead{font-size:1.2rem;color:var(--muted)}.step,.badge{display:inline-block;background:#e8eee5;color:var(--green);border-radius:999px;padding:5px 12px;font-size:.75rem;font-weight:700}.auth-card form,.onboarding-card form{margin-top:24px}.auth-card form p,.onboarding-card form p{display:grid;gap:6px}.auth-card label,.onboarding-card label{font-size:.88rem;font-weight:700}.auth-card input,.onboarding-card input,.onboarding-card select,.onboarding-card textarea{width:100%;border:1px solid #c9d0c6;border-radius:12px;background:#fff;padding:12px 14px;min-height:46px}.auth-card input:focus,.onboarding-card input:focus,.onboarding-card select:focus,.onboarding-card textarea:focus{outline:2px solid #77a583;outline-offset:1px}.auth-card .button,.onboarding-card .button{margin-top:12px}.errorlist{color:#a4392b;margin:4px 0;padding-left:20px}.page{padding-block:40px 80px}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.card-list{display:grid;gap:16px}.surface{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}.surface h2{font-size:1.4rem;margin:0 0 8px}.flash-list{margin-top:16px}.flash{background:#e8eee5;border-radius:12px;padding:12px 16px}.mobile-nav{display:none}@media(max-width:700px){body{padding-bottom:70px}.site-header nav{display:none}.header-inner{min-height:60px}.mobile-nav{position:fixed;bottom:0;inset-inline:0;display:flex;justify-content:space-around;align-items:center;height:64px;background:var(--paper);border-top:1px solid var(--line);z-index:20}.mobile-nav a{font-size:.8rem;font-weight:700;color:var(--ink)}.auth-card,.onboarding-card{margin:24px auto}.page-heading{align-items:flex-start;flex-direction:column}}

/* Mobile navigation: four primary tabs + a hamburger for everything else. */
[x-cloak]{display:none!important}
body.nav-open{overflow:hidden}
.header-actions{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);padding:0}
.nav-toggle:hover{background:#f1ede3}
.nav-toggle svg{width:22px;height:22px}
.nav-overlay{position:fixed;inset:0;z-index:88;background:rgba(18,26,20,.45);backdrop-filter:blur(2px)}
.nav-panel{position:fixed;top:0;inset-inline-end:0;bottom:0;z-index:90;display:flex;flex-direction:column;width:min(330px,88vw);background:var(--paper);box-shadow:-24px 0 60px rgba(18,26,20,.22);padding:22px 20px;overflow-y:auto;overscroll-behavior:contain}
html[dir="rtl"] .nav-panel{box-shadow:24px 0 60px rgba(18,26,20,.22)}
.nav-panel-enter{transition:transform .26s cubic-bezier(.22,.8,.3,1),opacity .26s ease}
.nav-panel-enter-start{opacity:0;transform:translateX(18px)}
.nav-panel-enter-end{opacity:1;transform:translateX(0)}
html[dir="rtl"] .nav-panel-enter-start{transform:translateX(-18px)}
.nav-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.nav-panel-head .eyebrow{margin:0}
.nav-panel-head h2{font-size:1.7rem;margin:3px 0 0}
.nav-panel-close{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:#fffdf9;color:var(--ink);font-size:1.35rem;line-height:1;flex:none}
.nav-panel-close:hover{background:#f1ede3}
.site-header .nav-panel-links{display:flex;flex-direction:column;align-items:stretch;gap:3px;margin-top:14px}
.site-header .nav-panel-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 11px;border-radius:11px;font-size:.94rem;font-weight:700;color:var(--ink)}
.site-header .nav-panel-links a:hover{background:#eef3e9;color:var(--green);text-decoration:none}
.nav-count{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#e8eee5;color:var(--green);font-size:.72rem;font-weight:800}
.nav-panel-logout{margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.nav-panel-logout button{width:100%;border:1px solid #e2d6c4;border-radius:11px;background:#fbf6ec;color:#8a4b2a;padding:12px;font-size:.9rem;font-weight:800}
.nav-panel-logout button:hover{background:#f7ecda}
.mobile-nav-link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:62px;padding:5px 6px;border-radius:12px;color:var(--muted);font-size:.66rem;font-weight:700;line-height:1.1;text-align:center}
.mobile-nav-link svg{width:22px;height:22px;flex:none}
.mobile-nav-link:hover{text-decoration:none;color:var(--green)}
.mobile-nav-link.is-active{color:var(--green);background:#eef3e9}
.mobile-nav-link.is-active svg{stroke-width:2.1}
@media(max-width:900px){
  .site-header .primary-nav{gap:15px}
  .site-header .primary-nav a,.site-header .primary-nav .text-button{font-size:.82rem}
}
@media(max-width:700px){
  body{padding-bottom:86px}
  .site-header .primary-nav{display:none}
  .nav-toggle{display:grid}
  .header-inner{min-height:58px}
  .mobile-nav{height:74px;padding:5px 6px calc(5px + env(safe-area-inset-bottom));gap:2px;align-items:stretch}
  .mobile-nav .mobile-nav-link{flex:1;min-width:0;font-size:.64rem;padding:5px 3px}
  .mobile-nav-link svg{width:21px;height:21px}
}
@media(prefers-reduced-motion:reduce){
  .nav-panel-enter{transition:none}
}


/* Login method switch: password now, OTP reserved for a later release. */
.login-methods{display:inline-flex;gap:6px;padding:5px;margin-top:18px;border:1px solid var(--line);border-radius:999px;background:#fbf9f4}
.login-method{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 14px;font-size:.8rem;font-weight:700;color:var(--muted)}
.login-method.is-active{background:var(--green);color:#fff}
.login-method.is-disabled{opacity:.6;cursor:not-allowed}
.login-method small{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* Fetar Hub V3 brand lockup in the site header. */
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none;border-radius:10px}
.brand:hover{text-decoration:none}
.brand:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.brand-logo{display:block;width:auto;height:64px;max-width:min(46vw,230px)}
.brand-logo--ar{height:60px;max-width:min(52vw,230px)}
@media(max-width:900px){.brand-logo{height:56px}.brand-logo--ar{height:54px}}
@media(max-width:700px){.brand-logo{height:48px;max-width:min(50vw,180px)}.brand-logo--ar{height:46px;max-width:min(56vw,180px)}}