/* Odeko homepage — layout & component styles (v2 — figma-matched)
   Builds on top of colors_and_type.css tokens.
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* page shell ---------------------------------------------------------- */
.page {
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  min-height: 100vh;
  overflow-x: clip;
}

.container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: 56px;
}
@media (max-width: 720px) {
  .container { padding-inline: 24px; }
}

/* ===================================================================== */
/* NAV                                                                    */
/* ===================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--odeko-ecru);
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.nav.is-stuck { box-shadow: 0 1px 0 rgba(64, 24, 11, 0.08); }

.nav-row {
  display: flex;
  align-items: center;
  gap: 48px;
  height: 80px;
}

.nav-logo {
  width: 120px;
  height: 34px;
  background-color: #40180B;
  -webkit-mask: url("assets/graphics/Odeko-Wordmark-RGB-Mocha.svg") left center / contain no-repeat;
          mask: url("assets/graphics/Odeko-Wordmark-RGB-Mocha.svg") left center / contain no-repeat;
  flex: 0 0 auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  position: relative;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  color: var(--odeko-mocha);
  background: none;
  border: 0;
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.nav-link--direct { text-decoration: none; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--odeko-mocha);
  transition: right var(--dur-med) var(--ease-out);
}
.nav-link:hover::after,
.nav-link.is-open::after { right: 0; }
.nav-link .caret {
  display: inline-block;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  margin-bottom: 3px;
  opacity: 0.55;
  transition: transform var(--dur-fast) var(--ease-out);
}
/* internal-only "work in progress" tag in the nav */
.nav-wip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px 1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--odeko-mocha);
  background: var(--odeko-yellow);
  border-radius: 999px;
  vertical-align: middle;
  transform: translateY(-1px);
}
.nav-link.is-open .caret {
  transform: rotate(-135deg) translate(-1px, -1px);
  opacity: 0.85;
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-signin {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 15px;
  color: var(--odeko-mocha);
  background: none;
  border: 0;
  padding: 8px 4px;
  cursor: pointer;
  text-decoration: none;
}
.nav-signin:hover { text-decoration: underline; text-underline-offset: 4px; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border: 0;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med);
  box-shadow: 0 1px 2px rgba(64,24,11,0.08);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(64,24,11,0.14); }
.nav-cta .arr { transition: transform var(--dur-med) var(--ease-out); }
.nav-cta:hover .arr { transform: translateX(3px); }

@media (max-width: 900px) {
  .nav-links, .nav-signin { display: none; }
  /* logo↔right-side gap only needs to separate two items now, not clear
     space for the hidden nav-links row — free that space up so "Get
     started" has room to sit on one line next to the new burger button. */
  .nav-row { gap: 12px; }
  .nav-right { gap: 10px; }
  /* every page sets a fixed padding/font-size inline on .nav-cta, which
     wins over this stylesheet — override with !important so "Get started"
     has enough room to stay on one line next to the burger button. */
  .nav-cta { padding: 12px 16px !important; font-size: 13px !important; gap: 6px; }
}
@media (max-width: 360px) {
  /* smallest phones (e.g. iPhone SE): drop the arrow glyph and shrink the
     logo so "Get started" still fits on one line next to the burger. */
  .nav-cta .arr { display: none; }
  .nav-logo { width: 96px; }
}

/* nav hamburger + mobile panel ------------------------------------------ */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 8px;
  flex: 0 0 auto;
}
.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--odeko-mocha);
  border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-burger { display: flex; }
}

.mobile-nav {
  border-top: 1px solid var(--border-soft);
  background: var(--odeko-ecru);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  animation: panelIn 220ms var(--ease-out);
}
.mobile-nav-list { list-style: none; margin: 0; padding: 8px 24px 24px; display: flex; flex-direction: column; }
.mobile-nav-group { border-bottom: 1px solid var(--border-soft); }
.mobile-nav-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 4px;
  background: none;
  border: 0;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 17px;
  color: var(--odeko-mocha);
  text-align: left;
  cursor: pointer;
}
.mobile-nav-toggle .caret {
  margin-left: auto;
  display: inline-block;
  width: 8px; height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  opacity: 0.55;
  transition: transform var(--dur-fast) var(--ease-out);
}
.mobile-nav-toggle.is-open .caret { transform: rotate(-135deg) translate(-1px, -1px); opacity: 0.85; }
.mobile-nav-sub { padding: 0 4px 20px; display: flex; flex-direction: column; gap: 20px; }
.mobile-nav-sub h5 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mobile-nav-sub ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-nav-sub li a {
  display: block;
  padding: 10px 0;
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--odeko-mocha);
}
.mobile-nav-direct-item { border-bottom: 1px solid var(--border-soft); }
.mobile-nav-direct {
  display: block;
  padding: 16px 4px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 17px;
  color: var(--odeko-mocha);
}
@media (min-width: 901px) {
  .mobile-nav { display: none; }
}

/* nav mega panel ------------------------------------------------------- */
.megapanel {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  background: var(--odeko-ecru);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding-block: 36px 44px;
  box-shadow: 0 16px 30px rgba(64,24,11,0.06);
  animation: panelIn 220ms var(--ease-out);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.megapanel-grid {
  display: grid;
  grid-template-columns: 320px repeat(3, 1fr);
  gap: 48px;
  align-items: start;
}
.megapanel-lede h4 { margin-bottom: 14px; }
.megapanel-lede .lede {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--odeko-mocha);
  margin: 0;
  max-width: 14ch;
}
.megapanel h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.megapanel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.megapanel li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--odeko-mocha);
  border-bottom: 1px solid transparent;
}
.megapanel li a:hover { border-bottom-color: var(--odeko-mocha); }
.megapanel li a .arr {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.megapanel li a:hover .arr {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 900px) {
  .megapanel { display: none; }
}

/* ===================================================================== */
/* HERO                                                                   */
/* ===================================================================== */

.hero {
  position: relative;
  background: var(--odeko-ecru);
  padding-block: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  position: relative;
  align-items: center;
}

/* the yellow half-bleed panel */
.hero-panel {
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  padding: clamp(56px, 7vw, 100px) 56px clamp(56px, 7vw, 100px) 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 480px;
  /* keep yellow bleeding to the left edge of the viewport */
  margin-left: calc((100vw - min(100%, 1320px)) / -2 - 56px);
  padding-left: calc((100vw - min(100%, 1320px)) / 2 + 56px);
  position: relative;
}
/* fallback when container is full width on small screens */
@media (max-width: 1320px) {
  .hero-panel {
    margin-left: -56px;
    padding-left: 56px;
  }
}
@media (max-width: 720px) {
  .hero-panel {
    margin-left: -24px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* address autocomplete dropdown ---------------------------------------- */
.addr-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid var(--odeko-mocha);
  border-radius: 14px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(64,24,11,0.13);
  overflow: hidden;
}

.addr-drop li {
  padding: 11px 20px;
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--odeko-mocha);
  cursor: pointer;
  list-style: none;
  transition: background 0.1s ease;
}

.addr-drop li:hover {
  background: var(--odeko-yellow);
}

/* typing eyebrow -------------------------------------------------------- */
.hero-eyebrow-typing {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 1.5em;
}

.hero-eyebrow-snap {
  height: 22px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.hero-eyebrow-text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--odeko-yellow);
  white-space: nowrap;
}

.hero-eyebrow-cursor {
  font-family: var(--font-text);
  font-size: 17px;
  color: var(--odeko-yellow);
  opacity: 1;
  animation: eyebrow-blink 0.9s step-end infinite;
  line-height: 1;
}

@keyframes eyebrow-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.svc-title-link {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.svc-title-link:hover { opacity: 1; }
.hero-ticker {
  background: var(--odeko-yellow);
  overflow: hidden;
  width: 100%;
  border-bottom: 1.5px solid rgba(64, 24, 11, 0.18);
}

.hero-ticker-track {
  display: flex;
  width: max-content;
  padding-block: 11px 9px;
  animation: hero-ticker-scroll 26s linear infinite;
  will-change: transform;
}

.hero-ticker-item {
  display: inline-flex;
  align-items: center;
  padding-inline: 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--odeko-mocha);
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-ticker-sep {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--odeko-mocha);
  opacity: 0.45;
  flex-shrink: 0;
}

.hero-ticker-track--roobert .hero-ticker-item {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-transform: none;
}

@keyframes hero-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--ticker-end, -50%)); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ticker-track { animation: none; }
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 7.4vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--odeko-mocha);
}

.hero-lede {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  max-width: 30em;
  color: var(--odeko-mocha);
}

.hero-cta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.zip-pill {
  flex: 1 1 280px;
  min-width: 240px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  padding: 4px 6px 4px 22px;
  box-shadow: inset 0 0 0 1px #40180b;
}
.zip-pill input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--odeko-mocha);
  padding: 14px 6px;
  min-width: 0;
}
.zip-pill input::placeholder { color: rgba(64,24,11,0.45); }
/* Suppress the focus ring on text inputs when focus came from a mouse/touch
   click; keyboard (Tab) focus still shows it for accessibility. */
html.od-using-mouse input:focus,
html.od-using-mouse input:focus-visible,
html.od-using-mouse textarea:focus,
html.od-using-mouse textarea:focus-visible,
html.od-using-mouse select:focus,
html.od-using-mouse select:focus-visible {
  outline: none;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  border: 0;
  border-radius: 999px;
  transition: transform var(--dur-fast), box-shadow var(--dur-med);
  box-shadow: 0 1px 2px rgba(64,24,11,0.1);
}
.btn-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(64,24,11,0.18); }
.btn-pill .arr { transition: transform var(--dur-med) var(--ease-out); }
.btn-pill:hover .arr { transform: translateX(3px); }
.btn-pill--mocha { background: var(--odeko-mocha); color: var(--odeko-ecru); }
.btn-pill--mocha:hover { background: #2d0e06; }

/* address autosuggest dropdown */
.addr-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(64, 24, 11, 0.18);
}
.addr-suggest li { margin: 0; }
.addr-suggest button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 11px 14px;
  border-radius: 12px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--odeko-mocha);
  cursor: pointer;
}
.addr-suggest button:hover { background: rgba(64, 24, 11, 0.06); }
.addr-suggest .addr-pin {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--odeko-yellow);
  box-shadow: inset 0 0 0 1.5px var(--odeko-mocha);
}

