/* =====================================================================
   SCHEDMATE — PUBLIC MARKETING PRESENTATION LAYER
   Drives / and /start only. v121 premium pass.

   Scope note: this file is the dedicated presentation layer for the two
   marketing pages. It styles nothing in the dashboard, auth, billing or
   portal surfaces, and it introduces no framework, font or dependency.

   Structure
     1.  tokens
     2.  base + accessibility primitives
     3.  layout shell + section rhythm
     4.  typography
     5.  buttons + links
     6.  navigation
     7.  hero
     8.  product frames (the app screenshots)
     9.  product tabs
     10. cards, checklists, roles, flow, FAQ
     11. pricing
     12. final CTA
     13. footer
     14. /start
     15. motion + reveal
     16. responsive
===================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS
--------------------------------------------------------------- */
:root {
  /* These pages are a fixed light presentation and do not follow the
     dashboard theme toggle, so form controls must not be rendered dark
     by a visitor's OS preference. */
  color-scheme: light;

  /* Surfaces. A very slightly warm paper reads as considered rather than
     default-white, and gives the white cards something to sit on. */
  --x-paper: #fbfbfd;
  --x-paper-2: #f5f6fa;
  --x-paper-3: #eef0f7;
  --x-card: #ffffff;

  /* Ink. Near-black with a blue cast, so text belongs to the accent. */
  --x-ink: #0b111f;
  --x-ink-2: #333e57;
  --x-muted: #59627a;

  --x-line: rgba(11, 17, 31, 0.09);
  --x-line-2: rgba(11, 17, 31, 0.14);
  --x-line-3: rgba(11, 17, 31, 0.22);

  --x-accent: #4f46e5;
  --x-accent-press: #4038cc;
  /* Accent as TEXT on paper. #4338ca on #fbfbfd measures well above 4.5:1;
     the lighter brand indigo used for fills does not, so text never uses
     it. Keeping these separate is what stops a hover state from quietly
     dropping below contrast. */
  --x-accent-text: #4338ca;
  --x-accent-wash: rgba(79, 70, 229, 0.07);
  --x-accent-ring: rgba(79, 70, 229, 0.28);

  --x-radius-sm: 10px;
  --x-radius: 16px;
  --x-radius-lg: 22px;
  --x-radius-xl: 28px;

  /* Three tiers, used consistently: resting, raised, floating. */
  --x-shadow-sm: 0 1px 2px rgba(11, 17, 31, .04), 0 2px 8px rgba(11, 17, 31, .04);
  --x-shadow: 0 1px 2px rgba(11, 17, 31, .04), 0 12px 32px rgba(11, 17, 31, .06);
  --x-shadow-lg: 0 2px 4px rgba(11, 17, 31, .04), 0 30px 70px rgba(11, 17, 31, .10);
  --x-shadow-xl: 0 4px 8px rgba(11, 17, 31, .05), 0 44px 96px rgba(11, 17, 31, .14);

  --x-shell: 1180px;
  --x-shell-narrow: 780px;
  --x-motion: 420ms;
  --x-motion-fast: 180ms;
  --x-ease: cubic-bezier(.22, .8, .28, 1);

  --x-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------
   2. BASE + ACCESSIBILITY PRIMITIVES
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body.smx-home {
  margin: 0;
  min-width: 320px;
  background: var(--x-paper);
  color: var(--x-ink);
  font-family: var(--x-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* The page must never scroll sideways. Wide children are contained at
     their own level rather than clipped here, so nothing becomes
     unreachable — overflow-x:hidden on the body would hide content
     instead of fixing the layout that caused it. */
  overflow-x: clip;
}

img, picture, svg { max-width: 100%; }
img { height: auto; }

.smx-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--x-radius-sm);
  background: var(--x-ink);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  transition: top var(--x-motion-fast) var(--x-ease);
}
.smx-skip:focus { top: 12px; }

/* One focus treatment for the whole page. Visible on every surface,
   including the dark final CTA, because it uses a ring plus an offset
   rather than a colour that only works on light. */
