/*
 * SPOKEN_LETTERS_BUSINESS_PAGE_V1
 *
 * Styles for the standalone /business page. Consumes design tokens
 * and shared component classes (.sl-button*, .sl-text-link,
 * .sl-faq-list) defined in homepage-v2.css. Every new class here is
 * prefixed .sl-biz- per the build spec. No :root tokens are defined
 * or overridden in this file.
 */

.sl-biz-page,
.sl-biz-page * {
  box-sizing: border-box;
}

.sl-biz-page h1,
.sl-biz-page h2,
.sl-biz-page h3 {
  margin: 0 0 0.5em;
  font-family: var(--sl-serif);
  color: var(--sl-espresso);
}

.sl-biz-page p {
  margin: 0 0 1em;
}

.sl-biz-page ul,
.sl-biz-page ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-biz-page img {
  max-width: 100%;
  display: block;
}

/* -------------------------------------------------------------- */
/* Layout primitives                                               */
/* -------------------------------------------------------------- */

.sl-biz-container {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

.sl-biz-section {
  position: relative;
  padding: clamp(74px, 9vw, 126px) 0;
  scroll-margin-top: 84px;
}

.sl-biz-section-soft {
  background:
    radial-gradient(circle at 10% 8%, rgba(185, 147, 85, 0.14), transparent 24rem),
    linear-gradient(180deg, #fff 0%, var(--sl-rose) 100%);
}

.sl-biz-eyebrow {
  margin-bottom: 14px;
  color: var(--sl-burgundy);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------- */
/* Accessibility — skip link                                       */
/* -------------------------------------------------------------- */

.sl-biz-skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--sl-espresso);
  color: #fff;
  font-family: var(--sl-sans);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s ease;
}

.sl-biz-skip-link:focus {
  top: 12px;
}

/* -------------------------------------------------------------- */
/* Utilities                                                        */
/* -------------------------------------------------------------- */

.hidden {
  display: none !important;
}

/* -------------------------------------------------------------- */
/* Shared components — lede paragraph & CTA row                    */
/* -------------------------------------------------------------- */

.sl-biz-lede {
  max-width: 600px;
  color: var(--sl-brown);
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  line-height: 1.72;
}

.sl-biz-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 26px;
}

/* -------------------------------------------------------------- */
/* Section 1 — Header                                              */
/* -------------------------------------------------------------- */

.sl-biz-header {
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: 1px solid var(--sl-line);
  background: rgba(255, 253, 248, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sl-biz-header .sl-biz-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
}

.sl-biz-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  color: var(--sl-burgundy);
  font-family: var(--sl-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-style: italic;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.sl-biz-logo-tag {
  font-family: var(--sl-sans);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: var(--sl-brown);
  text-transform: uppercase;
}

.sl-biz-header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  margin-left: 34px;
}

.sl-biz-header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 8px 13px;
  border-radius: 999px;
  color: var(--sl-espresso);
  font-size: 0.86rem;
  font-weight: 720;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sl-biz-header-nav a:hover,
.sl-biz-header-nav a:focus-visible {
  background: rgba(110, 59, 111, 0.08);
  color: var(--sl-burgundy);
}

.sl-biz-header-cta {
  flex: 0 0 auto;
  padding: 11px 18px;
  min-height: 46px;
  font-size: 0.86rem;
}

/* -------------------------------------------------------------- */
/* Section 2 — Hero                                                */
/* -------------------------------------------------------------- */

.sl-biz-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 8vw, 108px) 0 clamp(60px, 7vw, 92px);
  background:
    radial-gradient(circle at 84% 18%, rgba(110, 59, 111, 0.13), transparent 24rem),
    radial-gradient(circle at 8% 6%, rgba(185, 147, 85, 0.17), transparent 26rem),
    linear-gradient(115deg, #fffdf8 0%, #f8f1e6 62%, var(--sl-rose) 100%);
  scroll-margin-top: 84px;
}

.sl-biz-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.sl-biz-hero-copy {
  min-width: 0;
}

