/* Lucca — site footer (one source for every page)
 * -------------------------------------------------
 * Every page links this file last in <head> and uses the same footer markup
 * (the homepage's .sf-footer). Pages used to carry their own copies of these
 * rules, which drifted: two serif cuts for the column headings, different
 * phone layouts, and the Collection and Oat & Olive pages on a different
 * footer altogether. Selectors are prefixed with `html body` so they win over
 * any per-page leftovers (several pages set footer rules with !important,
 * so these do too) without having to hunt them all down.
 *
 * Also here, because every page loads this file: the paw divider (.lk-paw)
 * that opens each page's closing call to action, above its headline.
 */

html body .sf-footer{ position:relative !important; overflow:hidden !important; background:#fff !important; border-top:1px solid rgba(0,0,0,.06) !important;
  font-family:"Nunito Sans", system-ui, sans-serif !important; margin:0 !important; padding:0 !important; }
html body .sf-footer .foot-main,
html body .sf-footer .foot-base{ position:relative !important; z-index:1 !important; }

html body .sf-footer .sf-oat{ position:absolute !important; right:2.5% !important; bottom:40px !important; width:72px !important; height:auto !important; opacity:.42 !important; pointer-events:none !important; z-index:0 !important; }

html body .sf-footer .foot-main{ max-width:1200px !important; margin:0 auto !important; padding:4.5rem 40px 4rem !important; display:grid !important;
  grid-template-columns:1.6fr 1fr 1fr 1fr !important; gap:2.5rem !important; }
html body .sf-footer .fbrand{ grid-column:auto !important; grid-row:auto !important; }
html body .sf-footer .fbrand .word{ display:inline-flex !important; align-items:center !important; gap:10px !important; text-decoration:none !important; }
html body .sf-footer .fbrand .word img{ width:28px !important; height:28px !important; display:block !important; }
html body .sf-footer .fbrand .word span{ font-family:"Nunito Sans", system-ui, sans-serif !important; font-weight:700 !important;
  letter-spacing:.1em !important; font-size:1.25rem !important; color:#1F1B16 !important; }
html body .sf-footer .fbrand p{ font-family:"Nunito Sans", system-ui, sans-serif !important; font-size:.8125rem !important; font-weight:400 !important;
  line-height:1.6 !important; color:#9a9a9a !important; margin:1rem 0 0 !important; max-width:280px !important; }
html body .sf-footer .fbrand a.mail{ display:inline-block !important; margin-top:.5rem !important; font-size:.8125rem !important; color:#9a9a9a !important;
  text-decoration:none !important; transition:color .2s ease !important; }
html body .sf-footer .fbrand a.mail:hover{ color:#2D5F5D !important; }
html body .sf-footer h4{ font-family:"Fraunces", Georgia, serif !important; font-weight:400 !important; font-size:1.125rem !important; line-height:1.3 !important;
  letter-spacing:normal !important; text-transform:none !important; color:#1F1B16 !important; margin:0 0 1.25rem !important; }
html body .sf-footer ul{ list-style:none !important; padding:0 !important; margin:0 !important; display:flex !important; flex-direction:column !important; gap:.75rem !important; }
html body .sf-footer li{ margin:0 !important; }
html body .sf-footer li a{ font-family:"Nunito Sans", system-ui, sans-serif !important; font-size:.8125rem !important; font-weight:400 !important;
  color:#9a9a9a !important; text-decoration:none !important; transition:color .2s ease !important; }
html body .sf-footer li a:hover{ color:#2D5F5D !important; }
html body .sf-footer .foot-base{ max-width:1200px !important; margin:0 auto !important; padding:2rem 40px !important; border-top:1px solid rgba(0,0,0,.06) !important;
  display:flex !important; align-items:center !important; gap:2rem !important; font-family:"Nunito Sans", system-ui, sans-serif !important; font-size:.6875rem !important; color:#9a9a9a !important; }

@media (max-width:1200px){ html body .sf-footer .sf-oat{ display:none !important; } }
@media (max-width:900px){
  html body .sf-footer .foot-main{ grid-template-columns:1fr 1fr !important; }
  html body .sf-footer .fbrand{ grid-column:1 / -1 !important; }
}

/* Phones: the homepage's layout. Two link columns, not three stacked; the
   tagline uncapped; Resources tucked under Companion so the ragged edge
   falls bottom-right. */
@media (max-width:768px){
    html body .sf-footer .foot-main{ grid-template-columns:1fr 1fr !important; gap:30px 22px !important; padding:34px 22px 34px !important; }
  html body .sf-footer .fbrand{ grid-column:1 / -1 !important; grid-row:1 !important; }
  html body .sf-footer .fbrand p{ max-width:none !important; }
  html body .sf-footer .foot-main > div:nth-of-type(2){ grid-column:1 !important; grid-row:2 !important; }
  html body .sf-footer .foot-main > div:nth-of-type(3){ grid-column:2 !important; grid-row:2 / span 2 !important; align-self:start !important; }
  html body .sf-footer .foot-main > div:nth-of-type(4){ grid-column:1 !important; grid-row:3 !important; }
  html body .sf-footer h4{ margin:0 0 .8rem !important; font-size:1.02rem !important; }
  html body .sf-footer ul{ gap:.6rem !important; }
  html body .sf-footer .foot-base{ padding:1.1rem 22px 1.4rem !important; }
}

/* Pages set their own body line-height (normal, 1.6, 1.8 …), which the
   footer inherited, so the same footer came out 516 to 572px tall. Pin it to
   the homepage's: normal everywhere except the tagline and headings, which
   set their own above. */
html body .sf-footer,
html body .sf-footer *:not(p):not(h4){ line-height:normal !important; }
html body .sf-footer .foot-base span{ font-weight:400 !important; font-size:inherit !important; }
/* Same for the base size and weight the page body passes down: list items
   size their line from their own font-size, not the link's. */
html body .sf-footer{ font-size:16px !important; font-weight:400 !important; }
html body .sf-footer ul, html body .sf-footer li{ font-size:.8125rem !important; }
html body .sf-footer .foot-base{ font-weight:400 !important; }
/* The wordmark as a block-level flex row: as inline-flex it sat on a line box
   whose height depended on the page's font settings. */
html body .sf-footer .fbrand .word{ display:flex !important; width:max-content !important; }

/* Paw divider: two hairlines and the mark, centred, above the headline of a
   page's closing call to action (index, compare, features, about, partners,
   right-for-me, therapists, reimbursement, your-year, lucca). */
html body .lk-paw{ display:flex !important; align-items:center !important; justify-content:center !important;
  gap:18px !important; margin:0 auto 40px !important; padding:0 24px !important; }
html body .lk-paw .ln{ width:120px !important; height:1px !important; background:rgba(61,48,39,.14) !important; }
html body .lk-paw img{ width:24px !important; height:auto !important; opacity:.45 !important; flex-shrink:0 !important; }
@media (max-width:768px){
  html body .lk-paw{ margin-bottom:28px !important; }
  html body .lk-paw .ln{ width:64px !important; }
}