/* Submagic UI Kit — primitives under .sm-* namespace
 * Mirrors the modern Submagic design language (Home + Magic Clips, not the older tool pages).
 * Property values resolved from submagic.shared.min.css; class compositions from Webflow Designer.
 * Requires tokens.css + base.css loaded first.
 */

/* ============================================================
   LAYOUT
   ============================================================ */

.sm-container       { max-width: var(--sm-container-max); margin: 0 auto; padding: 0 var(--sm-space-4); }
.sm-container--wide { max-width: 1400px; }

.sm-section            { padding: var(--sm-space-8) var(--sm-space-4); position: relative; }
.sm-section--hero      { padding: 130px var(--sm-space-4) 50px; }
.sm-section--features  { padding: 80px var(--sm-space-4); }
.sm-section--small     { padding: 64px 5%; }
.sm-section--dark      { background: var(--sm-bg-dark); color: var(--sm-white); }

.sm-stack         { display: flex; flex-direction: column; gap: var(--sm-space-4); }
.sm-stack--tight  { gap: var(--sm-space-2); }
.sm-stack--loose  { gap: var(--sm-space-6); }

.sm-row       { display: flex; align-items: center; gap: var(--sm-space-3); flex-wrap: wrap; }
.sm-row--end  { justify-content: flex-end; }

/* ============================================================
   TYPOGRAPHY PRIMITIVES
   ============================================================ */

/* .sm-tagline — uppercase orange mini-label (Submagic .tagline). Used as section prelude. */
.sm-tagline {
  display: inline-block;
  margin: 0 0 var(--sm-space-3);
  color: var(--sm-brand);
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-tagline);
  font-weight: var(--sm-fw-semibold);
  letter-spacing: var(--sm-tracking-wide);
  line-height: var(--sm-lh-tight);
  text-transform: uppercase;
}

/* .sm-title — main/section title (mirrors .title.new). Use h1/h2 as the tag, .sm-title for style. */
.sm-title {
  margin: 0 0 var(--sm-space-5);
  font-family: var(--sm-font-display);
  font-size: var(--sm-fs-title);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--sm-lh-tight);
  letter-spacing: var(--sm-tracking-tight);
  color: var(--sm-fg-strong);
}
.sm-title--hero    { font-size: var(--sm-fs-hero); font-weight: var(--sm-fw-bold); }
.sm-title--heavy   { font-weight: var(--sm-fw-heavy); }
.sm-title--center  { text-align: center; margin-left: auto; margin-right: auto; }
.sm-title--left    { text-align: left; }
.sm-title--max-s   { max-width: 456px; }
.sm-title--max-m   { max-width: 550px; }
.sm-title--max-l   { max-width: 800px; }

/* .sm-highlight — inline orange accent inside a title. */
.sm-highlight { color: var(--sm-brand); }

/* .sm-subtitle — small-title primitive. Section sub-heading or card header. */
.sm-subtitle {
  margin: 0 0 var(--sm-space-3);
  font-family: var(--sm-font-display);
  font-size: var(--sm-fs-subtitle);
  font-weight: var(--sm-fw-semibold);
  line-height: var(--sm-lh-base);
  color: var(--sm-fg-strong);
}
.sm-subtitle--center { text-align: center; }
.sm-subtitle--left   { text-align: left; }

/* .sm-text — body paragraph. */
.sm-text {
  margin: 0 0 var(--sm-space-4);
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-body);
  line-height: var(--sm-lh-text);
  color: var(--sm-fg);
}
.sm-text--medium { font-size: var(--sm-fs-body-lg); line-height: var(--sm-lh-base); }
.sm-text--small  { font-size: var(--sm-fs-small); line-height: var(--sm-lh-tight); }
.sm-text--strong { color: var(--sm-fg-strong); font-weight: var(--sm-fw-semibold); }
.sm-text--center { text-align: center; margin-left: auto; margin-right: auto; }
.sm-text--left   { text-align: left; }
.sm-text--max-s  { max-width: 456px; }
.sm-text--max-m  { max-width: 550px; }

