/* ==========================================================================
   Saral Menu — Landing Page
   Custom styles layered on top of Bootstrap 5.
   Reference: Figma "Poster / home page" (node 4991:4460, 1440px frame)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --sm-primary: #c62828;
  --sm-primary-deep: #a20513;
  --sm-primary-shade: #a72222;
  --sm-secondary: #f6910e;
  --sm-accent: #ff9819;

  /* Neutrals */
  --sm-ink: #1c1b1b;
  --sm-body: #5c6067;
  --sm-muted: #626772;
  --sm-muted-alt: #6b7280;
  --sm-brown: #5b403d;
  --sm-grey: #888888;

  /* Surfaces */
  --sm-surface: #ffffff;
  --sm-cream: #fcf9f8;
  --sm-cream-warm: #fffbf5;
  --sm-peach: #fef3e6;

  /* Borders */
  --sm-border: #e5e2e1;
  --sm-border-warm: #ebdfd5;
  --sm-border-soft: rgba(228, 190, 186, 0.3);
  --sm-border-amber: rgba(246, 145, 14, 0.16);

  /* Typography */
  --sm-font-display: "Anek Bangla", "Segoe UI", sans-serif;
  --sm-font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --sm-font-ui: "Manrope", "Segoe UI", sans-serif;
  --sm-font-inter: "Inter", "Segoe UI", sans-serif;
  --sm-font-mont: "Montserrat", "Segoe UI", sans-serif;

  /* Layout */
  --sm-shell: 1440px;
  --sm-gutter: 4rem; /* 1440 - 2x64 = 1312px content, matching the Figma sections */
  --sm-section-space: 3.75rem; /* 60px top + 60px bottom = 120px between sections */
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--sm-font-body);
  color: var(--sm-ink);
  background-color: var(--sm-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

/* Page shell — mirrors the 1440px Figma frame, fluid below it */
.sm-shell {
  width: 100%;
  max-width: var(--sm-shell);
  margin-inline: auto;
  padding-inline: var(--sm-gutter);
}

.sm-section {
  padding-block: var(--sm-section-space);
}

/* --------------------------------------------------------------------------
   3. Reusable typography
   -------------------------------------------------------------------------- */

/* Section heading block ("Frame 39" in Figma) */
.sm-section-head {
  max-width: 1055px;
  margin-inline: auto;
  text-align: center;
  text-transform: capitalize;
}

.sm-section-title {
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(2.125rem, 4.58vw, 4.125rem); /* 66px */
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #000;
  margin-bottom: 0.25rem;
}

.sm-section-subtitle {
  font-family: var(--sm-font-body);
  font-weight: 300;
  font-size: clamp(1.125rem, 2.08vw, 1.875rem); /* 30px */
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--sm-body);
  margin-bottom: 0;
}

/* Highlighted word inside a heading */
.sm-accent-text {
  color: var(--sm-primary);
}

/* --------------------------------------------------------------------------
   4. Reusable buttons
   -------------------------------------------------------------------------- */
.sm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  font-family: var(--sm-font-ui);
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease,
    color 0.18s ease, filter 0.18s ease;
}

.sm-btn:hover {
  transform: translateY(-2px);
}

/* Solid primary — "Start Free Trial" */
.sm-btn-primary {
  background-color: var(--sm-primary);
  color: #fff;
  font-size: clamp(1rem, 1.67vw, 1.5rem);
  min-height: 66px;
  min-width: 233px;
  padding-inline: 1.25rem;
}

.sm-btn-primary:hover {
  color: #fff;
  background-color: var(--sm-primary-shade);
  box-shadow: 0 10px 22px rgba(198, 40, 40, 0.28);
}

/* Tinted secondary — "Watch Demo" */
.sm-btn-secondary {
  background-color: rgba(246, 145, 14, 0.12);
  border-color: var(--sm-secondary);
  color: var(--sm-secondary);
  font-size: clamp(1rem, 1.67vw, 1.5rem);
  min-height: 66px;
  min-width: 233px;
  padding-inline: 1.25rem;
}

.sm-btn-secondary:hover {
  color: var(--sm-secondary);
  background-color: rgba(246, 145, 14, 0.2);
  box-shadow: 0 10px 22px rgba(246, 145, 14, 0.22);
}

.sm-btn-secondary img {
  width: 27px;
  height: 27px;
}

/* Gradient pill — nav "Get Started" */
.sm-btn-gradient {
  width: 180px;
  height: 48px;
  border-radius: 6px;
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 1.25rem;
  color: #fff;
  background-image: linear-gradient(
    2deg,
    rgba(96, 19, 19, 0.94) 0%,
    var(--sm-primary-shade) 32%,
    var(--sm-primary) 100%
  );
  box-shadow: inset 0 4px 4px rgba(162, 5, 19, 0.25);
}

.sm-btn-gradient:hover {
  color: #fff;
  filter: brightness(1.06);
}

/* --------------------------------------------------------------------------
   5. Navbar
   -------------------------------------------------------------------------- */
.sm-navbar {
  /* .sm-hero is position:relative and comes later in the DOM, so without a
     stacking context of its own the navbar's dropdown paints underneath it */
  position: relative;
  z-index: 1030;
  min-height: 86px;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  border-bottom: 0.5px solid var(--sm-border);
  box-shadow: 0 1px 2px rgba(162, 5, 19, 0.06);
}

/* Circular brand mark — every inner offset is a share of --sm-logo-size,
   so the lockup keeps its Figma proportions at any scale */
.sm-logo {
  --sm-logo-size: 66px;
  display: block; /* it is a <span>; without this the size is ignored */
  position: relative;
  width: var(--sm-logo-size);
  height: var(--sm-logo-size);
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--sm-primary);
  overflow: hidden;
}

.sm-logo__mark {
  position: absolute;
  left: 8.44%;
  top: 22.08%;
  width: 60.85%;
  height: 56.49%;
}

.sm-logo__wordmark {
  position: absolute;
  left: 57.42%;
  top: 47.53%;
  width: 34.14%;
  font-family: "Anton", var(--sm-font-display);
  font-size: calc(var(--sm-logo-size) * 0.1153);
  line-height: calc(var(--sm-logo-size) * 0.1268);
  letter-spacing: calc(var(--sm-logo-size) * 0.00576);
  color: #fff;
}

/* Footer lockup */
.sm-logo--lg {
  --sm-logo-size: 92px;
}

.sm-logo__wordmark span {
  display: block;
  color: var(--sm-secondary);
}

.sm-nav-link {
  font-family: var(--sm-font-ui);
  font-weight: 500;
  font-size: 1.25rem;
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.18s ease;
}

.sm-nav-link:hover,
.sm-nav-link:focus {
  color: var(--sm-primary);
}

/* Dropdown caret next to "Resources" — 12x7 chevron pointing down */
.sm-nav-link__caret {
  display: inline-flex;
  font-size: 0.75rem;
  line-height: 1;
  stroke-width: 1px;
  -webkit-text-stroke: 0.5px currentColor;
  transition: transform 0.18s ease;
}

.sm-nav-link:hover .sm-nav-link__caret {
  transform: translateY(2px);
}

/* Toggler without Bootstrap's default focus ring colour */
.sm-navbar .navbar-toggler {
  border-color: var(--sm-border);
}

.sm-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.15);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.sm-hero {
  position: relative;
  min-height: 801px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom-left-radius: 77px;
  border-bottom-right-radius: 77px;
  background-color: var(--sm-cream);
  background-image: url("../images/hero-photo.png"), url("../images/hero-bg.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
}

/* Left-to-right cream wash so the copy stays readable */
.sm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    var(--sm-cream) 0%,
    rgba(252, 249, 248, 0.8) 50%,
    rgba(252, 249, 248, 0) 100%
  );
}

.sm-hero__inner {
  position: relative;
  max-width: 762px;
  padding-block: 4rem;
}

.sm-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 22px;
  border-radius: 999px;
  background-color: rgba(198, 40, 40, 0.12);
  backdrop-filter: blur(12.3px);
  -webkit-backdrop-filter: blur(12.3px);
  font-family: var(--sm-font-ui);
  font-weight: 500;
  font-size: clamp(0.9375rem, 1.39vw, 1.25rem);
  letter-spacing: 0.02em;
  color: var(--sm-primary);
}

.sm-hero__badge img {
  width: 24px;
  height: 26px;
  flex: 0 0 auto;
}

.sm-hero__title {
  font-family: var(--sm-font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 9.5vw, 7.625rem); /* 122px */
  line-height: 1.065;
  letter-spacing: 0.01em;
  color: #000;
  margin-bottom: 0.625rem;
}

/* "Go Digital" — vertical brand gradient */
.sm-hero__title-accent {
  background-image: linear-gradient(to bottom, var(--sm-primary) 54.327%, var(--sm-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sm-hero__lead {
  max-width: 639px;
  font-family: var(--sm-font-body);
  font-weight: 300;
  font-size: clamp(1.125rem, 1.94vw, 1.75rem); /* 28px */
  line-height: 1.72;
  letter-spacing: 0.02em;
  color: #000;
  margin-bottom: 0;
}

.sm-hero__lead strong {
  font-weight: 400;
  color: var(--sm-primary);
}

/* Social proof avatar stack */
.sm-avatar-stack {
  display: flex;
  align-items: center;
}

.sm-avatar-stack img {
  width: 49px;
  height: 49px;
  border-radius: 9999px;
  border: 2px solid var(--sm-cream);
  object-fit: cover;
}

.sm-avatar-stack img + img {
  margin-left: -12px;
}

.sm-hero__proof {
  font-family: var(--sm-font-inter);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--sm-brown);
  margin-bottom: 0;
}

.sm-hero__proof strong {
  font-weight: 400;
  color: var(--sm-ink);
}

/* --------------------------------------------------------------------------
   7. Stats strip
   -------------------------------------------------------------------------- */
.sm-stats {
  padding-block: 3.25rem;
}

.sm-stat {
  text-align: center;
  text-transform: capitalize;
}

.sm-stat__value {
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.89vw, 3.5rem); /* 56px */
  line-height: 1.2;
  letter-spacing: 0.008em;
  color: var(--sm-primary);
  margin-bottom: 0.25rem;
}

.sm-stat__label {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: clamp(1rem, 1.67vw, 1.5rem); /* 24px */
  line-height: 1.4;
  color: var(--sm-muted);
  margin-bottom: 0;
}

/* "Made in Nepal" flag — occupies the same line box as the numeric stats
   above it, so all four labels share one baseline */
.sm-stat__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(clamp(2rem, 3.89vw, 3.5rem) * 1.2);
  margin-bottom: 0.25rem;
}