.zip-status {
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: 14px;
  opacity: 0.78;
  min-height: 18px;
}
.zip-status .ok  { color: #0a8c4a; font-weight: 500; }
.zip-status .err { color: var(--odeko-red-deep); font-weight: 500; }
.zip-status .spin {
  display: inline-block;
  width: 11px; height: 11px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-right: 8px;
  vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* hero sticker decorations ------------------------------------------- */
.hero-sticker {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

.hero-sticker--1 {
  position: absolute;
  top: calc(18% + 10px);
  left: -45px;
  width: clamp(158px, 12.5vw, 207px);
  transform: rotate(-12deg) translateZ(0);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
  z-index: 10;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.hero-sticker--serve {
  position: absolute;
  top: calc(52% - 70px);
  left: 0px;
  width: clamp(126px, 10vw, 159px);
  transform: rotate(12deg) translateZ(0);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.22));
  z-index: 10;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

@media (max-width: 980px) {
  .hero-sticker { display: none; }
}

/* inset video panel */
.hero-right {
  position: relative;
  display: none;
  overflow: visible;
  margin-right: calc((100vw - min(100%, 1320px)) / -2 - 56px);
  align-self: center;
  /* flex so the video centers vertically in the container height */
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
@media (min-width: 980px) {
  .hero-right { display: flex; }
}
@media (max-width: 1320px) {
  .hero-right { margin-right: -56px; }
}
@media (max-width: 720px) {
  .hero-right { margin-right: -24px; }
}

.hero-photo {
  display: block;
  object-fit: cover;
  flex-shrink: 0;
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ===================================================================== */
/* SECTION SHELL                                                          */
/* ===================================================================== */

.section { padding-block: 112px; position: relative; }
.section--mocha { background: var(--odeko-mocha); color: var(--odeko-ecru); }
.section--ecru  { background: var(--odeko-ecru);  color: var(--odeko-mocha); }
.section--yellow { background: var(--odeko-yellow); color: var(--odeko-mocha); }

/* Cases section: white field, mocha strokes around each card */
#cases.section--yellow {
  background: #ffffff;
  margin-top: -1px;
}
#cases .case {
  box-shadow: inset 0 0 0 2px #40180b;
}

@media (max-width: 720px) {
  .section { padding-block: 72px; }
}

.section-head--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 64px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(50px, 5vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 22ch;
}
.section-sub {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.78;
  max-width: 38em;
}

/* ===================================================================== */
/* SHOP CARDS (Pick your shop's story)                                    */
/* ===================================================================== */

.shop-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px) { .shop-cards { grid-template-columns: 1fr; } }

.shop-card {
  background: var(--odeko-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(64, 24, 11, 0.08);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med);
}
.shop-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(64,24,11,0.10);
}

.shop-card .photo {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #d9c8b8;
  border-radius: 15px;
}
.shop-card .shop-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.shop-card .photo .badge {
  z-index: 2;
}
.shop-card .photo .ph {
  position: absolute;
  inset: 0;
  background: var(--ph-grad, linear-gradient(135deg, #6b3422 0%, #2a0f06 100%));
}
.shop-card .photo image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shop-card .badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shop-card .body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.shop-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
}
.shop-card p {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.78;
}
.shop-card .learn {
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}
.shop-card .learn .arr { transition: transform var(--dur-med) var(--ease-out); }
.shop-card:hover .learn .arr { transform: translateX(4px); }

/* ===================================================================== */
/* "YOU MAKE THE MAGIC" — carousel + service grid (mocha)                 */
/* ===================================================================== */

.magic-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(50px, 5.5vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-align: center;
  margin: 0 auto 56px;
  max-width: 14ch;
}

/* carousel */
.carousel-wrap {
  position: relative;
}
.carousel {
  display: flex;
  gap: 56px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 0;
  scrollbar-width: none;
  scroll-padding-inline: 56px;
  /* show a peek of neighbors */
  padding-inline: max(56px, calc((100vw - 720px) / 2));
  margin-inline: calc((100vw - min(100%, 1320px)) / -2 - 56px);
}
@media (max-width: 1320px) {
  .carousel {
    margin-inline: -56px;
    padding-inline: 56px;
  }
}
@media (max-width: 720px) {
  .carousel { margin-inline: -24px; padding-inline: 24px; }
}
.carousel::-webkit-scrollbar { display: none; }

.mcard {
  flex: 0 0 min(720px, 78vw);
  min-height: 460px;
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding: 0;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  position: relative;
  overflow: visible;
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  opacity: 0.7;
  transform: scale(0.95);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.mcard.is-active {
  opacity: 1;
  transform: scale(1);
}
.mcard:hover { transform: scale(0.96); }
.mcard.is-active:hover { transform: scale(1); }
.mcard:hover { transform: translateY(-2px); }

.mcard-left {
  padding: 44px 32px 36px 44px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mcard-left h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(64, 24, 11, 0.18);
}
.mcard-left p {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  margin: auto 0 0;
  max-width: 42ch;
  opacity: 0.85;
}

.mcard-photo {
  position: relative;
  overflow: hidden;
  background: #d9c8b8;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.mcard-photo .ph {
  position: absolute;
  inset: 0;
}
.mcard-photo .mcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.mcard-photo image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.mcard .badge {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 96px;
  height: 96px;
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  z-index: 3;
}
/* cardicon variant: bring its own art, no yellow disc, and hangs off the
   photo edge. Each card gets its own placement + rotation modifier. */
.mcard .badge--cardicon {
  top: auto;
  right: auto;
  left: auto;
  width: 112px;
  height: 112px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}
/* Reliable delivery — lower right, rotated forward */
.mcard .badge--cardicon-cart {
  bottom: 18%;
  right: -56px;
  transform: rotate(10deg);
}
/* Curated selection — upper right, slight forward rotation */
.mcard .badge--cardicon-boxes {
  top: 22px;
  right: -48px;
  transform: rotate(10deg);
}
/* Quick & easy ordering — overlapping right edge, mid-card */
.mcard .badge--cardicon-lightning {
  top: 38%;
  right: -56px;
  transform: rotate(-8deg);
}
.mcard .badge--cardicon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 720px) {
  /* the carousel's flex layout stretches every card to match the tallest
     one's content, but with only implicit auto-sized grid rows the photo
     (fixed aspect-ratio) doesn't grow to soak up that extra height — it's
     left as a gap after the photo instead. Making the photo row 1fr lets
     it fill the leftover space; object-fit:cover on the actual <img>
     already handles any resulting height gracefully. */
  .mcard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }
  /* corner radius for this state is set by the higher-specificity
     .page .mcard-photo rule further down (it has to match that rule's
     specificity to actually win — see the comment there). Explicit
     grid-row/column matches the badge's own explicit placement below —
     without this, auto-placement moves the photo to a new row 3 to
     avoid the cell the badge explicitly claimed in row 2.
     NO aspect-ratio here (deliberately, overriding the desktop rule
     below): aspect-ratio wins over this row's default stretch sizing,
     so the photo rendered at its own preferred height instead of
     filling the 1fr row — fine when that height happened to match the
     leftover space (short text), but left a gap under it otherwise
     (longer text -> more leftover space than the aspect-ratio height).
     Letting it stretch instead means object-fit:cover on the actual
     <img> is what keeps the photo looking right at any resulting
     height — but with no floor at all, a card whose text leaves very
     little leftover space crops the photo down to almost nothing.
     min-height (not aspect-ratio — that's what pinned the size and
     caused the gap above) sets a floor without blocking the stretch:
     it still grows taller via 1fr when there's room, same as before,
     just never shrinks past a sensible height. 58vw approximates this
     row's own 4:3 desktop ratio against the card's ~78vw width. */
  .mcard-photo { aspect-ratio: auto; min-height: 58vw; grid-row: 2; grid-column: 1; }
  .mcard-left { padding: 36px 28px 28px; }
  .mcard .badge { width: 76px; height: 76px; top: 16px; right: 16px; }
  /* the cardicon badges are positioned (top + negative right, per-variant
     rotation) to hang off the photo's edge in the desktop 2-column layout.
     Once the card stacks to one column, the photo moves below the text —
     those same coordinates now land on top of the title instead. The
     badge is a sibling of .mcard-photo, not nested in it, so it can't
     anchor to the photo's own top edge with a fixed offset — the text
     block's height (and so where the photo actually starts) varies both
     card to card and by how many lines the body copy wraps to at a given
     width. Placing the badge in the *same grid cell as the photo* (row 2)
     anchors it to wherever that row actually begins, however tall the
     text row ends up — no distance guess, so it never lands on the copy.
     Grid placement only works while the badge participates in grid flow,
     so it can't stay position:absolute here. */
  .mcard .badge--cardicon-cart,
  .mcard .badge--cardicon-boxes,
  .mcard .badge--cardicon-lightning {
    position: static;
    grid-row: 2;
    grid-column: 1;
    align-self: start;
    justify-self: end;
    margin: -20px 16px 0 0;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: 76px;
    height: 76px;
    transform: none;
    z-index: 3;
  }
}

.carousel-dots {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.carousel-dots button {
  width: 8px; height: 8px;
  background: rgba(255, 255, 223, 0.32);
  border: 0;
  border-radius: 50%;
  padding: 0;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.carousel-dots button.is-active {
  background: var(--odeko-ecru);
  transform: scale(1.4);
}

/* service grid */
.services {
  margin-top: 96px;
  padding-block: 80px;
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  /* Full-bleed background while keeping the grid aligned to .container */
  box-shadow: 0 0 0 100vmax var(--odeko-ecru);
  clip-path: inset(0 -100vmax -2px -100vmax);
  position: relative;
}
.services .svc { color: var(--odeko-mocha); }
.services .svc h5,
.services .svc p { color: var(--odeko-mocha); }
.services .svc .ic { color: var(--odeko-mocha); }

/* ---- Variant A: centered 4-up grid (default) ---- */
.services--grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 40px;
}
@media (max-width: 900px) { .services--grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .services--grid { grid-template-columns: 1fr; } }

/* ---- Variant B: stacked list, left-aligned with hairline dividers ---- */
.services--list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.services--list .svc {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 28px;
  padding: 28px 0;
  border-top: 1px solid rgba(64, 24, 11, 0.18);
}
.services--list .svc:first-child { border-top: 0; }
.services--list .svc .ic {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 auto;
  background: var(--odeko-yellow);
  border-radius: 999px;
  margin-top: 4px;
}
.services--list .svc h5 {
  width: auto !important;
  flex: 0 0 30%;
  max-width: 30%;
  font-size: 28px;
}
.services--list .svc p {
  flex: 1;
  font-size: 16px;
  line-height: 1.5;
  max-width: 46ch;
}
@media (max-width: 720px) {
  .services--list .svc { flex-direction: column; gap: 12px; }
  .services--list .svc h5 { flex-basis: auto; max-width: none; }
}

/* Magic section: services band is the last child, so kill the mocha
   bottom padding so the ecru band runs flush into the next section. */
#magic { padding-bottom: 0; }
.page #magic { padding-bottom: 0; }

.svc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.svc .ic {
  width: 64px; height: 64px;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--odeko-ecru);
}
.svc h5 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
  max-width: 18ch;
}
.svc p {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.25;
  margin: 0;
  opacity: 0.78;
}
/* Clickable service card — hover affects text & icon only, no card behind */
.svc--link {
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.svc--link .ic,
.svc--link h5,
.svc--link p {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.svc--link:hover,
.svc--link:focus-visible { outline: none; }
.svc--link:hover .ic,
.svc--link:focus-visible .ic { transform: translateY(-4px); }
.svc--link:hover h5,
.svc--link:focus-visible h5 { transform: translateY(-4px); }
.svc--link:hover p,
.svc--link:focus-visible p { opacity: 1; transform: translateY(-4px); }

/* ===================================================================== */
/* CASE STUDIES (yellow section)                                          */
/* ===================================================================== */

.cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 980px) { .cases { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

.case {
  position: relative;
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 9/16;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  transition: transform var(--dur-med) var(--ease-out);
}
.case:hover { transform: translateY(-4px); }

.case .photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.case .photo .ph {
  position: absolute;
  inset: 0;
  background: var(--ph-grad, linear-gradient(135deg, #6b3422 0%, #2a0f06 100%));
}
.case .photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}
.case image-slot {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
.case .case-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.case .case-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}

/* sound + paused indicators on autoplay-muted video cards */
.case .sound-chip {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(64, 24, 11, 0.72);
  color: var(--odeko-ecru);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.case .sound-chip.is-hovering {
  opacity: 1;
  transform: translateY(0);
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
}

.case .paused-pill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(255, 255, 223, 0.92);
  color: var(--odeko-mocha);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
  animation: pausedIn 180ms var(--ease-out);
}
@keyframes pausedIn {
  from { opacity: 0; transform: translate(-50%, -45%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}

.case .play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(255, 255, 223, 0.92);
  display: flex; align-items: center; justify-content: center;
  color: var(--odeko-mocha);
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-fast);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.case:hover .play { transform: translate(-50%, -50%) scale(1.06); background: var(--odeko-ecru); }
.case .play svg { margin-left: 4px; }

.case .label {
  font-family: var(--font-text);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.01em;
  opacity: 0.85;
  margin: 0 0 8px 24px;
  color: var(--odeko-ecru);
}

.case .tag {
  align-self: flex-start;
  margin: 0 24px;
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  transform: rotate(-1.5deg);
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  max-width: none;
}
.case .tag .square {
  display: inline-block;
  width: 11px; height: 11px;
  background: var(--odeko-mocha);
  margin: 0 2px;
  flex: 0 0 auto;
}

.case .desc {
  margin: 16px 24px 24px;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  color: var(--odeko-ecru);
  opacity: 0.95;
}

/* ===================================================================== */
/* QUOTE (mocha)                                                          */
/* ===================================================================== */

.quote-section {
  padding-block: 140px 90px;
}
.quote-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 720px) { .quote-row { grid-template-columns: 1fr; text-align: center; gap: 32px; } }

.quote-avatar {
  width: 200px;
  height: 200px;
  border-radius: 0;
  background: transparent;
  background-image: none;
  position: relative;
  overflow: visible;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quote-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.quote-avatar image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 720px) {
  .quote-avatar { justify-self: center; }
  /* some pages pass a scale() transform via logoStyle as a per-logo optical
     nudge (see enterprise.jsx's Birch Coffee logo) — harmless in the
     spacious desktop layout, but it blows the image up past its box on
     the tight mobile column since transform doesn't affect layout size. */
  .quote-avatar img { transform: none !important; }
}

.quote-row blockquote {
  font-family: var(--font-text);
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  color: var(--odeko-ecru);
}
.quote-row blockquote cite {
  display: block;
  margin-top: 20px;
  font-family: var(--font-text);
  font-style: italic;
  font-size: 14px;
  opacity: 0.75;
  letter-spacing: 0.02em;
}

/* ===================================================================== */
/* FINAL CTA — form (ecru)                                                */
/* ===================================================================== */

.final-cta {
  padding-block: 120px;
}
.final-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .final-grid { grid-template-columns: 1fr; gap: 40px; } }

.final-grid h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(50px, 5.5vw, 80px);
  line-height: 1;
  letter-spacing: -0.012em;
  margin: 0 0 24px;
  max-width: 14ch;
}
.final-grid .lede {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  max-width: 28em;
  opacity: 0.8;
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form .field-full { grid-column: 1 / -1; }
@media (max-width: 540px) {
  /* unlike .final-grid (which does collapse at 900px), this inner field
     grid never had a mobile breakpoint of its own, so every field pairs
     up two-per-row and overflows off the right edge. */
  .form { grid-template-columns: 1fr; }
}
.field {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid var(--odeko-mocha);
  border-radius: 999px;
  padding: 4px 6px 4px 22px;
  transition: background var(--dur-fast);
}
.field:focus-within { background: #fffaf0; }
.field input,
.field select {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--odeko-mocha);
  padding: 14px 6px;
  min-width: 0;
  appearance: none;
}
.field input::placeholder { color: rgba(64,24,11,0.45); }
.field select { padding-right: 30px; cursor: pointer; }
.field-wrap-select { position: relative; }
.field-wrap-select::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--odeko-mocha);
  border-bottom: 1.5px solid var(--odeko-mocha);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.form .submit {
  grid-column: 1 / -1;
  margin-top: 6px;
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  padding: 20px 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform var(--dur-fast), box-shadow var(--dur-med);
  box-shadow: 0 1px 2px rgba(64,24,11,0.1);
}
.form .submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(64,24,11,0.16);
}
.form .submit .arr { transition: transform var(--dur-med) var(--ease-out); }
.form .submit:hover .arr { transform: translateX(4px); }

/* ===================================================================== */
/* FOOTER (mocha)                                                         */
/* ===================================================================== */

/* joe cuppa sticker — vendors page only, sits above the footer ---------- */
.vendor-joe-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-right: calc(15% - 60px);
  height: 0;
  overflow: visible;
  z-index: 10;
}

