:root{
  --mx2-ink:var(--bf-text);
  --mx2-paper:var(--bf-bg);
  --mx2-surface:var(--bf-surface);
  --mx2-muted:var(--bf-muted);
  --mx2-violet:var(--bf-accent);
  --mx2-coral:var(--bf-sale,var(--bf-accent));
  --mx2-sale:#e01116; /* engine discount red, quiz-scoped token */
  --mx2-soft:color-mix(in srgb,var(--bf-accent) 8%,var(--bf-bg));
  --mx2-soft-strong:color-mix(in srgb,var(--bf-accent) 15%,var(--bf-bg));
  --mx2-display:"Oswald","Arial Narrow","Roboto Condensed",system-ui,sans-serif;
  --mx2-body:"PT Sans",system-ui,-apple-system,sans-serif;
}

html,body{background:var(--mx2-paper)}
body{color:var(--mx2-ink);font-family:var(--mx2-body)}

/* Typography: condensed display face carries the ad rhythm, PT Sans carries reading and forms. */
[data-type=title],
[data-type=rich_text] h1,
.mx2-offer-head h1,
main[data-step=special-offer] [data-type=rich_text] h1,
.bf-brand,
.mx2-eyebrow,
[data-type=button],
a[data-action=navigate],
button[data-action=navigate],
.bf-auth-form button,
.bf-pwh-cta,
.bf-cta-scroll,
main[data-variant=mystarx2-scale] .bf-option-label{
  font-family:var(--mx2-display);
}
[data-type=title],[data-type=rich_text] h1,.mx2-offer-head h1{
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.005em;
  line-height:1.06;
  text-wrap:balance;
}
[data-type=button],a[data-action=navigate],button[data-action=navigate],.bf-auth-form button,.bf-pwh-cta{
  font-weight:600;
  font-size:19px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.bf-option-label,.bf-option-desc,[data-type=subtitle],[data-type=paragraph],[data-type=rich_text] p,.mx2-reading,.mx2-axis strong,.mx2-disclaimer,input,select,textarea{
  font-family:var(--mx2-body);
}
main[data-step]{
  width:min(100%,680px);
  max-width:680px;
  margin-inline:auto;
  padding-inline:18px;
}
main[data-step]::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 12%,color-mix(in srgb,var(--mx2-coral) 9%,transparent),transparent 28%),
    radial-gradient(circle at 92% 5%,color-mix(in srgb,var(--mx2-violet) 10%,transparent),transparent 32%),
    var(--mx2-paper);
}

.bf-step-header{margin-bottom:12px}
.bf-brand{
  color:var(--mx2-ink)!important;
  font-size:16px!important;
  font-weight:600!important;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.bf-progress{height:4px;gap:5px;margin-bottom:24px}
.bf-progress-seg{height:4px;background:color-mix(in srgb,var(--mx2-violet) 13%,transparent)}
.bf-progress-seg-bar{background:linear-gradient(90deg,var(--mx2-violet),var(--mx2-coral))}
.bf-back-button{opacity:.55;transition:opacity .18s ease,transform .12s ease}
.bf-back-button svg{stroke:var(--mx2-ink);stroke-width:3.2}
.bf-back-button:hover,.bf-back-button:focus-visible{opacity:.85}

[data-type=title]{
  color:var(--mx2-ink);
  font-size:clamp(30px,8vw,42px);
}
[data-type=subtitle],[data-type=paragraph]{
  color:var(--mx2-muted);
  font-size:16px;
  line-height:1.48;
}
.mx2-hl{color:var(--mx2-violet)} /* highlighted value phrase inside a headline (MystarX v1 contract) */
.mx2-eyebrow{
  display:inline-block;
  color:var(--mx2-violet);
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}

[data-type=button]{
  min-height:56px;
  border-radius:10px;
  box-shadow:0 12px 28px color-mix(in srgb,var(--bf-button-bg) 18%,transparent);
}

/* Editorial screens: eyebrow, headline and body share one left axis. */
main:is(
  [data-step=intro],
  [data-step=analysis-loader],
  [data-step=email-capture],
  [data-variant=mystarx2-report],
  [data-variant=mystarx2-report-layer],
  [data-variant=mystarx2-data-intro],
  [data-variant=mystarx2-name],
  [data-variant=mystarx2-success]
) :is([data-type=title],[data-type=subtitle],[data-type=paragraph],[data-type=rich_text] h1,[data-type=rich_text] p){
  text-align:left;
  margin-inline:0;
}
main:is(
  [data-step=intro],
  [data-variant=mystarx2-report],
  [data-variant=mystarx2-report-layer],
  [data-variant=mystarx2-data-intro],
  [data-variant=mystarx2-name],
  [data-variant=mystarx2-success]
) [data-type=subtitle]{
  font-size:16px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  line-height:1.48;
}
main[data-step=analysis-loader] [data-type=rich_text] p,
main[data-step=email-capture] [data-type=rich_text] p{
  color:var(--mx2-muted);
  font-size:16px;
  line-height:1.48;
}

/* Shared interaction contract: geometry never changes between idle, press and selected. */
.bf-option-card,
.bf-option-card:active{transform:none}
.bf-option-card:focus-visible{
  outline:2px solid var(--mx2-violet);
  outline-offset:3px;
}

/* Editorial answers: full-bleed rows with a divider; press and selection tint the same row. */
.bf-options[data-layout=list],
main[data-layout-preset=standard-v1]>.bf-options[data-layout=list]{
  gap:0;
  width:auto;
  margin-inline:-18px;
}
.bf-option-card .bf-option-input{
  inset:0 auto auto 0;
  width:1px;
  height:1px;
  margin:0;
}
.bf-options[data-layout=list] .bf-option-card{
  position:relative;
  min-height:64px;
  padding:16px 18px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transition:background .15s ease;
}
.bf-options[data-layout=list] .bf-option-card::after,
.bf-options[data-layout=list] .bf-option-card:first-child::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:1px;
  background:color-mix(in srgb,var(--mx2-ink) 10%,transparent);
  transition:opacity .15s ease;
}
.bf-options[data-layout=list] .bf-option-card:first-child::before{top:0;bottom:auto}
@media(hover:hover){
  .bf-options[data-layout=list] .bf-option-card:hover{background:var(--mx2-soft)}
}
.bf-options[data-layout=list] .bf-option-card:active{background:var(--mx2-soft-strong)}
.bf-options[data-layout=list] .bf-option-card.is-selected{
  background:var(--mx2-soft-strong);
  box-shadow:none;
}
.bf-options[data-layout=list] .bf-option-card.is-selected::after,
.bf-options[data-layout=list] .bf-option-card.is-selected::before{opacity:0}
.bf-options[data-layout=list] .bf-option-label{
  font-size:17px;
  font-weight:800;
  line-height:1.25;
}
.bf-options[data-layout=list] .bf-option-check{
  width:25px;
  height:25px;
  opacity:1;
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mx2-ink) 16%,transparent);
}
.bf-options[data-layout=list] .is-selected .bf-option-check{
  box-shadow:none;
  background:var(--mx2-violet);
}