.sm-stat__flag img {
  width: auto;
  height: 42px;
}

/* --------------------------------------------------------------------------
   8. Feature pills (tab strip)
   -------------------------------------------------------------------------- */
.sm-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.sm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 43px;
  padding-inline: 22px;
  border-radius: 99px;
  border: 1px solid var(--sm-border-warm);
  background-color: #fff;
  filter: drop-shadow(0 1px 1px rgba(255, 179, 0, 0.12));
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--sm-grey);
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease,
    transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icons keep their exported intrinsic size and colour (#888 inactive, white active) */
.sm-pill img {
  flex: 0 0 auto;
}

.sm-pill:hover {
  color: var(--sm-primary);
  border-color: rgba(198, 40, 40, 0.3);
}

.sm-pill.is-active:hover {
  color: #fff;
}

.sm-pill.is-active {
  color: #fff;
  border-color: var(--sm-border-warm);
  background-image: linear-gradient(248deg, var(--sm-secondary) 43.241%, var(--sm-primary) 128.71%);
  text-transform: capitalize;
}

/* The exported icons ship in #888; on the active pill they render white.
   brightness(0) flattens fills and strokes to black, invert(1) lifts to white. */
.sm-pill.is-active img {
  filter: brightness(0) invert(1);
}

/* --- Feature panels — an endlessly scrolling strip of cards --- */
.sm-showcase-stack {
  container-type: inline-size; /* lets a card measure the track exactly */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.sm-showcase-stack::-webkit-scrollbar {
  display: none;
}

.sm-showcase-strip {
  display: flex;
  gap: 24px;
  width: max-content;
  padding-block: 8px; /* room for the hover lift */
}

/* Each card fills the page shell, so one sits in view at a time */
.sm-showcase-strip .sm-showcase {
  flex: 0 0 auto;
  /* fallback first; 100cqw is exact because 100vw counts the scrollbar */
  width: calc(min(100vw, var(--sm-shell)) - 2 * var(--sm-gutter));
  width: 100cqw;
  scroll-snap-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* The card under the cursor lifts out of the moving strip */
.sm-showcase-strip .sm-showcase:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(246, 145, 14, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .sm-showcase-strip .sm-showcase:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   9. Feature showcase card
   -------------------------------------------------------------------------- */
.sm-showcase {
  background-color: #fff;
  border: 1px solid var(--sm-border-amber);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(255, 179, 0, 0.22);
  padding: 3.125rem;
}

.sm-showcase__icon {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(140deg, var(--sm-secondary) 0%, var(--sm-primary) 100%);
}

/* Every panel glyph is white on its gradient tile, whatever colour it ships in */
.sm-showcase__icon img {
  width: 26px;
  height: auto;
  filter: brightness(0) invert(1);
}

.sm-showcase__title {
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.08vw, 1.875rem); /* 30px */
  line-height: 1.3;
  color: #000;
  margin-bottom: 0.25rem;
}

.sm-showcase__subtitle {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--sm-grey);
  margin-bottom: 0;
}

.sm-showcase__body {
  font-family: var(--sm-font-body);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.53vw, 1.375rem); /* 22px */
  line-height: 1.82;
  color: var(--sm-body);
  margin-bottom: 0;
}

/* Check list shared by the showcase and the Saral AI panel */
.sm-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sm-check-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.85;
  color: #000;
}

.sm-check-list img {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
}

/* --- Menu mock (right half of the showcase) --- */
.sm-menu-mock {
  max-width: 406px;
  margin-inline: auto;
  padding: 26px;
  background-color: #fff;
  border: 5.325px solid var(--sm-primary);
  border-radius: 37.276px;
}

.sm-menu-mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.sm-menu-mock__table {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--sm-body);
  margin-bottom: 0;
}

.sm-menu-mock__cart {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 31px;
  padding-inline: 12px;
  border-radius: 99px;
  background-image: linear-gradient(248deg, var(--sm-secondary) 43%, var(--sm-primary) 129%);
  color: #fff;
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 0.875rem;
}

.sm-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 17px;
  margin-bottom: 9px;
  border: 1px solid rgba(246, 145, 14, 0.22);
  border-radius: 14px;
  background-color: var(--sm-cream-warm);
}

.sm-menu-row__name {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--sm-ink);
  margin-bottom: 4px;
}

.sm-menu-row__price {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--sm-muted);
  margin-bottom: 0;
}

.sm-menu-row__qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 26px;
  padding-inline: 12px;
  border: 1px solid rgba(246, 145, 14, 0.5);
  border-radius: 99px;
  background-color: #fff;
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--sm-ink);
}

.sm-menu-row__qty span:first-child,
.sm-menu-row__qty span:last-child {
  color: var(--sm-secondary);
}

.sm-menu-mock__cta {
  display: block;
  width: 100%;
  margin-top: 1.125rem;
  padding-block: 12px;
  border: 0;
  border-radius: 10px;
  background-image: linear-gradient(90deg, var(--sm-primary) 0%, var(--sm-secondary) 100%);
  color: #fff;
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. "3 Steps" section
   -------------------------------------------------------------------------- */
.sm-steps__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.sm-steps__title {
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.06vw, 2.75rem); /* 44px */
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #000;
  text-transform: capitalize;
  margin-bottom: 0;
}

.sm-steps__lead {
  font-family: var(--sm-font-body);
  font-weight: 300;
  font-size: clamp(1.125rem, 2.08vw, 1.875rem);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--sm-body);
  text-transform: capitalize;
  margin-bottom: 0;
}

.sm-step {
  display: flex;
  align-items: center;
  gap: 29px;
}

.sm-step__badge {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
}

.sm-step__badge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Pending: soft halo + outline circle + the step number */
.sm-step__glow {
  inset: -4px !important;
  width: calc(100% + 8px) !important;
  height: calc(100% + 8px) !important;
  transition: opacity 0.4s ease;
}

.sm-step__ring {
  transition: opacity 0.4s ease;
}

.sm-step__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sm-font-body);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.01em;
  color: var(--sm-primary);
  transition: opacity 0.3s ease;
}

/* Filling: a progress ring that tracks the scroll position.
   Registered so the angle is a real <angle> and inherits down to the sweep. */
@property --sm-sweep {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

.sm-step__sweep {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  opacity: 0;
  background-image: conic-gradient(var(--sm-primary) var(--sm-sweep), transparent 0deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 87%, #000 88%);
  mask-image: radial-gradient(closest-side, transparent 87%, #000 88%);
  transition: opacity 0.3s ease;
}

.sm-step__badge {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sm-step.is-filling .sm-step__sweep {
  opacity: 1;
}

.sm-step.is-filling .sm-step__badge {
  transform: scale(1.06);
}

/* Done: the filled badge with its white tick pops in */
.sm-step__check {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sm-step.is-done .sm-step__glow,
.sm-step.is-done .sm-step__ring,
.sm-step.is-done .sm-step__num,
.sm-step.is-done .sm-step__sweep {
  opacity: 0;
}

.sm-step.is-done .sm-step__badge {
  transform: scale(1);
}

.sm-step.is-done .sm-step__check {
  opacity: 1;
  transform: scale(1);
}

/* The 3.18 line-height IS the design's row rhythm, so each step has to stay
   on one line — keep the copy short enough to fit, nowrap keeps it honest */
.sm-step__text {
  white-space: nowrap;
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.94vw, 1.75rem); /* 28px */
  line-height: 3.18;
  color: #000;
  text-transform: capitalize;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. Segments ("Every Food Business, Every Size")
   -------------------------------------------------------------------------- */
.sm-segment-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 116px;
  padding: 21px 37px;
  border-radius: 32px;
  border: 1px solid var(--sm-border-warm);
  background-color: #fff;
  cursor: pointer;
  transition: box-shadow 0.25s ease, border-color 0.25s ease,
    transform 0.25s ease, background-color 0.25s ease;
}

.sm-segment-card + .sm-segment-card {
  margin-top: 18px;
}

/* :not(.is-active) so hovering the selected card cannot pull it back out of
   its own, slightly larger offset */
.sm-segment-card:not(.is-active):hover {
  transform: translateX(4px);
  border-color: rgba(198, 40, 40, 0.35);
}

/* Selected state. The idle cards used to carry the red border and the active
   one dropped it, which left the segment actually on show reading as the
   faintest of the three. It is the other way round now: idle is quiet, the
   active card is the loud one. */
.sm-segment-card.is-active {
  border-color: var(--sm-primary);
  background-image: linear-gradient(110deg, #fff 38%, var(--sm-peach) 100%);
  box-shadow: 0 16px 34px rgba(198, 40, 40, 0.14);
  transform: translateX(6px);
}

/* Red edge that grows in on the active card — legible even where the warm
   tint alone is too subtle */
.sm-segment-card::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 0;
  border-radius: 0 4px 4px 0;
  background-color: var(--sm-primary);
  transform: translateY(-50%);
  transition: height 0.25s ease;
}

.sm-segment-card.is-active::after {
  height: 52%;
}

.sm-segment-card.is-active .sm-segment-card__title {
  color: var(--sm-primary);
}

/* The red and the plain icon sit exactly on top of each other; only one is
   ever opaque, otherwise the hidden one shows through the other's gaps. */
.sm-segment-card__icons {
  position: relative;
  width: 73px;
  height: 73px;
  flex: 0 0 auto;
}

.sm-segment-card__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}

.sm-segment-card__icon--active {
  opacity: 0;
}

.sm-segment-card.is-active .sm-segment-card__icon--active {
  opacity: 1;
}

.sm-segment-card.is-active .sm-segment-card__icon--idle {
  opacity: 0;
}

.sm-segment-card__title {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.94vw, 1.75rem); /* 28px */
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--sm-ink);
  text-transform: capitalize;
  margin-bottom: 5px;
}

.sm-segment-card__meta {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.53vw, 1.375rem); /* 22px */
  line-height: 1.55;
  color: var(--sm-muted-alt);
  margin-bottom: 0;
}