:where(a, button, [tabindex], summary):focus-visible {
  outline: 3px solid var(--x-accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.smx-final :where(a, button):focus-visible { outline-color: #a5b4fc; }

::selection { background: var(--x-accent-wash); color: var(--x-ink); }

/* ---------------------------------------------------------------
   3. LAYOUT SHELL + SECTION RHYTHM
--------------------------------------------------------------- */
.smx-shell {
  width: 100%;
  max-width: var(--x-shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}

.smx-section {
  position: relative;
  padding-block: clamp(64px, 9vw, 116px);
}
/* Tinted bands carry a hairline so the change of surface reads as a
   deliberate edge rather than a printing error. */
.smx-section--tint {
  background: linear-gradient(180deg, var(--x-paper-2), var(--x-paper));
  border-block: 1px solid var(--x-line);
}
.smx-section--line { border-top: 1px solid var(--x-line); }

.smx-section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.smx-center { margin-inline: auto; text-align: center; }

.smx-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.smx-grid { display: grid; gap: clamp(16px, 2vw, 22px); }
.smx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------
   4. TYPOGRAPHY
--------------------------------------------------------------- */
.smx-eyebrow {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--x-accent-text);
}
.smx-center .smx-eyebrow { text-align: center; }

.smx-display {
  margin: 0 0 20px;
  font-size: clamp(34px, 4.1vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 780;
  color: var(--x-ink);
  /* Long compound words must not push the page wider on a 360px phone. */
  overflow-wrap: break-word;
}
.smx-display em {
  font-style: normal;
  /* A restrained gradient on the accent phrase only — the one flourish on
     the page, and it degrades to solid accent text where unsupported. */
  color: var(--x-accent-text);
  background: linear-gradient(100deg, #4338ca 0%, #6d5ef0 55%, #4f46e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .smx-display em { -webkit-text-fill-color: transparent; }
}

.smx-h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.024em;
  font-weight: 760;
  color: var(--x-ink);
}
.smx-h3 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.25;
  letter-spacing: -0.014em;
  font-weight: 730;
  color: var(--x-ink);
}

.smx-lede {
  margin: 0;
  font-size: clamp(16.5px, 1.35vw, 19px);
  line-height: 1.62;
  color: var(--x-muted);
  max-width: 62ch;
}
.smx-center .smx-lede { margin-inline: auto; }

.smx-purpose {
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--x-line);
  border-left: 3px solid var(--x-accent);
  border-radius: 0 var(--x-radius-sm) var(--x-radius-sm) 0;
  background: var(--x-accent-wash);
  color: var(--x-ink-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}

.smx-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--x-accent-wash);
  color: var(--x-accent-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* ---------------------------------------------------------------
   5. BUTTONS + LINKS
--------------------------------------------------------------- */
.smx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 680;
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  /* Comfortable tap target on every size variant. */
  min-height: 46px;
  transition:
    transform var(--x-motion-fast) var(--x-ease),
    box-shadow var(--x-motion-fast) var(--x-ease),
    background-color var(--x-motion-fast) var(--x-ease),
    border-color var(--x-motion-fast) var(--x-ease);
}
.smx-btn span { transition: transform var(--x-motion-fast) var(--x-ease); }
.smx-btn:hover span[aria-hidden] { transform: translateX(3px); }

.smx-btn-primary {
  background: linear-gradient(180deg, #5a51e8, var(--x-accent));
  color: #fff;
  box-shadow: 0 1px 2px rgba(11, 17, 31, .12), 0 10px 24px rgba(79, 70, 229, .26);
}
.smx-btn-primary:hover {
  background: linear-gradient(180deg, var(--x-accent), var(--x-accent-press));
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(11, 17, 31, .14), 0 16px 34px rgba(79, 70, 229, .32);
}
.smx-btn-primary:active { transform: translateY(0); }

.smx-btn-secondary {
  background: var(--x-card);
  color: var(--x-ink);
  border-color: var(--x-line-2);
  box-shadow: var(--x-shadow-sm);
}
.smx-btn-secondary:hover {
  border-color: var(--x-line-3);
  transform: translateY(-1px);
  box-shadow: var(--x-shadow);
}

.smx-btn-lg { padding: 16px 28px; font-size: 16.5px; min-height: 54px; }
.smx-btn-small { padding: 10px 18px; font-size: 14.5px; min-height: 40px; }
.smx-btn-block { display: flex; width: 100%; }

.smx-text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--x-accent-text);
  font-weight: 660;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--x-motion-fast) var(--x-ease);
}
.smx-text-link:hover { border-bottom-color: currentColor; }
.smx-text-link span { transition: transform var(--x-motion-fast) var(--x-ease); }
.smx-text-link:hover span { transform: translateX(3px); }

