/*
 * The 2026-09-09 refresh.
 *
 * Loaded last, so it owns the palette and the section backgrounds. The earlier
 * sheets keep the layout they already got right; this one changes how the page
 * feels: deeper colour, backgrounds you can actually see, real elevation, and
 * motion that has somewhere to go.
 *
 * Everything here respects `prefers-reduced-motion`. Nothing moves on its own
 * for somebody who asked for stillness.
 */

:root {
  /* Ink and brand. Deeper than before, so type has weight on cream. */
  --ink: #10211e;
  --teal: #0c5f55;
  --teal-deep: #06342f;
  --teal-soft: #dcece6;
  --mint: #2fb894;

  /* The warm half. A local commerce brand should feel like a street, not a
     spreadsheet. */
  --amber: #f5a524;
  --amber-soft: #fdeccd;
  --coral: #ef8f74;
  --lime: #d6ef7f;

  /* Paper. Cream rather than white: white next to photographs reads as a gap
     in the page. */
  --paper: #fdfbf6;
  --sand: #f5efe4;
  --line: #e3ded2;
  --muted: #55645f;

  --radius: 16px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 10px rgb(16 33 30 / 6%);
  --shadow-md: 0 14px 34px -18px rgb(16 33 30 / 34%);
  --shadow-lg: 0 34px 70px -34px rgb(16 33 30 / 45%);
  --ease: cubic-bezier(0.22, 0.68, 0.35, 1);
}

body {
  background: var(--paper);
}

/* --- backgrounds you can see ------------------------------------------- */