.vendor-joe {
  position: absolute;
  bottom: 0;
  height: 192px;
  width: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.07));
}

.footer {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  padding-block: 80px 32px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,223,0.18);
}
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }

.footer-brand {
  display: flex; flex-direction: column; gap: 20px;
}
.footer-brand .mark {
  width: 140px; height: 36px;
  background-color: #FFFFDF;
  -webkit-mask: url("assets/graphics/Odeko-Wordmark-RGB-Mocha.svg") left center / contain no-repeat;
          mask: url("assets/graphics/Odeko-Wordmark-RGB-Mocha.svg") left center / contain no-repeat;
}
.footer-brand p {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.7;
  max-width: 24em;
  margin: 0;
}
.footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--footer-social-color, var(--odeko-ecru));
  border: 1px solid var(--footer-social-border, rgba(255, 255, 223, 0.25));
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.footer-social a:hover {
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  border-color: var(--odeko-yellow);
  transform: translateY(-2px);
}
.footer h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin: 0 0 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a {
  font-family: var(--font-text);
  font-size: 14px;
  opacity: 0.82;
}
.footer ul a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.footer-bot {
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-text);
  font-size: 12px;
  opacity: 0.6;
  flex-wrap: wrap;
  gap: 16px;
}

/* ======================================================================
   SOLUTION HERO (Independent shops, Enterprise, Vendors)
   ====================================================================== */

.solution-hero {
  background: #FFF1A0;        /* lighter, cream-yellow */
  color: var(--odeko-mocha);
  padding-block: 56px 96px;
  position: relative;
  overflow: hidden;
}

/* Optically left-align hero text with the Odeko wordmark above it.
   Compensates for the headline font's left side bearing. */
.solution-hero .solution-headline,
.solution-hero .solution-lede { text-indent: -0.02em; }
.solution-hero .solution-pill { margin-left: -2px; }

/* Brand-illustrated icon SVGs (from assets/graphics) */
.brand-icon {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.solution-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .solution-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  /* platform page: show the phone-in-hand product shot before the copy
     once the hero stacks to one column, instead of after it. */
  .solution-hero--platform .solution-hero-right { order: -1; }
}

.solution-hero-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 36em;
}

.solution-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
}
@media (max-width: 480px) {
  /* prefer a smaller single line over wrapping for the longer pills (e.g.
     platform's "AN ORDERING PLATFORM BUILT FOR CAFES") — tightening size,
     letter-spacing, and padding gets almost all of them onto one line;
     the rare longest-text + narrowest-viewport combination still wraps
     gracefully rather than overflowing. */
  .solution-pill {
    font-size: 10px;
    letter-spacing: 0.04em;
    padding: 9px 14px;
  }
}
.solution-pill--mocha {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
}
.solution-pill--mocha-ghost {
  background: transparent;
  color: var(--odeko-mocha);
  box-shadow: inset 0 0 0 1.5px var(--odeko-mocha);
}

.solution-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(50px, 5.5vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--odeko-mocha);
}

.solution-lede {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  max-width: 32em;
  color: var(--odeko-mocha);
  opacity: 0.88;
}

.solution-hero-right { position: relative; }
.solution-photo {
  position: relative;
  aspect-ratio: 4/3.4;
  border-radius: 11px;
  overflow: hidden;
  background: #d9c8b8;
  box-shadow: 0 16px 40px rgba(64, 24, 11, 0.12);
}
.solution-photo-ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 70% 30%, #f1d09c 0%, transparent 60%),
    linear-gradient(135deg, #8a6a52 0%, #2a160a 100%);
}
.solution-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ======================================================================
   SOLUTION PROPS — 6-up grid on Independent Shops
   ====================================================================== */

.solution-props { background: var(--odeko-ecru); padding-block: 0; }
/* Value props grid — full-bleed, fills the whole section */
.solution-props .container { max-width: none; padding-inline: 0; }
.solution-props-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(64, 24, 11, 0.18);
  border-block: 1px solid rgba(64, 24, 11, 0.18);
}
@media (max-width: 880px) {
  .solution-props-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .solution-props-grid { grid-template-columns: 1fr; }
}
/* Extras page: balanced 4-up */
.extras-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) { .extras-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .extras-grid-4 { grid-template-columns: 1fr; } }

/* Extras page: 2-up image cards */
.extras-section { padding-block: 64px 112px; }
.extras-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 48px;
}
@media (max-width: 760px) { .extras-cards { grid-template-columns: 1fr; } }

/* Contact page: 3-up info columns with vertical dividers */
.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* full-bleed top rule — breaks out of .container's max-width */
.contact-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1.5px;
  background: var(--odeko-mocha);
}
.contact-grid > div {
  /* bottom padding closes the section's old bottom gap so the vertical
     dividers still run down to meet the CtaForm band below */
  padding: 48px 40px 64px;
  border-left: 1.5px solid var(--odeko-mocha);
}
.contact-grid > div:first-child { border-left: 0; padding-left: 0; }
.contact-grid h3 { font-size: 19px; margin-bottom: 16px; }
.contact-grid a { color: var(--odeko-mocha); text-decoration: underline; }
@media (max-width: 760px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid > div { border-left: 0; border-top: 1.5px solid var(--odeko-mocha); padding: 32px 0; }
  .contact-grid > div:first-child { border-top: 0; padding-top: 0; }
}

.extras-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.extras-card-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f3ecdf;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.extras-card-panel image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.extras-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  background: var(--odeko-yellow);
  border-radius: 999px;
  color: var(--odeko-mocha);
}
.extras-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--odeko-mocha);
}
.extras-card p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 16px;
  color: var(--odeko-mocha);
  opacity: 0.82;
  max-width: none;
}
.extras-card-link {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--odeko-mocha);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--odeko-mocha);
}
.extras-card-link .arr { transition: transform var(--dur-med) var(--ease-out); }
.extras-card-link:hover .arr { transform: translateX(4px); }

.solution-prop {
  background: var(--odeko-ecru);
  padding: 44px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 380px;
  position: relative;
  transition: background var(--dur-med);
}
.solution-prop:hover { background: #ffffff !important; }
.solution-prop .num {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  opacity: 1;
  flex: 0 0 auto;
}
.solution-prop .icon {
  display: inline-flex;
  align-items: flex-end;
  color: var(--odeko-mocha);
  margin: 6px 0 4px;
  min-height: 72px;
}
.solution-prop .icon .prop-icon-img {
  height: 72px;
  width: auto;
  display: block;
}
.solution-prop h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--odeko-mocha);
}
.solution-prop p {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.82;
}

/* ======================================================================
   BU PUSH — "Not in our delivery radius?" yellow alert bar
   ====================================================================== */

.bu-push {
  background: var(--odeko-yellow);
  padding-block: 96px;
  position: relative;
  border-top: 3px solid var(--odeko-mocha);
  border-bottom: 3px solid var(--odeko-mocha);
}
.bu-push-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 880px) {
  .bu-push-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* alert pill with pulsing dot */
.bu-alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 18px 8px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.bu-alert-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--odeko-yellow);
  position: relative;
  flex: 0 0 auto;
}
.bu-alert-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--odeko-yellow);
  animation: bu-pulse 1.6s ease-out infinite;
}
@keyframes bu-pulse {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Odeko map graphic + separate pins layer */
.odeko-map {
  position: relative;
  aspect-ratio: 1817 / 1046;
  width: 100%;
  overflow: visible;
}
.odeko-map-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}
.map-pins {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
}
.map-pin-dot {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--odeko-yellow);
  border: 1px solid var(--odeko-ecru);
  box-shadow: none;
  position: relative;
}
.map-pin-dot::after { content: none; }

/* map legend / key — compact, tucked under the map */
.map-key {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 14px;
  justify-content: flex-end;
  transform: scale(0.95);
  transform-origin: right center;
}
.map-key-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  color: var(--odeko-mocha);
}
.map-key-swatch { flex: 0 0 auto; }
.map-key-swatch--dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--odeko-yellow);
  border: 2px solid var(--odeko-mocha);
}
.map-key-swatch--square {
  width: 15px;
  height: 15px;
  background: var(--odeko-ecru);
  border: 2px solid var(--odeko-mocha);
}
.map-pin:nth-child(3n) .map-pin-dot::after { animation-delay: 0.6s; }
.map-pin:nth-child(3n+1) .map-pin-dot::after { animation-delay: 1.2s; }
@keyframes map-pin-pulse {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

.bu-push-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0 0 20px;
  color: var(--odeko-mocha);
  max-width: 14ch;
}
.bu-push-body { container-type: inline-size; }
.bu-push-body h2.bu-result-h2 {
  font-size: clamp(30px, 8.8cqw, 48px);
  max-width: 648px;
  line-height: 1.05;
}
.bu-push-body p {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  margin: 0 0 28px;
  color: var(--odeko-mocha);
  max-width: 36em;
}
.bu-push-body .bu-link {
  font-weight: 500;
  border-bottom: 1.5px solid var(--odeko-mocha);
  padding-bottom: 1px;
}
.bu-push-body .bu-link:hover { background: var(--odeko-mocha); color: var(--odeko-ecru); }

