/* Shared top bar and footer for the inner pages (beta, buy, feedback, docs).
   Scoped under .site-top / .site-foot so page styles never collide. */
.site-top { position: sticky; top: 0; z-index: 100; background: rgba(245,244,234,0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid rgba(30,45,28,0.08); }
.site-top .in { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-top .mark { display: inline-flex; text-decoration: none; }
.site-top .mark img { height: 54px; width: auto; display: block; }
.site-top .links { display: flex; gap: 22px; justify-self: center; white-space: nowrap; }
.site-top .links a { color: rgba(30,45,28,0.72); text-decoration: none; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: color 0.15s ease; }
.site-top .links a:hover { color: #1e2d1c; }
.site-top .cta { justify-self: end; display: inline-block; color: #fff; background: #1e2d1c; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(30,45,28,0.16); transition: background 0.2s ease, transform 0.12s ease; }
.site-top .cta:hover { background: #2c6a45; transform: translateY(-1px); }
.site-top .burger { all: unset; display: none; box-sizing: border-box; width: 44px; height: 44px; padding: 10px; margin-right: -10px; cursor: pointer; justify-self: end; flex-direction: column; justify-content: center; gap: 5px; }
.site-top .burger span { display: block; height: 2px; width: 24px; background: #1e2d1c; border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
.site-top.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-top.open .burger span:nth-child(2) { opacity: 0; }
.site-top.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-top .menu { display: none; flex-direction: column; padding: 4px 24px 18px; border-top: 1px solid rgba(30,45,28,0.08); }
.site-top .menu a { padding: 13px 4px; text-decoration: none; color: #1e2d1c; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 1.1px; border-bottom: 1px solid rgba(30,45,28,0.08); }
.site-top .menu a.cta { margin-top: 14px; border: 0; text-align: center; color: #fff; background: #1e2d1c; border-radius: 999px; padding: 13px 20px; letter-spacing: 0.4px; text-transform: none; display: block; }
.site-top.open .menu { display: flex; }
@media (max-width: 1100px) {
  .site-top .in { grid-template-columns: 1fr auto; }
  .site-top .links, .site-top .in > .cta { display: none; }
  .site-top .burger { display: flex; }
}
@media (max-width: 760px) {
  .site-top .in { height: 64px; padding: 0 20px; }
  .site-top .mark img { height: 44px; }
}

.site-main { flex: 1 0 auto; }

/* ---- Footer: the homepage footer, verbatim, scoped under .site-foot ---- */
  .site-foot {
    --cream: #f5f4ea; --cream-dark: #e9e7da; --hairline: #dedbc9; --ink: #263420;
    --ink-soft: rgba(38, 52, 32, 0.85); --ink-faint: rgba(38, 52, 32, 0.60);
    --forest: #388556; --forest-deep: #2c6a45;
    --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif; --sans: "Montserrat", -apple-system, sans-serif;
    --fbg: 0px; --ffg: 0px;
    font-family: var(--sans); line-height: 1.5; text-align: left;
  }
  .site-foot .wrap { width: 92%; max-width: 1240px; margin: 0 auto; padding: 0; }
  .site-foot * { box-sizing: border-box; }
  .site-foot p, .site-foot h3, .site-foot a, .site-foot div { opacity: 1; margin-top: 0; margin-bottom: 0; }
  .site-foot a { text-decoration: none; }
  .site-foot img { margin: 0; }
  /* ---------- Footer ---------- */
  /* Full-bleed scene: a misty ridge (footer-bg, drifts slower on scroll)
     with a cream fade at the top so the page dissolves into it, and a
     transparent moss-and-fern foreground pinned to the bottom edge. The
     link columns sit on the sky; the bottom bar sits on the moss. */
  footer.site-foot {
    position: relative; overflow: hidden; z-index: 0;
    width: 100%; margin: auto 0 0;
    padding: 48px 0 0; color: var(--ink);
  }
  .site-foot .footer-bg, .footer-fg { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
  .site-foot .footer-bg {
    top: -40px; z-index: -2;
    /* cover, not width-fit: the photo must have no top edge inside the
       footer, or it shows as a seam under the cream fade */
    background: var(--cream) url("footer-bg.webp") center bottom / cover no-repeat;
    transform: translateY(var(--fbg, 0px)); will-change: transform;
  }
  /* Solid cream well past the clipped top edge (the layer starts 40px
     above the footer and drifts), so the seam with the page is invisible. */
  .site-foot .footer-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 16%, rgba(245,244,234,0.92) 30%, rgba(245,244,234,0.55) 50%, rgba(245,244,234,0) 72%);
  }
  .site-foot .footer-fg {
    z-index: -1; height: 0; padding-bottom: 33.33%;
    background: url("footer-fg.webp?v=2") center bottom / 100% auto no-repeat;
    transform: translateY(var(--ffg, 0px)); will-change: transform;
  }
  /* Dark green rising from the bottom: deepens the moss and grounds the bar. */
  .site-foot .footer-fg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(12,26,18,0.66) 0%, rgba(12,26,18,0.34) 38%, rgba(12,26,18,0) 62%);
  }
  .site-foot .footer-grid > * { min-width: 0; }
  .site-foot .footer-grid {
    display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 32px 40px; align-items: start; text-align: left;
  }
  .site-foot .footer-brand img { height: 46px; width: auto; display: block; }
  .site-foot .footer-brand .kick { margin-top: 18px; font-size: 11.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--forest); }
  .site-foot .footer-brand p { margin-top: 12px; max-width: 280px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
  .site-foot .footer-social { margin-top: 22px; display: flex; gap: 22px; }
  .site-foot .footer-social a { color: var(--ink); display: inline-flex; opacity: 0.85; transition: opacity 0.15s ease, transform 0.15s ease; }
  .site-foot .footer-social a:hover { opacity: 1; transform: translateY(-1px); }
  .site-foot .footer-social svg { width: 22px; height: 22px; fill: currentColor; }
  .site-foot .footer-col h3 { font-family: var(--sans); line-height: 1.4; font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(38, 52, 32, 0.78); margin-bottom: 16px; }
  .site-foot .footer-col a { display: block; font-size: 13.5px; color: var(--ink); text-decoration: none; padding: 5px 0; transition: color 0.15s ease; }
  .site-foot .footer-col a:hover { color: var(--forest-deep); }
  .site-foot .footer-pledge { border-left: 1px solid rgba(38,52,32,0.22); padding-left: 40px; }
  .site-foot .footer-pledge .tree { font-size: 56px; line-height: 1; filter: saturate(0.9); }
  .site-foot .footer-pledge h3 { margin-top: 14px; font-family: var(--serif); font-size: 20px; font-weight: 560; line-height: 1.2; letter-spacing: -0.2px; }
  .site-foot .footer-pledge p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
  .site-foot .footer-pledge a { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
  .site-foot .footer-bar {
    margin-top: max(330px, 20.5vw);   /* the moss is 45% of the 3:1 image, so its height grows with width; keep the columns clear of it */ padding: 26px 0 30px; border-top: 1px solid rgba(245,244,234,0.35);
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(245,244,234,0.92);
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
  }
  .site-foot .footer-bar a { color: inherit; text-decoration: none; }
  .site-foot .footer-bar a:hover { text-decoration: underline; }
  .site-foot .footer-bar .right { display: inline-flex; align-items: center; gap: 12px; }
  .site-foot .footer-bar .left { display: grid; gap: 6px; }
  .site-foot .footer-bar .credit { opacity: 0.8; }
  @media (max-width: 1000px) {
    .site-foot .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .site-foot .footer-brand { grid-column: 1 / -1; }
    .site-foot .footer-pledge { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid rgba(38,52,32,0.22); padding-top: 24px; display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; align-items: center; }
    .site-foot .footer-pledge .tree { grid-row: 1 / 4; }
    .site-foot .footer-pledge h3 { margin-top: 0; }
    .site-foot .footer-bar { margin-top: 230px; }
  }
  @media (max-width: 640px) {
    footer { padding-top: 48px; }
    /* The 3:1 moss strip is too short on a phone to sit under the bar; crop it taller. */
    .site-foot .footer-fg { padding-bottom: 0; height: 260px; background-size: cover; background-position: center bottom; }
    /* The footer is much taller than wide on a phone, so hold the cream
       well past the link columns and let the ridge appear under the pledge. */
    .site-foot .footer-bg::after { background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 42%, rgba(245,244,234,0.9) 56%, rgba(245,244,234,0.5) 72%, rgba(245,244,234,0) 88%); }
    .site-foot .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
    .site-foot .footer-brand img { height: 38px; }
    .site-foot .footer-brand .kick { margin-top: 14px; font-size: 10.5px; letter-spacing: 2px; }
    .site-foot .footer-brand p { margin-top: 8px; font-size: 13px; }
    .site-foot .footer-social { margin-top: 16px; gap: 18px; }
    .site-foot .footer-col h3 { margin-bottom: 8px; font-size: 10px; letter-spacing: 1.8px; }
    .site-foot .footer-col a { font-size: 13px; padding: 4px 0; }
    .site-foot .footer-col:last-of-type { grid-column: auto; }
    .site-foot .footer-pledge { padding-top: 20px; gap: 2px 14px; }
    .site-foot .footer-pledge .tree { font-size: 40px; }
    .site-foot .footer-pledge h3 { font-size: 17px; }
    .site-foot .footer-pledge p, .footer-pledge a { font-size: 12.5px; }
    .site-foot .footer-bar { flex-direction: column; text-align: center; letter-spacing: 1.6px; font-size: 10.5px; margin-top: 120px; gap: 10px; }
  }
  html.js .site-foot .footer-bg:not(.bg-in), html.js .site-foot .footer-fg:not(.bg-in) { background-image: none !important; }

/* Room under the canopy: the pay-what-you-can callout under the prices */
.room-callout { display: flex; gap: 14px; align-items: flex-start; text-align: left; max-width: 680px; margin: 26px auto 0; padding: 16px 20px 16px 16px; border-radius: 18px; background: #eaf1e4; border: 1px solid rgba(56,133,86,.22); box-shadow: 0 6px 18px rgba(30,45,28,.06); position: relative; z-index: 1; }
.room-callout .ic { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 19px; line-height: 1; box-shadow: 0 2px 6px rgba(30,45,28,.10); }
.room-callout b { display: block; margin: 1px 0 3px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #2c6a45; }
.room-callout p { margin: 0; font-size: 15px; line-height: 1.6; color: #263420; }
.room-callout a { color: #2c6a45; font-weight: 600; }
@media (max-width: 560px) { .room-callout { margin-left: 16px; margin-right: 16px; } }