/* .sm-text-link — underlined link with orange hover. */
.sm-text-link {
  color: inherit;
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-body);   /* 14.4px — matches .text-link (1.2em × 12px body) */
  text-decoration: underline;
  transition: color var(--sm-duration-base) var(--sm-ease);
}
.sm-text-link:hover { color: var(--sm-brand); text-decoration: underline; }

/* ============================================================
   BUTTON (mirrors .primary-button.new — the modern signature CTA)
   Signature look = orange base + inner 2px dark stroke + inner white sheen + outer orange glow.
   All Submagic CTAs on the live homepage use the .new variant; base .primary-button is deprecated.
   ============================================================ */

.sm-btn {
  /* defaults = primary orange with signature glow */
  --_bg: var(--sm-brand);
  --_color: var(--sm-white);
  --_shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.12),
    inset 0 0 10px rgba(255, 255, 255, 0.75),
    0 5px 25px 5px rgba(255, 79, 1, 0.25);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm-space-2);
  padding: 0.625rem 1rem 0.625rem 1.125rem;
  border: 0;
  border-radius: 1rem;
  background: var(--_bg);
  color: var(--_color);
  box-shadow: var(--_shadow);

  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-btn);   /* 18px — matches .primary-button.new (1.5em × 12px body) */
  font-weight: var(--sm-fw-bold);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  transition: transform var(--sm-duration-slow) var(--sm-ease),
              background-color var(--sm-duration-base) var(--sm-ease),
              box-shadow var(--sm-duration-base) var(--sm-ease);
}
.sm-btn:hover                    { transform: scale(0.975); text-decoration: none; }
.sm-btn:focus-visible            { outline: none; box-shadow: var(--_shadow), var(--sm-focus-ring); }
.sm-btn:disabled,
.sm-btn[aria-busy="true"]        { opacity: 0.55; cursor: not-allowed; transform: none; }

.sm-btn--primary                 { /* defaults = orange with signature glow */ }

.sm-btn--secondary {
  --_bg: var(--sm-white);
  --_color: var(--sm-fg-strong);
  --_shadow: inset 0 0 0 1px var(--sm-gray-500);  /* visible outline (matches Submagic .secondary-button .gray border) */
}
.sm-btn--secondary:hover         { background: var(--sm-gray-100); }

.sm-btn--dark {
  --_bg: var(--sm-black);
  --_color: var(--sm-white);
  --_shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.sm-btn--ghost {
  --_bg: transparent;
  --_color: var(--sm-brand);
  --_shadow: none;
}
.sm-btn--ghost:hover             { background: var(--sm-brand-tint); }

/* Light button — mirrors .light-button (navbar outline, transparent, orange-tint hover). */
.sm-btn--light {
  --_bg: transparent;
  --_color: var(--sm-black);
  --_shadow: inset 0 0 0 1px rgba(153, 153, 153, 0.36);
  border-radius: 10px;
  padding: 0.5rem 1rem;
  font-size: var(--sm-fs-btn-light);   /* 13.8px — matches .light-button (1.15em × 12px body) */
  font-weight: var(--sm-fw-medium);
  transition: all var(--sm-duration-base) var(--sm-ease);
}
.sm-btn--light:hover {
  --_bg: rgba(255, 79, 1, 0.05);
  --_color: rgba(255, 79, 1, 0.9);
  --_shadow: inset 0 0 0 1px rgba(255, 79, 1, 0.49);
  transform: none;
}

.sm-btn--big    { padding: 0.9rem 1.5rem;  font-size: var(--sm-fs-btn-big); }
.sm-btn--small  { padding: 0.45rem 0.9rem; font-size: var(--sm-fs-btn-small); }
.sm-btn--full   { width: 100%; }

.sm-btn__label  { text-shadow: var(--sm-shadow-cta-text); }

/* ============================================================
   FORM (mirrors .text-field / .input)
   ============================================================ */

.sm-field {
  display: flex;
  flex-direction: column;
  gap: var(--sm-space-1);
  text-align: left;
  margin-bottom: var(--sm-space-4);
}

.sm-label {
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-small);
  font-weight: var(--sm-fw-semibold);
  color: var(--sm-fg-strong);
}

