/* Goffy custom styles - hand-authored, not part of the Webflow export.
   .phone-mockup: frames a real app screenshot (captured at the app's own 390x844 viewport) as a
   phone, replacing the generic card-image crop the Webflow template used. Loaded after the
   Webflow stylesheet so its rules win by cascade order without needing !important. */
.phone-mockup {
  aspect-ratio: 390 / 844;
  border-radius: 2.2rem;
  overflow: clip;
  position: relative;
  background: #0b1f12;
  padding: 10px;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 20px 40px -12px rgba(0, 0, 0, 0.55);
}

.phone-mockup::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 18px;
  background: #0b1f12;
  border-radius: 999px;
  z-index: 1;
}

.phone-mockup img {
  border-radius: 1.6rem;
  display: block;
}

/* .mockup-composite: the English-only upgrade from .phone-mockup - a real photo of the screenshot
   already composited into a phone by generate-mockup.js/Mockuuups Studio, so unlike .phone-mockup
   this doesn't force an aspect-ratio or crop; the image's own proportions are already correct. */
.mockup-composite {
  border-radius: 1rem;
  overflow: hidden;
}

.mockup-composite img {
  width: 100%;
  height: auto;
  display: block;
}

/* Features page (template/features.html). One .feature_row per feature: copy on one side, a
   phone screenshot or card grid on the other; .is-flipped swaps sides on desktop only, so the
   copy always comes first when the grid collapses to one column. Sizes/colours come from the
   Webflow design tokens so it tracks the rest of the site. */
@media (min-width: 992px) {
  .feature_row.is-flipped .feature_media {
    order: -1;
  }
}

.feature_media {
  display: flex;
  justify-content: center;
}

.feature_media .phone-mockup {
  width: min(100%, 320px);
}

.feature_media .phone-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature_lead {
  margin: 0.5rem 0 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid var(--_colors---core-accent-color--accent-primary);
}

.feature_lead h3 {
  margin-bottom: 0.25rem;
}

.feature_lead p {
  margin-bottom: 0;
}

.feature_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
}

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

.feature_list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 1.1rem;
  position: relative;
}

.feature_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--_colors---core-accent-color--accent-primary);
}

.feature_list strong {
  font-weight: 600;
}

.feature_list span {
  color: color-mix(in srgb, currentColor 70%, transparent);
  font-size: var(--_typography---text-sm--sm-text-size);
  line-height: var(--_typography---text-sm--sm-text-line-height);
}

.feature_cards .card_body p {
  margin-bottom: 0;
}

/* Homepage (template/index.html). Hero: copy left, one phone screenshot right, clipped at the
   hero's bottom edge rather than shown whole (the phone runs off the section). */
.hero_section {
  overflow: clip;
}

.hero_media {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-self: end;
  max-height: 34rem;
  overflow: hidden;
  margin-bottom: calc(-1 * var(--_sizes---section--section-padding-vertical));
}

.hero_media .phone-mockup {
  width: min(100%, 360px);
}

.hero_media .phone-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero_proof {
  margin-top: 1rem;
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .strip_quotes .quote {
    padding: 0 1.5rem;
  }
  .strip_quotes .quote + .quote {
    border-left: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  }
}

.how_steps {
  margin-bottom: 2rem;
}

.how_step p {
  margin-bottom: 0;
}

.how_guests .card_body {
  padding: 1.5rem 2rem;
}

.how_guests-actions {
  justify-content: flex-end;
}

.cta_mascot {
  display: flex;
  justify-content: center;
}

.cta_mascot img {
  width: min(100%, 420px);
  height: auto;
}

/* The Webflow palette was flipped to a dark theme, but its "inverse" surface kept bg #fff while
   every token that goes *on* it (text-inverse-primary, accent-on-inverse, nav-link-inverse…)
   stayed light — the footer rendered beige-on-white. Point the inverse surface at the secondary
   dark green instead, which is the surface those light tokens were made for. */
:root {
  --_colors---background-color--bg-inverse: var(--_colors---core-neutral-color--neutral-secondary);
}

/* Logo lockups: the mascot icon next to the wordmark, in the 2.5rem nav/footer logo row. */
.nav_logo-img {
  height: 100%;
  width: auto;
  display: block;
}

/* Mega menu: the mascot takes the old promo card's cell; dropped on the collapsed mobile menu. */
.mega-nav_mascot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.mega-nav_mascot img {
  width: min(100%, 280px);
  height: auto;
}

@media (max-width: 991px) {
  .mega-nav_mascot {
    display: none;
  }
}

/* Developers page (template/developers.html): the code samples, client cards and endpoint
   reference that scripts/openapi-reference.js generates from the OpenAPI document. */
.dev_code {
  margin: 0.75rem 0 0;
  /* Top padding clears the copy button: the samples are `white-space: pre` and scroll
     sideways, so a long first line would otherwise slide underneath it. */
  padding: 2.75rem 1.25rem 1rem;
  border-radius: 0.75rem;
  background: #07200d;
  color: #f5f5dc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

.dev_note {
  margin-top: 1.5rem;
}

.dev_endpoints,
.dev_clients {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.dev_clients {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.dev_route code {
  font-size: 0.95rem;
}

.dev_method {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 0.4rem;
  background: #a1d493;
  color: #011806;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.dev_endpoint .heading_small {
  margin-top: 0.5rem;
}

.dev_label {
  margin: 0.9rem 0 0.25rem;
  font-weight: 600;
}

.dev_props {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.dev_props code {
  font-size: 0.85rem;
}

.dev_type {
  opacity: 0.7;
  font-size: 0.8rem;
}

.dev_steps {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.4rem;
}

/* Copy button on every generated code sample (build-site.js applyGenerated wires it). */
.dev_codeblock {
  position: relative;
}

/* Icon-sized and square: the button holds a glyph, never a word. Opaque rather than tinted,
   so it reads as a control sitting on the sample instead of a shape blended into the code. */
.dev_copy {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid rgba(245, 245, 220, 0.45);
  border-radius: 0.5rem;
  background: #123018;
  color: #f5f5dc;
  cursor: pointer;
}

.dev_copy:hover,
.dev_copy:focus-visible {
  border-color: #a1d493;
  background: #1a3f22;
}

.dev_copy.is-copied {
  border-color: #a1d493;
  color: #a1d493;
}