.public-shell {
  width:
    min(
      var(--bdl-content-width),
      calc(100% - 30px)
    );

  margin:
    var(--bdl-space-6)
    auto
    var(--bdl-space-8);
}

/*
 * Public Booking V1 currently still uses
 * its proven standalone template.
 *
 * New public UI must use this shared token
 * and component foundation.
 */


/* Public product entry */

.landing-hero {
  padding:
    clamp(48px, 9vw, 110px)
    0
    clamp(42px, 7vw, 90px);

  max-width:
    860px;
}

.landing-brand {
  display:
    inline-flex;

  align-items:
    center;

  margin-bottom:
    var(--bdl-space-6);

  padding:
    7px 11px;

  border:
    1px solid
    var(--bdl-color-border);

  border-radius:
    var(--bdl-radius-pill);

  background:
    var(--bdl-color-surface);

  font-weight:
    750;
}

.landing-hero h1 {
  max-width:
    820px;

  margin-bottom:
    var(--bdl-space-5);

  font-size:
    clamp(
      2.4rem,
      7vw,
      5.2rem
    );

  letter-spacing:
    -.045em;

  line-height:
    .98;
}

.landing-lead {
  max-width:
    680px;

  margin-bottom:
    var(--bdl-space-6);

  color:
    var(--bdl-color-muted);

  font-size:
    clamp(
      1.05rem,
      2.2vw,
      1.35rem
    );
}

.landing-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    var(--bdl-space-3);
}

.landing-actions .button {
  display:
    inline-flex;

  align-items:
    center;

  text-decoration:
    none;

  font-weight:
    700;
}

.landing-section {
  padding:
    var(--bdl-space-8)
    0;

  border-top:
    1px solid
    var(--bdl-color-border);
}

.landing-eyebrow {
  margin:
    0
    0
    var(--bdl-space-2);

  color:
    var(--bdl-color-muted);

  font-size:
    .82rem;

  font-weight:
    750;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}

.landing-feature-grid {
  margin-top:
    var(--bdl-space-6);
}

.landing-feature-grid .card {
  min-height:
    180px;
}

.landing-feature-grid h3 {
  margin-top:
    0;
}

.landing-panel {
  max-width:
    760px;

  padding:
    clamp(
      24px,
      5vw,
      44px
    );

  border:
    1px solid
    var(--bdl-color-border);

  border-radius:
    var(--bdl-radius-lg);

  background:
    var(--bdl-color-surface);
}

.landing-panel h2 {
  font-size:
    clamp(
      1.8rem,
      4vw,
      2.8rem
    );
}

@media (max-width: 620px) {

  .public-shell {
    width:
      min(
        100% - 24px,
        var(--bdl-content-width)
      );
  }

  .landing-hero {
    padding-top:
      44px;
  }

}