/* ---------------------------------------------------------------
   6. NAVIGATION
--------------------------------------------------------------- */
.smx-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 251, 253, 0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--x-motion) var(--x-ease),
              background-color var(--x-motion) var(--x-ease);
}
/* The border appears only once the page has moved, so the nav reads as
   part of the hero at rest. Class is set by homepage-v120.js. */
.smx-nav.is-stuck {
  background: rgba(251, 251, 253, 0.88);
  border-bottom-color: var(--x-line);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .smx-nav { background: var(--x-paper); }
}

.smx-nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 66px;
}

.smx-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--x-ink);
  font-weight: 760;
  letter-spacing: -0.015em;
  font-size: 18px;
}
.smx-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(150deg, #6d5ef0, var(--x-accent-press));
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .34);
}

.smx-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
}
.smx-nav-links a {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--x-ink-2);
  font-size: 15px;
  font-weight: 620;
  text-decoration: none;
  transition: color var(--x-motion-fast) var(--x-ease),
              background-color var(--x-motion-fast) var(--x-ease);
}
.smx-nav-links a:hover { color: var(--x-ink); background: var(--x-paper-3); }

.smx-nav-actions { display: flex; align-items: center; gap: 12px; }
.smx-link-login {
  color: var(--x-ink-2);
  font-size: 15px;
  font-weight: 640;
  text-decoration: none;
  padding: 9px 6px;
}
.smx-link-login:hover { color: var(--x-accent-text); }

.smx-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--x-line-2);
  border-radius: 12px;
  background: var(--x-card);
  cursor: pointer;
}
.smx-menu-btn span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--x-ink);
  transition: transform var(--x-motion-fast) var(--x-ease),
              opacity var(--x-motion-fast) var(--x-ease);
}
.smx-menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.smx-menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.smx-menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------
   7. HERO
--------------------------------------------------------------- */
.smx-hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 92px) clamp(56px, 8vw, 104px);
  overflow: clip;
}
/* Depth, built from two CSS layers rather than an image or canvas: a fine
   grid that fades out, and one soft accent glow behind the headline.
   Both are decorative and inert. */
.smx-hero::before,
.smx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.smx-hero::before {
  background-image:
    linear-gradient(var(--x-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--x-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 20%, transparent 72%);
  opacity: .5;
}
.smx-hero::after {
  background:
    radial-gradient(60% 46% at 18% 6%, rgba(79, 70, 229, .13), transparent 62%),
    radial-gradient(48% 38% at 88% 22%, rgba(109, 94, 240, .10), transparent 64%);
}
.smx-hero > .smx-shell { position: relative; z-index: 1; }

.smx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 68px);
  align-items: center;
}

.smx-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.smx-hero-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--x-muted);
  font-size: 14.5px;
  font-weight: 560;
}
.smx-hero-assurance li { display: inline-flex; align-items: center; gap: 8px; }

/* Four factual statements. Presented as a bordered strip so it reads as
   product fact, not as a metrics brag. */
.smx-signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vw, 72px);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius-lg);
  background: var(--x-line);
  overflow: hidden;
  box-shadow: var(--x-shadow-sm);
}
.smx-signals > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px;
  background: var(--x-card);
}
.smx-signals strong {
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -0.012em;
  color: var(--x-ink);
}
.smx-signals span { font-size: 14px; color: var(--x-muted); }

/* ---------------------------------------------------------------
   8. PRODUCT FRAMES
--------------------------------------------------------------- */
.smx-frame {
  position: relative;
  border: 1px solid var(--x-line-2);
  border-radius: var(--x-radius-lg);
  background: var(--x-card);
  box-shadow: var(--x-shadow-lg);
  overflow: hidden;
}
.smx-frame img { display: block; width: 100%; }