.bu-push-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-pill--mocha { background: var(--odeko-mocha); color: var(--odeko-ecru); }
.btn-pill--mocha:hover { background: #2d0e06; transform: translateY(-1px); }
.btn-pill--outline {
  background: transparent;
  color: var(--odeko-mocha);
  box-shadow: inset 0 0 0 1.5px var(--odeko-mocha);
}
.btn-pill--outline:hover {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
}
/* platform hero "See features" — white fill, ecru text on hover */
.solution-hero--platform .btn-pill--outline { background: #ffffff; }
.solution-hero--platform .btn-pill--outline:hover,
.solution-hero--platform .btn-pill--outline:hover span { background: var(--odeko-mocha); color: #ffffdf; }
/* platform hero "Download the app" — yellow fill, mocha text by default.
   Previously set via inline style, which also hardcoded that mocha text
   color — the same value on every state including hover, where the base
   .btn-pill--mocha:hover rule darkens the background but (being a plain
   CSS rule) can't override an inline color, so the dark text vanished
   into the now-dark background. Setting color here instead, scoped to
   this button, keeps default and hover in the normal cascade — but the
   default-state rule below ties in specificity with the base
   .btn-pill--mocha:hover rule (2 selector components each) and, coming
   later in the file, would otherwise win and block the hover background
   change too. The hover rule re-states the darker background explicitly
   (at higher specificity, 3 components) so hover is unambiguous. */
.solution-hero--platform .btn-pill--mocha { background: var(--odeko-yellow); color: var(--odeko-mocha); }
.solution-hero--platform .btn-pill--mocha:hover,
.solution-hero--platform .btn-pill--mocha:hover span { background: #2d0e06; color: #ffffdf; }

/* ======================================================================
   MOM & POP CASE STUDY — single feature on mocha
   ====================================================================== */

.mompop-case { padding-block: 120px; }
.mompop-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
@media (max-width: 900px) {
  .mompop-grid { grid-template-columns: 1fr; gap: 48px; }
}
.mompop-case .case.case--feature {
  max-width: 420px;
  justify-self: center;
  width: 100%;
  border-radius: 12px;
}
.mompop-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  padding: 0 16px;
}
.mompop-aside .tag {
  align-self: flex-start;
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding: 14px 22px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  transform: rotate(-1.5deg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.mompop-aside .tag .square {
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--odeko-mocha);
  margin: 0 6px;
}
.mompop-aside .desc {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  color: var(--odeko-ecru);
  opacity: 0.92;
  max-width: 32em;
}
.mompop-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--odeko-ecru);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1.5px solid var(--odeko-ecru);
}
.mompop-link .arr { transition: transform var(--dur-med) var(--ease-out); }
.mompop-link:hover .arr { transform: translateX(4px); }

/* ======================================================================
   BRANDS WE CARRY
   ====================================================================== */

.brands { padding-block: 120px; }
.brands-marquee {
  margin-top: 8px;
}
.brands-marquee .logo-mark span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.01em;
  color: var(--odeko-mocha);
  opacity: 0.85;
}
.brands-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 56px;
  max-width: 700px;
}
.brands-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
}
.brands-head p {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  max-width: 36em;
  opacity: 0.78;
}

.brands-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1024px) { .brands-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .brands-grid { grid-template-columns: repeat(2, 1fr); } }

.brand-tile {
  aspect-ratio: 1;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--odeko-mocha);
  transition: transform var(--dur-med), box-shadow var(--dur-med);
}
.brand-tile.is-dark { color: var(--odeko-ecru); }
.brand-tile:hover {
  transform: translateY(-3px) rotate(-1deg);
  box-shadow: 0 10px 24px rgba(64, 24, 11, 0.16);
}

/* ======================================================================
   ENTERPRISE PAGE
   ====================================================================== */

.enterprise-section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 56px;
  max-width: 760px;
}
.enterprise-section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.enterprise-section-head--center .solution-pill { align-self: center; }
.enterprise-section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
}
.enterprise-section-head .lede {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  margin: 0;
  color: rgba(64, 24, 11, 0.78);
}
.enterprise-section-head.dark h2 { color: var(--odeko-ecru); }
.enterprise-section-head.dark .lede { color: var(--odeko-ecru); opacity: 0.7; }
.enterprise-section-head .lede strong { opacity: 1; }

.solution-pill--yellow {
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
}

/* Enterprise grids share the .solution-prop card style — full-bleed to match Independent */
.enterprise-core .container,
.enterprise-extras .container { max-width: none; padding-inline: 0; }
.enterprise-core .enterprise-section-head,
.enterprise-extras .enterprise-section-head { padding-inline: clamp(20px, 4vw, 64px); }
.enterprise-grid {
  display: grid;
  gap: 1px;
  background: rgba(64, 24, 11, 0.18);
  border-block: 1px solid rgba(64, 24, 11, 0.18);
}
.enterprise-grid.grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.enterprise-grid.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) {
  .enterprise-grid.grid-5 { grid-template-columns: repeat(3, 1fr); }
  .enterprise-grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .enterprise-grid.grid-5 { grid-template-columns: 1fr; }
  .enterprise-grid.grid-4 { grid-template-columns: 1fr; }
}

.enterprise-core { padding-block: 0; }
.enterprise-core .enterprise-grid {
  background: rgba(255, 255, 223, 0.3);
  border-color: rgba(255, 255, 223, 0.3);
}
.enterprise-extras { padding-block: 120px; }
.enterprise-extras .enterprise-grid {
  background: rgba(255, 255, 223, 0.18);
  border-color: rgba(255, 255, 223, 0.18);
}
.solution-prop--dark {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
}
.solution-prop--dark:hover { background: #4d1f10 !important; }
.solution-prop--dark h3 { color: var(--odeko-ecru); }
.solution-prop--dark .num { background: var(--odeko-yellow); color: var(--odeko-mocha); opacity: 1; }
.solution-prop--dark .icon { color: var(--odeko-yellow); }
/* uploaded icons are full-color SVGs — render exactly as authored */
.solution-prop--dark .prop-icon-img { filter: none; }
.solution-prop--dark p { color: var(--odeko-ecru); opacity: 0.78; }

/* You're in good company — customer logo row */
.good-company { padding-block: 120px; }
.customer-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: center;
}
@media (max-width: 980px) { .customer-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .customer-row { grid-template-columns: repeat(2, 1fr); } }

.customer-tile {
  display: flex;
  align-items: center;
  justify-content: center;
}
.customer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 94px;
  width: 100%;
}
.customer-logo img {
  max-height: 83px;
  max-width: 195px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* per-logo optical nudge */
.customer-logo img[src*="birchcoffee"] { max-height: 91px; }
.customer-mark {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--odeko-ecru);
  box-shadow: 0 8px 18px rgba(64, 24, 11, 0.12);
}
.customer-tile h4 {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  margin: 0;
  color: var(--odeko-mocha);
}

/* Trusted by — big stat + quote */
.trusted-by { padding-block: 140px; }
.trusted-by-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: end;
}
@media (max-width: 900px) {
  .trusted-by-grid { grid-template-columns: 1fr; gap: 48px; }
}
.trusted-by h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
  color: var(--odeko-mocha);
}
.trust-meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--odeko-mocha);
}
.trust-meta span { display: inline-flex; align-items: center; gap: 8px; }
.trust-meta .dot { width: 8px; height: 8px; background: var(--odeko-mocha); border-radius: 50%; }

.trust-quote {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  padding: 36px;
  border-radius: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.trust-quote blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--odeko-ecru);
}
.trust-quote figcaption .who {
  font-family: var(--font-text);
  font-size: 14px;
  opacity: 0.75;
}

/* ======================================================================
   VENDORS PAGE
   ====================================================================== */

.solution-hero--vendors { background: var(--odeko-ecru); }
/* Centered, photo-free hero variant */
.solution-hero--centered { padding-block: clamp(72px, 11vw, 152px); }
/* Photo-backed variant */
.solution-hero--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.vendor-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.vendor-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vendor-hero-scrim {
  position: absolute;
  inset: 0;
  /* warm ecru wash keeps mocha text easily legible over the photo */
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(255,255,223,0.86), rgba(255,255,223,0.72)),
    linear-gradient(180deg, rgba(255,255,223,0.6), rgba(255,255,223,0.9));
}
.vendor-hero-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  max-width: 1240px;
}
.vendor-hero-centered .solution-pill { align-self: center; }
.vendor-hero-centered .solution-headline {
  font-size: clamp(50px, 7vw, 104px);
  max-width: none;
}
.vendor-hero-centered .solution-lede {
  max-width: 56em;
  font-size: 19px;
}
.vendor-inline-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--odeko-mocha);
  font-weight: 500;
  border-bottom: 1.5px solid var(--odeko-mocha);
  cursor: pointer;
}
.vendor-inline-link:hover { background: var(--odeko-yellow); }
.solution-hero--vendors .solution-pill {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
}

.vendor-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.shelf-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  aspect-ratio: 1;
  padding: 8px;
  background: var(--odeko-mocha);
  border-radius: 18px;
  position: relative;
  box-shadow: 0 16px 40px rgba(64, 24, 11, 0.16);
}
.shelf-tile {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.08em;
  color: var(--odeko-mocha);
  position: relative;
  isolation: isolate;
}
.shelf-tile.is-dark { color: var(--odeko-ecru); }
.shelf-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

/* "What we look for" — heading left, stacked list right */
.fit-section { padding-block: 80px 56px; }
.fit-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  background: var(--odeko-white);
  border: 1px solid rgba(64, 24, 11, 0.12);
  border-radius: 28px;
  padding: clamp(32px, 4vw, 56px);
  box-shadow: 0 16px 44px rgba(64, 24, 11, 0.07);
}
@media (max-width: 860px) {
  .fit-split { grid-template-columns: 1fr; gap: 40px; }
}

/* Combined fit + intake inset card */
.fit-intake-section { padding-block: 80px; }
.fit-intake-card {
  background: var(--odeko-white);
  border: 1px solid rgba(64, 24, 11, 0.12);
  border-radius: 28px;
  padding: clamp(32px, 4vw, 56px);
  box-shadow: 0 16px 44px rgba(64, 24, 11, 0.07);
}
/* the inner fit-split drops its own card chrome when nested */
.fit-intake-card .fit-split {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.fit-intake-divider {
  border: 0;
  border-top: 1.5px solid var(--odeko-mocha);
  margin: clamp(40px, 5vw, 64px) 0 0;
}
/* lift the intake pill so it straddles the mocha divider, with its own
   thin mocha outline */
.fit-intake-card .vendor-intake-grid {
  position: relative;
  padding-top: 44px;
}
.fit-intake-card .vendor-intake-grid .solution-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 2;
  border: 1.5px solid var(--odeko-mocha);
  /* this pill is vertically centered ON the card's top edge — if its text
     wraps to 2 lines, the taller box pokes further above that edge and
     gets clipped by the card's rounded-corner overflow. Keep it single-
     line (its "Vendor intake form" text comfortably fits) rather than
     letting nowrap apply to every .solution-pill site-wide, which broke
     the longer hero pills that are supposed to wrap on mobile. */
  white-space: nowrap;
}
/* recolor the intake form/side for the light card background */
.fit-intake-card .vendor-intake-side h2,
.fit-intake-card .vendor-intake-side p,
.fit-intake-card .vendor-intake-list { color: var(--odeko-mocha); }
.fit-intake-card .vendor-intake-side p { opacity: 0.82; }
.fit-intake-card .vendor-intake-list { border-top-color: rgba(64, 24, 11, 0.18); }
.fit-intake-card .vendor-intake-list li { border-bottom-color: rgba(64, 24, 11, 0.18); }
.fit-intake-card .vendor-intake-list .num { color: var(--odeko-mocha); }
.fit-intake-card .vendor-form .field { background: #fff; border-color: var(--odeko-mocha); }
.fit-intake-card .vendor-form .field input,
.fit-intake-card .vendor-form .field select,
.fit-intake-card .vendor-form .field textarea { color: var(--odeko-mocha); }
.fit-intake-card .vendor-form .field input::placeholder,
.fit-intake-card .vendor-form .field textarea::placeholder { color: rgba(64, 24, 11, 0.45); }
.fit-intake-card .vendor-form .field-wrap-select::after { border-color: var(--odeko-mocha); }
.fit-intake-card .vendor-field-note,
.fit-intake-card .field-group-label { color: rgba(64, 24, 11, 0.6); }
.fit-intake-card .vendor-field-note--error { color: #b3261e; }
.fit-intake-card .vendor-tag {
  border-color: rgba(64, 24, 11, 0.35);
  color: var(--odeko-mocha);
}
.fit-intake-card .vendor-tag:hover { border-color: var(--odeko-mocha); }
.fit-intake-card .vendor-tag.is-active {
  background: var(--odeko-mocha);
  border-color: var(--odeko-mocha);
  color: var(--odeko-ecru);
}
/* dim the category select while it's on its empty placeholder option */
.vendor-form .field-wrap-select select:required:invalid { color: rgba(64, 24, 11, 0.45); font-size: 13px; }
.vendor-form .field-wrap-select option { color: var(--odeko-mocha); }

.fit-intro { display: flex; flex-direction: column; gap: 18px; }
/* keep the combined-card heading to two lines */
.fit-intake-card .fit-intro h2 { max-width: 480px; }
.fit-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--odeko-mocha);
  opacity: 0.7;
}
.fit-intro h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
}
.fit-list { display: flex; flex-direction: column; }
.fit-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid rgba(64, 24, 11, 0.18);
}
.fit-row:first-child { border-top: 0; padding-top: 0; }
.fit-row .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -4px;
  background: var(--odeko-yellow);
  border-radius: 999px;
  color: var(--odeko-mocha);
  flex: 0 0 auto;
}
.fit-row-text h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
}
.fit-row-text p {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.25;
  margin: 0;
  opacity: 0.82;
  max-width: none;
}

