/* ==========================================================================
   Event Hive — layout and components
   Depends on base.css for tokens. Link both, base.css first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.eh-container {
  width: 100%;
  max-width: var(--eh-container);
  margin-inline: auto;
  padding-inline: var(--eh-gutter);
}

.eh-container--narrow {
  max-width: 900px;
}

/* Wider band, used by the testimonials so three cards get a comfortable
   measure (~400px each) instead of the ~336px the default container gives. */
.eh-container--wide {
  max-width: 1360px;
}

.eh-section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 8rem);
}

.eh-section--soft {
  background: var(--eh-bg-soft);
}

/* The brand cream, kept as a punctuation mark rather than the ground */
.eh-section--cream {
  background: var(--eh-bg-cream);
}

/* Cards need a border on tinted grounds and a tint on the white ground */
.eh-section--cream .eh-card,
.eh-section--soft .eh-card {
  border-color: transparent;
}

.eh-section--deep {
  background: var(--eh-grad-deep);
  color: var(--eh-on-dark);
  overflow: hidden;
}

.eh-section--deep h2,
.eh-section--deep h3,
.eh-section--deep h4 {
  color: var(--eh-on-dark);
}

.eh-section-head {
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.eh-section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eh-section-head--center .eh-lead {
  margin-inline: auto;
}

/* Decorative glow blobs */
.eh-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: var(--eh-glow-primary);
}

.eh-glow--olive {
  background: var(--eh-glow-olive);
}

.eh-section > .eh-container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   TYPE
   -------------------------------------------------------------------------- */

h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.015em;
  margin: 0 0 1.25rem;
}

h2 {
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
}

h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin: 0 0 0.55rem;
}

h4 {
  font-family: var(--eh-font-title);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--eh-deep);
  margin: 0 0 0.4rem;
}

p {
  color: var(--eh-muted);
}

.eh-lead {
  max-width: 42rem;
  margin: 0;
  color: var(--eh-muted);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
}

.eh-section--deep .eh-lead,
.eh-section--deep p {
  color: rgba(253, 247, 240, 0.84);
}

.eh-grad-text {
  background: var(--eh-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eh-script {
  display: block;
  font-family: var(--eh-font-accent);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.05;
  color: var(--eh-primary);
  margin-bottom: 0.35rem;
}

.eh-section--deep .eh-script {
  color: var(--eh-on-deep-accent);
}

.eh-eyebrow {
  display: block;
  margin-bottom: 1rem;
  color: var(--eh-primary);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eh-section--deep .eh-eyebrow {
  color: var(--eh-on-deep-accent);
}

/* Announcement pill */
.eh-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.1rem 0.45rem 0.5rem;
  margin-bottom: 1.75rem;
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius-pill);
  background: var(--eh-glass);
  backdrop-filter: blur(10px);
  font-size: 0.8rem;
  color: var(--eh-deep);
  box-shadow: var(--eh-shadow-sm);
}

.eh-pill b {
  padding: 0.2rem 0.7rem;
  border-radius: var(--eh-radius-pill);
  background: var(--eh-grad-warm);
  color: var(--eh-on-dark);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */

.eh-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.25s var(--eh-ease),
    box-shadow 0.25s var(--eh-ease);
}

.eh-header[data-scrolled="true"] {
  border-bottom-color: var(--eh-line);
  box-shadow: var(--eh-shadow-sm);
}

.eh-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 78px;
}

.eh-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.eh-logo img {
  height: 34px;
  width: auto;
  display: block;
}

.eh-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.eh-nav a {
  position: relative;
  padding: 0.55rem 0.95rem;
  border-radius: var(--eh-radius-pill);
  color: var(--eh-deep);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition:
    background 0.2s var(--eh-ease),
    color 0.2s var(--eh-ease);
}

.eh-nav a:hover {
  background: rgba(141, 75, 65, 0.1);
  color: var(--eh-primary);
}

.eh-nav a[aria-current="page"] {
  color: var(--eh-primary);
  background: rgba(141, 75, 65, 0.12);
}

.eh-nav__cta {
  margin-left: 0.6rem;
}

