#sahand-bento-light {
  --bg: var(--slc-color-canvas);
  --surface-unified: var(--slc-color-surface);
  --surface-card-a: var(--slc-color-surface);
  --surface-card-b: var(--slc-color-surface-strong);
  --text: var(--slc-color-ink-strong);
  --muted: var(--slc-color-ink-muted);
  --violet-soft: var(--slc-color-content-violet);
  --violet-text: var(--slc-color-content-violet);
  --warm: var(--slc-color-content-warm);
  --bento-stage-background: var(--slc-component-bento-stage-background);
  --bento-card-background: var(--slc-component-bento-card-background);
  --bento-feature-background: var(--slc-component-bento-feature-background);
  --bento-feature-background-compact: var(--slc-component-bento-feature-background-compact);
  --bento-focus-ring: var(--slc-color-focus-ring);
  --radius-card: 22px;
  --radius-hero: 24px;
  --font-body: "IRANSansX", "IRANYekanX", Tahoma, Arial, sans-serif;
  --font-display: "IRANYekanX", "IRANSansX", Tahoma, Arial, sans-serif;

  /* 970 × 728 reference geometry */
  --desk-left: 9px;
  --desk-right: 16px;
  --desk-top: 14px;
  --desk-bottom: 18px;
  --col-left: 220px;
  --gap-x: 21px;
  --col-branch: 222px;
  --col-keyword: 221px;
  --col-right: 219px;
  --row-top: 131px;
  --gap-y: 23px;
  --row-stat: 176px;
  --row-users: 185px;
  --row-cta: 135px;

  /* Shared focal geometry: size is the source; radius and relief are derived. */
  --focus-size: 210px;
  --focus-gap: 8px;
  --focus-center-y: 402.5px;
  --hero-top-y: var(--desk-top);
  --feature-top-y: calc(
    var(--desk-top) + var(--row-top) + var(--gap-y) + var(--row-stat) + var(--gap-y)
  );
  --hero-cutout-x: calc(50% + .5px);
}
#sahand-bento-light, #sahand-bento-light * { box-sizing: border-box; }
#sahand-bento-light {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slc-bento-stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bento-stage-background);
}

.slc-bento-dashboard {
  --half-gap-x: calc(var(--gap-x) / 2);
  --focus-center-x: calc(
    var(--desk-left) + var(--col-left) + var(--gap-x) + var(--col-branch) + var(--half-gap-x)
  );
  --focus-radius: calc(var(--focus-size) / 2);
  --focus-cutout-radius: calc(var(--focus-radius) + var(--focus-gap));
  --hero-cutout-y: calc(var(--focus-center-y) - var(--hero-top-y));
  --feature-cutout-y: calc(var(--focus-center-y) - var(--feature-top-y));
  position: relative;
  width: 970px;
  height: 728px;
  padding: var(--desk-top) var(--desk-right) var(--desk-bottom) var(--desk-left);
  display: grid;
  direction: ltr;
  grid-template-columns:
    var(--col-left) var(--gap-x)
    var(--col-branch) var(--gap-x)
    var(--col-keyword) var(--gap-x)
    var(--col-right);
  grid-template-rows:
    var(--row-top) var(--gap-y)
    var(--row-stat) var(--gap-y)
    var(--row-users) var(--gap-y)
    var(--row-cta);
  overflow: hidden;
  isolation: isolate;
}

.slc-bento-card,
.slc-bento-transport-copy { direction: rtl; }

#sahand-bento-light h1, #sahand-bento-light h2,
.slc-bento-section-eyebrow, .slc-bento-hero-kicker, .slc-bento-transport-kicker,
.slc-bento-stat-number, .slc-bento-stat-caption, .slc-bento-users-number, .slc-bento-users-caption,
.slc-bento-transport-copy > p, .slc-bento-trial-copy strong {
  font-family: var(--font-display);
}

.slc-bento-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--bento-card-background);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 0 0 1px rgba(31,58,89,.06),
    0 12px 30px rgba(34,58,87,.10);
}