/* Stage holding the three cross-fading panels */
.sm-segment-stage {
  position: relative;
  min-height: 564px;
}

/* Feature panel with photo + dark wash */
.sm-segment-panel {
  position: absolute;
  inset: 0;
  border-radius: 44px;
  overflow: hidden;
  background-color: #d9d9d9;
  background-image: url("../images/segment-restaurants.png");
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0.55s;
}

.sm-segment-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.sm-segment-panel--cafe {
  background-image: url("../images/segment-cafe.png");
}

.sm-segment-panel--tea {
  background-image: url("../images/segment-tea-shops.png");
}

.sm-segment-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    98deg,
    rgba(0, 0, 0, 0.74) 5.03%,
    rgba(102, 102, 102, 0.74) 94.97%
  );
}

/* Progress dots — the active one stretches into a pill */
.sm-segment-dots {
  position: absolute;
  top: 50px;
  right: 33px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sm-segment-dot {
  width: 12px;
  height: 12px;
  border-radius: 99px;
  background-color: rgba(255, 255, 255, 0.55);
  transition: width 0.4s ease, background-color 0.4s ease;
}

.sm-segment-dot.is-active {
  width: 44px;
  background-color: var(--sm-secondary);
}

.sm-segment-panel__body {
  position: relative;
  padding: 0 28px 74px;
}

.sm-segment-panel__eyebrow {
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sm-secondary);
  margin-bottom: 0.25rem;
}

.sm-segment-panel__title {
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.06vw, 2.75rem); /* 44px */
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #fff;
  text-transform: capitalize;
  margin-bottom: 0.375rem;
}

.sm-segment-panel__text {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: clamp(1rem, 1.53vw, 1.375rem); /* 22px */
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 0;
}

/* Chat mock */
.sm-chat {
  position: relative;
  min-height: 388px;
  padding: 31px 34px;
  background-color: #fff;
  border: 0.5px solid #e8dbd1;
  border-radius: 22px;
  box-shadow: 0 2px 4px rgba(246, 145, 14, 0.12);
}

.sm-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sm-chat__head img {
  width: 50px;
  height: 50px;
}

.sm-chat__head h3 {
  font-family: var(--sm-font-display);
  font-weight: 600;
  font-size: 1.625rem;
  letter-spacing: 0.02em;
  color: #000;
  text-transform: capitalize;
  margin-bottom: 0;
}

.sm-chat__bubble {
  padding: 8px 31px;
  background-color: var(--sm-peach);
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--sm-body);
  margin-bottom: 0;
}

/* Outgoing bubble — flat corner bottom-right */
.sm-chat__bubble--out {
  border: 0.5px solid rgba(255, 152, 25, 0.2);
  border-radius: 22px 22px 6px 22px;
  margin-left: auto;
  max-width: 387px;
}

/* Incoming bubble — flat corner bottom-left */
.sm-chat__bubble--in {
  border: 0.5px solid rgba(162, 5, 19, 0.2);
  border-radius: 22px 22px 22px 6px;
  max-width: 449px;
  padding: 14px 30px;
}

.sm-chat__avatar {
  width: 41px;
  height: 41px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */
.sm-testimonial {
  height: 100%;
  padding: 55px 27px 42px;
  background-color: var(--sm-cream-warm);
  box-shadow: 0 1px 2px rgba(246, 145, 14, 0.12);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
  display: flex;
  flex-direction: column;
}

.sm-testimonial__stars {
  width: 103px;
  height: 18px;
}

.sm-testimonial__quote {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.56;
  letter-spacing: 0.02em;
  color: var(--sm-muted);
  text-align: justify;
  margin: 32px 0 0;
}

.sm-testimonial__divider {
  height: 1px;
  border: 0;
  margin: 38px 8px 34px;
  background-color: #d9d9d9;
  opacity: 1;
}

.sm-testimonial__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sm-testimonial__initials {
  width: 57px;
  height: 57px;
  flex: 0 0 auto;
  border-radius: 99px;
  background-color: var(--sm-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sm-font-inter);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
}

.sm-testimonial__name {
  font-family: var(--sm-font-inter);
  font-weight: 700;
  font-size: 1rem;
  color: #000;
  margin-bottom: 0;
}

.sm-testimonial__role,
.sm-testimonial__place {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.67;
  letter-spacing: 0.02em;
  color: var(--sm-muted);
  margin-bottom: 0;
}

.sm-testimonial__place {
  color: var(--sm-secondary);
}

/* --------------------------------------------------------------------------
   14. Pricing
   -------------------------------------------------------------------------- */
.sm-pricing-grid {
  display: grid;
  grid-template-columns: 362.66fr 380.81fr 362.66fr;
  align-items: center;
  gap: 15px;
  max-width: 1136px;
  margin-inline: auto;
}

.sm-plan {
  display: flex;
  flex-direction: column;
  padding: 33px;
  border: 1px solid var(--sm-border-soft);
  border-radius: 16px;
  background-color: var(--sm-cream);
}

.sm-plan__name {
  font-family: var(--sm-font-mont);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.33;
  color: var(--sm-ink);
  margin-bottom: 4px;
}

.sm-plan__desc {
  font-family: var(--sm-font-inter);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--sm-brown);
  margin-bottom: 0;
}

.sm-plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-top: 20px;
  margin-bottom: 0;
  font-family: var(--sm-font-inter);
}

.sm-plan__amount {
  font-weight: 700;
  font-size: 3rem; /* 48px */
  line-height: 1.17;
  letter-spacing: -0.02em;
  color: var(--sm-ink);
}

.sm-plan__amount--sm {
  font-size: 2rem;
  line-height: 1.25;
  letter-spacing: 0;
}

.sm-plan__period {
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.33;
  color: var(--sm-brown);
}

.sm-plan__features {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 1 auto;
}

.sm-plan__features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sm-font-inter);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--sm-ink);
}

.sm-plan__features img {
  width: 13.333px;
  height: 13.333px;
  flex: 0 0 auto;
}

.sm-plan__cta {
  display: block;
  width: 100%;
  padding-block: 18px;
  border: 2px solid var(--sm-primary-deep);
  border-radius: 12px;
  background-color: transparent;
  font-family: var(--sm-font-inter);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sm-primary-deep);
  text-align: center;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.sm-plan__cta:hover {
  background-color: var(--sm-primary-deep);
  color: #fff;
}

/* Enterprise button uses the muted brown outline */
.sm-plan__cta--muted {
  border-color: #8f706c;
  color: var(--sm-ink);
}

.sm-plan__cta--muted:hover {
  background-color: #8f706c;
  color: #fff;
}

/* Highlighted "Pro" plan */
.sm-plan--featured {
  position: relative;
  padding: 32px;
  border: 0;
  color: #fff;
  background-image: linear-gradient(
    to bottom,
    var(--sm-primary-deep) 0%,
    rgba(183, 38, 20, 0.92) 73.254%,
    rgba(255, 152, 25, 0.66) 136.56%
  );
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.sm-plan--featured .sm-plan__name,
.sm-plan--featured .sm-plan__amount {
  color: #fff;
}

.sm-plan--featured .sm-plan__desc,
.sm-plan--featured .sm-plan__period {
  color: rgba(255, 255, 255, 0.7);
}

.sm-plan--featured .sm-plan__features li {
  color: #fff;
}

.sm-plan--featured .sm-plan__cta {
  border-color: transparent;
  background-color: #fff;
  color: var(--sm-primary-deep);
  padding-block: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.sm-plan--featured .sm-plan__cta:hover {
  background-color: var(--sm-cream);
  color: var(--sm-primary-deep);
}

.sm-plan__ribbon {
  position: absolute;
  top: -16px;
  right: 32px;
  padding: 4px 16px;
  border-radius: 9999px;
  background-color: var(--sm-accent);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  font-family: var(--sm-font-inter);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.33;
  color: #663800;
}

/* --------------------------------------------------------------------------
   15. FAQ accordion
   -------------------------------------------------------------------------- */
.sm-faq {
  max-width: 1238px;
  margin-inline: auto;
}

.sm-faq .accordion-item {
  border: 0.5px solid var(--sm-border);
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
}

.sm-faq .accordion-item + .accordion-item {
  margin-top: 16px;
}

/* Expanded card gets the brand outline and a deeper radius */
.sm-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border: 0.5px solid var(--sm-primary);
  border-radius: 18px;
}

.sm-faq .accordion-button {
  padding: 18px 58px;
  min-height: 95px;
  background-color: #fff;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.53vw, 1.375rem); /* 22px */
  letter-spacing: 0.01em;
  color: var(--sm-ink);
  text-transform: capitalize;
}

.sm-faq .accordion-button:not(.collapsed) {
  min-height: 81px;
  color: var(--sm-ink);
  border-bottom: 0.5px solid var(--sm-border);
}

.sm-faq .accordion-button:focus {
  box-shadow: none;
  border-color: var(--sm-border);
}

/* Replace Bootstrap's chevron with the design's +/- glyphs */
.sm-faq .accordion-button::after {
  content: "+";
  background-image: none;
  width: auto;
  height: auto;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--sm-primary);
  transform: none;
}

