.ss-page {
  --ss-violet: #7564f8;
  --ss-violet-dark: #5747d6;
  --ss-ink: var(--text-strong, #242230);
  --ss-muted: var(--text-muted, #696579);
  color: var(--ss-ink);
  background:
    linear-gradient(180deg, rgba(251,250,255,.98) 0%, rgba(245,241,255,.92) 30%, rgba(248,246,255,.88) 62%, rgba(241,237,255,.92) 100%);
  overflow: hidden;
}

.ss-page *, .ss-page *::before, .ss-page *::after { box-sizing: border-box; }
.ss-page h1, .ss-page h2, .ss-page h3 { font-family: var(--font-display); }
.ss-page h2 { margin: 0; font-size: clamp(34px, 5vw, 60px); letter-spacing: -.045em; line-height: .98; }

.ss-hero {
  position: relative;
  z-index: 1;
  padding: clamp(78px, 8vw, 104px) 0 clamp(62px, 7.2vw, 96px);
  background:
    radial-gradient(circle at 10% 22%, rgba(130, 110, 255, .22), transparent 28%),
    radial-gradient(circle at 91% 68%, rgba(199, 173, 255, .2), transparent 30%),
    linear-gradient(150deg, rgba(251, 250, 255, .98), rgba(243, 239, 255, .9));
}

.ss-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -72px;
  height: clamp(230px, 20vw, 310px);
  background: linear-gradient(180deg, rgba(246,242,255,0) 0%, rgba(246,242,255,.88) 58%, rgba(246,242,255,0) 100%);
  pointer-events: none;
}

.ss-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(350px, .72fr); align-items: center; gap: clamp(48px, 8vw, 116px); }
.ss-hero-copy { max-width: 800px; }
.ss-eyebrow, .ss-kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--ss-violet-dark); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ss-hero h1 { max-width: 860px; margin: 20px 0 24px; font-size: clamp(42px, 4.2vw, 56px); letter-spacing: -.052em; line-height: 1; }
.ss-lead { max-width: 750px; margin: 0; color: var(--ss-muted); font-size: clamp(19px, 2vw, 25px); line-height: 1.5; }
.ss-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.ss-primary { gap: 9px; }
.ss-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--ss-muted); font-size: 14px; font-weight: 650; }
.ss-trust li { display: flex; align-items: center; gap: 7px; }
.ss-trust i { color: var(--ss-violet); }
.ss-hero-note { max-width: 660px; margin: 16px 0 0; color: var(--ss-muted); font-size: 13px; line-height: 1.55; }

.ss-hero-panel { padding: 20px; border: 1px solid rgba(116, 95, 241, .18); border-radius: 34px; background: rgba(255, 255, 255, .78); box-shadow: 0 36px 100px rgba(75, 55, 158, .18); backdrop-filter: blur(18px); transform: rotate(1deg); }
.ss-panel-top { display: flex; justify-content: space-between; align-items: center; padding: 5px 6px 17px; color: var(--ss-muted); font-size: 12px; }
.ss-panel-top span { color: var(--ss-violet); font-weight: 900; letter-spacing: .08em; }
.ss-now-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 104px; padding: 18px; border-radius: 24px; background: linear-gradient(135deg, #7564f8, #9179eb); color: #fff; text-decoration: none; box-shadow: 0 18px 38px rgba(102, 82, 224, .26); transition: transform 160ms ease, box-shadow 160ms ease; }
.ss-now-card:hover { transform: translateY(-2px); box-shadow: 0 22px 42px rgba(102, 82, 224, .32); }
.ss-now-card .ss-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 16px; background: rgba(255,255,255,.16); font-size: 22px; }
.ss-now-card span:nth-child(2) { display: grid; gap: 5px; }
.ss-now-card small { opacity: .75; font-size: 11px; }
.ss-now-card strong { font-size: 15px; line-height: 1.25; }
.ss-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
.ss-panel-grid > span { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; min-height: 86px; align-content: center; padding: 14px; border: 1px solid rgba(116, 95, 241, .13); border-radius: 20px; background: rgba(250, 248, 255, .86); }
.ss-panel-grid i { grid-row: 1 / 3; color: var(--ss-violet); font-size: 20px; }
.ss-panel-grid strong { font-size: 13px; }
.ss-panel-grid small { color: var(--ss-muted); font-size: 10px; }
.ss-panel-status { display: flex; justify-content: center; align-items: center; gap: 7px; padding: 16px 0 2px; color: var(--ss-muted); font-size: 11px; }
.ss-panel-status span { width: 7px; height: 7px; border-radius: 50%; background: #44cc8b; box-shadow: 0 0 0 5px rgba(68, 204, 139, .12); }

.ss-hero-shots {
  position: relative;
  min-height: 650px;
  isolation: isolate;
}

.ss-hero-shots::before {
  content: "";
  position: absolute;
  inset: 9% -10% 2% 4%;
  z-index: -1;
  border-radius: 44px;
  background: radial-gradient(circle at 60% 35%, rgba(117, 100, 248, .24), transparent 46%), rgba(255,255,255,.36);
  filter: blur(.2px);
}

.ss-shot {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(116, 95, 241, .18);
  border-radius: 32px;
  background: #f8f4ff;
  box-shadow: 0 34px 100px rgba(75, 55, 158, .2);
}

.ss-shot-main {
  top: 18px;
  left: 4%;
  z-index: 3;
  width: min(390px, 78%);
  height: 575px;
}

.ss-shot-side {
  right: 0;
  width: min(245px, 46%);
  height: 370px;
  border-radius: 26px;
  box-shadow: 0 24px 70px rgba(75, 55, 158, .16);
}

.ss-shot-side-top {
  top: 88px;
  z-index: 2;
  transform: rotate(2deg);
}

.ss-shot-side-bottom {
  bottom: 30px;
  z-index: 1;
  transform: rotate(-3deg);
}

.ss-device {
  padding: 18px;
  color: #3a3156;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 241, 230, .78), transparent 28%),
    linear-gradient(180deg, #f7f2ff, #fffafd);
}

.ss-device-bar {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: #806be6;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .02em;
}

.ss-device-bar .ss-avatar {
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid rgba(128, 107, 230, .28);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.95), rgba(236,229,255,.92));
  color: #7860d8;
  font-size: 17px;
  line-height: 22px;
  box-shadow: 0 6px 14px rgba(80, 61, 160, .12);
}

.ss-device-date {
  margin: 20px 0 12px;
  color: #30294b;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  text-align: center;
}

.ss-calendar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 18px;
}

.ss-calendar span {
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid rgba(128, 107, 230, .2);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  color: #8b82a7;
  font-size: 10px;
  line-height: 1.1;
}

.ss-calendar b {
  color: #4c4267;
  font-size: 18px;
}

.ss-calendar .is-active {
  background: #fff;
  border-color: rgba(128, 107, 230, .45);
  box-shadow: 0 10px 24px rgba(128, 107, 230, .12);
}

.ss-phone-card {
  padding: 19px;
  border: 1px solid rgba(128, 107, 230, .2);
  border-radius: 26px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 20px 48px rgba(91, 74, 160, .1);
}

.ss-phone-card small,
.ss-mock-screen small {
  color: #9a83e9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ss-checkin-card {
  text-align: center;
}

.ss-checkin-card h3,
.ss-device-mini h3,
.ss-mock-screen h3 {
  margin: 12px 0 8px;
  color: #2f2946;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -.04em;
  line-height: 1;
}

.ss-checkin-card p,
.ss-device-mini p,
.ss-mock-screen p {
  margin: 0;
  color: #857a9d;
  font-size: 13px;
  line-height: 1.45;
}

.ss-checkin-card button {
  width: 100%;
  margin-top: 18px;
  padding: 14px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #7f68dd, #7860d8);
  color: #fff;
  font-weight: 850;
}

.ss-day-card {
  margin-top: 12px;
}

.ss-day-card strong {
  display: block;
  margin: 7px 0;
  color: #3f365b;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.05;
}

.ss-bottom-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 16px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  color: #8e83a9;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.ss-device-mini h3 {
  margin-top: 18px;
  font-size: 20px;
  text-align: center;
}

.ss-segment,
.ss-chat-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 16px 0 10px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  color: #82779b;
  font-size: 10px;
  text-align: center;
}

.ss-segment strong,
.ss-chat-switch strong {
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  color: #443b5b;
}

.ss-segment span,
.ss-chat-switch span {
  padding: 8px;
}

.ss-search,
.ss-chat-input {
  padding: 12px;
  border: 1px solid rgba(128, 107, 230, .15);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: #aaa2bb;
  font-size: 11px;
}