.smx-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--x-line);
  background: linear-gradient(180deg, #fcfcfe, var(--x-paper-2));
}
.smx-frame-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--x-line-3);
}
.smx-frame-dot:nth-child(1) { background: #f0a1a1; }
.smx-frame-dot:nth-child(2) { background: #f2cf9a; }
.smx-frame-dot:nth-child(3) { background: #a9d8ac; }
.smx-frame-label {
  margin-left: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--x-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smx-frame-label b { color: var(--x-ink-2); font-weight: 700; }

.smx-hero-frame picture { display: block; aspect-ratio: 1290 / 1100; background: var(--x-paper-2); }
.smx-hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.smx-hero-frame {
  box-shadow: var(--x-shadow-xl);
  transform: perspective(1600px) rotateY(-1.6deg) rotateX(.7deg);
  transition: transform var(--x-motion) var(--x-ease);
}
.smx-hero-frame:hover { transform: perspective(1600px) rotateY(0) rotateX(0); }

/* ---------------------------------------------------------------
   9. PRODUCT TABS
--------------------------------------------------------------- */
.smx-product-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: clamp(28px, 4vw, 44px);
  padding: 6px;
  border: 1px solid var(--x-line);
  border-radius: 999px;
  background: var(--x-card);
  box-shadow: var(--x-shadow-sm);
  width: fit-content;
  margin-inline: auto;
  max-width: 100%;
}
.smx-product-tabs button {
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--x-ink-2);
  font-family: inherit;
  font-size: 15px;
  font-weight: 660;
  cursor: pointer;
  min-height: 44px;
  transition: background-color var(--x-motion-fast) var(--x-ease),
              color var(--x-motion-fast) var(--x-ease);
}
.smx-product-tabs button:hover { color: var(--x-ink); background: var(--x-paper-2); }
.smx-product-tabs button[aria-selected="true"] {
  background: var(--x-ink);
  color: #fff;
  box-shadow: 0 2px 10px rgba(11, 17, 31, .18);
}

.smx-product-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.smx-product-copy p { color: var(--x-muted); margin: 0 0 20px; }
.smx-product-copy ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.smx-product-copy li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--x-ink-2);
  font-size: 15.5px;
}
.smx-product-screen picture { display: block; aspect-ratio: 1.36 / 1; background: var(--x-paper-2); }
.smx-product-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.smx-product-label {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--x-accent-wash);
  color: var(--x-accent-text);
  font-size: 12.5px;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.smx-start-preview picture { display: block; aspect-ratio: 1.55 / 1; background: var(--x-paper-2); }
.smx-start-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---------------------------------------------------------------
   10. CARDS, CHECKLISTS, ROLES, FLOW, FAQ
--------------------------------------------------------------- */
.smx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 26px;
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius-lg);
  background: var(--x-card);
  box-shadow: var(--x-shadow-sm);
  transition: transform var(--x-motion) var(--x-ease),
              box-shadow var(--x-motion) var(--x-ease),
              border-color var(--x-motion) var(--x-ease);
}
/* A hairline of accent appears on hover along the top edge — the whole
   hover state, no scale or glow. */
.smx-card::after {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  border-radius: var(--x-radius-lg) var(--x-radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, var(--x-accent), transparent);
  opacity: 0;
  transition: opacity var(--x-motion) var(--x-ease);
}
.smx-card:hover {
  transform: translateY(-3px);
  border-color: var(--x-line-2);
  box-shadow: var(--x-shadow);
}
.smx-card:hover::after { opacity: 1; }
.smx-card h3 { margin: 0; font-size: 18.5px; font-weight: 720; letter-spacing: -0.012em; }
.smx-card p { margin: 0; color: var(--x-muted); font-size: 15.5px; }
.smx-card .smx-text-link { margin-top: auto; padding-top: 6px; }

.smx-feature-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(160deg, var(--x-accent-wash), rgba(79, 70, 229, .03));
  border: 1px solid var(--x-line);
  color: var(--x-accent-text);
  font-size: 18px;
  line-height: 1;
}