.sm-faq .accordion-button:not(.collapsed)::after {
  content: "\2013"; /* en dash, matching the design's minus */
  font-size: 2.75rem;
}

.sm-faq .accordion-body {
  padding: 20px 58px 28px;
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: clamp(1.0625rem, 1.53vw, 1.375rem);
  line-height: 1.86;
  letter-spacing: 0.01em;
  color: var(--sm-body);
  text-align: justify;
  text-transform: capitalize;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.sm-footer {
  background-color: var(--sm-ink);
  color: rgba(255, 255, 255, 0.72);
  padding-block: 3.5rem 1.5rem;
}

.sm-footer__logo {
  display: inline-block;
  margin-bottom: 1.5rem;
  transition: transform 0.2s ease;
}

.sm-footer__logo:hover {
  transform: translateY(-2px);
}

.sm-footer__about {
  max-width: 342px;
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.63;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1.75rem;
}

.sm-footer__socials {
  display: flex;
  gap: 24px;
}

.sm-footer__social {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.sm-footer__social:hover {
  background-color: var(--sm-primary);
  color: #fff;
}

.sm-footer__heading {
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.35;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.sm-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sm-footer__list a {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.39;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.18s ease;
}

.sm-footer__list a:hover {
  color: var(--sm-secondary);
}

.sm-newsletter {
  display: flex;
  max-width: 382px;
  height: 42px;
}

.sm-newsletter input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 17px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px 0 0 6px;
  background-color: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--sm-font-body);
  font-size: 0.9375rem;
}

.sm-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.sm-newsletter input:focus {
  outline: none;
  border-color: var(--sm-secondary);
}

.sm-newsletter button {
  flex: 0 0 auto;
  width: 64px;
  border: 0;
  border-radius: 0 6px 6px 0;
  background-color: var(--sm-primary);
  color: #fff;
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1rem;
  transition: background-color 0.18s ease;
}

.sm-newsletter button:hover {
  background-color: var(--sm-secondary);
}

.sm-footer__divider {
  margin: 3rem 0 1.5rem;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.sm-footer__copyright {
  text-align: center;
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   17. Responsive overrides
   -------------------------------------------------------------------------- */

/* Large desktop and below — tighten the roomy card padding */
@media (max-width: 1399.98px) {
  .sm-showcase {
    padding: 2.5rem;
  }
}

/* Laptop */
@media (max-width: 1199.98px) {
  :root {
    --sm-gutter: 2rem;
  }
}

/* Tablet landscape */
@media (max-width: 991.98px) {
  :root {
    --sm-gutter: 1.5rem;
    --sm-section-space: 3rem;
  }

  .sm-hero {
    min-height: auto;
    border-bottom-left-radius: 44px;
    border-bottom-right-radius: 44px;
  }

  .sm-hero::before {
    background-image: linear-gradient(
      to right,
      var(--sm-cream) 0%,
      rgba(252, 249, 248, 0.92) 60%,
      rgba(252, 249, 248, 0.7) 100%
    );
  }

  .sm-hero__inner {
    max-width: none;
    padding-block: 3rem;
  }

  .sm-step__text {
    white-space: normal;
    line-height: 1.6;
  }

  .sm-segment-stage {
    min-height: 420px;
  }

  .sm-segment-panel__body {
    padding: 0 24px 40px;
  }

  /* Pricing stacks; the featured plan no longer needs to break the grid */
  .sm-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }

  .sm-plan--featured {
    padding: 33px;
  }

  .sm-faq .accordion-button {
    padding: 18px 24px;
    min-height: 76px;
  }

  .sm-faq .accordion-body {
    padding: 18px 24px 24px;
  }

  .sm-testimonial {
    padding: 40px 24px 32px;
  }
}

/* Tablet portrait / large phone */
@media (max-width: 767.98px) {
  :root {
    --sm-gutter: 1.25rem;
    --sm-section-space: 2.5rem;
  }

  .sm-hero {
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
  }

  .sm-hero::before {
    background-image: linear-gradient(
      to bottom,
      rgba(252, 249, 248, 0.96) 0%,
      rgba(252, 249, 248, 0.88) 100%
    );
  }

  .sm-hero__badge {
    min-height: 48px;
    padding: 8px 16px;
  }

  .sm-btn-primary,
  .sm-btn-secondary {
    min-height: 54px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .sm-showcase {
    padding: 1.5rem;
    border-radius: 18px;
  }

  .sm-menu-mock {
    border-width: 4px;
    border-radius: 28px;
    padding: 20px;
  }

  .sm-segment-card {
    gap: 18px;
    padding: 18px 22px;
    border-radius: 24px;
  }

  .sm-segment-card__icons {
    width: 56px;
    height: 56px;
  }

  .sm-segment-stage {
    min-height: 360px;
  }

  .sm-segment-panel {
    border-radius: 28px;
  }

  .sm-chat {
    padding: 22px;
  }

  .sm-chat__bubble--out,
  .sm-chat__bubble--in,
  .sm-chat--compact .sm-chat__bubble--out,
  .sm-chat--compact .sm-chat__bubble--in {
    max-width: 100%;
  }

  .sm-footer__logo {
    font-size: 2rem;
  }

  .sm-footer__divider {
    margin-top: 2rem;
  }
}

/* Small phone */
@media (max-width: 575.98px) {
  .sm-pill {
    height: 40px;
    padding-inline: 16px;
    font-size: 1rem;
  }

  .sm-faq .accordion-button {
    padding: 16px 18px;
  }

  .sm-faq .accordion-body {
    padding: 16px 18px 20px;
    text-align: left;
  }

  .sm-testimonial__quote {
    text-align: left;
  }

  .sm-menu-mock {
    border-radius: 22px;
    padding: 16px;
  }

  .sm-menu-row {
    padding: 12px 14px;
  }

  /* "NPR 1,999" at 48px overruns a phone-width plan card */
  .sm-plan,
  .sm-plan--featured {
    padding: 24px;
  }

  .sm-plan__amount {
    font-size: 2.375rem;
  }

  .sm-plan__amount--sm {
    font-size: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   18. Motion — scroll reveal, counters, scrolled navbar
   Mirrors the reveal system used in the Hayabusa project.
   -------------------------------------------------------------------------- */

.sm-reveal {
  opacity: 0;
  transform: var(--sm-reveal-from, translateY(36px));
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.sm-reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

.sm-reveal--left {
  --sm-reveal-from: translateX(-56px);
}

.sm-reveal--right {
  --sm-reveal-from: translateX(56px);
}

.sm-reveal--fade {
  --sm-reveal-from: translateY(0);
}

.sm-reveal--scale {
  --sm-reveal-from: scale(0.94) translateY(20px);
}

/* Navbar picks up a shadow once the page is scrolled */
.sm-navbar.is-scrolled {
  box-shadow: 0 4px 16px rgba(162, 5, 19, 0.1);
}

/* Subtle lift on the card surfaces */
.sm-plan,
.sm-testimonial {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sm-plan:hover,
.sm-testimonial:hover {
  transform: translateY(-4px);
}

.sm-testimonial:hover {
  box-shadow: 0 8px 20px rgba(246, 145, 14, 0.18);
}

/* Respect the user's motion preference */
@media (prefers-reduced-motion: reduce) {
  .sm-reveal,
  .sm-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .sm-btn:hover,
  .sm-plan:hover,
  .sm-testimonial:hover,
  .sm-segment-card:not(.is-active):hover,
  .sm-segment-card.is-active {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   19. Call-a-waiter panel — alert demo mock
   -------------------------------------------------------------------------- */

.sm-alert-demo {
  padding: 24px;
  background-color: #fff;
  border: 1px solid var(--sm-border-amber);
  border-radius: 18px;
}

/* Radial halo behind the ringing bell */
.sm-alert-demo__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 18px 26px;
}

.sm-alert-demo__glow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background-image: radial-gradient(circle, rgba(246, 145, 14, 0.18) 0%, rgba(246, 145, 14, 0) 68%);
}

.sm-alert-demo__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  background-image: linear-gradient(140deg, var(--sm-secondary) 0%, var(--sm-primary) 100%);
}

.sm-alert-demo__badge i {
  font-size: 1.625rem;
  line-height: 1;
}

.sm-alert-demo__caption {
  margin: 18px 0 0;
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sm-grey);
}

/* Incoming request card */
.sm-alert {
  padding: 16px;
  border: 1px solid var(--sm-border-warm);
  border-radius: 12px;
  background-color: #fff;
}

.sm-alert__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* .sm-alert__icon composes .sm-chip-icon for its shape and colour;
   only the ringing animation (section 21) is specific to it. */

.sm-alert__title {
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--sm-ink);
  margin-bottom: 2px;
}

.sm-alert__meta {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--sm-grey);
  margin-bottom: 0;
}

.sm-alert__actions {
  display: flex;
  gap: 12px;
}

/* Pill-shaped, matching the feature pills in the tab strip */
.sm-alert__btn {
  flex: 1 1 0;
  padding-block: 10px;
  border: 1px solid transparent;
  border-radius: 99px;
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  transition: filter 0.18s ease, background-color 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

.sm-alert__btn--accept {
  color: #fff;
  background-image: linear-gradient(90deg, var(--sm-primary) 0%, var(--sm-secondary) 100%);
}

.sm-alert__btn--accept:hover {
  filter: brightness(1.06);
}

.sm-alert__btn--ghost {
  color: var(--sm-grey);
  background-color: #fff;
  border-color: var(--sm-border-warm);
}

.sm-alert__btn--ghost:hover {
  color: var(--sm-primary);
  border-color: rgba(198, 40, 40, 0.3);
}

/* --------------------------------------------------------------------------
   20. Kitchen Display panel — dark ticket board mock
   -------------------------------------------------------------------------- */

/* Recolourable glyph: an exported SVG used as a mask, painted via `color`.
   Lets one asset render white on a gradient tile and red on a dark board. */
.sm-glyph {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.sm-glyph--chef {
  -webkit-mask-image: url("../images/pill-kitchen-display.svg");
  mask-image: url("../images/pill-kitchen-display.svg");
}

.sm-kds {
  padding: 20px;
  border-radius: 16px;
  background-color: #191919;
}

.sm-kds__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.sm-kds__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 0;
}

.sm-kds__title .sm-glyph {
  width: 22px;
  height: 22px;
  color: var(--sm-primary);
}

.sm-kds__live {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0;
}

/* Two tickets side by side, stacking on narrow screens */
.sm-kds__tickets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sm-ticket {
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.04);
}

.sm-ticket__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
}

.sm-ticket__table {
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0;
}

.sm-ticket__badge {
  flex: 0 0 auto;
  padding: 2px 10px;
  border-radius: 99px;
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sm-ticket__badge--new {
  color: #fff;
  background-image: linear-gradient(248deg, var(--sm-secondary) 43%, var(--sm-primary) 129%);
}

.sm-ticket__badge--preparing {
  color: rgba(255, 255, 255, 0.82);
  background-color: rgba(255, 255, 255, 0.16);
}

.sm-ticket__items {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sm-ticket__items li {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 575.98px) {
  .sm-kds__tickets {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   21. Call-a-waiter — live alert animation
   Sells the "a request just came in" moment: the halo breathes, rings
   radiate outward, the bell swings and the request card pulses in.
   -------------------------------------------------------------------------- */

.sm-alert-demo__glow {
  animation: sm-halo 2.6s ease-in-out infinite;
}

/* Two rings, offset by half the cycle, radiating out of the badge */
.sm-alert-demo__badge {
  position: relative;
}

.sm-alert-demo__badge::before,
.sm-alert-demo__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(246, 145, 14, 0.55);
  animation: sm-ripple 2.6s ease-out infinite;
}

.sm-alert-demo__badge::after {
  animation-delay: 1.3s;
}

.sm-alert-demo__badge i {
  position: relative;
  transform-origin: 50% 12%;
  animation: sm-bell-ring 2.6s ease-in-out infinite;
}

/* Caption fades gently in time with the ring */
.sm-alert-demo__caption {
  animation: sm-caption-fade 2.6s ease-in-out infinite;
}

/* The waiting request nudges for attention */
.sm-alert {
  animation: sm-alert-pulse 2.6s ease-in-out infinite;
}

.sm-alert__icon i {
  transform-origin: 50% 12%;
  animation: sm-bell-ring 2.6s ease-in-out infinite;
}

@keyframes sm-halo {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.09);
    opacity: 1;
  }
}

@keyframes sm-ripple {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.95);
    opacity: 0;
  }
}

@keyframes sm-bell-ring {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
  }

  5% {
    transform: rotate(15deg);
  }

  12% {
    transform: rotate(-13deg);
  }

  19% {
    transform: rotate(10deg);
  }

  26% {
    transform: rotate(-8deg);
  }

  33% {
    transform: rotate(5deg);
  }

  40% {
    transform: rotate(-3deg);
  }
}