/* `.eh-nav a` (0,1,1) outranks `.eh-btn` (0,1,0), so the CTA inherited the
   dark nav colour and sat at 2.07:1 on the terracotta. Match the specificity. */
.eh-nav a.eh-btn {
  color: var(--eh-white);
}

.eh-nav a.eh-btn:hover {
  background: var(--eh-rust);
  color: var(--eh-white);
}

.eh-burger {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius-pill);
  background: var(--eh-glass);
  color: var(--eh-deep);
  cursor: pointer;
}

.eh-burger span,
.eh-burger span::before,
.eh-burger span::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  margin-inline: auto;
  content: "";
  transition: transform 0.22s var(--eh-ease);
}

.eh-burger span::before {
  transform: translateY(-6px);
}

.eh-burger span::after {
  transform: translateY(4.5px);
}

.eh-burger[aria-expanded="true"] span {
  background: transparent;
}

.eh-burger[aria-expanded="true"] span::before {
  transform: rotate(45deg);
}

.eh-burger[aria-expanded="true"] span::after {
  transform: translateY(-1.5px) rotate(-45deg);
}

@media (max-width: 980px) {
  .eh-burger {
    display: block;
  }

  .eh-nav {
    position: fixed;
    inset: 78px 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    margin: 0;
    padding: 1rem var(--eh-gutter) 1.75rem;
    background: var(--eh-bg);
    border-bottom: 1px solid var(--eh-line);
    box-shadow: var(--eh-shadow);
  }

  .eh-nav[data-open="true"] {
    display: flex;
  }

  .eh-nav a {
    padding: 0.95rem 1rem;
  }

  .eh-nav__cta {
    margin: 0.85rem 0 0;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   BUTTONS
   -------------------------------------------------------------------------- */

.eh-btn {
  transition:
    transform 0.2s var(--eh-ease),
    background 0.2s var(--eh-ease),
    box-shadow 0.2s var(--eh-ease);
}

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

.eh-btn--lg {
  padding: 1.2rem 2.9rem;
  font-size: 0.9rem;
}

.eh-btn--light {
  background: var(--eh-on-dark);
  color: var(--eh-deep);
}

.eh-btn--light:hover {
  background: var(--eh-white);
}

.eh-section--deep .eh-btn--ghost {
  color: var(--eh-on-dark);
}

.eh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.25rem;
}

.eh-actions--center {
  justify-content: center;
}

/* Store buttons — the app is not published yet, so these state that plainly
   rather than imitating the official App Store / Google Play badges. */
.eh-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
  list-style: none;
  padding: 0;
}

/* Store badges. Rendered in the stores' own colours — black ground, white
   Apple mark, full-colour Google Play mark — so they read as the real
   badges do. NOTE: these are deliberately NOT links. There is no listing
   yet. When the app ships, swap in the official badge artwork from Apple's
   and Google's marketing resources and wrap each in an <a>. */
.eh-store {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid #000000;
  border-radius: 14px;
  background: #000000;
  transition:
    transform 0.2s var(--eh-ease),
    box-shadow 0.2s var(--eh-ease);
}

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

.eh-store__logo {
  flex: 0 0 auto;
  width: 23px;
  height: 23px;
  display: block;
}

.eh-store--apple .eh-store__logo {
  color: #ffffff;
  margin-top: -2px;
}

/* The Play triangle reads larger than the Apple mark at the same box size */
.eh-store--google .eh-store__logo {
  width: 21px;
  height: 21px;
}

.eh-store span {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

.eh-store strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

/* The badges keep their own colours on deep sections too */
.eh-section--deep .eh-store {
  background: #000000;
  border-color: rgba(253, 247, 240, 0.28);
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.eh-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 4vh, 3.5rem);
}

/* Above the fold: on a desktop viewport the hero occupies one screen and
   everything — copy, buttons, store badges, mockups — fits without
   scrolling. Type and spacing below are sized against viewport HEIGHT as
   well as width, so a short wide window shrinks them rather than
   overflowing. */
@media (min-width: 981px) {
  .eh-hero {
    display: grid;
    align-content: center;
    min-height: calc(100svh - 78px);
  }
}