.slc-bento-intro-card { grid-column: 1; grid-row: 1 / 4; padding: 27px; text-align: right; }
.slc-bento-hero-card { grid-column: 3 / 6; grid-row: 1 / 4; }
.slc-bento-transport-copy-top { grid-column: 7; grid-row: 1; }
.slc-bento-stat-card { grid-column: 7; grid-row: 3; }
.slc-bento-users-card { grid-column: 1; grid-row: 5; }
.slc-bento-branching { grid-column: 3; grid-row: 5 / 8; }
.slc-bento-keyword { grid-column: 5; grid-row: 5 / 8; }
.slc-bento-templates-card { grid-column: 7; grid-row: 5 / 8; }
.slc-bento-transport-copy-bottom { grid-column: 1; grid-row: 7; }

/* Unified side tiles on the reference desktop width. */
.slc-bento-side-rail { display: none; }
@media (min-width: 970px) {
  /* Let the side-rail shadow dissolve into the page instead of clipping into a frame. */
  #sahand-bento-light .slc-bento-dashboard {
    overflow: visible;
  }

  .slc-bento-side-rail {
    position: absolute;
    display: block;
    z-index: 0;
    border-radius: 26px;
    background: var(--surface-unified);
    box-shadow:
      0 18px 48px rgba(34,58,87,.075),
      0 4px 14px rgba(34,58,87,.035);
  }
  .slc-bento-side-rail-left {
    left: var(--desk-left);
    top: var(--desk-top);
    width: var(--col-left);
    height: calc(var(--row-top) + var(--gap-y) + var(--row-stat) + var(--gap-y) + var(--row-users));
  }
  .slc-bento-side-rail-right {
    right: var(--desk-right);
    top: calc(var(--desk-top) + var(--row-top) + var(--gap-y));
    width: var(--col-right);
    height: calc(var(--row-stat) + var(--gap-y) + var(--row-users) + var(--gap-y) + var(--row-cta));
  }
  .slc-bento-intro-card,
  .slc-bento-users-card,
  .slc-bento-stat-card,
  .slc-bento-templates-card {
    z-index: 1;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* Left introduction */
.slc-bento-section-eyebrow {
  margin: 0 0 16px;
  color: var(--violet-soft);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.45;
}
.slc-bento-intro-card h2 {
  margin: 0;
  font-size: 20.3px;
  line-height: 1.46;
  font-weight: 700;
  white-space: nowrap;
}
.slc-bento-trial-copy {
  position: absolute;
  right: 27px;
  left: 24px;
  bottom: 27px;
  margin: 0;
  color: var(--muted);
  font-size: 11.8px;
  line-height: 1.86;
  text-align: right;
}
.slc-bento-trial-copy strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.58;
  font-weight: 700;
}

/* Hero map. A CSS mask uses the same shared radius as the center photo and feature cards. */
.slc-bento-logistics-hero {
  border-radius: var(--radius-hero);
  background: #06182a;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 17px 36px rgba(0,0,0,.24);
  -webkit-mask-image: radial-gradient(
    circle var(--focus-cutout-radius) at var(--hero-cutout-x) var(--hero-cutout-y),
    transparent 0 calc(var(--focus-cutout-radius) - 1px),
    #000 var(--focus-cutout-radius)
  );
  mask-image: radial-gradient(
    circle var(--focus-cutout-radius) at var(--hero-cutout-x) var(--hero-cutout-y),
    transparent 0 calc(var(--focus-cutout-radius) - 1px),
    #000 var(--focus-cutout-radius)
  );
}
.slc-bento-hero-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% center;
  filter: saturate(.90) contrast(1.06) brightness(.80);
}
.slc-bento-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,11,26,.05) 0%, rgba(2,11,26,.12) 40%, rgba(2,9,22,.58) 100%),
    linear-gradient(180deg, rgba(2,13,31,.02) 12%, rgba(2,11,26,.08) 47%, rgba(2,9,22,.48) 100%);
}
.slc-bento-hero-copy {
  position: absolute;
  top: 67px;
  right: 26px;
  width: 50%;
  text-align: right;
}
.slc-bento-hero-kicker {
  display: inline-block;
  margin-bottom: 7px;
  color: #c2e7ff;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 700;
}
.slc-bento-hero-card h2 {
  margin: 0;
  color: #fff;
  font-size: 25.5px;
  line-height: 1.34;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 2px 15px rgba(0,0,0,.72);
}
.slc-bento-hero-copy p {
  margin: 9px 0 0;
  max-width: 218px;
  color: rgba(255,255,255,.90);
  font-size: 10.8px;
  line-height: 1.86;
  text-shadow: 0 2px 11px rgba(0,0,0,.72);
}