@keyframes sm-caption-fade {
  0%,
  100% {
    opacity: 0.65;
  }

  25% {
    opacity: 1;
  }
}

@keyframes sm-alert-pulse {
  0%,
  100% {
    border-color: var(--sm-border-warm);
    box-shadow: 0 0 0 0 rgba(246, 145, 14, 0);
  }

  25% {
    border-color: rgba(246, 145, 14, 0.55);
    box-shadow: 0 0 0 4px rgba(246, 145, 14, 0.12);
  }
}

/* Hold everything still when motion is unwelcome */
@media (prefers-reduced-motion: reduce) {
  .sm-alert-demo__glow,
  .sm-alert-demo__badge::before,
  .sm-alert-demo__badge::after,
  .sm-alert-demo__badge i,
  .sm-alert-demo__caption,
  .sm-alert,
  .sm-alert__icon i {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   22. Saral AI panel — compact variant of the chat mock (section 12)
   -------------------------------------------------------------------------- */
.sm-chat--compact {
  min-height: 0;
  padding: 20px;
  border-color: var(--sm-border-amber);
  border-radius: 16px;
  box-shadow: none;
}

.sm-chat--compact .sm-chat__head {
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sm-border-warm);
}

.sm-chat--compact .sm-chat__head img {
  width: 38px;
  height: 38px;
}

.sm-chat--compact .sm-chat__head h3 {
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
}

.sm-chat--compact .sm-chat__bubble {
  padding: 10px 20px;
  font-size: 0.8125rem;
  line-height: 1.55;
}

.sm-chat--compact .sm-chat__bubble--out {
  max-width: 370px;
  border-radius: 14px 14px 4px 14px;
}

.sm-chat--compact .sm-chat__bubble--in {
  max-width: 355px;
  padding: 10px 18px;
  border-radius: 14px 14px 14px 4px;
}

.sm-chat--compact .sm-chat__avatar {
  width: 34px;
  height: 34px;
}

/* Slanted chat bubbles — the bubble leans, the text is counter-skewed so it
   still reads upright. */
.sm-chat--compact .sm-chat__bubble {
  transform: skewX(-10deg);
  transform-origin: center;
}

.sm-chat--compact .sm-chat__bubble > span {
  display: block;
  transform: skewX(10deg);
}

/* --------------------------------------------------------------------------
   23. Social Media Studio panel — promo poster mock
   -------------------------------------------------------------------------- */
.sm-promo {
  padding: 24px;
  border-radius: 16px;
  color: #fff;
  background-image: linear-gradient(95deg, var(--sm-primary) 0%, var(--sm-secondary) 100%);
}

.sm-promo__eyebrow {
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.sm-promo__title {
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.22vw, 2rem);
  line-height: 1.2;
  color: #fff;
  margin-bottom: 4px;
}

/* The "+" sits lighter and smaller than the two product names */
.sm-promo__title span {
  font-weight: 300;
  font-size: 0.86em;
  padding-inline: 4px;
}

.sm-promo__price {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 1.125rem;
  margin-bottom: 16px;
}

.sm-promo__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.sm-promo__channel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 99px;
  background-color: rgba(255, 255, 255, 0.22);
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff;
}

.sm-promo__meta {
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   24. Shared mock primitives
   -------------------------------------------------------------------------- */

/* Peach circle holding a brand-coloured glyph */
.sm-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--sm-peach);
  color: var(--sm-primary);
}

.sm-chip-icon i {
  font-size: 1.1875rem;
  line-height: 1;
}

/* White panel surface used by the mock cards on the right of each tab */
.sm-mock-card {
  padding: 20px;
  background-color: #fff;
  border: 1px solid var(--sm-border-amber);
  border-radius: 16px;
}

/* --------------------------------------------------------------------------
   25. Item Sales panel — bar chart mock
   -------------------------------------------------------------------------- */
.sm-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 180px;
}

.sm-chart__bar {
  flex: 1 1 0;
  border-radius: 6px 6px 0 0;
  background-color: #faf0e7;
  transform-origin: bottom center;
}

/* Bar heights come from the design rather than inline styles */
.sm-chart__bar:nth-child(1) { height: 60%; }
.sm-chart__bar:nth-child(2) { height: 76%; }
.sm-chart__bar:nth-child(3) { height: 46%; }
.sm-chart__bar:nth-child(4) { height: 63%; }
.sm-chart__bar:nth-child(5) { height: 57%; }
.sm-chart__bar:nth-child(6) { height: 100%; }
.sm-chart__bar:nth-child(7) { height: 60%; }

/* The best seller of the day */
.sm-chart__bar--star {
  background-color: transparent;
  background-image: linear-gradient(180deg, var(--sm-primary) 0%, var(--sm-secondary) 100%);
}

.sm-chart__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sm-border-warm);
}

.sm-chart__label {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--sm-grey);
  margin-bottom: 0;
}

.sm-chart__star {
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sm-primary);
  margin-bottom: 0;
}

/* Bars grow in when the chart scrolls into view */
.sm-chart.is-in .sm-chart__bar {
  animation: sm-bar-grow 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.sm-chart.is-in .sm-chart__bar:nth-child(2) { animation-delay: 0.06s; }
.sm-chart.is-in .sm-chart__bar:nth-child(3) { animation-delay: 0.12s; }
.sm-chart.is-in .sm-chart__bar:nth-child(4) { animation-delay: 0.18s; }
.sm-chart.is-in .sm-chart__bar:nth-child(5) { animation-delay: 0.24s; }
.sm-chart.is-in .sm-chart__bar:nth-child(6) { animation-delay: 0.3s; }
.sm-chart.is-in .sm-chart__bar:nth-child(7) { animation-delay: 0.36s; }

@keyframes sm-bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* --------------------------------------------------------------------------
   26. Recipe Vault + Recipe Library panels — list mocks
   -------------------------------------------------------------------------- */
.sm-mock-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sm-border-warm);
}

.sm-mock-head__title {
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--sm-ink);
  margin-bottom: 2px;
}

.sm-mock-head__meta {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--sm-grey);
  margin-bottom: 0;
}

.sm-mock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sm-mock-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(246, 145, 14, 0.22);
  border-radius: 12px;
  background-color: var(--sm-cream-warm);
}