.eh-hero h1 {
  font-size: clamp(2rem, min(4.4vw, 6.2vh), 3.5rem);
  margin-bottom: clamp(0.75rem, 1.6vh, 1.25rem);
}

.eh-hero .eh-script {
  font-size: clamp(1.35rem, min(2.6vw, 3.6vh), 2.15rem);
  margin-bottom: clamp(0.15rem, 0.5vh, 0.35rem);
}

.eh-hero .eh-pill {
  margin-bottom: clamp(0.85rem, 2vh, 1.75rem);
}

.eh-hero .eh-lead {
  font-size: clamp(0.94rem, min(1.15vw, 1.9vh), 1.06rem);
  line-height: 1.65;
}

.eh-hero .eh-actions {
  margin-top: clamp(1.1rem, 2.6vh, 2.25rem);
}

/* Keep the two hero CTAs on one row rather than stacking */
.eh-hero .eh-btn--lg {
  padding: 1rem 2.1rem;
  font-size: 0.82rem;
}

.eh-hero .eh-stores {
  margin-top: clamp(0.85rem, 2vh, 1.75rem);
}

.eh-hero .eh-trust {
  margin-top: clamp(1rem, 2.4vh, 2.25rem);
}

.eh-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.eh-hero--center {
  text-align: center;
}

.eh-hero--center .eh-lead {
  margin-inline: auto;
}

.eh-hero--center .eh-actions,
.eh-hero--center .eh-stores {
  justify-content: center;
}

.eh-hero__note {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--eh-muted);
}

/* Trust row */
.eh-trust {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
  flex-wrap: wrap;
}

.eh-trust__stars {
  color: var(--eh-olive);
  letter-spacing: 0.12em;
}

.eh-trust p {
  margin: 0;
  font-size: 0.85rem;
}

/* Floating phone cluster */
.eh-cluster {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, min(42vw, 66vh), 560px);
}

.eh-cluster::before {
  content: "";
  position: absolute;
  inset: 4%;
  background: var(--eh-glow-primary);
  border-radius: 50%;
}

.eh-cluster__hex {
  position: absolute;
  inset: 10% 12%;
  background: var(--eh-grad-warm);
  clip-path: var(--eh-hex);
  opacity: 0.14;
}

.eh-cluster .eh-phone {
  position: relative;
  z-index: 2;
  /* The phone is the tallest thing in the hero, so its height governs the
     fit. At 720x1478 the aspect is ~2.05:1 — cap against vh accordingly. */
  width: clamp(180px, min(23vw, 30vh), 272px);
}

.eh-cluster .eh-phone--back {
  position: absolute;
  z-index: 1;
  right: -2%;
  bottom: 6%;
  width: clamp(125px, min(16vw, 21vh), 195px);
  transform: rotate(6deg);
  opacity: 0.96;
}

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

  .eh-hero__art {
    order: -1;
  }

  .eh-cluster {
    min-height: 380px;
  }

  .eh-cluster .eh-phone--back {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   PHONE MOCKUP — matches the device frames in Event-Hive.pdf: a thin,
   even black bezel with a notch hanging off the top of the screen. The
   screenshots keep their iOS status bar, so the notch sits over it exactly
   as it does on a real handset.
   -------------------------------------------------------------------------- */

.eh-phone {
  position: relative;
  width: min(276px, 70vw);
  /* Bezel measured off Event-Hive.pdf: 10px on a 429px-wide frame = 2.33%.
     At our render width (~260px) that is ~6px.
     px, not %: percentage padding resolves against the PARENT's width, which
     differs per container and would make the bezel uneven. */
  padding: 6px;
  border-radius: 33px;
  background: #171013;
  box-shadow:
    var(--eh-shadow-lg),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.eh-phone img {
  display: block;
  width: 100%;
  border-radius: 27px;
}

/* Notch — attached to the top edge of the screen, not floating over it */
.eh-phone::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 6px; /* exactly the padding, so the notch meets the screen edge */
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  aspect-ratio: 5.2;
  background: #171013;
  border-radius: 0 0 13px 13px;
}

.eh-phone--sm {
  width: min(224px, 58vw);
  padding: 5px; /* keeps the 2.3% bezel ratio at this smaller size */
  border-radius: 29px;
}

.eh-phone--sm::before {
  top: 5px;
}

.eh-phone--sm img {
  border-radius: 24px;
}

/* --------------------------------------------------------------------------
   MARQUEE
   -------------------------------------------------------------------------- */

.eh-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.6rem;
  border-block: 1px solid var(--eh-line);
  background: var(--eh-bg-soft);
  color: var(--eh-primary);
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}