.sm-help {
  font-size: var(--sm-fs-micro);
  color: var(--sm-fg-muted);
}

.sm-input,
.sm-textarea,
.sm-select {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius-md);
  background: var(--sm-white);
  color: var(--sm-fg-strong);
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-small);
  line-height: 24px;
  letter-spacing: -0.006em;
  transition: border-color var(--sm-duration-fast) var(--sm-ease),
              box-shadow   var(--sm-duration-fast) var(--sm-ease);
}
.sm-input:focus,
.sm-textarea:focus,
.sm-select:focus {
  outline: none;
  border-color: var(--sm-brand);
  box-shadow: var(--sm-focus-ring);
}
.sm-input::placeholder,
.sm-textarea::placeholder { color: var(--sm-fg-muted); }

.sm-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--sm-lh-base);
  padding-top: 12px;
}

.sm-field--error .sm-input,
.sm-field--error .sm-textarea,
.sm-field--error .sm-select { border-color: var(--sm-danger); }

.sm-error {
  display: flex;
  align-items: center;
  gap: var(--sm-space-1);
  font-size: var(--sm-fs-small);
  color: var(--sm-danger);
  margin: 0;
}

/* ============================================================
   CARD
   ============================================================ */

.sm-card {
  background: var(--sm-white);
  border: 1px solid var(--sm-gray-200);
  border-radius: var(--sm-radius-lg);
  padding: var(--sm-space-5);
  box-shadow: var(--sm-shadow-sm);
}
.sm-card--elevated { box-shadow: var(--sm-shadow-lg); border-color: transparent; }
.sm-card--dark     { background: var(--sm-bg-dark); color: var(--sm-white); border-color: transparent; }
.sm-card--dark .sm-subtitle,
.sm-card--dark .sm-title { color: var(--sm-white); }
.sm-card--dark .sm-text  { color: rgba(255,255,255,0.8); }

/* .sm-card--feature — mirrors .feature-card.grey-border (homepage feature grid).
   Larger radius + triple-layer subtle shadow + shrink-hover. */
.sm-card--feature {
  border: 0;
  border-radius: 20px;
  padding: var(--sm-space-5);
  background: var(--sm-white);
  box-shadow:
    0 1px 2px rgba(112, 122, 143, 0.12),
    0 1px 2px rgba(81, 88, 103, 0.08),
    0 0 0 1px rgba(81, 88, 103, 0.10);
  transition: transform var(--sm-duration-slow) var(--sm-ease),
              background-color var(--sm-duration-slow) var(--sm-ease);
}
.sm-card--feature:hover {
  background: #f9fafb;
  transform: scale(0.975);
}

/* .sm-card--testimonial — mirrors .card.testimonial-card (homepage testimonial slider).
   Fixed min-height so slider rows align, 2em padding, soft 1px border. */
.sm-card--testimonial {
  min-height: 320px;
  border: 1px solid #e8e8e7;
  border-radius: 16px;
  padding: 2em;
  background: var(--sm-white);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

/* ============================================================
   FAQ (mirrors .accordion-item / .accordion-header)
   ============================================================ */

.sm-faq-item {
  margin-bottom: var(--sm-space-3);
}
.sm-faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sm-space-4);
  padding: 20px 30px;
  border: 1px solid #f1f1f1;
  border-radius: var(--sm-radius-lg);
  background: var(--sm-white);
  box-shadow: var(--sm-shadow-accordion);
  cursor: pointer;
  list-style: none;
  color: var(--sm-fg-strong);
  font-family: var(--sm-font-display);
  font-weight: var(--sm-fw-semibold);
  transition: padding-left var(--sm-duration-base) var(--sm-ease);
}
.sm-faq-summary::-webkit-details-marker { display: none; }
.sm-faq-summary::marker                  { content: ""; }
.sm-faq-item[open] .sm-faq-summary       { padding-left: 34px; }