.ss-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.ss-mini-grid span {
  display: grid;
  min-height: 72px;
  place-items: center;
  border: 1px solid rgba(128, 107, 230, .13);
  border-radius: 18px;
  background: rgba(255,255,255,.8);
  font-size: 11px;
  font-weight: 850;
}

.ss-chat-intro {
  margin: 18px 0 !important;
  color: #4b4264 !important;
  font-weight: 750;
}

.ss-chat-bubble {
  margin: 16px 0 12px;
  padding: 16px;
  border-radius: 22px 22px 8px 22px;
  background: #836cdc;
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.ss-section { position: relative; padding: clamp(52px, 6.3vw, 90px) 0; }
.ss-section > .container,
.ss-final > .container { position: relative; z-index: 1; }
.ss-heading { max-width: 720px; }
.ss-heading h2 { margin-top: 14px; }
.ss-heading p, .ss-section-lead { margin: 18px 0 0; color: var(--ss-muted); font-size: 18px; line-height: 1.65; }
.ss-heading-wide { max-width: 900px; }
.ss-situations .ss-heading h2,
.ss-interface .ss-heading h2 { font-size: clamp(32px, 4.25vw, 52px); line-height: 1.02; }

.ss-interface {
  padding-bottom: clamp(34px, 4vw, 58px);
  background:
    radial-gradient(circle at 20% 10%, rgba(117,100,248,.08), transparent 34%),
    linear-gradient(180deg, rgba(245,241,255,.5) 0%, rgba(245,241,255,.74) 34%, rgba(244,240,255,.74) 100%);
}

.ss-screen-grid {
  display: grid;
  grid-template-columns: 1.12fr repeat(3, minmax(0, .82fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 46px;
}

.ss-screen-card {
  display: grid;
  grid-template-rows: minmax(330px, 56vh) auto;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(116, 95, 241, .14);
  border-radius: 30px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 22px 58px rgba(62,48,123,.08);
}

.ss-screen-card-wide {
  grid-template-rows: minmax(430px, 72vh) auto;
}

.ss-screen-card figcaption {
  display: grid;
  gap: 6px;
  padding: 18px 20px 20px;
  border-top: 1px solid rgba(116,95,241,.12);
}

.ss-screen-card strong {
  font-family: var(--font-display);
  font-size: 19px;
}

.ss-screen-card span {
  color: var(--ss-muted);
  font-size: 13px;
  line-height: 1.45;
}

.ss-scenario-showcase {
  display: grid;
  grid-template-columns: minmax(380px, 1.08fr) minmax(360px, .92fr);
  gap: clamp(30px, 5vw, 74px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 46px);
}

.ss-scenario-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ss-scenario-visual {
  display: grid;
  justify-items: center;
  gap: 20px;
}

.ss-scenario-phone {
  position: relative;
  width: min(390px, 100%);
  height: 604px;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(157, 139, 255, .2);
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 8%, rgba(117,100,248,.16), transparent 34%),
    radial-gradient(circle at 20% 72%, rgba(117,100,248,.12), transparent 38%),
    linear-gradient(180deg, #1c1830 0%, #151321 100%);
  box-shadow: 0 34px 100px rgba(38, 28, 88, .26);
}

.ss-scenario-phone::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 72px;
  background: linear-gradient(transparent, rgba(21, 19, 33, .96));
  pointer-events: none;
}

.ss-scenario-phone .ss-device-bar {
  position: relative;
  z-index: 3;
  height: 42px;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(157,139,255,.09);
  color: #8d7bff;
}

.ss-scenario-phone .ss-device-bar strong {
  color: #8d7bff;
  font-size: 12px;
  letter-spacing: .04em;
}

.ss-scenario-phone .ss-avatar {
  background: rgba(255,255,255,.09);
  color: #f4f0ff;
  box-shadow: inset 0 0 0 1px rgba(157,139,255,.28);
}

.ss-scenario-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(300px, 82%);
  gap: 18px;
}

.ss-scenario-progress::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 12%;
  right: 12%;
  border-top: 1px dashed rgba(117,100,248,.28);
}

.ss-scenario-progress label {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--ss-muted);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.ss-scenario-progress label::before {
  content: "";
  z-index: 1;
  width: 15px;
  height: 15px;
  border: 3px solid var(--bg-main);
  border-radius: 50%;
  background: #cfc7ea;
  box-shadow: 0 0 0 1px rgba(117,100,248,.18);
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

#ss-scenario-checkin:checked ~ .ss-scenario-visual .ss-scenario-progress label[for="ss-scenario-checkin"],
#ss-scenario-support:checked ~ .ss-scenario-visual .ss-scenario-progress label[for="ss-scenario-support"],
#ss-scenario-action:checked ~ .ss-scenario-visual .ss-scenario-progress label[for="ss-scenario-action"] { color: var(--ss-ink); }

#ss-scenario-checkin:checked ~ .ss-scenario-visual .ss-scenario-progress label[for="ss-scenario-checkin"]::before,
#ss-scenario-support:checked ~ .ss-scenario-visual .ss-scenario-progress label[for="ss-scenario-support"]::before,
#ss-scenario-action:checked ~ .ss-scenario-visual .ss-scenario-progress label[for="ss-scenario-action"]::before { background: var(--ss-violet); box-shadow: 0 0 0 5px rgba(117,100,248,.13); transform: scale(1.08); }

.ss-scenario-panel {
  position: absolute;
  inset: 58px 16px 16px;
  overflow: hidden;
  border-radius: 0 0 24px 24px;
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

#ss-scenario-checkin:checked ~ .ss-scenario-visual [data-scenario="checkin"],
#ss-scenario-support:checked ~ .ss-scenario-visual [data-scenario="support"],
#ss-scenario-action:checked ~ .ss-scenario-visual [data-scenario="action"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.ss-scenario-controls {
  display: grid;
  gap: 12px;
}

.ss-scenario-controls label {
  display: grid;
  grid-template-columns: 30px auto 1fr;
  gap: 15px;
  align-items: center;
  min-height: 108px;
  padding: 20px;
  border: 1px solid rgba(116, 95, 241, .14);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 18px 44px rgba(62,48,123,.06);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.ss-scenario-controls label::before {
  content: attr(data-step);
  align-self: start;
  padding-top: 4px;
  color: rgba(87, 71, 214, .62);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.ss-scenario-controls label:hover {
  transform: translateY(-2px);
  border-color: rgba(116, 95, 241, .26);
  box-shadow: 0 22px 52px rgba(62,48,123,.09);
}

.ss-scenario-controls i {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 15px;
  background: rgba(117,100,248,.1);
  color: var(--ss-violet);
  font-size: 20px;
}

.ss-scenario-controls span {
  display: grid;
  gap: 5px;
}

.ss-scenario-controls strong {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -.025em;
}

.ss-scenario-controls small {
  color: var(--ss-muted);
  font-size: 14px;
  line-height: 1.45;
}

.ss-demo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding: 17px 20px;
  border-radius: 18px;
  background: var(--ss-ink);
  color: #fff;
  font-weight: 850;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}

.ss-demo-cta:hover { transform: translateY(-2px); background: var(--ss-violet-dark); }

#ss-scenario-checkin:checked ~ .ss-scenario-controls label[for="ss-scenario-checkin"],
#ss-scenario-support:checked ~ .ss-scenario-controls label[for="ss-scenario-support"],
#ss-scenario-action:checked ~ .ss-scenario-controls label[for="ss-scenario-action"] {
  border-color: rgba(117,100,248,.38);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(247,244,255,.9));
  box-shadow: 0 24px 62px rgba(62,48,123,.12);
}

#ss-scenario-checkin:checked ~ .ss-scenario-controls label[for="ss-scenario-checkin"] i,
#ss-scenario-support:checked ~ .ss-scenario-controls label[for="ss-scenario-support"] i,
#ss-scenario-action:checked ~ .ss-scenario-controls label[for="ss-scenario-action"] i {
  background: var(--ss-violet);
  color: #fff;
}

.ss-mock-screen {
  min-height: 0;
  height: auto;
  padding: 21px 20px 18px;
  background:
    radial-gradient(circle at 86% 10%, rgba(117,100,248,.16), transparent 32%),
    linear-gradient(180deg, #222036 0%, #151321 100%);
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .ss-scenario-controls label,
  .ss-scenario-controls label * {
    cursor: none !important;
  }
}

.ss-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  color: #a696ff;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ss-mock-head button {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: #d0c3ed;
  color: #fff;
  font-weight: 850;
}