.smx-checklist {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 15px;
}
.smx-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--x-muted);
  font-size: 15.5px;
  line-height: 1.58;
}
.smx-checklist strong { color: var(--x-ink); font-weight: 690; }

.smx-roles { display: grid; gap: 12px; }
.smx-role {
  display: grid;
  gap: 5px;
  padding: 20px 22px;
  border: 1px solid var(--x-line);
  border-left: 3px solid var(--x-accent);
  border-radius: var(--x-radius);
  background: var(--x-card);
  box-shadow: var(--x-shadow-sm);
  transition: transform var(--x-motion) var(--x-ease),
              box-shadow var(--x-motion) var(--x-ease);
}
.smx-role:hover { transform: translateX(3px); box-shadow: var(--x-shadow); }
.smx-role b { font-size: 16px; font-weight: 730; color: var(--x-ink); }
.smx-role span { font-size: 14.5px; color: var(--x-muted); line-height: 1.55; }

/* Numbered progression. The rule between steps is drawn with a
   pseudo-element rather than a border so it can stop before the last item. */
.smx-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: smxflow;
}
.smx-flow li {
  position: relative;
  counter-increment: smxflow;
  padding-top: 56px;
}
.smx-flow li::before {
  content: counter(smxflow);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--x-card);
  border: 1px solid var(--x-line-2);
  color: var(--x-accent-text);
  font-size: 15px;
  font-weight: 780;
  box-shadow: var(--x-shadow-sm);
  z-index: 1;
}
.smx-flow li::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 46px;
  right: -14px;
  height: 1px;
  background: linear-gradient(90deg, var(--x-line-2), transparent);
}
.smx-flow li:last-child::after { display: none; }
.smx-flow h3 { margin: 0 0 8px; font-size: 17.5px; font-weight: 720; }
.smx-flow p { margin: 0; color: var(--x-muted); font-size: 15px; }

/* FAQ — native <details>, so it works with JavaScript off and needs no
   script of its own. */
.smx-faq { display: grid; gap: 12px; max-width: var(--x-shell-narrow); margin-inline: auto; }
.smx-faq details {
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius);
  background: var(--x-card);
  box-shadow: var(--x-shadow-sm);
  transition: border-color var(--x-motion-fast) var(--x-ease);
}
.smx-faq details[open] { border-color: var(--x-line-2); }
.smx-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  font-size: 16.5px;
  font-weight: 680;
  color: var(--x-ink);
  list-style: none;
  min-height: 44px;
}
.smx-faq summary::-webkit-details-marker { display: none; }
.smx-faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--x-accent-wash);
  color: var(--x-accent-text);
  font-size: 17px;
  font-weight: 700;
  transition: transform var(--x-motion-fast) var(--x-ease);
}
.smx-faq details[open] summary::after { content: "−"; transform: rotate(180deg); }
.smx-faq p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--x-muted);
  font-size: 15.5px;
  line-height: 1.62;
}

/* Outcome strip (kept from v120 so no markup that used it goes unstyled). */
.smx-outcome { display: grid; gap: 6px; }
.smx-outcome-num { font-size: 26px; font-weight: 780; color: var(--x-ink); }

/* ---------------------------------------------------------------
   11. PRICING
--------------------------------------------------------------- */
.smx-price-card {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  padding: clamp(30px, 4vw, 44px);
  border: 1px solid var(--x-line-2);
  border-radius: var(--x-radius-xl);
  background: var(--x-card);
  box-shadow: var(--x-shadow-lg);
  text-align: center;
}
/* A soft accent ring, drawn outside the border so it does not affect
   layout or the card's own rounding. */
