/* ─── Slick Quiz — Frontend Styles ──────────────────────────────────────── */

.slick-quiz {
  --sq-accent:          #5b4cdb;
  --sq-accent-light:    #eeeaff;
  --sq-hover-color:     #4a3bc4;
  --sq-badge-color:     var(--sq-accent);
  --sq-answer-ar:       1 / 1;
  --sq-label-py:        10px;
  --sq-label-px:        12px;
  --sq-question-size:   1.25rem;
  --sq-question-size-m: 1rem;
  --sq-answer-size:     .875rem;
  --sq-answer-size-m:   .775rem;
  --sq-text:            #111827;
  --sq-muted:           #6b7280;
  --sq-border:          #e5e7eb;
  --sq-bg:              #ffffff;
  --sq-radius:          12px;
  --sq-shadow:          0 1px 4px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .05);
  --sq-transition:      .2s ease;

  box-sizing:  border-box;
  max-width:   720px;
  margin:      0 auto 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  color:       var(--sq-text);
  line-height: 1.5;
}

.slick-quiz *, .slick-quiz *::before, .slick-quiz *::after {
  box-sizing: inherit;
}

/* ── "Take the quiz" badge ───────────────────────────────────────────────── */
.sq-badge {
  display:        inline-block;
  margin-bottom:  10px;
  padding:        5px 14px;
  background:     var(--sq-badge-color);
  color:          #fff;
  font-size:      .72rem;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius:  100px;
  user-select:    none;
}

/* Hide badge once results are shown, and always on the CTA/widget teleport instance */
.slick-quiz.sq-completed .sq-badge,
.slick-quiz[data-cta-instance] .sq-badge { display: none; }

/* ── Spotlight scroll effect ─────────────────────────────────────────────── */
/* Quiz sits above the page-dimmer overlay */
.slick-quiz { position: relative; z-index: 2; }

/* Full-page dimmer injected by JS */
.sq-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index:        1;
  transition:     background-color .65s ease;   /* slow fade in  */
}
.sq-overlay.sq-overlay--out {
  transition:     background-color .22s ease;   /* fast fade out */
}

/* ── Card wrapper ─────────────────────────────────────────────────────────── */
.sq-wrap {
  background:    var(--sq-bg);
  border-radius: var(--sq-radius);
  box-shadow:    var(--sq-shadow);
  overflow:      hidden;
}

/* ── Top strip: headline on Q1 vs progress bar on Q2+ ───────────────────────── */
.sq-top {
  min-height: 3px;
}

.sq-intro {
  padding:   26px 32px 8px;
  text-align: center;
}

@media (max-width: 480px) {
  .sq-intro {
    padding: 22px 20px 4px;
  }
}

.sq-intro-title {
  margin:           0 0 12px;
  font-size:        1.5rem;
  font-weight:      800;
  letter-spacing:   -0.02em;
  line-height:      1.25;
  color:            var(--sq-text);
}