.ss-state-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.ss-state-grid span {
  display: grid;
  justify-items: center;
  gap: 7px;
  min-height: 112px;
  padding: 15px 8px 13px;
  border: 1px solid rgba(157,139,255,.16);
  border-radius: 20px;
  background: rgba(255,255,255,.065);
  text-align: center;
}

.ss-state-grid i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 16px;
  background: rgba(117,100,248,.16);
  color: #a696ff;
  font-size: 20px;
}

.ss-state-grid strong {
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
}

.ss-state-grid small {
  color: #b8b1ce;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.ss-state-grid .is-selected {
  border-color: rgba(255, 189, 80, .7);
  background: rgba(255, 189, 80, .11);
}

.ss-state-grid .is-selected strong,
.ss-state-grid .is-selected i {
  color: #a55412;
}

.ss-state-note {
  display: grid;
  gap: 7px;
  margin-top: 13px;
  padding: 15px;
  border: 1px solid rgba(157,139,255,.3);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(117,100,248,.2), rgba(117,100,248,.12));
  color: #dcd5ff;
}

.ss-state-note strong {
  font-family: var(--font-display);
  font-size: 18px;
}

.ss-textarea {
  min-height: 245px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(128, 107, 230, .18);
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  color: #b9b2c7;
  font-size: 17px;
  line-height: 1.35;
}

.ss-progress {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}

.ss-progress span,
.ss-progress i {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: rgba(128, 107, 230, .18);
}

.ss-progress span {
  width: 32px;
  background: #806be6;
}

.ss-back {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  color: #82779b;
  font-size: 12px;
  font-weight: 750;
}

.ss-tech-list,
.ss-plan-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.ss-tech-list span,
.ss-plan-list span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 16px;
  border: 1px solid rgba(128, 107, 230, .14);
  border-radius: 22px;
  background: rgba(255,255,255,.74);
}

.ss-tech-list i {
  grid-row: 1 / 3;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  background: rgba(128, 107, 230, .1);
  color: #806be6;
}

.ss-tech-list strong,
.ss-plan-list span {
  color: #4b4264;
  font-weight: 850;
}

.ss-tech-list small {
  color: #82779b;
  font-size: 11px;
}

.ss-crisis-card {
  display: grid;
  gap: 6px;
  margin-top: 22px;
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff3f5, #f5eafa);
  border: 1px solid rgba(212, 86, 117, .22);
  color: #8f3d55;
}

.ss-crisis-card small {
  color: rgba(143, 61, 85, .72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ss-crisis-card strong {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
}

.ss-plan-list span {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ss-plan-list b {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(128,107,230,.12);
  color: #806be6;
  font-size: 10px;
  text-transform: uppercase;
}

.ss-situations {
  position: relative;
  z-index: 0;
  margin-top: 0;
  padding: clamp(58px, 6.4vw, 86px) 0 clamp(34px, 4.4vw, 60px);
  background:
    radial-gradient(circle at 78% 12%, rgba(117,100,248,.08), transparent 34%),
    linear-gradient(180deg, rgba(246,242,255,.96) 0%, rgba(246,242,255,.9) 42%, rgba(245,241,255,.5) 100%);
}
.ss-situations + .ss-interface { padding-top: clamp(34px, 4.6vw, 62px); }
.ss-start-guide { position: relative; display: grid; grid-template-columns: minmax(320px, .9fr) minmax(390px, 1.1fr); gap: clamp(24px, 5vw, 68px); align-items: stretch; margin-top: 42px; }
.ss-start-input { position: absolute; opacity: 0; pointer-events: none; }
.ss-start-choices { display: grid; gap: 5px; padding-top: 2px; }
.ss-start-choices label { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; min-height: 58px; padding: 12px 14px 12px 17px; border: 1px solid rgba(116,95,241,.09); border-radius: 14px; background: rgba(255,255,255,.36); color: rgba(66,61,84,.76); cursor: pointer; box-shadow: 0 10px 28px rgba(75,61,140,0); transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease; }
.ss-start-choices label::before { content: ""; position: absolute; inset: 10px auto 10px 0; width: 4px; border-radius: 99px; background: transparent; transition: background 180ms ease, box-shadow 180ms ease; }
.ss-start-choices label:hover { transform: translateX(2px); border-color: rgba(117,100,248,.2); background: rgba(117,100,248,.055); color: var(--ss-ink); box-shadow: 0 12px 32px rgba(75,61,140,.045); }
.ss-start-choices label span { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.28; }
.ss-start-choices label i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(117,100,248,.055); color: rgba(117,100,248,.52); opacity: .86; transition: color 180ms ease, opacity 180ms ease, transform 180ms ease, background 180ms ease; }
.ss-start-results { position: relative; min-height: 100%; overflow: hidden; border: 1px solid rgba(117,100,248,.17); border-radius: 30px; background: radial-gradient(circle at 88% 12%, rgba(187,170,255,.2), transparent 30%), linear-gradient(145deg, #fff, #f5f1ff); box-shadow: 0 24px 70px rgba(62,48,123,.11); }
.ss-start-results article { position: absolute; inset: 0; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto auto; gap: 8px 16px; padding: clamp(28px, 4.5vw, 48px); color: var(--ss-ink); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 260ms ease, transform 260ms ease; }
.ss-start-results article > i { grid-row: 1 / 3; display: grid; width: 50px; height: 50px; place-items: center; border-radius: 16px; background: rgba(117,100,248,.11); color: var(--ss-violet); font-size: 21px; }
.ss-start-results article small { align-self: end; color: var(--ss-violet-dark); font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.ss-start-results article h3 { margin: 0; font-size: clamp(28px, 3vw, 40px); }
.ss-start-results article p { grid-column: 1 / -1; align-self: end; margin: 20px 0 10px; color: var(--ss-muted); font-size: 17px; line-height: 1.65; }
.ss-start-proof { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.ss-start-proof span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid rgba(117,100,248,.16); border-radius: 999px; background: rgba(255,255,255,.68); color: var(--ss-violet-dark); font-size: 12px; font-weight: 850; letter-spacing: .02em; }
.ss-start-proof span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ss-violet); box-shadow: 0 0 0 4px rgba(117,100,248,.1); }
.ss-start-results article a { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 19px; border: 1px solid rgba(117,100,248,.18); border-radius: 17px; background: rgba(117,100,248,.08); color: var(--ss-violet-dark); font-weight: 850; text-decoration: none; }
.ss-start-results article a:hover { background: rgba(117,100,248,.14); }
#ss-start-confused:checked ~ .ss-start-results [data-start-result="confused"],
#ss-start-talk:checked ~ .ss-start-results [data-start-result="talk"],
#ss-start-now:checked ~ .ss-start-results [data-start-result="now"],
#ss-start-brief:checked ~ .ss-start-results [data-start-result="brief"],
#ss-start-ashamed:checked ~ .ss-start-results [data-start-result="ashamed"],
#ss-start-not-ready:checked ~ .ss-start-results [data-start-result="not-ready"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
#ss-start-confused:checked ~ .ss-start-choices label[for="ss-start-confused"],
#ss-start-talk:checked ~ .ss-start-choices label[for="ss-start-talk"],
#ss-start-now:checked ~ .ss-start-choices label[for="ss-start-now"],
#ss-start-brief:checked ~ .ss-start-choices label[for="ss-start-brief"],
#ss-start-ashamed:checked ~ .ss-start-choices label[for="ss-start-ashamed"],
#ss-start-not-ready:checked ~ .ss-start-choices label[for="ss-start-not-ready"] { border-color: rgba(117,100,248,.28); background: linear-gradient(90deg, rgba(117,100,248,.14), rgba(255,255,255,.72)); color: var(--ss-ink); box-shadow: 0 16px 38px rgba(75,61,140,.08); }
#ss-start-confused:checked ~ .ss-start-choices label[for="ss-start-confused"]::before,
#ss-start-talk:checked ~ .ss-start-choices label[for="ss-start-talk"]::before,
#ss-start-now:checked ~ .ss-start-choices label[for="ss-start-now"]::before,
#ss-start-brief:checked ~ .ss-start-choices label[for="ss-start-brief"]::before,
#ss-start-ashamed:checked ~ .ss-start-choices label[for="ss-start-ashamed"]::before,
#ss-start-not-ready:checked ~ .ss-start-choices label[for="ss-start-not-ready"]::before { background: var(--ss-violet); box-shadow: 0 0 14px rgba(117,100,248,.3); }
#ss-start-confused:checked ~ .ss-start-choices label[for="ss-start-confused"] i,
#ss-start-talk:checked ~ .ss-start-choices label[for="ss-start-talk"] i,
#ss-start-now:checked ~ .ss-start-choices label[for="ss-start-now"] i,
#ss-start-brief:checked ~ .ss-start-choices label[for="ss-start-brief"] i,
#ss-start-ashamed:checked ~ .ss-start-choices label[for="ss-start-ashamed"] i,
#ss-start-not-ready:checked ~ .ss-start-choices label[for="ss-start-not-ready"] i { background: rgba(117,100,248,.14); color: var(--ss-violet); opacity: 1; transform: translateX(4px); }

.ss-anonymous {
  background:
    radial-gradient(circle at 92% 18%, rgba(117,100,248,.08), transparent 34%),
    linear-gradient(180deg, rgba(244,240,255,.74) 0%, rgba(241,237,255,.72) 100%);
}
.ss-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(45px, 9vw, 130px); align-items: start; }
.ss-split h2 { margin-top: 14px; }
.ss-privacy-list { display: grid; gap: 12px; }
.ss-privacy-list article { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px; border: 1px solid rgba(116,95,241,.14); border-radius: 24px; background: rgba(255,255,255,.7); }
.ss-privacy-list i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 15px; background: rgba(117,100,248,.1); color: var(--ss-violet); font-size: 20px; }
.ss-privacy-list span { display: grid; gap: 6px; }
.ss-privacy-list small { color: var(--ss-muted); font-size: 14px; line-height: 1.5; }

.ss-free-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(320px, .78fr); gap: 28px clamp(34px, 5.4vw, 72px); align-items: start; padding: clamp(34px, 5.4vw, 64px); border: 1px solid rgba(116,95,241,.18); border-radius: 38px; background: radial-gradient(circle at 12% 16%, rgba(157,139,255,.22), transparent 32%), linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,246,255,.72)); box-shadow: 0 30px 90px rgba(75, 61, 140, .10); overflow: hidden; }
.ss-free-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(180deg, rgba(117,100,248,.95), rgba(202,184,255,.32)); }
.ss-free-card::after { content: ""; position: absolute; right: -74px; bottom: -92px; width: 250px; height: 250px; border-radius: 50%; background: rgba(117,100,248,.09); pointer-events: none; }
.ss-free-intro, .ss-free-included, .ss-free-terms { position: relative; z-index: 1; }
.ss-free-card h2 { max-width: 760px; margin-top: 14px; }
.ss-free-card p { max-width: 680px; color: var(--ss-ink-soft); font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; }
.ss-free-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--ss-violet); font-weight: 900; text-decoration: none; }
.ss-free-link:hover { color: var(--ss-violet-strong); }
.ss-free-included { padding: 24px; border: 1px solid rgba(116,95,241,.14); border-radius: 28px; background: rgba(255,255,255,.68); box-shadow: 0 18px 42px rgba(75,61,140,.08); }
.ss-free-included > strong { display: block; margin-bottom: 16px; font-family: var(--font-display); font-size: 21px; }
.ss-free-included ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ss-free-included li { position: relative; padding: 13px 0 13px 34px; border-bottom: 1px solid rgba(116,95,241,.12); color: var(--ss-ink); font-weight: 800; }
.ss-free-included li:last-child { border-bottom: 0; padding-bottom: 4px; }
.ss-free-included li::before { content: "✓"; position: absolute; left: 0; top: 12px; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: rgba(117,100,248,.11); color: var(--ss-violet); font-size: 13px; font-weight: 900; }
.ss-free-terms { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 4px; color: var(--ss-muted); font-size: 15px; line-height: 1.55; }
.ss-free-terms span { display: block; min-height: 76px; padding: 20px 22px; border: 1px solid rgba(116,95,241,.13); border-radius: 24px; background: rgba(255,255,255,.58); }
.ss-free-terms strong { color: var(--ss-ink); }

