/* Site header + footer styles for pages that do not load styles.css (tools pages, Insiders). Rebuilt from styles.css + theme-insiders.css; rebuild after changing either. */
:root{
  --page:       #F4EAE1;
  --card:       #F8F2EE;
  --band:       #F6ECE4;
  --header:     #F2E6DB;
  --hairline:   #E7D8CB;
  --hairline-2: #D6C3B3;
  --butter:     #FAD88B;
  --butter-hov: #F0C046;
  --rose:       #C3796D;
  --ink:        #243029;
  --body:       #33433C;
  --sage:       #46574E;
  --sage-quiet: #5E7364;
  --shadow: 0 18px 40px -22px rgba(36, 48, 41, .28);
  --radius: 24px;
  /* Card ground + the two saturated brand colors (Amanda 2026-08-21).
     Cards are white; rose is the only pop. Green is reserved and is
     never set beside rose. */
  --card-white: #FFFFFF;
  --green:      #5E7968;
  --amber:      #F0C046;    /* butter hover, used as small accent */
  --gold:       #A67952;    /* antique gold, fine rules only */
  --sage-deep:  #33433C;    /* deep sage band */
  --cream-text: #F8F2EE;
}
.shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
.shell-narrow { max-width: 760px; }
.btn {
  display: inline-block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border-radius: 999px;
  padding: 11px 22px;
  transition: background-color .15s ease;
}
.btn-butter {
  background: var(--butter);
  color: var(--ink);          
}
.btn-butter:hover { background: var(--butter-hov); }
.btn-lg { padding: 14px 30px; font-size: 16px; }
.site-header {
  background: var(--header);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-row {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 64px;
}
.wordmark {
  font-family: "Urbanist", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-pill { color: inherit; }
.wordmark-sm { font-size: 1.25rem; }
.site-nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
}
.site-nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
.site-header .btn { flex-shrink: 0; }
.site-footer {
  background: var(--header);
  border-top: 1px solid var(--hairline);
  padding: 30px 0;
}
.footer-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-copy { font-size: 13px; color: var(--sage-quiet); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 32px;
  padding: 12px 0 28px;
}
.footer-grid h4 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-quiet);
  margin-bottom: 12px;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--body); text-decoration: none; font-size: 14px; }