.sq-intro-sub {
  margin:      0;
  font-size:   .95rem;
  font-weight: 500;
  line-height: 1.55;
  color:       var(--sq-muted);
  max-width:   560px;
  margin-left:  auto;
  margin-right: auto;
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.sq-progress {
  height:     3px;
  background: var(--sq-border);
}

.sq-bar {
  height:     100%;
  background: var(--sq-accent);
  width:      0%;
  transition: width .4s ease;
}

/* ── Step body ────────────────────────────────────────────────────────────── */
.sq-body {
  padding: 32px 32px 28px;
}

@media (max-width: 480px) {
  .sq-body { padding: 24px 20px 20px; }
}

/* ── Step container ───────────────────────────────────────────────────────── */
.sq-step {
  display:    none;
  opacity:    0;
  transition: opacity var(--sq-transition);
}

.sq-step.is-active {
  display: block;
}

/* ── Step images ──────────────────────────────────────────────────────────── */
.sq-imgs {
  display:               grid;
  gap:                   10px;
  margin-bottom:         24px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.sq-imgs.sq-imgs-1 { grid-template-columns: 1fr; }
.sq-imgs.sq-imgs-2 { grid-template-columns: repeat(2, 1fr); }
.sq-imgs.sq-imgs-3 { grid-template-columns: repeat(3, 1fr); }
.sq-imgs.sq-imgs-4 { grid-template-columns: repeat(2, 1fr); }

.sq-imgs img {
  width:         100%;
  aspect-ratio:  16 / 9;
  object-fit:    cover;
  border-radius: 8px;
  display:       block;
}

/* ── Question ─────────────────────────────────────────────────────────────── */
.sq-question {
  font-size:     var(--sq-question-size);
  font-weight:   700;
  margin:        0 0 20px;
  letter-spacing: -.01em;
  line-height:   1.3;
}

/* ── Answer grid ──────────────────────────────────────────────────────────── */
.sq-answers {
  display:               grid;
  gap:                   12px;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom:         24px;
}

.sq-answers.sq-answers-1 { grid-template-columns: 1fr; }
.sq-answers.sq-answers-2 { grid-template-columns: repeat(2, 1fr); }
.sq-answers.sq-answers-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 480px) {
  /* Keep 2×2 grid on mobile — images stay visible, labels shrink slightly */
  .sq-answers              { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .sq-answers.sq-answers-1 { grid-template-columns: 1fr; }
  .sq-answers.sq-answers-3 { grid-template-columns: repeat(3, 1fr); }
  .sq-answers--text-only   { grid-template-columns: 1fr; }
}

/* ── Answer card ──────────────────────────────────────────────────────────── */
.sq-answer {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  text-align:    center;
  cursor:        pointer;
  border:        2px solid var(--sq-border);
  border-radius: var(--sq-radius);
  background:    var(--sq-bg);
  padding:       0;
  overflow:      hidden;
  position:      relative;
  transition:    border-color var(--sq-transition),
                 box-shadow   var(--sq-transition),
                 transform    var(--sq-transition);
  font-family:   inherit;
  font-size:     inherit;
  color:         inherit;
}

.sq-answer:hover {
  border-color: var(--sq-hover-color);
  box-shadow:   0 4px 16px rgba(91, 76, 219, .14);
  transform:    translateY(-2px);
}

.sq-answer.is-selected {
  border-color: var(--sq-accent);
  background:   var(--sq-accent-light);
  color:        var(--sq-text);
}

/* Checkmark badge on selected */
.sq-answer.is-selected::after {
  content:         '';
  position:        absolute;
  top:             8px;
  right:           8px;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      var(--sq-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
  box-shadow:      0 2px 6px rgba(91, 76, 219, .4);
}

/* ── Answer image ─────────────────────────────────────────────────────────── */
.sq-answer img {
  width:        100%;
  aspect-ratio: var(--sq-answer-ar);
  object-fit:   cover;
  display:      block;
  flex-shrink:  0;
}

/* ── Answer label ─────────────────────────────────────────────────────────── */
.sq-label {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex:            1;           /* fill remaining space below the image */
  padding:         var(--sq-label-py) var(--sq-label-px);
  font-size:       var(--sq-answer-size);
  font-weight:     600;
  line-height:     1.3;
}

/* Pure text answers — no image, bigger label, centered */
.sq-answer--text {
  padding: 14px 16px;
}

.sq-answer--text .sq-label {
  padding:   0;
  font-size: .95rem;
}

/* Text-only grid: single column, left-aligned */
.sq-answers--text-only .sq-answer--text {
  text-align:  left;
  align-items: flex-start;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */
.sq-nav {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             12px;
}

.sq-back {
  background:  none;
  border:      none;
  color:       var(--sq-muted);
  font-size:   .875rem;
  font-weight: 500;
  cursor:      pointer;
  padding:     8px 4px;
  font-family: inherit;
  transition:  color var(--sq-transition);
}

.sq-back:hover { color: var(--sq-text); }

.sq-next {
  background:    var(--sq-accent);
  color:         #fff;
  border:        none;
  border-radius: 8px;
  padding:       11px 24px;
  font-size:     .9rem;
  font-weight:   600;
  cursor:        pointer;
  font-family:   inherit;
  letter-spacing: .01em;
  transition:    background var(--sq-transition),
                 opacity    var(--sq-transition),
                 transform  var(--sq-transition);
}

.sq-next:hover:not(:disabled) {
  background: var(--sq-hover-color);
  transform:  translateY(-1px);
}

.sq-next:disabled {
  opacity: .4;
  cursor:  not-allowed;
}

/* ── Result screen ────────────────────────────────────────────────────────── */
/* .sq-result lives inside .sq-body which already carries the horizontal/bottom
   padding — we only add a little extra top breathing room here. */
.sq-result {
  padding-top: 8px;
  text-align: center;
}

.sq-result-eyebrow {
  font-size:      .75rem;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--sq-muted);
  margin-bottom:  8px;
}

.sq-result-label {
  font-size:      2rem;
  font-weight:    800;
  letter-spacing: -.02em;
  line-height:    1.15;
  margin-bottom:  12px;
}

.sq-result-teaser {
  font-size:    1.05rem;
  color:        var(--sq-muted);
  max-width:    420px;
  margin:       0 auto 36px;
  line-height:  1.6;
}

/* ── Honeypot (spam trap — hidden from humans, visible to bots) ───────────── */
.sq-hp {
  position: absolute;
  left:     -9999px;
  width:    1px;
  height:   1px;
  overflow: hidden;
}

/* ── Email capture ────────────────────────────────────────────────────────── */
.sq-email-section {
  border-top:  1px solid var(--sq-border);
  padding-top: 28px;
  max-width:   480px;
  margin:      0 auto;
}

.sq-email-prompt {
  font-size:    .9rem;
  font-weight:  600;
  margin-bottom: 16px;
  color:        var(--sq-text);
}

.sq-email-form {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}

.sq-email-input {
  flex:          1 1 180px;
  border:        1.5px solid var(--sq-border);
  border-radius: 8px;
  padding:       11px 14px;
  font-size:     .9rem;
  font-family:   inherit;
  color:         var(--sq-text);
  background:    #fafafa;
  outline:       none;
  transition:    border-color var(--sq-transition);
  min-width:     0;
}

.sq-email-input:focus {
  border-color: var(--sq-accent);
  background:   #fff;
}

.sq-email-input::placeholder { color: var(--sq-muted); }

.sq-email-submit {
  background:    var(--sq-accent);
  color:         #fff;
  border:        none;
  border-radius: 8px;
  padding:       11px 20px;
  font-size:     .875rem;
  font-weight:   600;
  cursor:        pointer;
  font-family:   inherit;
  white-space:   nowrap;
  transition:    filter var(--sq-transition), opacity var(--sq-transition);
}

.sq-email-submit:hover:not(:disabled) { filter: brightness(1.12); }
.sq-email-submit:disabled             { opacity: .55; cursor: not-allowed; }

.sq-skip-btn {
  display:     block;
  margin-top:  12px;
  background:  none;
  border:      none;
  color:       var(--sq-muted);
  font-size:   .8rem;
  cursor:      pointer;
  font-family: inherit;
  transition:  color var(--sq-transition);
}

.sq-skip-btn:hover { color: var(--sq-text); }

/* ── Success state ────────────────────────────────────────────────────────── */
.sq-success {
  display:     flex;
  align-items: center;
  gap:         14px;
  text-align:  left;
  background:  #f0fdf4;
  border:      1.5px solid #86efac;
  border-radius: var(--sq-radius);
  padding:     16px 20px;
  color:       #166534;
  font-size:   .9rem;
  line-height: 1.5;
}

.sq-success svg {
  flex-shrink: 0;
  stroke:      #16a34a;
}

.sq-success strong { font-weight: 700; }

/* ── Mobile sticky email bar ─────────────────────────────────────────────── */
.sq-sticky-bar {
  display:     none; /* mobile only — overridden below */
}

@media (max-width: 640px) {
  .sq-sticky-bar {
    display:    block;
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    background: #fff;
    border-top: 3px solid var(--sq-accent, #5b4cdb);
    padding:    14px 16px calc(14px + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .13);
    z-index:    9999;
    transform:  translateY(100%);
    transition: transform .35s ease;
  }

  .sq-sticky-bar.sq-sticky-bar--visible {
    transform: translateY(0);
  }

  .sq-sticky-label {
    font-size:     .8rem;
    color:         var(--sq-muted, #6b7280);
    margin-bottom: 8px;
    line-height:   1.4;
  }

  .sq-sticky-label strong {
    color:       var(--sq-text, #111827);
    font-weight: 700;
  }

  .sq-sticky-form {
    display: flex;
    gap:     8px;
  }

  .sq-sticky-email {
    flex:          1;
    min-width:     0;
    border:        1.5px solid var(--sq-border, #e5e7eb);
    border-radius: 8px;
    padding:       10px 12px;
    font-size:     .9rem;
    font-family:   inherit;
    color:         var(--sq-text, #111827);
    background:    #fafafa;
    outline:       none;
    transition:    border-color .2s;
  }

  .sq-sticky-email:focus { border-color: var(--sq-accent, #5b4cdb); }
  .sq-sticky-email::placeholder { color: var(--sq-muted, #6b7280); }

  .sq-sticky-btn {
    background:    var(--sq-accent, #5b4cdb);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    padding:       10px 16px;
    font-size:     .875rem;
    font-weight:   700;
    cursor:        pointer;
    white-space:   nowrap;
    font-family:   inherit;
    transition:    background .2s, opacity .2s;
  }

  .sq-sticky-btn:disabled { opacity: .55; cursor: not-allowed; }
}

/* ── Centralize grid text ─────────────────────────────────────────────────── */
/* In a 2×2 grid: 3rd & 4th answers show label above the image               */
.sq-answers--centralize .sq-answer:nth-child(3),
.sq-answers--centralize .sq-answer:nth-child(4) {
  flex-direction: column-reverse;
}

/* ── Quick (top) email form in standalone gate ────────────────────────────── */
.sq-email-form--quick {
  margin-bottom: 20px;
}

/* ── Center email forms inside the standalone reveal ─────────────────────── */
/* The base .sq-email-form uses display:flex for the inline card layout;
   inside the standalone reveal we reset to block so the form-row's own
   justify-content:center actually centres the input+button pair.           */
.sq-sr .sq-email-form {
  display:     block;
  max-width:   480px;
  margin-left:  auto;
  margin-right: auto;
}

/* ── Image-Native CTA ─────────────────────────────────────────────────────── */
/* ── Image-Native CTA ─────────────────────────────────────────────────────── */
.sq-img-cta {
  margin:  0;
  padding: 0 2px;
}

/* Dividers: 1px light-grey rule above and below via pseudo-elements */
.sq-img-cta.has-dividers::before,
.sq-img-cta.has-dividers::after {
  content:    '';
  display:    block;
  height:     1px;
  background: #e5e7eb;
  margin:     20px 0;
}

.sq-img-cta-inner {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  gap:             10px;
  padding:         10px 0;
  transition:      opacity .2s ease;
  justify-content: flex-start; /* default: left */
}
.sq-img-cta-inner.is-align-center { justify-content: center; }
.sq-img-cta-inner.is-align-right  { justify-content: flex-end; }

.sq-img-cta-text {
  font-size:   .875rem;
  color:       var(--sq-muted, #6b7280);
  line-height: 1.4;
}
.sq-img-cta-text.is-italic-serif {
  font-style:  italic;
  font-family: Georgia, 'Times New Roman', serif;
}

/* Minimalist separator between text and button */
.sq-img-cta-sep {
  color:       #d1d5db;
  font-size:   .875rem;
  line-height: 1;
  user-select: none;
  flex-shrink: 0;
}

.sq-img-cta-btn {
  display:       inline-flex;
  align-items:   center;
  padding:       8px 18px;
  border:        none;
  border-radius: 100px;
  font-size:     .8rem;
  font-weight:   700;
  color:         #fff;
  cursor:        pointer;
  font-family:   inherit;
  white-space:   nowrap;
  flex-shrink:   0;
  transition:    box-shadow .2s, transform .15s;
  background:    var(--sq-accent);
  box-shadow:    0 2px 4px rgba(0,0,0,.08);
}
.sq-img-cta-btn:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transform:  translateY(-1px);
}

/* Entrance animation — opacity:0 only applied via JS data attribute */
@keyframes sq-cta-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.sq-img-cta[data-sq-animate]  { opacity: 0; }
.sq-img-cta.is-visible        { animation: sq-cta-in 400ms ease forwards; }

/* Quiz inside a CTA container: remove outer margin, hide intro header */
.sq-img-cta .slick-quiz {
  margin: 0;
}
.slick-quiz[data-cta-instance] .sq-intro {
  display: none;
}

/* ── Error notice ─────────────────────────────────────────────────────────── */
.slick-quiz-error {
  color:       #b91c1c;
  font-size:   .875rem;
  font-style:  italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Standalone reveal — replaces the entire quiz container after completion.
   Scoped to .sq-sr so it never touches the inline quiz styles above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Per-style CSS custom properties */
.sq-sr[data-style="minimalist"] {
  --sq-sr-bg:           #f5f3ee;
  --sq-sr-bg-soft:      #ebe8e1;
  --sq-sr-ink:          #2a2520;
  --sq-sr-ink-soft:     #5a5852;
  --sq-sr-accent:       #8a7e6a;
  --sq-sr-accent-deep:  #5a5852;
  --sq-sr-line:         rgba(42, 37, 32, 0.12);
  --sq-sr-bar:          #8a7e6a;
  --sq-sr-gate-bg:      #ffffff;
  --sq-sr-font-display: 'Fraunces', Georgia, serif;
  --sq-sr-font-body:    'Inter', system-ui, sans-serif;
  --sq-sr-font-decor:   'Fraunces', Georgia, serif;
}

.sq-sr[data-style="farmhouse"] {
  --sq-sr-bg:           #faf6ee;
  --sq-sr-bg-soft:      #f3ecdc;
  --sq-sr-ink:          #2d2419;
  --sq-sr-ink-soft:     #6b5c47;
  --sq-sr-accent:       #b8704c;
  --sq-sr-accent-deep:  #8a4a2a;
  --sq-sr-line:         rgba(45, 36, 25, 0.18);
  --sq-sr-bar:          #8a4a2a;
  --sq-sr-gate-bg:      #ffffff;
  --sq-sr-font-display: 'DM Serif Display', Georgia, serif;
  --sq-sr-font-body:    'Karla', system-ui, sans-serif;
  --sq-sr-font-decor:   'Cormorant Garamond', Georgia, serif;
}

.sq-sr[data-style="boho"] {
  --sq-sr-bg:           #f4ebe0;
  --sq-sr-bg-soft:      #ede0d0;
  --sq-sr-ink:          #3a2c22;
  --sq-sr-ink-soft:     #6b5848;
  --sq-sr-accent:       #c47a5b;
  --sq-sr-accent-deep:  #a05a3d;
  --sq-sr-line:         rgba(58, 44, 34, 0.18);
  --sq-sr-bar:          #c47a5b;
  --sq-sr-gate-bg:      #ffffff;
  --sq-sr-font-display: 'Playfair Display', Georgia, serif;
  --sq-sr-font-body:    'Nunito Sans', system-ui, sans-serif;
  --sq-sr-font-decor:   'Caveat', cursive;
}

.sq-sr[data-style="maximalist"] {
  --sq-sr-bg:           #1a0e1f;
  --sq-sr-bg-soft:      rgba(244, 235, 216, 0.06);
  --sq-sr-ink:          #f4ebd8;
  --sq-sr-ink-soft:     rgba(244, 235, 216, 0.7);
  --sq-sr-accent:       #d4a849;
  --sq-sr-accent-deep:  #d4a849;
  --sq-sr-line:         rgba(212, 168, 73, 0.25);
  --sq-sr-bar:          #d4a849;
  --sq-sr-gate-bg:      rgba(7, 88, 89, 0.35);
  --sq-sr-font-display: 'Bodoni Moda', Georgia, serif;
  --sq-sr-font-body:    'Manrope', system-ui, sans-serif;
  --sq-sr-font-decor:   'Italiana', Georgia, serif;
}

/* ── Base layout ─────────────────────────────────────────────────────────── */
.sq-sr {
  background:              var(--sq-sr-bg, #f5f3ee);
  color:                   var(--sq-sr-ink, #2a2520);
  font-family:             var(--sq-sr-font-body, system-ui, sans-serif);
  font-size:               17px;
  line-height:             1.7;
  -webkit-font-smoothing:  antialiased;
}

.sq-sr-bar {
  height:     8px;
  background: var(--sq-sr-bar, #8a7e6a);
}

.sq-sr-container {
  max-width: 680px;
  margin:    0 auto;
  padding:   0 28px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.sq-sr-hero {
  padding:    72px 0 48px;
  text-align: center;
}

.sq-sr-ornament {
  font-family:   var(--sq-sr-font-display);
  color:         var(--sq-sr-accent-deep, var(--sq-sr-accent));
  font-size:     28px;
  margin-bottom: 20px;
}

.sq-sr-eyebrow {
  display:        inline-block;
  font-size:      11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--sq-sr-accent-deep, var(--sq-sr-accent));
  background:     var(--sq-sr-bg-soft);
  padding:        8px 16px;
  border-radius:  100px;
  margin-bottom:  24px;
  font-weight:    500;
}

/* Boho: handwritten eyebrow, no pill badge */
.sq-sr[data-style="boho"] .sq-sr-eyebrow {
  font-family:    var(--sq-sr-font-decor);
  font-size:      22px;
  letter-spacing: 0;
  text-transform: none;
  background:     transparent;
  padding:        0;
  transform:      rotate(-2deg);
  font-weight:    400;
}

/* Maximalist: gold spaced caps, no pill */
.sq-sr[data-style="maximalist"] .sq-sr-eyebrow {
  font-family:    var(--sq-sr-font-decor);
  font-size:      12px;
  letter-spacing: 0.4em;
  background:     transparent;
  padding:        0;
  border-radius:  0;
  color:          var(--sq-sr-accent);
}

.sq-sr-verdict {
  font-family:   var(--sq-sr-font-display);
  font-style:    italic;
  font-size:     clamp(17px, 2vw, 21px);
  color:         var(--sq-sr-ink-soft);
  margin-bottom: 14px;
}

.sq-sr-name {
  font-family:    var(--sq-sr-font-display);
  font-weight:    400;
  font-size:      clamp(44px, 8vw, 80px);
  line-height:    1.05;
  margin-bottom:  24px;
  letter-spacing: -0.02em;
  color:          var(--sq-sr-ink);
}

.sq-sr[data-style="maximalist"] .sq-sr-name { font-weight: 900; }

.sq-sr-teaser {
  font-family:   var(--sq-sr-font-display);
  font-style:    italic;
  font-weight:   300;
  font-size:     clamp(19px, 2.4vw, 25px);
  line-height:   1.4;
  color:         var(--sq-sr-ink-soft);
  max-width:     520px;
  margin:        0 auto;
}

.sq-sr[data-style="boho"] .sq-sr-teaser {
  font-family: var(--sq-sr-font-decor);
  font-style:  normal;
  font-size:   clamp(22px, 2.8vw, 28px);
  color:       #8b4a35;
  transform:   rotate(-1deg);
  display:     inline-block;
}

.sq-sr[data-style="maximalist"] .sq-sr-teaser { color: #e8a4c0; }

/* ── Anchor button (scroll-to-email CTA under hero title) ────────────────── */
.sq-sr-anchor-btn {
  display:        block;        /* always own line, even next to inline-block teaser */
  width:          fit-content;
  margin:         28px auto 0;
  padding:        10px 24px;
  background:     transparent;
  border:         1.5px solid var(--sq-sr-accent);
  border-radius:  100px;
  color:          var(--sq-sr-accent);
  font-size:      14px;
  font-weight:    600;
  font-family:    var(--sq-sr-font-body);
  letter-spacing: 0.02em;
  cursor:         pointer;
  transition:     background 0.2s, color 0.2s;
}
.sq-sr-anchor-btn:hover {
  background: var(--sq-sr-accent);
  color:      #fff;
}
.sq-sr[data-style="maximalist"] .sq-sr-anchor-btn {
  border-radius: 0;
}

/* ── Hook section (first paragraph — The Validation) ────────────────────── */
.sq-sr-hook {
  padding: 0 0 48px;
}
.sq-sr-hook .sq-sr-text {
  font-size: 18px;
}

/* ── Detail (remaining paragraphs — The Deep Dive) ───────────────────────── */
.sq-sr-detail { padding: 48px 0; }

.sq-sr-text {
  font-size:  17px;
  line-height: 1.75;
  max-width:  580px;
  margin:     0 auto;
  color:      var(--sq-sr-ink);
}

.sq-sr-text p                { margin-bottom: 20px; }
.sq-sr-text p:last-child     { margin-bottom: 0; }

/* Drop cap for minimalist, farmhouse, maximalist */
.sq-sr[data-style="minimalist"] .sq-sr-text p:first-child::first-letter,
.sq-sr[data-style="farmhouse"]  .sq-sr-text p:first-child::first-letter {
  font-family:  var(--sq-sr-font-display);
  font-weight:  300;
  font-size:    56px;
  float:        left;
  line-height:  0.9;
  margin:       4px 10px 0 0;
  color:        var(--sq-sr-accent-deep, var(--sq-sr-accent));
}

.sq-sr[data-style="maximalist"] .sq-sr-text p:first-child::first-letter {
  font-family:              var(--sq-sr-font-display);
  font-weight:              900;
  font-size:                64px;
  float:                    left;
  line-height:              0.85;
  margin:                   6px 12px 0 0;
  background:               linear-gradient(135deg, #e8c068, #7f3b5f);
  -webkit-background-clip:  text;
  -webkit-text-fill-color:  transparent;
  background-clip:          text;
}

/* ── Gate (email capture) ────────────────────────────────────────────────── */
.sq-sr-gate { margin-bottom: 64px; }

/* Override the inline .sq-email-section styles inside the standalone gate */
.sq-sr .sq-email-section {
  background:    var(--sq-sr-gate-bg, #fff);
  border-radius: 8px;
  padding:       48px 40px;
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.08);
  border:        1px solid var(--sq-sr-line);
  border-top:    4px solid var(--sq-sr-accent);
  text-align:    center;
  max-width:     none;
  margin:        0;
}

.sq-sr[data-style="maximalist"] .sq-email-section {
  background: linear-gradient(135deg, rgba(7, 88, 89, 0.4) 0%, rgba(15, 8, 22, 0.6) 100%);
  border:     1px solid var(--sq-sr-accent);
  border-top: 1px solid var(--sq-sr-accent);
  box-shadow: none;
}

.sq-sr-gate-eyebrow {
  font-family:    var(--sq-sr-font-decor);
  font-size:      11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--sq-sr-accent-deep, var(--sq-sr-accent));
  margin-bottom:  14px;
  font-weight:    500;
}

.sq-sr[data-style="boho"] .sq-sr-gate-eyebrow {
  font-size:      22px;
  letter-spacing: 0;
  text-transform: none;
  transform:      rotate(-1deg);
  display:        inline-block;
  font-weight:    400;
}

.sq-sr[data-style="maximalist"] .sq-sr-gate-eyebrow {
  font-size:   12px;
  letter-spacing: 0.35em;
  color:       var(--sq-sr-accent);
}

.sq-sr-gate-heading {
  font-family:   var(--sq-sr-font-display);
  font-weight:   400;
  font-size:     clamp(24px, 3.5vw, 36px);
  line-height:   1.2;
  margin-bottom: 14px;
  font-style:    italic;
  color:         var(--sq-sr-ink);
}

.sq-sr[data-style="maximalist"] .sq-sr-gate-heading {
  font-style:  normal;
  font-weight: 700;
}

.sq-sr-gate-lead {
  color:        var(--sq-sr-ink-soft);
  margin:       0 auto 28px;
  max-width:    420px;
  font-size:    15px;
  line-height:  1.6;
}

/* ── Social proof line ───────────────────────────────────────────────────── */
.sq-sr-social-proof {
  font-size:   13px;
  color:       var(--sq-sr-ink-soft);
  margin:      0 auto 20px;
  line-height: 1.5;
}

/* ── Guide preview bullets ───────────────────────────────────────────────── */
.sq-sr-preview {
  text-align:    left;
  background:    var(--sq-sr-bg-soft);
  border-radius: 6px;
  padding:       20px 24px;
  margin:        0 auto 28px;
  max-width:     420px;
}

.sq-sr[data-style="maximalist"] .sq-sr-preview {
  border: 1px solid var(--sq-sr-line);
}

.sq-sr-preview-title {
  font-family:   var(--sq-sr-font-decor);
  font-size:     13px;
  color:         var(--sq-sr-accent-deep, var(--sq-sr-accent));
  margin-bottom: 10px;
  font-weight:   600;
}

.sq-sr-preview ul { list-style: none; margin: 0; padding: 0; }

.sq-sr-preview li {
  padding:     5px 0 5px 24px;
  position:    relative;
  font-size:   14px;
  line-height: 1.5;
  color:       var(--sq-sr-ink);
}

.sq-sr[data-style="maximalist"] .sq-sr-preview li { color: rgba(244, 235, 216, 0.85); }

.sq-sr-preview li::before {
  content:  '✓';
  position: absolute;
  left:     0;
  color:    var(--sq-sr-accent);
  font-weight: 700;
}

.sq-sr[data-style="boho"]       .sq-sr-preview li::before { content: '✺'; }
.sq-sr[data-style="farmhouse"]  .sq-sr-preview li::before { content: '✦'; font-weight: 400; }
.sq-sr[data-style="maximalist"] .sq-sr-preview li::before { content: '✦'; font-weight: 400; }

/* ── Standalone form ─────────────────────────────────────────────────────── */
.sq-sr-form-row {
  display:         flex;
  gap:             8px;
  margin-bottom:   14px;
  justify-content: center;
}

/* Override inline email input styles inside standalone */
.sq-sr .sq-email-input {
  flex:          1;
  max-width:     220px;
  border-radius: 100px;
  padding:       14px 20px;
  font-size:     15px;
  border:        1.5px solid var(--sq-sr-line);
  background:    #fff;
  color:         var(--sq-sr-ink);
}

.sq-sr[data-style="maximalist"] .sq-email-input {
  background: rgba(244, 235, 216, 0.08);
  color:      #f4ebd8;
  border-radius: 0;
}

.sq-sr .sq-email-input::placeholder { color: var(--sq-sr-ink-soft); }
.sq-sr .sq-email-input:focus        { outline: none; border-color: var(--sq-sr-accent); }

/* Override inline submit button styles inside standalone */
.sq-sr .sq-email-submit {
  border-radius: 100px;
  padding:       14px 24px;
  font-size:     14px;
  background:    var(--sq-sr-accent);
  border:        none;
  color:         #fff;
  font-family:   var(--sq-sr-font-body);
  font-weight:   600;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.2s, opacity 0.2s;
}

.sq-sr[data-style="maximalist"] .sq-email-submit {
  background:     var(--sq-sr-accent);
  color:          #0f0816;
  border-radius:  0;
  font-family:    var(--sq-sr-font-decor);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight:    400;
}

.sq-sr .sq-email-submit:hover:not(:disabled) { filter: brightness(1.12); }
.sq-sr .sq-email-submit:disabled             { opacity: 0.55; cursor: not-allowed; }

.sq-sr-consent {
  font-size:    12px;
  color:        var(--sq-sr-ink-soft);
  line-height:  1.5;
  max-width:    360px;
  margin:       0 auto 24px;
}

/* ── Standalone success ───────────────────────────────────────────────────── */
.sq-sr-success { padding: 32px 0; }

.sq-sr-success h3 {
  font-family:   var(--sq-sr-font-display);
  font-style:    italic;
  font-weight:   400;
  font-size:     clamp(22px, 3vw, 30px);
  margin-bottom: 12px;
  color:         var(--sq-sr-ink);
}

.sq-sr-success p { color: var(--sq-sr-ink-soft); }

/* ── Back-to-top safety net ──────────────────────────────────────────────── */
.sq-sr-back-top {
  text-align: center;
  padding:    0 0 20px;
  margin:     0;
}
.sq-sr-back-top-btn {
  background:           transparent;
  border:               none;
  color:                var(--sq-sr-ink-soft);
  font-size:            13px;
  font-family:          var(--sq-sr-font-body);
  cursor:               pointer;
  text-decoration:      underline;
  text-underline-offset: 3px;
  transition:           color 0.2s;
}
.sq-sr-back-top-btn:hover { color: var(--sq-sr-ink); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.sq-sr-footer {
  text-align: center;
  padding:    24px 0 56px;
  color:      var(--sq-sr-ink-soft);
  font-size:  13px;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sq-sr-hero                  { padding: 48px 0 32px; }
  .sq-sr-hook                  { padding: 0 0 32px; }
  .sq-sr-detail                { padding: 32px 0; }
  .sq-sr .sq-email-section     { padding: 32px 20px; }
  .sq-sr-form-row              { flex-direction: column; align-items: stretch; }
  .sq-sr .sq-email-input       { max-width: none; border-radius: 8px; }
  .sq-sr .sq-email-submit      { border-radius: 8px; }
  .sq-sr[data-style="maximalist"] .sq-email-input,
  .sq-sr[data-style="maximalist"] .sq-email-submit { border-radius: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Image Widget Button — floating pill button overlaid on post images.
   Injected inside wp-block-image figures; quiz teleports into a sibling div.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Figure positioning: shrinks to image width so the button stays inside the image,
   then anchors the absolute button and clips motion animations. */
figure.wp-block-image.has-sq-widget {
  position:  relative !important;  /* must not be overridden by ad-network injected styles */
  overflow:  hidden   !important;  /* clips absolute button + motion animations */
  width:     fit-content;          /* wraps figure to actual image width */
  max-width: 100%;                 /* prevents overflow on narrow viewports */
}

/* ── Pill button ─────────────────────────────────────────────────────────── */
.sq-img-widget {
  position:              absolute;
  bottom:                14px;
  right:                 14px;
  display:               inline-flex;
  align-items:           center;
  gap:                   8px;
  padding:               9px 14px 9px 11px;
  background:            rgba(255, 255, 255, 0.92);
  backdrop-filter:       blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius:         999px;
  box-shadow:            0 2px 10px rgba(0, 0, 0, 0.18);
  font-size:             0.85rem;
  font-weight:           600;
  color:                 #1f2937;
  cursor:                pointer;
  white-space:           nowrap;
  border:                none;
  font-family:           inherit;
  transform-origin:      center;
  z-index:               2;
  transition:            box-shadow .2s, transform .15s;
  touch-action:          manipulation;
}

.sq-img-widget:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transform:  translateY(-1px);
}

.sq-img-widget svg {
  flex-shrink: 0;
  width:       22px;
  height:      22px;
}

.sq-img-widget-text { line-height: 1; }

/* ── Motion 1: Spin + zoom from center, fly to corner ───────────────────── */
/* --sq-w1-tx / --sq-w1-ty are set by JS at observation time to exactly
   offset the button from its corner position to the figure's visual center.
   The fallback values approximate a mid-sized desktop image. */
.sq-img-widget.sq-motion-1 {
  --sq-w1-tx: -145px;
  --sq-w1-ty: -260px;
}

@keyframes sq-widget-motion1 {
  0%   { opacity: 0; transform: translate(var(--sq-w1-tx), var(--sq-w1-ty)) scale(0.3)  rotate(-540deg); }
  18%  { opacity: 1; transform: translate(var(--sq-w1-tx), var(--sq-w1-ty)) scale(2.6)  rotate(-200deg); }
  50%  { opacity: 1; transform: translate(var(--sq-w1-tx), var(--sq-w1-ty)) scale(2.6)  rotate(0deg);    }
  68%  { opacity: 1; transform: translate(var(--sq-w1-tx), var(--sq-w1-ty)) scale(2.6)  rotate(0deg);    }
  100% { opacity: 1; transform: translate(0, 0)                              scale(1)    rotate(0deg);    }
}

/* ── Motion 2: Slide up from bottom edge ────────────────────────────────── */
@keyframes sq-widget-motion2 {
  0%   { opacity: 0; transform: translateY(80px); }
  100% { opacity: 1; transform: translateY(0);    }
}

/* ── Motion 3: Pulse and settle ─────────────────────────────────────────── */
@keyframes sq-widget-motion3 {
  0%   { opacity: 0; transform: scale(0.5);  box-shadow: 0 2px 10px rgba(0,0,0,.18); }
  40%  { opacity: 1; transform: scale(1.18); box-shadow: 0 2px 10px rgba(0,0,0,.18), 0 0 0 14px rgba(255,255,255,.35); }
  70%  {             transform: scale(0.96); box-shadow: 0 2px 10px rgba(0,0,0,.18), 0 0 0 22px rgba(255,255,255,0);   }
  100% { opacity: 1; transform: scale(1);   box-shadow: 0 2px 10px rgba(0,0,0,.18); }
}

/* ── Shake: fires after Motion 2 and 3 settle ───────────────────────────── */
@keyframes sq-widget-shake {
  0%, 100% { transform: translateX(0);    }
  20%      { transform: translateX(-5px); }
  45%      { transform: translateX(5px);  }
  65%      { transform: translateX(-3px); }
  85%      { transform: translateX(2px);  }
}

/* Animated widgets start hidden; static ones are always visible (no data-sq-animate set) */
.sq-img-widget[data-sq-animate]            { opacity: 0; }
.sq-img-widget.is-visible.sq-motion-1 { animation: sq-widget-motion1 2.6s cubic-bezier(0.4, 0, 0.2, 1) 0s both; }
.sq-img-widget.is-visible.sq-motion-2 {
  animation:
    sq-widget-motion2 0.7s  cubic-bezier(0.34, 1.2, 0.4, 1) 0s    both,
    sq-widget-shake   0.45s ease-in-out                      0.7s  forwards;
}
.sq-img-widget.is-visible.sq-motion-3 {
  animation:
    sq-widget-motion3 1.2s  cubic-bezier(0.4, 0, 0.2, 1)    0s    both,
    sq-widget-shake   0.45s ease-in-out                      1.2s  forwards;
}

/* ── Target container ────────────────────────────────────────────────────── */
/* Hidden until the quiz teleports in; uses the same overflow as CTA blocks  */
.sq-img-widget-target         { display: none; }
.sq-img-widget-target.is-open { display: block; }

/* Quiz inside widget target: flush margins */
.sq-img-widget-target .slick-quiz { margin: 0; }