/* Central photo: positioned from shared center tokens rather than independent top/left numbers. */
.slc-bento-center-visual {
  position: absolute;
  left: var(--focus-center-x);
  top: var(--focus-center-y);
  width: var(--focus-size);
  height: var(--focus-size);
  z-index: 12;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border-radius: 50%;
  background: #091326;
  border: 1px solid rgba(108,126,150,.25);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.88),
    0 14px 28px rgba(36,55,82,.18);
}
.slc-bento-center-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.018);
}

/* Plain transport notes */
.slc-bento-transport-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: right;
}
.slc-bento-transport-copy-top,
.slc-bento-transport-copy-bottom { padding: 8px 13px 5px 10px; }
.slc-bento-transport-kicker {
  margin-bottom: 7px;
  color: var(--warm);
  font-size: 9.3px;
  line-height: 1.5;
  font-weight: 700;
}
.slc-bento-transport-copy-bottom .slc-bento-transport-kicker { color: var(--violet-soft); }
.slc-bento-transport-copy p {
  margin: 0;
  max-width: 190px;
  color: var(--text);
  font-size: 16.5px;
  line-height: 1.52;
  font-weight: 700;
  white-space: nowrap;
}
.slc-bento-transport-copy small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 9.8px;
  line-height: 1.82;
}

/* Unified informational tiles */
.slc-bento-stat-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 42px 22px 20px;
  text-align: center;
}
.slc-bento-stat-number {
  margin: 0;
  color: var(--violet-soft);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 700;
}
.slc-bento-stat-caption {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11.8px;
  line-height: 1.7;
  font-weight: 700;
}

.slc-bento-users-card {
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.slc-bento-users-number {
  margin: 0;
  color: var(--warm);
  font-size: 28px;
  line-height: 1.14;
  font-weight: 700;
}
.slc-bento-users-caption {
  margin: 7px 0 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  font-weight: 700;
}
.slc-bento-users-copy {
  width: 100%;
  max-width: 190px;
  margin: 13px auto 0;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.78;
  font-weight: 500;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Shared lower geometry: CSS masks stay circular at every supported width. */
.slc-bento-feature-card {
  overflow: visible;
  background: var(--bento-feature-background);
  box-shadow: none;
  filter: drop-shadow(0 12px 22px rgba(34,58,87,.10));
  -webkit-mask-image: radial-gradient(
    circle var(--focus-cutout-radius) at var(--feature-cutout-x) var(--feature-cutout-y),
    transparent 0 calc(var(--focus-cutout-radius) - 1px),
    #000 var(--focus-cutout-radius)
  );
  mask-image: radial-gradient(
    circle var(--focus-cutout-radius) at var(--feature-cutout-x) var(--feature-cutout-y),
    transparent 0 calc(var(--focus-cutout-radius) - 1px),
    #000 var(--focus-cutout-radius)
  );
}
.slc-bento-branching { --feature-cutout-x: calc(100% + var(--half-gap-x)); }
.slc-bento-keyword { --feature-cutout-x: calc(0% - var(--half-gap-x)); }

.slc-bento-feature-content {
  position: absolute;
  right: 24px;
  left: 24px;
  bottom: 34px;
  text-align: right;
}
.slc-bento-feature-card h2,
.slc-bento-templates-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 13.8px;
  line-height: 1.56;
  font-weight: 700;
}
.slc-bento-feature-card p,
.slc-bento-templates-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11.1px;
  line-height: 1.90;
}

.slc-bento-templates-card {
  padding: 31px 24px 30px;
  text-align: right;
}
.slc-bento-templates-card p { max-width: 175px; }
.slc-bento-templates-card p + p { margin-top: 12px; }

/* Compact tablet: the same four-column Bento continues through 768px.
   This removes the 840→839 layout cliff and keeps the central relationship intact. */