.sl-biz-hero h1 {
  max-width: 660px;
  margin-bottom: 18px;
  font-size: clamp(2.5rem, 5.4vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.sl-biz-hero-subline {
  margin: 0 0 14px;
  color: var(--sl-burgundy);
  font-family: var(--sl-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-style: italic;
}

.sl-biz-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin: 26px 0 0;
  color: var(--sl-brown);
  font-size: 0.83rem;
  font-weight: 730;
}

.sl-biz-trust li::before {
  content: "\2713";
  margin-right: 7px;
  color: var(--sl-burgundy);
}

.sl-biz-hero-visual {
  position: relative;
}

.sl-biz-hero-visual img {
  width: 100%;
  height: auto;
  padding: 12px;
  border: 1px solid rgba(185, 147, 85, 0.4);
  border-radius: 32px 32px 110px 32px;
  background: rgba(255, 253, 248, 0.7);
  box-shadow: var(--sl-shadow);
  object-fit: cover;
}

.sl-biz-photo-caption {
  margin: 14px 4px 0;
  color: var(--sl-brown);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

/* -------------------------------------------------------------- */
/* Section 3 — The contrast                                        */
/* -------------------------------------------------------------- */

.sl-biz-contrast {
  isolation: isolate;
}

.sl-biz-contrast h2 {
  max-width: 760px;
}

.sl-biz-contrast > .sl-biz-container > p:first-of-type {
  max-width: 640px;
  color: var(--sl-brown);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.7;
}

.sl-biz-contrast-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.sl-biz-contrast-card {
  min-width: 0;
  padding: clamp(26px, 3.4vw, 36px);
  border: 1px solid var(--sl-line);
  border-radius: 26px;
  background: var(--sl-paper);
  box-shadow: 0 14px 38px rgba(55, 34, 25, 0.06);
}

.sl-biz-contrast-card h3 {
  margin-bottom: 16px;
  font-size: 1.22rem;
}

.sl-biz-contrast-card ul {
  display: grid;
  gap: 12px;
}

.sl-biz-contrast-card li {
  position: relative;
  padding-left: 26px;
  color: var(--sl-brown);
  font-size: 0.95rem;
  line-height: 1.55;
}

.sl-biz-contrast-card.is-muted {
  background: linear-gradient(155deg, #fff, #f7f4ee);
  opacity: 0.92;
}

.sl-biz-contrast-card.is-muted li::before {
  content: "\2013";
  position: absolute;
  left: 2px;
  color: var(--sl-brown);
  font-weight: 700;
}

.sl-biz-contrast-card.is-feature {
  border-color: rgba(110, 59, 111, 0.26);
  background:
    radial-gradient(circle at 92% 0%, rgba(110, 59, 111, 0.1), transparent 13rem),
    var(--sl-paper);
  box-shadow: 0 18px 48px rgba(55, 34, 25, 0.1);
}

.sl-biz-contrast-card.is-feature li {
  color: var(--sl-espresso);
  font-weight: 560;
}

.sl-biz-contrast-card.is-feature li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--sl-burgundy);
  font-weight: 800;
}

.sl-biz-contrast-note {
  max-width: 800px;
  margin: 26px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--sl-line);
  color: var(--sl-brown);
  font-family: var(--sl-serif);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  text-align: center;
}

/* -------------------------------------------------------------- */
/* Section 4 — What your customer receives                         */
/* -------------------------------------------------------------- */

.sl-biz-receive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.sl-biz-receive-card {
  min-width: 0;
  padding: 26px 22px;
  border: 1px solid var(--sl-line);
  border-radius: 24px;
  background: var(--sl-paper);
  box-shadow: 0 14px 38px rgba(55, 34, 25, 0.06);
}

.sl-biz-receive-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--sl-rose);
  color: var(--sl-burgundy);
}

.sl-biz-receive-icon svg {
  width: 22px;
  height: 22px;
}

.sl-biz-receive-card h3 {
  margin-bottom: 8px;
  font-size: 1.08rem;
}

.sl-biz-receive-card p {
  margin-bottom: 0;
  color: var(--sl-brown);
  font-size: 0.9rem;
  line-height: 1.58;
}

.sl-biz-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.sl-biz-proof-strip figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--sl-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(55, 34, 25, 0.06);
}

.sl-biz-proof-strip img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.sl-biz-disclosure {
  max-width: 900px;
  margin: 32px auto 0;
  padding: 18px 22px;
  border: 1px solid var(--sl-line);
  border-left: 3px solid var(--sl-gold);
  border-radius: 16px;
  background: rgba(185, 147, 85, 0.08);
  color: var(--sl-brown);
  font-size: 0.85rem;
  line-height: 1.62;
}