.sm-mock-list__name {
  font-family: var(--sm-font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--sm-ink);
  margin-bottom: 2px;
}

.sm-mock-list__meta {
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--sm-muted);
  margin-bottom: 0;
}

/* Access tag on the vault rows */
.sm-mock-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 4px 12px;
  border-radius: 99px;
  background-color: var(--sm-peach);
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--sm-primary);
}

/* Search field on the library mock */
.sm-mock-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  margin-bottom: 22px;
  border: 1px solid var(--sm-border-warm);
  border-radius: 99px;
  font-family: var(--sm-font-body);
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--sm-grey);
}

/* Small square thumb in front of each library row */
.sm-mock-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #fff;
  background-image: linear-gradient(140deg, var(--sm-secondary) 0%, var(--sm-primary) 100%);
}

.sm-mock-thumb i {
  font-size: 1rem;
  line-height: 1;
}

/* Card strip stands still when motion is unwelcome, but stays swipeable */
@media (prefers-reduced-motion: reduce) {
  .sm-showcase-stack {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --------------------------------------------------------------------------
   27. Marquee — reusable infinite horizontal scroller
   JS widens the group past the container, then clones it once, so the
   translateX(-50%) loop lands exactly on a repeat with no gap.
   -------------------------------------------------------------------------- */
.sm-marquee {
  overflow: hidden;
  padding-block: 10px; /* room for the hover lift and its shadow */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.sm-marquee__track {
  display: flex;
  width: max-content;
  animation: sm-marquee 26s linear infinite;
}

/* Stand still while it is being read or tabbed through */
.sm-marquee:hover .sm-marquee__track,
.sm-marquee:focus-within .sm-marquee__track {
  animation-play-state: paused;
}

.sm-marquee__group {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  padding-right: 22px;
}

@keyframes sm-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Testimonial cards keep their Figma width inside the moving row */
.sm-marquee .sm-testimonial {
  flex: 0 0 auto;
  width: clamp(280px, 82vw, 427px);
}

@media (prefers-reduced-motion: reduce) {
  .sm-marquee__track {
    animation: none;
  }

  .sm-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* --------------------------------------------------------------------------
   28. Responsive hardening
   -------------------------------------------------------------------------- */

/* A long unbroken word (URL, dish name) must never widen the page */
body {
  overflow-wrap: break-word;
}

/* Flex items default to min-width:auto, which stops text columns shrinking
   below their longest word and pushes the row wider than its parent. */
.sm-menu-row > div,
.sm-alert__head > div,
.sm-mock-list li > div,
.sm-mock-head > div,
.sm-segment-card > div,
.sm-chat__head,
.sm-kds__title {
  min-width: 0;
}

/* Truncation guards on the narrow mock rows */
.sm-menu-row__name,
.sm-menu-row__price,
.sm-mock-list__name,
.sm-mock-list__meta,
.sm-ticket__table {
  min-width: 0;
}

@media (max-width: 991.98px) {
  /* Stacked plans: the POPULAR ribbon overhangs by 16px, so the row gap has
     to clear it or it lands on the card above */
  .sm-pricing-grid {
    gap: 34px;
  }
}

@media (max-width: 575.98px) {
  .sm-chart__bars {
    height: 148px;
  }

  /* Let a long recipe row wrap instead of squeezing its tag */
  .sm-mock-list li {
    flex-wrap: wrap;
  }

  .sm-footer__socials {
    gap: 16px;
  }

  /* Feature pills get tight once eight of them wrap on a phone */
  .sm-pills {
    gap: 8px;
  }
}

/* --------------------------------------------------------------------------
   Hero icons — the badge spark and the "Watch Demo" play button

   Both blink on a slow loop so the eye is pulled to the demo CTA without the
   motion ever reading as a flashing banner. Rings expand out of the play glyph
   on an offset pair so one is always mid-flight.
   -------------------------------------------------------------------------- */
.sm-play {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
}

.sm-play img {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
  animation: sm-play-blink 2.6s ease-in-out infinite;
  transform-origin: center;
}

.sm-play::before,
.sm-play::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--sm-secondary);
  opacity: 0;
  animation: sm-play-ring 2.6s ease-out infinite;
}

.sm-play::after {
  animation-delay: 1.3s;
}

/* Hover speeds the loop up rather than stopping it — the button stays alive */
.sm-btn-secondary:hover .sm-play img,
.sm-btn-secondary:hover .sm-play::before,
.sm-btn-secondary:hover .sm-play::after {
  animation-duration: 1.4s;
}

.sm-btn-secondary:hover .sm-play::after {
  animation-delay: 0.7s;
}

@keyframes sm-play-ring {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }

  60% {
    transform: scale(1.85);
    opacity: 0;
  }

  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}

@keyframes sm-play-blink {
  0%,
  58%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  70% {
    opacity: 0.35;
    transform: scale(0.88);
  }

  82% {
    opacity: 1;
    transform: scale(1.12);
  }
}

.sm-hero__badge img {
  transform-origin: center;
  animation: sm-badge-blink 3.2s ease-in-out infinite;
}

@keyframes sm-badge-blink {
  0%,
  62%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  74% {
    opacity: 0.4;
    transform: scale(0.9);
  }

  86% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* --------------------------------------------------------------------------
   Contact — split panel

   Two columns on desktop: a warm brand aside on the left, the form card on the
   right. They stack below 992px with the aside on top.
   -------------------------------------------------------------------------- */
.sm-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.sm-contact__aside {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 3vw, 3rem);
  border: 1px solid var(--sm-border-warm);
  border-radius: 24px;
  background:
    linear-gradient(160deg, var(--sm-peach) 0%, var(--sm-cream-warm) 55%, var(--sm-surface) 100%);
}

.sm-contact__badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-bottom: 1.5rem;
  padding: 8px 18px;
  border-radius: 999px;
  background-color: rgba(198, 40, 40, 0.1);
  font-family: var(--sm-font-ui);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--sm-primary);
}

.sm-contact__title {
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  line-height: 1.2;
  color: var(--sm-ink);
}

.sm-contact__lead {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sm-body);
}

.sm-contact__list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sm-contact__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* A long email must wrap rather than push the panel wider than its column */
.sm-contact__list li > span:last-child {
  min-width: 0;
}

.sm-contact__list a {
  overflow-wrap: anywhere;
}

.sm-contact__list strong {
  display: block;
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sm-muted);
}

.sm-contact__list a {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--sm-ink);
  text-decoration: none;
  transition: color 0.18s ease;
}

.sm-contact__list a:hover {
  color: var(--sm-primary);
}

.sm-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background-color: rgba(246, 145, 14, 0.14);
  color: var(--sm-secondary);
  font-size: 1.125rem;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.sm-contact__list li:hover .sm-contact__icon {
  transform: translateY(-2px);
  background-color: rgba(246, 145, 14, 0.22);
}

/* Pushed to the bottom so the aside squares off against the form card */
.sm-contact__proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 2rem;
}

.sm-contact__proof p {
  margin: 0;
  font-size: 1rem;
  color: var(--sm-body);
}

.sm-contact__proof strong {
  color: var(--sm-ink);
}

.sm-contact__panel {
  padding: clamp(1.75rem, 3vw, 3rem);
  border: 1px solid var(--sm-border);
  border-radius: 24px;
  background-color: var(--sm-surface);
  box-shadow: 0 18px 44px rgba(28, 27, 27, 0.06);
}

.sm-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sm-field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sm-ink);
}

.sm-field input,
.sm-field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--sm-border);
  border-radius: 12px;
  background-color: var(--sm-cream);
  font-family: var(--sm-font-body);
  font-size: 1rem;
  color: var(--sm-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.sm-field textarea {
  resize: vertical;
  min-height: 132px;
}

.sm-field input::placeholder,
.sm-field textarea::placeholder {
  color: var(--sm-grey);
}

.sm-field input:focus,
.sm-field textarea:focus {
  outline: none;
  background-color: var(--sm-surface);
  border-color: var(--sm-secondary);
  box-shadow: 0 0 0 4px rgba(246, 145, 14, 0.14);
}

/* Errors only after the form has been submitted once — see initContactForm */
.sm-field__error {
  display: none;
  margin: 8px 0 0;
  font-size: 0.875rem;
  color: var(--sm-primary);
}

.sm-field.is-invalid input,
.sm-field.is-invalid textarea {
  border-color: var(--sm-primary);
  box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.1);
}

.sm-field.is-invalid .sm-field__error {
  display: block;
}

.sm-form__submit {
  align-self: flex-start;
  gap: 10px;
  min-width: 214px;
  font-size: 1.125rem;
}

.sm-form__submit i {
  transition: transform 0.18s ease;
}

.sm-form__submit:hover i {
  transform: translateX(4px);
}

.sm-form__note {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--sm-muted-alt);
}

.sm-form.is-sent .sm-form__note {
  font-weight: 600;
  color: #1f7a41;
}