@media (max-width: 969px) and (min-width: 768px) {
  .slc-bento-stage { padding: 16px; }
  .slc-bento-dashboard {
    --tablet-gap: 14px;
    --tablet-row-a: 124px;
    --tablet-row-b: 126px;
    --tablet-row-c: 118px;
    --tablet-row-d: 164px;
    --gap-x: var(--tablet-gap);
    --focus-size: clamp(176px, 22vw, 190px);
    --focus-gap: 6px;
    --focus-center-x: 50%;
    --feature-top-y: calc(
      var(--tablet-row-a) + var(--tablet-gap) + var(--tablet-row-b) + var(--tablet-gap)
    );
    --focus-center-y: calc(var(--feature-top-y) + 36px);
    --hero-top-y: 0px;
    --hero-cutout-x: 50%;

    width: min(100%, 920px);
    height: auto;
    padding: 0;
    overflow: visible;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows:
      var(--tablet-row-a) var(--tablet-row-b)
      var(--tablet-row-c) var(--tablet-row-d);
    gap: var(--tablet-gap);
  }
  .slc-bento-intro-card { grid-column: 1; grid-row: 1 / 3; padding: 20px 18px; }
  .slc-bento-intro-card h2 { font-size: clamp(17.5px, 2.3vw, 21px); line-height: 1.5; }
  .slc-bento-section-eyebrow { margin-bottom: 14px; }
  .slc-bento-trial-copy { right: 18px; left: 18px; bottom: 18px; font-size: 10.5px; }
  .slc-bento-trial-copy strong { font-size: 12.3px; }

  .slc-bento-hero-card { grid-column: 2 / 4; grid-row: 1 / 3; }
  .slc-bento-hero-copy { top: 45px; right: 18px; width: 52%; }
  .slc-bento-hero-card h2 { font-size: clamp(21px, 3vw, 27px); line-height: 1.38; }
  .slc-bento-hero-copy p { font-size: 9.7px; line-height: 1.82; }
  .slc-bento-hero-kicker { font-size: 9.7px; }

  .slc-bento-transport-copy-top {
    grid-column: 4;
    grid-row: 1;
    min-height: 0;
    padding: 7px 10px 3px;
  }
  .slc-bento-transport-copy-top p {
    font-size: clamp(12.5px, 1.75vw, 16px);
    line-height: 1.5;
    white-space: normal;
  }
  .slc-bento-transport-copy-top small { font-size: 8.8px; line-height: 1.65; }
  .slc-bento-transport-kicker { font-size: 8.8px; margin-bottom: 5px; }

  .slc-bento-stat-card {
    grid-column: 4;
    grid-row: 2;
    justify-content: center;
    padding: 18px 12px;
  }
  .slc-bento-stat-number { font-size: clamp(22px, 3vw, 26px); }
  .slc-bento-stat-caption { margin-top: 8px; font-size: 10.8px; }

  .slc-bento-users-card { grid-column: 1; grid-row: 3; padding: 17px 14px; }

  .slc-bento-transport-copy-bottom { grid-column: 1; grid-row: 4; padding: 12px 10px; }
  .slc-bento-transport-copy-bottom p { font-size: clamp(13px, 1.9vw, 16px); white-space: normal; }
  .slc-bento-transport-copy-bottom small { font-size: 9px; }

  .slc-bento-branching { grid-column: 2; grid-row: 3 / 5; }
  .slc-bento-keyword { grid-column: 3; grid-row: 3 / 5; }
  .slc-bento-templates-card { grid-column: 4; grid-row: 3 / 5; padding: 30px 16px 24px; }

  .slc-bento-feature-content { right: 18px; left: 18px; bottom: 23px; }
  .slc-bento-feature-card h2, .slc-bento-templates-card h2 { font-size: clamp(12px, 1.55vw, 13.3px); }
  .slc-bento-feature-card p, .slc-bento-templates-card p { font-size: clamp(9.6px, 1.2vw, 10.7px); line-height: 1.86; }
}