.sl-biz-disclosure p {
  margin-bottom: 0;
}

/* -------------------------------------------------------------- */
/* Section 5 — Use cases                                           */
/* -------------------------------------------------------------- */

.sl-biz-usecase-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.sl-biz-usecase-card {
  min-width: 0;
  padding: 20px 18px;
  border: 1px solid var(--sl-line);
  border-radius: 20px;
  background: linear-gradient(155deg, #fff, #f8f2e9);
}

.sl-biz-usecase-card h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.sl-biz-usecase-card p {
  margin-bottom: 0;
  color: var(--sl-brown);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------- */
/* Section 6 — Industries                                          */
/* -------------------------------------------------------------- */

.sl-biz-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.sl-biz-industry-card {
  min-width: 0;
  padding: 24px 22px;
  border: 1px solid var(--sl-line);
  border-radius: 22px;
  background: var(--sl-paper);
  box-shadow: 0 14px 36px rgba(55, 34, 25, 0.06);
}

.sl-biz-industry-card h3 {
  margin-bottom: 4px;
  font-size: 1.1rem;
}

.sl-biz-industry-subtitle {
  display: block;
  margin: 0 0 14px;
  color: var(--sl-gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sl-biz-industry-list {
  display: grid;
  gap: 9px;
}

.sl-biz-industry-list li {
  position: relative;
  padding-left: 18px;
  color: var(--sl-brown);
  font-size: 0.89rem;
  line-height: 1.5;
}

.sl-biz-industry-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sl-gold);
}

.sl-biz-industry-note {
  max-width: 760px;
  margin: 30px auto 0;
  color: var(--sl-brown);
  font-size: 1rem;
  text-align: center;
}

/* -------------------------------------------------------------- */
/* Section 7 — Custom branding (premium centerpiece)                */
/* -------------------------------------------------------------- */

.sl-biz-brand {
  position: relative;
  isolation: isolate;
  scroll-margin-top: 84px;
  background:
    radial-gradient(circle at 88% 12%, rgba(185, 147, 85, 0.22), transparent 28rem),
    radial-gradient(circle at 8% 92%, rgba(255, 255, 255, 0.08), transparent 26rem),
    linear-gradient(150deg, var(--sl-plum-dark) 0%, var(--sl-plum-deep) 100%);
  color: rgba(255, 255, 255, 0.92);
}

.sl-biz-brand .sl-biz-eyebrow {
  color: #e9ca91;
}

.sl-biz-brand h2 {
  color: #fff;
}

.sl-biz-brand .sl-biz-lede {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.72;
}

.sl-biz-seal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 12px;
}

.sl-biz-seal-card {
  min-width: 0;
  padding: 28px 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-align: center;
}

.sl-biz-seal-card.is-feature {
  border-color: rgba(233, 202, 145, 0.5);
  background:
    radial-gradient(circle at 50% 0%, rgba(233, 202, 145, 0.14), transparent 14rem),
    rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.sl-biz-seal-art {
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}

svg.sl-biz-seal-art,
.sl-biz-seal-art svg {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto 20px;
}

.sl-biz-seal-tag {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #e9ca91;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sl-biz-seal-card h3 {
  margin-bottom: 8px;
  color: #fff;
  font-size: 1.14rem;
}

.sl-biz-seal-card p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.89rem;
  line-height: 1.58;
}

.sl-biz-seal-note {
  max-width: 700px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
}

.sl-biz-brand-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 5vw, 64px);
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.sl-biz-brand-col {
  min-width: 0;
}

.sl-biz-brand-detail h3 {
  margin-bottom: 16px;
  color: #fff;
  font-size: 1.2rem;
}

.sl-biz-brand-detail ul {
  display: grid;
  gap: 11px;
}

.sl-biz-brand-detail li {
  position: relative;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.94rem;
  line-height: 1.55;
}

.sl-biz-brand-detail li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #e9ca91;
  font-weight: 800;
}

.sl-biz-brand-detail p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  line-height: 1.65;
}

.sl-biz-brand-note {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.85rem;
  line-height: 1.6;
}