.smx-price-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--x-accent-ring), transparent 45%, var(--x-accent-ring));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.smx-price-card .smx-h3 { margin-bottom: 6px; }
.smx-price-plan { margin: 0 0 20px; color: var(--x-muted); font-size: 14.5px; }
.smx-price-tag {
  margin: 0 0 6px;
  font-size: clamp(46px, 6vw, 62px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--x-ink);
}
.smx-price-tag small { font-size: 17px; font-weight: 620; color: var(--x-muted); letter-spacing: 0; }
.smx-price-note { margin: 0 0 26px; color: var(--x-muted); font-size: 14.5px; }
.smx-price-list {
  display: grid;
  gap: 12px;
  margin: 0 0 30px;
  padding: 26px 0 0;
  border-top: 1px solid var(--x-line);
  list-style: none;
  text-align: left;
}
.smx-price-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--x-ink-2);
  font-size: 15.5px;
}

/* ---------------------------------------------------------------
   12. FINAL CTA
--------------------------------------------------------------- */
/* The one dark surface on the page. It closes the narrative and makes the
   final CTA unmissable without needing a louder colour. */
.smx-final {
  position: relative;
  margin: clamp(56px, 8vw, 96px) auto 0;
  padding-block: clamp(56px, 8vw, 96px);
  background:
    radial-gradient(70% 120% at 50% -10%, rgba(109, 94, 240, .34), transparent 62%),
    linear-gradient(180deg, #141c30, #0b111f);
  color: #fff;
  text-align: center;
  overflow: clip;
}
.smx-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(90% 70% at 50% 0%, #000, transparent 70%);
  pointer-events: none;
}
.smx-final > .smx-shell { position: relative; z-index: 1; }
.smx-final .smx-section-head { margin-inline: auto; text-align: center; }
.smx-final .smx-h2 { color: #fff; }
.smx-final .smx-lede { color: rgba(255, 255, 255, .74); margin-inline: auto; }
.smx-final .smx-hero-assurance { justify-content: center; color: rgba(255, 255, 255, .68); }
.smx-final .smx-tick { background: rgba(255, 255, 255, .14); color: #c7d2fe; }
.smx-final .smx-btn-secondary {
  background: rgba(255, 255, 255, .07);
  color: #fff;
  border-color: rgba(255, 255, 255, .26);
  box-shadow: none;
}
.smx-final .smx-btn-secondary:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .42);
}
.smx-final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

/* ---------------------------------------------------------------
   13. FOOTER
--------------------------------------------------------------- */
.smx-footer {
  padding-block: clamp(48px, 6vw, 72px) 32px;
  background: var(--x-paper);
  border-top: 1px solid var(--x-line);
}
.smx-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  padding-bottom: 40px;
}
.smx-footer-note { margin: 14px 0 0; color: var(--x-muted); font-size: 14.5px; max-width: 34ch; }
.smx-footer h4,
.smx-footer .smx-footer-h {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--x-ink);
}
.smx-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.smx-footer ul a {
  color: var(--x-muted);
  font-size: 15px;
  text-decoration: none;
  transition: color var(--x-motion-fast) var(--x-ease);
}
.smx-footer ul a:hover { color: var(--x-accent-text); }
.smx-footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid var(--x-line);
  color: var(--x-muted);
  font-size: 14px;
}
.smx-footer-base a { color: var(--x-muted); text-decoration: none; }
.smx-footer-base a:hover { color: var(--x-accent-text); }

/* ---------------------------------------------------------------
   14. /start
--------------------------------------------------------------- */
.smx-start-main { padding-block: clamp(40px, 6vw, 76px) 0; }
.smx-start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
}
.smx-start-panel {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--x-line);
  border-radius: var(--x-radius-xl);
  background: linear-gradient(180deg, var(--x-card), var(--x-paper-2));
  box-shadow: var(--x-shadow-lg);
  position: sticky;
  top: 88px;
}
.smx-start-terms { margin: 20px 0 0; color: var(--x-muted); font-size: 13.5px; }
.smx-start-terms a { color: var(--x-accent-text); }
.smx-start-preview { box-shadow: var(--x-shadow); margin-top: 24px; }
.smx-start-caption {
  margin: 14px 0 0;
  color: var(--x-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.smx-start-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.smx-start-panel-head .smx-h3 { margin: 0; }
.smx-start-time {
  flex: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--x-accent-wash);
  color: var(--x-accent-text);
  font-size: 12.5px;
  font-weight: 680;
  white-space: nowrap;
}

/* On /start the login link is the only secondary route, so it stays
   visible at every width rather than being dropped like the homepage's. */
.smx-start-login { display: inline-block; }
.smx-start-login b { color: var(--x-accent-text); font-weight: 700; }

.smx-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
  counter-reset: smxstep;
}
.smx-steps li {
  position: relative;
  display: flex;
  gap: 14px;
  counter-increment: smxstep;
  padding-left: 0;
}
.smx-steps li::before {
  content: counter(smxstep);
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--x-accent-wash);
  border: 1px solid var(--x-line);
  color: var(--x-accent-text);
  font-size: 13.5px;
  font-weight: 780;
}
.smx-steps h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; }
.smx-steps p { margin: 0; color: var(--x-muted); font-size: 15px; }