/* Feature cards only leave the shared center module below tablet width. */
@media (max-width: 767px) {
  .slc-bento-feature-card {
    overflow: hidden;
    background: var(--bento-feature-background-compact);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      inset 0 0 0 1px rgba(31,58,89,.06),
      0 13px 30px rgba(34,58,87,.10);
    filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Two-column compact layout for small tablets / large phones. */
@media (max-width: 767px) and (min-width: 600px) {
  .slc-bento-stage { display: block; padding: 16px; }
  .slc-bento-dashboard {
    --focus-size: 190px;
    --focus-gap: 6px;
    --focus-center-x: 50%;
    --focus-center-y: 286px;
    --hero-top-y: 0px;
    --hero-cutout-x: 50%;

    width: 100%;
    height: auto;
    padding: 0;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 378px 152px 104px 132px 184px 194px;
    gap: 12px;
  }
  .slc-bento-hero-card { grid-column: 1 / 3; grid-row: 1; height: 282px; }
  .slc-bento-hero-map { object-position: 38% center; }
  .slc-bento-hero-copy { top: 48px; right: 24px; width: 46%; }
  .slc-bento-hero-card h2 { font-size: clamp(25px, 4.2vw, 29px); white-space: normal; }
  .slc-bento-hero-copy p { font-size: 10px; }

  .slc-bento-intro-card { grid-column: 1; grid-row: 2 / 4; padding: 22px 20px; }
  .slc-bento-intro-card h2 { font-size: 19px; white-space: normal; }
  .slc-bento-trial-copy { right: 20px; left: 20px; bottom: 18px; }
  .slc-bento-users-card { grid-column: 2; grid-row: 2; padding: 18px 16px; }
  .slc-bento-transport-copy-top { grid-column: 2; grid-row: 3; padding: 12px 16px; }
  .slc-bento-transport-copy-top p { font-size: 15px; white-space: normal; }
  .slc-bento-transport-copy-top small { font-size: 9.2px; }
  .slc-bento-stat-card { grid-column: 1; grid-row: 4; justify-content: center; padding: 18px; }
  .slc-bento-transport-copy-bottom { grid-column: 2; grid-row: 4; padding: 12px 16px; }
  .slc-bento-transport-copy-bottom p { font-size: 15px; white-space: normal; }
  .slc-bento-branching { grid-column: 1; grid-row: 5; }
  .slc-bento-keyword { grid-column: 2; grid-row: 5; }
  .slc-bento-templates-card { grid-column: 1 / 3; grid-row: 6; padding: 24px 24px 20px; }

  .slc-bento-feature-content {
    position: static;
    height: 100%;
    padding: 0 22px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .slc-bento-feature-card h2, .slc-bento-templates-card h2 { font-size: 14.5px; }
  .slc-bento-feature-card p, .slc-bento-templates-card p { font-size: 11.2px; }
}

/* Mobile */
@media (max-width: 599px) {
  .slc-bento-stage { display: block; padding: 13px; }
  .slc-bento-dashboard {
    --focus-size: min(54vw, 205px);
    --focus-gap: 6px;
    --focus-center-x: 50%;
    --focus-center-y: calc(214px + var(--focus-radius));
    --hero-top-y: 0px;
    --hero-cutout-x: 50%;

    width: 100%;
    height: auto;
    padding: 0;
    overflow: visible;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 12px;
  }
  .slc-bento-hero-card {
    grid-column: 1;
    grid-row: 1;
    min-height: 320px;
    margin-bottom: calc(214px + var(--focus-size) - 320px + 16px);
  }
  .slc-bento-hero-map { object-position: 40% center; }
  .slc-bento-hero-copy { top: 45px; right: 20px; width: 60%; }
  .slc-bento-hero-card h2 { font-size: clamp(24px, 7.3vw, 32px); white-space: normal; }
  .slc-bento-hero-copy p { font-size: 10.3px; }

  .slc-bento-intro-card { grid-column: 1; grid-row: 2; min-height: 270px; }
  .slc-bento-intro-card h2 { white-space: normal; }
  .slc-bento-users-card { grid-column: 1; grid-row: 3; min-height: 138px; }
  .slc-bento-transport-copy-top { grid-column: 1; grid-row: 4; min-height: 102px; padding: 14px 13px; }
  .slc-bento-transport-copy-top p { white-space: normal; }
  .slc-bento-stat-card { grid-column: 1; grid-row: 5; min-height: 130px; justify-content: center; padding: 16px; }
  .slc-bento-branching { grid-column: 1; grid-row: 6; min-height: 178px; }
  .slc-bento-keyword { grid-column: 1; grid-row: 7; min-height: 178px; }
  .slc-bento-templates-card { grid-column: 1; grid-row: 8; min-height: 198px; padding-block: 22px 20px; }
  .slc-bento-transport-copy-bottom { grid-column: 1; grid-row: 9; min-height: 102px; padding: 14px 13px; }
  .slc-bento-transport-copy-bottom p { white-space: normal; }

  .slc-bento-feature-content {
    position: static;
    height: 100%;
    padding: 0 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .slc-bento-feature-card h2, .slc-bento-templates-card h2 { font-size: 14.8px; }
  .slc-bento-feature-card p, .slc-bento-templates-card p { font-size: 11.4px; line-height: 1.86; }
}

@media (max-width: 390px) {
  .slc-bento-stage { padding: 12px; }
  .slc-bento-intro-card { padding-inline: 22px; }
  .slc-bento-trial-copy { right: 22px; left: 22px; }
  .slc-bento-templates-card { padding-inline: 20px; }
  .slc-bento-hero-copy { width: 64%; }
}


/* Host integration */
#sahand-bento-light.slc-bento-light-section {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Host integration: fluid frame, shared type, and resilient content behavior. */
#sahand-bento-light.slc-bento-light-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 860px;
  color-scheme: light;
}

#sahand-bento-light .slc-bento-stage {
  min-height: 0;
  width: 100%;
  padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 64px);
  display: grid;
  place-items: center;
}

#sahand-bento-light .slc-bento-frame {
  position: relative;
  width: min(100%, 1320px);
  aspect-ratio: 970 / 728;
  container-type: inline-size;
}