.intro {
  background:
    radial-gradient(80% 60% at 12% 0%, #e8f4ee 0%, transparent 62%),
    radial-gradient(70% 55% at 92% 28%, var(--amber-soft) 0%, transparent 60%),
    var(--paper);
}

.local-names {
  background: linear-gradient(96deg, #fff2e2 0%, #ffe9ea 52%, #f2ecff 100%);
  border-block: 1px solid #f0e2d4;
}

.launch-film {
  background:
    radial-gradient(60% 50% at 85% 10%, #cfe9e0 0%, transparent 65%),
    linear-gradient(180deg, #eaf4ef 0%, #ddece5 100%);
}

.app-preview {
  background:
    radial-gradient(65% 45% at 8% 6%, #fdf0d9 0%, transparent 60%),
    var(--sand);
}

.screen-wall {
  background: linear-gradient(180deg, var(--teal-deep) 0%, #0a463f 60%, #09403a 100%);
  color: #f2f7f4;
}

.how-section {
  background:
    radial-gradient(58% 46% at 88% 4%, #e4eefc 0%, transparent 62%),
    linear-gradient(180deg, var(--paper) 0%, #f1f5f2 100%);
}

.merchant-section {
  background:
    radial-gradient(70% 60% at 6% 0%, #14514a 0%, transparent 60%),
    linear-gradient(160deg, #0a3d38 0%, var(--teal-deep) 100%);
}

.workspace-showcase {
  background:
    radial-gradient(60% 50% at 92% 8%, #e6efdc 0%, transparent 60%),
    linear-gradient(180deg, #eef3f8 0%, #e8eef4 100%);
}

.trust-section {
  background: var(--paper);
}

.faq-section {
  background:
    radial-gradient(55% 45% at 10% 8%, #f4ecff 0%, transparent 60%),
    linear-gradient(180deg, #fbf9ff 0%, #f6f4fb 100%);
}

.contact-section,
.early-access {
  background:
    radial-gradient(60% 60% at 88% 0%, #e9f6c9 0%, transparent 62%),
    linear-gradient(170deg, #f6f7e6 0%, #eef2d6 100%);
}

/* The screen wall is dark, so its own type has to come with it. */
.screen-wall .eyebrow {
  color: var(--lime);
}

.screen-wall h2,
.screen-wall h3 {
  color: #fff;
}

.screen-wall .section-head > p,
.screen-wall .fine-print,
.screen-wall figcaption p {
  color: #c3d6cf;
}

/* --- the hero, now a slideshow ------------------------------------------ */

.hero-carousel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-carousel .hero-slides {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* A slow drift while a slide is shown, so a still photograph has a pulse.
     Paused with the slideshow, and absent under reduced motion. */
  transition: opacity 900ms var(--ease);
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide img {
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 7s linear;
  width: 100%;
}

.hero-slide.is-active img {
  transform: scale(1.13);
}

.hero-carousel[data-paused="true"] .hero-slide img,
.hero-carousel .hero-slide:not(.is-active) img {
  transform: scale(1.06);
  transition: transform 600ms var(--ease);
}

.hero-carousel .hero-shade {
  background:
    linear-gradient(180deg, rgb(6 27 24 / 62%) 0%, rgb(6 27 24 / 30%) 42%, rgb(6 27 24 / 82%) 100%),
    radial-gradient(60% 70% at 50% 55%, transparent 0%, rgb(6 27 24 / 45%) 100%);
  inset: 0;
  position: absolute;
  z-index: -1;
}

.hero-word {
  background: linear-gradient(96deg, var(--lime) 0%, var(--amber) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-style: normal;
  white-space: nowrap;
}

.hero-note {
  color: #eaf3ee;
  font-weight: 600;
}

.hero-controls {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

.hero-arrow {
  align-items: center;
  backdrop-filter: blur(6px);
  background: rgb(255 255 255 / 16%);
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 19px;
  height: 40px;
  justify-content: center;
  line-height: 1;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
  width: 40px;
}

.hero-arrow:hover {
  background: rgb(255 255 255 / 32%);
  transform: translateY(-2px);
}

.hero-play {
  font-size: 14px;
  margin-left: 6px;
}

.hero-dots {
  display: flex;
  gap: 8px;
}

.hero-dots button {
  background: rgb(255 255 255 / 40%);
  border: 0;
  border-radius: 999px;
  height: 8px;
  padding: 0;
  transition: width 300ms var(--ease), background 300ms var(--ease);
  width: 8px;
}

.hero-dots button[aria-current="true"] {
  background: var(--lime);
  width: 30px;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* --- the numbers -------------------------------------------------------- */

.stat-band {
  background: linear-gradient(150deg, var(--teal-deep) 0%, #0b4a43 55%, #0d564d 100%);
  color: #eef6f2;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}

.stat-band::after {
  background: radial-gradient(50% 70% at 88% 10%, rgb(214 239 127 / 16%) 0%, transparent 70%);
  content: "";
  inset: 0;
  position: absolute;
}

.stat-inner {
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.stat-head {
  margin-bottom: 34px;
  max-width: 620px;
}

.stat-head .eyebrow {
  color: var(--lime);
}

.stat-head h2 {
  color: #fff;
  font-size: 40px;
  margin: 6px 0 10px;
}

.stat-head > p {
  color: #b9cfc8;
}

.stat-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--radius);
  padding: 22px 20px;
  transition: transform 300ms var(--ease), background 300ms var(--ease);
}

.stat:hover {
  background: rgb(255 255 255 / 11%);
  transform: translateY(-4px);
}

.stat strong {
  background: linear-gradient(96deg, #fff 0%, var(--lime) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: block;
  font-size: 46px;
  font-weight: 800;
  line-height: 1.05;
}

.stat span {
  color: #fff;
  display: block;
  font-weight: 700;
  margin: 6px 0 8px;
}

.stat p {
  color: #b3cac2;
  font-size: 14px;
  line-height: 1.5;
}

/* --- every screen, in the open ------------------------------------------ */

.screen-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.screen-card {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius-lg);
  margin: 0;
  padding: 20px 20px 22px;
  transition: transform 350ms var(--ease), background 350ms var(--ease);
}

.screen-card:hover {
  background: rgb(255 255 255 / 10%);
  transform: translateY(-6px);
}

.screen-shot {
  background: none;
  border: 0;
  border-radius: 22px;
  display: block;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.screen-shot img {
  border-radius: 22px;
  /* Each capture is its own height; forcing one would squash the shorter
     ones. The card grid rows line up, the pictures stay true. */
  height: auto;
  box-shadow: var(--shadow-lg);
  transition: transform 450ms var(--ease);
  width: 100%;
}

.screen-card:hover .screen-shot img {
  transform: scale(1.02);
}

.screen-card {
  align-content: start;
  display: grid;
}

.screen-card figcaption {
  padding-top: 16px;
}

.screen-card h3 {
  font-size: 20px;
  margin-bottom: 4px;
}

/* --- both dashboards, side by side -------------------------------------- */

.workspace-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin: 0;
  overflow: hidden;
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
}

.workspace-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

.workspace-card .workspace-image {
  background: none;
  border: 0;
  display: block;
  padding: 0;
  width: 100%;
}

.workspace-card img {
  border-bottom: 1px solid var(--line);
  width: 100%;
}

.workspace-card figcaption {
  padding: 20px 22px 24px;
}

.workspace-card h3 {
  font-size: 22px;
  margin: 6px 0 6px;
}

/* --- lift for the pieces that were flat --------------------------------- */

.discovery-item img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}

.discovery-item:hover img {
  box-shadow: var(--shadow-lg);
  transform: translateY(-6px) scale(1.01);
}

.trust-grid article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 22px;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}

.trust-grid article:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.button {
  border-radius: 999px;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease),
    background 220ms var(--ease);
}

.button:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.button.lime {
  background: linear-gradient(96deg, var(--lime) 0%, #b9e05c 100%);
  color: var(--teal-deep);
}

.header-cta {
  background: linear-gradient(96deg, var(--teal) 0%, var(--mint) 120%);
  color: #fff;
}

.site-header {
  backdrop-filter: blur(10px);
  background: rgb(253 251 246 / 88%);
  border-bottom: 1px solid rgb(227 222 210 / 70%);
}

/* --- narrower screens ---------------------------------------------------- */

@media (max-width: 1000px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .screen-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat-head h2 {
    font-size: 32px;
  }
}

@media (max-width: 680px) {
  .stat-grid,
  .screen-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat strong {
    font-size: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide img,
  .screen-shot img,
  .screen-card,
  .workspace-card,
  .discovery-item img,
  .trust-grid article,
  .button,
  .stat {
    transition: none;
  }

  .hero-slide.is-active img,
  .hero-slide img {
    transform: none;
  }
}

/* --- polish -------------------------------------------------------------- */

/* The old scrim was almost black in the middle, which threw away the
   photograph it was covering. Brand-tinted, and lighter where the picture is
   doing the talking. */
.hero-carousel .hero-shade {
  background:
    linear-gradient(
      180deg,
      rgb(5 26 23 / 58%) 0%,
      rgb(5 26 23 / 20%) 38%,
      rgb(5 26 23 / 40%) 68%,
      rgb(4 22 20 / 86%) 100%
    ),
    radial-gradient(70% 78% at 50% 46%, transparent 0%, rgb(4 26 23 / 52%) 100%);
}

.hero-slide img {
  filter: saturate(1.06) contrast(1.03);
}

.hero-eyebrow {
  align-items: center;
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / 12%);
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: 999px;
  display: inline-flex;
  gap: 8px;
  padding: 7px 16px;
}

.hero h1 span {
  text-shadow: 0 2px 20px rgb(4 22 20 / 45%);
}

.hero-description {
  text-shadow: 0 1px 14px rgb(4 22 20 / 50%);
}

/* The form is the point of the page; give it the weight of a card. */
.contact-section form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
}

.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section textarea {
  border-radius: 12px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.contact-section input[type="text"]:focus,
.contact-section input[type="email"]:focus,
.contact-section textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgb(12 95 85 / 14%);
  outline: none;
}

.contact-section button[type="submit"] {
  background: linear-gradient(96deg, var(--teal-deep) 0%, var(--teal) 60%, var(--mint) 160%);
  border-radius: 999px;
}

/* A visible focus ring everywhere, on both the light and the dark bands. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.screen-wall a:focus-visible,
.screen-wall button:focus-visible,
.stat-band a:focus-visible,
.merchant-section a:focus-visible,
.merchant-section button:focus-visible {
  outline-color: var(--lime);
}

/* A section should announce itself. A hairline of brand colour does it
   without another box. */
.section-head .eyebrow {
  align-items: center;
  display: inline-flex;
  gap: 9px;
}

.section-head .eyebrow::before {
  background: linear-gradient(96deg, var(--amber) 0%, var(--mint) 100%);
  border-radius: 999px;
  content: "";
  display: inline-block;
  height: 3px;
  width: 26px;
}

.screen-wall .section-head .eyebrow::before,
.merchant-section .section-head .eyebrow::before {
  background: linear-gradient(96deg, var(--lime) 0%, var(--amber) 100%);
}

nav a {
  position: relative;
}

nav a::after {
  background: linear-gradient(96deg, var(--teal) 0%, var(--mint) 100%);
  border-radius: 2px;
  bottom: -6px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease);
  width: 100%;
}

nav a:hover::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  nav a::after,
  .contact-section input,
  .contact-section textarea {
    transition: none;
  }
}

/* The hero used to be a fixed height, which was fine when it held a headline
   and two buttons. With slideshow controls in the flow, a narrow phone ran the
   controls into the footer line. It grows with what is in it now, and keeps a
   floor so it still fills the screen on a laptop. */
.hero-carousel {
  height: auto;
  max-height: none;
  min-height: 620px;
}

.hero-carousel .hero-content {
  padding-bottom: 68px;
}

@media (max-width: 1000px) {
  .hero-carousel {
    min-height: 540px;
  }
}

@media (max-width: 680px) {
  .hero-carousel {
    min-height: 480px;
  }

  .hero-carousel .hero-content {
    padding-bottom: 60px;
  }

  .hero-controls {
    margin-top: 16px;
  }
}