/* Image choices are the visual answer, labels stay explicit underneath. */
.bf-options[data-layout=image_grid]{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 12px;
}
.bf-options[data-layout=image_grid] .bf-option-card{
  overflow:visible;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.bf-options[data-layout=image_grid] .bf-option-card::after{display:none}
.bf-options[data-layout=image_grid] .bf-option-image{
  aspect-ratio:1/1;
  width:100%;
  height:auto;
  border-radius:18px;
  object-fit:cover;
  background:var(--mx2-soft);
  box-shadow:0 1px 0 color-mix(in srgb,var(--mx2-ink) 8%,transparent);
  transition:transform .18s ease,box-shadow .18s ease;
}
.bf-options[data-layout=image_grid]{align-items:start}
.bf-options[data-layout=image_grid] .bf-option-card{align-content:start}
.bf-options[data-layout=image_grid] .bf-option-body,
.bf-options[data-layout=image_grid]:not([data-multiple='true']) .bf-option-body{
  min-height:0;
  padding:8px 4px 0;
  background:transparent!important;
  color:var(--mx2-ink)!important;
}
.bf-options[data-layout=image_grid] .bf-option-label{
  font-size:16px;
  font-weight:850;
  line-height:1.2;
}
.bf-options[data-layout=image_grid] .bf-option-check{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  background:var(--mx2-surface);
}
.bf-options[data-layout=image_grid] .bf-option-card:active .bf-option-image{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mx2-violet) 45%,transparent);
}
.bf-options[data-layout=image_grid] .bf-option-card.is-selected .bf-option-image{
  box-shadow:0 0 0 3px var(--mx2-violet);
}
.bf-options[data-layout=image_grid] .bf-option-card.is-selected .bf-option-label{color:var(--mx2-violet)}

