:root {
  --green: #313d1f;
  --green-deep: #1d2612;
  --green-accent: #8fb04a;
  --red: #d53820;
  --cream: #f8f6ef;
  --text: #313d1f;
  --chip: rgba(98, 126, 48, 0.13);
  --sans: -apple-system, "SF Pro Display", "SF Pro", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--cream); color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--sans); }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px; border-radius: 999px; background: var(--chip);
  font-size: 14px; line-height: 18.2px;
}
.pill-dark { color: rgba(255, 255, 255, 0.8); }

.btn-solid, .btn-light {
  display: inline-flex; align-items: center; gap: 10px; height: 52px;
  padding: 0 6px 0 20px; border-radius: 43px; font-weight: 700; font-size: 16px;
}
.btn-solid { background: var(--green); color: #fff; }
.btn-light { background: #627e30; color: #fff; margin-top: 32px; }

.split-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 16px; }
.split-head h2 { font-size: 48px; line-height: 56px; font-weight: 700; max-width: 554px; }
.split-head p { font-size: 20px; line-height: 26px; max-width: 609px; font-family: var(--sans); }
.split-head em { font-style: normal; color: var(--red); }

/* Hero */
.hero {
  position: relative; overflow: hidden; color: #fff; text-align: center;
  background: radial-gradient(ellipse at 50% 70%, #3d4f22 0%, #1d2612 45%, #070906 100%);
  padding: 30px 80px 180px;
}
/* Cream hill edge at the bottom of the hero */
.hero-edge {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 64px; display: block;
}
.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 10px 10px 32px; border-radius: 9999px; backdrop-filter: blur(12px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.nav-right { display: flex; align-items: center; gap: 36px; font-weight: 500; }
.hero-copy { max-width: 838px; margin: 60px auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero h1 { font-size: 60px; line-height: 70px; font-weight: 510; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); }
.hero-copy p { max-width: 730px; color: rgba(255, 255, 255, 0.8); font-size: 16px; line-height: 20.8px; }
/* Figma: the wordmark sits right under the text and the phone starts 108px below its top */
.hero-visual { position: relative; margin-top: 8px; padding-top: min(108px, 7.5vw); }
.hero-wordmark {
  position: absolute; inset: 0 0 auto; font-family: var(--sans); font-weight: 700;
  font-size: 250px; line-height: 316px; color: rgba(255, 255, 255, 0.1); white-space: nowrap;
  /* Letters fade out toward the bottom so the word melts into the background */
  -webkit-mask-image: linear-gradient(180deg, #000 20%, rgba(0, 0, 0, 0.45) 55%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 20%, rgba(0, 0, 0, 0.45) 55%, transparent 88%);
}
/* Faded brand mark behind the hand and phone */
.hero-mark {
  position: absolute; left: 50%; top: min(150px, 10vw); width: min(760px, 62%); height: auto;
  transform: translateX(-50%); opacity: 0.06; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.hero-phone {
  position: relative; margin: 0 auto; width: 1217px; max-width: 100%;
  /* Fade the hand into the hero background */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.6) 75%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.6) 75%, transparent 100%);
  animation: phone-rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
/* Hand and phone slide up from below on page load */
@keyframes phone-rise {
  from { opacity: 0; transform: translateY(260px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-phone { animation: none; }
}
.checks { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px; }
.checks li { display: flex; align-items: center; gap: 10px; font-family: var(--sans); }
.checks span { color: inherit; }
/* Checklist cycle is driven by script.js: lines arrive one by one and earlier ones dim */
.checks li {
  color: #fff;
  opacity: 0; transform: translateY(-20px) scale(0.6); filter: blur(8px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.8s ease;
}
.checks li.in { transform: none; filter: none; }
.hero .stores {
  opacity: 0;
  animation: rise-from-back 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s forwards;
}
@keyframes rise-from-back {
  from { opacity: 0; transform: translateY(-24px) scale(0.6); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .stores { animation: none; opacity: 1; }
  .checks li { transition: none; }
}
.checks .c1 { font-size: 24px; }
.checks .c2 { font-size: 28px; }
.checks .c3 { font-size: 32px; }
.checks .c4 { font-size: 36px; font-weight: 600; }
.stores { display: flex; gap: 14px; justify-content: center; margin-top: 30px; }
.stores a { display: block; border-radius: 999px; overflow: hidden; line-height: 0; }
.stores img { width: 260px; height: auto; }

/* Sections */
.section { max-width: 1440px; margin: 0 auto; padding: 120px 80px; }
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 60px; }
.bento { position: relative; overflow: hidden; border-radius: 24px; width: calc((100% - 20px) * 0.4143); }
.bento.wide { width: calc((100% - 20px) * 0.5857); }
/* Card stage: laid out at Figma size, scaled to the card width by script.js */
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stage > * { position: absolute; max-width: none; }
.bento.planning { background: #fff; }
.card-copy { left: 40px; right: 40px; top: 40px; display: flex; flex-direction: column; gap: 10px; z-index: 2; }
.card-copy h3 { font-size: 28px; line-height: 33.6px; font-weight: 700; color: #211f1b; white-space: nowrap; }
.card-copy p { font-size: 16px; line-height: 20.8px; color: #747474; }
.card-copy.on-dark h3 { color: #fff; }
.card-copy.on-dark p { color: rgba(255, 255, 255, 0.8); }
/* Trap card route: faint full path, a live line that draws from the trapper to the trap, and a leading dot */
.trap-route { overflow: visible; }
.trap-route path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trap-route-base { stroke: #427703; opacity: 0.25; }
.trap-route-live { stroke: #427703; stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(114, 180, 40, 0.7)); }
.trap-route-dot { fill: #fff; stroke: #427703; stroke-width: 3; opacity: 0; }
/* Journal card: GSAP drives these floats (see animations.js), so drop the CSS loop */
.bento.journal .float { animation: none; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
/* Planning & Sharing card, rebuilt from Figma layers on a 522x518 stage scaled to the card */
.pl-bg { left: 0; top: -61.84%; width: 100%; height: 218.08%; opacity: 0.25; }
.pl-wash {
  left: -114.7px; top: -19.4px; width: 972.45px; height: 500.72px; transform: rotate(-2.46deg);
  background: linear-gradient(166.89deg, #ecf6e0 27.78%, rgba(236, 246, 224, 0) 89.3%);
}
.pl-copy { left: 40px; right: 40px; top: 40px; display: flex; flex-direction: column; gap: 10px; }
.pl-copy h3 { font-size: 24px; line-height: 31.2px; font-weight: 700; color: #211f1b; }
.pl-copy p { font-size: 16px; line-height: 20.8px; color: #747474; }
.pl-road { left: -49.22px; top: 88px; width: 659.18px; height: 362.67px; transform: rotate(-5.06deg); }
.pl-route { overflow: visible; }
.pl-route path { fill: none; stroke: none; }
.pl-dash-left { left: 3.04px; top: 160.2px; width: 145px; height: 294px; transform: rotate(-5.06deg); }
.pl-dash-right { left: 449.26px; top: 96.08px; width: 145px; height: 294px; transform: rotate(105deg); }
.pl-direction { left: 29.22px; top: 350.22px; width: 103.56px; height: 103.56px; }
.pl-phone { left: 150px; top: 124px; width: 252px; height: 394px; border-radius: 36px 36px 0 0; animation: pl-bob 3.5s ease-in-out infinite; }
.pl-pin { left: 430.22px; top: 157.22px; width: 103.56px; height: 103.56px; }
.pl-pulse {
  left: 456px; top: 179px; width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid #7fae3a; opacity: 0; pointer-events: none;
}
.pl-photo {
  left: 27px; top: 243px; width: 65px; height: 65px; border: 3.58px solid #fff; border-radius: 10.23px;
  overflow: hidden; box-shadow: 0 4.19px 9.44px rgba(0, 0, 0, 0.21);
}
.pl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pl-tree { left: 457px; top: 141px; width: 50px; height: 35px; overflow: hidden; }
.pl-tree img { position: absolute; left: 0; top: -147.73%; width: 100%; height: 248.48%; }
@keyframes pl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .pl-phone { animation: none; } }
/* Floating copies of the phones / UI chips, cut from the same card image */
.bento .float {
  position: absolute; overflow: hidden; pointer-events: none;
  animation: bento-float 5s ease-in-out infinite;
  z-index: 1;
}
.bento .float img { position: absolute; max-width: none; }
.bento:hover .float { animation-duration: 2.6s; }
.bento .float.still { animation: none; }
.stage img { max-width: none; }
.trap-pulse {
  width: 51px; height: 51px; border-radius: 50%; border: 3px solid #5d9a1c; opacity: 0; pointer-events: none;
}
.trap-pulse-pin { border-color: #e2533b; }
@keyframes bento-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .bento .float { animation: none; } }

/* For trappers */
.trappers {
  position: relative; overflow: hidden; overflow: clip; color: #fff; padding: 80px 0 90px;
  background:
    radial-gradient(ellipse 70% 45% at 45% 62%, rgba(74, 112, 24, 0.55) 0%, rgba(30, 48, 10, 0.35) 45%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(180deg, #000 0%, #0a0f05 30%, #1a2a0a 62%, #0d1406 88%, #000 100%);
}
.trappers-edge { position: absolute; left: 0; width: 100%; height: 40px; display: block; }
.trappers-edge.top { top: -1px; }
.trappers-edge.bottom { bottom: -1px; }
.inner { max-width: 1440px; margin: 0 auto; padding: 0 80px; }
.trappers .pill { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.trappers .split-head { margin-top: 14px; }
.trappers .split-head h2 { font-size: 48px; line-height: 56px; max-width: 554px; }
.trappers .split-head p { color: #fff; font-size: 20px; line-height: 26px; max-width: 609px; }
.trappers .split-head > div { width: 532px; }
.trappers .g { color: #7bb32e; }
.trappers .r { color: var(--red); }
.trappers .btn-light { margin-top: 32px; background: #627e30; }
.perks { display: flex; justify-content: space-between; margin-top: 20px; }
.perks > div { width: 300px; display: flex; flex-direction: column; gap: 16px; }
.perks img { height: 56px; width: auto; align-self: flex-start; mix-blend-mode: screen; filter: contrast(1.8) brightness(0.95); }
.perks h3 { font-family: var(--sans); font-size: 20px; line-height: 26px; font-weight: 400; margin: 4px 0 0; }
.perks p { font-size: 16px; line-height: 20.8px; color: #fff; width: 335px; max-width: 100%; }

/* Trip map */
/* Map runs edge to edge: break out of the .inner side padding */
.trip-map { position: relative; margin: 40px -80px 0; aspect-ratio: 1280 / 1080; }
.trip-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 1080px; transform-origin: 0 0; }
.trip-stage > * { position: absolute; }
.trip-dither { left: -216.9px; top: -156.7px; width: 1715.3px; height: 1408.6px; max-width: none; pointer-events: none; }
.trip-pin {
  width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 2;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.trip-pin img { position: absolute; left: -19.07px; top: -16.67px; width: 62.13px; height: 62.13px; max-width: none; pointer-events: none; }
.trip-pin::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #8ee03a; opacity: 0;
}
.trip-pin:hover { transform: scale(1.2); }
.trip-pin.is-active { transform: scale(1.3); }
.trip-pin.is-active::after { animation: pin-ping 1.8s ease-out infinite; }
.trip-pin:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 50%; }
@keyframes pin-ping { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(2.2); opacity: 0; } }
.trip-pin span {
  position: absolute; left: 50%; top: 34px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 500 13px/1 var(--body); color: #fff; padding: 6px 10px; border-radius: 999px;
  background: rgba(10, 18, 6, 0.7); border: 1px solid rgba(203, 255, 179, 0.25); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.25s, transform 0.25s;
}
.trip-pin:hover span, .trip-pin.is-active span { opacity: 1; transform: translateX(-50%) translateY(2px); }
/* Dashed connector from the active pin to the card */
.trip-link { left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 1; }
.trip-link line { stroke: #8ee03a; stroke-width: 2; stroke-dasharray: 4 6; stroke-linecap: round; opacity: 0.8; }

/* Popover that holds the outing card at 72% beside the active pin */
/* The open card sits in front of the pins */
.trip-pop { width: 531.4px; height: 348.5px; z-index: 5; visibility: hidden; }
.trip-card {
  position: absolute; left: 0; top: 0; width: 738px; height: 484px; display: flex; transform: scale(0.72); transform-origin: 0 0; gap: 20px; padding: 16px 20px 16px 16px;
  background: #fff; color: #211f1b; border-radius: 31px; overflow: hidden;
  box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.31), 0 4px 154px rgba(98, 126, 48, 0.3);
  transform-origin: 0% 40%;
}
.trip-col { display: flex; flex-direction: column; gap: 10px; }
.trip-photo { position: relative; width: 316px; height: 266.6px; border-radius: 19.4px; overflow: hidden; margin-bottom: 10px; }
.trip-photo-img { position: absolute; left: 0; top: -39.7px; width: 316px; height: 346px; object-fit: cover; max-width: none; }
.trip-photo-bar { position: absolute; left: 16.2px; top: 16.2px; width: 283.6px; display: flex; justify-content: space-between; }
.trip-photo-actions { display: flex; gap: 6.5px; }
.glass { width: 25.9px; height: 25.9px; border-radius: 50%; display: grid; place-items: center; background: rgba(40, 40, 40, 0.3); backdrop-filter: blur(3px); }
.glass img { width: 16.2px; height: 16.2px; }
.trip-pager { position: absolute; left: 140.2px; top: 205.8px; width: 35.7px; height: 4.9px; }
.trip-thumb {
  position: absolute; left: 247.1px; top: 158px; width: 52.7px; height: 52.7px; border: 1.6px solid #fff; border-radius: 9.7px;
  overflow: hidden; box-shadow: 0 2.8px 5.5px rgba(0, 0, 0, 0.28);
}
.trip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.trip-title { font-size: 16px; line-height: 20.8px; font-weight: 700; text-align: center; }
.trip-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trip-stats > div { border: 1px solid #dad9d3; border-radius: 12px; padding: 12px 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.trip-stats span { font-size: 12px; line-height: 15.6px; color: #8e8c87; }
.trip-stats b { font-size: 16px; line-height: 20.8px; font-weight: 500; }
.trip-waypoints { gap: 16px; flex: 1; min-width: 0; }
.trip-waypoints h5 { font-family: var(--sans); font-size: 18px; line-height: 23.4px; font-weight: 700; }
.wp { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 18.2px; color: #65645f; }
.wp b { font-size: 16px; line-height: 20.8px; font-weight: 500; color: #211f1b; }
.wp-start { border-bottom: 1px solid #dad9d3; padding-bottom: 12px; margin-bottom: 15px; }
.wp-end { border-top: 1px solid #dad9d3; padding-top: 12px; margin-top: 15px; }
.wp-stops { display: flex; gap: 12px; }
.wp-stops > div { display: flex; flex-direction: column; gap: 4px; }
.wp-stops b { font-size: 14px; line-height: 18.2px; font-weight: 500; margin-top: 8px; }
.wp-stops small { font-size: 12px; line-height: 15.6px; color: #8e8c87; }
.wp-map { position: relative; width: 177px; height: 139px; border-radius: 12px; overflow: hidden; display: block; }
.wp-map img { width: 100%; height: 100%; object-fit: cover; }
.wp-map .wp-route { position: absolute; left: 46px; top: 59.5px; width: 68px; height: 50.4px; }

/* How it works */
.step { display: flex; align-items: center; gap: 133px; margin-top: 60px; }
.step > img, .step-card, .step-media { width: 630px; border-radius: 24px; flex-shrink: 0; }
.step.reverse { flex-direction: row-reverse; }
.step .num { display: block; font-family: var(--sans); font-size: 48px; line-height: 56px; font-weight: 500; margin-bottom: 24px; }
.step h3 { font-size: 24px; margin-bottom: 16px; }
.step p { font-size: 16px; line-height: 21px; max-width: 496px; }

/* Gallery marquee */
.gallery { position: relative; overflow: hidden; background: #fdfcfa; }
.gallery-edge { position: absolute; left: 0; width: 100%; height: 40px; display: block; z-index: 3; pointer-events: none; }
.gallery-edge.top { top: -1px; }
.gallery-edge.bottom { bottom: -1px; }
/* Circles at 60% of Figma size with 70px of breathing room above and below */
.gallery-stage { position: relative; aspect-ratio: 1440 / 584; cursor: grab; touch-action: pan-y; user-select: none; }
.gallery-stage.dragging { cursor: grabbing; }
.gallery-track { position: absolute; left: 0; top: 0; height: 584px; transform-origin: 0 0; }
.g-circle { position: absolute; border-radius: 50%; overflow: hidden; will-change: transform; }
.g-circle img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
/* Meet the Founder: Figma-size stage, scaled to the page width */
/* Top half matches the cream section above, bottom half the dark section below, so both wavy edges read right */
.founder { position: relative; overflow: hidden; aspect-ratio: 1440 / 900; background: linear-gradient(#f8f6ef 50%, #1d2612 50%); }
.founder-photo { filter: grayscale(1) contrast(1.05); z-index: 2; } /* sits over the bottom wave, as in Figma */
.founder-copy { display: flex; flex-direction: column; color: #313d1f; }
.founder-copy h2 { font-size: 48px; line-height: 56px; font-weight: 700; width: 470px; margin-bottom: 14px; }
.founder-copy p { font-family: var(--sans); font-size: 24px; line-height: 31.2px; width: 609px; }
.founder-copy p + p { margin-top: 31.2px; }
.founder-role { font-family: var(--sans); font-size: 24px; line-height: 31.2px; font-weight: 500; color: #313d1f; }
.founder-sign { overflow: hidden; }


/* More ways */
.more { background: linear-gradient(180deg, #1d2612 0%, #0b0f07 100%); color: #fff; padding: 160px 0 150px; }
.more .split-head h2 { font-size: 40px; line-height: 40px; max-width: none; }
.more .split-head p { font-size: 16px; line-height: 26px; max-width: 530px; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 55px; }
.more-card { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 413.33 / 552; box-shadow: 0 4px 134px rgba(20, 35, 2, 0.2); }
.more-card .mc-line path { fill: none; stroke-width: 24.21; stroke-dasharray: 1; stroke-dashoffset: 0; }
.mc-copy { display: flex; flex-direction: column; gap: 16px; z-index: 2; }
.mc-copy h3 { font-family: var(--sans); font-weight: 700; color: #000; }
.mc-copy p { font-size: 16px; line-height: 20.8px; color: #616161; }
.mc-copy.on-dark h3 { color: #fff; }
.mc-copy.on-dark p { color: #d9d9d9; }
.mc-phone img { max-width: none; }
.mc-phone, .mc-event { will-change: transform; }
.mc-event { border-radius: 11.35px; box-shadow: 0 4px 54px rgba(20, 30, 8, 0.45); }

/* CTA */
.cta {
  background: url("assets/cta-bg.webp") center / cover no-repeat, var(--green-deep);
  color: #fff; padding: 170px 80px 160px 188px;
}
.cta-copy { max-width: 630px; }
.stars { font-size: 14px; margin-bottom: 16px; }
.stars span { color: #f5b100; letter-spacing: 2px; }
.cta h2 { font-size: 48px; line-height: 56px; margin-bottom: 16px; }
.cta-copy > p:not(.stars) { color: rgba(255, 255, 255, 0.8); font-size: 16px; line-height: 21px; }
.cta .stores { justify-content: flex-start; }

/* Footer */
.footer { background: var(--green-deep); color: #fff; padding: 80px 80px 0; overflow: hidden; }
.footer-top { display: flex; gap: 80px; padding-left: 108px; }
.footer-brand { max-width: 380px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.footer-brand .brand { color: #fff; }
.footer-links { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.footer-links h4 { color: rgba(255, 255, 255, 0.45); font-weight: 500; font-size: 14px; }
.newsletter { margin-left: auto; max-width: 420px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.newsletter .field { display: flex; margin-top: 16px; padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.newsletter input { flex: 1; background: none; border: 0; color: #fff; padding: 0 16px; font: inherit; outline: none; }
.newsletter button { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 4px 4px 4px 16px; background: #fff; color: var(--green); font: 700 14px var(--body); cursor: pointer; }
.footer-legal { display: flex; flex-direction: column; gap: 8px; margin-top: 40px; padding-left: 108px; font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.footer-wordmark { font-family: var(--sans); font-weight: 700; font-size: 250px; line-height: 316px; color: rgba(255, 255, 255, 0.08); white-space: nowrap; text-align: center; margin-bottom: -60px; }

/* Responsive */
@media (max-width: 1100px) {
  .section, .inner { padding-left: 24px; padding-right: 24px; }
  .trip-map { margin-left: -24px; margin-right: -24px; }
  .hero { padding: 20px 16px 100px; }
  .nav-right a:not(.btn-solid) { display: none; }
  .hero h1 { font-size: 40px; line-height: 48px; }
  .hero-wordmark, .footer-wordmark { font-size: 22vw; line-height: 1.2; }
  .split-head { flex-direction: column; }
  .split-head h2 { font-size: 36px; line-height: 42px; }
  .bento, .bento.wide { width: 100%; }
  .perks { flex-direction: column; gap: 32px; }
  .step, .step.reverse { flex-direction: column; gap: 32px; align-items: flex-start; }
  .step > img, .step-card, .step-media { width: 100%; }
  .more-grid { grid-template-columns: 1fr; max-width: 413px; }
  .cta { padding: 100px 24px; }
  .footer { padding: 60px 24px 0; }
  .footer-top { flex-direction: column; gap: 40px; padding-left: 0; }
  .newsletter { margin-left: 0; }
  .footer-legal { padding-left: 0; }
  .checks .c3 { font-size: 22px; } .checks .c4 { font-size: 26px; }
  .stores img { width: 170px; height: auto; }
}

/* Download buttons: hover animation adapted from Uiverse.io (gharsh11032000) to the brand colours.
   A circle floods the button, the arrow slides out right while a second one slides in left. */
.animated-button {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 0 58px 0 20px; border-radius: 43px;
  box-shadow: 0 0 0 2px rgba(142, 224, 58, 0.55);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button img {
  position: absolute; top: 6px; width: 40px; height: 40px; z-index: 2;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button .arr-1 { right: 6px; }
.animated-button .arr-2 { left: -25%; filter: invert(0.85); } /* dark circle so it reads on the light fill */
.animated-button .text {
  position: relative; z-index: 1;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button .circle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 20px; height: 20px; border-radius: 50%; background: #ecf6e0; opacity: 0; z-index: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.animated-button:hover { box-shadow: 0 0 0 12px rgba(142, 224, 58, 0); color: #313d1f; border-radius: 14px; }
.animated-button:hover .arr-1 { right: -25%; }
.animated-button:hover .arr-2 { left: 6px; }
.animated-button:hover .text { transform: translateX(38px); }
.animated-button:hover .circle { width: 260px; height: 260px; opacity: 1; }
.animated-button:active { scale: 0.95; box-shadow: 0 0 0 4px rgba(142, 224, 58, 0.8); }
@media (prefers-reduced-motion: reduce) {
  .animated-button, .animated-button * { transition: none; }
}

/* How it works, step 1 card: road reveal along its centre line, points pop as it arrives */
.step-card { position: relative; overflow: hidden; aspect-ratio: 630 / 491; }
.s1-topo { background: #fff; opacity: 0.05; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.s1-phone { overflow: hidden; }
.s1-phone img { max-width: none; }
.s1-reveal-stroke { fill: none; stroke: #fff; stroke-width: 70; stroke-linecap: round; }
.s1-live { fill: none; stroke: #9be04a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; filter: drop-shadow(0 0 6px rgba(155, 224, 74, 0.8)); }
.s1-dot { fill: #fff; stroke: #6aa72b; stroke-width: 3; opacity: 0; }
.s1-point::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid #9be04a; opacity: 0; pointer-events: none; }
.s1-point.is-red::after { border-color: #ff8a6e; }
.s1-point.ping::after { animation: s1-ping 1s ease-out; }
@keyframes s1-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
.s1-dashes { fill: none; stroke: #fff; stroke-width: 1.5; stroke-dasharray: 7 6; opacity: 0.9; animation: s1-flow 1.2s linear infinite; }
@keyframes s1-flow { to { stroke-dashoffset: -13; } }
.s1-point {
  width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6.78px #ecf6e0;
  display: grid; place-items: center; font: 700 26px/1 var(--body); color: #313d1f;
}
.s1-point.is-red { box-shadow: 0 0 0 6.78px #ffd8ce; color: #d53820; }
@media (prefers-reduced-motion: reduce) {
  .s1-live, .s1-dot { display: none; }
  .s1-dashes { animation: none; }
}

/* Step 2 & 3 cards: real-text numbers over the image that roll into place like an odometer.
   Sizes use container units so they scale with the card (630px design width). */
.step-media { position: relative; overflow: hidden; container-type: inline-size; line-height: 0; }
.step-media > img { width: 100%; display: block; }
.roll {
  position: absolute; display: flex; align-items: center; white-space: nowrap;
  font-family: var(--body); line-height: 1; letter-spacing: -0.01em;
  font-size: calc(var(--fs) / 630 * 100cqw);
  padding: 0 0.15em;
}
.roll i { font-style: normal; font-size: 0.7em; color: #8e8c87; margin-left: 0.04em; }
.roll .digit { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: middle; }
.roll .strip { display: flex; flex-direction: column; line-height: 1.2em; }
.roll .strip span { height: 1.2em; }
@media (prefers-reduced-motion: reduce) { .roll .strip { transition: none !important; } }

/* CTA + footer: Figma-size stage scaled to the page */
.site-footer { position: relative; overflow: hidden; aspect-ratio: 1440 / 1156; background: #303c1c; color: #fff; }
.cta-copy { display: flex; flex-direction: column; }
.cta-stars { display: flex; align-items: center; gap: 6px; font: 600 16px/24px var(--body); margin-bottom: 20px; }
.cta-copy h2 { font-family: var(--sans); font-size: 48px; line-height: 56px; font-weight: 700; width: 460px; margin-bottom: 10px; }
.cta-copy p { font-family: var(--sans); font-size: 16px; line-height: 24px; }
.cta-stores { display: flex; gap: 19px; margin: 0; }
.cta-stores img { width: 251px; height: auto; }
.foot-brand { display: flex; flex-direction: column; gap: 12px; }
.foot-brand .brand { gap: 13.94px; font-size: 22.3px; line-height: 29px; }
.foot-brand p { font-size: 14px; line-height: 18.2px; color: rgba(255, 255, 255, 0.7); width: 376px; }
.foot-social { display: inline-flex; align-items: center; gap: 4px; margin-top: 18px; font-size: 14px; line-height: 18.2px; color: rgba(255, 255, 255, 0.7); }
.foot-links { display: flex; flex-direction: column; gap: 9px; }
.foot-links h4 { font-size: 10.5px; font-weight: 500; letter-spacing: -0.375px; color: #7b7b7b; margin-bottom: 4.5px; }
.foot-links a { font-size: 12px; line-height: 15.6px; font-weight: 500; padding: 1.5px 0 0.75px; }
.foot-news {
  width: 524px; height: 144px; border-radius: 24px; padding: 25px 39px; display: flex; flex-direction: column; gap: 23px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(16px);
}
.foot-news p { font-size: 14px; line-height: 18.2px; white-space: nowrap; }
.foot-field { display: flex; gap: 8px; }
.foot-field input {
  width: 284px; height: 52px; border-radius: 999px; padding: 0 17px; font: 14px var(--body); color: #fff;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); outline: none;
}
.foot-field input::placeholder { color: rgba(255, 255, 255, 0.6); }
.foot-field button {
  height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 6px 0 20px; border: 0; border-radius: 43px;
  background: #fff; color: #313d1f; font: 700 16px/20.8px var(--body); cursor: pointer;
}
.foot-legal {
  display: flex; flex-direction: column; gap: 14px; padding: 10.75px 0 10px;
  border-top: 0.75px solid rgba(255, 255, 255, 0.15); font-size: 12px; line-height: 15.6px; color: rgba(255, 255, 255, 0.8);
}
.foot-wordmark {
  font: 700 242.53px/315.28px var(--body); text-align: right; white-space: nowrap;
  background: linear-gradient(rgba(49, 61, 31, 0.24), rgba(255, 255, 255, 0.24) 85.33%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Line wordmark canvas (see script.js): the text stays for layout but the canvas draws it */
.lw-on { color: transparent !important; -webkit-text-fill-color: transparent; }
.lw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Footer line field fades in under the CTA photo instead of starting on a hard edge */
.foot-lines { -webkit-mask-image: linear-gradient(transparent, #000 28%); mask-image: linear-gradient(transparent, #000 28%); }
/* Waypoint cursor that travels the road through the three More-ways cards (each card clips it) */
.mc-cursor-at { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.mc-cursor-layer { pointer-events: none; }

/* Inner pages (How It Works, For Trappers): compact version of the landing hero */
.hero-page { padding-bottom: 150px; }
.hero-page .hero-copy { margin-top: 90px; max-width: 900px; }
.hero-page .hero-copy p { max-width: 680px; }
.nav-right a[aria-current="page"] { color: #b9de7a; }
@media (max-width: 1100px) {
  .trappers .split-head > div { width: auto; }
}

/* ---------- Inner pages (How It Works, For Trappers) ---------- */
.pg-section { padding: 110px 0; }
.pg-wrap { max-width: 1440px; margin: 0 auto; padding: 0 80px; }
.pg-section .split-head { margin-bottom: 56px; }
.pg-muted { color: #65645f; font-size: 18px; line-height: 26px; margin-top: 16px; max-width: 420px; }
.pg-muted a { color: #4c6b1f; text-decoration: underline; }
.pg-center { text-align: center; }

/* Dark band with the same wavy cream edges as the landing page */
.pg-dark {
  position: relative; color: #fff; padding: 150px 0;
  background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(74, 112, 24, 0.5) 0%, rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, #0a0f05 0%, #1a2a0a 55%, #0d1406 100%);
}
.pg-edge { position: absolute; left: 0; width: 100%; height: 40px; display: block; }
.pg-edge.top { top: -1px; }
.pg-edge.bottom { bottom: -1px; }
.pg-dark h2 { font-family: var(--sans); font-size: 48px; line-height: 56px; font-weight: 700; margin: 16px 0 18px; }
.pg-lead { font-family: var(--sans); font-size: 20px; line-height: 28px; color: rgba(255, 255, 255, 0.85); max-width: 560px; }
.pg-lead-dark { color: #313d1f; }
.pg-section .pg-split h2 { font-family: var(--sans); font-size: 48px; line-height: 56px; font-weight: 700; margin: 16px 0 18px; }

.pg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.pg-checks { list-style: none; display: grid; gap: 18px; margin-top: 36px; }
.pg-checks li { position: relative; padding-left: 40px; display: flex; flex-direction: column; gap: 4px; }
.pg-checks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #627e30 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.pg-checks b { font-size: 17px; font-weight: 600; }
.pg-checks span { font-size: 15px; line-height: 21px; color: rgba(255, 255, 255, 0.7); }
.pg-checks.on-light span { color: #65645f; }
.pg-btn { margin-top: 36px; }

.pg-photo { position: relative; margin: 0; }
.pg-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.pg-chip {
  position: absolute; left: 6%; bottom: 8%; display: flex; align-items: center; gap: 12px;
  background: #fff; color: #211f1b; border-radius: 16px; padding: 12px 18px 12px 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.pg-chip b { display: block; font-size: 15px; }
.pg-chip small { font-size: 12.5px; color: #65645f; }
.pg-chip-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #ecf6e0; color: #4c6b1f; }

/* How It Works: four-step timeline joined by a dashed trail */
.pg-timeline { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.pg-timeline::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 54px; border-top: 2px dashed #c2daa1; z-index: 0;
}
.pg-timeline li {
  position: relative; z-index: 1; background: #fff; border-radius: 24px; padding: 28px 26px 26px;
  box-shadow: 0 4px 40px rgba(49, 61, 31, 0.07); display: flex; flex-direction: column; gap: 10px;
}
.pg-num {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px;
  background: #313d1f; color: #fff; font: 700 18px var(--body); box-shadow: 0 0 0 6px #ecf6e0;
}
.pg-timeline h3, .pg-records h3, .pg-people h3 { font-family: var(--sans); font-size: 22px; line-height: 28px; font-weight: 700; color: #211f1b; }
.pg-timeline p, .pg-records p, .pg-people p { font-size: 15px; line-height: 22px; color: #65645f; }
.pg-tag { margin-top: auto; align-self: flex-start; font-size: 12.5px; font-weight: 500; color: #4c6b1f; background: #ecf6e0; padding: 6px 12px; border-radius: 999px; }

/* How It Works: record cards */
.pg-records { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-records article { background: #fff; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 4px 40px rgba(49, 61, 31, 0.07); }
.pg-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #313d1f; color: #c2daa1; font-size: 20px; margin-bottom: 6px; }
.pg-records dl { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #f3f6ee; border: 1px solid #e3ebd4; }
.pg-records dt { font-size: 14px; font-weight: 600; color: #211f1b; }
.pg-records dd { font-size: 13px; color: #65645f; margin: 2px 0 0; }

/* How It Works: FAQ */
.pg-faq-wrap { padding-bottom: 160px; }
.pg-faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: start; }
.pg-faq-grid h2 { font-family: var(--sans); font-size: 48px; line-height: 56px; font-weight: 700; margin-top: 16px; color: #313d1f; }
.pg-faq { display: grid; gap: 12px; }
.pg-faq details { background: #fff; border-radius: 18px; padding: 22px 26px; box-shadow: 0 4px 30px rgba(49, 61, 31, 0.06); }
.pg-faq summary { cursor: pointer; list-style: none; font: 600 18px/26px var(--body); color: #211f1b; display: flex; justify-content: space-between; gap: 20px; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: "+"; font-size: 24px; line-height: 24px; color: #627e30; transition: transform 0.3s; }
.pg-faq details[open] summary::after { transform: rotate(45deg); }
.pg-faq details p { margin-top: 12px; font-size: 16px; line-height: 24px; color: #65645f; }

/* For Trappers: people cards */
.pg-people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-people article { background: #fff; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 40px rgba(49, 61, 31, 0.07); }
.pg-people img { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; box-shadow: 0 0 0 6px #ecf6e0; }
.pg-people ul { list-style: none; margin-top: 8px; display: grid; gap: 8px; border-top: 1px solid #ecebe5; padding-top: 16px; }
.pg-people li { font-size: 14.5px; color: #313d1f; padding-left: 22px; position: relative; }
.pg-people li::before { content: ""; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: #7bb32e; }

/* For Trappers: stats band */
.pg-stats-band h2 { margin-bottom: 56px; }
.pg-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pg-stats div { text-align: center; padding: 32px 16px; border-radius: 24px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.pg-stats b { display: block; font-family: var(--sans); font-size: 52px; line-height: 60px; font-weight: 700; color: #b9de7a; }
.pg-stats span { font-size: 15px; color: rgba(255, 255, 255, 0.75); }

/* For Trappers: testimonials */
.pg-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pg-quotes blockquote { margin: 0; background: #313d1f; color: #fff; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.pg-quotes blockquote:nth-child(2) { background: #fff; color: #211f1b; box-shadow: 0 4px 40px rgba(49, 61, 31, 0.07); }
.pg-quotes p { font-family: var(--sans); font-size: 19px; line-height: 28px; }
.pg-quotes footer { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.pg-quotes footer span { font-size: 14px; opacity: 0.7; }

/* For Trappers: season strip */
.pg-season-wrap { padding-top: 0; }
.pg-season { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pg-season li { background: #fff; border-radius: 20px; padding: 22px 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 4px 30px rgba(49, 61, 31, 0.06); }
.pg-season span { font: 700 13px var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: #7b7b7b; }
.pg-season b { font-family: var(--sans); font-size: 19px; color: #211f1b; }
.pg-season small { font-size: 13.5px; color: #65645f; }
.pg-season li.is-hot { background: #313d1f; }
.pg-season li.is-hot span { color: #b9de7a; }
.pg-season li.is-hot b { color: #fff; }
.pg-season li.is-hot small { color: rgba(255, 255, 255, 0.75); }

@media (max-width: 1100px) {
  .pg-wrap { padding: 0 24px; }
  .pg-section { padding: 80px 0; }
  .pg-dark { padding: 110px 0; }
  .pg-split, .pg-faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .pg-timeline, .pg-records, .pg-people, .pg-quotes { grid-template-columns: 1fr; }
  .pg-timeline::before { display: none; }
  .pg-stats { grid-template-columns: 1fr 1fr; }
  .pg-season { grid-template-columns: repeat(3, 1fr); }
  .pg-dark h2, .pg-section .pg-split h2, .pg-faq-grid h2 { font-size: 36px; line-height: 42px; }
  .pg-photo { max-width: 460px; margin: 0 auto; }
}

/* ---------- Phones: founder + footer switch from the scaled desktop stage to a stacked layout ---------- */
@media (max-width: 760px) {
  /* Every section heading the same size on mobile */
  .split-head h2, .trappers .split-head h2, .more .split-head h2, .founder-copy h2, .cta-copy h2,
  .pg-dark h2, .pg-section .pg-split h2, .pg-faq-grid h2 {
    font-size: 34px; line-height: 40px; width: auto; max-width: none;
  }

  /* Meet the Founder: copy first, photo underneath */
  .founder { aspect-ratio: auto; background: #f1f0eb; padding-top: 72px; }
  .founder-stage {
    position: relative !important; transform: none !important; width: auto !important; height: auto !important;
    display: flex; flex-direction: column; padding: 0 24px;
  }
  .founder-stage > * { position: relative !important; left: auto !important; top: auto !important; }
  .founder-band, .founder-edge-top { display: none !important; }
  .founder-paper { position: absolute !important; inset: 0; width: auto !important; height: auto !important; }
  .founder-copy, .founder-role, .founder-sign { width: auto !important; z-index: 1; }
  .founder-copy p { width: auto; font-size: 18px; line-height: 26px; }
  .founder-copy p + p { margin-top: 18px; }
  .founder-role { margin-top: 28px; font-size: 18px; }
  .founder-sign { margin-top: 10px; flex-shrink: 0; }
  .founder-photo { width: 112% !important; height: auto !important; margin: 32px -6% 0; max-width: none; }
  .founder-edge-bottom {
    width: calc(100% + 48px) !important; height: 60px !important; margin: -50px -24px 0;
  }

  /* CTA + footer: photo band, then copy, stores, brand, links, newsletter, legal, wordmark */
  .site-footer { aspect-ratio: auto; background: #303c1c; }
  .footer-stage {
    position: relative !important; transform: none !important; width: auto !important; height: auto !important;
    display: flex; flex-direction: column; padding: 0 24px 0;
  }
  .footer-stage > * { position: relative !important; left: auto !important; top: auto !important; }
  .ft-bg, .ft-glow { display: none !important; }
  /* Cream strip + wave at true proportions, so no photo shows above or below the wave */
  .ft-cream { display: block; order: 0; width: calc(100% + 48px) !important; height: 2.8vw !important; margin: 0 -24px; z-index: 2; }
  .ft-wave { order: 0; width: calc(100% + 48px) !important; height: auto !important; aspect-ratio: 1440 / 106; margin: -2.8vw -24px 0; z-index: 2; }
  .ft-photo {
    order: 1; width: calc(100% + 48px) !important; height: 300px !important; margin: -4.4vw -24px 0;
    -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent);
  }
  .ft-photo img { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: 70% 50%; }
  .ft-photo > div { background: linear-gradient(0deg, #303c1c 0%, rgba(48, 60, 28, 0) 70%) !important; }
  .cta-copy { order: 2; width: auto !important; margin-top: -40px; }
  .cta-copy h2 { width: auto; }
  .cta-stores { order: 3; margin-top: 24px; gap: 10px; flex-wrap: wrap; }
  .cta-stores img { width: calc((100vw - 58px) / 2); max-width: 170px; }
  .foot-brand { order: 4; width: auto !important; margin-top: 64px; }
  .foot-brand p { width: auto; }
  .foot-links { order: 5; width: auto !important; margin-top: 32px; }
  .foot-links a { font-size: 15px; }
  .foot-news { order: 6; width: auto !important; height: auto !important; margin-top: 32px; padding: 22px; }
  .foot-news p { white-space: normal; }
  .foot-field { flex-direction: column; }
  .foot-field input { width: 100%; }
  .foot-field button { align-self: flex-start; }
  .foot-legal { order: 7; width: auto !important; margin-top: 32px; }
  .foot-wordmark {
    order: 8; width: auto !important; font-size: 23vw; line-height: 1.1; text-align: center; margin: 24px -24px -2vw;
  }
  /* Flowing-line field behind the lower footer, like desktop; the canvas spells out the wordmark */
  .foot-lines {
    position: absolute !important; left: 0 !important; top: auto !important; bottom: 0; z-index: 0;
    width: 100% !important; height: 640px !important;
  }
  .foot-wordmark.lw-on { background: none; }
}
@media (max-width: 760px) {
  /* Gallery: taller band on phones so the circles stay a good size */
  .gallery-stage { aspect-ratio: auto; height: 360px; }
}

/* Language selector (EN / ES) in the nav */
.lang-switch {
  display: inline-flex; padding: 3px; border-radius: 999px; gap: 2px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
}
.lang-switch button {
  border: 0; background: none; color: rgba(255, 255, 255, 0.75); cursor: pointer;
  font: 600 13px/1 var(--body); padding: 8px 11px; border-radius: 999px; transition: background 0.25s, color 0.25s;
}
.lang-switch button:hover { color: #fff; }
.lang-switch button[aria-pressed="true"] { background: #fff; color: #313d1f; }
.lang-switch button:focus-visible { outline: 2px solid #b9de7a; outline-offset: 2px; }
@media (max-width: 760px) {
  .nav-right { gap: 10px; }
  .lang-switch button { padding: 7px 9px; font-size: 12px; }
}
@media (max-width: 1100px) {
  /* Step cards never wider than the screen */
  .step > img, .step-card, .step-media { width: 100% !important; max-width: 100%; }
}
@media (max-width: 760px) {
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pg-stats div { padding: 22px 10px; }
  .pg-stats b { font-size: 36px; line-height: 44px; }
  .pg-season { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Step cards slide in from the sides; clip so they can't widen the page before they arrive */
.section.how { overflow-x: clip; }

/* ---------- Phones: nav button + hero checklist ---------- */
@media (max-width: 760px) {
  .nav { padding: 8px 8px 8px 14px; }
  .brand { white-space: nowrap; font-size: 15px; gap: 8px; }
  .brand img { width: 28px; height: auto; }
  /* Compact, single-line download button */
  .nav .btn-solid.animated-button {
    height: 42px; padding: 0 44px 0 14px; font-size: 13.5px; white-space: nowrap;
  }
  .nav .animated-button img { top: 5px; width: 32px; height: 32px; }
  .nav .animated-button .arr-1 { right: 5px; }
  .nav .animated-button:hover .arr-2 { left: 5px; }
  .nav .animated-button:hover .text { transform: translateX(30px); }

  /* Checklist: each line fits on one row with its tick, sizes step up gently toward the last line */
  .checks { gap: 8px; padding: 0 8px; }
  .checks li { display: block; max-width: 100%; text-align: center; text-wrap: balance; }
  .checks li span { margin-right: 6px; }
  .checks .c1 { font-size: 14.5px; }
  .checks .c2 { font-size: 15.5px; }
  .checks .c3 { font-size: 16.5px; }
  .checks .c4 { font-size: 20px; }
}
/* Touch screens have no hover: keep the button in its normal state after a tap */
@media (hover: none) {
  .animated-button:hover { box-shadow: 0 0 0 2px rgba(142, 224, 58, 0.55); color: inherit; border-radius: 43px; }
  .animated-button:hover .circle { width: 20px; height: 20px; opacity: 0; }
  .animated-button:hover .arr-1 { right: 6px; }
  .animated-button:hover .arr-2 { left: -25%; }
  .animated-button:hover .text { transform: none; }
  .nav .animated-button:hover .arr-1 { right: 5px; }
}

/* ---------- Phones: nav fits logo, language switch and button without overlap ---------- */
@media (max-width: 760px) {
  .nav { gap: 8px; }
  .nav-right { gap: 8px; flex-shrink: 0; }
  .brand { min-width: 0; flex-shrink: 1; overflow: hidden; }
  .brand span { overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  /* Narrow phones: the logo mark alone carries the brand so the controls have room */
  .brand span { display: none; }
  .nav .btn-solid.animated-button { padding: 0 42px 0 12px; font-size: 13px; }
}
/* Perk icons have a dark backdrop; blend the whole column so the reveal's transform can't isolate it */
.perks > div { mix-blend-mode: screen; }
/* Offline card: Sept-Îles chips cycling in from the back */
.ochips { position: absolute; left: 119px; top: 308px; width: 285px; height: 52px; z-index: 3; }
.ochip { position: absolute; inset: 0; border-radius: 12px; background-size: 522px 489px; background-position: -119px -308px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); transform-origin: 50% 100%; will-change: transform, opacity; }
/* Store buttons: lift on hover, press on tap */
.cta-stores a, .cta-stores img { transition: transform .25s ease, filter .25s ease; }
.cta-stores img { border-radius: 10px; }
.cta-stores img:hover { transform: translateY(-3px); filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.cta-stores img:active { transform: translateY(0) scale(.97); filter: none; }
@media (max-width: 760px) {
  .cta-stores { flex-direction: column; width: 100%; gap: 12px; }
  .cta-stores a { display: block; width: 100%; }
  .cta-stores img { width: 100% !important; max-width: none !important; }
  .foot-wordmark { font-size: 16vw !important; margin: 24px 0 -1vw !important; padding: 0 !important; white-space: nowrap; }
}
/* Nav: links + download live in a menu; on desktop it's inline */
.nav-menu { display: contents; }
.nav-menu > a:not(.btn-solid) { order: -1; }
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .brand { flex-shrink: 0 !important; overflow: visible !important; }
  .brand img { width: 30px !important; display: block; }
  .brand span { display: inline !important; }
  .nav { position: relative; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px;
    padding: 0 11px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); cursor: pointer; }
  .nav-toggle span { height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-menu { display: flex; flex-direction: column; gap: 4px; position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 50;
    padding: 12px; border-radius: 20px; background: rgba(20,26,12,.96); border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s; }
  .nav.open .nav-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-menu > a:not(.btn-solid) { display: block !important; padding: 12px 10px; color: #fff; font-size: 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-menu .btn-solid.animated-button { display: flex !important; margin-top: 8px; justify-content: center; font-size: 15px !important; padding: 0 48px 0 16px !important; }
  /* Store buttons: stacked, comfortable size rather than edge to edge */
  .cta-stores img { width: 200px !important; }
  .cta-stores a { width: auto; }
}
/* Same rendered title/subtitle size on every bento card (see evenBentoText) */
.bento .card-copy h3 { font-size: calc(28px * var(--fix, 1)); line-height: 1.2; }
.bento .card-copy p { font-size: calc(16px * var(--fix, 1)); line-height: 1.3; }
.bento .card-copy { gap: calc(10px * var(--fix, 1)); }
@media (max-width: 760px) {
  .bento .card-copy { left: calc(22px * var(--inv, 1)); right: calc(22px * var(--inv, 1)); top: calc(24px * var(--inv, 1)); }
  .bento .card-copy h3 { white-space: normal; }
}
/* The canvas draws the footer word; drop the gradient-filled text underneath on every size */
.foot-wordmark.lw-on { background: none !important; }
/* Desktop: language switch matches the 52px Download button */
.nav .lang-switch { height: 52px; align-items: center; padding: 5px; }
.nav .lang-switch button { height: 40px; min-width: 46px; padding: 0 14px; font-size: 14px; }
.nav-home { display: none; }

/* Mobile: full-screen Trapline menu that grows out of the menu button */
@media (max-width: 760px) {
  .nav .lang-switch { height: 42px; padding: 3px; }
  .nav .lang-switch button { height: 34px; min-width: 38px; padding: 0 10px; font-size: 13px; }
  .brand, .nav .lang-switch, .nav-toggle { position: relative; z-index: 61; }
  .nav-toggle { background: rgba(255,255,255,.08); }
  .nav.open .nav-toggle { background: #b9de7a; border-color: #b9de7a; }
  .nav.open .nav-toggle span { background: #313d1f; }
  .nav-menu {
    position: fixed !important; inset: 0 !important; top: 0 !important; z-index: 60;
    display: flex !important; flex-direction: column; justify-content: center; gap: 0 !important;
    padding: 110px 28px 40px !important; border: 0 !important; border-radius: 0 !important;
    background: radial-gradient(120% 70% at 85% 0%, #4b5d2c 0%, #313d1f 45%, #1d2512 100%) !important;
    backdrop-filter: none !important;
    clip-path: circle(0 at calc(100% - 44px) 44px); opacity: 1 !important; visibility: hidden !important; transform: none !important;
    transition: clip-path .6s cubic-bezier(.77,0,.18,1), visibility 0s .6s !important;
  }
  .nav.open .nav-menu { clip-path: circle(150% at calc(100% - 44px) 44px); visibility: visible !important;
    transition: clip-path .7s cubic-bezier(.77,0,.18,1), visibility 0s !important; }
  .nav-menu > a:not(.btn-solid) {
    display: flex !important; align-items: baseline; gap: 14px; padding: 18px 0 !important;
    font: 700 38px/1.05 var(--body) !important; letter-spacing: -.02em; color: #f8f6ef !important;
    border-bottom: 1px solid rgba(248,246,239,.12) !important;
    opacity: 0; transform: translateY(28px); transition: opacity .3s, transform .3s, color .2s;
  }
  .nav-menu > a:not(.btn-solid)::before { font: 600 13px/1 var(--body); color: #b9de7a; letter-spacing: 0; }
  .nav-menu > a:nth-child(1)::before { content: '01'; }
  .nav-menu > a:nth-child(2)::before { content: '02'; }
  .nav-menu > a:nth-child(3)::before { content: '03'; }
  .nav-menu > a[aria-current="page"] { color: #b9de7a !important; }
  .nav-menu > a:not(.btn-solid):active { color: #b9de7a !important; }
  .nav-menu .btn-solid.animated-button { margin-top: 36px !important; height: 52px; opacity: 0; transform: translateY(28px); transition: opacity .3s, transform .3s; }
  .nav.open .nav-menu > * { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), color .2s; }
  .nav.open .nav-menu > :nth-child(1) { transition-delay: .25s; }
  .nav.open .nav-menu > :nth-child(2) { transition-delay: .32s; }
  .nav.open .nav-menu > :nth-child(3) { transition-delay: .39s; }
  .nav.open .nav-menu > :nth-child(4) { transition-delay: .46s; }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 760px) {
  /* A transform or backdrop-filter on the nav would trap the fixed menu inside it */
  .nav.open { transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
/* Trip card: larger on the map (90% instead of 72%) */
.trip-pop { width: 664.2px; height: 435.6px; }
.trip-card { transform: scale(0.9); }

/* Store badges are pill-shaped: clip to a pill so no rectangle shows behind them */
.cta-stores a { display: inline-block; border-radius: 999px; line-height: 0; }
.cta-stores img, .cta-stores img:hover, .cta-stores img:active { border-radius: 999px; filter: none; }
.cta-stores a:hover img { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.cta-stores a:active img { transform: translateY(0) scale(.97); box-shadow: none; }
.cta-stores img { transition: transform .25s ease, box-shadow .25s ease; }

/* Bento copy: same rendered size on every card, with a soft halo so it reads over photos */
.bento .card-copy h3 { font-size: calc(26px * var(--inv, 1)) !important; line-height: 1.15; white-space: normal; }
.bento .card-copy p { font-size: calc(15px * var(--inv, 1)) !important; line-height: 1.4; max-width: calc(300px * var(--inv, 1)); }
.bento .card-copy { left: calc(28px * var(--inv, 1)); right: calc(28px * var(--inv, 1)); top: calc(28px * var(--inv, 1)); gap: calc(8px * var(--inv, 1)); }
.bento .card-copy:not(.on-dark) h3, .bento .card-copy:not(.on-dark) p { text-shadow: 0 0 calc(14px * var(--inv, 1)) rgba(255,255,255,.95), 0 0 calc(4px * var(--inv, 1)) rgba(255,255,255,.9); }
.bento .card-copy:not(.on-dark) p { color: #4f4c45; }
.bento .card-copy.on-dark h3, .bento .card-copy.on-dark p { text-shadow: 0 1px calc(14px * var(--inv, 1)) rgba(0,0,0,.55); }
@media (max-width: 760px) {
  .bento .card-copy h3 { font-size: calc(22px * var(--inv, 1)) !important; }
  .bento .card-copy p { font-size: calc(14px * var(--inv, 1)) !important; }
  .bento .card-copy { left: calc(22px * var(--inv, 1)); right: calc(22px * var(--inv, 1)); top: calc(24px * var(--inv, 1)); }

  /* Menu Download button: centred label, arrow centred vertically */
  .nav-menu .btn-solid.animated-button { justify-content: center !important; padding: 0 56px !important; height: 56px !important; }
  .nav-menu .btn-solid.animated-button img { top: 50% !important; margin-top: 0 !important; transform: translateY(-50%); }
}
/* Feature cards: one text measure everywhere, and a soft backing so copy never fights the art */
.bento .card-copy p { max-width: calc(290px * var(--inv, 1)) !important; }
.bento .stage::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(150px * var(--inv, 1)); z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 55%, rgba(255,255,255,0) 100%);
}
.bento .stage:has(.card-copy.on-dark)::after { background: linear-gradient(180deg, rgba(20,24,12,.7) 0%, rgba(20,24,12,.4) 55%, rgba(20,24,12,0) 100%); }
.bento .card-copy { z-index: 3 !important; }
.bento .card-copy:not(.on-dark) p { color: #55524b; }
.card-head { display: none; }
@media (max-width: 760px) {
  .bento .card-head { display: block; position: relative; z-index: 3; padding: 24px 22px 6px; background: var(--head-bg, #fff); }
  .bento .card-head::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 40px; background: linear-gradient(var(--head-bg, #fff), transparent); pointer-events: none; }
  .bento .card-head .card-copy { position: static !important; display: flex; flex-direction: column; gap: 8px !important; }
  .bento .card-head .card-copy h3 { font-size: 22px !important; line-height: 1.2; }
  .bento .card-head .card-copy p { font-size: 14px !important; line-height: 1.45; max-width: 290px !important; }
  .bento .stage::after { display: none; }
}
/* Trip photo: plain rounded rectangle, no app chrome */
.trip-photo-bar { display: none !important; }
.trip-photo { clip-path: none !important; -webkit-mask: none !important; mask: none !important; border-radius: 20px !important; overflow: hidden; }
.trip-photo-img { top: 0 !important; object-fit: cover; width: 100% !important; height: 100% !important; clip-path: none !important; -webkit-mask: none !important; mask: none !important; border-radius: 0 !important; }
/* Phones that sit on a card's bottom edge stay put (the bob showed a gap at the clip) */
.pl-phone { animation: none !important; }
.bento.journal .float:not(.still) { z-index: 2; }
/* For Trappers: testimonials as a fanned deck of cards that spreads out on scroll */
.pg-fan { position: relative; height: 520px; margin-top: 24px; }
.fan-card {
  position: absolute; left: 50%; top: 40px; width: 300px; height: 410px; margin-left: -150px;
  display: flex; flex-direction: column; gap: 22px; padding: 26px 26px 22px;
  background: #fffdf7; color: #211f1b; border-radius: 22px; border: 1px solid rgba(49,61,31,.08);
  box-shadow: 0 18px 50px rgba(49,61,31,.16), 0 2px 6px rgba(49,61,31,.06);
  transform-origin: 50% 90%; will-change: transform;
}
.fan-card.is-dark { background: #313d1f; color: #f8f6ef; border-color: rgba(255,255,255,.06); }
.fan-top { display: flex; align-items: center; justify-content: space-between; }
.fan-stars { display: flex; gap: 3px; }
.fan-stars svg { width: 17px; height: 17px; fill: #e2582c; }
.fan-card.is-dark .fan-stars svg { fill: #b9de7a; }
.fan-tag { font: 700 10px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.fan-card p { font-size: 19px; line-height: 1.42; letter-spacing: -.01em; }
.fan-card footer { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.fan-card footer img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.fan-card footer span { display: flex; flex-direction: column; gap: 2px; }
.fan-card footer b { font-size: 14px; }
.fan-card footer small { font-size: 12px; opacity: .65; }
.fan-card:hover { z-index: 10 !important; }
@media (max-width: 760px) {
  /* Phones: a swipeable row; each card tilts slightly and straightens as it arrives */
  .pg-fan { height: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 24px 24px 40px; margin: 8px -24px 0; scrollbar-width: none; }
  .pg-fan::-webkit-scrollbar { display: none; }
  .fan-card { position: relative; left: auto; top: auto; margin: 0; flex: 0 0 78%; height: auto; min-height: 360px; scroll-snap-align: center; }
  .fan-card p { font-size: 17px; }
}
.fan-tag { white-space: nowrap; }
@media (max-width: 760px) { .fan-stars svg { width: 14px; height: 14px; } .fan-top { gap: 8px; } }
/* For Trappers: book-page photo deck. Cards stand side by side in 3D; the one in the middle lies
   flat and the rest fold away like pages (positions set in animations.js) */
.flip-wrap { overflow: hidden; }
.flip-stage { position: relative; height: 560px; margin-top: 40px; perspective: 1600px; perspective-origin: 50% 45%; }
.flip-deck { position: absolute; inset: 0; transform-style: preserve-3d; }
.flip-card {
  position: absolute; left: 50%; top: 50%; width: 360px; height: 480px; margin: -240px 0 0 -180px;
  border-radius: 22px; overflow: hidden; background: #313d1f; cursor: pointer;
  box-shadow: 0 24px 60px rgba(29,37,18,.28); backface-visibility: hidden; will-change: transform;
}
.flip-card img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
/* Gallery photos are circle crops on white: show only the square inside the circle */
.flip-card.is-round img { left: -33.33%; top: -12.5%; width: 166.67%; height: 125%; object-fit: fill; } /* 3:4 card inscribed in the circle: diagonal = diameter */
.flip-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,var(--shade,0)), rgba(0,0,0,0)); pointer-events: none; }
@media (max-width: 760px) {
  .flip-stage { height: 400px; margin-top: 24px; perspective: 1000px; }
  .flip-card { width: 230px; height: 320px; margin: -160px 0 0 -115px; border-radius: 18px; }
}
/* Season planner: a timeline that fills as you scroll, cards rise onto it, "Now" marks the current month */
.pg-season-wrap .pg-wrap { position: relative; }
.ss-track { position: relative; height: 4px; border-radius: 4px; background: rgba(49,61,31,.12); margin: 8px 0 28px; overflow: hidden; }
.ss-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #b9de7a, #5e7d2c 55%, #313d1f); }
.pg-season li { position: relative; padding-top: 26px !important; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s; cursor: default; }
.pg-season li::before { content: ''; position: absolute; left: 18px; top: -34px; width: 14px; height: 14px; border-radius: 50%; background: #f8f6ef; border: 3px solid #b9c4a6; transition: border-color .3s, background .3s; }
.pg-season li.ss-on::before { border-color: #5e7d2c; background: #b9de7a; }
.pg-season li:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 22px 44px rgba(49,61,31,.18); }
.ss-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eef3e3; margin-bottom: 8px; font-style: normal; }
.ss-ic svg { width: 22px; height: 22px; fill: none; stroke: #313d1f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-season li.is-hot .ss-ic { background: rgba(185,222,122,.16); }
.pg-season li.is-hot .ss-ic svg { stroke: #b9de7a; }
.ss-now { position: absolute; top: 22px; right: 16px; font: 700 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #313d1f;
  background: #b9de7a; padding: 6px 9px; border-radius: 999px; font-style: normal; }
.ss-now::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid #b9de7a; animation: ss-ping 1.8s ease-out infinite; }
@keyframes ss-ping { from { opacity: .8; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
@media (max-width: 760px) { .ss-track { display: none; } .pg-season li::before { display: none; } }
.flip-card img { max-width: none !important; }
/* Deck photos as backgrounds: always fill the card. Circle-cropped gallery shots are zoomed so the
   3:4 card sits inside the circle (card diagonal = circle diameter = 166.67% of card width) */
.flip-card { background-color: #313d1f; background-size: cover; background-position: center; background-repeat: no-repeat; }
.flip-card.is-round { background-size: 166.67% auto; }
/* Testimonial arrows (phones only; desktop shows the whole fan) */
.fan-nav { display: none; }
@media (max-width: 760px) {
  .fan-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
  .fan-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(49,61,31,.15); background: #fff; display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 6px 18px rgba(49,61,31,.1); transition: transform .2s, background .2s, opacity .2s; }
  .fan-nav button:active { transform: scale(.92); }
  .fan-nav button:disabled { opacity: .35; }
  .fan-nav svg { width: 20px; height: 20px; fill: none; stroke: #313d1f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .fan-next svg { transform: scaleX(-1); }
  .fan-dots { display: flex; gap: 6px; }
  .fan-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(49,61,31,.2); transition: width .3s, background .3s; }
  .fan-dots i.on { width: 20px; background: #313d1f; }
}
/* For Trappers hero: highlighted word, CTAs, social proof and drifting field photos */
.hero-page { position: relative; overflow: hidden; }
.hero-page .hero-copy { position: relative; z-index: 2; }
.ft-title .ft-w, .ft-hl { display: inline-block; }
.ft-hl { position: relative; color: #b9de7a; }
.ft-hl svg { position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: .32em; overflow: visible; }
.ft-hl path { fill: none; stroke: #8ee03a; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 240; stroke-dashoffset: 240; }
.ft-cta { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 34px; }
.ft-ghost { color: #fff; font-weight: 600; font-size: 16px; padding: 14px 6px; border-bottom: 1.5px solid rgba(255,255,255,.35); transition: border-color .25s, color .25s; }
.ft-ghost:hover { color: #b9de7a; border-color: #b9de7a; }
.ft-proof { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; padding: 8px 18px 8px 8px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); text-align: left; }
.ft-faces { display: flex; }
.ft-faces img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #26301a; margin-left: -10px; }
.ft-faces img:first-child { margin-left: 0; }
.ft-proof b { display: block; color: #fff; font-size: 14px; }
.ft-proof small { color: rgba(255,255,255,.65); font-size: 12.5px; }
.ft-photos { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.ft-ph { position: absolute; margin: 0; border-radius: 18px; background-size: cover; background-position: center; border: 4px solid rgba(248,246,239,.9);
  box-shadow: 0 24px 50px rgba(0,0,0,.45); }
.ft-ph.is-round { background-size: 166% auto; }
.ft-ph figcaption { position: absolute; left: 10px; bottom: 10px; font: 600 11px/1 var(--body); color: #fff; background: rgba(20,24,12,.6); padding: 6px 9px; border-radius: 999px; backdrop-filter: blur(6px); }
.ft-ph.p1 { left: 4%; top: 28%; width: 190px; height: 240px; transform: rotate(-8deg); }
.ft-ph.p2 { left: 13%; top: 64%; width: 130px; height: 150px; transform: rotate(6deg); }
.ft-ph.p3 { right: 4%; top: 25%; width: 200px; height: 250px; transform: rotate(7deg); }
.ft-ph.p4 { right: 14%; top: 63%; width: 140px; height: 160px; transform: rotate(-5deg); }
.ft-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; color: #211f1b;
  font: 600 13px/1 var(--body); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.ft-chip i { width: 9px; height: 9px; border-radius: 50%; background: #8ee03a; box-shadow: 0 0 0 4px rgba(142,224,58,.25); }
.ft-chip.c1 { left: 15%; top: 22%; }
.ft-chip.c2 { right: 15%; top: 80%; }
@media (max-width: 1100px) { .ft-photos { display: none; } }
@media (max-width: 760px) {
  .ft-cta { flex-direction: column; gap: 10px; }
  .ft-proof { margin-top: 22px; }
}
.ft-title .ft-w { display: inline; }
.ft-hl { white-space: nowrap; }
.ft-title .ft-hl { display: inline; }
/* Hero photos live in the side gutters only: the copy column is capped so they never overlap it */
.hero-page .hero-copy { max-width: 760px !important; }
.hero-page .hero-copy h1 { font-size: clamp(44px, 4.6vw, 68px); }
.ft-ph.p1 { left: max(2%, calc(50% - 380px - 250px)); top: 24%; width: 180px; height: 225px; }
.ft-ph.p2 { left: max(6%, calc(50% - 380px - 190px)); top: 66%; width: 120px; height: 140px; }
.ft-ph.p3 { right: max(2%, calc(50% - 380px - 250px)); top: 22%; width: 180px; height: 225px; }
.ft-ph.p4 { right: max(5%, calc(50% - 380px - 210px)); top: 60%; width: 150px; height: 200px; }
.ft-chip.c1 { left: max(4%, calc(50% - 380px - 230px)); top: 18%; }
.ft-chip.c2 { right: max(3%, calc(50% - 380px - 240px)); top: 86%; }
/* Not enough gutter for the photos below this width */
@media (max-width: 1240px) { .ft-photos { display: none; } }
/* Trip map: the open card must never block the pins under/around it, so hovering any pin works */
.trip-pop { width: 590.4px !important; height: 387.2px !important; pointer-events: none; }
.trip-card { transform: scale(0.8) !important; }
.trip-pin { z-index: 6; }
.trip-link, .trip-dither { pointer-events: none; }
/* Language switch flags */
.lang-switch button { display: inline-flex; align-items: center; gap: 6px; }
.lang-switch .flag { width: 18px; height: 12px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }

/* Text links: underline that draws in from the left on hover */
.nav-menu > a:not(.btn-solid), .foot-links a, .ft-ghost, .pg-muted a, .foot-legal a, .contact-links a {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0% 1.5px; background-position: 0 100%; transition: background-size .35s cubic-bezier(.2,.8,.2,1), color .25s;
}
.nav-menu > a:not(.btn-solid):hover, .foot-links a:hover, .ft-ghost:hover, .pg-muted a:hover, .foot-legal a:hover, .contact-links a:hover { background-size: 100% 1.5px; color: #b9de7a; }
.pg-muted a:hover, .contact-links a:hover { color: #5e7d2c; }
.ft-ghost { border-bottom: 0 !important; background-size: 100% 1.5px; background-image: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.35)); }
.ft-ghost:hover { background-image: linear-gradient(#b9de7a, #b9de7a); }
@media (max-width: 760px) { .nav-menu > a:not(.btn-solid) { background-size: 0 0 !important; } }

/* Testimonial cards: lift and straighten on hover (transform set in animations.js) */
.fan-card { cursor: default; transition: box-shadow .35s; }
.fan-card:hover { box-shadow: 0 34px 70px rgba(49,61,31,.28), 0 2px 6px rgba(49,61,31,.08); }
/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.contact-info h2 { margin: 18px 0 14px; }
.contact-links { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 18px; }
.contact-links li { display: flex; align-items: center; gap: 14px; font-size: 16px; color: #211f1b; }
.contact-links small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #7b7b7b; margin-bottom: 2px; }
.contact-links a { color: #313d1f; font-weight: 600; }
.contact-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #eef3e3; flex: none; }
.contact-ic svg { width: 22px; height: 22px; fill: none; stroke: #313d1f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact-form { background: #fff; border-radius: 28px; padding: 36px; box-shadow: 0 10px 50px rgba(49,61,31,.08); display: flex; flex-direction: column; gap: 18px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; color: #211f1b; }
.contact-form input, .contact-form select, .contact-form textarea {
  font: 400 16px/1.4 var(--body); color: #211f1b; background: #f8f6ef; border: 1.5px solid transparent; border-radius: 14px; padding: 14px 16px;
  transition: border-color .2s, background .2s; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: #5e7d2c; background: #fff; }
.contact-form .btn-solid { align-self: flex-start; border: 0; cursor: pointer; font-family: inherit; }
.cf-note { font-size: 13px; color: #7b7b7b; margin: 0; }
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .cf-row { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
}
.contact-info h2 { font-family: var(--sans); font-size: 48px; line-height: 56px; font-weight: 700; color: #313d1f; }
@media (max-width: 760px) { .contact-info h2 { font-size: 36px; line-height: 42px; } }
@media (max-width: 760px) {
  .nav-menu > a:nth-child(4)::before { content: '04'; }
  .nav.open .nav-menu > :nth-child(5) { transition-delay: .53s; }
  .nav-menu > a:not(.btn-solid) { font-size: 34px !important; padding: 14px 0 !important; }
}
/* Season timeline: dots sit on the bar itself (not on the tilting cards) so line and dots read as one */
.ss-track { overflow: visible; margin-bottom: 34px; }
.ss-fill { border-radius: 4px; }
.pg-season li::before { display: none !important; }
.ss-dot { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: #f8f6ef; border: 3px solid #c9d1b8; transition: border-color .3s, background .3s, transform .3s; }
.ss-dot.ss-on { border-color: #5e7d2c; background: #b9de7a; transform: scale(1.1); }
/* How It Works hero: step strip + floating app moments */
.hw-steps { list-style: none; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 0; margin: 30px 0 0; flex-wrap: wrap; }
.hw-steps li { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); font: 600 14px/1 var(--body);
  transition: background .4s, color .4s, border-color .4s, transform .4s; }
.hw-steps li b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(185,222,122,.15); color: #b9de7a; font-size: 11px; }
.hw-steps li:not(:last-child)::after { content: ''; position: absolute; right: -10px; top: 50%; width: 10px; height: 1.5px; background: rgba(255,255,255,.25); }
.hw-steps li.is-on { background: #b9de7a; color: #313d1f; border-color: #b9de7a; transform: translateY(-2px); }
.hw-steps li.is-on b { background: #313d1f; color: #b9de7a; }
.hw-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 18px; background: #fff; color: #211f1b;
  box-shadow: 0 18px 40px rgba(0,0,0,.35); text-align: left; }
.hw-card b { display: block; font-size: 14px; }
.hw-card small { font-size: 12px; color: #65645f; }
.hw-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #eef3e3; font-style: normal; }
.hw-ic svg { width: 20px; height: 20px; fill: none; stroke: #313d1f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hw-ic.is-ok { background: #313d1f; } .hw-ic.is-ok svg { stroke: #b9de7a; stroke-width: 2.4; }
.hw-bars { display: flex; align-items: flex-end; gap: 3px; width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: #fdeee8; }
.hw-bars i { flex: 1; border-radius: 2px; background: #e2582c; opacity: .25; }
.hw-bars i:nth-child(1) { height: 30%; opacity: 1; } .hw-bars i:nth-child(2) { height: 50%; } .hw-bars i:nth-child(3) { height: 75%; } .hw-bars i:nth-child(4) { height: 100%; }
.hw-card.c-plan { left: max(2%, calc(50% - 380px - 260px)); top: 66%; }
.hw-card.c-gps { left: max(5%, calc(50% - 380px - 200px)); top: 20%; }
.hw-card.c-log { right: max(2%, calc(50% - 380px - 260px)); top: 66%; }
@media (max-width: 760px) {
  .hw-steps { gap: 8px; } .hw-steps li { font-size: 12.5px; padding: 7px 12px 7px 7px; } .hw-steps li::after { display: none; }
}
/* How It Works: four steps with a photo header, a line that fills as you scroll and numbers that light up */
.hw-flow { --p: 0; }
.hw-flow li { padding: 0 0 26px !important; overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.hw-flow li > :not(.hw-photo) { margin-left: 26px; margin-right: 26px; }
.hw-photo { height: 160px; background-size: cover; background-position: center; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.hw-flow .pg-num { position: relative; z-index: 2; margin-top: -26px; background: #c9d1b8; box-shadow: 0 0 0 6px #fff; transition: background .4s, transform .4s; }
.hw-flow li.is-on .pg-num { background: #313d1f; transform: scale(1.08); }
.hw-flow::before { top: 160px !important; left: 6% !important; right: 6% !important; border-top: 3px solid #e3e8d8 !important; z-index: 2 !important; }
.hw-flow::after { content: ''; position: absolute; top: 159px; left: 6%; right: 6%; height: 3px; z-index: 2; transform-origin: 0 50%; transform: scaleX(var(--p));
  background: linear-gradient(90deg, #b9de7a, #5e7d2c 60%, #313d1f); border-radius: 3px; }
.hw-flow li:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(49,61,31,.16); }
.hw-flow li:hover .hw-photo { transform: scale(1.06); }
.hw-flow .pg-tag { margin-top: auto; }
@media (max-width: 900px) { .hw-flow::before, .hw-flow::after { display: none; } .hw-flow .pg-num { background: #313d1f; } }
/* Records cards: lift on hover, icon tile flips to lime */
.pg-records article { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.pg-records article:hover { transform: translateY(-8px); box-shadow: 0 26px 50px rgba(49,61,31,.14); }
.pg-records .pg-ic { transition: background .3s, color .3s, transform .4s; }
.pg-records article:hover .pg-ic { background: #b9de7a; color: #313d1f; transform: rotate(-8deg) scale(1.08); }
.pg-records dl { transition: background .3s, border-color .3s; }
.pg-records article:hover dl { background: #ecf6e0; border-color: #c9dfa6; }
/* FAQ: plus icon that turns into a minus, open card gets a green edge */
.pg-faq details { transition: box-shadow .3s, border-color .3s; border: 1.5px solid transparent; }
.pg-faq details[open] { border-color: #c9dfa6; box-shadow: 0 14px 40px rgba(49,61,31,.1); }
.pg-faq details:hover { box-shadow: 0 10px 34px rgba(49,61,31,.1); }
.pg-faq summary::after { content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #ecf6e0
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23313d1f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;
  transition: transform .35s, background-color .3s; }
.pg-faq details[open] summary::after { transform: rotate(135deg); background-color: #b9de7a; }
/* Steps: drop the connector line (it crossed the photos); numbers still light up in turn */
.hw-flow::before, .hw-flow::after { display: none !important; }
/* Ghost link: underline sits right under its own text */
.ft-ghost { padding: 4px 0 !important; margin: 0 6px; line-height: 1.3; }
/* Nav: language switch is the same height as the Download button (52px + its 2px ring) and sits close to it */
.nav .lang-switch { height: 56px !important; padding: 5px !important; box-sizing: border-box; }
.nav .lang-switch button { height: 44px !important; padding: 0 16px !important; }
@media (min-width: 761px) { .nav .lang-switch { margin-right: -22px; } }
@media (max-width: 760px) {
  .nav .lang-switch { height: 42px !important; padding: 3px !important; margin-right: 0; }
  .nav .lang-switch button { height: 34px !important; padding: 0 10px !important; }
}
.ft-cta > * { margin-top: 0 !important; margin-bottom: 0 !important; } /* button kept a hero top margin; centre it with the link */
/* Trip map: the open card sits above the pins (no pins showing through it); pins it covers are skipped by the placement logic */
.trip-pin { z-index: 4 !important; }
.trip-pop { z-index: 5 !important; pointer-events: auto; }
/* Text links, take two: a thin underline that grows from the left on hover and leaves to the right.
   Drawn with ::after (only transform animates), so the text itself never shifts or flickers. */
.nav-menu > a:not(.btn-solid), .foot-links a, .ft-ghost, .pg-muted a, .foot-legal a, .contact-links a {
  background: none !important; position: relative; transition: color .25s ease !important;
}
.nav-menu > a:not(.btn-solid)::after, .foot-links a::after, .ft-ghost::after, .pg-muted a::after, .foot-legal a::after, .contact-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right center; transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.nav-menu > a:not(.btn-solid):hover::after, .foot-links a:hover::after, .ft-ghost:hover::after, .pg-muted a:hover::after, .foot-legal a:hover::after, .contact-links a:hover::after {
  transform: scaleX(1); transform-origin: left center;
}
.nav-menu > a:not(.btn-solid):hover, .foot-links a:hover, .foot-legal a:hover { color: #b9de7a; }
/* "See how it works" style links keep a faint resting underline */
.ft-ghost { padding: 4px 0 !important; box-shadow: inset 0 -1.5px 0 rgba(255,255,255,.3); }
.ft-ghost::after { bottom: 0; }
.ft-ghost:hover { color: #b9de7a; }
@media (max-width: 760px) { .nav-menu > a:not(.btn-solid)::after { display: none; } }

/* Facebook button and store badges: lift on hover, press on tap (all sizes, every placement) */
.foot-social { transition: transform .25s ease, background-color .25s, color .25s, box-shadow .25s; border-radius: 999px; }
.foot-social:hover { transform: translateY(-2px); color: #b9de7a; }
.foot-social img { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.foot-social:hover img { transform: scale(1.15) rotate(-6deg); }
.foot-social:active { transform: translateY(0) scale(.97); }
a:has(> img[src*="store-apple"]), a:has(> img[src*="store-google"]) { display: inline-block; border-radius: 999px; line-height: 0; }
a > img[src*="store-apple"], a > img[src*="store-google"] { border-radius: 999px; transition: transform .25s ease, box-shadow .25s ease, filter .25s; }
a:hover > img[src*="store-apple"], a:hover > img[src*="store-google"] { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(0,0,0,.35); filter: brightness(1.08); }
a:active > img[src*="store-apple"], a:active > img[src*="store-google"] { transform: translateY(0) scale(.97); box-shadow: none; }
.stores a, .cta-stores a { overflow: visible !important; } /* let the hover lift/shadow show */
/* Privacy policy: readable single column */
.legal { max-width: 760px; }
.legal h2 { font-family: var(--sans); font-size: 26px; line-height: 1.3; font-weight: 700; color: #313d1f; margin: 40px 0 12px; }
.legal p, .legal li { font-size: 17px; line-height: 1.65; color: #45433d; }
.legal ul { padding-left: 20px; margin: 0; display: grid; gap: 8px; }
.legal a { color: #5e7d2c; text-decoration: underline; text-underline-offset: 3px; }
.legal-draft { background: #fdf3d8; border: 1px solid #f0d98a; border-radius: 14px; padding: 14px 18px; color: #6b5310 !important; }
.legal-updated { font-size: 14px !important; color: #7b7b7b !important; margin-top: 16px; }
.cf-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cf-status:empty { display: none; }
.cf-status { margin: 0; padding: 12px 16px; border-radius: 12px; font-size: 14.5px; background: #f3f6ee; color: #45433d; }
.cf-status.is-ok { background: #ecf6e0; color: #2f4a12; border: 1px solid #c9dfa6; }
.cf-status.is-err { background: #fdeee8; color: #8a2b14; border: 1px solid #f3c4b3; }
.contact-form button:disabled { opacity: .6; cursor: progress; }
/* Keep the hand and phone above the faded brand mark */
.hero-visual .hero-phone { position: relative; z-index: 1; }