/* Accordion variant */
.fit-acc-row {
  display: block;
  padding: 0;
}
.fit-acc-trigger {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: center;
  width: 100%;
  background: none;
  border: 0;
  padding: 18px 0;
  cursor: pointer;
  text-align: left;
  color: var(--odeko-mocha);
}
.fit-acc-trigger .icon {
  margin-top: 0;
  transition: background var(--dur-fast);
}
.fit-acc-trigger h3 { margin: 0; }
.fit-acc-plus .fit-acc-vbar {
  transform-origin: center;
  transition: transform var(--dur-med) var(--ease-out);
}
.fit-acc-row.is-open .fit-acc-plus .fit-acc-vbar { transform: scaleY(0); }
.fit-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}
.fit-acc-row.is-open .fit-acc-panel { grid-template-rows: 1fr; }
.fit-acc-panel > p {
  overflow: hidden;
  font-family: var(--font-text);
  line-height: 1.4;
  opacity: 0.82;
  margin: 0;
  padding-left: 44px;
  padding-bottom: 0;
}
.fit-acc-row.is-open .fit-acc-panel > p { padding-bottom: 18px; }

/* (legacy 4-up grid styles retained below, unused on vendors) */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(64, 24, 11, 0.18);
  border: 1px solid rgba(64, 24, 11, 0.18);
}
@media (max-width: 980px) { .fit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-card {
  background: var(--odeko-ecru);
  padding: 36px 28px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
}
.fit-card:hover { background: #fff9e3; }
.fit-card .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.55;
}
.fit-card .icon {
  display: inline-flex;
  color: var(--odeko-mocha);
  margin: 4px 0 8px;
}
.fit-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  margin: 0;
}
.fit-card p {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.82;
}

/* Intake form section */
.vendor-intake { padding-block: 80px; }
.vendor-intake-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) {
  .vendor-intake-grid { grid-template-columns: 1fr; gap: 40px; }
}
.vendor-intake-side h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 16px 0 20px;
  color: var(--odeko-ecru);
  max-width: 16ch;
}
.vendor-intake-side p {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.55;
  color: var(--odeko-ecru);
  opacity: 0.82;
  margin: 0 0 32px;
  max-width: 32em;
}
.vendor-intake-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 223, 0.2);
}
.vendor-intake-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 223, 0.2);
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--odeko-ecru);
  opacity: 0.92;
}
.vendor-intake-list .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--odeko-yellow);
}

.vendor-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.vendor-form .field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .vendor-form .field-pair { grid-template-columns: 1fr; }
}
/* white-highlighted row with an underline — not a full pill/box */
.vendor-form .field {
  background: rgba(255, 255, 223, 0.08);
  border: 0;
  border-bottom: 1.5px solid rgba(255, 255, 223, 0.35);
  border-radius: 6px 6px 0 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  min-width: 0;
}
.vendor-form .field-textarea {
  grid-column: 1 / -1;
  border: 1.5px solid rgba(255, 255, 223, 0.35);
  border-radius: 12px;
  padding: 8px 14px;
  align-items: flex-start;
}
.vendor-form .field input,
.vendor-form .field select,
.vendor-form .field textarea {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--odeko-ecru);
  padding: 12px 0;
  min-width: 0;
  appearance: none;
  resize: none;
}
.vendor-form .field-textarea input,
.vendor-form .field-textarea textarea { padding: 0; }
.vendor-form .field input::placeholder,
.vendor-form .field textarea::placeholder { font-size: 13px; color: rgba(255, 255, 223, 0.45); }
.vendor-form .field select { padding-right: 20px; }
.vendor-form .field-wrap-select::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--odeko-ecru);
  border-bottom: 1.5px solid var(--odeko-ecru);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.vendor-form .field-wrap-select { position: relative; }

/* small helper/counter copy under a field, e.g. the description char count */
.vendor-field-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 223, 0.6);
}
.vendor-field-note--error { color: #ffb4a8; }

/* pairs a field with its own note directly beneath it, closer together than the form's row gap */
.vendor-form .field-note-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vendor-form .field-note-stack--full { grid-column: 1 / -1; }
.vendor-field-note--aligned { padding-left: 14px; }

.field-group { grid-column: 1 / -1; display: grid; gap: 6px; }
.field-group-label { font-size: 12px; color: rgba(255, 255, 223, 0.6); }
.vendor-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vendor-tag {
  font-family: var(--font-text);
  font-size: 12px;
  padding: 4px 12px 3px;
  border: 1.5px solid rgba(255, 255, 223, 0.35);
  background: transparent;
  color: var(--odeko-ecru);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.vendor-tag:hover { border-color: var(--odeko-ecru); }
.vendor-tag.is-active { background: var(--odeko-yellow); border-color: var(--odeko-yellow); color: var(--odeko-mocha); }

.vendor-submit {
  grid-column: 1 / -1;
  margin-top: 6px;
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  border: 0;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  padding: 20px 28px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: transform var(--dur-fast), box-shadow var(--dur-med);
}
.vendor-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
}

/* ======================================================================
   PLATFORM PAGE
   ====================================================================== */

.solution-hero--platform .solution-pill {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
}
.platform-hero-app {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-left: auto;
  filter: drop-shadow(0 24px 50px rgba(64, 24, 11, 0.18));
}

/* Platform hero — marketing composition of the app */
.platform-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 24px 40px;
  isolation: isolate;
}
.phv-blob {
  position: absolute;
  inset: 8% 6% 4% 6%;
  z-index: -1;
  border-radius: 40px;
  background:
    radial-gradient(120% 90% at 80% 10%, #ffe066 0%, transparent 60%),
    radial-gradient(110% 100% at 10% 90%, #ffcf33 0%, transparent 62%),
    var(--odeko-yellow);
}
.phv-blob::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(64, 24, 11, 0.10) 1.4px, transparent 1.6px);
  background-size: 22px 22px;
  opacity: 0.55;
}
.phv-phone {
  position: relative;
  width: min(300px, 78%);
  background: var(--odeko-mocha);
  padding: 10px;
  border-radius: 40px;
  box-shadow: 0 30px 60px rgba(64, 24, 11, 0.28);
}
.phv-phone::before {
  content: "";
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 92px; height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 223, 0.35);
  z-index: 2;
}
.phv-screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
  background: #fff;
}
.phv-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 13px;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(64, 24, 11, 0.18);
  white-space: nowrap;
  z-index: 2;
}
.phv-chip--a {
  top: 14%;
  left: -2%;
  transform: rotate(-4deg);
}
.phv-chip--b {
  bottom: 12%;
  right: -2%;
  transform: rotate(3deg);
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 12px;
  padding: 12px 18px;
}
.phv-chip-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
}
.phv-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #1d6a3e;
  box-shadow: 0 0 0 3px rgba(29, 106, 62, 0.18);
}
@media (max-width: 980px) {
  .phv-chip--a { left: 2%; }
  .phv-chip--b { right: 2%; }
}

/* product mocks (right side of hero, and inside features) */
.ordering-mock {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  padding: 24px 24px 18px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-text);
  box-shadow: 0 24px 50px rgba(64, 24, 11, 0.25);
  transform: rotate(-1deg);
  max-width: 460px;
  margin-left: auto;
}
.ordering-mock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(255, 255, 223, 0.25);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.ordering-mock-head .dot { width: 4px; height: 4px; background: var(--odeko-ecru); border-radius: 50%; }
.ordering-mock-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 13px;
}
.ordering-mock-row .sw {
  width: 32px; height: 32px;
  border-radius: 6px;
}
.ordering-mock-row .sw.a { background: var(--odeko-yellow); }
.ordering-mock-row .sw.b { background: #d97757; }
.ordering-mock-row .sw.c { background: #f5e3a8; }
.ordering-mock-row .sw.d { background: #c9d3a8; }
.ordering-mock-row .nm { font-weight: 500; }
.ordering-mock-row .sb { font-size: 11px; opacity: 0.6; margin-top: 2px; }
.ordering-mock-row .qty { font-family: var(--font-display); font-weight: 500; opacity: 0.85; }
.ordering-mock-foot {
  margin-top: 8px;
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  padding: 10px 14px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ordering-mock-foot .blink {
  width: 8px; height: 8px;
  background: var(--odeko-mocha);
  border-radius: 50%;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.recurring-mock {
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding: 24px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 16px 32px rgba(64, 24, 11, 0.10);
  font-family: var(--font-text);
}
.recurring-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.recurring-mock-head .pill {
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
}
.recurring-mock-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  align-items: end;
  height: 140px;
}
.recurring-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  height: 100%;
}
.recurring-day .dn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.55;
}
.recurring-day .bar {
  width: 100%;
  background: var(--odeko-mocha);
  border-radius: 6px 6px 2px 2px;
}
.recurring-day .ct {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  opacity: 0.6;
}
.recurring-mock-foot {
  font-size: 13px;
  padding-top: 8px;
  border-top: 1px dashed rgba(64, 24, 11, 0.2);
  font-family: var(--font-display);
  font-weight: 500;
}

.invoice-mock {
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(64, 24, 11, 0.10);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-text);
}
.invoice-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(64, 24, 11, 0.2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.invoice-mock-head .amt { font-size: 22px; font-weight: 500; letter-spacing: -0.005em; }
.invoice-row {
  display: grid;
  grid-template-columns: 80px 1fr 48px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.invoice-row .bar {
  height: 8px;
  background: rgba(64, 24, 11, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.invoice-row .bar div {
  height: 100%;
  background: var(--odeko-mocha);
  border-radius: inherit;
}
.invoice-mock-foot {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-top: 8px;
  border-top: 1px dashed rgba(64, 24, 11, 0.2);
}

.insights-mock {
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 16px 32px rgba(64, 24, 11, 0.10);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-text);
}
.insights-mock-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.insights-mock-head .dot { width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: 0.4; }
.insights-mock-body {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 24px;
  align-items: center;
}
.donut {
  position: relative;
}
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  margin-top: 8px;
}
.donut-legend b {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
}
.bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bars-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  opacity: 0.7;
}
.bars-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  height: 110px;
  align-items: end;
}
.month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.month .bar {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 4px 4px 2px 2px;
}
.month .seg { width: 100%; }
.month .seg.a { background: var(--odeko-yellow); }
.month .seg.b { background: var(--odeko-mocha); }
.month .seg.c { background: #c97a3e; }
.month span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  opacity: 0.6;
}

/* Feature pairs */
.platform-features { padding-block: 120px; }
.platform-feature-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
@media (max-width: 880px) {
  .platform-feature-list { gap: 40px; }
}
.platform-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 64px;
  align-items: center;
}
.platform-feature.is-reversed { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.platform-feature.is-reversed .platform-feature-text { order: 2; }
.platform-feature.is-reversed .platform-feature-mock { order: 1; }
.platform-feature-mock {
  display: flex;
  align-items: center;
  justify-content: center;
}
.platform-feature-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  transition: transform var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.platform-feature-photo:hover {
  transform: translateY(-4px);
  filter: drop-shadow(0 14px 24px rgba(64, 24, 11, 0.18));
}
@media (max-width: 880px) {
  /* .platform-feature.is-reversed (2 classes) outranks the bare
     .platform-feature rule above by specificity, so it must be repeated
     here too — otherwise reversed features keep their desktop 2-column
     grid-template-columns and never actually stack on mobile. */
  .platform-feature, .platform-feature.is-reversed { grid-template-columns: 1fr; gap: 28px; }
  .platform-feature.is-reversed .platform-feature-text { order: 1; }
  .platform-feature.is-reversed .platform-feature-mock { order: 2; }
}

.platform-feature-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 32em;
}
.platform-feature-text .num {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--odeko-mocha);
  color: var(--odeko-yellow);
  align-items: center;
  justify-content: center;
}
.platform-feature-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  opacity: 0.6;
}
.platform-feature-text h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0;
}
.platform-feature-text p {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  opacity: 0.82;
}