#sahand-bento-light .slc-bento-dashboard {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 970px;
  height: 728px;
  margin: 0;
  transform: translate(-50%, -50%) scale(min(1.36, calc(100cqw / 970px)));
  transform-origin: center;
}

#sahand-bento-light .slc-bento-hero-card h2 {
  margin: 0;
  color: #fff;
  font-size: 25.5px;
  line-height: 1.34;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 2px 15px rgba(0,0,0,.72);
}

#sahand-bento-light .slc-bento-card h2,
#sahand-bento-light .slc-bento-transport-copy > p,
#sahand-bento-light .slc-bento-trial-copy strong {
  font-family: var(--font-display);
}

#sahand-bento-light .slc-bento-trial-copy,
#sahand-bento-light .slc-bento-transport-copy small,
#sahand-bento-light .slc-bento-feature-card p,
#sahand-bento-light .slc-bento-templates-card p {
  color: var(--muted);
}

#sahand-bento-light .slc-bento-transport-copy p,
#sahand-bento-light .slc-bento-feature-card h2,
#sahand-bento-light .slc-bento-templates-card h2 {
  color: var(--text);
}

#sahand-bento-light .slc-bento-users-copy {
  color: var(--muted);
}

#sahand-bento-light .slc-bento-stat-number {
  color: var(--violet-soft);
}

#sahand-bento-light .slc-bento-stat-caption {
  color: var(--violet-text);
}

#sahand-bento-light .slc-bento-transport-copy-top .slc-bento-transport-kicker {
  color: var(--warm);
}

#sahand-bento-light .slc-bento-transport-copy-bottom .slc-bento-transport-kicker {
  color: var(--violet-soft);
}

#sahand-bento-light .slc-bento-feature-card {
  background: var(--bento-feature-background);
}

#sahand-bento-light img {
  max-width: 100%;
}

#sahand-bento-light :where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--bento-focus-ring);
  outline-offset: 4px;
  border-radius: 6px;
}

#sahand-bento-light .slc-bento-card h2,
#sahand-bento-light .slc-bento-transport-copy p,
#sahand-bento-light .slc-bento-feature-card p,
#sahand-bento-light .slc-bento-templates-card p {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

@supports not (transform: scale(min(1.36, calc(100cqw / 970px)))) {
  #sahand-bento-light .slc-bento-frame {
    aspect-ratio: auto;
  }

  #sahand-bento-light .slc-bento-dashboard {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    transform: none;
  }
}