.ss-boundaries-card { display: block; }
.ss-boundaries-main { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: clamp(30px, 5vw, 56px); border: 1px solid rgba(116,95,241,.16); border-radius: 34px; background: linear-gradient(145deg, rgba(72, 61, 126, .94), rgba(43, 37, 70, .94)); color: #fff; box-shadow: 0 28px 76px rgba(55,47,91,.15); }
.ss-boundaries-main .ss-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 18px; background: rgba(117,100,248,.11); color: var(--ss-violet); font-size: 25px; }
.ss-boundaries-main h2 { margin-top: 12px; font-size: clamp(30px, 4vw, 48px); }
.ss-boundaries-main .ss-kicker { color: rgba(219,214,255,.74); }
.ss-boundaries-main .ss-icon { background: rgba(255,255,255,.1); color: #d9d0ff; }
.ss-boundaries-main p { max-width: 890px; color: rgba(255,255,255,.74); line-height: 1.65; }
.ss-boundaries-alert { margin: 22px 0 0; padding: 18px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 22px; background: rgba(255,255,255,.07); }
.ss-boundaries-alert strong { color: #fff; }

.ss-free {
  background: linear-gradient(180deg, rgba(241,237,255,.72) 0%, rgba(241,237,255,.54) 100%);
}
.ss-boundaries {
  padding-bottom: clamp(46px, 5.6vw, 80px);
  background: linear-gradient(180deg, rgba(241,237,255,.54) 0%, rgba(241,237,255,.38) 100%);
}
.ss-faq {
  padding-top: 36px;
  background: linear-gradient(180deg, rgba(241,237,255,.38) 0%, rgba(241,237,255,.22) 100%);
}
.ss-faq-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(44px, 8vw, 110px); align-items: start; }
.ss-faq-list.faq-accordion { gap: 16px; margin-top: 0; }
.ss-faq-list .faq-item[open] summary { padding-bottom: 12px; }
.ss-faq-list .faq-item[open] .faq-content { padding-top: 0; }
.ss-faq-list .faq-item summary::after { content: "+"; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ss-violet); font-size: 24px; font-weight: 400; transform: none; }
.ss-faq-list .faq-item[open] summary::after { content: "−"; background: rgba(117,100,248,.1); transform: none; }
.ss-faq-list .faq-item summary:hover::after,
.ss-faq-list .faq-item[open] summary:hover::after { background: rgba(117,100,248,.12); transform: none; }

