/* Values follow Pricing Prototype A (WINNER), build-your-package section */

/* ── Root & Layout ────────────────────────────────────────────────── */

.mrX0vUHHT_Zi0m8xOP3O {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, sans-serif;
  color: #313335;
  -webkit-font-smoothing: antialiased;
  /* Prototype spacing: 56px between the page intro and the builder, 96px below it */
  padding: 56px 0 96px;
}

.mrX0vUHHT_Zi0m8xOP3O *,
.mrX0vUHHT_Zi0m8xOP3O *::before,
.mrX0vUHHT_Zi0m8xOP3O *::after {
  box-sizing: border-box;
}

/* Builder left, sticky package summary right */
.SJBfKjp6X9HxcdNOKnmk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 341px);
  gap: 40px;
  align-items: start;
}

.ufBFTKS8iUrLRz7O2QVb {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.CUDGMvKR3_6EY3IeilZQ {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.BuQQJm0688fdZZar1syN {
  margin: 0;
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0F0F12;
  text-align: left;
}

/* "What do you need?" with the currency note right-aligned to the card price column
   (card padding 22px + 1px border) */
.FFwfSOxNCSsRHPRROhgT {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 24px 23px 0 4px;
}

.GxB8kmMeZ6r4CGTVBhT3 {
  margin-left: auto;
  font-size: 12px;
  color: #787A7E;
}

/* ── Segmented picker (user band) ──────────────────── */

.KYWFq82PoPSZ43UKY43b {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #EEF0F2;
  border-radius: 8px;
  width: 100%;
}

.jsFhgdyWdZ3sGph9HL2X {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #D5D7DB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #313335;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

._CeXENP4XaEStPZGOAbl {
  border-color: transparent;
  background: linear-gradient(135deg, #6F61F5 0%, #A59DFF 100%);
  color: #FFFFFF;
}

.nYy7Ndwh2lyhvNg7nkQ2 {
  font-size: 16px;
  font-weight: 600;
  max-width: 100%;
}

.y5SvfT24ZWS2BbwRa6SN {
  font-size: 13px;
  opacity: 0.75;
}

/* ── Product cards ────────────────────────────────────────────────── */

.F0i1AGR9vHW1dndWk3Ql {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.v1Bp0aQWUqD6WIs7Qwit {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: #FFFFFF;
  border: 1px solid #EEF0F2;
  border-radius: 16px;
}

.CSh8zSFpAu6prHkNsabv {
  background: #FAFAFB;
}

.ODT1VqZ0J93uo65tvZ3m {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.NYx_f3L0O5m5oVHwdHIa,
.UZrUVN1msmorNFzqQWkk {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.NYx_f3L0O5m5oVHwdHIa {
  color: #FFFFFF;
  background: linear-gradient(180deg, #8E85EC 0%, #6057B3 100%);
  box-shadow: inset 0 -3px 3px #5D4FA4, inset 0 2px 0 #A89DEC;
}

.UZrUVN1msmorNFzqQWkk {
  color: transparent;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px #B3B5BA;
}

.u3CTAi5L9_y3uEKZDBpL {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  flex-wrap: wrap;
}

.Bi__JuChfBCEmZzLp4p0 {
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 24px;
  color: #0F0F12;
}

.mjhK2DJOJIkkBLOBCNDq {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 96px;
  min-height: 48px;
}

.tvK113Jc7Esatuh9QoPZ {
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.1;
  color: #0F0F12;
  white-space: nowrap;
}

.EbPJ5GsfhO_UqcmWMh6x {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.RJ_5eP15nI7nDZzPalkZ {
  font-size: 12px;
  color: #787A7E;
}

.Tp_p0JRWR1AuPeKeBhn7 {
  font-size: 12px;
  color: #96989D;
  text-decoration: line-through;
}

.YoGp9TAANEJNLd0mMwJZ {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  background: #D7F5E4;
  color: #0F5B34;
}

.R99HKUczb7bg79lb0q2m {
  align-self: flex-start;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 4px;
  background: #FDE7E9;
  color: #B42318;
}

/* Green tag that turns Security and optimization back on */
.iXZ4y70uD7hW2ijUYqLC {
  align-self: flex-start;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  text-align: left;
  padding: 5px 10px;
  border: 0;
  border-radius: 4px;
  background: #D7F5E4;
  color: #0F5B34;
  cursor: pointer;
}

.iXZ4y70uD7hW2ijUYqLC:hover {
  text-decoration: underline;
}

/* ── Migration tiers ──────────────────────────────────────────────── */

.YyA3cKQdB_ikPmhdml7f {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.CYKpcj20gJdNipjJUnaR {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #EEF0F2;
  border-radius: 8px;
}

.Vw9pRjSNPbJpjm_M0yLu {
  padding: 10px 12px;
  border: 1px solid #D5D7DB;
  border-radius: 8px;
  background: #FFFFFF;
  color: #313335;
  cursor: pointer;
  line-height: 1.2;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.mvrTWaKDgGq7sedG_gmr {
  border-color: transparent;
  background: linear-gradient(135deg, #6F61F5 0%, #A59DFF 100%);
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(96, 87, 179, 0.35);
}

.JMi7xybIqExnogoroAyG {
  margin-left: 8px;
  font-family: 'ABC Favorit Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: #0F0F12;
  color: #FFFFFF;
  vertical-align: middle;
  white-space: nowrap;
}

.fLqdThkfqtKvzUkyLx0D {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #484A4D;
  min-height: 2.8em;
}

/* ── Feature lists ────────────────────────────────────────────────── */

.p15ozukLw26wlE_bGXxW {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #E4E5E8;
}

.KomeeffmxjiWegNgY8xG,
.u3Xa3izrez1DN_GuhrqQ {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.u3Xa3izrez1DN_GuhrqQ {
  padding-top: 16px;
  border-top: 1px solid #E4E5E8;
}

.X_nxShaF4rKUAry4MPut {
  font-size: 16px;
  font-weight: 600;
  color: #181818;
}

/* Fills top to bottom, then the second column (rows set inline) */
.N4CH_jXf2sjMpDZl9avp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.YYSfS2O4W7hmi1hWZPMm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.eRwBOwh1hs7TLmKRxU7Q,
._ffSqMSmePnvLZ5HuUIe {
  width: 16px;
  flex: none;
  font-weight: 700;
}

.eRwBOwh1hs7TLmKRxU7Q {
  color: #6057B3;
}

._ffSqMSmePnvLZ5HuUIe {
  color: #C4C6CA;
}

.S9bmh0H2pztpWPqRGhcV {
  min-width: 0;
  color: #232426;
}

.mQh0hHMtA3JYI5Klxex1 {
  min-width: 0;
  color: #98A0A8;
}

/* Backup isn't available yet: its features read as disabled */
.ai3GEDUZ3RKW5uMNntg1 .S9bmh0H2pztpWPqRGhcV,
.ai3GEDUZ3RKW5uMNntg1 .eRwBOwh1hs7TLmKRxU7Q {
  color: #96989D;
}

.hq9TZq6g_301D79j4NVN,
.fq66Rql1zX_YBYm79KDX {
  font-family: 'ABC Favorit Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Fixed line height keeps every chip 18px tall, in a feature line or a card title */
  line-height: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.hq9TZq6g_301D79j4NVN {
  background: #EDEAFB;
  color: #4D468F;
}

.fq66Rql1zX_YBYm79KDX {
  background: #EEF0F2;
  color: #5E6064;
}

/* Ask-Spara button on each feature line ("Notify" for features that haven't shipped) */
.KcJoffFhq8Rg0gYDl1pm {
  position: relative;
  flex: none;
  margin-left: auto;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 1px solid #E1E3E7;
  border-radius: 4px;
  background: #FFFFFF;
  color: #6C6E72;
  font: 500 11px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.KcJoffFhq8Rg0gYDl1pm:hover {
  background: #EDEAFB;
  color: #4D468F;
  border-color: #CBC6F5;
}

.KcJoffFhq8Rg0gYDl1pm::after {
  content: attr(data-sp);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 6px;
  background: #232426;
  color: #FFFFFF;
  font: 400 12px/1.4 'Inter', system-ui, sans-serif;
  white-space: normal;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 60;
}

.KcJoffFhq8Rg0gYDl1pm:hover::after {
  opacity: 1;
}

.C9xoSTNtg0XpqUID3N1_ {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #6057B3;
  text-decoration: underline;
}

/* Pro tab: flame icon, "Most popular" tooltip from data-tip */
.k0tPygUZuoIPSqediKpg {
  position: relative;
}

.k0tPygUZuoIPSqediKpg::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  padding: 7px 12px;
  border-radius: 8px;
  background: #0F0F12;
  color: #FFFFFF;
  font: 500 11px/1.2 'ABC Favorit Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(96, 87, 179, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.9);
  transition: opacity 0.15s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4);
  z-index: 60;
}

.k0tPygUZuoIPSqediKpg:hover::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.DLE79SKc_uAxMXyPuaAr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  vertical-align: middle;
}

.k0tPygUZuoIPSqediKpg:hover .DLE79SKc_uAxMXyPuaAr {
  animation: CLffGedYCpFgvMaAX21Z 0.9s ease-in-out infinite;
  transform-origin: 50% 90%;
}

@keyframes CLffGedYCpFgvMaAX21Z {
  0%, 100% { transform: scale(1) rotate(0); }
  25% { transform: scale(1.12) rotate(-6deg) translateY(-1px); }
  50% { transform: scale(1.2) rotate(5deg) translateY(-2px); }
  75% { transform: scale(1.1) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .k0tPygUZuoIPSqediKpg:hover .DLE79SKc_uAxMXyPuaAr { animation: none; }
}

/* ── Sidebar ──────────────────────────────────────────────────────── */

.LzHibnvVhBHadOsdca3z {
  min-width: 0;
  align-self: stretch;
}

.YmjX9LRmzlBwWcfCtDmP {
  position: sticky;
  /* Below sharegate.com's fixed nav (64–67px tall); override with --sq-sticky-top */
  top: var(--sq-sticky-top, 88px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 2px solid #B9B2F0;
  background: #FFFFFF;
  box-shadow: 0 12px 40px rgba(96, 87, 179, 0.16), 0 2px 8px rgba(96, 87, 179, 0.08);
}

.gYbvNYII5m3CSKWeYiI9 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
}

.axL6LmduVVEJxxM3chdN {
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: #232426;
}

.tW88KS9ihZAjsrX6edIo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.fHQhk8M3xxXTTShLzrSa {
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #232426;
}

.CP4aka2IOVSBKqMXttju {
  font-size: 14px;
  color: #787A7E;
}

.zkVTYaaTJeLU46UljZnA {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cXfr1K8PNVhHKFlpRO1g {
  font-size: 14px;
  font-weight: 500;
  color: #0F5B34;
}

.Xr04THBkmPplqXxj9N_y {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.UYJ9praK8HqVxblNi60x,
.deCzFs3RRBFJDtl0KB8F {
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.UYJ9praK8HqVxblNi60x {
  box-shadow: 0 0 0 1px #6057B3, inset 0 -4px 4px #5D4FA4, inset 0 2px 0 #A89DEC;
  background: linear-gradient(180deg, #8E85EC 0%, #6057B3 100%);
  color: #FFFFFF;
}

.deCzFs3RRBFJDtl0KB8F {
  box-shadow: 0 0 0 1px #6057B3, inset 0 -4px 4px #DFE1E3, inset 0 2px 0 #FFFFFF;
  background: linear-gradient(180deg, #F8F9FA 0%, #E1E3E7 100%);
  color: #6057B3;
}

.UYJ9praK8HqVxblNi60x:hover,
.UYJ9praK8HqVxblNi60x:focus {
  color: #FFFFFF;
  text-decoration: none;
}

.UYJ9praK8HqVxblNi60x:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.IpWwJi50gkNybiC7JWfv {
  grid-column-gap: 0.625rem;
  grid-row-gap: 0.625rem;
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  box-sizing: border-box;
  margin: 0;
  justify-content: center;
  align-items: center;
  height: 44px;
  padding: 0 14px;
  cursor: pointer;
  color: rgb(96, 87, 179);
  -webkit-text-stroke-color: rgb(96, 87, 179);
  border: 1px solid rgb(96, 87, 179);
  border-radius: 8px;
  background-color: rgb(225, 227, 231);
  background-image: linear-gradient(rgb(248, 249, 250), rgb(225, 227, 231));
  box-shadow: rgb(223, 225, 227) 0px -4px 4px inset, rgb(255, 255, 255) 0px 2px inset;
  transition-property: all;
  transition-duration: 0.25s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.IpWwJi50gkNybiC7JWfv:hover:not(:disabled) {
  background-color: rgb(225, 227, 231);
  background-image: none;
}

.IpWwJi50gkNybiC7JWfv:disabled {
  color: #98A0A8;
  -webkit-text-stroke-color: #98A0A8;
  border-color: #98A0A8;
  cursor: not-allowed;
}

.nFkbCSC81yacaS1K2Cjf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 28px 24px;
  border-top: 1px solid #EEF0F2;
}

.JndQd4yuohlvKc6KsF_Z {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cfnG9K5FwyMHIiS3jezT {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: #232426;
}

.cfnG9K5FwyMHIiS3jezT .JMi7xybIqExnogoroAyG {
  margin-left: 0;
}

.ylWb5nweXqKYkpsD2hAW {
  font-size: 13px;
  font-weight: 500;
  color: #B42318;
}

.zcPAd1WZBBFhTLg5lV2D {
  font-size: 14px;
  line-height: 1.5;
  color: #6C6E72;
}

.skAguepwyepLLaaHf6ra {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.TaH4xSIAnkONo9_6VexL {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  line-height: 1.5;
}

.ccUjIUJJ9C9ik9N9OxgV,
.tyDvDnrxAcV90igGTC7Z {
  width: 16px;
  font-weight: 400;
  font-size: 16px;
}

.ccUjIUJJ9C9ik9N9OxgV {
  color: #6057B3;
}

.tyDvDnrxAcV90igGTC7Z {
  color: #D13438;
}

.wzxpJ0yer8ABgPwELoSh {
  color: #484A4D;
}

.f8vVwcHQ7C5ssimzYM1A {
  color: #D13438;
  text-decoration: line-through;
}

.V_n_GWOxCjQ3nH6e6nj_ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 28px;
  border: 0;
  border-top: 1px solid #EEF0F2;
  background: #FFFFFF;
  cursor: pointer;
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #6057B3;
}

.V_n_GWOxCjQ3nH6e6nj_:hover {
  background: #F6F6FF;
}

/* ── Remove confirmation dialog ───────────────────────────────────── */

.KY7ODeHeHw7aeMq7cGcp {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 15, 18, 0.45);
}

.mSypZleE7Zh_1ZVAneub {
  width: 440px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 15, 18, 0.3);
}

.oBfcbjkNKbhEG1qAs6Ql {
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: #0F0F12;
}

.bq_r3UO2nxGTRn9D9Gec {
  font-size: 15px;
  line-height: 1.5;
  color: #484A4D;
}

.Dp5oJvSuG1WoGwoDIKPD {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Side by side, stacked and centered when the dialog is too narrow */
.DSqV_LR9DIt9Ri7lktWv {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.DSqV_LR9DIt9Ri7lktWv > button {
  flex: 1 1 0;
  min-width: 0;
}

.UwmMHbSUMZkzKcXpirxG {
  padding: 0 8px;
  font-size: 14px;
}

@media (max-width: 340px) {
  .DSqV_LR9DIt9Ri7lktWv {
    flex-direction: column;
    align-items: stretch;
  }

  .DSqV_LR9DIt9Ri7lktWv > button {
    flex: none;
  }
}

/* ── Error ────────────────────────────────────────────────────────── */

.THvGqmp4FiTIqTJactoU {
  font-size: 13px;
  color: #B42318;
  margin: 0;
}

/* ── Responsive (not in the prototype) ────────────────────────────── */

/* Total + CTA pinned to the bottom of the screen; only shown in the single-column layout */
.N0K5l3IarFqSvnETzxH4 {
  display: none;
}

.NFg1d5BkBhxsWU2luG51 {
  display: flex;
  flex-direction: column;
  flex: none;
}

.GB2KgxLUXoTLs4qIQmrt {
  font-family: 'ABC Favorit', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #232426;
}

.zMEtoL3heOQsny_Ves1e {
  font-size: 13px;
  color: #787A7E;
}

/* Single column below ~760px: builder first, package summary after it */
@media (max-width: 760px) {
  .mrX0vUHHT_Zi0m8xOP3O {
    padding: 40px 0 64px;
  }

  .SJBfKjp6X9HxcdNOKnmk {
    grid-template-columns: minmax(0, 1fr);
  }

  .YmjX9LRmzlBwWcfCtDmP {
    position: static;
  }

  .N0K5l3IarFqSvnETzxH4 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 2px solid #B9B2F0;
    border-radius: 12px;
    box-shadow: 0 -4px 16px rgba(96, 87, 179, 0.12);
    flex-wrap: wrap;
  }

  .N0K5l3IarFqSvnETzxH4 .UYJ9praK8HqVxblNi60x {
    flex: 1 1 auto;
    max-width: 220px;
    padding: 0 16px;
  }

  .fHQhk8M3xxXTTShLzrSa {
    font-size: 44px;
  }
}

@media (max-width: 540px) {
  .KYWFq82PoPSZ43UKY43b {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nYy7Ndwh2lyhvNg7nkQ2 {
    font-size: 14px;
  }

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

  .N4CH_jXf2sjMpDZl9avp {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-template-rows: none !important;
  }

  .v1Bp0aQWUqD6WIs7Qwit {
    padding: 18px;
  }

  /* Price drops under the title so the title keeps the full card width */
  .ODT1VqZ0J93uo65tvZ3m {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .mjhK2DJOJIkkBLOBCNDq {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    min-height: 0;
  }

}

.TITzLDQKuZq2Mp65t77e {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gDTUN6yk8Wzzjoxaf8lU {
  position: relative;
  width: 100%;
  height: 600px;
  border: 2.5px solid var(--sq-black);
  border-radius: 10px;
  overflow: hidden;
  background: var(--sq-surface-2);
}

.RAS20He_SJ7UCtdM5ER2 {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Spinner overlay shown while the iframe is loading */
.AMlMjAmTNiE9ritKqxJ0 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: var(--sq-surface-2);
}

.xKhXBRFL5DrTl9JFRm0o {
  width: 40px;
  height: 40px;
  border: 3px solid var(--sq-lilac);
  border-top-color: var(--sq-black);
  border-radius: 50%;
  animation: i6E92S0kTwhmFcmqeOSD 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .xKhXBRFL5DrTl9JFRm0o {
    animation: none;
    border-top-color: var(--sq-lilac);
    opacity: 0.5;
  }
}

@keyframes i6E92S0kTwhmFcmqeOSD {
  to { transform: rotate(360deg); }
}

.x78Hq8IXz0GpuNXfi0d8 {
  font-family: var(--sq-font-body);
  font-size: 15px;
  color: var(--sq-ink-3);
}

/* Fallback shown when the iframe fails to load */
.V0PP9CiePCpuuZdUiQcP {
  padding: 32px 24px;
  border: 2.5px solid var(--sq-black);
  border-radius: 10px;
  background: var(--sq-surface-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.dkxgZmsTaY9ocE6YgGwB {
  font-family: var(--sq-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--sq-black);
  margin: 0;
}

.oamzQPnI5uLZjc94oN6x {
  font-family: var(--sq-font-body);
  font-size: 15px;
  color: var(--sq-ink-2);
  margin: 0;
}

.M4n0t9FyOkggJvDQKj0x {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--sq-black);
  color: var(--sq-white);
  border-radius: 999px;
  font-family: var(--sq-font-body);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--sq-black);
  transition: background 0.15s, color 0.15s;
}

.M4n0t9FyOkggJvDQKj0x:hover,
.M4n0t9FyOkggJvDQKj0x:focus-visible {
  background: transparent;
  color: var(--sq-black);
  outline: none;
}

.M4n0t9FyOkggJvDQKj0x:focus-visible {
  box-shadow: 0 0 0 3px var(--sq-lilac);
}

.KOdo3mAH8d7NuXDC2geQ {
  width: 100%;
  overflow-x: auto;
  background: var(--sq-surface-1);
  border: 1px solid var(--sq-stroke-soft);
  border-radius: 6px;
  padding: 8px 12px;
}

.KOdo3mAH8d7NuXDC2geQ code {
  font-family: var(--sq-font-mono);
  font-size: 13px;
  color: var(--sq-ink-2);
  word-break: break-all;
}

/* Two-column quote layout — matches Quote.dc.html design */

._SZjN8IZ3Tw_s1Q1T30t {
  background: #F8F9FA;
  min-height: 100%;
  padding: 48px 32px 96px;
  font-family: var(--sq-font-body, "Inter", system-ui, sans-serif);
  color: #232426;
}

.xTO5IzTNPJ54bWm0aIH4 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.r5VdlqhfPnIoq7MNiwda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #6057B3;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.r5VdlqhfPnIoq7MNiwda:hover { text-decoration: underline; }

.RF4CSqiW9ZriAOETG4oY {
  margin: 0;
  font-family: var(--sq-font-display, "ABC Favorit", sans-serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #232426;
}

.d6jOBlLxPjaJ6QagzZog {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #484A4D;
  max-width: 56ch;
}

/* ── Two-column grid: wide form/quote, narrow sticky summary on the right ── */

.bUzWjjpOvj5yOO46kiKD {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 32px;
  align-items: start;
}

.edwJzl8Mvc5iFh2b5VUe { order: 1; }

@media (max-width: 860px) {
  .bUzWjjpOvj5yOO46kiKD { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  ._SZjN8IZ3Tw_s1Q1T30t { padding: 32px 20px 64px; }
  .RF4CSqiW9ZriAOETG4oY { font-size: 32px; }
}

/* ── Right: package summary panel ── */

.pyGC7aVt5zL3R_vpvNZw {
  order: 2;
  position: sticky;
  /* Below sharegate.com's fixed nav (64–67px tall); override with --sq-sticky-top */
  top: var(--sq-sticky-top, 88px);
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid #E1E3E7;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

@media (max-width: 860px) {
  .pyGC7aVt5zL3R_vpvNZw { position: static; }
}

.FeseLEdXSg5ciLDB6dX8 {
  font-family: var(--sq-font-mono, "ABC Favorit Mono", ui-monospace, monospace);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6C6E72;
}

.vl1QV7NZUmlOLRCDktyW {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #E1E3E7;
}

.OSr9URpePQWKi0TFmdUA {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.YAMgoLTgaKNZd39WxYBC {
  font-size: 16px;
  font-weight: 500;
  color: #232426;
}

.BaJ3e2v4KQIfY0ohYLwe {
  font-size: 14px;
  color: #6C6E72;
}

.sbY1cRIH84sHaBnOHd2H {
  font-size: 16px;
  font-weight: 500;
  color: #232426;
  white-space: nowrap;
}

/* What's included in the package (no per-part prices) */
.CimN1Yp4MHIecXF24ZHM {
  list-style: none;
  margin: -4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.SctmU6Aunf5cJsvs18bZ {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: #232426;
}

.VsVskI9f3AIy98ryy9Of {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EDEAFB;
  color: #4D468F;
  font-size: 12px;
  font-weight: 700;
}

.KBeXdl8XRwFkSyYdFhy6 {
  color: #6C6E72;
}

/* Total */
.GTFFGp7nALBr565JjZ4E {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 20px;
  border-top: 2px solid #232426;
}

.ycmaZM7l_JUaTR_Nw9HR {
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  color: #232426;
}

.YYk5orQVWztOaZRn4LUz {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.rrJIrunDtp4aEOfHlm_x {
  font-family: var(--sq-font-display, "ABC Favorit", sans-serif);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.03em;
  color: #232426;
}

.aOV1rTbq0fc05ZEzWOMN {
  font-size: 13px;
  color: #6C6E72;
}

.W613VlVNapow7AkqVkG5 {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--sq-font-mono, "ABC Favorit Mono", monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: #E6F4EA;
  color: #1F6B3A;
}

/* "Ask Spara about this quote" */
.s_hJnE_bnh_uCbOecUNS {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid #CBC6F5;
  border-radius: 8px;
  background: #FFFFFF;
  cursor: pointer;
  font-family: var(--sq-font-display, "ABC Favorit", sans-serif);
  font-weight: 500;
  font-size: 15px;
  color: #4D468F;
}

.s_hJnE_bnh_uCbOecUNS:hover { background: #EDEAFB; }

/* ── Left: form panel ── */

.edwJzl8Mvc5iFh2b5VUe {
  background: #FFFFFF;
  border: 1px solid #E1E3E7;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.t6fh7Ganj0Q0_PE8zphE {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.t6fh7Ganj0Q0_PE8zphE + .t6fh7Ganj0Q0_PE8zphE {
  border-top: 1px solid #E1E3E7;
}

.EpmXFwfvn5jL8CESscAo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dS8hBpTbQmKr1RA5N4As {
  font-size: 14px;
  font-weight: 500;
  color: #232426;
}

.uW691e1B2FVHXG2ExxMD { color: #E8552B; }

.siAkvvAbfn5qaZMxqOlD {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 480px) {
  .siAkvvAbfn5qaZMxqOlD { grid-template-columns: 1fr; }
}

.KUhHVXaTNsa5trMEkNs7,
.w0APJCSQ7zh7lhb8_aHx {
  height: 44px;
  border: 1px solid #CBCDD2;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 16px;
  font-family: inherit;
  color: #232426;
  background: #FFFFFF;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.KUhHVXaTNsa5trMEkNs7:focus,
.w0APJCSQ7zh7lhb8_aHx:focus {
  outline: none;
  border-color: #6057B3;
  box-shadow: 0 0 0 3px #E6E3FA;
}

._2K5zO5hvpv8fZrGPaWXb {
  border-color: #D92D20 !important;
}

.o9gFhPx7woUABqDsZjWP {
  font-size: 12px;
  color: #D92D20;
}

.w0APJCSQ7zh7lhb8_aHx {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23484A4D%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}

/* ── License term ── */

.StqoJqnVdzRiabH9AS7h {
  font-size: 16px;
  font-weight: 500;
  color: #232426;
}

.FDdpiy0VdiLq__cfUjGy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -8px;
}

.SFwj3hcyEn969ukAWTck {
  font-family: var(--sq-font-mono, "ABC Favorit Mono", ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: #F1F2F4;
  color: #484A4D;
}

.rPKBrnsABi0b0lW8QNDt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #232426;
  cursor: pointer;
}

.odliSdFldO8aCH92319u {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #6057B3;
  cursor: pointer;
}

/* ── Form footer with submit ── */

.dwoMWKibqcrbQ0eO7P0K {
  padding: 24px 32px;
  background: #F8F9FA;
  border-top: 1px solid #E1E3E7;
  display: flex;
  justify-content: flex-end;
}

.poK5kRWksIoTiyCkJG0z {
  font-family: var(--sq-font-display, "ABC Favorit", sans-serif);
  font-weight: 500;
  font-size: 16px;
  height: 48px;
  padding: 0 28px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: #FFFFFF;
  background: linear-gradient(180deg, #7A6FD0, #6057B3);
  box-shadow: 0 2px 6px rgba(96, 87, 179, 0.35);
  transition: filter 0.15s ease;
}

.poK5kRWksIoTiyCkJG0z:hover:not(:disabled) { filter: brightness(1.06); }

.poK5kRWksIoTiyCkJG0z:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Honeypot ── */

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

/* ── Submitting overlay ── */

.XoEJ9zbPYOfjQTogxr76 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.95);
  z-index: 2;
  border-radius: inherit;
}

.S_ya2wB3HPHxC9dTrotg {
  width: 36px;
  height: 36px;
  border: 3px solid #E5E4E0;
  border-top-color: #6057B3;
  border-radius: 50%;
  animation: tJq62HoQonFnw3uSvmK_ 0.8s linear infinite;
}

@keyframes tJq62HoQonFnw3uSvmK_ { to { transform: rotate(360deg); } }

.I_52JVDVtLeGr0UZj73_ {
  font-size: 16px;
  font-weight: 600;
  color: #232426;
  margin: 0;
}

/* ── Terminal states (shown inside formPanel) ── */

.bz2jljZfEvkXtHFP3UzN {
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.OW6cyxymAPQo0dL2bKmE { font-size: 36px; }

.Qh9oO8PpIKcVJ467biUx {
  font-family: var(--sq-font-display, "ABC Favorit", sans-serif);
  font-size: 24px;
  font-weight: 500;
  color: #232426;
  margin: 0;
}

.Sj4GI7oVbovhMXRcIaaD {
  font-size: 15px;
  color: #484A4D;
  line-height: 1.6;
  max-width: 38ch;
  margin: 0;
}

.d5j13p_VjZvIvDb3gm4p {
  margin-top: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: linear-gradient(180deg, #7A6FD0, #6057B3);
  color: #FFFFFF;
}

/* ── Iframe states ── */

.H20gw6gJ1nML42EwRMKg {
  flex: 1;
  min-height: 600px;
}

/* QuoteIframe (shared with the live QuoteRequestForm, so not edited) fixes its frame at 600px.
   Taller here, overridden by structure: wrapper > iframeContainer. */
.yfx9szQTsoe5_tL85zeg > div > div:first-child {
  height: max(600px, 80vh);
}

.N4fMRvLkKewGdIPxx7Jt {
  font-family: var(--sq-font-body, -apple-system, "Helvetica Neue", sans-serif);
}

/* ── Step transition: plan ⇄ quote should read as a page change ──── */

.e3rA2_pf_DR6QlHhw0BQ {
  /* Lands below sharegate.com's fixed nav when scrolled to the top of the builder */
  scroll-margin-top: var(--sq-sticky-top, 88px);
}

.Qub4VjKcwD8_Ivshuyy8 {
  animation: WNxk4tapfedzL1ERqGW8 200ms ease-in forwards;
  pointer-events: none;
}

._gJfmje_rHIWmvVw2HaM {
  animation: cjydwZ8SQa8ZM0XrIAGA 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes WNxk4tapfedzL1ERqGW8 {
  to {
    opacity: 0;
    transform: translateY(-16px);
  }
}

@keyframes cjydwZ8SQa8ZM0XrIAGA {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Qub4VjKcwD8_Ivshuyy8,
  ._gJfmje_rHIWmvVw2HaM {
    animation: none;
  }
}