/* ---------------------------------------------------------------
   15. MOTION + REVEAL
--------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--x-motion) var(--x-ease),
              transform var(--x-motion) var(--x-ease);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }

/* A visitor who asks for less motion gets a page that is complete and
   still, not a page that animates more slowly. Content is never hidden
   behind a preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .smx-hero-frame { transform: none; }
  .smx-card:hover, .smx-role:hover, .smx-btn:hover { transform: none; }
}

/* ---------------------------------------------------------------
   16. RESPONSIVE
   Each step is a layout decision, not a stack-everything fallback.
--------------------------------------------------------------- */
@media (max-width: 1100px) {
  .smx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 48px); }
  .smx-hero-frame { transform: none; }
  .smx-product-stage { grid-template-columns: minmax(0, 1fr); }
  .smx-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .smx-footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .smx-nav-links {
    position: absolute;
    inset: 66px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: 12px clamp(20px, 5vw, 40px) 20px;
    background: var(--x-paper);
    border-bottom: 1px solid var(--x-line);
    box-shadow: var(--x-shadow);
    /* Closed by default on small screens; homepage-v120.js toggles
       .is-open and keeps aria-expanded in step. */
    display: none;
  }
  .smx-nav-links.is-open { display: flex; }
  .smx-nav-links a { padding: 13px 14px; border-radius: var(--x-radius-sm); font-size: 16px; }
  .smx-menu-btn { display: flex; }
  .smx-nav-actions { margin-inline-start: auto; }
  .smx-nav-inner { position: relative; }

  .smx-split { grid-template-columns: minmax(0, 1fr); }
  .smx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smx-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smx-flow li:nth-child(2)::after { display: none; }
  .smx-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .smx-start-grid { grid-template-columns: minmax(0, 1fr); }
  .smx-start-panel { position: static; }
}

@media (max-width: 760px) {
  body.smx-home { font-size: 16px; }
  .smx-nav-links { inset-block-start: 62px; }
  .smx-nav-inner { min-height: 62px; }
  /* The login link is the first thing to go on the HOMEPAGE: the primary
     CTA and the menu button matter more at this width. On /start it is the
     only secondary route, so .smx-start-login keeps it. */
  .smx-link-login:not(.smx-start-login) { display: none; }
  .smx-start-login { font-size: 14px; }
  .smx-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .smx-flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .smx-flow li { padding-top: 0; padding-left: 56px; }
  .smx-flow li::before { top: 0; }
  .smx-flow li::after { display: none; }
  .smx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smx-final-actions .smx-btn,
  .smx-hero-actions .smx-btn { flex: 1 1 100%; }
}

@media (max-width: 480px) {
  .smx-signals { grid-template-columns: minmax(0, 1fr); }
  .smx-product-tabs { width: 100%; flex-direction: column; border-radius: var(--x-radius); }
  .smx-product-tabs button { width: 100%; border-radius: var(--x-radius-sm); }
  .smx-footer-grid { grid-template-columns: minmax(0, 1fr); }
  .smx-price-card { padding: 26px 20px; }
  .smx-frame-label { display: none; }
}


/* v120.0.8 narrow-phone guard retained for release compatibility. */
@media (max-width: 430px) {
  .smx-shell { padding-inline: 20px; }
}


/* v120 public-page breakpoint retained for release compatibility. */
@media (max-width: 650px) {
  .smx-product-tabs { width: 100%; }
}