.eh-marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: eh-scroll 38s linear infinite;
}

.eh-marquee span {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--eh-font-title);
  font-size: 1.35rem;
  color: var(--eh-primary);
  white-space: nowrap;
}

.eh-marquee span::after {
  content: "";
  width: 9px;
  aspect-ratio: 0.866;
  background: currentColor;
  clip-path: var(--eh-hex);
  opacity: 0.55;
}

@keyframes eh-scroll {
  to {
    transform: translateX(-50%);
  }
}

.eh-marquee:hover .eh-marquee__track {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   HEXAGONS
   -------------------------------------------------------------------------- */

.eh-hex {
  display: grid;
  place-items: center;
  width: 78px;
  aspect-ratio: 0.866;
  clip-path: var(--eh-hex);
  background: var(--eh-grad-warm);
  color: var(--eh-on-dark);
  font-family: var(--eh-font-title);
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
}

.eh-hex--soft {
  background: rgba(141, 75, 65, 0.13);
  color: var(--eh-primary);
}

.eh-hex--olive {
  background: rgba(130, 119, 62, 0.18);
  color: #5f5729;
}

.eh-hex--sm {
  width: 54px;
  font-size: 1rem;
}

.eh-section--deep .eh-hex--soft {
  background: var(--eh-glass-dark);
  color: var(--eh-on-deep-accent);
}

/* --------------------------------------------------------------------------
   CARDS & GRIDS
   -------------------------------------------------------------------------- */

.eh-grid {
  display: grid;
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.eh-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.eh-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}

.eh-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.eh-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.35rem);
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius-lg);
  background: var(--eh-card);
  box-shadow: var(--eh-shadow-sm);
  transition:
    transform 0.3s var(--eh-ease),
    box-shadow 0.3s var(--eh-ease);
}

.eh-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--eh-shadow);
}

.eh-card > :last-child {
  margin-bottom: 0;
}

.eh-card p {
  margin-bottom: 0;
  font-size: 0.94rem;
}

.eh-card .eh-hex {
  margin-bottom: 1.35rem;
}

.eh-section--deep .eh-card {
  background: var(--eh-glass-dark);
  border-color: rgba(253, 247, 240, 0.18);
  backdrop-filter: blur(8px);
}

/* Prestation categories — hexagon icon over a label, mirroring the way the
   app itself presents them in « Explorer ». Icons are one consistent
   stroked set, not OS emoji. */
.eh-metiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem) clamp(0.75rem, 2vw, 1.75rem);
}

.eh-metier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.95rem;
  text-align: center;
}

.eh-metier__hex {
  display: grid;
  place-items: center;
  width: clamp(76px, 8.5vw, 104px);
  aspect-ratio: 0.866;
  clip-path: var(--eh-hex);
  background: rgba(141, 75, 65, 0.1);
  color: var(--eh-primary);
  transition:
    background 0.3s var(--eh-ease),
    color 0.3s var(--eh-ease),
    transform 0.3s var(--eh-ease);
}

.eh-metier:nth-child(4n + 3) .eh-metier__hex,
.eh-metier:nth-child(4n + 6) .eh-metier__hex {
  background: rgba(130, 119, 62, 0.16);
  color: #5f5729;
}

.eh-metier__icon {
  width: 40%;
  height: auto;
}

.eh-metier span {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--eh-deep);
}

.eh-metier:hover .eh-metier__hex {
  background: var(--eh-grad-warm);
  color: var(--eh-on-dark);
  transform: translateY(-5px);
}