/* Vibe overrides for the solution hero ------------------------------- */
.vibe-espresso .solution-hero {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
}
.vibe-espresso .solution-headline { color: var(--odeko-yellow); }
.vibe-espresso .solution-lede { color: var(--odeko-ecru); opacity: 0.85; }
.vibe-espresso .solution-pill { background: var(--odeko-yellow); color: var(--odeko-mocha); }
.vibe-bakery .solution-hero { background: #fff8d6; }
.vibe-bakery .solution-pill { background: var(--odeko-mocha); color: var(--odeko-ecru); }

/* ======================================================================
   BLOG — "The Daily Grind"
   ====================================================================== */

/* featured latest article (blog landing) */
.blog-lede {
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding-block: 64px 8px;
}
.blog-lede-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 0;
}
.blog-lede-head h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0;
}
.blog-lede-head p {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  max-width: 48ch;
  opacity: 0.82;
}
.blog-lede-divider {
  border-top: 1px solid rgba(64, 24, 11, 0.18);
  margin-block: 32px 44px;
}
.blog-featured {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) { .blog-featured { grid-template-columns: 1fr; gap: 24px; } }
.blog-featured-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--edge-radius, 14px);
  background: #d9c8b8;
}
.blog-featured-media .ph { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease-out); }
.blog-featured-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.blog-featured:hover .blog-featured-media .ph { transform: scale(1.03); }
.blog-featured-flag {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--odeko-mocha);
  background: var(--odeko-yellow);
  padding: 7px 13px 5px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.blog-featured-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.008em;
  margin: 0 0 14px;
  max-width: 16ch;
}
.blog-featured-body p {
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 40ch;
  opacity: 0.85;
}
.blog-featured-meta {
  display: block;
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 18px;
}

.blog-hero {
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding-block: 56px 64px;
  overflow: hidden;
}
.blog-hero-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.blog-hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--odeko-mocha);
}
.blog-hero-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  margin: 0 0 10px;
  opacity: 0.75;
  text-align: right;
}

/* horizontal scroll of featured stories */
.blog-feature-scroll {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  padding-block: 4px 8px;
  scroll-padding-left: max(24px, calc((100vw - 1320px) / 2 + 56px));
}
.blog-feature-scroll::-webkit-scrollbar { display: none; }
.blog-feature-track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding-inline: max(24px, calc((100vw - 1320px) / 2 + 56px));
  align-items: flex-start;
}
.blog-feature-card {
  flex: 0 0 auto;
  width: min(420px, 80vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
/* uniform top-aligned media for customer-stories scroll */
.blog-feature-card.f0 .blog-feature-media,
.blog-feature-card.f1 .blog-feature-media,
.blog-feature-card.f2 .blog-feature-media { aspect-ratio: 4 / 5; margin-bottom: 18px; }
.blog-feature-card.f1 { width: min(420px, 80vw); }

.blog-feature-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--edge-radius, 14px);
  background: #d9c8b8;
  margin-bottom: 18px;
}
.blog-feature-media .ph { position: absolute; inset: 0; }
.blog-feature-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.blog-feature-media:hover .ph { transform: scale(1.03); transition: transform var(--dur-slow) var(--ease-out); }
.blog-feature-cat {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 12px 5px;
  border-radius: 999px;
}
.blog-feature-meta {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}
.blog-feature-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 10px 0 8px;
  max-width: 18ch;
}
.blog-feature-body p {
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 14px;
  opacity: 0.8;
  max-width: 32ch;
}
.blog-read {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1.5px solid var(--odeko-mocha);
  padding-bottom: 2px;
}
.blog-read .arr { transition: transform var(--dur-med) var(--ease-out); }
.blog-read:hover .arr { transform: translateX(4px); }

.blog-hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
}
.blog-foot-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-arrows { display: flex; gap: 10px; }
.blog-arrows button {
  width: 48px; height: 48px;
  border: 1.5px solid var(--odeko-mocha);
  background: transparent;
  color: var(--odeko-mocha);
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.blog-arrows button:hover { background: var(--odeko-mocha); color: var(--odeko-ecru); transform: translateY(-1px); }

/* ---- grid + filters ---- */
.blog-grid-section { background: var(--odeko-ecru); padding-block: 96px; }
.blog-grid-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(64, 24, 11, 0.18);
}
.blog-grid-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
}
.blog-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.blog-filter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 18px 8px;
  border: 1.5px solid rgba(64, 24, 11, 0.3);
  background: transparent;
  color: var(--odeko-mocha);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.blog-filter:hover { border-color: var(--odeko-mocha); }
.blog-filter.is-active { background: var(--odeko-mocha); border-color: var(--odeko-mocha); color: var(--odeko-ecru); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
}
@media (max-width: 920px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card { display: flex; flex-direction: column; }
.blog-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--edge-radius, 14px);
  background: #d9c8b8;
  margin-bottom: 18px;
}
.blog-card-media .ph { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease-out); }
.blog-card-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.blog-card:hover .blog-card-media .ph { transform: scale(1.04); }

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
.blog-card-cat {
  font-weight: 500;
  color: var(--odeko-mocha);
  border-bottom: 1.5px solid transparent;
  text-transform: uppercase;
}
.blog-card-cat:hover { border-bottom-color: var(--odeko-mocha); }
.blog-card-meta .dot { opacity: 0.5; }
.blog-card-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.12;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.blog-card-body h3 a { transition: opacity var(--dur-fast); }
.blog-card-body h3 a:hover { opacity: 0.62; }
.blog-card-body p {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.8;
}
.blog-empty {
  font-family: var(--font-text);
  font-size: 16px;
  opacity: 0.7;
  padding: 16px 0;
}

/* pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 56px;
}
.blog-page-num,
.blog-page-arrow {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid rgba(64, 24, 11, 0.3);
  background: transparent;
  color: var(--odeko-mocha);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.blog-page-num:hover,
.blog-page-arrow:hover { border-color: var(--odeko-mocha); }
.blog-page-num.is-active {
  background: var(--odeko-mocha);
  border-color: var(--odeko-mocha);
  color: var(--odeko-ecru);
}
.blog-page-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.blog-page-arrow:disabled:hover { border-color: rgba(64, 24, 11, 0.3); }

/* ---- newsletter ---- */
.blog-news { background: var(--odeko-ecru); padding-block: 0 112px; }
.blog-news-card {
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  border-radius: var(--edge-radius, 14px);
  padding: clamp(36px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 820px) { .blog-news-card { grid-template-columns: 1fr; gap: 28px; } }
.blog-news-copy h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.02;
  letter-spacing: -0.008em;
  margin: 18px 0 12px;
}
.blog-news-copy p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  max-width: 34ch;
  opacity: 0.85;
}
.blog-news-form { display: flex; flex-direction: column; gap: 12px; }
.blog-news-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1.5px solid var(--odeko-mocha);
  border-radius: 999px;
  padding: 6px 6px 6px 22px;
}
.blog-news-pill input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--odeko-mocha);
  padding: 12px 0;
}
.blog-news-pill input::placeholder { color: rgba(64, 24, 11, 0.45); }
.blog-news-pill .btn-pill {
  flex: 0 0 auto;
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  padding: 14px 22px 11px;
}
.blog-news-pill .btn-pill:hover { background: #2d0e06; }
.blog-news-fine {
  font-family: var(--font-text);
  font-size: 12px;
  letter-spacing: 0.02em;
  opacity: 0.65;
  padding-left: 4px;
}

/* ======================================================================
   ARTICLE / STORY DETAIL TEMPLATE
   ====================================================================== */

.article-hero {
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  padding-block: 40px 0;
}
.article-hero-inner {
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 32px;
}
.article-back {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  opacity: 0.7;
  margin-bottom: 28px;
}
.article-back:hover { opacity: 1; }
.article-back .arr { transition: transform var(--dur-med) var(--ease-out); }
.article-back:hover .arr { transform: translateX(-3px); }
.article-cat {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--odeko-mocha);
  background: var(--odeko-yellow);
  padding: 7px 13px 5px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.article-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  max-width: 22ch;
}
.article-deck {
  font-family: var(--font-text);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  margin: 0 0 32px;
  max-width: 46ch;
  opacity: 0.82;
}
.article-hero-rule {
  width: 100%;
  border-top: 1px solid rgba(64, 24, 11, 0.18);
  margin: 4px 0 0;
}
.article-hero-rule--bottom {
  margin: 0;
}
.article-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c9a073, #6a3a1a);
  flex: 0 0 auto;
}
.article-byline-text {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}
.article-byline-text b { font-weight: 500; display: block; }
.article-byline-text span { opacity: 0.65; }
.article-share { margin-left: auto; }
.article-share button {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--odeko-mocha);
  background: transparent;
  border: 1.5px solid rgba(64, 24, 11, 0.3);
  border-radius: 999px;
  padding: 8px 16px 6px;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.article-share button:hover { background: var(--odeko-mocha); color: var(--odeko-ecru); border-color: var(--odeko-mocha); }

/* two-column hero layout */
.article-hero-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  padding-block: 48px 56px;
}
@media (max-width: 880px) {
  .article-hero-two-col {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.article-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.article-hero-right .article-hero-media {
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
}

.article-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border-radius: var(--edge-radius, 14px);
  background: #d9c8b8;
}
.article-hero-media .ph { position: absolute; inset: 0; }
.article-hero-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* story hero — mocha background */
.article-hero--story {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  padding-bottom: 0;
}
.article-back--light {
  color: var(--odeko-ecru);
  opacity: 0.6;
}
.article-back--light:hover { opacity: 1; }
.article-hero-rule--light {
  border-top-color: rgba(255, 255, 223, 0.18);
}
.article-hero--story .article-title { color: var(--odeko-ecru); }
.article-hero--story .article-deck  { color: var(--odeko-ecru); opacity: 0.72; margin-bottom: 0; }

/* story two-col: slightly wider text column, portrait image, top-aligned */
.article-hero-two-col--story {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  padding-bottom: 40px;
}
@media (max-width: 880px) {
  /* same specificity as the rule above, so — since it comes later in the
     cascade — this is what actually needs to win to collapse the story
     hero to one column; the earlier .article-hero-two-col media override
     alone can't beat this rule's equal specificity. */
  .article-hero-two-col--story {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* portrait image for story */
.article-hero-right .article-hero-media--portrait {
  aspect-ratio: unset;
  height: 440px;
}
@media (max-width: 880px) {
  .article-hero-right .article-hero-media--portrait { height: 320px; }
}

/* story eyebrow: category pill + shop name */
.article-story-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.article-story-shop {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--odeko-ecru);
  opacity: 0.55;
}

/* horizontal facts strip at base of story hero */
.article-story-facts {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  position: relative;
}
/* full-bleed horizontal rule */
.article-story-facts::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 223, 0.18);
}
.article-story-fact {
  flex: 1;
  min-width: 0;
  padding: 28px 32px 52px 0;
  margin-right: 32px;
  border-right: 1px solid rgba(255, 255, 223, 0.15);
}
.article-story-fact:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}
.article-story-fact dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--odeko-ecru);
  opacity: 0.45;
  margin-bottom: 6px;
}
.article-story-fact dd {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--odeko-ecru);
  margin: 0;
}