.sl-biz-brand-detail + .sl-biz-cta-row {
  margin-top: clamp(40px, 5vw, 56px);
}

/* Keep .sl-button-secondary legible on the dark plum ground: the
   default translucent paper background stays readable here, but we
   lift its border and text weight slightly for contrast against the
   deep plum backdrop rather than touching its color values globally. */
.sl-biz-brand .sl-button-secondary {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.94);
}

/* -------------------------------------------------------------- */
/* Section 8 — How it works                                        */
/* -------------------------------------------------------------- */

.sl-biz-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.sl-biz-step {
  min-width: 0;
  padding: 22px 18px;
  border: 1px solid var(--sl-line);
  border-radius: 22px;
  background: var(--sl-paper);
  box-shadow: 0 14px 36px rgba(55, 34, 25, 0.06);
}

.sl-biz-step-number {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--sl-burgundy);
  color: #fff;
  font-family: var(--sl-serif);
  font-size: 1.02rem;
  box-shadow: 0 10px 24px rgba(110, 59, 111, 0.24);
}

.sl-biz-step h3 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.sl-biz-step p {
  margin-bottom: 0;
  color: var(--sl-brown);
  font-size: 0.85rem;
  line-height: 1.52;
}

.sl-biz-steps-note {
  max-width: 820px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--sl-line);
  border-radius: 16px;
  background: rgba(110, 59, 111, 0.05);
  color: var(--sl-brown);
  font-size: 0.87rem;
  line-height: 1.6;
  text-align: center;
}

/* -------------------------------------------------------------- */
/* Section 9 — Example letters (stationery cards)                  */
/* -------------------------------------------------------------- */

.sl-biz-letter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.sl-biz-letter {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 32px) clamp(24px, 3vw, 30px);
  border: 1px solid var(--sl-line);
  border-radius: 22px;
  background:
    repeating-linear-gradient(180deg, rgba(78, 53, 43, 0.05) 0, rgba(78, 53, 43, 0.05) 1px, transparent 1px, transparent 34px),
    linear-gradient(160deg, #fffdf8, #faf3e6);
  box-shadow: 0 16px 40px rgba(55, 34, 25, 0.08);
}

.sl-biz-letter-label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(110, 59, 111, 0.08);
  color: var(--sl-burgundy);
  font-family: var(--sl-sans);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sl-biz-letter-body {
  flex: 1;
  font-family: var(--sl-serif);
  color: var(--sl-espresso);
  font-size: 1.02rem;
  line-height: 1.85;
}

.sl-biz-letter-body p {
  margin-bottom: 0.9em;
}

.sl-biz-letter-body p:last-child {
  margin-bottom: 0;
}

.sl-biz-example-note {
  max-width: 720px;
  margin: 26px auto 0;
  color: var(--sl-brown);
  font-size: 0.87rem;
  font-style: italic;
  text-align: center;
}

/* -------------------------------------------------------------- */
/* Section 10 — Pricing                                            */
/* -------------------------------------------------------------- */

.sl-biz-pricing-card {
  max-width: 760px;
  margin: 8px auto 0;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid var(--sl-line);
  border-radius: 29px;
  background: var(--sl-paper);
  box-shadow: 0 18px 48px rgba(55, 34, 25, 0.08);
}

.sl-biz-pricing-card h3 {
  margin-bottom: 18px;
  font-size: 1.2rem;
}

.sl-biz-factor-list {
  display: grid;
  gap: 12px;
}

.sl-biz-factor-list li {
  position: relative;
  padding-left: 24px;
  color: var(--sl-brown);
  font-size: 0.96rem;
  line-height: 1.55;
}

.sl-biz-factor-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--sl-burgundy);
  font-weight: 800;
}

#pricing .sl-biz-cta-row {
  justify-content: center;
  max-width: 760px;
  margin: 28px auto 0;
}

.sl-biz-pricing-note {
  max-width: 760px;
  margin: 20px auto 0;
  color: var(--sl-brown);
  font-size: 0.92rem;
  text-align: center;
}

/* -------------------------------------------------------------- */
/* Section 11 — Partnership                                        */
/* -------------------------------------------------------------- */

.sl-biz-partner {
  background:
    radial-gradient(circle at 12% 85%, rgba(110, 59, 111, 0.08), transparent 24rem),
    var(--sl-paper);
}