@media (max-width: 860px) {
  .eh-metiers {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .eh-metiers {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   SPLIT
   -------------------------------------------------------------------------- */

.eh-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.eh-split--reverse .eh-split__art {
  order: -1;
}

.eh-split__art {
  display: flex;
  justify-content: center;
}

@media (max-width: 880px) {
  .eh-split {
    grid-template-columns: 1fr;
  }

  .eh-split--reverse .eh-split__art {
    order: 0;
  }
}

/* --------------------------------------------------------------------------
   STEPS
   -------------------------------------------------------------------------- */

.eh-steps {
  display: grid;
  gap: 1.6rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.eh-steps li {
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
}

.eh-steps h3 {
  margin-bottom: 0.3rem;
}

.eh-steps p {
  margin: 0;
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   ALVÉOLES
   -------------------------------------------------------------------------- */

.eh-alveoles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.6rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
}

.eh-alveole {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
}

.eh-alveole__shape {
  position: relative;
  width: 78px;
  aspect-ratio: 0.866;
  clip-path: var(--eh-hex);
  background: rgba(141, 75, 65, 0.15);
  overflow: hidden;
}

.eh-alveole__shape::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--fill, 0%);
  background: var(--eh-grad-warm);
}

.eh-section--deep .eh-alveole__shape {
  background: var(--eh-glass-dark);
}

.eh-alveole strong {
  color: var(--eh-deep);
  font-size: 0.95rem;
}

.eh-section--deep .eh-alveole strong {
  color: var(--eh-on-dark);
}

.eh-alveole p {
  margin: 0;
  font-size: 0.84rem;
}

/* --------------------------------------------------------------------------
   WAVE — water-line separator. The section keeps its own background; the
   svg is filled with the NEIGHBOURING section's colour and overlaps the
   edge, so the boundary reads as a waterline rather than a straight cut.
   Set --wave-fill if the neighbour is not white.
   -------------------------------------------------------------------------- */

.eh-section--wave {
  position: relative;
  overflow: hidden;
  /* room for the wave so content never sits under it */
  padding-block: clamp(5rem, 11vw, 9.5rem);
}

.eh-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(38px, 5.5vw, 84px);
  display: block;
  fill: var(--wave-fill, var(--eh-bg));
  pointer-events: none;
}

.eh-wave--top {
  top: -1px; /* kill the hairline gap some browsers leave when scaling */
}

.eh-wave--bottom {
  bottom: -1px;
}

/* --------------------------------------------------------------------------
   STATS
   -------------------------------------------------------------------------- */

.eh-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

.eh-stat strong {
  display: block;
  font-family: var(--eh-font-title);
  font-size: clamp(2.6rem, 5.5vw, 3.8rem);
  line-height: 1;
  font-weight: 400;
  color: var(--eh-primary);
}

.eh-section--deep .eh-stat strong {
  color: var(--eh-on-deep-accent);
}

.eh-stat span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--eh-muted);
}

/* 0.78 measured 4.44:1 against the gradient's lightest stop (#8d4b41),
   just under AA for text this small. 0.86 gives 5.02:1. */
.eh-section--deep .eh-stat span {
  color: rgba(253, 247, 240, 0.86);
}

/* --------------------------------------------------------------------------
   TESTIMONIALS
   -------------------------------------------------------------------------- */

.eh-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: stretch;
}

.eh-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  height: 100%;
  overflow: hidden;
}

/* oversized quote mark, cropped by the card */
.eh-quote::before {
  content: "\201C";
  position: absolute;
  top: -2.6rem;
  right: 0.6rem;
  font-family: var(--eh-font-title);
  font-size: 9rem;
  line-height: 1;
  color: var(--eh-primary);
  opacity: 0.08;
  pointer-events: none;
}

.eh-quote blockquote {
  margin: 0;
  font-family: var(--eh-font-title);
  /* smaller than before: at 1.28rem a short quote ran to seven lines */
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  line-height: 1.5;
  color: var(--eh-deep);
}

.eh-section--deep .eh-quote blockquote {
  color: var(--eh-on-dark);
}

/* author row pinned to the bottom so cards line up whatever the quote length */
.eh-quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 1.15rem;
  border-top: 1px solid var(--eh-line);
  font-size: 0.85rem;
  color: var(--eh-muted);
}