@media (max-width: 969px) {
  #sahand-bento-light .slc-bento-stage {
    display: block;
    padding: clamp(28px, 5vw, 52px) clamp(16px, 4vw, 32px);
  }

  #sahand-bento-light .slc-bento-frame {
    width: min(100%, 920px);
    aspect-ratio: auto;
  }

  #sahand-bento-light .slc-bento-dashboard {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin-inline: auto;
    transform: none;
  }

  #sahand-bento-light .slc-bento-hero-card h2 {
    font-size: clamp(21px, 3vw, 27px);
    line-height: 1.38;
    white-space: normal;
  }

  #sahand-bento-light .slc-bento-hero-copy p,
  #sahand-bento-light .slc-bento-trial-copy,
  #sahand-bento-light .slc-bento-transport-copy small,
  #sahand-bento-light .slc-bento-stat-caption,
  #sahand-bento-light .slc-bento-feature-card p,
  #sahand-bento-light .slc-bento-templates-card p {
    font-size: clamp(.72rem, 1.2vw, .9rem);
  }

  #sahand-bento-light .slc-bento-users-copy {
    font-size: clamp(.72rem, 1.2vw, .82rem);
    line-height: 1.75;
  }
}

@media (max-width: 767px) {
  #sahand-bento-light .slc-bento-stage {
    padding-block: clamp(28px, 7vw, 56px);
  }

  #sahand-bento-light .slc-bento-frame,
  #sahand-bento-light .slc-bento-dashboard {
    width: 100%;
  }

  #sahand-bento-light .slc-bento-hero-card h2 {
    font-size: clamp(25px, 4.2vw, 29px);
    white-space: normal;
  }

  #sahand-bento-light .slc-bento-hero-copy p {
    font-size: clamp(.78rem, 2.1vw, .95rem);
  }

  #sahand-bento-light .slc-bento-users-copy {
    font-size: clamp(.875rem, 2.1vw, 1rem);
    line-height: 1.75;
  }

  #sahand-bento-light .slc-bento-transport-copy small {
    font-size: clamp(.75rem, 2vw, .9rem);
  }

  #sahand-bento-light .slc-bento-feature-card p,
  #sahand-bento-light .slc-bento-templates-card p {
    font-size: clamp(.875rem, 2.3vw, 1rem);
    line-height: 1.8;
  }
}

@media (max-width: 599px) {
  #sahand-bento-light .slc-bento-stage {
    padding-inline-start: max(12px, env(safe-area-inset-left, 0px));
    padding-inline-end: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
  }

  #sahand-bento-light .slc-bento-hero-card h2 {
    font-size: clamp(24px, 7.3vw, 32px);
  }
}

@media (max-width: 969px) and (min-width: 768px) {
  #sahand-bento-light .slc-bento-users-number {
    font-size: clamp(22px, 3vw, 26px);
  }

  #sahand-bento-light .slc-bento-users-caption {
    margin-top: 4px;
    font-size: clamp(.75rem, 1.3vw, .86rem);
    line-height: 1.35;
  }

  #sahand-bento-light .slc-bento-users-copy {
    margin-top: 7px;
    font-size: clamp(.68rem, 1.1vw, .78rem);
    line-height: 1.55;
  }
}

@media (forced-colors: active) {
  #sahand-bento-light .slc-bento-card,
  #sahand-bento-light .slc-bento-center-visual {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

/* These supporting cards stay on the desktop composition only. */
@media (max-width: 64rem) {
  #sahand-bento-light .slc-bento-intro-card,
  #sahand-bento-light .slc-bento-stat-card,
  #sahand-bento-light .slc-bento-users-card {
    display: none;
  }
}

/* Reflow the remaining mobile Bento content after the desktop-only cards are removed. */
@media (max-width: 767px) and (min-width: 600px) {
  #sahand-bento-light .slc-bento-dashboard {
    grid-template-rows: 378px 104px 104px 184px 194px;
  }

  #sahand-bento-light .slc-bento-transport-copy-top {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  #sahand-bento-light .slc-bento-transport-copy-bottom {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  #sahand-bento-light .slc-bento-branching,
  #sahand-bento-light .slc-bento-keyword {
    grid-row: 4;
  }

  #sahand-bento-light .slc-bento-templates-card {
    grid-column: 1 / 3;
    grid-row: 5;
  }
}

@media (max-width: 599px) {
  #sahand-bento-light .slc-bento-transport-copy-top {
    grid-row: 2;
  }

  #sahand-bento-light .slc-bento-branching {
    grid-row: 3;
  }

  #sahand-bento-light .slc-bento-keyword {
    grid-row: 4;
  }

  #sahand-bento-light .slc-bento-templates-card {
    grid-row: 5;
  }

  #sahand-bento-light .slc-bento-transport-copy-bottom {
    grid-row: 6;
  }
}