.sl-biz-partner-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.sl-biz-partner-card {
  min-width: 0;
  padding: 24px 22px;
  border: 1px solid var(--sl-line);
  border-radius: 22px;
  background: linear-gradient(155deg, #fff, #f8f0e6);
  box-shadow: 0 14px 36px rgba(55, 34, 25, 0.06);
}

.sl-biz-partner-card h3 {
  margin-bottom: 8px;
  font-size: 1.06rem;
}

.sl-biz-partner-card p {
  margin-bottom: 0;
  color: var(--sl-brown);
  font-size: 0.88rem;
  line-height: 1.55;
}

#partnership .sl-biz-cta-row {
  justify-content: center;
  margin-top: 32px;
}

.sl-biz-partner-note {
  max-width: 700px;
  margin: 20px auto 0;
  color: var(--sl-brown);
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
}

/* -------------------------------------------------------------- */
/* Section 11.5 — Free sample letter                                */
/* -------------------------------------------------------------- */

.sl-biz-free-sample-note {
  margin: 10px 0 0;
  color: var(--sl-brown);
  font-size: 0.85rem;
}

#freeSamplePanel {
  max-width: 640px;
  margin-top: 32px;
}

#freeSampleSuccess {
  max-width: 640px;
  margin-top: 32px;
}

.sl-biz-help {
  display: block;
  margin: 0 0 8px;
  color: var(--sl-brown);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------- */
/* Section 12 — Request form                                       */
/* -------------------------------------------------------------- */

.sl-biz-form-section {
  position: relative;
  padding: clamp(74px, 9vw, 126px) 0;
  scroll-margin-top: 84px;
  background:
    radial-gradient(circle at 88% 6%, rgba(185, 147, 85, 0.14), transparent 24rem),
    linear-gradient(180deg, #fff 0%, var(--sl-rose) 100%);
}

#requestPanel {
  max-width: 640px;
  margin-inline: auto;
}

#requestPanel h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.08;
}

#requestPanel > p {
  margin-bottom: 26px;
  color: var(--sl-brown);
  line-height: 1.7;
}

.sl-biz-form-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.sl-biz-form-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--sl-line);
  border-radius: 999px;
  background: var(--sl-paper);
  color: var(--sl-brown);
  font-family: var(--sl-sans);
  font-size: 0.85rem;
  font-weight: 750;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sl-biz-form-tab:hover {
  border-color: rgba(110, 59, 111, 0.3);
  color: var(--sl-burgundy);
}

.sl-biz-form-tab:focus-visible {
  outline: 3px solid rgba(185, 147, 85, 0.55);
  outline-offset: 3px;
}

.sl-biz-form-tab[aria-selected="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--sl-burgundy), var(--sl-burgundy-dark));
  color: #fff;
  box-shadow: 0 10px 26px rgba(110, 59, 111, 0.24);
}

#businessLeadForm,
#freeSampleForm {
  padding: clamp(26px, 3.6vw, 40px);
  border: 1px solid var(--sl-line);
  border-radius: 28px;
  background: var(--sl-paper);
  box-shadow: var(--sl-shadow);
}

.sl-biz-field {
  min-width: 0;
  margin-bottom: 18px;
}

.sl-biz-field label,
.sl-biz-checkgroup legend {
  display: block;
  margin-bottom: 7px;
  color: var(--sl-espresso);
  font-size: 0.87rem;
  font-weight: 720;
}

.sl-biz-required {
  margin-left: 3px;
  color: #8a3b2b;
}

#businessLeadForm input[type="text"],
#businessLeadForm input[type="email"],
#businessLeadForm input[type="tel"],
#businessLeadForm input[type="url"],
#businessLeadForm select,
#businessLeadForm textarea,
#freeSampleForm input[type="text"],
#freeSampleForm input[type="email"],
#freeSampleForm select,
#freeSampleForm textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--sl-line);
  border-radius: 14px;
  background: #fff;
  color: var(--sl-espresso);
  font-family: var(--sl-sans);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#businessLeadForm textarea,
#freeSampleForm textarea {
  min-height: 108px;
  padding-top: 12px;
  resize: vertical;
}