.sm-faq-icon {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
  border: 2px solid var(--sm-brand);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sm-brand);
  font-weight: var(--sm-fw-bold);
  transition: transform var(--sm-duration-base) var(--sm-ease);
}
.sm-faq-item[open] .sm-faq-icon { transform: rotate(45deg); }

.sm-faq-content { padding: 0 30px 24px; color: var(--sm-fg); }
.sm-faq-content p:last-child { margin-bottom: 0; }

/* ============================================================
   SPINNER
   ============================================================ */

.sm-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sm-spin 0.75s linear infinite;
}
@keyframes sm-spin { to { transform: rotate(360deg); } }

/* ============================================================
   CHIP / BADGE
   ============================================================ */

.sm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sm-space-1);
  padding: 0.25em 0.75em;
  border-radius: var(--sm-radius-pill);
  background: var(--sm-gray-100);
  color: var(--sm-fg-strong);
  font-family: var(--sm-font-body);
  font-size: var(--sm-fs-micro);
  font-weight: var(--sm-fw-semibold);
}
.sm-chip--brand { background: var(--sm-brand-tint); color: var(--sm-brand); }
.sm-chip--dark  { background: var(--sm-gray-900);  color: var(--sm-white); }
.sm-chip--success { background: #d1fadf; color: #0f7e4f; }

/* ============================================================
   EMOJI ICON (mirrors .emoji-icon)
   ============================================================ */

.sm-emoji-icon { font-size: 30px; line-height: 1.4; }

/* ============================================================
   ON-DARK MODIFIER
   Apply .sm-on-dark to a container to recolor children for dark backgrounds
   (mirrors Submagic's .text-color-white / .small-title.text-color-white).
   ============================================================ */

.sm-on-dark                  { color: var(--sm-white); }
.sm-on-dark .sm-title,
.sm-on-dark .sm-subtitle     { color: var(--sm-white); }
.sm-on-dark .sm-text         { color: rgba(255,255,255,0.8); }
.sm-on-dark .sm-text-link    { color: rgba(255,255,255,0.8); }
.sm-on-dark .sm-text-link:hover { color: var(--sm-white); }

/* ============================================================
   PATTERNS (homepage composites — not primitives, reusable layouts)
   ============================================================ */

/* .sm-benefits-grid — mirrors .benefits-grid._3-steps.max-w-900.
   3-column stat/benefit row. Homepage uses it for "10× faster / +40% views / 80% cost".
   Collapses to 1 column under 768px. */
.sm-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.sm-benefits-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sm-benefits-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 767px) {
  .sm-benefits-grid,
  .sm-benefits-grid--2,
  .sm-benefits-grid--4 { grid-template-columns: 1fr; }
}

/* .sm-benefit-card — cell inside .sm-benefits-grid. Icon + heading + optional caption, centered. */
.sm-benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sm-space-3);
  padding: var(--sm-space-5) var(--sm-space-4);
}
.sm-benefit-card__icon {
  width: 2em;
  height: 2em;
  flex-shrink: 0;
}

/* .sm-hero-cta — mirrors .container.cta-container.vertical-center.new.
   Signature hero CTA: 24px radius, gradient bg, 8px inset white frame, outer dark hairline.
   Creates a "white-framed card with gradient interior" look. Flagship end-of-page pattern. */
.sm-hero-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  padding: 5rem 3rem 3rem;
  border-radius: 24px;
  background: linear-gradient(#fbfbfc, #fff 10%);
  box-shadow:
    0 0 0 1px rgba(6, 12, 134, 0.08),
    inset 0 0 0 8px #fff;
  overflow: hidden;
}
.sm-hero-cta--dark {
  background: #141414;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 0 0 8px #1f1f22;
}
.sm-hero-cta--dark .sm-title,
.sm-hero-cta--dark .sm-subtitle { color: var(--sm-white); }
.sm-hero-cta--dark .sm-text     { color: rgba(255, 255, 255, 0.8); }

/* ============================================================
   UTILITY
   ============================================================ */

.sm-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}