.ss-final {
  padding: 20px 0 clamp(90px, 11vw, 150px);
  background: linear-gradient(180deg, rgba(241,237,255,.22) 0%, rgba(241,237,255,0) 100%);
}
.ss-final-card { display: grid; justify-items: center; padding: clamp(46px, 8vw, 92px) 24px; border-radius: 44px; background: radial-gradient(circle at 50% 0%, rgba(160,135,255,.44), transparent 40%), linear-gradient(145deg, #28233a, #181624); color: #fff; text-align: center; box-shadow: 0 38px 100px rgba(30,25,55,.2); }
.ss-final-card .ss-eyebrow { color: #c9beff; }
.ss-final-card h2 { max-width: 900px; margin-top: 18px; }
.ss-final-card p { max-width: 660px; margin: 20px 0 28px; color: rgba(255,255,255,.68); font-size: 18px; line-height: 1.6; }
.ss-final-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.ss-final-trust li { padding: 7px 10px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.76); font-size: 12px; font-weight: 800; }
.ss-final-card small { margin-top: 16px; color: rgba(255,255,255,.48); }

/* One clear hero proof instead of a decorative phone stack. */
.ss-hero-shots { display: grid; min-height: 580px; place-items: center; }
.ss-hero-shots::before { inset: 8% 3%; border-radius: 50%; background: radial-gradient(circle, rgba(117,100,248,.2), transparent 66%); filter: blur(10px); }
.ss-hero-shots .ss-shot-main { position: relative; inset: auto; width: min(410px, 92%); height: 545px; transform: rotate(.5deg); }
.ss-hero-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background:
    radial-gradient(circle at 84% 8%, rgba(117,100,248,.16), transparent 34%),
    radial-gradient(circle at 18% 84%, rgba(117,100,248,.12), transparent 38%),
    linear-gradient(180deg, #1d1930 0%, #151321 100%);
  color: #fff;
}
.ss-hero-chat .ss-device-bar {
  height: 42px;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(157,139,255,.1);
  color: #8d7bff;
}
.ss-hero-chat .ss-device-bar strong {
  color: #8d7bff;
  font-size: 12px;
  letter-spacing: .04em;
}
.ss-hero-chat .ss-avatar {
  background: rgba(255,255,255,.09);
  color: #f4f0ff;
  box-shadow: inset 0 0 0 1px rgba(157,139,255,.28);
}
.ss-chat-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border: 1px solid rgba(157,139,255,.18); border-radius: 999px; background: rgba(255,255,255,.08); color: #a9a0bd; font-size: 12px; font-weight: 780; }
.ss-chat-mode span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 8px; border-radius: 999px; }
.ss-chat-mode .is-active { background: rgba(255,255,255,.94); color: #1d1930; box-shadow: 0 8px 22px rgba(0,0,0,.16); }
.ss-human-card { display: grid; gap: 10px; padding: 16px; border-color: rgba(157,139,255,.16); background: rgba(255,255,255,.065); }
.ss-human-card small,
.ss-ai-card small { color: #a696ff; }
.ss-human-card h3 { margin: 0; color: #fff; font-size: 24px; line-height: 1.04; }
.ss-hero-thread { display: grid; gap: 8px; }
.ss-bubble { display: block; max-width: 88%; padding: 11px 13px; font-size: 11px; line-height: 1.42; }
.ss-bubble-user {
  justify-self: end;
  border-radius: 16px 16px 5px 16px;
  background: linear-gradient(135deg, #8d74ff, #735cf0);
  color: #fff;
  font-weight: 760;
}
.ss-bubble-reply {
  justify-self: start;
  border: 1px solid rgba(157,139,255,.16);
  border-radius: 16px 16px 16px 5px;
  background: rgba(255,255,255,.075);
  color: #e8e3ff;
}
.ss-bubble-meta {
  max-width: 100%;
  padding: 0;
  color: #a9a0bd;
  font-size: 10px;
}
.ss-bubble-meta i { color: #a696ff; }
.ss-message-preview { padding: 14px 16px; border-radius: 18px 18px 5px 18px; background: linear-gradient(135deg, #7564f8, #8e75df); color: #fff; font-size: 13px; line-height: 1.45; }
.ss-human-card p, .ss-ai-card p { margin: 0; color: #b8b1ce; font-size: 11px; line-height: 1.45; }
.ss-human-card p i { color: #a696ff; }
.ss-ai-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 15px; border-color: rgba(157,139,255,.16); background: linear-gradient(180deg, rgba(117,100,248,.14), rgba(255,255,255,.055)); }
.ss-ai-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: rgba(117,100,248,.16); color: #a696ff; }
.ss-ai-card > div { display: grid; gap: 5px; }
.ss-ai-card strong { color: #fff; font-size: 12px; line-height: 1.35; }
.ss-ai-card p { grid-column: 1 / -1; padding-top: 9px; border-top: 1px solid rgba(157,139,255,.13); }
.ss-catalog-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.ss-catalog-proof span { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid rgba(157,139,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); color: #d8d0ff; font-size: 9px; font-weight: 760; }
.ss-bottom-tabs strong { color: #7564f8; }

/* Three complete product stories. */
.ss-state-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 15px; }
.ss-state-grid span { min-height: 104px; padding: 13px 7px; }
.ss-state-grid strong { font-size: 17px; }
.ss-state-note small { color: #a696ff; }
.ss-state-note strong { color: #fff; font-size: 18px; }
.ss-state-note span { color: #c9c1df; font-size: 11px; line-height: 1.4; }
.ss-state-note button, .ss-action-button, .ss-plan-ready button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 14px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #8d74ff, #735cf0); color: #fff; font-size: 11px; font-weight: 850; box-shadow: 0 10px 28px rgba(117,100,248,.18); }
.ss-mock-support { display: flex; flex-direction: column; gap: 12px; }
.ss-mock-support .ss-chat-mode { margin-bottom: 2px; background: rgba(255,255,255,.08); border-color: rgba(157,139,255,.18); color: #a9a0bd; }
.ss-mock-support .ss-chat-mode .is-active { background: rgba(255,255,255,.94); color: #1d1930; }
.ss-support-status { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 13px; border: 1px solid rgba(157,139,255,.13); border-radius: 16px; background: rgba(255,255,255,.065); }
.ss-support-status > span { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #f3b64f; box-shadow: 0 0 0 5px rgba(243,182,79,.12); }
.ss-support-status div { display: grid; gap: 3px; }
.ss-support-status strong { color: #fff; font-size: 12px; }
.ss-support-status small { color: #b8b1ce; font-size: 9px; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.ss-ready-label { color: #9f8fff; font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.ss-ready-phrases { display: flex; flex-wrap: wrap; gap: 7px; }
.ss-ready-phrases span { padding: 8px 10px; border: 1px solid rgba(157,139,255,.18); border-radius: 999px; background: rgba(255,255,255,.065); color: #ded8ff; font-size: 9px; }
.ss-user-message { align-self: end; max-width: 84%; padding: 13px 15px; border-radius: 18px 18px 5px 18px; background: #806be6; color: #fff; font-size: 12px; line-height: 1.4; }
.ss-waiting-note { display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 12px; border: 1px solid rgba(157,139,255,.2); border-radius: 16px; background: rgba(117,100,248,.12); color: #c9c1df; font-size: 10px; line-height: 1.45; }
.ss-waiting-note i { color: #a696ff; }
.ss-waiting-note strong { color: #fff; }
.ss-message-input { display: flex; justify-content: space-between; margin-top: auto; padding: 13px 15px; border: 1px solid rgba(157,139,255,.16); border-radius: 17px; background: rgba(255,255,255,.07); color: #b8b1ce; font-size: 11px; }
.ss-message-input i { color: #a696ff; }
.ss-mock-action > small { display: inline-block; margin-top: 6px; color: #9f8fff; font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.ss-mock-action > h3 { max-width: 330px; margin: 16px 0 6px; color: #fff; }
.ss-mock-action > p { color: #d8d0ff; }
.ss-grounding-step { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin: 20px 0 13px; padding: 18px; border: 1px solid rgba(157,139,255,.2); border-radius: 22px; background: rgba(255,255,255,.07); }
.ss-grounding-step > strong { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 18px; background: linear-gradient(135deg, #8d74ff, #735cf0); color: #fff; font-family: var(--font-display); font-size: 34px; }
.ss-grounding-step > span { display: grid; gap: 4px; color: #fff; font-weight: 820; }
.ss-grounding-step small { color: #b8b1ce; font-size: 10px; letter-spacing: 0; text-transform: none; }
.ss-action-button { margin-bottom: 16px; }
.ss-plan-ready { display: grid; gap: 11px; padding: 16px; border: 1px solid rgba(93,177,136,.28); border-radius: 22px; background: rgba(66, 112, 87, .22); }
.ss-plan-ready > div { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.ss-plan-ready i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; background: rgba(67,166,118,.16); color: #7ee0a5; }
.ss-plan-ready span { display: grid; gap: 2px; }
.ss-plan-ready small { color: #9fe0be; }
.ss-plan-ready strong { color: #e8fff1; font-size: 13px; }
.ss-plan-ready p { margin: 0; color: #bddbc9; font-size: 10px; }
.ss-plan-ready button { background: #417b60; box-shadow: none; }

html[data-theme="dark"] .ss-page {
  --ss-ink: #f5f2ff;
  --ss-muted: #aaa4c2;
  background:
    radial-gradient(circle at 86% 8%, rgba(117,100,248,.12), transparent 26%),
    linear-gradient(180deg, #171426 0%, #1d1930 28%, #201c32 58%, #1b1828 100%);
}
html[data-theme="dark"] .ss-hero {
  background:
    radial-gradient(circle at 8% 24%, rgba(118,95,239,.3), transparent 29%),
    radial-gradient(circle at 92% 70%, rgba(129,104,230,.18), transparent 30%),
    linear-gradient(150deg, #171426 0%, #1d1930 68%, #201c32 100%);
}
html[data-theme="dark"] .ss-hero::after {
  height: clamp(240px, 21vw, 330px);
  background: linear-gradient(180deg, rgba(32,28,50,0) 0%, rgba(33,29,52,.82) 58%, rgba(33,29,52,0) 100%);
}
html[data-theme="dark"] .ss-hero-panel,
html[data-theme="dark"] .ss-shot,
html[data-theme="dark"] .ss-device,
html[data-theme="dark"] .ss-mock-screen,
html[data-theme="dark"] .ss-screen-card,
html[data-theme="dark"] .ss-privacy-list article,
html[data-theme="dark"] .ss-boundaries-main { background: rgba(29,25,45,.82); border-color: rgba(157,139,255,.18); }
html[data-theme="dark"] .ss-panel-grid > span { background: rgba(37,31,57,.9); border-color: rgba(157,139,255,.17); }
html[data-theme="dark"] .ss-situations {
  background:
    radial-gradient(circle at 92% 14%, rgba(117,100,248,.16), transparent 34%),
    linear-gradient(180deg, #211d34 0%, #211d34 34%, #201c32 72%, #1f1b30 100%);
}
html[data-theme="dark"] .ss-anonymous {
  background:
    radial-gradient(circle at 92% 18%, rgba(117,100,248,.1), transparent 34%),
    linear-gradient(180deg, #201c32 0%, #1f1b30 100%);
}
html[data-theme="dark"] .ss-interface {
  background:
    radial-gradient(circle at 22% 18%, rgba(117,100,248,.12), transparent 36%),
    linear-gradient(180deg, #1f1b30 0%, #201c32 48%, #201c32 100%);
}
html[data-theme="dark"] .ss-free {
  background: linear-gradient(180deg, #1f1b30 0%, #1d1a2b 100%);
}
html[data-theme="dark"] .ss-boundaries {
  background: linear-gradient(180deg, #1d1a2b 0%, #1b1828 100%);
}
html[data-theme="dark"] .ss-faq {
  background: linear-gradient(180deg, #1b1828 0%, #191725 100%);
}
html[data-theme="dark"] .ss-final {
  background: linear-gradient(180deg, #191725 0%, rgba(25,23,37,0) 100%);
}
html[data-theme="dark"] .ss-start-choices label { background: rgba(255,255,255,.035); color: #aaa4c2; border-color: rgba(157,139,255,.14); }
html[data-theme="dark"] .ss-start-choices label:hover,
html[data-theme="dark"] #ss-start-confused:checked ~ .ss-start-choices label[for="ss-start-confused"],
html[data-theme="dark"] #ss-start-talk:checked ~ .ss-start-choices label[for="ss-start-talk"],
html[data-theme="dark"] #ss-start-now:checked ~ .ss-start-choices label[for="ss-start-now"],
html[data-theme="dark"] #ss-start-brief:checked ~ .ss-start-choices label[for="ss-start-brief"],
html[data-theme="dark"] #ss-start-ashamed:checked ~ .ss-start-choices label[for="ss-start-ashamed"],
html[data-theme="dark"] #ss-start-not-ready:checked ~ .ss-start-choices label[for="ss-start-not-ready"] { background: rgba(117,100,248,.13); color: #f5f2ff; }
html[data-theme="dark"] .ss-start-results { background: radial-gradient(circle at 88% 12%, rgba(117,100,248,.2), transparent 30%), linear-gradient(145deg, #2b2542, #211c34); border-color: rgba(157,139,255,.2); }
html[data-theme="dark"] .ss-start-proof span { background: rgba(255,255,255,.055); border-color: rgba(157,139,255,.18); color: #d8d0ff; }
html[data-theme="dark"] .ss-start-results article a { color: #ded7ff; border-color: rgba(157,139,255,.22); background: rgba(117,100,248,.14); }
html[data-theme="dark"] .ss-scenario-phone,
html[data-theme="dark"] .ss-scenario-controls label { background: rgba(29,25,45,.82); border-color: rgba(157,139,255,.18); }
html[data-theme="dark"] #ss-scenario-checkin:checked ~ .ss-scenario-controls label[for="ss-scenario-checkin"],
html[data-theme="dark"] #ss-scenario-support:checked ~ .ss-scenario-controls label[for="ss-scenario-support"],
html[data-theme="dark"] #ss-scenario-action:checked ~ .ss-scenario-controls label[for="ss-scenario-action"] { background: rgba(117,100,248,.16); border-color: rgba(157,139,255,.42); }
html[data-theme="dark"] .ss-scenario-controls label strong { color: #f5f2ff; }
html[data-theme="dark"] .ss-scenario-controls label small { color: #b8b1ce; }
html[data-theme="dark"] .ss-scenario-phone::after { background: linear-gradient(transparent, rgba(29,25,45,.96)); }
html[data-theme="dark"] .ss-mock-screen > h3,
html[data-theme="dark"] .ss-mock-screen > p { color: #f5f2ff; }
html[data-theme="dark"] .ss-demo-cta {
  background: linear-gradient(135deg, #7564f8, #5f4fd6);
  color: #fff;
  border: 1px solid rgba(157,139,255,.34);
  box-shadow: 0 18px 42px rgba(0,0,0,.22);
}
html[data-theme="dark"] .ss-demo-cta:hover {
  background: linear-gradient(135deg, #806fff, #6a58ea);
}
html[data-theme="dark"] .ss-state-grid span,
html[data-theme="dark"] .ss-support-status,
html[data-theme="dark"] .ss-ready-phrases span,
html[data-theme="dark"] .ss-message-input,
html[data-theme="dark"] .ss-grounding-step {
  background: rgba(255,255,255,.07);
  border-color: rgba(157,139,255,.18);
  color: #e9e3ff;
}
html[data-theme="dark"] .ss-state-grid strong,
html[data-theme="dark"] .ss-support-status strong,
html[data-theme="dark"] .ss-waiting-note strong,
html[data-theme="dark"] .ss-grounding-step > span {
  color: #f5f2ff;
}
html[data-theme="dark"] .ss-state-grid small,
html[data-theme="dark"] .ss-support-status small,
html[data-theme="dark"] .ss-grounding-step small,
html[data-theme="dark"] .ss-message-input {
  color: #b8b1ce;
}
html[data-theme="dark"] .ss-state-grid .is-selected {
  background: rgba(255,196,87,.13);
  border-color: rgba(255,196,87,.52);
}
html[data-theme="dark"] .ss-state-grid .is-selected strong,
html[data-theme="dark"] .ss-state-grid .is-selected i {
  color: #ffd37d;
}
html[data-theme="dark"] .ss-state-note,
html[data-theme="dark"] .ss-waiting-note {
  background: rgba(117,100,248,.13);
  border-color: rgba(157,139,255,.23);
  color: #d8d0ff;
}
html[data-theme="dark"] .ss-state-note small,
html[data-theme="dark"] .ss-waiting-note i {
  color: #b9aaff;
}
html[data-theme="dark"] .ss-plan-ready {
  background: rgba(67,166,118,.13);
  border-color: rgba(93,177,136,.28);
}
html[data-theme="dark"] .ss-plan-ready strong { color: #dff7e9; }
html[data-theme="dark"] .ss-plan-ready small { color: #9fe0be; }
html[data-theme="dark"] .ss-plan-ready p { color: #bddbc9; }
html[data-theme="dark"] .ss-crisis-card { background: rgba(83, 44, 63, .58); border-color: rgba(248, 132, 156, .22); color: #ffd9df; }
html[data-theme="dark"] .ss-free-card { background: radial-gradient(circle at 12% 16%, rgba(157,139,255,.16), transparent 32%), linear-gradient(135deg, rgba(36,31,56,.94), rgba(26,23,39,.9)); border-color: rgba(157,139,255,.2); box-shadow: 0 30px 90px rgba(0,0,0,.24); }
html[data-theme="dark"] .ss-free-included,
html[data-theme="dark"] .ss-free-terms span { background: rgba(255,255,255,.055); border-color: rgba(157,139,255,.16); }
html[data-theme="dark"] .ss-free-card p { color: #c8c0da; }
html[data-theme="dark"] .ss-free-link { color: #b9aaff; }
html[data-theme="dark"] .ss-free-link:hover { color: #d8d0ff; }
html[data-theme="dark"] .ss-boundaries-main { background: linear-gradient(145deg, rgba(45, 39, 76, .95), rgba(31, 27, 50, .95)); border-color: rgba(157,139,255,.18); }

@media (max-width: 980px) {
  .ss-hero-grid, .ss-split, .ss-faq-grid { grid-template-columns: 1fr; }
  .ss-hero-panel { width: min(560px, 100%); margin: 0 auto; transform: none; }
  .ss-hero-shots { width: min(640px, 100%); min-height: 600px; margin: 0 auto; }
  .ss-scenario-showcase { grid-template-columns: 1fr; }
  .ss-scenario-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-screen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-start-guide { grid-template-columns: 1fr; }
  .ss-start-results { min-height: 430px; }
  .ss-free-card { grid-template-columns: 1fr; }
  .ss-free-terms { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ss-hero { padding-top: 82px; }
  .ss-hero h1 { font-size: clamp(36px, 10.3vw, 44px); line-height: .98; }
  .ss-hero .ss-eyebrow { font-size: 10px; letter-spacing: .12em; }
  .ss-actions { display: grid; }
  .ss-actions .btn { width: 100%; }
  .ss-scenario-phone {
    width: min(330px, 100%);
    height: 560px;
  }
  .ss-scenario-controls {
    grid-template-columns: 1fr;
  }
  .ss-scenario-controls label {
    min-height: 82px;
    padding: 15px;
  }
  .ss-scenario-controls strong {
    font-size: 19px;
  }
  .ss-hero-shots {
    min-height: 555px;
    margin-top: 10px;
  }
  .ss-hero-shots .ss-shot-main {
    inset: auto;
    width: 100%;
    height: 535px;
    border-radius: 24px;
  }
  .ss-shot-side {
    width: 40%;
    height: 245px;
    border-radius: 20px;
  }
  .ss-shot-side-top { top: 42px; }
  .ss-shot-side-bottom { bottom: 26px; }
  .ss-screen-grid {
    display: flex;
    gap: 14px;
    margin-inline: -18px;
    padding: 0 18px 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .ss-screen-card {
    flex: 0 0 min(78vw, 300px);
    grid-template-rows: 390px auto;
    scroll-snap-align: center;
  }
  .ss-screen-card-wide {
    flex-basis: min(84vw, 330px);
  }
  .ss-trust { display: grid; }
  .ss-panel-grid { grid-template-columns: 1fr; }
  .ss-start-results { min-height: 390px; border-radius: 26px; }
  .ss-start-results article {
    grid-template-rows: auto auto auto auto auto;
    gap: 8px 13px;
    padding: 26px 22px;
  }
  .ss-start-results article > i { width: 44px; height: 44px; border-radius: 14px; }
  .ss-start-results article h3 { font-size: 30px; line-height: 1.02; }
  .ss-start-results article p {
    align-self: start;
    margin: 12px 0 8px;
    font-size: 16px;
    line-height: 1.55;
  }
  .ss-start-proof { margin-bottom: 8px; }
  .ss-start-results article a { padding: 15px 16px; }
  .ss-free-card { padding: 30px 22px; border-radius: 28px; }
  .ss-free-included { padding: 20px; border-radius: 22px; }
  .ss-free-terms span { min-height: 0; padding: 18px; border-radius: 20px; }
  .ss-final-card { border-radius: 30px; }
  .ss-boundaries-main { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ss-now-card,
  .ss-faq-list summary i,
  .ss-start-choices label,
  .ss-start-choices label i,
  .ss-start-results article,
  .ss-scenario-panel,
  .ss-scenario-progress label::before { transition: none; }
}

/* Theme-complete SAFEspace surfaces and unclipped interactive content. */
html:not([data-theme="dark"]) .ss-hero-chat,
html:not([data-theme="dark"]) .ss-scenario-phone {
  border-color:rgba(117,100,248,.2);
  background:
    radial-gradient(circle at 84% 8%,rgba(117,100,248,.13),transparent 34%),
    linear-gradient(180deg,#fbfaff 0%,#f0ecff 100%);
  color:var(--ss-ink);
  box-shadow:0 30px 80px rgba(62,48,123,.15);
}

html:not([data-theme="dark"]) .ss-hero-chat .ss-device-bar,
html:not([data-theme="dark"]) .ss-scenario-phone .ss-device-bar { border-bottom-color:rgba(117,100,248,.14); }
html:not([data-theme="dark"]) .ss-hero-chat .ss-avatar,
html:not([data-theme="dark"]) .ss-scenario-phone .ss-avatar { background:#fff;color:var(--ss-violet);box-shadow:inset 0 0 0 1px rgba(117,100,248,.24); }
html:not([data-theme="dark"]) .ss-chat-mode { background:rgba(117,100,248,.08);border-color:rgba(117,100,248,.16);color:#746d89; }
html:not([data-theme="dark"]) .ss-chat-mode .is-active { background:#fff;color:var(--ss-ink);box-shadow:0 8px 22px rgba(62,48,123,.1); }
html:not([data-theme="dark"]) .ss-human-card,
html:not([data-theme="dark"]) .ss-ai-card { background:rgba(255,255,255,.76);border-color:rgba(117,100,248,.14); }
html:not([data-theme="dark"]) .ss-human-card h3,
html:not([data-theme="dark"]) .ss-ai-card strong,
html:not([data-theme="dark"]) .ss-support-status strong,
html:not([data-theme="dark"]) .ss-waiting-note strong,
html:not([data-theme="dark"]) .ss-state-note strong,
html:not([data-theme="dark"]) .ss-grounding-step>span,
html:not([data-theme="dark"]) .ss-mock-action>h3 { color:var(--ss-ink); }
html:not([data-theme="dark"]) .ss-human-card p,
html:not([data-theme="dark"]) .ss-ai-card p,
html:not([data-theme="dark"]) .ss-bubble-meta,
html:not([data-theme="dark"]) .ss-support-status small,
html:not([data-theme="dark"]) .ss-message-input,
html:not([data-theme="dark"]) .ss-grounding-step small { color:var(--ss-muted); }
html:not([data-theme="dark"]) .ss-bubble-reply,
html:not([data-theme="dark"]) .ss-catalog-proof span,
html:not([data-theme="dark"]) .ss-state-grid span,
html:not([data-theme="dark"]) .ss-support-status,
html:not([data-theme="dark"]) .ss-ready-phrases span,
html:not([data-theme="dark"]) .ss-message-input,
html:not([data-theme="dark"]) .ss-grounding-step { background:rgba(255,255,255,.72);border-color:rgba(117,100,248,.16);color:var(--ss-ink-soft); }
html:not([data-theme="dark"]) .ss-waiting-note,
html:not([data-theme="dark"]) .ss-state-note { background:rgba(117,100,248,.09);border-color:rgba(117,100,248,.18);color:var(--ss-ink-soft); }
html:not([data-theme="dark"]) .ss-mock-action>p { color:var(--ss-muted); }
html:not([data-theme="dark"]) .ss-plan-ready { background:rgba(67,166,118,.09);border-color:rgba(67,166,118,.22); }
html:not([data-theme="dark"]) .ss-plan-ready strong { color:#286546; }
html:not([data-theme="dark"]) .ss-plan-ready small,
html:not([data-theme="dark"]) .ss-plan-ready p { color:#4b8063; }

html:not([data-theme="dark"]) .ss-scenario-panel.ss-mock-screen {
  background:
    radial-gradient(circle at 88% 8%,rgba(117,100,248,.09),transparent 34%),
    linear-gradient(180deg,#fbfaff 0%,#f1eeff 100%);
  color:var(--ss-ink);
}
html:not([data-theme="dark"]) .ss-mock-screen h3,
html:not([data-theme="dark"]) .ss-state-grid strong,
html:not([data-theme="dark"]) .ss-state-note strong,
html:not([data-theme="dark"]) .ss-user-message { color:var(--ss-ink); }
html:not([data-theme="dark"]) .ss-mock-screen > p,
html:not([data-theme="dark"]) .ss-state-note span,
html:not([data-theme="dark"]) .ss-state-grid small { color:var(--ss-muted); }
html:not([data-theme="dark"]) .ss-state-grid span {
  border-color:rgba(117,100,248,.15);
  background:rgba(255,255,255,.76);
  box-shadow:0 10px 24px rgba(62,48,123,.06);
}
html:not([data-theme="dark"]) .ss-state-grid i {
  background:rgba(117,100,248,.11);
  color:var(--ss-violet);
}
html:not([data-theme="dark"]) .ss-state-grid .is-selected {
  border-color:rgba(221,145,40,.38);
  background:#fff7e9;
}
html:not([data-theme="dark"]) .ss-state-grid .is-selected strong,
html:not([data-theme="dark"]) .ss-state-grid .is-selected i { color:#9a5319; }
html:not([data-theme="dark"]) .ss-state-note {
  border-color:rgba(117,100,248,.18);
  background:linear-gradient(145deg,rgba(117,100,248,.10),rgba(255,255,255,.72));
  color:var(--ss-ink-soft);
}
html:not([data-theme="dark"]) .ss-state-note button,
html:not([data-theme="dark"]) .ss-action-button {
  box-shadow:0 10px 24px rgba(117,100,248,.18);
}
html:not([data-theme="dark"]) .ss-user-message {
  background:linear-gradient(135deg,#7564f8,#8c76ff);
  color:#fff;
}
html:not([data-theme="dark"]) .ss-ready-label { color:var(--ss-violet-dark); }

html:not([data-theme="dark"]) .ss-demo-cta { background:linear-gradient(135deg,#7564f8,#8e79ff);color:#fff;box-shadow:0 16px 36px rgba(117,100,248,.22); }
html:not([data-theme="dark"]) .ss-demo-cta:hover { background:linear-gradient(135deg,#6957eb,#806bf1); }
html:not([data-theme="dark"]) .ss-final-card { background:radial-gradient(circle at 50% 0%,rgba(160,135,255,.24),transparent 42%),linear-gradient(145deg,#fff,#f1edff);color:var(--ss-ink);border:1px solid rgba(117,100,248,.16);box-shadow:0 30px 80px rgba(62,48,123,.12); }
html:not([data-theme="dark"]) .ss-final-card .ss-eyebrow { color:var(--ss-violet-dark); }
html:not([data-theme="dark"]) .ss-final-card p { color:var(--ss-muted); }
html:not([data-theme="dark"]) .ss-final-trust li { background:rgba(117,100,248,.07);border-color:rgba(117,100,248,.16);color:var(--ss-ink-soft); }
html:not([data-theme="dark"]) .ss-final-card small { color:var(--ss-muted); }
html:not([data-theme="dark"]) .ss-boundaries-main { background:linear-gradient(145deg,#fff,#f1edff);border-color:rgba(117,100,248,.18);color:var(--ss-ink);box-shadow:0 24px 64px rgba(62,48,123,.1); }
html:not([data-theme="dark"]) .ss-boundaries-main .ss-kicker { color:var(--ss-violet-dark); }
html:not([data-theme="dark"]) .ss-boundaries-main .ss-icon { background:rgba(117,100,248,.1);color:var(--ss-violet); }
html:not([data-theme="dark"]) .ss-boundaries-main p { color:var(--ss-muted); }
html:not([data-theme="dark"]) .ss-boundaries-alert { background:rgba(117,100,248,.06);border-color:rgba(117,100,248,.14); }
html:not([data-theme="dark"]) .ss-boundaries-alert strong { color:var(--ss-ink); }

.ss-start-results { min-height:490px;overflow:hidden; }
.ss-start-results article { min-height:100%; }
.ss-scenario-phone { height:660px; }
.ss-scenario-phone::after,
.ss-free-card::after,
html[data-theme="dark"] .ss-section::after,
html[data-theme="dark"] .ss-final::after { content:none!important; }

html[data-theme="dark"] .ss-start-results { background:radial-gradient(circle at 90% 6%,rgba(135,113,255,.24),transparent 36%),linear-gradient(145deg,#332b50,#211c35);box-shadow:0 26px 70px rgba(0,0,0,.26); }
html[data-theme="dark"] .ss-start-choices label:hover { background:rgba(117,100,248,.1);border-color:rgba(157,139,255,.26); }
html[data-theme="dark"] #ss-start-confused:checked~.ss-start-choices label[for="ss-start-confused"],
html[data-theme="dark"] #ss-start-talk:checked~.ss-start-choices label[for="ss-start-talk"],
html[data-theme="dark"] #ss-start-now:checked~.ss-start-choices label[for="ss-start-now"],
html[data-theme="dark"] #ss-start-brief:checked~.ss-start-choices label[for="ss-start-brief"],
html[data-theme="dark"] #ss-start-ashamed:checked~.ss-start-choices label[for="ss-start-ashamed"],
html[data-theme="dark"] #ss-start-not-ready:checked~.ss-start-choices label[for="ss-start-not-ready"] { background:linear-gradient(90deg,rgba(117,100,248,.24),rgba(117,100,248,.1));box-shadow:0 14px 34px rgba(0,0,0,.14); }

.ss-faq-list .faq-item::details-content { block-size:0;opacity:0;overflow:hidden;transition:block-size .32s ease,opacity .24s ease,content-visibility .32s allow-discrete; }
.ss-faq-list .faq-item[open]::details-content { block-size:auto;opacity:1; }
.ss-faq-list .faq-item { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.ss-faq-list .faq-item:hover { transform:translateY(-2px);box-shadow:0 16px 36px rgba(62,48,123,.09); }
.ss-faq-list .faq-item summary::after { transition:transform .28s ease,background .2s ease; }
.ss-faq-list .faq-item[open] summary::after { transform:rotate(180deg); }

@media(max-width:640px){.ss-start-results{min-height:500px}.ss-scenario-phone{height:620px}}

/* Final spacing pass: keep SAFEspace sections calm and continuous. */
html[data-theme="dark"] .ss-page,
html[data-theme="dark"] .ss-hero,
html[data-theme="dark"] .ss-situations,
html[data-theme="dark"] .ss-interface,
html[data-theme="dark"] .ss-anonymous,
html[data-theme="dark"] .ss-free,
html[data-theme="dark"] .ss-boundaries,
html[data-theme="dark"] .ss-faq,
html[data-theme="dark"] .ss-final {
  background:#171426!important;
}

.ss-situations {
  padding-bottom:clamp(50px,5.5vw,78px)!important;
}

.ss-situations + .ss-interface {
  padding-top:clamp(50px,5.5vw,78px)!important;
}

.ss-interface {
  padding-bottom:clamp(54px,5.8vw,84px)!important;
}

.ss-anonymous {
  padding-top:clamp(58px,6vw,92px)!important;
  padding-bottom:clamp(58px,6vw,92px)!important;
}

.ss-free,
.ss-boundaries,
.ss-faq {
  padding-top:clamp(46px,5vw,72px)!important;
  padding-bottom:clamp(46px,5vw,72px)!important;
}

.ss-final {
  padding-top:clamp(34px,4vw,54px)!important;
  padding-bottom:clamp(54px,6vw,88px)!important;
}

html[data-theme="dark"] .ss-hero::before,
html[data-theme="dark"] .ss-section::after,
html[data-theme="dark"] .ss-final::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:#171426;
  pointer-events:none;
}

html[data-theme="dark"] .ss-hero::before {
  top:auto;
}

@media (max-width: 640px) {
  .ss-situations,
  .ss-interface,
  .ss-anonymous,
  .ss-free,
  .ss-boundaries,
  .ss-faq {
    padding-top:48px!important;
    padding-bottom:48px!important;
  }

  .ss-situations + .ss-interface {
    padding-top:46px!important;
  }

  .ss-final {
    padding-top:32px!important;
    padding-bottom:58px!important;
  }
}

html[data-theme="dark"] .ss-hero::before,
html[data-theme="dark"] .ss-section::after,
html[data-theme="dark"] .ss-final::after { content:none!important; }

html[data-theme="dark"] .ss-final-card{
  border:1px solid rgba(157,139,255,.2);
  background:
    radial-gradient(ellipse 52% 58% at 50% 0%,rgba(126,103,248,.24),transparent 72%),
    linear-gradient(145deg,#28233f 0%,#1b182a 58%,#171522 100%);
  box-shadow:0 34px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
}

/* Late polish: remove visible SAFEspace section bands and keep transitions soft. */
.ss-page {
  background:
    radial-gradient(940px 640px at 7% 16%,rgba(124,108,255,.10),transparent 72%),
    radial-gradient(900px 620px at 96% 55%,rgba(170,146,255,.10),transparent 74%),
    linear-gradient(180deg,#faf9ff 0%,#f5f2ff 42%,#f4f1ff 72%,#f8f7ff 100%)!important;
}

.ss-hero,
.ss-situations,
.ss-interface,
.ss-anonymous,
.ss-free,
.ss-boundaries,
.ss-faq,
.ss-final {
  background: transparent!important;
}

.ss-hero::after,
body:has(.ss-page) .ss-situations::before {
  opacity: .38;
  filter: blur(18px);
  background:
    radial-gradient(720px 220px at 82% 0%,rgba(124,108,255,.075),transparent 78%),
    linear-gradient(180deg,rgba(248,246,255,0),rgba(248,246,255,.52),rgba(248,246,255,0))!important;
}

.ss-situations + .ss-interface,
.ss-anonymous,
.ss-free,
.ss-boundaries,
.ss-faq,
.ss-final {
  margin-top: -1px;
}

html[data-theme="dark"] .ss-page {
  background:
    radial-gradient(940px 640px at 7% 16%,rgba(145,128,255,.12),transparent 72%),
    radial-gradient(900px 620px at 96% 55%,rgba(145,128,255,.09),transparent 74%),
    linear-gradient(180deg,#171426 0%,#171426 46%,#151322 100%)!important;
}

html[data-theme="dark"] .ss-hero,
html[data-theme="dark"] .ss-situations,
html[data-theme="dark"] .ss-interface,
html[data-theme="dark"] .ss-anonymous,
html[data-theme="dark"] .ss-free,
html[data-theme="dark"] .ss-boundaries,
html[data-theme="dark"] .ss-faq,
html[data-theme="dark"] .ss-final {
  background: transparent!important;
}

html[data-theme="dark"] .ss-hero::after,
html[data-theme="dark"] body:has(.ss-page) .ss-situations::before {
  opacity: .30;
  background:
    radial-gradient(720px 220px at 82% 0%,rgba(145,128,255,.08),transparent 78%),
    linear-gradient(180deg,rgba(23,20,38,0),rgba(23,20,38,.42),rgba(23,20,38,0))!important;
}