#businessLeadForm input[type="text"]::placeholder,
#businessLeadForm input[type="email"]::placeholder,
#businessLeadForm input[type="tel"]::placeholder,
#businessLeadForm input[type="url"]::placeholder,
#businessLeadForm textarea::placeholder,
#freeSampleForm input[type="text"]::placeholder,
#freeSampleForm input[type="email"]::placeholder,
#freeSampleForm textarea::placeholder {
  color: rgba(47, 33, 27, 0.42);
}

#businessLeadForm input[type="text"]:focus,
#businessLeadForm input[type="email"]:focus,
#businessLeadForm input[type="tel"]:focus,
#businessLeadForm input[type="url"]:focus,
#businessLeadForm select:focus,
#businessLeadForm textarea:focus,
#freeSampleForm input[type="text"]:focus,
#freeSampleForm input[type="email"]:focus,
#freeSampleForm select:focus,
#freeSampleForm textarea:focus {
  outline: none;
  border-color: var(--sl-burgundy);
  box-shadow: 0 0 0 4px rgba(110, 59, 111, 0.16);
}

#businessLeadForm input[type="text"]:focus-visible,
#businessLeadForm input[type="email"]:focus-visible,
#businessLeadForm input[type="tel"]:focus-visible,
#businessLeadForm input[type="url"]:focus-visible,
#businessLeadForm select:focus-visible,
#businessLeadForm textarea:focus-visible,
#freeSampleForm input[type="text"]:focus-visible,
#freeSampleForm input[type="email"]:focus-visible,
#freeSampleForm select:focus-visible,
#freeSampleForm textarea:focus-visible {
  outline: none;
}

#businessLeadForm input[aria-invalid="true"],
#businessLeadForm select[aria-invalid="true"],
#businessLeadForm textarea[aria-invalid="true"],
#freeSampleForm input[aria-invalid="true"],
#freeSampleForm select[aria-invalid="true"],
#freeSampleForm textarea[aria-invalid="true"] {
  border-color: #8a3b2b;
}

#businessLeadForm select,
#freeSampleForm select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--sl-brown) 50%), linear-gradient(135deg, var(--sl-brown) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.sl-biz-checkgroup {
  display: grid;
  gap: 2px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.sl-biz-checkgroup legend {
  padding: 0;
}

.sl-biz-checkgroup-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 4px;
  margin: 0;
  color: var(--sl-espresso);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
}

.sl-biz-checkgroup-option input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  accent-color: var(--sl-burgundy);
}

.sl-biz-checkgroup-option input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(185, 147, 85, 0.55);
  outline-offset: 3px;
}

.sl-biz-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sl-biz-error {
  display: none;
  margin: 6px 0 0;
  color: #8a3b2b;
  font-size: 0.79rem;
  font-weight: 650;
  line-height: 1.4;
}

.sl-biz-error:not(:empty) {
  display: block;
}

.sl-biz-form-fineprint {
  margin: 14px 0 0;
  color: var(--sl-brown);
  font-size: 0.79rem;
  line-height: 1.55;
}

.sl-biz-status {
  margin-top: 16px;
  padding: 0;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.sl-biz-status:empty {
  margin-top: 0;
  padding: 0;
}

.sl-biz-status:not(:empty) {
  padding: 14px 16px;
  border: 1px solid rgba(110, 59, 111, 0.22);
  background: rgba(110, 59, 111, 0.06);
  color: var(--sl-espresso);
}

.sl-biz-status.is-error {
  border-color: rgba(138, 59, 43, 0.35);
  background: rgba(138, 59, 43, 0.08);
  color: #6b2d20;
}

/*
 * Inline success panel. Still used by the PUBLIC lead form
 * (#businessLeadSuccess in the #request section) -- only the
 * free-sample flow moved to the confirmation dialog below.
 */

.sl-biz-success {
  padding: clamp(28px, 4vw, 40px);
  border: 1px solid rgba(110, 59, 111, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(110, 59, 111, 0.1), transparent 13rem),
    var(--sl-paper);
  text-align: center;
}

.sl-biz-success h2,
.sl-biz-success h3 {
  margin-bottom: 12px;
}

.sl-biz-success p {
  margin-bottom: 0;
  color: var(--sl-brown);
  line-height: 1.65;
}

/* -------------------------------------------------------------- */
/* SPOKEN_LETTERS_BUSINESS_FREE_SAMPLE_CONFIRMATION_V1             */
/*                                                                 */
/* Confirmation dialog for the free-sample flow. Replaces the      */
/* former inline .sl-biz-success panel. Shares the page tokens     */
/* (--sl-paper, --sl-espresso, --sl-brown) and the shared          */
/* .sl-button classes so it reads as the same product; the card    */
/* is intentionally narrower than the homepage promotion popup,    */
/* because this one carries two short lines and a single action.   */
/* -------------------------------------------------------------- */

body.sl-biz-modal-open {
  overflow: hidden;
}

.sl-biz-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 44px);
  background: rgba(46, 26, 24, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: sl-biz-modal-fade 180ms ease-out;
}