/* Rating becomes one calm spectrum, not five boxes. */
main[data-variant=mystarx2-scale] [data-type=subtitle]{
  color:var(--mx2-violet);
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
main[data-variant=mystarx2-scale] [data-type=title]{font-size:34px}
main[data-variant=mystarx2-scale] .bf-options[data-layout=chips]{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
  padding:10px 0 42px;
}
main[data-variant=mystarx2-scale] .bf-options[data-layout=chips]::before,
main[data-variant=mystarx2-scale] .bf-options[data-layout=chips]::after{
  position:absolute;
  bottom:0;
  color:var(--mx2-muted);
  font-size:12px;
  font-weight:700;
}
main[data-variant=mystarx2-scale] .bf-options[data-layout=chips]::before{content:"Strongly disagree";left:0}
main[data-variant=mystarx2-scale] .bf-options[data-layout=chips]::after{content:"Strongly agree";right:0;text-align:right}
main[data-variant=mystarx2-scale] .bf-options[data-layout=chips] .bf-option-card{
  display:grid;
  place-items:center;
  min-width:0;
  min-height:auto;
  aspect-ratio:1;
  padding:0;
  border:0;
  border-radius:999px;
  background:var(--mx2-soft);
  box-shadow:none;
  transition:background .15s ease,color .15s ease;
}
main[data-variant=mystarx2-scale] .bf-options[data-layout=chips] .bf-option-card:active,
main[data-variant=mystarx2-scale] .bf-options[data-layout=chips] .bf-option-card.is-selected{
  background:var(--mx2-soft-strong);
  color:var(--mx2-violet);
  box-shadow:inset 0 0 0 2px var(--mx2-violet);
}
main[data-variant=mystarx2-scale] .bf-option-check{display:none}
main[data-variant=mystarx2-scale] .bf-option-label{font-size:22px;font-weight:600}

/* First screen (identity): eyebrow bridges the creative and sits on the same centre axis as the question. */
main[data-step=identity] [data-el=el-identity-eyebrow]{text-align:center}

/* Email domain suggestions are body text, not CTAs: undo the `.bf-auth-form button` display styling. */
.bf-auth-form .bf-email-suggestions button{
  font-family:var(--mx2-body);
  font-weight:400;
  font-size:16px;
  letter-spacing:0;
  text-transform:none;
}

/* Intro is composed like an ad continuation. */
main[data-step=intro]{
  min-height:100dvh;
  text-align:left;
}
main[data-step=intro] [data-el=el-intro-eyebrow]{margin-top:4px}
main[data-step=intro] [data-type=title]{
  max-width:620px;
  font-size:clamp(44px,12vw,76px);
  line-height:.98;
}
main[data-step=intro] [data-type=subtitle]{
  max-width:540px;
  font-size:16px;
}
main[data-step=intro] [data-el=el-intro-hero]{
  width:calc(100% + 36px);
  margin-inline:-18px;
}
main[data-step=intro] [data-el=el-intro-hero] img{
  display:block;
  width:100%;
  max-height:44dvh;
  object-fit:cover;
  object-position:center 58%;
  border-radius:0;
}

/* Interstitials and reports use full artwork plus typographic callouts. */
main:is([data-variant=mystarx2-report],[data-variant=mystarx2-data-intro],[data-variant=mystarx2-report-layer]){
  text-align:left;
}
main:is([data-variant=mystarx2-report],[data-variant=mystarx2-data-intro],[data-variant=mystarx2-report-layer]) [data-type=image]{
  width:calc(100% + 36px);
  margin-inline:-18px;
}
main:is([data-variant=mystarx2-report],[data-variant=mystarx2-data-intro],[data-variant=mystarx2-report-layer]) [data-type=image] img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  max-height:none;
  object-fit:cover;
  border-radius:0;
}
.mx2-reading{
  margin:0;
  padding:4px 0 4px 16px;
  border-left:3px solid var(--mx2-violet);
  color:var(--mx2-ink);
  font-size:17px;
  font-weight:800;
  line-height:1.4;
}
.mx2-reading-accent{border-color:var(--mx2-coral)}
.mx2-axis{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  align-items:start;
  padding:14px 0;
  border-bottom:1px solid color-mix(in srgb,var(--mx2-ink) 10%,transparent);
}
.mx2-axis span{
  display:block;
  color:var(--mx2-violet);
  font-family:var(--mx2-display);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.mx2-axis strong{font-size:16px;line-height:1.32}
.mx2-disclaimer{
  margin:0;
  color:var(--mx2-muted);
  font-size:13px;
  line-height:1.45;
}
.mx2-privacy-note{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 12px;
  padding:14px 0;
  border-top:1px solid color-mix(in srgb,var(--mx2-ink) 10%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--mx2-ink) 10%,transparent);
}
.mx2-privacy-note b{color:var(--mx2-violet)}
.mx2-privacy-note span{grid-column:2;color:var(--mx2-muted);font-size:13px;line-height:1.35}
.mx2-personal-line{
  padding:18px 0;
  border-top:2px solid var(--mx2-violet);
}
.mx2-personal-line span{
  display:block;
  margin-bottom:7px;
  color:var(--mx2-violet);
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.mx2-personal-line strong{display:block;font-size:19px;line-height:1.35}

/* Loader: engine variant loader_compact (as FitnessLab) keeps the column full-height and
   pushes the reviews to the viewport bottom; MystarX_2 only sets its own type and row rhythm. */
main[data-step=analysis-loader] [data-type=rich_text]{text-align:left}
main[data-step=analysis-loader] [data-type=rich_text] h1{
  margin:0 0 4px;
  font-size:34px;
  line-height:1.06;
}
main[data-step=analysis-loader] [data-type=processing]{
  flex:0 0 auto;
  gap:8px;
  margin-top:10px;
  background:transparent;
  box-shadow:none;
}
main[data-step=analysis-loader] .bf-processing-step{
  flex:0 0 auto;
  box-sizing:border-box;
  min-height:54px;
  padding-block:6px;
  padding-inline:16px;
  border-radius:14px;
}
main[data-step=analysis-loader] .bf-processing-label{
  font-family:var(--mx2-body);
  font-size:15px;
  font-weight:700;
  letter-spacing:0;
  white-space:normal;
  line-height:1.25;
}
main[data-step=analysis-loader] .bf-reviews-title{font-size:19px}
/* Engine stage icons (brain/target/bolt/clipboard) in the quiz accent; done rows turn ink. */
main[data-step=analysis-loader] .bf-processing-stage-icon{inline-size:18px;block-size:18px;color:var(--mx2-violet)!important}
main[data-step=analysis-loader] .bf-processing-step[data-status=done] .bf-processing-stage-icon{color:var(--mx2-ink)!important}
main[data-step=analysis-loader] .bf-processing-label{gap:10px}
/* Square rows in the quiz palette; done state stays violet/ink instead of engine green. */
main[data-step=analysis-loader] .bf-processing-step{border-radius:0;background:var(--mx2-soft)}
main[data-step=analysis-loader] .bf-processing-fill{background:var(--mx2-soft-strong)}
main[data-step=analysis-loader] .bf-processing-step[data-status=done],main[data-step=analysis-loader] .bf-processing-step[data-status=done] .bf-processing-fill{background:var(--mx2-soft-strong)}
main[data-step=analysis-loader] .bf-processing-step[data-status=done] .bf-processing-icon{background:var(--mx2-ink);color:#fff}
main[data-step=analysis-loader] .bf-processing-icon{border-radius:0}
main[data-step=analysis-loader] .bf-review-text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-height:720px){
  main[data-step=analysis-loader] [data-type=rich_text] h1{font-size:30px}
  main[data-step=analysis-loader] .bf-processing-step{min-height:46px!important;padding-block:4px!important}
  main[data-step=analysis-loader] .bf-review-text{-webkit-line-clamp:2}
  main[data-step=analysis-loader] .bf-review-card{padding:12px 14px}
  main[data-step=analysis-loader] .bf-reviews-title{font-size:17px}
}

/* Inputs remain calm and native. */
.bf-date-input-wrapper,.bf-city-control,[data-type=text_input],.bf-auth-form{
  width:100%;
}
input,select,textarea{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  min-height:54px;
  border:0!important;
  border-radius:8px!important;
  background:var(--mx2-soft)!important;
}
input:focus,select:focus,textarea:focus{
  outline:0;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mx2-violet) 30%,transparent)!important;
}
/* Time and city fields: soft lavender surface without a visible ring; state through tint only. */
.bf-time-select,.bf-city-input,.bf-configured-date-input-wrapper .bf-date-select{
  height:56px;
  background:var(--mx2-soft)!important;
  box-shadow:none!important;
  font-weight:600;
}
.bf-time-select:focus,.bf-city-input:focus,.bf-configured-date-input-wrapper .bf-date-select:focus{
  background:color-mix(in srgb,var(--mx2-violet) 9%,var(--mx2-paper))!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mx2-violet) 30%,transparent)!important;
}
.bf-time-select.is-placeholder,.bf-configured-date-input-wrapper .bf-date-select.is-placeholder{
  color:color-mix(in srgb,var(--mx2-ink) 42%,transparent);
  font-weight:600;
}
.bf-time-separator{color:color-mix(in srgb,var(--mx2-ink) 35%,transparent);font-weight:600}
.bf-input-unknown{
  margin-top:14px;
  color:color-mix(in srgb,var(--mx2-violet) 82%,var(--mx2-ink));
  font:500 13px/1.2 var(--mx2-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-color:color-mix(in srgb,var(--mx2-violet) 35%,transparent);
}
.bf-input-unknown:active{opacity:.7}
main[data-step=email-capture] [data-type=rich_text]{text-align:left}
main[data-step=email-capture] [data-type=rich_text] h1{
  margin:8px 0;
  font-size:34px;
  line-height:1.06;
}

/* Paywall: long-form editorial story, no stack of decorative cards. */
main:is([data-step=offer],[data-step=special-offer]){
  width:min(100%,760px);
  max-width:760px;
  padding-inline:18px;
}
main[data-step=offer]>[data-el=el-offer-hero]{
  width:calc(100% + 36px);
  margin-inline:-18px;
  position:relative;
  z-index:1;
  /* Bottom edge casts a shadow onto the content, mirroring the sticky header above: a layered "3D" stack. */
  box-shadow:0 6px 16px -12px rgba(0,0,0,.25);
}
/* Before/after captions over the diptych + inner bottom shade (the header already shades the top edge). */
main[data-step=offer]>[data-el=el-offer-hero]::before,
main[data-step=offer]>[data-el=el-offer-hero]::after{
  position:absolute;
  bottom:12px;
  z-index:2;
  font:600 12px/1 var(--mx2-display);
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 9px;
  pointer-events:none;
}
main[data-step=offer]>[data-el=el-offer-hero]::before{
  content:"Before MystarX";
  left:12px;
  color:#fff;
  background:color-mix(in srgb,var(--mx2-ink) 78%,transparent);
}
main[data-step=offer]>[data-el=el-offer-hero]::after{
  content:"After MystarX";
  right:12px;
  color:#fff;
  background:var(--mx2-violet);
}
main[data-step=offer]>[data-el=el-offer-hero] img{display:block}
main[data-step=offer]>[data-el=el-offer-hero] img{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  object-fit:cover;
  object-position:center;
  border-radius:0;
}
.mx2-offer-head,.mx2-offer-lead{text-align:left}
.mx2-offer-head>span{
  color:var(--mx2-violet);
  font-size:11px;
  font-weight:950;
  letter-spacing:.13em;
}
.mx2-offer-head h1{
  margin:9px 0 12px;
  font-size:clamp(42px,11vw,68px);
  line-height:.98;
  letter-spacing:.005em;
  text-align:left;
}
.mx2-offer-head p,.mx2-offer-lead p{
  margin:0;
  color:var(--mx2-muted);
  font-size:17px;
  line-height:1.48;
}
.mx2-offer-focus{
  margin:0;
  padding:12px 0 12px 16px;
  border-left:3px solid var(--mx2-coral);
  font-weight:850;
  line-height:1.38;
}
.mx2-scope-line{
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  padding:17px 0;
  border-top:1px solid color-mix(in srgb,var(--mx2-ink) 12%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--mx2-ink) 12%,transparent);
}
.mx2-scope-line b{width:100%;font-size:18px}
.mx2-scope-line span{color:var(--mx2-muted);font-size:13px;font-weight:750}
main[data-step=offer] [data-el*=feature-][data-type=image]{
  width:calc(100% + 36px);
  margin:12px -18px 0;
}
main[data-step=offer] [data-el*=feature-][data-type=image] img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  max-height:none;
  object-fit:cover;
  border-radius:0;
}
.mx2-offer-feature{
  position:relative;
  padding:4px 0 18px 50px;
}
.mx2-offer-feature>span{
  position:absolute;
  left:0;
  top:0;
  color:var(--mx2-coral);
  font-size:24px;
  font-weight:950;
}
.mx2-offer-feature h2{margin:0 0 7px;font-size:27px;line-height:1}
.mx2-offer-feature p{margin:0;color:var(--mx2-muted);line-height:1.45}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout]{
  padding:8px 0 22px;
  border-top:0;
  background:transparent;
  box-shadow:none;
  /* Hard editorial checkout: square-ish corners, quiet ink borders, black submit, no shadows. */
  --bf-co-gap:10px;
  --bf-co-radius:6px;
  --bf-co-border:1px solid color-mix(in srgb,var(--mx2-ink) 10%,transparent);
  --bf-co-accent:var(--mx2-ink);
  --bf-co-button-radius:8px;
  --bf-co-button-bg:var(--mx2-ink);
}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-item{border-radius:6px;border-color:color-mix(in srgb,var(--mx2-ink) 10%,transparent);background:var(--mx2-paper);box-shadow:none}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-item:has(.bf-checkout-toggle[aria-checked=true]){border-color:color-mix(in srgb,var(--mx2-ink) 32%,transparent)}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-toggle{font-family:var(--mx2-body);font-weight:700;color:var(--mx2-ink)}
/* Real radio: round ring, ink dot when checked (was a filled square). */
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-radio{border-radius:50%;border:1.5px solid color-mix(in srgb,var(--mx2-ink) 38%,transparent);background:var(--mx2-paper);box-shadow:none}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-toggle[aria-checked=true] .bf-checkout-radio{border-color:var(--mx2-ink);background:var(--mx2-paper);box-shadow:inset 0 0 0 5px var(--mx2-paper),inset 0 0 0 12px var(--mx2-ink);transform:none}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-panel[data-open=true] .bf-checkout-panel-inner{border-top-color:color-mix(in srgb,var(--mx2-ink) 8%,transparent)}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-field{font-family:var(--mx2-body);color:var(--mx2-muted)}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout .bf-checkout-field input,
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-control,
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout [data-card-host]{border-radius:6px!important;border-color:color-mix(in srgb,var(--mx2-ink) 18%,transparent)!important;background:var(--mx2-paper)!important}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout .bf-checkout-field input:focus{border-color:var(--mx2-ink)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--mx2-ink) 14%,transparent)!important}
/* Wallet buttons: Apple Pay is a native `apple-pay-button` (style black|white|white-outline is Apple's,
   but border-radius is ours); Google Pay button follows the same radius. */
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-wallet>button,
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-wallet button,
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-wallet apple-pay-button,
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-wallet .gpay-button,
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout-wallet[data-wallet-status=loading]::before{border-radius:6px!important}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout [data-checkout-card-submit]{border-radius:8px;background:var(--mx2-ink);color:#fff;font-family:var(--mx2-display);font-weight:600;font-size:18px;letter-spacing:.04em;text-transform:uppercase;box-shadow:none}
main:is([data-step=offer],[data-step=special-offer]) [data-checkout-errors]{border-radius:6px}
main:is([data-step=offer],[data-step=special-offer]) .bf-checkout .bf-checkout-security{font-family:var(--mx2-body);color:var(--mx2-muted)}
/* FF Billing SDK native skin (`uiMode: native`): engine skin rounds cards to 24px with a shadow;
   MystarX_2 keeps the hard editorial look. Hosted PCI iframes and wallet buttons untouched. */
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-skin-default{gap:10px}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-payment-method-card{
  border-radius:6px!important;
  padding:16px 18px!important;
  border:1px solid color-mix(in srgb,var(--mx2-ink) 10%,transparent)!important;
  box-shadow:none!important;
  background:var(--mx2-paper)!important;
}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-payment-method-card:has(.ff-payment-method-radio:checked){border-color:color-mix(in srgb,var(--mx2-ink) 32%,transparent)!important}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-payment-method-radio{appearance:none;box-sizing:border-box;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;border:1.5px solid color-mix(in srgb,var(--mx2-ink) 38%,transparent)!important;border-radius:50%!important;background:var(--mx2-paper)!important;box-shadow:none!important}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-payment-method-radio:checked{border-color:var(--mx2-ink)!important;background:var(--mx2-paper)!important}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-payment-method-radio:checked::after{width:10px!important;height:10px!important;border-radius:50%!important;background-color:var(--mx2-ink)!important}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-payment-method-label{font-family:var(--mx2-body);font-weight:700;color:var(--mx2-ink)}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-card-form-label{font-family:var(--mx2-body);color:var(--mx2-muted)}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-card-form-text-input,
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-card-form-select{
  border-radius:6px!important;
  border:1px solid color-mix(in srgb,var(--mx2-ink) 18%,transparent)!important;
  background:var(--mx2-paper)!important;
  box-shadow:none!important;
}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-card-form-text-input:focus-within,
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-card-form-select:focus{border-color:var(--mx2-ink)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--mx2-ink) 14%,transparent)!important}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .ff-card-form-submit-button{
  border-radius:8px!important;
  background:var(--mx2-ink)!important;
  color:#fff!important;
  font-family:var(--mx2-display)!important;
  font-weight:600!important;
  font-size:18px!important;
  letter-spacing:.04em;
  text-transform:uppercase;
  box-shadow:none!important;
}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] apple-pay-button,
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] [id^='bf-applepay-'] button,
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] [id^='bf-applepay-'] apple-pay-button,
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout] .gpay-button{border-radius:6px!important}
main:is([data-step=offer],[data-step=special-offer]) [data-type=checkout]+.bf-checkout-native-note{font-family:var(--mx2-body);color:var(--mx2-muted);text-align:center;padding:0}
main:is([data-step=offer],[data-step=special-offer]) [data-type=faq]{
  width:auto;
  margin-inline:-18px!important;
  padding:18px 18px 14px!important;
  border-radius:0!important;
  background:var(--mx2-soft)!important;
  color:var(--mx2-ink)!important;
  font-family:var(--mx2-body)!important;
  gap:6px;
}
main:is([data-step=offer],[data-step=special-offer]) .bf-faq-title{
  font-family:var(--mx2-display);
  font-weight:600;
  font-size:24px!important;
  line-height:1.06;
  letter-spacing:.01em;
  text-transform:uppercase;
  text-align:left;
  color:var(--mx2-ink)!important;
  margin-bottom:4px;
}
main:is([data-step=offer],[data-step=special-offer]) .bf-faq-list{gap:0}
main:is([data-step=offer],[data-step=special-offer]) .bf-faq-item{border-top:1px solid color-mix(in srgb,var(--mx2-ink) 10%,transparent)}
main:is([data-step=offer],[data-step=special-offer]) .bf-faq-q{padding:9px 0;color:var(--mx2-ink);font-weight:700;text-align:left}
main:is([data-step=offer],[data-step=special-offer]) .bf-faq-item[data-open='true'] .bf-faq-question-text{color:var(--mx2-violet)!important}
main:is([data-step=offer],[data-step=special-offer]) .bf-faq-item[data-open='true'] .bf-faq-chevron{color:var(--mx2-violet)!important}
main:is([data-step=offer],[data-step=special-offer]) .bf-faq-a{padding:0 0 10px;color:var(--mx2-muted);font-weight:400;font-size:14px}

