/* Homepage navigation shared with Pricing and subscription pages. */
.header {
  --ink: #173d32;
  --paper: #fcfcf7;
  --line: #d9dfd5;
  flex-shrink: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.header .wrap { max-width: 1320px; width: calc(100% - 112px); margin-inline: auto; }
.header button { font: inherit; }
@media (max-width: 1000px) { .header .wrap { width: calc(100% - 56px); } }
@media (max-width: 700px) { .header .wrap { width: calc(100% - 36px); } }
.header{border-bottom:1px solid var(--line)}
.nav{height:100px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.wordmark{font-size:29px;font-weight:720;letter-spacing:-1.5px;text-decoration:none;white-space:nowrap}
.wordmark span{font-weight:400;color:#648653}
.nav nav{display:flex;align-items:center;gap:38px;font-size:14px}
.nav nav a{text-decoration:none}
.nav-support{padding:10px 22px;border:1px solid #aab9ab;border-radius:30px}
@media(max-width:700px){.nav{height:82px;gap:15px}
.wordmark{font-size:24px}
.nav nav{gap:16px;font-size:12px}
.nav nav>a:first-child{display:none}
.nav-support{padding:7px 12px}}
.wordmark{display:block;flex:0 0 auto;width:285px;line-height:1.2;letter-spacing:normal;background:#211625;border-radius:10px;padding:7px 10px 9px}




@media(max-width:700px){.wordmark{width:225px}
.nav nav{gap:12px}
.nav nav>a:not(.nav-support){display:none}
}
@media(max-width:370px){.nav{gap:8px}
.wordmark{width:195px}
.nav-support{font-size:11px;padding:7px 10px}}
.nav-support.coming-soon{font-size:14px;background:#edf1e7;color:var(--ink);white-space:nowrap}
@media(max-width:700px){.nav-support.coming-soon{font-size:12px}}
@media(max-width:370px){.nav-support.coming-soon{font-size:11px}}
@media(max-width:370px){.nav .wordmark{width:160px}
.nav{gap:8px}
.nav-support.coming-soon{padding:7px 9px}}
.profile-menu{position:relative;flex-shrink:0}
.profile-menu summary{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;cursor:pointer;list-style:none;background:var(--paper)}
.profile-menu summary::-webkit-details-marker{display:none}
.profile-menu[open] summary,.profile-menu summary:hover{background:#edf1e7}
.profile-dropdown{position:absolute;right:0;top:54px;width:230px;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 25px #173d3218;z-index:20;white-space:normal}
.profile-dropdown p{font-size:13px;margin:0 0 12px;overflow-wrap:anywhere}
.profile-dropdown a,.profile-dropdown button{display:block;font-size:14px;color:var(--ink)}
.profile-dropdown button{border:0;background:transparent;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.profile-dropdown form{margin:0}
@media(max-width:700px){.nav .wordmark{width:clamp(145px,48vw,195px)}
.nav,.nav nav{gap:8px}
.nav-support.coming-soon{font-size:11px;padding:7px 9px}}
@media (min-width: 701px) and (max-width: 1000px){.nav .wordmark{ width: 220px; }
.nav nav{ gap: 18px; }}
@media (min-width: 600px) and (max-height: 600px){.nav{ height: 72px; }}
@media (max-width: 700px){.header-home .nav nav > a[href$="/pricing"]{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }}
.header .profile-dropdown button { min-height: 0; margin: 0; border-radius: 0; text-align: left; font-size: 14px; font-weight: 400; line-height: inherit; }
.header [hidden] { display: none !important; }
.header :focus-visible { outline: 3px solid #6b8a39; outline-offset: 5px; }

/* Shared usage control used by the conversation and Account pages. */
.header .header-usage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; flex: 0 0 148px; min-width: 0; max-width: 100%; padding: 10px 12px; border: 1px solid #d9dfd5; border-radius: 16px; color: #173d32; background: #f0f2e9; text-decoration: none; font: 500 12px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; letter-spacing: .01em; }
.header .usage-heading { display: grid; grid-template-columns: 15px minmax(0, 1fr) max-content; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.header .usage-heading svg { width: 15px; height: 15px; fill: none; stroke: #648653; stroke-width: 1.6; }
.header #credit-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.header #credit-percentage { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.header #header-credit-progress { display: block; appearance: none; border: 0; width: 100%; height: 5px; margin: 0; border-radius: 9px; overflow: hidden; background: #d9dfd5; accent-color: #648653; }
.header #header-credit-progress::-webkit-progress-bar { background: #d9dfd5; border-radius: 9px; }
.header #header-credit-progress::-webkit-progress-value { background: #648653; border-radius: 9px; }
.header #header-credit-progress::-moz-progress-bar { background: #648653; border-radius: 9px; }

/* App navigation shares the website header and retains live usage. */
.header-app .nav nav { gap: 24px; }
.header-app .header-usage { background: #f0f2e9; }
@media (min-width: 701px) and (max-width: 1000px) {
  .header-app .nav nav { gap: 12px; }
  .header-app .nav .wordmark { width: 190px; }
  .header-app .header-usage { flex-basis: 124px; }
}
@media (max-width: 700px) {
  .header-app .nav, .header-app .nav nav { gap: 8px; }
  .header-app .nav .wordmark { width: clamp(120px, 32vw, 195px); }
  .header-app .nav nav > .header-usage { display: grid; flex: 0 0 64px; padding: 7px; gap: 5px; border-radius: 12px; }
  .header-app .usage-heading { grid-template-columns: 12px 1fr; gap: 3px; }
  .header-app .usage-heading svg { width: 12px; height: 12px; }
  .header-app #credit-label { display: none; }
  .header-app #credit-percentage { font-size: 11px; }
  .header-app .profile-menu summary { width: 34px; height: 34px; }
}
.header { color: var(--ink); }
.header a { color: inherit; }

.header .nav nav > a.nav-session {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 8px 16px; border-radius: 999px;
  background: #d9ea4b; color: #173d32; font-weight: 600; white-space: nowrap;
}
.header .nav nav > a.nav-session:hover { background: #d0e240; }
@media (max-width: 700px) {
  .header .nav nav > a.nav-session { min-height: 34px; padding: 7px 9px; font-size: 11px; }
  .header-signed-in .nav .wordmark { width: min(42vw, 160px); }
  .header-app.header-signed-in .nav .wordmark { width: clamp(100px, 30vw, 145px); }
  .header-app.header-signed-in .nav nav > .header-usage { flex-basis: 50px; }
  .header-app.header-signed-in .usage-heading { display: block; text-align: center; }
  .header-app.header-signed-in .usage-heading svg { display: none; }
}

/* Account menu: identity, everyday actions, and a separate admin section. */
.header .profile-dropdown {
  top: calc(100% + 14px); width: 294px; max-width: calc(100vw - 36px);
  padding: 8px; border: 1px solid #d9dfd5; border-radius: 20px;
  background: #fffef9; box-shadow: 0 14px 45px #173d321c, 0 2px 6px #173d3208;
  max-height: calc(100svh - 120px); overflow-y: auto;
}
.header .profile-identity { display: flex; align-items: center; gap: 11px; padding: 12px 10px 16px; }
.header .profile-avatar { display: grid; place-items: center; flex: 0 0 40px; height: 40px; border-radius: 14px; background: #d9ea4b; color: #173d32; font: 500 22px Georgia, serif; }
.header .profile-identity-copy { min-width: 0; flex: 1; }
.header .profile-caption { display: block; color: #73816f; font-size: 8px; letter-spacing: 1.6px; font-weight: 650; margin-bottom: 4px; }
.header .profile-identity .profile-status { color: #173d32; font-size: 14px; line-height: 1.4; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.header .profile-role { flex-shrink: 0; border: 1px solid #d5dfcf; border-radius: 999px; background: #f0f4e8; color: #536d48; font: 600 9px/1.4 system-ui; padding: 4px 7px; }
.header .profile-primary { padding: 0 0 5px; }
.header .profile-dropdown .profile-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  width: 100%; min-height: 43px; margin: 0; padding: 10px 12px;
  border: 0; border-radius: 11px; background: transparent; color: #173d32;
  font: 450 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-align: left; text-decoration: none; cursor: pointer;
}
.header .profile-item svg { flex: 0 0 18px; color: #718468; }
.header .profile-item:hover, .header .profile-item:focus-visible { background: #edf2e5; }
.header .profile-admin { border-top: 1px solid #e1e6db; padding-top: 8px; margin-top: 2px; }
.header .profile-section-label { font: 650 8px/1.5 system-ui; letter-spacing: 1.6px; color: #73816f; padding: 5px 12px; margin: 0 0 3px; }
.header .profile-signout { border-top: 1px solid #e1e6db; padding-top: 7px; margin-top: 8px; }
.header .profile-signout .profile-item { color: #9c4352; }
.header .profile-signout svg { color: #a6656e; }
.header .profile-signout .profile-item:hover { background: #f8eeeb; }
@media (prefers-reduced-motion: no-preference) {
  .profile-menu[open] .profile-dropdown { animation: profile-arrive 140ms ease-out; }
  @keyframes profile-arrive { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
}

/* Local review builds must be unmistakable beside the live website. */
.local-environment-banner{display:flex;align-items:center;justify-content:center;gap:10px;height:28px;padding:0 12px;background:#fff0ba;color:#594715;border-bottom:1px solid #e6d595;font:10px/1.2 system-ui,sans-serif;letter-spacing:.03em;text-align:center}.local-environment-banner strong{font-size:10px;letter-spacing:.08em}.local-environment-banner span{font-size:10px;font-weight:400}