@media (max-width: 991.98px) {
  .sm-contact {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sm-contact__proof {
    padding-top: 1.5rem;
  }

  .sm-form__submit {
    align-self: stretch;
    width: 100%;
  }
}

/* Blinking icons and expanding rings are exactly what this setting is for */
@media (prefers-reduced-motion: reduce) {
  .sm-play img,
  .sm-play::before,
  .sm-play::after,
  .sm-hero__badge img {
    animation: none;
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   FAQ numbering

   A CSS counter rather than hard-coded digits, so questions can be added,
   removed or reordered in the markup without anything needing a renumber.
   -------------------------------------------------------------------------- */
.sm-faq {
  counter-reset: sm-faq;
}

.sm-faq .accordion-item {
  counter-increment: sm-faq;
}

.sm-faq .accordion-button::before {
  content: counter(sm-faq, decimal-leading-zero);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 22px;
  border-radius: 12px;
  background-color: rgba(198, 40, 40, 0.08);
  font-family: var(--sm-font-ui);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--sm-primary);
  transition: background-color 0.18s ease, color 0.18s ease;
}

/* The open question's chip fills in, matching the brand outline on the card */
.sm-faq .accordion-button:not(.collapsed)::before {
  background-color: var(--sm-primary);
  color: #fff;
}

/* Answer lines up under the question text, clear of the number chip */
.sm-faq .accordion-body {
  padding-left: 124px; /* 58 gutter + 44 chip + 22 gap */
}

@media (max-width: 991.98px) {
  .sm-faq .accordion-button::before {
    width: 36px;
    height: 36px;
    margin-right: 14px;
    border-radius: 10px;
    font-size: 1rem;
  }

  .sm-faq .accordion-body {
    padding-left: 74px; /* 24 gutter + 36 chip + 14 gap */
  }
}

@media (max-width: 575.98px) {
  /* Too narrow to indent the answer — let it run the full card width */
  .sm-faq .accordion-body {
    padding-left: 24px;
  }
}

/* --------------------------------------------------------------------------
   Resources dropdown

   Bootstrap owns the open/close; everything here is the panel's look. The
   caret rotates on open, reusing the existing .sm-nav-link__caret transition.
   -------------------------------------------------------------------------- */
.sm-nav-dropdown .sm-nav-link {
  cursor: pointer;
  text-decoration: none;
}

.sm-nav-dropdown .sm-nav-link.show,
.sm-nav-dropdown .sm-nav-link.is-current {
  color: var(--sm-primary);
}

.sm-nav-dropdown .sm-nav-link.show .sm-nav-link__caret {
  transform: rotate(180deg);
}

.sm-dropdown {
  min-width: 328px;
  margin-top: 12px;
  padding: 10px;
  border: 0.5px solid var(--sm-border);
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 18px 44px rgba(28, 27, 27, 0.12);
}

.sm-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  white-space: normal;
  font-family: var(--sm-font-body);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--sm-body);
}

.sm-dropdown__item strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--sm-ink);
}

.sm-dropdown__item:hover,
.sm-dropdown__item:focus,
.sm-dropdown__item.active {
  background-color: var(--sm-peach);
  color: var(--sm-body);
}

.sm-dropdown__item.active strong,
.sm-dropdown__item:hover strong {
  color: var(--sm-primary);
}

.sm-dropdown__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background-color: rgba(246, 145, 14, 0.16);
  color: var(--sm-secondary);
  font-size: 1.0625rem;
}

@media (min-width: 992px) {
  /* Hover opens it on desktop. The 12px offset would break the pointer's
     journey from the link to the panel, so a transparent strip bridges it */
  .sm-dropdown::before {
    content: "";
    position: absolute;
    inset: -14px 0 auto;
    height: 14px;
  }

  .sm-nav-dropdown:hover > .dropdown-menu,
  .sm-nav-dropdown:focus-within > .dropdown-menu {
    display: block;
  }

  .sm-nav-dropdown:hover > .sm-nav-link,
  .sm-nav-dropdown:focus-within > .sm-nav-link {
    color: var(--sm-primary);
  }

  .sm-nav-dropdown:hover > .sm-nav-link .sm-nav-link__caret,
  .sm-nav-dropdown:focus-within > .sm-nav-link .sm-nav-link__caret {
    transform: rotate(180deg);
  }
}

@media (max-width: 991.98px) {
  /* Inside the collapsed nav the panel is part of the stack, not a floating
     layer — left absolute it would sit on top of Pricing and Contact */
  .sm-dropdown {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    border: 0;
    box-shadow: none;
    background-color: var(--sm-cream);
    /* Popper writes an inline transform for the floating desktop panel; in the
       drawer the panel is static and that offset pushed it off the screen */
    transform: none !important;
  }

  .sm-nav-dropdown {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Content page shell — articles, article detail, FAQs
   -------------------------------------------------------------------------- */
.sm-page-hero {
  padding-block: 3.5rem 2.5rem;
  background:
    linear-gradient(180deg, var(--sm-peach) 0%, var(--sm-cream-warm) 60%, var(--sm-surface) 100%);
  border-bottom: 1px solid var(--sm-border-warm);
}

.sm-page-hero__title {
  margin: 0.75rem 0 0;
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(2.125rem, 4.2vw, 3.75rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--sm-ink);
}

.sm-page-hero__lead {
  max-width: 720px;
  margin: 1rem 0 0;
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.65;
  color: var(--sm-body);
}

/* Breadcrumb */
.sm-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--sm-font-ui);
  font-size: 0.9375rem;
  color: var(--sm-muted);
}

.sm-crumbs a {
  color: var(--sm-muted);
  text-decoration: none;
  transition: color 0.18s ease;
}

.sm-crumbs a:hover {
  color: var(--sm-primary);
}

.sm-crumbs i {
  font-size: 0.6875rem;
  opacity: 0.6;
}

.sm-crumbs [aria-current] {
  color: var(--sm-ink);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Article library — search, filters, count
   -------------------------------------------------------------------------- */
.sm-library {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 2.5rem;
}

.sm-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
}

.sm-search input {
  width: 100%;
  height: 54px;
  padding: 0 46px;
  border: 1px solid var(--sm-border);
  border-radius: 999px;
  background-color: var(--sm-cream);
  font-family: var(--sm-font-body);
  font-size: 1rem;
  color: var(--sm-ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.sm-search input::placeholder {
  color: var(--sm-grey);
}

.sm-search input:focus {
  outline: none;
  background-color: #fff;
  border-color: var(--sm-secondary);
  box-shadow: 0 0 0 4px rgba(246, 145, 14, 0.14);
}

/* The browser's own clear affordance sits where ours does */
.sm-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.sm-search__icon {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  color: var(--sm-muted);
  pointer-events: none;
}

.sm-search__clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(28, 27, 27, 0.06);
  color: var(--sm-body);
  font-size: 0.75rem;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.sm-search__clear:hover {
  background-color: rgba(198, 40, 40, 0.12);
  color: var(--sm-primary);
}

.sm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sm-filter {
  padding: 10px 20px;
  border: 1px solid var(--sm-border);
  border-radius: 999px;
  background-color: #fff;
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sm-body);
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.sm-filter:hover {
  border-color: var(--sm-secondary);
  color: var(--sm-secondary);
}

.sm-filter.is-active {
  background-color: var(--sm-primary);
  border-color: var(--sm-primary);
  color: #fff;
}

.sm-library__count {
  margin: 1.5rem 0 0;
  font-family: var(--sm-font-ui);
  font-size: 0.9375rem;
  color: var(--sm-muted);
}

/* --------------------------------------------------------------------------
   Article cards
   -------------------------------------------------------------------------- */
.sm-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 1.25rem;
}

.sm-card-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
}

.sm-card {
  height: 100%;
}

.sm-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--sm-border);
  border-radius: 20px;
  background-color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sm-card__link:hover {
  transform: translateY(-4px);
  border-color: var(--sm-border-warm);
  box-shadow: 0 18px 38px rgba(28, 27, 27, 0.1);
}

/* No artwork per article, so the category icon carries the card visually */
.sm-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sm-peach) 0%, rgba(246, 145, 14, 0.22) 100%);
  color: var(--sm-primary);
  font-size: 2.5rem;
}

.sm-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.sm-card__tag {
  padding: 5px 12px;
  border-radius: 999px;
  background-color: rgba(198, 40, 40, 0.1);
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sm-primary);
}

.sm-card__time {
  font-family: var(--sm-font-ui);
  font-size: 0.8125rem;
  color: var(--sm-muted);
}

.sm-card__title {
  margin: 0 0 10px;
  font-family: var(--sm-font-body);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.4;
  color: var(--sm-ink);
}

.sm-card__excerpt {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sm-body);
}

/* Pushed down so the footer row lines up across cards of different heights */
.sm-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--sm-border);
}

.sm-card__date {
  font-family: var(--sm-font-ui);
  font-size: 0.8125rem;
  color: var(--sm-muted);
}

.sm-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sm-primary);
}

.sm-card__more i {
  transition: transform 0.18s ease;
}

.sm-card__link:hover .sm-card__more i {
  transform: translateX(4px);
}

/* Empty search result */
.sm-empty {
  padding: 4rem 1.5rem;
  text-align: center;
}

.sm-empty > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background-color: var(--sm-peach);
  color: var(--sm-primary);
  font-size: 1.75rem;
}

.sm-empty h1,
.sm-empty h2 {
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--sm-ink);
}

.sm-empty p {
  max-width: 460px;
  margin: 0.75rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sm-body);
}

/* --------------------------------------------------------------------------
   Article detail
   -------------------------------------------------------------------------- */
/* Copy on the left, the category tile on the right; the tile drops under the
   copy below 992px where there is no width for two columns */
.sm-article__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 48px;
  align-items: center;
  margin-top: 1.5rem;
}

.sm-article__hero-copy {
  min-width: 0;
}

.sm-page-hero--article .sm-page-hero__title {
  max-width: 900px;
}

.sm-article__tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: rgba(198, 40, 40, 0.1);
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sm-primary);
}

.sm-article__title {
  margin-top: 1rem;
}

.sm-article__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sm-border-warm);
  font-family: var(--sm-font-ui);
  font-size: 0.9375rem;
  color: var(--sm-muted);
}

.sm-article__meta strong {
  display: block;
  font-size: 1rem;
  color: var(--sm-ink);
}

.sm-article__byline-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sm-article__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba(246, 145, 14, 0.18);
  color: var(--sm-secondary);
  font-size: 1.125rem;
}

/* The listing card's artwork tile, scaled up: same gradient and same icon, so
   the page a card opens is recognisably the card */