/* blog byline row */
.article-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

/* blog body — centered reading column */
.article-body-section--blog .article-layout {
  max-width: 720px;
  margin-inline: auto;
}

/* body */
.article-body-section { background: var(--odeko-ecru); padding-block: 72px 96px; }
.article-layout { display: block; }
.article-layout.has-rail {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) {
  .article-layout.has-rail { grid-template-columns: 1fr; gap: 40px; }
}

.article-rail {
  position: sticky;
  top: 100px;
  background: #ffffff;
  border: 1px solid rgba(64, 24, 11, 0.14);
  border-radius: var(--edge-radius, 14px);
  padding: 26px 24px;
}
@media (max-width: 880px) { .article-rail { position: static; } }
.article-rail h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 16px;
}
.article-rail dl { margin: 0 0 22px; }
.article-rail dl > div { padding: 11px 0; border-top: 1px solid rgba(64, 24, 11, 0.12); }
.article-rail dl > div:first-child { border-top: 0; }
.article-rail dt { font-family: var(--font-text); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; margin-bottom: 3px; }
.article-rail dd { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin: 0; letter-spacing: -0.005em; }
.article-rail-cta { width: 100%; justify-content: center; }

/* prose */
.article-prose {
  max-width: 68ch;
  margin: 0 auto;
}
.has-rail .article-prose { margin: 0; }
.article-prose > * { margin-inline: auto; }
.article-prose p,
.article-prose ul {
  font-family: var(--font-text);
  font-size: 18px;
  line-height: 1.7;
  color: var(--odeko-mocha);
  margin: 0 0 24px;
}
.article-lead {
  font-size: 22px !important;
  line-height: 1.5 !important;
  font-weight: 400;
}
.article-prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 44px 0 16px;
}
.article-list { padding-left: 0; list-style: none; }
.article-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
}
.article-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 12px; height: 12px;
  background: var(--odeko-yellow);
  border: 1.5px solid var(--odeko-mocha);
}
.article-figure { margin: 36px 0; }
.article-figure-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--edge-radius, 14px);
  background: #d9c8b8;
}
.article-figure-media .ph { position: absolute; inset: 0; }
.article-figure-media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.article-figure figcaption {
  font-family: var(--font-text);
  font-size: 13px;
  letter-spacing: 0.01em;
  opacity: 0.6;
  margin-top: 10px;
  text-align: center;
}
.article-pull {
  margin: 40px 0;
  padding: 8px 0 8px 28px;
  border-left: 4px solid var(--odeko-yellow);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--odeko-mocha);
}
.article-pull cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-text);
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.65;
}

/* article zip cta */
.zip-cta {
  background: var(--odeko-yellow);
  padding-block: 48px;
}
.zip-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 768px) {
  .zip-cta-grid { grid-template-columns: 1fr; gap: 32px; }
}
.zip-cta-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.008em;
  margin: 0 0 4px;
  color: var(--odeko-mocha);
}
.zip-cta-lede {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--odeko-mocha);
  opacity: 0.78;
  margin: 0;
}
.zip-cta-right {
  display: flex;
  align-items: center;
}

/* covered state pill */
.bu-alert-pill--covered {
  background: #1a5c36;
  color: #d4f7e4;
}
.bu-alert-pill--covered .bu-alert-dot {
  background: #5fe49a;
}
.bu-alert-pill--covered .bu-alert-dot::after {
  border-color: #5fe49a;
}

/* related */
.article-related { background: var(--odeko-ecru); padding-block: 0 112px; }
.article-related-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(64, 24, 11, 0.18);
  padding-top: 56px;
}
.article-related-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0;
}

/* small reset */
.icn { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Brands section (independent page) — thinner top/bottom rule than the home banner */
#brands.logo-marquee-section {
  border-top-width: 1px;
  border-bottom-width: 1px;
}


.quote-foot {
  margin-top: 44px;
  text-align: center;
}
.quote-foot .quote-more-link { white-space: nowrap; }

.cases-foot {
  margin-top: 56px;
  text-align: center;
}

.quote-more-link.cases-more-link {
  color: var(--odeko-mocha);
  opacity: 0.6;
}

.quote-more-link {
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--odeko-ecru);
  opacity: 0.55;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 0.15s ease;
}

.quote-more-link:hover {
  opacity: 1;
}

.quote-more-link .arr {
  display: inline-block;
  transition: transform 0.15s ease;
}

.quote-more-link:hover .arr {
  transform: translateX(3px);
}

/* ======================================================================
   LOGO MARQUEE — "Proudly brewing up magic with…"
   Ecru field so the mocha logos read; sits flush above the mocha quote.
   ====================================================================== */

.logo-marquee-section {
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  padding-block: 64px 72px;
  overflow: visible;
  position: relative;
  border-top: 2px solid var(--odeko-mocha);
  border-bottom: 2px solid var(--odeko-mocha);
}
/* eyebrow pill, lifted to straddle the mocha section above */
.logo-marquee-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  z-index: 3;
}
.logo-marquee-title {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--odeko-mocha);
  background: var(--odeko-ecru);
  border: 1.5px solid var(--odeko-mocha);
  border-radius: 999px;
  padding: 12px 24px 10px;
  margin: 0;
}
.marquee-title-break { display: none; }
@media (max-width: 640px) {
  /* on the widest phones the label still fits inline; below that, force it
     onto its own line after the "CURATED FOR YOUR COUNTER:" lead-in so the
     pill wraps at a sensible point instead of mid-phrase. */
  .marquee-title-break { display: inline; }
  .logo-marquee-title { line-height: 1.6; }
}
.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  width: max-content;
  animation: logo-marquee-scroll 48s linear infinite;
  will-change: transform;
}
/* Hover slowdown handled via JS (Web Animations API playbackRate) */
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* — Two-row counter-scrolling variant — */
.logo-marquee-section--split .logo-marquee {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.logo-marquee-track--reverse { animation-direction: reverse; }
.logo-marquee-section--split .logo-mark { height: 116px; }
.logo-marquee-section--split .logo-mark--wide img {
  max-width: 244px;
  max-height: 68px;
}
.logo-marquee-section--split .logo-mark--tall img {
  max-width: 148px;
  max-height: 110px;
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
  .logo-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}
.logo-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
}
.logo-mark span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.01em;
  color: var(--odeko-mocha);
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity var(--dur-fast);
}
.logo-mark:hover span { opacity: 1; }
.logo-mark img {
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Optical balance: wide wordmarks are capped by width and kept short;
   tall/stacked/circular marks get more height but less width. */
.logo-mark--wide img {
  max-width: 208px;
  max-height: 60px;
}
.logo-mark--tall img {
  max-width: 128px;
  max-height: 96px;
}



/* ======================================================================
   TWEAKS — driven by .vibe-* class + CSS custom properties on .page
   Three expressive controls:
     · Vibe       — recolors the whole page mood
     · Edge       — rounds the rectangular surfaces (cards, photos)
     · Rhythm     — multiplies vertical air across all sections
   ====================================================================== */

.page {
  /* fallbacks if the tweak vars aren't set */
  --edge-radius: 15px;
  --rhythm: 1;
}

/* — Rhythm: scale section padding ---------------------------------- */
.page .section { padding-block: calc(112px * var(--rhythm)); }
@media (max-width: 720px) {
  .page .section { padding-block: calc(72px * var(--rhythm)); }
}
.page .hero { padding-block: 0; }
.page .hero-panel {
  padding-top: calc(64px * var(--rhythm));
  padding-bottom: calc(80px * var(--rhythm));
}
.page .section-head--center { margin-bottom: calc(64px * var(--rhythm)); }
.page .quote-section { padding-block: calc(140px * var(--rhythm)) calc(90px * var(--rhythm)); }
.page .final-cta { padding-block: calc(120px * var(--rhythm)); }

/* — Edge softness: rectangular surfaces only --------------------- */
.page .shop-card,
.page .case,
.page .mcard {
  border-radius: var(--edge-radius);
}
.page .mcard-photo {
  border-top-right-radius: var(--edge-radius);
  border-bottom-right-radius: var(--edge-radius);
}
@media (max-width: 720px) {
  /* on mobile the photo moves below the text (see the 720px .mcard-photo
     rule near the carousel styles), so the rounded corners belong on the
     BOTTOM, not the right — this needs the same .page-prefixed specificity
     as the rule above to actually win, otherwise the two right corners
     silently revert to it and end up mismatched with the two left ones. */
  .page .mcard-photo {
    border-radius: 0 0 var(--edge-radius) var(--edge-radius);
  }
}
/* Shop-card photo: rounded top corners only so it meets the white
   body section flush at the bottom seam. */
.page .shop-card .photo {
  border-radius: var(--edge-radius) var(--edge-radius) 0 0;
}
/* keep pills as pills */

/* — Vibe: ESPRESSO (mocha-forward) ------------------------------ */
.vibe-espresso .nav { background: var(--odeko-mocha); }
.vibe-espresso .nav.is-stuck { box-shadow: 0 1px 0 rgba(255,255,223,0.12); }
.vibe-espresso .nav-logo {
  background-color: #FFFFDF;
}
.vibe-espresso .nav-link { color: var(--odeko-ecru); }
.vibe-espresso .nav-link::after { background: var(--odeko-yellow); }
.vibe-espresso .nav-link .caret { color: var(--odeko-ecru); }
.vibe-espresso .nav-signin { color: var(--odeko-ecru); }
.vibe-espresso .nav-cta { background: var(--odeko-yellow); color: var(--odeko-mocha); }

.vibe-espresso .megapanel {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  border-color: rgba(255,255,223,0.18);
  box-shadow: 0 16px 30px rgba(0,0,0,0.3);
}
.vibe-espresso .megapanel-lede .lede { color: var(--odeko-ecru); }
.vibe-espresso .megapanel h4 { color: rgba(255, 255, 223, 0.6); }
.vibe-espresso .megapanel li a { color: var(--odeko-ecru); }
.vibe-espresso .megapanel li a:hover { border-bottom-color: var(--odeko-ecru); }

.vibe-espresso .hero { background: var(--odeko-mocha); }
.vibe-espresso .hero-panel {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
}
.vibe-espresso .hero-headline { color: var(--odeko-yellow); }
.vibe-espresso .hero-eyebrow { color: var(--odeko-ecru); }
.vibe-espresso .hero-eyebrow .dot { background: var(--odeko-yellow); }
.vibe-espresso .hero-lede { color: var(--odeko-ecru); opacity: 0.85; }
.vibe-espresso .zip-pill {
  background: var(--odeko-ecru);
  box-shadow: inset 0 0 0 1px rgba(255,255,223,0.55);
}
.vibe-espresso .btn-pill { background: var(--odeko-yellow); color: var(--odeko-mocha); }
.vibe-espresso .zip-status { color: var(--odeko-ecru); opacity: 0.7; }

/* Magic section a shade deeper to read as a separate room */
.vibe-espresso #magic { background: #2c0e06; }

/* Case studies flip to mocha with yellow cards */
.vibe-espresso #cases {
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
}
.vibe-espresso #cases .case { background: var(--odeko-yellow); }
.vibe-espresso #cases .case .tag { background: var(--odeko-mocha); color: var(--odeko-ecru); }
.vibe-espresso #cases .case .tag .square { background: var(--odeko-yellow); }
.vibe-espresso #cases .case .label,
.vibe-espresso #cases .case .desc { color: var(--odeko-mocha); }
.vibe-espresso #cases .case .play { background: var(--odeko-mocha); color: var(--odeko-ecru); }
.vibe-espresso #cases .case .photo::after {
  background: linear-gradient(180deg, rgba(255,209,0,0) 30%, rgba(64,24,11,0.45) 100%);
}