.sl-biz-modal-card {
  position: relative;
  /* 480px keeps the heading on one line at its full clamp size. */
  width: min(100%, 480px);
  max-height: min(88vh, 640px);
  overflow-y: auto;
  padding: clamp(32px, 5vw, 44px) clamp(26px, 5vw, 40px);
  border: 1px solid rgba(110, 59, 111, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(110, 59, 111, 0.1), transparent 13rem),
    var(--sl-paper);
  box-shadow: 0 30px 80px rgba(46, 26, 24, 0.34);
  text-align: center;
  animation: sl-biz-modal-rise 220ms ease-out;
}

.sl-biz-modal-title {
  margin: 0 0 14px;
  font-size: clamp(1.45rem, 3.4vw, 1.8rem);
  line-height: 1.2;
}

.sl-biz-modal-title:focus-visible {
  outline: 3px solid rgba(185, 147, 85, 0.55);
  outline-offset: 6px;
  border-radius: 6px;
}

.sl-biz-modal-text {
  margin: 0 0 26px;
  color: var(--sl-brown);
  font-size: 1rem;
  line-height: 1.65;
}

.sl-biz-modal-text strong {
  color: var(--sl-espresso);
  font-weight: 700;
  white-space: nowrap;
}

.sl-biz-modal-action {
  width: min(100%, 210px);
}

@keyframes sl-biz-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sl-biz-modal-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sl-biz-modal,
  .sl-biz-modal-card {
    animation: none;
  }
}

/* -------------------------------------------------------------- */
/* Section 13 — FAQ                                                */
/* -------------------------------------------------------------- */

#faq .sl-faq-list {
  max-width: 860px;
  margin-inline: auto;
}

/* -------------------------------------------------------------- */
/* Section 14 — Closing CTA                                        */
/* -------------------------------------------------------------- */

.sl-biz-final {
  padding: clamp(80px, 10vw, 140px) 0;
  background:
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.1), transparent 22rem),
    radial-gradient(circle at 90% 85%, rgba(185, 147, 85, 0.24), transparent 24rem),
    linear-gradient(135deg, var(--sl-burgundy-dark), var(--sl-burgundy));
  color: #fff;
  text-align: center;
}

.sl-biz-final h2 {
  max-width: 780px;
  margin: 0 auto 16px;
  color: #fff;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.05;
}

.sl-biz-final > .sl-biz-container > p {
  max-width: 780px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--sl-serif);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.55;
}

.sl-biz-final .sl-biz-cta-row {
  justify-content: center;
  gap: 14px;
  margin-top: 0;
}

.sl-biz-final .sl-button-secondary {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.94);
}

/* -------------------------------------------------------------- */
/* Section 15 — Footer                                             */
/* -------------------------------------------------------------- */

.sl-biz-footer {
  padding: 40px 20px 52px;
  background: #241914;
  color: rgba(255, 255, 255, 0.72);
}

.sl-biz-footer .sl-biz-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.sl-biz-footer-brand {
  margin-bottom: 5px;
  color: #fff;
  font-family: var(--sl-serif);
  font-size: 1.3rem;
  font-style: italic;
}

.sl-biz-footer-brand + p {
  margin: 0;
  font-size: 0.78rem;
}

.sl-biz-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sl-biz-footer nav a {
  padding: 7px 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.sl-biz-footer nav a:hover,
.sl-biz-footer nav a:focus-visible {
  color: #fff;
}

.sl-biz-optout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.sl-biz-optout p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
}

.sl-biz-footer .sl-biz-container > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.75rem;
}

/* -------------------------------------------------------------- */
/* Sticky mobile CTA                                                */
/* -------------------------------------------------------------- */