.sm-article__art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: 32px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--sm-border-amber);
  border-radius: 24px;
  background:
    radial-gradient(120% 120% at 78% 12%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--sm-peach) 0%, rgba(246, 145, 14, 0.24) 100%);
  box-shadow: 0 24px 48px rgba(28, 27, 27, 0.08);
  overflow: hidden;
}

/* Two faint rings behind the icon — depth without another image to load */
.sm-article__art::before,
.sm-article__art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(198, 40, 40, 0.12);
}

.sm-article__art::before {
  width: 58%;
  aspect-ratio: 1;
}

.sm-article__art::after {
  width: 82%;
  aspect-ratio: 1;
  border-color: rgba(198, 40, 40, 0.07);
}

.sm-article__art-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 28px;
  background-color: #fff;
  color: var(--sm-primary);
  font-size: 2.75rem;
  box-shadow: 0 14px 30px rgba(198, 40, 40, 0.14);
}

.sm-article__art-cap {
  position: relative;
  padding: 6px 16px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.78);
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sm-brown);
}

@media (max-width: 991.98px) {
  .sm-article__hero {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .sm-article__art {
    max-width: 420px;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 575.98px) {
  .sm-article__art {
    aspect-ratio: auto;
    padding: 28px 20px;
  }

  .sm-article__art-icon {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    font-size: 2.25rem;
  }
}

/* Long-form body — one measure, generous leading */
.sm-prose {
  max-width: 760px;
  margin-top: 3rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--sm-body);
}

.sm-prose h2 {
  margin: 2.5rem 0 0.85rem;
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  color: var(--sm-ink);
}

.sm-prose h2:first-child {
  margin-top: 0;
}

.sm-prose p {
  margin: 0 0 1.25rem;
}

.sm-prose ul {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
}

.sm-prose li {
  margin-bottom: 0.6rem;
  padding-left: 0.35rem;
}

.sm-prose li::marker {
  color: var(--sm-secondary);
}

.sm-prose strong {
  color: var(--sm-ink);
}

.sm-article__foot {
  max-width: 760px;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--sm-border);
}

.sm-article__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 1rem;
  color: var(--sm-primary);
  text-decoration: none;
}

.sm-article__back i {
  transition: transform 0.18s ease;
}

.sm-article__back:hover i {
  transform: translateX(-4px);
}

.sm-article__next-title {
  margin: 0 0 1.5rem;
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  color: var(--sm-ink);
}

/* --------------------------------------------------------------------------
   Closing CTA band + the home page's "see all questions" link
   -------------------------------------------------------------------------- */
.sm-cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  border: 1px solid var(--sm-border-warm);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--sm-peach) 0%, var(--sm-cream-warm) 100%);
}

.sm-cta-band h2 {
  margin: 0;
  font-family: var(--sm-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  color: var(--sm-ink);
}

.sm-cta-band p {
  max-width: 560px;
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--sm-body);
}

.sm-cta-band .sm-btn {
  flex: 0 0 auto;
  gap: 10px;
}

.sm-faq__more {
  display: flex;
  justify-content: center;
  margin: 2rem 0 0;
}

.sm-faq__more .sm-btn {
  flex: 0 0 auto; /* beats the mobile "flex: 1 1 auto" on .sm-btn-secondary */
  gap: 10px;
  min-height: 54px;
  min-width: 0;
  padding-inline: 2rem;
  font-size: 1.0625rem;
}

.sm-faq__more i {
  transition: transform 0.18s ease;
}

.sm-faq__more .sm-btn:hover i {
  transform: translateX(4px);
}

@media (max-width: 1199.98px) {
  .sm-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .sm-card-grid,
  .sm-card-grid--two {
    grid-template-columns: 1fr;
  }

  .sm-page-hero {
    padding-block: 2.5rem 2rem;
  }

  .sm-library {
    flex-direction: column;
    /* A wrapping COLUMN container sizes each line to its widest item, so the
       search input's min-content width leaked out past the viewport */
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .sm-search {
    flex: 0 0 auto; /* basis is vertical once .sm-library stacks */
    max-width: none;
  }

  /* Chips scroll sideways rather than stacking into four rows */
  .sm-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .sm-filters::-webkit-scrollbar {
    display: none;
  }

  .sm-filter {
    flex: 0 0 auto;
  }

  .sm-cta-band .sm-btn {
    width: 100%;
  }
}

/* Several components here set an explicit display, which would otherwise beat
   the browser's default rule for [hidden] and leave them visible */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Article detail — body left, "Read next" in a sticky right rail
   -------------------------------------------------------------------------- */
.sm-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}

.sm-article__main {
  min-width: 0;
}

/* align-items:start keeps the rail its own height so sticky has room to work */
.sm-article__side {
  position: sticky;
  top: 2rem;
}

.sm-article__side-inner {
  padding: 24px;
  border: 1px solid var(--sm-border-warm);
  border-radius: 20px;
  background: linear-gradient(160deg, var(--sm-cream-warm) 0%, var(--sm-surface) 100%);
}

.sm-article__side .sm-article__next-title {
  margin-bottom: 1rem;
  font-size: 1.375rem;
}

.sm-card-grid--rail {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 0;
}

/* Rail cards carry title + meta only; the excerpt and artwork are noise here */
.sm-card--compact .sm-card__link {
  padding: 16px 18px;
  border-radius: 14px;
}

.sm-card--compact .sm-card__meta {
  margin-bottom: 8px;
}

.sm-card--compact .sm-card__title {
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 0;
}

.sm-card--compact .sm-card__excerpt,
.sm-card--compact .sm-card__foot {
  display: none;
}

.sm-article__side-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-family: var(--sm-font-ui);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--sm-primary);
  text-decoration: none;
}

.sm-article__side-cta i {
  transition: transform 0.18s ease;
}

.sm-article__side-cta:hover i {
  transform: translateX(4px);
}

@media (max-width: 1199.98px) {
  .sm-article__layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
  }
}

@media (max-width: 991.98px) {
  /* Not enough width for a rail — it becomes a normal block under the article */
  .sm-article__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sm-article__side {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Responsive corrections found by measuring real layout at every breakpoint
   -------------------------------------------------------------------------- */

/* An <input> refuses to shrink below its default 20-character min-content
   width. As a flex item in .sm-library that floor pushed the whole search
   row wider than the phone viewport. */
.sm-search,
.sm-search input,
.sm-filters {
  min-width: 0;
}

@media (max-width: 767.98px) {
  /* --sm-gutter drops to 20px here, but Bootstrap's g-5 rows pull -24px of
     negative margin, so every .row hung 4px off both edges of the page */
  .sm-shell .row {
    --bs-gutter-x: 2.5rem;
  }
}

@media (max-width: 575.98px) {
  /* The label is long; on a narrow phone it needs the padding back */
  .sm-faq__more .sm-btn {
    padding-inline: 1.25rem;
    font-size: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Mobile navigation drawer

   Below 992px the nav panel leaves the flow and becomes a sheet that covers
   70% of the screen from the right. Bootstrap's .collapse rules are overridden
   rather than removed, so navbar-expand-lg still owns the desktop row.
   -------------------------------------------------------------------------- */
.sm-drawer__close {
  display: none;
}

.sm-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: rgba(28, 27, 27, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.sm-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 991.98px) {
  /* backdrop-filter makes an element the containing block for its fixed
     descendants, which pinned the drawer inside the 86px navbar instead of the
     viewport. The bar is opaque at this size anyway, so the blur buys nothing. */
  .sm-navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: #fff;
  }

  /* Beats Bootstrap's `.collapse:not(.show) { display: none }` — the sheet is
     always in the DOM and always laid out, it just waits off-screen */
  .sm-navbar .sm-drawer.collapse:not(.show) {
    display: block;
  }

  .sm-navbar .sm-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1045;
    width: 70vw;
    min-width: 264px;
    max-width: 420px;
    height: 100%;
    padding: 24px 24px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--sm-surface);
    box-shadow: -20px 0 48px rgba(28, 27, 27, 0.18);
    transform: translateX(101%); /* 101% clears the shadow too */
    /* visibility, not just the transform: parked off-screen its links would
       still take keyboard focus, and some browsers count them as overflow */
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
      visibility 0.3s ease;
  }

  .sm-navbar .sm-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .sm-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 1px solid var(--sm-border);
    border-radius: 50%;
    background-color: var(--sm-cream);
    color: var(--sm-ink);
    font-size: 0.9375rem;
    transition: background-color 0.18s ease, color 0.18s ease;
  }

  .sm-drawer__close:hover {
    background-color: var(--sm-peach);
    color: var(--sm-primary);
  }

  /* The nav list is centred for the desktop row; in a sheet it reads left */
  .sm-navbar .sm-drawer .navbar-nav {
    margin: 8px 0 0 !important;
    align-items: stretch;
  }

  .sm-navbar .sm-drawer .nav-item {
    border-bottom: 1px solid var(--sm-border);
  }

  .sm-navbar .sm-drawer .sm-nav-link {
    padding-block: 14px;
    width: 100%;
    justify-content: space-between;
  }

  .sm-navbar .sm-drawer .sm-btn-gradient {
    width: 100%;
    margin-top: 20px;
  }

  /* The page behind must not scroll under the open sheet */
  body.sm-drawer-open {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-navbar .sm-drawer,
  .sm-drawer-backdrop {
    transition: none;
  }
}

@media (max-width: 991.98px) {
  /* The side-slide reveals translate 56px horizontally. Once these blocks go
     full width that hangs off the page, and a phone widens its layout viewport
     to fit it — which drags the fixed drawer off-screen with it. A fade-up
     reads better at this size anyway. */
  .sm-reveal--left,
  .sm-reveal--right {
    --sm-reveal-from: translateY(28px);
  }
}