/* CTA stays cream; submit becomes mocha-on-yellow consistently — no change needed */

/* — Vibe: BAKERY (cream + warm, photo-led) ---------------------- */
.vibe-bakery .hero,
.vibe-bakery .hero-panel {
  background: #fff8d6;
}
.vibe-bakery .hero-panel {
  /* introduce a thin yellow keyline at the left to keep brand color present */
  box-shadow: inset 12px 0 0 var(--odeko-yellow);
  padding-left: calc((100vw - min(100%, 1320px)) / 2 + 68px);
}
.vibe-bakery .nav-cta { background: var(--odeko-mocha); color: var(--odeko-ecru); }
.vibe-bakery .nav-cta:hover { background: #2c0e06; }
.vibe-bakery .zip-pill {
  background: var(--odeko-yellow);
  box-shadow: inset 0 0 0 1px var(--odeko-mocha);
}
.vibe-bakery .btn-pill { background: var(--odeko-mocha); color: var(--odeko-ecru); }
.vibe-bakery .btn-pill:hover { background: #2c0e06; }

/* Magic section warms to mocha-warm so it doesn't read as cold dark */
.vibe-bakery #magic { background: var(--odeko-mocha-warm); }

/* Case studies de-saturate from full yellow to cream-with-yellow-band */
.vibe-bakery #cases {
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
}
.vibe-bakery #cases::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 28px;
  background: var(--odeko-yellow);
}
.vibe-bakery #cases .case .tag {
  background: var(--odeko-yellow);
  color: var(--odeko-mocha);
  box-shadow: 0 4px 12px rgba(64,24,11,0.18);
}
.vibe-bakery #cases .case .tag .square { background: var(--odeko-mocha); }

/* ===================================================================== */
/* LEGAL PAGES (Privacy Policy, Terms of Use, Payments Policy)           */
/* ===================================================================== */

.legal-page-wrap {
  background: var(--odeko-ecru);
  color: var(--odeko-mocha);
  min-height: 100vh;
}
.legal-page-header {
  padding: 80px 0 56px;
  border-bottom: 1px solid rgba(64,24,11,0.12);
}
.legal-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--odeko-mocha);
  opacity: 0.5;
  margin: 0 0 18px;
}
.legal-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--odeko-mocha);
}
.legal-article {
  padding: 64px 0 120px;
}
.legal-inner {
  max-width: 720px;
}
.legal-inner h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--odeko-mocha);
  margin: 52px 0 14px;
  padding-top: 36px;
  border-top: 1px solid rgba(64,24,11,0.12);
  scroll-margin-top: 96px;
}
.legal-inner h2:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.legal-inner h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--odeko-mocha);
  margin: 28px 0 8px;
  scroll-margin-top: 96px;
}
.legal-inner p {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.72;
  color: var(--odeko-mocha);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.legal-inner ul,
.legal-inner ol {
  padding-left: 20px;
  margin: 0 0 14px;
}
.legal-inner li {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--odeko-mocha);
  margin-bottom: 6px;
}
.legal-inner a {
  color: var(--odeko-mocha);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-inner a:hover { opacity: 0.65; }
.legal-inner strong { font-weight: 600; }
.legal-section-break {
  border: 0;
  border-top: 2px solid rgba(64,24,11,0.18);
  margin: 60px 0;
}
.legal-doc-header {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--odeko-mocha);
  opacity: 0.45;
  margin: 56px 0 0;
  padding: 0;
  border: 0;
  background: none;
}

/* ======================================================================
   INTERACTIVE COVERAGE MAP (shared: local-delivery, independent-shops,
   nationwide-shipping). Replaces the static .odeko-map.
   ====================================================================== */
.cov-wrap { display: flex; flex-direction: column; gap: 14px; }
.cov-map {
  position: relative;
  aspect-ratio: 1817 / 1046;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: var(--odeko-yellow);
  cursor: grab;
  touch-action: none;
}
.cov-map:active { cursor: grabbing; }
.cov-map--locked { cursor: default; }
.cov-map--locked:active { cursor: default; }
.cov-map--locked .cov-tip { display: none; }
.cov-map--locked .cov-pin { cursor: pointer; }

/* hover tag shown in the lower-left corner before a shop is placed */
.cov-hovertag {
  position: absolute; left: 14px; bottom: 14px; z-index: 8;
  background: var(--odeko-mocha); color: var(--odeko-ecru);
  font-family: var(--font-text); font-weight: 600; font-size: 13px;
  padding: 7px 14px 6px; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(64,24,11,0.25);
  pointer-events: none;
}
.cov-zoom {
  position: absolute;
  inset: 0;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.cov-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.cov-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 22px; height: 22px;
  padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; z-index: 2;
}
.cov-dot {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--odeko-mocha); border: 2px solid var(--odeko-ecru);
  box-shadow: 0 1px 4px rgba(64,24,11,0.4);
  transform: scale(calc(1 / var(--z, 1)));
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1), background 0.15s ease;
}
.cov-pin:hover .cov-dot { background: var(--odeko-yellow); }
.cov-pin.sel .cov-dot {
  background: var(--odeko-yellow);
  box-shadow: 0 0 0 3px rgba(255,209,0,0.45), 0 1px 5px rgba(64,24,11,0.45);
}
.cov-tip {
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%) scale(calc(1 / var(--z, 1)));
  transform-origin: bottom center;
  margin-bottom: 6px;
  background: var(--odeko-mocha); color: var(--odeko-ecru);
  font-family: var(--font-text); font-weight: 600; font-size: 12px;
  padding: 4px 9px 3px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.14s ease; z-index: 6;
}
.cov-pin:hover .cov-tip, .cov-pin.sel .cov-tip { opacity: 1; }

/* the shop's own pin */
.cov-shop {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; display: grid; place-items: center; z-index: 5;
}
.cov-shop-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #1F8A4D; border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(64,24,11,0.5);
  transform: scale(calc(1 / var(--z, 1)));
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
  z-index: 2;
}
.cov-shop-ring {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #1F8A4D;
  transform: scale(calc(1 / var(--z, 1)));
  transform-origin: center;
  animation: covShopPulse 2s ease-out infinite;
}
@keyframes covShopPulse {
  0% { transform: scale(calc(1 / var(--z, 1))); opacity: 0.8; }
  100% { transform: scale(calc(3.4 / var(--z, 1))); opacity: 0; }
}
.cov-shop-tip {
  position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%) scale(calc(1 / var(--z, 1)));
  transform-origin: bottom center; margin-bottom: 6px;
  background: #1F8A4D; color: #fff;
  font-family: var(--font-text); font-weight: 700; font-size: 12px;
  padding: 4px 9px 3px; border-radius: 7px; white-space: nowrap; z-index: 7;
}

.cov-reset {
  position: absolute; top: 12px; right: 12px; z-index: 8;
  background: var(--odeko-mocha); color: var(--odeko-ecru);
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-text); font-weight: 600; font-size: 12px;
  padding: 7px 14px 6px; box-shadow: 0 4px 12px rgba(64,24,11,0.25);
  transition: background 0.15s ease;
}
.cov-reset:hover { background: #2d0e06; }

.cov-legend {
  display: flex; flex-direction: column; gap: 14px;
  font-family: var(--font-text); color: var(--odeko-mocha);
}
.cov-keys { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 13px; }
.cov-key { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cov-key-sw { flex: 0 0 auto; width: 14px; height: 14px; }
.cov-key-sw--dot { border-radius: 50%; background: var(--odeko-mocha); }
.cov-key-sw--ship { background: var(--odeko-ecru); border: 1.5px solid var(--odeko-mocha); }
.cov-key-sw--shop { border-radius: 50%; background: #1F8A4D; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(64,24,11,0.2); }
.cov-reset-inline {
  margin-left: auto;
  background: var(--odeko-mocha); color: var(--odeko-ecru);
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-text); font-weight: 600; font-size: 12px;
  padding: 7px 15px 6px; transition: background 0.15s ease;
}
.cov-reset-inline:hover { background: #2d0e06; }

.cov-tip { display: none; }
.cov-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cov-detail {
  background: var(--odeko-white);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 3px;
  min-height: 92px; justify-content: center;
}
.cov-detail-eyebrow {
  font-family: var(--font-text); font-weight: 700; font-size: 11px;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted);
}
.cov-detail-city {
  font-family: var(--font-display); font-weight: 500; font-size: 26px;
  line-height: 1.05; letter-spacing: -0.01em; color: var(--odeko-mocha);
}
.cov-detail-stats { font-size: 13px; color: rgba(64,24,11,0.72); margin-top: 4px; }
.cov-detail-stats strong { color: var(--odeko-mocha); font-weight: 700; }
.cov-detail-sep { margin: 0 8px; opacity: 0.5; }
.cov-detail-hint { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; }
.cov-detail-addr { font-size: 14px; font-weight: 600; color: var(--odeko-mocha); line-height: 1.3; margin-top: 2px; }
.cov-zone-tag {
  align-self: flex-start; margin-top: 8px;
  display: inline-flex; align-items: center; gap: 7px;
  background: #1a5c36; color: #d4f7e4;
  font-family: var(--font-text); font-weight: 700; font-size: 11px;
  letter-spacing: 0.02em; padding: 5px 12px 4px; border-radius: 999px;
}
.cov-zone-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5fe49a; flex: 0 0 auto; }
.addr-step-hint, .bu-push-body .addr-step-hint {
  font-family: var(--font-text); font-weight: 500; font-size: 13px;
  color: var(--odeko-mocha); margin: 10px 0 0; opacity: 0.78;
}

.cov-market-callout {
  margin-top: 6px; font-size: 15px;
}
.cov-market-callout strong { font-weight: 700; }

/* ======================================================================
   OUT-OF-ZONE: fade+blur the map and float the third-party icon down
   ====================================================================== */
.cov-map--oob .cov-zoom { filter: blur(2px); opacity: 0.5; transition: filter 0.45s ease, opacity 0.45s ease; }
.cov-oob-icon {
  position: absolute; z-index: 9; left: 50%; top: 50%;
  width: 34%; max-width: 150px; height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(64, 24, 11, 0.28));
}
@media (prefers-reduced-motion: no-preference) {
  .cov-oob-icon { animation: oobDrop 1.75s cubic-bezier(0.35, 0.1, 0.35, 1) both; }
}
@keyframes oobDrop {
  0%   { transform: translate(-50%, -320%) rotate(-10deg); opacity: 0; }
  12%  { opacity: 1; }
  30%  { transform: translate(-66%, -190%) rotate(11deg); }
  48%  { transform: translate(-38%, -120%) rotate(-9deg); }
  66%  { transform: translate(-60%, -78%) rotate(7deg); }
  82%  { transform: translate(-44%, -52%) rotate(-4deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
}

/* ======================================================================
   ACCESSIBILITY (added July 2026 — a11y pass)
   All rules here are additive and safe to remove as a block if needed.
   ====================================================================== */

/* Skip-to-content link — visually hidden until keyboard-focused (WCAG 2.4.1) */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 2000;
  transform: translateY(-150%);
  background: var(--odeko-mocha);
  color: var(--odeko-ecru);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(64, 24, 11, 0.3);
  transition: transform var(--dur-med) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--odeko-yellow);
  outline-offset: 2px;
}
main:focus { outline: none; }

/* Visible keyboard focus ring across interactive elements (WCAG 2.4.7).
   Uses :focus-visible so mouse clicks don't show a ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--odeko-mocha);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On mocha / dark surfaces, switch the ring to yellow so it stays visible */
.hero :focus-visible,
.section--mocha :focus-visible,
.footer :focus-visible,
.nav :focus-visible {
  outline-color: var(--odeko-yellow);
}

/* Hero video pause/play (WCAG 2.2.2) — click or press Enter/Space on the video itself */
.hero-right { position: relative; }