.sl-biz-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 600;
  display: none;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--sl-line);
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 -12px 30px rgba(55, 34, 25, 0.1);
}

.sl-biz-sticky-cta .sl-button {
  width: 100%;
}

/* -------------------------------------------------------------- */
/* Focus-visible safety net for new interactive elements            */
/* -------------------------------------------------------------- */

.sl-biz-page a:focus-visible,
.sl-biz-page button:focus-visible,
.sl-biz-page summary:focus-visible {
  outline: 3px solid rgba(185, 147, 85, 0.55);
  outline-offset: 4px;
}

/* -------------------------------------------------------------- */
/* Desktop-first responsive breakpoints                             */
/* -------------------------------------------------------------- */

@media (max-width: 1040px) {
  .sl-biz-hero-grid {
    grid-template-columns: 1fr;
  }

  .sl-biz-hero-visual {
    width: min(680px, 100%);
    margin-inline: auto;
  }

  .sl-biz-usecase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sl-biz-receive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-biz-industry-grid,
  .sl-biz-partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-biz-letter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-biz-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .sl-biz-header-nav {
    display: none;
  }

  .sl-biz-seal-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }

  .sl-biz-brand-detail {
    grid-template-columns: 1fr;
  }

  .sl-biz-proof-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .sl-biz-container {
    width: min(100% - 28px, 720px);
  }

  .sl-biz-section,
  .sl-biz-form-section {
    padding: 68px 0;
  }

  .sl-biz-usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-biz-industry-grid,
  .sl-biz-partner-grid,
  .sl-biz-letter-grid {
    grid-template-columns: 1fr;
  }

  .sl-biz-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-biz-receive-grid {
    grid-template-columns: 1fr;
  }

  .sl-biz-contrast-grid {
    grid-template-columns: 1fr;
  }

  .sl-biz-footer .sl-biz-container {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Sticky CTA takes over below this breakpoint */
  .sl-biz-sticky-cta {
    display: block;
  }

  .sl-biz-page {
    padding-bottom: 84px;
  }
}

@media (max-width: 560px) {
  .sl-biz-usecase-grid {
    grid-template-columns: 1fr;
  }

  .sl-biz-steps {
    grid-template-columns: 1fr;
  }

  .sl-biz-proof-strip {
    grid-template-columns: 1fr;
  }

  .sl-biz-seal-grid {
    max-width: none;
  }

  .sl-biz-hero h1 {
    max-width: none;
  }

  #businessLeadForm,
  #freeSampleForm {
    padding: 22px;
  }

  .sl-biz-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sl-biz-cta-row .sl-button {
    width: 100%;
  }

  .sl-biz-cta-row .sl-text-link {
    justify-content: center;
    margin-top: 4px;
  }
}

@media (max-width: 430px) {
  .sl-biz-container {
    width: min(100% - 24px, 1200px);
  }

  .sl-biz-hero h1 {
    font-size: clamp(2.1rem, 10vw, 2.9rem);
  }

  .sl-biz-logo-tag {
    display: none;
  }

  /* Safety net: if the logo + CTA can't both fit on one row at very
     narrow widths, wrap onto a second line rather than overflow. */
  .sl-biz-header .sl-biz-container {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .sl-biz-header-cta {
    padding: 9px 14px;
    min-height: 40px;
    font-size: 0.8rem;
  }
}

/* -------------------------------------------------------------- */
/* Touch tap targets  (SL_BIZ_TAP_TARGETS)                          */
/* -------------------------------------------------------------- */

/*
 * Below the tablet breakpoint the page is driven by touch, so every
 * interactive element needs a >=44px hit area. The affected elements
 * are text-sized by design (inline text links, footer links, the
 * compact header CTA); vertical padding grows the hit box without
 * changing type size, colour, or the surrounding layout rhythm.
 */
@media (max-width: 780px) {
  .sl-biz-page .sl-biz-header-cta {
    min-height: 44px;
  }

  .sl-biz-page .sl-biz-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .sl-biz-page .sl-text-link {
    min-height: 44px;
    padding-block: 11px;
  }

  .sl-biz-page .sl-biz-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 7px;
  }
}

/* -------------------------------------------------------------- */
/* Reduced motion                                                   */
/* -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sl-biz-page * {
    animation: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}