/* Paywall skeleton blocks (FitnessLab / MystarX v1 order) in the MystarX_2 palette. */
.bf-pw-header{
  background:color-mix(in srgb,var(--mx2-paper) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(12px);
  -webkit-backdrop-filter:saturate(1.2) blur(12px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--mx2-ink) 8%,transparent);
}
[data-type=paywall_header]{margin-inline:-18px!important;padding-inline:18px!important}
.bf-pwh-timer{align-items:flex-start!important}
.bf-pwh-digits span{font-family:var(--mx2-display)!important;font-weight:600!important;color:var(--mx2-ink)!important;font-size:30px!important;min-width:36px!important}
.bf-pwh-labels{display:grid!important;grid-template-columns:36px 36px;gap:0!important;column-gap:10px!important;width:auto!important;margin-top:2px!important}
.bf-pwh-labels span{text-align:center}
.bf-pwh-digits .bf-pwh-colon{color:var(--mx2-muted)!important;font-size:24px!important;min-width:auto!important;margin-inline:2px}
.bf-pwh-labels span{font-family:var(--mx2-body)!important;font-weight:400!important;font-size:8.5px!important;text-transform:uppercase;letter-spacing:.04em;color:var(--mx2-muted)!important}
.bf-checkout-heading{font-family:var(--mx2-display)!important;font-weight:600!important;font-size:24px!important;line-height:1.06!important;text-transform:uppercase;letter-spacing:.01em;text-align:center!important;color:var(--mx2-ink)}
.bf-pwh-cta,.bf-cta-scroll,
main:is([data-step=offer],[data-step=special-offer]) [data-type=button]{
  background:var(--mx2-sale)!important;
  color:#fff!important;
  border-radius:10px;
  box-shadow:0 12px 28px color-mix(in srgb,var(--mx2-sale) 22%,transparent);
}
.bf-pwh-cta{border-radius:8px;font-size:15px}
.bf-cta-scroll{font-size:19px;letter-spacing:.06em}
main[data-step=offer] [data-el=el-offer-summary]{
  padding:14px 16px;
  border-radius:0;
  background:var(--mx2-soft);
}
.bf-ps-icon{background:var(--mx2-paper);border-radius:0}
.bf-ps-info b{font-family:var(--mx2-body);font-weight:700;color:var(--mx2-muted);font-size:12.5px;letter-spacing:.02em;text-transform:uppercase}
.bf-ps-value{font-family:var(--mx2-display);font-weight:600;font-size:19px;color:var(--mx2-ink);letter-spacing:.02em;text-transform:uppercase}
main[data-step=offer] [data-el=el-offer-benefits-heading]{margin-top:10px;text-align:left;margin-inline:0}
main[data-step=offer] [data-type=benefits]{gap:0}
.bf-benefit{
  padding:11px 0;
  border-bottom:1px solid color-mix(in srgb,var(--mx2-ink) 10%,transparent);
}
.bf-benefit:last-child{border-bottom:0}
.bf-benefit-media{
  width:72px;
  height:72px;
  border-radius:0;
  background:var(--mx2-soft);
  box-shadow:none;
}
.bf-benefit-media img{padding:0;box-sizing:border-box;object-fit:cover}
main[data-step=offer] .bf-benefit-media{background:#f6f2fc} /* flat paper baked into the benefit icons */
.bf-benefit-title{font-weight:700;font-size:15px;line-height:1.3}
.bf-benefit-sub{display:block;margin-top:3px;font-family:var(--mx2-body);font-weight:400;font-size:13.5px;line-height:1.4;color:var(--mx2-muted)}
.mx2-offer-lead{padding-top:8px}
.mx2-offer-lead h2{
  margin:0 0 8px;
  font-family:var(--mx2-display);
  font-size:30px;
  font-weight:600;
  line-height:1.06;
  text-transform:uppercase;
  letter-spacing:.005em;
}
.bf-dt-heading{font-family:var(--mx2-display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--mx2-ink)}
/* Typographic timer: no circles, ink digits, muted labels (matches the sticky header timer). */
.bf-dt-brand{display:none}
.bf-dt-num{font-family:var(--mx2-display);font-weight:600;font-size:26px;fill:var(--mx2-ink)}
.bf-dt-label{font-family:var(--mx2-body);font-weight:400;font-size:10.5px;fill:var(--mx2-muted);text-transform:uppercase;letter-spacing:.06em}
/* Price plate: square corners, red strike, red price and a square "СКИДКА 90%" ribbon. */
.bf-dt-plate{fill:var(--mx2-soft);rx:0}
.bf-dt-price{font-family:var(--mx2-display);font-weight:600;fill:var(--mx2-sale)}
.bf-dt-old{font-family:var(--mx2-display);font-weight:500;fill:var(--mx2-muted)}
.bf-dt-accent{fill:var(--mx2-sale);stroke:var(--mx2-sale)}
rect.bf-dt-accent{rx:0}
.bf-dt-ribbon{font-family:var(--mx2-display);font-weight:600;letter-spacing:.04em}
.bf-dt-sticker svg{filter:none}

/* Special offer: engine special_offer preset, MystarX_2 typography. */
main[data-step=special-offer] [data-type=rich_text] h1{
  color:var(--mx2-ink)!important;
  font-family:var(--mx2-display);
  font-size:44px!important;
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-align:left;
  margin:0 0 12px!important;
}
main[data-step=special-offer] [data-type=rich_text] p{text-align:left}
main[data-step=special-offer] .bf-offer-lead{font:400 19px/1.35 var(--mx2-body)!important;color:var(--mx2-muted)!important}
main[data-step=special-offer] .bf-offer-lead strong{font-family:var(--mx2-display);font-weight:600;color:var(--mx2-violet)!important;font-size:22px!important}
main[data-step=special-offer] .bf-offer-bundle{font:600 26px/1.05 var(--mx2-display)!important;text-transform:uppercase;text-align:left!important;color:var(--mx2-ink)!important;margin:18px 0 14px!important}
/* Special offer programs: same hard pictograms as the paywall benefits, cut with a transparent background
   so the engine's per-item colour tint (media background + sub copy colour) stays visible. */
main[data-step=special-offer] .bf-benefit-media{border-radius:0!important}
main[data-step=special-offer] .bf-benefit-sub{font-family:var(--mx2-body);font-weight:400}
main[data-step=special-offer] .bf-benefit{border-bottom:0;padding:8px 0}
main[data-step=special-offer] .bf-benefit-sub{display:block}
main[data-step=special-offer] .bf-benefit-title{font-family:var(--mx2-display);font-weight:600;letter-spacing:.04em}
main[data-step=special-offer] .bf-benefit-media img{padding:0;box-sizing:border-box;object-fit:cover}
main[data-step=offer] .bf-benefit-media{background:#f6f2fc} /* flat paper baked into the benefit icons */
main[data-variant=mystarx2-name],main[data-variant=mystarx2-success]{text-align:left}
main[data-variant=mystarx2-success] [data-type=image]{
  width:130px;
}
main[data-variant=mystarx2-success] [data-type=image] img{border-radius:28px}

/* Reviews: flat cards on a lavender surface, no shadow, square corners; Oswald title. */
.bf-reviews-viewport .bf-reviews-carousel{animation-duration:26s}
/* Magazine pull-quote: kicker, big quotation mark, italic body, small-caps byline, thin column rule. */
.bf-review-card{
  position:relative;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-left:1px solid color-mix(in srgb,var(--mx2-ink) 18%,transparent)!important;
  padding:6px 18px 4px 18px!important;
  gap:8px!important;
  color:var(--mx2-ink);
}
.bf-review-card::before{
  content:"\201C";
  position:absolute;
  top:-4px;
  right:14px;
  font:600 64px/1 var(--mx2-display);
  color:var(--mx2-violet);
  opacity:.9;
  pointer-events:none;
}
.bf-review-heading{order:1;font-family:var(--mx2-display)!important;font-weight:600!important;font-size:15px!important;letter-spacing:.06em;text-transform:uppercase;color:var(--mx2-ink)!important;padding-right:44px}
.bf-review-text{order:2;font-family:var(--mx2-body);font-style:italic;font-size:16px!important;line-height:1.45!important;color:var(--mx2-ink)}
.bf-review-top{order:3;margin-top:4px}
.bf-review-ava,.bf-review-handle,.bf-review-actions{display:none!important}
.bf-review-sub{font-family:var(--mx2-body);font-size:12.5px;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase;color:var(--mx2-muted)}
.bf-review-card .bf-review-stars{order:4;font-size:12px!important;letter-spacing:1px;color:var(--mx2-violet)!important;margin:0!important}
.bf-review-badge{border-radius:0;font-family:var(--mx2-body);font-weight:700}
.bf-reviews-title{font-family:var(--mx2-display)!important;font-weight:600!important;font-size:24px!important;line-height:1.06!important;letter-spacing:.01em;text-transform:uppercase;color:var(--mx2-ink)!important}
main:is([data-step=offer],[data-step=special-offer]) .bf-reviews-title{text-align:left}
main:is([data-step=offer],[data-step=special-offer]) .bf-reviews-rating{justify-content:flex-start}
.bf-reviews-rating{font-family:var(--mx2-body)!important;font-weight:400!important}
.bf-reviews-rating>b{font-family:var(--mx2-display);font-weight:600}
.bf-reviews-rating span~span{color:var(--mx2-muted)}

/* Local QA checkout visual only. */
.mx2-checkout-mock{display:grid;gap:10px;margin-top:14px}
.mx2-checkout-mock>button{
  min-height:52px;
  border:0;
  border-radius:16px;
  background:var(--bf-button-bg);
  color:var(--bf-button-text);
  font-weight:850;
}
.mx2-checkout-mock label{display:grid;gap:6px;color:var(--mx2-muted);font-size:12px;font-weight:750}
.mx2-checkout-mock>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@media(min-width:760px){
  main[data-step]{padding-block:28px}
  main[data-step=intro]{
    width:min(100%,1060px);
    max-width:1060px;
    display:grid;
    grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);
    grid-template-rows:auto 1fr auto;
    gap:10px 42px;
    align-items:center;
  }
  main[data-step=intro]>.bf-step-header{grid-column:1/-1;grid-row:1}
  main[data-step=intro]>.bf-element-group{grid-column:1;grid-row:2;align-self:center}
  main[data-step=intro] [data-el=el-intro-hero]{grid-column:2;grid-row:2/4;width:100%;margin:0}
  main[data-step=intro] [data-el=el-intro-continue]{grid-column:1;grid-row:3}
  main[data-step=intro] [data-el=el-intro-hero] img{max-height:720px}

  main[data-step=offer] [data-el*=feature-][data-type=image]{
    width:min(100%,620px);
    margin-inline:auto;
  }
}
/* Screens without inputs pin the CTA to the viewport so it never moves with scroll or dvh changes. */
@media(max-width:759px){
  main:is([data-step=intro],[data-step=early-insight],[data-step=relationship-code],[data-step^=report-],[data-step^=account-ready]){
    padding-bottom:calc(96px + env(safe-area-inset-bottom));
  }
  main:is([data-step=intro],[data-step=early-insight],[data-step=relationship-code],[data-step^=report-],[data-step^=account-ready])>[data-type=button][data-action=navigate]{
    position:fixed;
    left:18px;
    right:18px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    width:auto;
    margin:0;
    z-index:6;
  }
  main:is([data-step=intro],[data-step=early-insight],[data-step=relationship-code],[data-step^=report-],[data-step^=account-ready])::after{
    content:"";
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:calc(112px + env(safe-area-inset-bottom));
    background:linear-gradient(to top,var(--mx2-paper) 52%,transparent);
    pointer-events:none;
    z-index:5;
  }
}
@media(max-width:430px){
  main[data-step=intro] [data-type=title]{font-size:46px}
  main[data-step=intro] [data-el=el-intro-hero] img{max-height:42dvh}
  .mx2-offer-head h1{font-size:46px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}

/* Step id is `offer` (runtime offer loop), so the engine's `data-step^=paywall` rhythm rules do not apply; replicate them. */
main[data-step=offer]>[data-type]{margin-bottom:0}
main[data-step=offer]>:is([data-type=before_after],[data-type=benefits],[data-type=food_scanner],[data-type=button],[data-type=checkout],[data-type=reviews_carousel],[data-type=faq],[data-type=paragraph]){margin-bottom:30px}
main[data-step=offer]>.bf-checkout-heading{margin:0 0 12px}
main[data-step=offer]>.bf-element-group{gap:0}
main[data-step=offer]>.bf-element-group:is([data-group-id=value],[data-group-id=trust]){gap:var(--bf-layout-section-gap)}
/* Mobile: Oswald caps with diacritics (Й, Ё) touched the line above at 1.06/0.98 - open the leading a notch. */
@media(max-width:768px){
  [data-type=title],[data-type=rich_text] h1,.mx2-offer-head h1{line-height:1.14}
  main[data-step=intro] [data-type=title]{line-height:1.06}
  .mx2-offer-head h1{line-height:1.06}
  main[data-step=analysis-loader] [data-type=rich_text] h1,
  main[data-step=email-capture] [data-type=rich_text] h1{line-height:1.14}
  main[data-step=special-offer] .mx2-offer-head h1,
  main[data-step=special-offer] [data-type=rich_text] h1{line-height:1.1}
  .bf-checkout-heading,.bf-reviews-title,main:is([data-step=offer],[data-step=special-offer]) .bf-faq-title{line-height:1.14!important}
}