.footer-grid a:hover { color: var(--rose); }
.footer-tagline { color: var(--sage); font-size: 14px; max-width: 26em; margin-top: 10px; }
.footer-bottom {
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: baseline;
}
@media (max-width: 760px) {.footer-grid { grid-template-columns: 1fr; gap: 24px; }}
@media (max-width: 860px) {.header-row { justify-content: space-between; flex-wrap: wrap; row-gap: 6px; padding-bottom: 10px; }
.site-nav { order: 3; flex-basis: 100%; margin-left: 0; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.site-nav a { font-size: 14px; }}
@media (max-width: 480px) {.footer-row { flex-direction: column; align-items: flex-start; gap: 8px; }}
.btn-outline {
  background: transparent;
  color: var(--rose);
  border: 1.5px solid var(--rose);
  padding: 9.5px 20px;
}
.btn-outline:hover { background: var(--rose); color: var(--cream-text); }
.site-header { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }
.header-row { min-height: 72px; }
.site-footer { background: #FBF8F5; }
.wordmark { font-weight: 500; letter-spacing: -.022em; }
.shell-narrow { max-width: 1080px; }
.site-footer { padding: 34px 0 30px; }
.footer-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.footer-links a {
  color: var(--body);
  text-decoration: none;
  font-size: 14px;
}
.footer-links a:hover { color: var(--rose); }
.footer-disclaimer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--sage);
  font-size: 14px;
}
.site-footer .footer-copy {
  margin-top: 12px;
  font-size: 13px;
  color: var(--sage-quiet);
  line-height: 1.6;
}
@media (max-width: 620px) {.footer-top { flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-links { gap: 8px 18px; }}
.wordmark-logo { display: inline-flex; align-items: center; line-height: 0; }
.wordmark-logo .logo-img { display: block; height: 60px; width: auto; }
.wordmark-sm.wordmark-logo .logo-img { height: 46px; }
@media (max-width: 560px) {.wordmark-logo .logo-img { height: 46px; }}
.site-nav a { white-space: nowrap; }
@media (max-width: 860px) {.tools-band .shell { text-align: center; }}
.site-header { background: #FFFFFF; border-bottom: 1px solid #ECC798; backdrop-filter: none; }
.site-nav a { color: #555537; font-weight: 500; }
.site-nav a:hover { color: #DE9C30; }
.btn,
.btn-butter {
  border-radius: 18px;
  border: 2px solid #DE9C30;
  background: #F8BC51;
  color: #555537;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  outline: 2px dashed #555537;
  outline-offset: -7px;
  box-shadow: none;
  transition: transform .15s;
}
.btn:hover,
.btn-butter:hover { background: #F8BC51; color: #555537; transform: translateY(-2px); }
.btn-lg { padding: 16px 34px; font-size: 17px; }
.btn-outline {
  background: #ECC798;
  border: 2px solid #ECC798;
  color: #555537;
  outline: 2px dashed #555537;
  outline-offset: -7px;
  border-radius: 18px;
}
.btn-outline:hover { background: #ECC798; color: #555537; transform: translateY(-2px); }
.site-footer { background: #ECC798; border-top: 0; color: #555537; }
.site-footer a, .footer-copy, .footer-disclaimer, .footer-tagline { color: #555537; }
.site-footer a:hover { color: #FFFFFF; }
.band > .shell > .eyebrow, .band > .shell > h2, .band > .shell > .section-lede,
.content-section > .shell > h2, .content-section > .shell > .section-lede,
.butter-way .eyebrow, .butter-way h2, .butter-way .section-lede { text-align: center; margin-left: auto; margin-right: auto; }
.band > .shell, .butter-way > .shell { text-align: center; }
.band > .shell > .eyebrow, .butter-way .eyebrow { display: flex; justify-content: center; }
.site-footer .wordmark, .site-footer .wordmark-logo, .site-footer .logo-img { display: none !important; }
.site-footer { background: #33433C; color: #FEF1D8; border-top: 0; }
.site-footer a, .site-footer .footer-copy, .site-footer .footer-disclaimer, .site-footer .footer-tagline, .site-footer p { color: #FEF1D8; }
.site-footer a:hover { color: #F8BC51; }
.site-footer .footer-copy { opacity: .8; }
.btn,.btn-butter,.btn-outline{box-shadow:0 4px 0 #DE9C30,0 10px 18px -10px rgba(85,85,55,.45)!important;transition:transform .15s ease,box-shadow .15s ease}
.btn-outline{box-shadow:0 4px 0 #D9AE78,0 10px 18px -10px rgba(85,85,55,.4)!important}
.btn:hover,.btn-butter:hover,.btn-outline:hover{transform:translateY(-3px)!important;box-shadow:0 7px 0 #DE9C30,0 16px 24px -12px rgba(85,85,55,.5)!important}
.btn:active,.btn-butter:active,.btn-outline:active{transform:translateY(2px)!important;box-shadow:0 1px 0 #DE9C30!important}
.wordmark-logo{flex:none!important}
.wordmark-logo .logo-img{flex:none;max-width:none;width:auto!important;aspect-ratio:801/240}
.btn,.btn-butter{box-shadow:4px 4px 0 #DE9C30!important}
.btn:hover,.btn-butter:hover{transform:translate(-2px,-3px)!important;box-shadow:7px 7px 0 #DE9C30!important}
.btn:active,.btn-butter:active{transform:translate(2px,2px)!important;box-shadow:1px 1px 0 #DE9C30!important}
.btn-outline,.btn-sage{background:#46574E!important;border-color:#33433C!important;color:#FFFFFF!important;outline:2px dashed #FEF1D8!important;box-shadow:4px 4px 0 #2A362F!important}
.btn-outline:hover,.btn-sage:hover{background:#46574E!important;color:#FFFFFF!important;box-shadow:7px 7px 0 #2A362F!important}
.btn-pink{background:#F4C6C0!important;border-color:#DE9884!important;color:#555537!important;outline:2px dashed #555537!important;box-shadow:4px 4px 0 #DE9884!important}
.btn-pink:hover{background:#F4C6C0!important;box-shadow:7px 7px 0 #DE9884!important}
.hero .link-arrow,.hero-actions a:not(.btn){background:#F4C6C0;border:2px solid #DE9884;outline:2px dashed #555537;outline-offset:-6px;border-radius:16px;padding:12px 22px;text-decoration:none;font-weight:700;box-shadow:4px 4px 0 #DE9884;transition:transform .15s,box-shadow .15s;display:inline-block}
.hero .link-arrow:hover,.hero-actions a:not(.btn):hover{transform:translate(-2px,-3px);box-shadow:7px 7px 0 #DE9884}
.footer-more{margin-top:10px}
.shell{max-width:min(1440px,calc(100vw - 96px))!important}
.shell-narrow{max-width:min(1200px,calc(100vw - 96px))!important}
@media (max-width:700px){.shell,.shell-narrow{max-width:calc(100vw - 40px)!important}}
.site-header,.site-footer{font-family:"DM Sans",sans-serif}.site-header a,.site-footer a{text-decoration:none}
.site-header,.site-header *,.site-footer,.site-footer *{box-sizing:border-box}