.eh-section--deep .eh-quote figcaption {
  border-top-color: rgba(253, 247, 240, 0.2);
  color: rgba(253, 247, 240, 0.82);
}

.eh-quote__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  aspect-ratio: 0.866;
  clip-path: var(--eh-hex);
  background: var(--eh-grad-warm);
  color: var(--eh-on-dark);
  font-family: var(--eh-font-title);
  font-size: 0.95rem;
  line-height: 1;
}

.eh-quote__who {
  display: block;
  font-weight: 600;
  color: var(--eh-deep);
}

.eh-section--deep .eh-quote__who {
  color: var(--eh-on-dark);
}

.eh-stars {
  color: var(--eh-olive);
  letter-spacing: 0.15em;
  font-size: 0.85rem;
}

.eh-section--deep .eh-stars {
  color: var(--eh-on-deep-accent);
}

/* --------------------------------------------------------------------------
   PRICING
   -------------------------------------------------------------------------- */

.eh-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  align-items: start;
}

.eh-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.eh-plan--featured {
  border-color: var(--eh-primary);
  box-shadow: var(--eh-shadow);
}

.eh-plan__tag {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 1rem;
  border-radius: var(--eh-radius-pill);
  background: var(--eh-grad-warm);
  color: var(--eh-on-dark);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eh-plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1.25rem 0 0.35rem;
}

.eh-plan__price strong {
  font-family: var(--eh-font-title);
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  line-height: 1;
  font-weight: 400;
  color: var(--eh-deep);
}

.eh-plan__price span {
  font-size: 0.85rem;
  color: var(--eh-muted);
}

.eh-plan ul {
  list-style: none;
  margin: 1.6rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.eh-plan li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.92rem;
  color: var(--eh-muted);
}

.eh-plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 11px;
  aspect-ratio: 0.866;
  background: var(--eh-primary);
  clip-path: var(--eh-hex);
}

.eh-plan .eh-btn {
  margin-top: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   FAQ — native accordion
   -------------------------------------------------------------------------- */

.eh-faq {
  display: grid;
  gap: 0.9rem;
}

.eh-faq details {
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius-card);
  background: var(--eh-card);
  overflow: hidden;
}

.eh-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--eh-font-title);
  font-size: 1.12rem;
  color: var(--eh-deep);
}

.eh-faq summary::-webkit-details-marker {
  display: none;
}

.eh-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  aspect-ratio: 0.866;
  background: var(--eh-primary);
  clip-path: var(--eh-hex);
  transition: transform 0.25s var(--eh-ease);
}

.eh-faq details[open] summary::after {
  transform: rotate(180deg) scale(1.15);
}

.eh-faq p {
  margin: 0;
  padding: 0 1.5rem 1.4rem;
  font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   CHIPS
   -------------------------------------------------------------------------- */

.eh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.eh-chips--center {
  justify-content: center;
}

.eh-chips li {
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--eh-line);
  border-radius: var(--eh-radius-pill);
  background: var(--eh-card);
  color: var(--eh-deep);
  font-size: 0.85rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   CTA BAND
   -------------------------------------------------------------------------- */

.eh-cta {
  text-align: center;
}

.eh-cta .eh-lead {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   FORM
   -------------------------------------------------------------------------- */

.eh-form {
  display: grid;
  gap: 1.25rem;
  max-width: 34rem;
}

.eh-field {
  display: grid;
  gap: 0.4rem;
}

.eh-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--eh-deep);
}

.eh-field input,
.eh-field select,
.eh-field textarea {
  width: 100%;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--eh-line);
  border-radius: 16px;
  background: var(--eh-card);
  color: var(--eh-deep);
  font-family: var(--eh-font-body);
  font-size: 0.95rem;
}

.eh-field textarea {
  min-height: 9rem;
  resize: vertical;
}

.eh-field input:focus-visible,
.eh-field select:focus-visible,
.eh-field textarea:focus-visible {
  outline: 2px solid var(--eh-primary);
  outline-offset: 1px;
}

.eh-form__note {
  font-size: 0.8rem;
  color: var(--eh-muted);
}

/* --------------------------------------------------------------------------
   PROSE
   -------------------------------------------------------------------------- */

.eh-prose {
  max-width: 44rem;
}

.eh-prose h2 {
  margin-top: 2.75rem;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.eh-prose p,
.eh-prose li {
  font-size: 0.95rem;
  line-height: 1.75;
}

.eh-prose a {
  color: var(--eh-primary);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.eh-footer {
  background: var(--eh-deep);
  color: rgba(253, 247, 240, 0.8);
  padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
}

.eh-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.eh-footer img {
  height: 34px;
  width: auto;
  margin-bottom: 1.1rem;
}

.eh-footer h3 {
  margin: 0 0 1.1rem;
  color: var(--eh-on-dark);
  font-family: var(--eh-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eh-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.eh-footer a {
  color: rgba(253, 247, 240, 0.8);
  font-size: 0.9rem;
  text-decoration: none;
}

.eh-footer a:hover {
  color: var(--eh-on-dark);
  text-decoration: underline;
}

.eh-footer p {
  color: rgba(253, 247, 240, 0.8);
  font-size: 0.9rem;
}

.eh-footer__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(253, 247, 240, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.8rem;
}

@media (max-width: 860px) {
  .eh-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .eh-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--eh-ease),
    transform 0.7s var(--eh-ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   A11Y
   -------------------------------------------------------------------------- */

.eh-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.85rem 1.25rem;
  background: var(--eh-deep);
  color: var(--eh-on-dark);
  border-radius: 0 0 12px 0;
}

.eh-skip:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--eh-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   SHOWCASE — a centre phone on a coloured slab, with feature cards floating
   either side. One tall card left, two stacked right (the upper one tilted).
   -------------------------------------------------------------------------- */

.eh-showcase {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 0.9fr) 1fr;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: center;
}

.eh-showcase__col {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-content: center;
}

/* Centre stage: the slab sits behind and peeks out either side of the phone */
.eh-showcase__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

.eh-showcase__slab {
  position: absolute;
  inset: 0 8%;
  border-radius: 34px;
  background: var(--eh-grad-deep);
  box-shadow: var(--eh-shadow-lg);
}

.eh-showcase__stage .eh-phone {
  position: relative;
  z-index: 1;
  width: min(272px, 68vw);
}

/* Feature card ------------------------------------------------------------ */

.eh-fcard {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--eh-line);
  border-radius: 28px;
  background: var(--eh-card);
  box-shadow: var(--eh-shadow-sm);
  transition:
    transform 0.35s var(--eh-ease),
    box-shadow 0.35s var(--eh-ease);
}

.eh-fcard:hover {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: var(--eh-shadow);
}

.eh-fcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.eh-fcard h3 {
  margin: 0;
}

.eh-fcard p {
  margin: 0.9rem 0 0;
  font-size: 0.94rem;
}

.eh-fcard__badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  aspect-ratio: 0.866;
  clip-path: var(--eh-hex);
  background: var(--eh-grad-warm);
  color: var(--eh-on-dark);
  font-size: 1.1rem;
  line-height: 1;
}

.eh-fcard__media {
  display: block;
  margin-top: 1.35rem;
  border-radius: 18px;
  overflow: hidden;
}

.eh-fcard__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* The tilt that gives the cluster its scattered feel */
.eh-fcard--tilt {
  transform: rotate(-2.4deg);
}

.eh-fcard--tilt-alt {
  transform: rotate(1.8deg);
}

/* A tinted variant so the right-hand pair is not three identical whites */
.eh-fcard--tint {
  background: var(--eh-bg-soft);
}

.eh-showcase__cta {
  margin-top: 0.5rem;
  justify-self: start;
}

@media (max-width: 1040px) {
  .eh-showcase {
    grid-template-columns: 1fr 1fr;
  }

  .eh-showcase__stage {
    grid-column: 1 / -1;
    order: -1;
  }
}

@media (max-width: 700px) {
  .eh-showcase {
    grid-template-columns: 1fr;
  }

  .eh-fcard--tilt,
  .eh-fcard--tilt-alt {
    transform: none;
  }

  .eh-showcase__cta {
    justify-self: stretch;
    text-align: center;
  }
}