/* ==========================================================================
   Sqewise — marketing.css
   Public marketing site styles. Loaded on all marketing page templates.
   Design tokens live in design-system.css. Never redeclare :root here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Logo (used in both headers and footer)
   -------------------------------------------------------------------------- */
.sq-logo {
  display: flex;
  align-items: baseline;
  gap: 1px;
  text-decoration: none;
}

.sq-logo__sqe {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.5px;
  color: var(--sq-primary);
}

.sq-logo__wise {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--sq-primary);
}

.sq-logo--light .sq-logo__sqe,
.sq-logo--light .sq-logo__wise { color: var(--sq-white); }

/* --------------------------------------------------------------------------
   2. Marketing header
   -------------------------------------------------------------------------- */
.sq-header-marketing {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--sq-white);
  border-bottom: 1px solid var(--sq-border);
  height: 64px;
  display: flex;
  align-items: center;
}

.sq-header-marketing__inner {
  display: flex;
  align-items: center;
  gap: var(--sq-space-6);
  width: 100%;
}

.sq-header-marketing__nav {
  display: flex;
  align-items: center;
  gap: var(--sq-space-5);
  margin-left: auto;
}

/* When wp_nav_menu() is active it wraps each link in a <li>.
   display:contents makes the <li> invisible to layout so the
   flex gap still applies to the <a> elements directly. */
.sq-header-marketing__nav li {
  display: contents;
  list-style: none;
}

.sq-header-marketing__nav a {
  font-size: 15px;
  font-weight: 500;
  color: var(--sq-text-light);
  transition: color 0.15s, border-color 0.15s;
  padding: 4px 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.sq-header-marketing__nav a:hover {
  color: var(--sq-primary);
  border-bottom-color: rgba(45,10,94,0.3);
}
.sq-header-marketing__nav a.active,
.sq-header-marketing__nav .current-menu-item > a {
  color: var(--sq-primary);
  border-bottom-color: var(--sq-primary);
}

.sq-header-marketing__actions {
  display: flex;
  align-items: center;
  gap: var(--sq-space-2);
  margin-left: var(--sq-space-4);
}

/* --------------------------------------------------------------------------
   3. App header
   -------------------------------------------------------------------------- */
.sq-header-app {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--sq-primary);
  height: 60px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.sq-header-app__inner {
  display: flex;
  align-items: center;
  gap: var(--sq-space-5);
  width: 100%;
}

.sq-header-app__nav {
  display: flex;
  align-items: center;
  gap: var(--sq-space-1);
  margin-left: var(--sq-space-4);
}

.sq-header-app__nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  padding: 6px 10px;
  border-radius: var(--sq-radius);
  transition: all 0.15s;
  text-decoration: none;
}
.sq-header-app__nav a svg { flex-shrink: 0; opacity: 0.8; }
.sq-header-app__nav a:hover svg,
.sq-header-app__nav a.active svg { opacity: 1; }

.sq-header-app__nav a:hover { color: var(--sq-white); background: rgba(255,255,255,0.1); }
.sq-header-app__nav a.active { color: var(--sq-white); background: rgba(255,255,255,0.15); }

.sq-header-app__user {
  display: flex;
  align-items: center;
  gap: var(--sq-space-3);
  margin-left: auto;
}

.sq-header-app__name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: var(--sq-radius);
  transition: all 0.15s;
}
.sq-header-app__name:hover { color: var(--sq-white); background: rgba(255,255,255,0.1); }
.sq-header-app__name.active { color: var(--sq-white); background: rgba(255,255,255,0.15); }
.sq-header-app__name svg { opacity: 0.8; }
.sq-header-app__name:hover svg,
.sq-header-app__name.active svg { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Hamburger (mobile)
   -------------------------------------------------------------------------- */
.sq-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
  cursor: pointer;
  border: none;
  background: none;
}

.sq-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--sq-primary);
  border-radius: 2px;
  transition: all 0.2s;
}

.sq-hamburger--light span { background: var(--sq-white); }

@media (max-width: 768px) {
  .sq-hamburger { display: flex; }

  .sq-header-marketing__nav,
  .sq-header-marketing__actions {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--sq-white);
    flex-direction: column;
    padding: var(--sq-space-4);
    border-bottom: 1px solid var(--sq-border);
    box-shadow: var(--sq-shadow-md);
    z-index: 199;
    gap: var(--sq-space-3);
  }

  .sq-header-app__nav,
  .sq-header-app__user {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--sq-primary);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sq-space-4);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    z-index: 199;
    gap: var(--sq-space-3);
  }

  .sq-header-marketing__nav.open,
  .sq-header-marketing__actions.open,
  .sq-header-app__nav.open,
  .sq-header-app__user.open { display: flex; }

  .sq-header-marketing__actions { top: auto; position: static; border: none; box-shadow: none; padding: 0; padding-bottom: var(--sq-space-3); }
}

/* --------------------------------------------------------------------------
   5. Marketing Footer (footer-marketing.php — sq-mkt-footer__* classes)
   -------------------------------------------------------------------------- */
.sq-mkt-footer {
    background: var(--sq-primary);
    color: rgba(255,255,255,0.75);
    padding-top: 4rem;
}
.sq-mkt-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sq-mkt-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sq-mkt-footer__brand-tagline {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
    margin: 0;
    font-weight: 500;
}
.sq-mkt-footer__brand-sub {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    margin: 0;
    line-height: 1.6;
}
.sq-mkt-footer__heading {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin: 0 0 0.85rem;
}
.sq-mkt-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.sq-mkt-footer__links a {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.15s;
}
.sq-mkt-footer__links a:hover {
    color: #fff;
}

/* Bottom bar */
.sq-mkt-footer__bar {
    padding: 1.25rem 0;
}
.sq-mkt-footer__bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sq-mkt-footer__bar-inner p {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    margin: 0;
}
.sq-mkt-footer__legal-nav {
    display: flex;
    gap: 1.25rem;
}
.sq-mkt-footer__legal-nav a {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    transition: color 0.15s;
}
.sq-mkt-footer__legal-nav a:hover {
    color: rgba(255,255,255,0.7);
}

@media (max-width: 900px) {
    .sq-mkt-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 540px) {
    .sq-mkt-footer__grid { grid-template-columns: 1fr; }
    .sq-mkt-footer__bar-inner { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   5b. Legacy footer (footer.php — used in app pages only)
   -------------------------------------------------------------------------- */
.sq-footer {
  background: var(--sq-primary);
  color: rgba(255,255,255,0.75);
  padding-top: var(--sq-space-8);
}

.sq-footer__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sq-space-7);
  padding-bottom: var(--sq-space-7);
}

.sq-footer__tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin-top: var(--sq-space-3);
  font-style: italic;
  font-family: 'Fraunces', serif;
}

.sq-footer__heading {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: var(--sq-space-4);
}

.sq-footer__col ul { display: flex; flex-direction: column; gap: var(--sq-space-3); }

.sq-footer__col a {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  transition: color 0.15s;
  text-decoration: none;
}

.sq-footer__col a:hover { color: var(--sq-white); }

.sq-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--sq-space-4) 0;
}

.sq-footer__bottom p { font-size: 13px; color: rgba(255,255,255,0.4); }

@media (max-width: 768px) {
  .sq-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--sq-space-6); }
}

@media (max-width: 500px) {
  .sq-footer__inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   6. Base marketing page
   -------------------------------------------------------------------------- */
body.sq-marketing-page {
  background-color: var(--sq-surface);
}

/* Suppress GeneratePress site header on marketing pages */
body.sq-marketing-page .site-header,
body.sq-marketing-page #masthead,
body.sq-marketing-page .main-navigation,
body.sq-marketing-page .site-footer,
body.sq-marketing-page #colophon { display: none !important; }

/* Remove any GeneratePress or WordPress bottom padding/margin that
   causes blank space after the footer on marketing pages */
body.sq-marketing-page .entry-content,
body.sq-marketing-page .entry-header,
body.sq-marketing-page .page-content,
body.sq-marketing-page .post-content,
body.sq-marketing-page .site-main,
body.sq-marketing-page #primary,
body.sq-marketing-page .content-area {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body.sq-marketing-page { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   7. Buttons (marketing-specific overrides)
   -------------------------------------------------------------------------- */
.sq-btn--cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  border-radius: var(--sq-radius);
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  background: var(--sq-accent);
  color: var(--sq-white);
  border: 2px solid var(--sq-accent);
}

.sq-btn--cta:hover {
  background: var(--sq-accent-hover);
  border-color: var(--sq-accent-hover);
  color: var(--sq-white);
}

.sq-btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--sq-radius);
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
  background: var(--sq-white);
  color: var(--sq-primary);
  border: 2px solid var(--sq-primary);
}

.sq-btn--secondary:hover {
  background: var(--sq-primary-light);
  color: var(--sq-primary);
}

/* --------------------------------------------------------------------------
   8. Hero section
   -------------------------------------------------------------------------- */
.sq-hero {
  background: linear-gradient(135deg, var(--sq-primary) 0%, var(--sq-primary-hover) 100%);
  color: var(--sq-white);
  padding: 96px 0 80px;
  overflow: hidden;
}

.sq-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.sq-hero h1 {
  color: var(--sq-white);
  margin-bottom: 1.25rem;
}

.sq-hero__sub {
  color: rgba(255,255,255,0.82);
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.sq-hero__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.sq-hero__note {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.55);
}

/* Sample question mockup card */
.sq-hero__mockup {
  background: var(--sq-white);
  border-radius: var(--sq-radius-lg);
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  position: relative;
}

.sq-mockup-badge {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.sq-mockup-badge span {
  padding: 0.2rem 0.625rem;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
}

.sq-mockup-topic {
  background: var(--sq-primary-light);
  color: var(--sq-primary);
}

.sq-mockup-flk {
  background: var(--sq-surface);
  color: var(--sq-purple-mid);
}

.sq-mockup-q {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sq-text);
  margin-bottom: 1rem;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
}

.sq-mockup-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sq-mockup-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--sq-border);
  border-radius: var(--sq-radius);
  font-size: 0.875rem;
  color: var(--sq-text);
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
}

.sq-mockup-opt--correct {
  background: var(--sq-success-light);
  border-color: var(--sq-success);
}

.sq-mockup-opt__letter {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sq-primary-light);
  color: var(--sq-primary);
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sq-mockup-opt--correct .sq-mockup-opt__letter {
  background: var(--sq-success);
  color: var(--sq-white);
}

@media (max-width: 768px) {
  .sq-hero { padding: 60px 0 48px; }
  .sq-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .sq-hero__mockup { max-width: 480px; margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   9. Social proof bar
   -------------------------------------------------------------------------- */
.sq-proof-bar {
  background: var(--sq-white);
  border-bottom: 1px solid var(--sq-border);
  padding: 1.5rem 0;
}

.sq-proof-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.sq-proof-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; justify-content: center; }
.sq-proof-stats--centered { justify-content: center; }

.sq-proof-stat { text-align: center; }

.sq-proof-stat__num {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sq-primary);
  line-height: 1;
  display: block;
}

.sq-proof-stat__label {
  font-size: 0.8125rem;
  color: var(--sq-text-light);
  margin-top: 0.25rem;
  display: block;
}

/* --------------------------------------------------------------------------
   10. Section header (eyebrow + title + subtitle)
   -------------------------------------------------------------------------- */
.sq-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.sq-section-header__eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sq-purple-mid);
  font-family: 'Inter', sans-serif;
  margin-bottom: 0.75rem;
  display: block;
}

.sq-section-header h2 { margin-bottom: 0.875rem; }
.sq-section-header p { font-size: 1.0625rem; max-width: 560px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   11. Steps / How it works
   -------------------------------------------------------------------------- */
.sq-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.sq-step {
  background: var(--sq-white);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  padding: 2rem 1.75rem;
  position: relative;
  box-shadow: var(--sq-shadow);
}

.sq-step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sq-primary);
  color: var(--sq-white);
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.sq-step h3 { margin-bottom: 0.625rem; }

.sq-step__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  opacity: 0.85;
}

@media (max-width: 640px) { .sq-steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   12. Features grid
   -------------------------------------------------------------------------- */
.sq-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sq-feature-card {
  background: var(--sq-white);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--sq-shadow);
  transition: box-shadow 0.15s, transform 0.15s;
}

.sq-feature-card:hover { box-shadow: var(--sq-shadow-md); transform: translateY(-2px); }
.sq-feature-card__icon { font-size: 1.75rem; margin-bottom: 1rem; line-height: 1; display: block; }
.sq-feature-card__icon svg { display: block; }
.sq-feature-card h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.sq-feature-card p { font-size: 0.9375rem; line-height: 1.6; }

@media (max-width: 768px) { .sq-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sq-features { grid-template-columns: 1fr; } }

.sq-features-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   13. Pricing preview cards (home page)
   -------------------------------------------------------------------------- */
.sq-pricing-preview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 660px;
  margin: 0 auto;
}

.sq-preview-card {
  background: var(--sq-white);
  border: 2px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sq-preview-card--featured {
  border-color: var(--sq-accent);
  border-top: 4px solid var(--sq-accent);
  box-shadow: var(--sq-shadow-md);
  transform: translateY(-4px);
}

.sq-preview-card__name {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sq-primary);
}

.sq-preview-card__price {
  font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--sq-primary);
  line-height: 1;
}

.sq-preview-card__price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--sq-text-light);
  font-family: 'Inter', sans-serif;
}

.sq-preview-card__features {
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.sq-preview-card__features li {
  font-size: 0.875rem;
  color: var(--sq-text-light);
  padding-left: 1.25rem;
  position: relative;
}

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

@media (max-width: 640px) {
  .sq-pricing-preview { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   14. Final CTA band
   -------------------------------------------------------------------------- */
.sq-cta-band {
  background: var(--sq-primary);
  padding: 80px 0;
  text-align: center;
}

.sq-cta-band h2 { color: var(--sq-white); margin-bottom: 1rem; }
.sq-cta-band p { color: rgba(255,255,255,0.75); font-size: 1.0625rem; margin-bottom: 2rem; }

/* --------------------------------------------------------------------------
   15. Page hero (inner pages)
   -------------------------------------------------------------------------- */
.sq-page-hero {
  background: var(--sq-primary);
  padding: 64px 0 56px;
  text-align: center;
}

.sq-page-hero h1 { color: var(--sq-white); margin-bottom: 0.875rem; }
.sq-page-hero p { color: rgba(255,255,255,0.78); font-size: 1.0625rem; max-width: 600px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   16. Two-column content layout
   -------------------------------------------------------------------------- */
.sq-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

@media (max-width: 768px) { .sq-two-col { grid-template-columns: 1fr; gap: 2rem; } }

/* --------------------------------------------------------------------------
   17. Topic grid (SQE1 topics page)
   -------------------------------------------------------------------------- */
.sq-topic-group-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sq-text-light);
  margin-bottom: 1.5rem;
  margin-top: 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--sq-border);
}

.sq-topic-group-title span {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  margin-left: 0.5rem;
}

.sq-topic-group-title .sq-flk1 { background: var(--sq-primary-light); color: var(--sq-primary); }
.sq-topic-group-title .sq-flk2 { background: var(--sq-surface); color: var(--sq-purple-mid); }

.sq-topic-card {
  background: var(--sq-white);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--sq-shadow);
  transition: box-shadow 0.15s, transform 0.15s;
  border-left: 4px solid var(--sq-primary);
}

.sq-topic-card--flk2 { border-left-color: var(--sq-purple-mid); }
.sq-topic-card:hover { box-shadow: var(--sq-shadow-md); transform: translateY(-2px); }

.sq-topic-card__name {
  font-family: 'Fraunces', serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--sq-primary);
  margin-bottom: 0.5rem;
}

.sq-topic-card__desc { font-size: 0.9rem; color: var(--sq-text-light); line-height: 1.6; margin-bottom: 0.875rem; flex: 1; }
.sq-topic-card__meta { font-size: 0.8125rem; color: var(--sq-purple-mid); font-weight: 600; font-family: 'Inter', sans-serif; }

/* --------------------------------------------------------------------------
   18. Blog grid
   -------------------------------------------------------------------------- */
.sq-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sq-post-card {
  background: var(--sq-white);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  overflow: hidden;
  box-shadow: var(--sq-shadow);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s, transform 0.15s;
}

.sq-post-card:hover { box-shadow: var(--sq-shadow-md); transform: translateY(-2px); }
.sq-post-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }

.sq-post-card__cat {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sq-purple-mid);
  margin-bottom: 0.5rem;
  font-family: 'Inter', sans-serif;
}

.sq-post-card__title {
  font-family: 'Fraunces', serif;
  font-size: 1.0625rem;
  color: var(--sq-primary);
  margin-bottom: 0.625rem;
  line-height: 1.35;
}

.sq-post-card__title a { color: inherit; text-decoration: none; }
.sq-post-card__title a:hover { color: var(--sq-accent); }
.sq-post-card__excerpt { font-size: 0.875rem; color: var(--sq-text-light); flex: 1; line-height: 1.6; }

.sq-post-card__footer {
  padding: 0.875rem 1.5rem;
  border-top: 1px solid var(--sq-border);
  font-size: 0.8125rem;
  color: var(--sq-text-light);
  font-family: 'Inter', sans-serif;
}

@media (max-width: 768px) { .sq-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .sq-blog-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   19. Contact form
   -------------------------------------------------------------------------- */
.sq-contact-wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: start;
}

.sq-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.sq-form-group label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sq-text);
  font-family: 'Inter', sans-serif;
}

.sq-form-input,
.sq-form-select,
.sq-form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--sq-border);
  border-radius: var(--sq-radius);
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: var(--sq-text);
  background: var(--sq-white);
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
}

.sq-form-input:focus,
.sq-form-select:focus,
.sq-form-textarea:focus {
  outline: none;
  border-color: var(--sq-purple-mid);
  box-shadow: 0 0 0 3px var(--sq-purple-mid-10);
}

.sq-form-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.sq-form-note { font-size: 0.875rem; color: var(--sq-text-light); }

.sq-form-success {
  background: var(--sq-success-light);
  border: 1px solid var(--sq-success);
  border-radius: var(--sq-radius);
  padding: 1rem 1.25rem;
  color: var(--sq-success);
  font-weight: 600;
  margin-bottom: 1.25rem;
  font-family: 'Inter', sans-serif;
}

.sq-form-error {
  background: var(--sq-danger-light);
  border: 1px solid var(--sq-danger);
  border-radius: var(--sq-radius);
  padding: 1rem 1.25rem;
  color: var(--sq-danger);
  font-weight: 600;
  margin-bottom: 1.25rem;
  font-family: 'Inter', sans-serif;
}

.sq-contact-aside__heading { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.sq-contact-aside__email { font-size: 1rem; font-weight: 600; color: var(--sq-purple-mid); font-family: 'Inter', sans-serif; }

@media (max-width: 768px) { .sq-contact-wrap { grid-template-columns: 1fr; gap: 2rem; } }

/* --------------------------------------------------------------------------
   20. Legal / prose content pages
   -------------------------------------------------------------------------- */
.sq-prose { max-width: 760px; margin: 0 auto; }
.sq-prose h2 { margin-top: 2.5rem; margin-bottom: 0.875rem; font-size: 1.375rem; }
.sq-prose h3 { margin-top: 1.75rem; margin-bottom: 0.625rem; font-size: 1.125rem; }
.sq-prose p { margin-bottom: 1rem; }

.sq-prose ul, .sq-prose ol {
  margin: 0.75rem 0 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sq-prose li { font-size: 0.9375rem; color: var(--sq-text-light); line-height: 1.65; }
.sq-prose a { color: var(--sq-purple-mid); text-decoration: underline; }

.sq-prose-updated {
  font-size: 0.875rem;
  color: var(--sq-text-light);
  font-family: 'Inter', sans-serif;
  margin-bottom: 2rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   21. About page
   -------------------------------------------------------------------------- */

/* Pull quote */
.sq-about-quote {
    margin: 0;
    padding: 2rem 2rem 2rem 2.5rem;
    background: var(--sq-primary-light);
    border: 1px solid rgba(45,10,94,0.12);
    border-left: 4px solid var(--sq-primary);
    border-radius: var(--sq-radius-lg);
    box-shadow: var(--sq-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.sq-about-quote::before {
    content: '\201C';
    position: absolute;
    top: -0.5rem;
    left: 1.25rem;
    font-family: 'Fraunces', serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--sq-primary);
    opacity: 0.18;
    pointer-events: none;
    user-select: none;
}
.sq-about-quote p {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-style: italic;
    line-height: 1.7;
    color: var(--sq-text);
    margin: 0 0 1.25rem;
}
.sq-about-quote footer {
    font-size: 0.775rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sq-primary);
    opacity: 0.75;
}

.sq-pipeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  counter-reset: pipeline;
}

.sq-pipeline-step {
  background: var(--sq-white);
  border: 1px solid var(--sq-border);
  border-radius: var(--sq-radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--sq-shadow);
  position: relative;
  counter-increment: pipeline;
}

.sq-pipeline-step::before {
  content: counter(pipeline);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sq-primary);
  color: var(--sq-white);
  font-family: 'Fraunces', serif;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

@media (max-width: 640px) { .sq-pipeline { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   22. How It Works page — expanded step layout
   -------------------------------------------------------------------------- */
.sq-hiw-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--sq-border);
}

.sq-hiw-step:last-child { border-bottom: none; }

.sq-hiw-step__num {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sq-primary);
  color: var(--sq-white);
  font-family: 'Fraunces', serif;
  font-size: 1.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sq-hiw-step h3 { margin-bottom: 0.625rem; font-size: 1.25rem; }
.sq-hiw-step p { font-size: 1rem; }

@media (max-width: 640px) { .sq-hiw-step { grid-template-columns: 1fr; gap: 1rem; } }

/* --------------------------------------------------------------------------
   23. Comparison table
   -------------------------------------------------------------------------- */
.sq-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  margin-top: 1.5rem;
}

.sq-compare-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sq-text-light);
  border-bottom: 2px solid var(--sq-border);
}

.sq-compare-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--sq-border);
  color: var(--sq-text);
  vertical-align: middle;
}

.sq-compare-table td:nth-child(2),
.sq-compare-table td:nth-child(3) { text-align: center; }

.sq-compare-table .yes { color: var(--sq-accent); font-weight: 700; }
.sq-compare-table .no  { color: var(--sq-text-light); }

/* --------------------------------------------------------------------------
   24. Pricing page header
   -------------------------------------------------------------------------- */
.sq-pricing-main--mkt {
  background: var(--sq-surface);
  padding-bottom: 0;
}

.sq-pricing-wrap--mkt {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 24px 0;
}

.sq-pricing-header--mkt { text-align: center; margin-bottom: 3rem; }
.sq-pricing-header--mkt h1 { margin-bottom: 0.625rem; }
.sq-pricing-header--mkt p { font-size: 1.0625rem; color: var(--sq-text-light); }

/* --------------------------------------------------------------------------
   25. Pricing cards (sq-pc = pricing card)
   -------------------------------------------------------------------------- */
.sq-pricing-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .sq-pricing-3col { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

.sq-pricing-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: start;
  max-width: 760px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .sq-pricing-2col { grid-template-columns: 1fr; max-width: 480px; }
}

.sq-pc {
  background: var(--sq-white);
  border: 2px solid var(--sq-border);
  border-radius: var(--sq-radius-xl);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  box-shadow: var(--sq-shadow);
  transition: box-shadow 0.15s;
}

.sq-pc:hover { box-shadow: var(--sq-shadow-md); }

.sq-pc--featured {
  border-color: var(--sq-accent);
  border-top: 4px solid var(--sq-accent);
  box-shadow: var(--sq-shadow-md);
  transform: translateY(-6px);
}

.sq-pc--max {
  border-color: var(--sq-primary);
  border-top: 4px solid var(--sq-primary);
}

.sq-pc--current { outline: 3px solid var(--sq-accent); outline-offset: 2px; }

.sq-pc__popular {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sq-accent);
  color: var(--sq-white);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

.sq-pc__current-badge {
  display: inline-block;
  background: var(--sq-accent);
  color: var(--sq-white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  letter-spacing: 0.03em;
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
}

.sq-pc__tier {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--sq-primary);
}

.sq-pc__price-wrap { display: flex; align-items: baseline; gap: 4px; }

.sq-pc__amount {
  font-family: 'Fraunces', serif;
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--sq-primary);
  line-height: 1;
}

.sq-pc__period { font-size: 0.9rem; color: var(--sq-text-light); font-family: 'Inter', sans-serif; }
.sq-pc__annual-note { font-size: 0.85rem; color: var(--sq-text-light); margin: -0.5rem 0 0; font-family: 'Inter', sans-serif; }
.sq-pc__annual-note a { color: var(--sq-purple-mid); text-decoration: underline; }
.sq-pc__desc { font-size: 0.9rem; color: var(--sq-text-light); margin: 0; font-family: 'Inter', sans-serif; }

.sq-pc__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
}

.sq-pc__feat {
  font-size: 0.9rem;
  padding-left: 1.5rem;
  position: relative;
  font-family: 'Inter', sans-serif;
  color: var(--sq-text);
}

.sq-pc__feat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: center;
}
.sq-pc__feat--yes { color: var(--sq-text); }
.sq-pc__feat--yes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.sq-pc__feat--no { color: var(--sq-text-light); opacity: 0.55; }
.sq-pc__feat--no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.sq-pc__feat--soon { color: var(--sq-text-light); font-style: italic; opacity: 0.65; }
.sq-pc__feat--soon::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}

/* Pricing billing toggle */
.sq-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
  background: var(--sq-white);
  border: 1px solid var(--sq-border);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.sq-pricing-toggle__btn {
  padding: 8px 22px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--sq-text-light);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sq-pricing-toggle__btn--active {
  background: var(--sq-primary);
  color: var(--sq-white);
}
.sq-pricing-toggle__save {
  background: var(--sq-success-light);
  color: var(--sq-success);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.sq-pricing-toggle__btn--active .sq-pricing-toggle__save {
  background: rgba(255,255,255,0.2);
  color: var(--sq-white);
}

.sq-pc__cta-wrap { margin-top: 0.5rem; }

.sq-pc__plan-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--sq-accent);
  font-weight: 600;
  padding: 0.75rem 0;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

.sq-btn--upgrade {
  background: var(--sq-accent);
  color: var(--sq-white);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--sq-radius);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  display: inline-block;
  font-family: 'Inter', sans-serif;
}

.sq-btn--upgrade:hover { background: var(--sq-accent-hover); color: var(--sq-white); }

/* --------------------------------------------------------------------------
   26. Responsive helpers
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .sq-btn--lg { width: 100%; justify-content: center; }
}

/* =============================================================================
   Single Post Styles
   Applies to individual blog post pages rendered by single.php
   ============================================================================= */

/* Outer wrapper */
.sq-post-wrap {
  background: var(--sq-white);
  min-height: calc(100vh - 60px);
}

.sq-post-single {
  max-width: 780px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* Breadcrumb
   -------------------------------------------------------------------------- */
.sq-post-breadcrumb {
  font-size: 0.875rem;
  color: var(--sq-text-light);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}
.sq-post-breadcrumb a {
  color: var(--sq-text-light);
  text-decoration: none;
  transition: color 0.15s;
}
.sq-post-breadcrumb a:hover { color: var(--sq-accent); }
.sq-post-breadcrumb__sep { margin: 0 0.15rem; opacity: 0.5; }

/* Category badge pills
   -------------------------------------------------------------------------- */
.sq-post-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.sq-post-cat {
  background: var(--sq-primary-light);
  color: var(--sq-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.sq-post-cat:hover { background: var(--sq-purple-mid); color: var(--sq-white); }

/* Post title
   -------------------------------------------------------------------------- */
.sq-post-title {
  font-family: 'Fraunces', serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--sq-primary);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

/* Meta line (date)
   -------------------------------------------------------------------------- */
.sq-post-meta {
  font-size: 0.875rem;
  color: var(--sq-text-light);
  margin-bottom: 2rem;
  font-family: 'Inter', sans-serif;
}

/* Featured image
   -------------------------------------------------------------------------- */
.sq-post-image {
  margin: 0 0 2.5rem;
  border-radius: var(--sq-radius-lg);
  overflow: hidden;
  box-shadow: var(--sq-shadow-md);
}
.sq-post-image img { width: 100%; height: auto; display: block; }

/* Post content typography
   -------------------------------------------------------------------------- */
.sq-post-content { color: var(--sq-text); }

.sq-post-content p {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--sq-text);
  margin-bottom: 1.25rem;
}
.sq-post-content h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sq-primary);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.sq-post-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--sq-text);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}
.sq-post-content blockquote {
  border-left: 4px solid var(--sq-accent);
  padding-left: 1.25rem;
  font-style: italic;
  color: var(--sq-text-light);
  margin: 1.75rem 0;
}
.sq-post-content blockquote p { color: var(--sq-text-light); margin-bottom: 0; }
.sq-post-content ul,
.sq-post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.8;
}
.sq-post-content li { margin-bottom: 0.4rem; }
.sq-post-content a { color: var(--sq-accent); text-decoration: underline; }
.sq-post-content a:hover { color: var(--sq-accent-hover); }
.sq-post-content strong { font-weight: 600; color: var(--sq-text); }
.sq-post-content em { font-style: italic; }

/* Tag list
   -------------------------------------------------------------------------- */
.sq-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sq-border);
}
.sq-post-tag {
  font-size: 0.8rem;
  color: var(--sq-text-light);
  background: var(--sq-surface-2);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  transition: background 0.15s, color 0.15s;
}
.sq-post-tag:hover { background: var(--sq-border); color: var(--sq-text); }

/* Back to Blog link
   -------------------------------------------------------------------------- */
.sq-post-back {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.9rem;
  color: var(--sq-accent);
  text-decoration: none;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}
.sq-post-back:hover { text-decoration: underline; }

/* Prev / Next navigation
   -------------------------------------------------------------------------- */
.sq-post-nav {
  display: flex;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sq-border);
  flex-wrap: wrap;
}
.sq-post-nav__prev,
.sq-post-nav__next {
  font-size: 0.9rem;
  color: var(--sq-accent);
  text-decoration: none;
  flex: 1;
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
}
.sq-post-nav__prev:hover,
.sq-post-nav__next:hover { text-decoration: underline; }
.sq-post-nav__next { text-align: right; }

/* Responsive — single post
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .sq-post-single { padding: 1.5rem 1rem 3rem; }
  .sq-post-title { font-size: 1.75rem; }
  .sq-post-content h2 { font-size: 1.25rem; }
  .sq-post-nav { flex-direction: column; gap: 0.75rem; }
  .sq-post-nav__next { text-align: left; }
}

/* --------------------------------------------------------------------------
   30. Blog pagination (numbered pills)
   -------------------------------------------------------------------------- */
.sq-blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3rem;
}
.sq-blog-pagination a,
.sq-blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sq-blog-pagination a {
  background: var(--sq-white);
  border: 1px solid var(--sq-border);
  color: var(--sq-text);
}
.sq-blog-pagination a:hover {
  background: var(--sq-primary);
  border-color: var(--sq-primary);
  color: var(--sq-white);
}
.sq-blog-pagination .current {
  background: var(--sq-primary);
  border: 1px solid var(--sq-primary);
  color: var(--sq-white);
  cursor: default;
}
.sq-blog-pagination .dots {
  background: transparent;
  border: none;
  color: var(--sq-text-light);
}

/* --------------------------------------------------------------------------
   31. Blog post — Table of Contents
   -------------------------------------------------------------------------- */
.sq-post-toc {
  background: var(--sq-surface);
  border: 1px solid var(--sq-border);
  border-left: 3px solid var(--sq-primary);
  border-radius: var(--sq-radius);
  padding: 1.25rem 1.5rem;
  margin: 0 0 2.5rem;
}
.sq-post-toc__title {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sq-text-light);
  margin: 0 0 0.75rem;
}
.sq-post-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.sq-post-toc__list li a {
  font-size: 0.9rem;
  color: var(--sq-primary);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  transition: color 0.15s;
}
.sq-post-toc__list li a:hover {
  color: var(--sq-accent);
  text-decoration: underline;
}

/* ==========================================================================
   SQE PAGE — template-sqe.php
   Styles for: hero, intro/stats, timeline, comparison, how-sqewise, CTA
   ========================================================================== */

/* --------------------------------------------------------------------------
   SQE1. Hero
   -------------------------------------------------------------------------- */
.sq-sqe-hero {
    background: linear-gradient( 135deg, var(--sq-primary) 0%, var(--sq-purple-mid) 100% );
    color: var(--sq-white);
    padding: 5rem 0 4rem;
    text-align: center;
}
.sq-sqe-hero h1 {
    color: var(--sq-white);
    font-size: clamp( 2rem, 5vw, 3rem );
    margin-bottom: 1rem;
}
.sq-sqe-hero .sq-page-hero__sub {
    font-size: 1.125rem;
    color: rgba( 255,255,255,0.88 );
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   SQE2. Intro + Stats
   -------------------------------------------------------------------------- */
.sq-sqe-intro__grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: start;
}
.sq-sqe-intro__text h2 {
    margin-top: 0;
}
.sq-sqe-intro__text p {
    color: var(--sq-text-light);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.sq-sqe-intro__text p:last-child {
    margin-bottom: 0;
}
.sq-sqe-stat-card {
    background: var(--sq-white);
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius-lg);
    box-shadow: var(--sq-shadow);
    overflow: hidden;
}
.sq-sqe-stat-card__inner {
    display: flex;
    flex-direction: column;
}
.sq-sqe-stat {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--sq-border);
}
.sq-sqe-stat:last-child {
    border-bottom: none;
}
.sq-sqe-stat__num {
    font-family: 'Fraunces', serif;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--sq-primary);
    line-height: 1;
    margin-bottom: 0.375rem;
}
.sq-sqe-stat__label {
    font-size: 0.875rem;
    color: var(--sq-text-light);
    line-height: 1.4;
}

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

/* --------------------------------------------------------------------------
   SQE3. Timeline
   -------------------------------------------------------------------------- */
.sq-sqe-journey {
    overflow: hidden;
}
.sq-section-title {
    font-size: clamp( 1.5rem, 3vw, 2rem );
    margin: 0 0 0.5rem;
    color: var(--sq-text);
}
.sq-section-sub {
    color: var(--sq-text-light);
    font-size: 1.0625rem;
    margin: 0 0 2.5rem;
    line-height: 1.6;
}

.sq-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

/* Vertical connecting line */
.sq-timeline::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sq-border);
    z-index: 0;
}

.sq-timeline__step {
    position: relative;
    padding-left: 72px;
    padding-bottom: 2rem;
}
.sq-timeline__step--final {
    padding-bottom: 0;
}

/* The dot on the line */
.sq-timeline__connector {
    position: absolute;
    left: 20px;
    top: 24px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sq-border);
    border: 3px solid var(--sq-white);
    box-shadow: 0 0 0 2px var(--sq-border);
    z-index: 1;
}
.sq-timeline__step--featured .sq-timeline__connector {
    background: var(--sq-accent);
    box-shadow: 0 0 0 2px var(--sq-accent);
}

/* Sqewise badge above featured step */
.sq-timeline__badge-above {
    margin-bottom: 0.5rem;
}
.sq-timeline__sqewise-badge {
    display: inline-block;
    background: var(--sq-accent);
    color: var(--sq-white);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

/* Cards */
.sq-timeline__card {
    background: var(--sq-white);
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius-lg);
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    box-shadow: var(--sq-shadow-sm);
}
.sq-timeline__card--featured {
    background: var(--sq-primary);
    border-color: var(--sq-primary);
    box-shadow: var(--sq-shadow-md);
}
.sq-timeline__card--featured .sq-timeline__step-label,
.sq-timeline__card--featured .sq-timeline__heading,
.sq-timeline__card--featured .sq-timeline__desc {
    color: var(--sq-white);
}
.sq-timeline__card--featured .sq-timeline__paper-topics {
    color: rgba( 255,255,255,0.8 );
}
.sq-timeline__card--final {
    border-color: var(--sq-success);
    background: var(--sq-success-light);
}
.sq-timeline__card--final .sq-timeline__heading {
    color: var(--sq-success);
}

.sq-timeline__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--sq-surface);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sq-timeline__card--featured .sq-timeline__icon {
    background: rgba( 255,255,255,0.15 );
}
.sq-timeline__card--final .sq-timeline__icon {
    background: var(--sq-success-light);
}

.sq-timeline__step-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sq-text-xlight);
    margin-bottom: 0.25rem;
}
.sq-timeline__heading {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sq-text);
    margin: 0 0 0.5rem;
    font-family: 'Fraunces', serif;
}
.sq-timeline__desc {
    font-size: 0.9375rem;
    color: var(--sq-text-light);
    line-height: 1.65;
    margin: 0 0 0.75rem;
}
.sq-timeline__desc:last-child {
    margin-bottom: 0;
}

.sq-timeline__papers {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.sq-timeline__paper-topics {
    font-size: 0.8125rem;
    color: var(--sq-text-light);
    line-height: 1.5;
}

@media ( max-width: 600px ) {
    .sq-timeline__card {
        flex-direction: column;
        gap: 0.75rem;
    }
    .sq-timeline::before {
        left: 20px;
    }
    .sq-timeline__step {
        padding-left: 52px;
    }
    .sq-timeline__connector {
        left: 12px;
    }
}

/* --------------------------------------------------------------------------
   SQE4. Comparison cards
   -------------------------------------------------------------------------- */
.sq-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.sq-compare-card {
    background: var(--sq-white);
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius-lg);
    overflow: hidden;
    box-shadow: var(--sq-shadow-sm);
}
.sq-compare-card--sqe1 {
    border-top: 4px solid var(--sq-primary);
}
.sq-compare-card--sqe2 {
    border-top: 4px solid var(--sq-surface-2);
}

.sq-compare-card__header {
    padding: 1.25rem 1.5rem 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--sq-border);
}
.sq-compare-card__header h3 {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--sq-text);
}
.sq-compare-card__tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    flex-shrink: 0;
}
.sq-compare-card__tag--sqe1 {
    background: var(--sq-primary-light);
    color: var(--sq-primary);
}
.sq-compare-card__tag--sqe2 {
    background: var(--sq-surface-2);
    color: var(--sq-text-light);
}

.sq-compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sq-compare-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--sq-border);
    font-size: 0.9rem;
}
.sq-compare-list li:last-child {
    border-bottom: none;
}
.sq-compare-list__key {
    width: 90px;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--sq-text);
}
.sq-compare-list__val {
    color: var(--sq-text-light);
    line-height: 1.5;
}
.sq-compare-list__val--yes {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--sq-success);
    font-weight: 600;
}
.sq-compare-list__val--na {
    color: var(--sq-text-xlight);
    font-style: italic;
}
.sq-compare-list__sqewise {
    background: var(--sq-surface);
}

@media ( max-width: 680px ) {
    .sq-compare-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   SQE5. How Sqewise helps
   -------------------------------------------------------------------------- */
.sq-sqe-how__grid {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 1.5rem;
}
.sq-sqe-how__card {
    background: var(--sq-white);
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow: var(--sq-shadow-sm);
    display: flex;
    flex-direction: column;
}
.sq-sqe-how__card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--sq-text);
    margin: 0.875rem 0 0.5rem;
}
.sq-sqe-how__card p {
    font-size: 0.9375rem;
    color: var(--sq-text-light);
    line-height: 1.65;
    margin: 0 0 1rem;
    flex-grow: 1;
}
.sq-sqe-how__link {
    display: inline-block;
    color: var(--sq-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s;
}
.sq-sqe-how__link:hover {
    color: var(--sq-accent);
    text-decoration: underline;
}
.sq-sqe-how__links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

@media ( max-width: 860px ) {
    .sq-sqe-how__grid {
        grid-template-columns: 1fr;
    }
}
@media ( min-width: 480px ) and ( max-width: 860px ) {
    .sq-sqe-how__grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   PLATFORM PAGE
   ========================================================================== */

/* PL1 — Hero
   ========================================================================== */

.sq-platform-hero {
    background: var(--sq-gradient-hero);
    color: var(--sq-white);
    padding: 5rem 0 4rem;
    overflow: hidden;
}

.sq-platform-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.sq-platform-eyebrow {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin: 0 0 0.75rem;
}

.sq-platform-hero__h1 {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--sq-white);
}

.sq-platform-hero__sub {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.8);
    margin: 0 0 1.75rem;
    max-width: 480px;
}

.sq-platform-hero__actions {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
}

.sq-platform-hero__note {
    margin: 0.875rem 0 0;
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.5);
}

/* PL2 — Laptop mockup
   ========================================================================== */

.sq-laptop {
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45));
}

.sq-laptop__screen {
    background: #0f0f12; /* intentional dark UI chrome */
    border-radius: 10px 10px 0 0;
    padding: 0;
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.08);
}

.sq-laptop__bar {
    background: #1e1e24; /* intentional dark UI chrome */
    padding: 0.5rem 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sq-laptop__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: block;
}

.sq-laptop__url {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.35);
    margin-left: 0.5rem;
    font-family: monospace;
}

.sq-laptop__content {
    min-height: 280px;
    background: var(--sq-white);
    position: relative;
    overflow: hidden;
}

.sq-laptop__hinge {
    width: calc(100% + 12px);
    max-width: 452px;
    height: 5px;
    background: linear-gradient(to bottom, #1a1a22, #2a2a34); /* intentional dark UI chrome */
    border-radius: 0 0 2px 2px;
}

.sq-laptop__base {
    width: 120%;
    max-width: 528px;
    height: 12px;
    background: linear-gradient(to bottom, #2a2a34, #1e1e26); /* intentional dark UI chrome */
    border-radius: 0 0 8px 8px;
}

/* PL3 — Demo slides
   ========================================================================== */

.sq-demo-slide {
    position: absolute;
    inset: 0;
    padding: 1rem 1.125rem;
    background: var(--sq-white);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    overflow-y: auto;
}

.sq-demo-slide--active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
}

.sq-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.sq-demo-topic-badge {
    font-size: 0.625rem;
    font-weight: 700;
    background: var(--sq-primary-light);
    color: var(--sq-primary);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
}

.sq-demo-q-num {
    font-size: 0.6rem;
    color: var(--sq-text-xlight);
}

.sq-demo-question {
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--sq-text);
    margin: 0 0 0.75rem;
    font-weight: 500;
}

.sq-demo-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sq-demo-opt {
    font-size: 0.65rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--sq-border);
    border-radius: 5px;
    color: var(--sq-text);
    line-height: 1.4;
}

.sq-demo-opt--correct {
    background: var(--sq-success-light);
    border-color: var(--sq-success);
    color: var(--sq-success);
    font-weight: 600;
}

.sq-demo-opt--selected {
    background: #EFF6FF; /* intentional blue — no design-system variable */
    border-color: #3b82f6; /* intentional blue — no design-system variable */
    color: #1d4ed8; /* intentional blue — no design-system variable */
}

.sq-demo-welcome {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sq-primary);
    margin: 0 0 0.75rem;
}

.sq-demo-stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.sq-demo-stat {
    flex: 1;
    background: var(--sq-surface);
    border: 1px solid var(--sq-border);
    border-radius: 6px;
    padding: 0.5rem 0.625rem;
}

.sq-demo-stat__val {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sq-primary);
}

.sq-demo-stat__label {
    display: block;
    font-size: 0.575rem;
    color: var(--sq-text-light);
    margin-top: 0.1rem;
}

.sq-demo-bar {
    height: 4px;
    background: var(--sq-border);
    border-radius: 2px;
    margin-top: 0.375rem;
    overflow: hidden;
}

.sq-demo-bar__fill {
    height: 100%;
    background: var(--sq-primary);
    border-radius: 2px;
    transition: width 0.6s ease;
}

.sq-demo-bar__fill--high { background: var(--sq-success); }
.sq-demo-bar__fill--mid  { background: var(--sq-warning); }
.sq-demo-bar__fill--low  { background: var(--sq-accent); }

.sq-demo-nudge {
    font-size: 0.6rem;
    background: var(--sq-danger-light);
    border-left: 3px solid var(--sq-accent);
    padding: 0.4rem 0.5rem;
    border-radius: 0 4px 4px 0;
    color: var(--sq-text);
    margin: 0;
    line-height: 1.5;
}

.sq-demo-nudge-link {
    color: var(--sq-primary);
    font-weight: 600;
}

.sq-demo-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sq-primary);
    margin: 0 0 0.625rem;
}

.sq-demo-topic-card {
    border: 1px solid var(--sq-border);
    border-radius: 6px;
    padding: 0.625rem 0.75rem;
}

.sq-demo-topic-intro {
    font-size: 0.625rem;
    color: var(--sq-text);
    line-height: 1.55;
    margin: 0 0 0.5rem;
}

.sq-demo-topic-heading {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--sq-text);
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sq-demo-topic-list {
    margin: 0;
    padding-left: 1rem;
}

.sq-demo-topic-list li {
    font-size: 0.6rem;
    color: var(--sq-text-light);
    line-height: 1.5;
    margin-bottom: 0.2rem;
}

.sq-demo-mock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sq-demo-mock-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sq-primary);
}

.sq-demo-mock-timer {
    font-size: 0.6rem;
    color: var(--sq-accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.sq-demo-mock-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sq-demo-mock-progress {
    flex: 1;
    height: 4px;
    background: var(--sq-border);
    border-radius: 2px;
    overflow: hidden;
}

.sq-demo-mock-count {
    font-size: 0.575rem;
    color: var(--sq-text-light);
    white-space: nowrap;
}

.sq-demo-cases-search {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--sq-surface-2);
    border: 1px solid var(--sq-border);
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.625rem;
    font-size: 0.65rem;
    color: var(--sq-text);
}

.sq-demo-cases-search__icon {
    color: var(--sq-text-xlight);
    font-size: 0.75rem;
}

.sq-demo-case-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.sq-demo-case-name {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--sq-primary);
    flex: 1;
}

.sq-demo-case-year {
    font-size: 0.6rem;
    color: var(--sq-text-xlight);
}

.sq-demo-case-principle {
    font-size: 0.6rem;
    color: var(--sq-text-light);
    line-height: 1.55;
    margin: 0;
}

.sq-demo-mastery-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sq-demo-mastery-row {
    display: grid;
    grid-template-columns: 90px 1fr 36px;
    align-items: center;
    gap: 0.5rem;
}

.sq-demo-mastery-topic {
    font-size: 0.625rem;
    color: var(--sq-text);
    white-space: nowrap;
}

.sq-demo-mastery-bar {
    height: 6px;
    background: var(--sq-border);
    border-radius: 3px;
    overflow: hidden;
}

.sq-demo-mastery-pct {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--sq-text);
    text-align: right;
}

/* PL4 — Dot / label navigation
   ========================================================================== */

.sq-demo-dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.875rem;
}

.sq-demo-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}

.sq-demo-dot--active {
    background: var(--sq-white);
}

.sq-demo-labels {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.sq-demo-label {
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.4);
    transition: color 0.2s ease;
    padding: 0.1rem 0.375rem;
    border-radius: 3px;
}

.sq-demo-label--active {
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.1);
}

/* PL5 — Feature cards (2×3 grid)
   ========================================================================== */

.sq-platform-features {
    padding: 5rem 0;
    background: var(--sq-white);
}

.sq-platform-section-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--sq-text-heading);
    text-align: center;
    margin: 0 0 0.625rem;
}

.sq-platform-section-sub {
    text-align: center;
    color: var(--sq-text-light);
    font-size: 1rem;
    margin: 0 0 3rem;
}

.sq-platform-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.sq-platform-feature-card {
    background: var(--sq-white);
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius-lg);
    padding: 1.75rem 1.625rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.sq-platform-feature-card:hover {
    box-shadow: var(--sq-shadow-sm);
    border-color: var(--sq-primary-20);
}

.sq-platform-feature-card__icon {
    width: 48px;
    height: 48px;
    background: var(--sq-primary-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.sq-platform-feature-card h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--sq-text-heading);
    margin: 0 0 0.5rem;
}

.sq-platform-feature-card p {
    font-size: 0.9375rem;
    color: var(--sq-text-light);
    line-height: 1.65;
    margin: 0 0 1rem;
    flex: 1;
}

.sq-platform-feature-card__link {
    display: inline-block;
    color: var(--sq-primary);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    transition: color 0.15s;
}

.sq-platform-feature-card__link:hover {
    color: var(--sq-accent);
    text-decoration: underline;
}

/* PL6 — Quality assurance
   ========================================================================== */

.sq-platform-quality {
    background: var(--sq-surface);
    padding: 5rem 0;
    border-top: 1px solid var(--sq-border);
    border-bottom: 1px solid var(--sq-border);
}

.sq-platform-quality__inner {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 3rem;
    align-items: center;
}

.sq-platform-quality__text h2 {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--sq-text-heading);
    margin: 0 0 1rem;
}

.sq-platform-quality__text > p {
    font-size: 0.9375rem;
    color: var(--sq-text-light);
    line-height: 1.65;
    margin: 0 0 1.5rem;
    max-width: 560px;
}

.sq-platform-quality__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sq-platform-quality__steps li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.9375rem;
    color: var(--sq-text);
    line-height: 1.55;
}

.sq-platform-quality__steps li svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.sq-platform-quality__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    background: var(--sq-white);
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius-lg);
    padding: 1.75rem 1.25rem;
}

.sq-platform-quality__badge-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sq-primary);
    margin: 0;
    line-height: 1.3;
}

.sq-platform-quality__badge-sub {
    font-size: 0.8125rem;
    color: var(--sq-text-light);
    margin: 0;
}

/* PL7 — Comparison table
   ========================================================================== */

.sq-platform-compare {
    padding: 5rem 0;
    background: var(--sq-white);
}

.sq-platform-compare-wrap {
    overflow-x: auto;
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius-lg);
    margin-top: 0;
}

.sq-platform-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.sq-cmp-th {
    padding: 1rem 1.125rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--sq-border);
    background: var(--sq-surface);
    vertical-align: top;
    line-height: 1.3;
}

.sq-cmp-th--feature {
    text-align: left;
    color: var(--sq-text-light);
    width: 34%;
}

.sq-cmp-th--sqewise {
    background: var(--sq-primary-light);
    color: var(--sq-primary);
    border-left: 2px solid var(--sq-primary);
    border-right: 2px solid var(--sq-primary);
}

.sq-cmp-th__brand {
    display: block;
    font-size: 0.9375rem;
}

.sq-cmp-th__price {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--sq-text-light);
    margin-top: 0.2rem;
}

.sq-cmp-th--sqewise .sq-cmp-th__price {
    color: var(--sq-primary);
    opacity: 0.7;
}

.sq-cmp-row:last-child .sq-cmp-td {
    border-bottom: none;
}

.sq-cmp-td {
    padding: 0.75rem 1.125rem;
    border-bottom: 1px solid var(--sq-border);
    text-align: center;
    font-size: 0.9rem;
    color: var(--sq-text);
}

.sq-cmp-td--feature {
    text-align: left;
    font-size: 0.9rem;
    color: var(--sq-text);
}

.sq-cmp-td--sqewise {
    background: var(--sq-surface);
    border-left: 2px solid var(--sq-primary);
    border-right: 2px solid var(--sq-primary);
    font-weight: 600;
}

.sq-cmp-yes     { color: var(--sq-success); }
.sq-cmp-no      { color: var(--sq-border); }
.sq-cmp-partial { color: var(--sq-text-xlight); font-style: italic; }

.sq-cmp-td--sqewise.sq-cmp-yes { color: var(--sq-primary); }

/* PL8 — CTA band
   ========================================================================== */

.sq-platform-cta {
    background: var(--sq-gradient-primary);
    padding: 4rem 0;
    color: var(--sq-white);
}

.sq-platform-cta__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.sq-platform-cta h2 {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--sq-white);
    margin: 0 0 0.375rem;
}

.sq-platform-cta p {
    color: rgba(255,255,255,0.75);
    margin: 0;
    font-size: 1rem;
}

.sq-platform-cta__actions {
    display: flex;
    gap: 0.875rem;
    flex-wrap: wrap;
}

/* PL9 — Responsive
   ========================================================================== */

@media ( max-width: 1024px ) {
    .sq-platform-hero__inner {
        grid-template-columns: 1fr;
    }

    .sq-platform-hero__visual {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sq-laptop {
        max-width: 480px;
        width: 100%;
    }

    .sq-platform-quality__inner {
        grid-template-columns: 1fr;
    }

    .sq-platform-quality__badge {
        flex-direction: row;
        gap: 1.25rem;
        padding: 1.25rem;
        max-width: 360px;
    }
}

@media ( max-width: 768px ) {
    .sq-platform-hero {
        padding: 3.5rem 0 3rem;
    }

    .sq-platform-hero__h1 {
        font-size: 1.75rem;
    }

    .sq-platform-feature-grid {
        grid-template-columns: 1fr;
    }

    .sq-platform-cta__inner {
        flex-direction: column;
        text-align: center;
        align-items: flex-start;
    }
}

@media ( max-width: 520px ) {
    .sq-platform-hero__actions {
        flex-direction: column;
    }

    .sq-platform-cta__actions {
        flex-direction: column;
        width: 100%;
    }

    .sq-demo-mastery-row {
        grid-template-columns: 72px 1fr 30px;
    }
}

/* =============================================================================
   UPGRADE NOTICE BANNER — pricing page (?upgrade=1)
   ============================================================================= */

.sq-upgrade-notice {
    background: var(--sq-warning-light);
    border-bottom: 2px solid var(--sq-warning);
}

.sq-upgrade-notice__inner {
    display: flex;
    align-items: center;
    gap: var(--sq-space-3);
    padding: var(--sq-space-3) var(--sq-space-5);
}

.sq-upgrade-notice__icon {
    color: var(--sq-warning);
    flex-shrink: 0;
    display: block;
}

.sq-upgrade-notice__text {
    flex: 1;
    font-size: 14px;
    color: var(--sq-text);
    margin: 0;
    line-height: 1.5;
}

.sq-upgrade-notice__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sq-text-light);
    padding: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.sq-upgrade-notice__close:hover {
    color: var(--sq-text);
    background: rgba(0,0,0,0.06);
}

/* =============================================================================
   404 PAGE
   ============================================================================= */

.sq-404-wrap {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sq-space-10) 0;
}

.sq-404-inner {
    text-align: center;
    max-width: 520px;
}

.sq-404-code {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(5rem, 15vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--sq-primary-light);
    letter-spacing: -0.02em;
    margin-bottom: var(--sq-space-4);
}

.sq-404-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--sq-text);
    margin-bottom: var(--sq-space-4);
}

.sq-404-body {
    font-size: 1rem;
    color: var(--sq-text-light);
    margin-bottom: var(--sq-space-3);
    line-height: 1.7;
}

.sq-404-cta-text {
    font-size: 1.0625rem;
    color: var(--sq-text);
    font-weight: 500;
    margin-bottom: var(--sq-space-5);
}

.sq-404-actions {
    display: flex;
    gap: var(--sq-space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Hero demo — homepage animated product carousel
   Replaces the static .sq-hero__mockup. Prefix: sq-hdemo__
   ========================================================================== */

/* Outer frame */
.sq-hdemo {
    background: var(--sq-white);
    border-radius: var(--sq-radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    overflow: hidden;
    position: relative;
    font-family: 'Inter', sans-serif;
}

/* ---------- Tab bar ---------- */
.sq-hdemo__tabs {
    display: flex;
    background: var(--sq-surface);
    border-bottom: 1px solid var(--sq-border);
    padding: 0 0.875rem;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sq-hdemo__tabs::-webkit-scrollbar { display: none; }

.sq-hdemo__tab {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--sq-text-light);
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.sq-hdemo__tab:hover { color: var(--sq-primary); }
.sq-hdemo__tab--active {
    color: var(--sq-primary);
    border-bottom-color: var(--sq-primary);
    font-weight: 700;
}

/* ---------- Progress bar ---------- */
.sq-hdemo__prog-track {
    height: 2px;
    background: var(--sq-border);
    position: relative;
}
.sq-hdemo__prog-fill {
    height: 100%;
    background: var(--sq-accent);
    width: 0%;
    will-change: width;
}

/* ---------- Slides container ---------- */
.sq-hdemo__body {
    position: relative;
    height: 346px; /* fixed — never changes between slides */
    overflow: hidden;
}

/* ---------- Individual slides ---------- */
.sq-hdemo__slide {
    position: absolute; /* always absolute — never overridden */
    inset: 0;
    padding: 1rem 1.25rem 0.875rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: hidden;
}
.sq-hdemo__slide--active {
    opacity: 1;
    pointer-events: auto;
    /* no position override — stays absolute, body height stays fixed */
}

/* ---- Slide 0: Practice ---- */
.sq-hdemo__smart-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--sq-purple-mid);
    background: var(--sq-purple-mid-10);
    border-radius: 99px;
    padding: 0.3rem 0.75rem;
    width: fit-content;
}
.sq-hdemo__smart-bar strong { font-weight: 700; }

.sq-hdemo__smart-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sq-purple-mid);
    flex-shrink: 0;
    animation: sq-hdemo-pulse 1.5s ease-in-out infinite;
}
@keyframes sq-hdemo-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.75); }
}

.sq-hdemo__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sq-hdemo__badge-topic {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--sq-primary-light);
    color: var(--sq-primary);
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
}
.sq-hdemo__q-num {
    font-size: 0.7rem;
    color: var(--sq-text-xlight);
}

.sq-hdemo__q-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sq-text);
    line-height: 1.5;
    margin: 0;
}

.sq-hdemo__opts {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.sq-hdemo__opt {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.625rem;
    border: 1.5px solid var(--sq-border);
    border-radius: var(--sq-radius);
    font-size: 0.7375rem;
    color: var(--sq-text);
    line-height: 1.4;
}
.sq-hdemo__opt-letter {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--sq-primary-light);
    color: var(--sq-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
/* The option being "selected" by the user */
.sq-hdemo__opt--selecting {
    border-color: var(--sq-primary);
    background: var(--sq-primary-light);
}
.sq-hdemo__opt--selecting .sq-hdemo__opt-letter {
    background: var(--sq-primary);
    color: var(--sq-white);
}

/* ---- Slide 1: Explanation ---- */
.sq-hdemo__result-banner {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--sq-success-light);
    color: var(--sq-success);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.5rem 0.75rem;
    border-radius: var(--sq-radius);
}

.sq-hdemo__exp-body {
    font-size: 0.775rem;
    color: var(--sq-text);
    line-height: 1.6;
    margin: 0;
}

.sq-hdemo__exp-wrong {
    background: var(--sq-surface);
    border-radius: var(--sq-radius);
    padding: 0.625rem 0.75rem;
    font-size: 0.7125rem;
    color: var(--sq-text-light);
    line-height: 1.55;
}
.sq-hdemo__exp-wrong-title {
    font-weight: 700;
    color: var(--sq-text);
    margin-bottom: 0.25rem;
    font-size: 0.7125rem;
}

.sq-hdemo__authority-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--sq-text-light);
    margin-top: auto;
    padding-top: 0.25rem;
    border-top: 1px solid var(--sq-border);
}
.sq-hdemo__auth-chip {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--sq-primary-light);
    color: var(--sq-primary);
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    flex-shrink: 0;
}

/* ---- Slide 2: Dashboard ---- */
.sq-hdemo__db-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.sq-hdemo__db-greeting {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sq-hdemo__db-name {
    font-weight: 700;
    font-size: 0.8125rem;
    color: var(--sq-text);
}
.sq-hdemo__db-streak {
    font-size: 0.7rem;
    color: var(--sq-text-light);
}
.sq-hdemo__db-today {
    text-align: right;
}
.sq-hdemo__db-today-num {
    display: block;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--sq-primary);
    line-height: 1;
}
.sq-hdemo__db-today-denom {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sq-text-light);
}
.sq-hdemo__db-today-lbl {
    display: block;
    font-size: 0.65rem;
    color: var(--sq-text-xlight);
    text-align: right;
}

.sq-hdemo__db-bar-wrap { display: flex; flex-direction: column; gap: 0.25rem; }
.sq-hdemo__db-bar-track {
    height: 6px;
    background: var(--sq-border);
    border-radius: 99px;
    overflow: hidden;
}
.sq-hdemo__db-bar-fill {
    height: 100%;
    background: var(--sq-primary);
    border-radius: 99px;
}
.sq-hdemo__db-bar-label { font-size: 0.65rem; color: var(--sq-text-xlight); }

.sq-hdemo__nudge {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    background: rgba(196, 30, 58, 0.06);
    border-left: 3px solid var(--sq-accent);
    border-radius: 0 var(--sq-radius) var(--sq-radius) 0;
    padding: 0.5rem 0.625rem;
    font-size: 0.7125rem;
    color: var(--sq-text);
    line-height: 1.45;
}
.sq-hdemo__nudge svg { flex-shrink: 0; margin-top: 2px; color: var(--sq-accent); }
.sq-hdemo__nudge-cta { font-weight: 700; color: var(--sq-accent); white-space: nowrap; }

.sq-hdemo__db-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--sq-border);
    margin-top: auto;
    padding-top: 0.75rem;
}
.sq-hdemo__db-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    border-right: 1px solid var(--sq-border);
}
.sq-hdemo__db-stat:last-child { border-right: none; }
.sq-hdemo__db-stat-val {
    font-size: 1.0625rem;
    font-weight: 800;
    color: var(--sq-primary);
    line-height: 1;
}
.sq-hdemo__db-stat-lbl { font-size: 0.6375rem; color: var(--sq-text-xlight); }

/* ---- Slide 3: Mastery ---- */
.sq-hdemo__mastery-heading {
    font-size: 0.775rem;
    font-weight: 700;
    color: var(--sq-text);
    margin: 0;
}

.sq-hdemo__mastery-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
.sq-hdemo__mastery-row {
    display: grid;
    grid-template-columns: 80px 1fr 32px;
    align-items: center;
    gap: 0.5rem;
}
.sq-hdemo__mastery-topic {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--sq-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sq-hdemo__mastery-track {
    height: 6px;
    background: var(--sq-border);
    border-radius: 99px;
    overflow: hidden;
}
.sq-hdemo__mastery-fill {
    height: 100%;
    border-radius: 99px;
}
.sq-hdemo__fill--high { background: var(--sq-success); }
.sq-hdemo__fill--mid  { background: var(--sq-warning); }
.sq-hdemo__fill--low  { background: var(--sq-accent); }

.sq-hdemo__mastery-pct {
    font-size: 0.675rem;
    font-weight: 700;
    color: var(--sq-text-light);
    text-align: right;
}
.sq-hdemo__pct--low { color: var(--sq-accent); }

.sq-hdemo__smart-hint {
    font-size: 0.675rem;
    color: var(--sq-purple-mid);
    background: var(--sq-purple-mid-10);
    border-radius: var(--sq-radius);
    padding: 0.4rem 0.625rem;
    margin: 0;
    line-height: 1.4;
}

/* ---- Shared: section title used by Topics, Key Cases, Mastery, Leaderboard ---- */
.sq-hdemo__section-title {
    font-size: 0.775rem;
    font-weight: 700;
    color: var(--sq-text);
    margin: 0;
    flex-shrink: 0;
}

/* ---- Slide 2: Topics ---- */
.sq-hdemo__topic-card {
    background: var(--sq-surface);
    border-radius: var(--sq-radius);
    padding: 0.625rem 0.75rem;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.sq-hdemo__topic-intro {
    font-size: 0.7125rem;
    color: var(--sq-text);
    line-height: 1.5;
    margin: 0;
}
.sq-hdemo__topic-sub {
    font-size: 0.675rem;
    font-weight: 700;
    color: var(--sq-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0.125rem 0 0;
}
.sq-hdemo__topic-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.sq-hdemo__topic-list li {
    font-size: 0.7rem;
    color: var(--sq-text);
    line-height: 1.45;
    padding-left: 0.875rem;
    position: relative;
}
.sq-hdemo__topic-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--sq-primary);
    font-weight: 700;
}
.sq-hdemo__topic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex-shrink: 0;
}
.sq-hdemo__topic-chip {
    font-size: 0.6375rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
    border: 1.5px solid var(--sq-border);
    color: var(--sq-text-light);
}
.sq-hdemo__topic-chip--active {
    background: var(--sq-primary-light);
    color: var(--sq-primary);
    border-color: var(--sq-primary-light);
}

/* ---- Slide 3: Mock Exam ---- */
.sq-hdemo__mock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.sq-hdemo__mock-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--sq-text);
}
.sq-hdemo__mock-timer {
    font-size: 0.725rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sq-accent);
    background: var(--sq-accent-10);
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
}
.sq-hdemo__mock-prog-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-shrink: 0;
}
.sq-hdemo__mock-prog-track {
    height: 5px;
    background: var(--sq-border);
    border-radius: 99px;
    overflow: hidden;
}
.sq-hdemo__mock-prog-fill {
    height: 100%;
    background: var(--sq-primary);
    border-radius: 99px;
}
.sq-hdemo__mock-count {
    font-size: 0.6375rem;
    color: var(--sq-text-xlight);
}
.sq-hdemo__mock-q {
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--sq-text);
    line-height: 1.45;
    margin: 0;
}
/* Smaller options for mock exam (more compact) */
.sq-hdemo__opts--sm .sq-hdemo__opt {
    padding: 0.35rem 0.575rem;
    font-size: 0.6875rem;
}
.sq-hdemo__opts--sm .sq-hdemo__opt-letter {
    width: 18px;
    height: 18px;
    font-size: 0.625rem;
}

/* ---- Slide 4: Key Cases ---- */
.sq-hdemo__cases-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--sq-surface);
    border: 1.5px solid var(--sq-border);
    border-radius: var(--sq-radius);
    padding: 0.45rem 0.75rem;
    font-size: 0.7125rem;
    color: var(--sq-text-light);
    flex-shrink: 0;
}
.sq-hdemo__cases-search svg { color: var(--sq-text-xlight); flex-shrink: 0; }
.sq-hdemo__cases-search-text { color: var(--sq-text); font-weight: 500; }

.sq-hdemo__case-card {
    background: var(--sq-surface);
    border-radius: var(--sq-radius);
    padding: 0.625rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    overflow: hidden;
}
.sq-hdemo__case-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.sq-hdemo__case-name {
    font-size: 0.775rem;
    font-weight: 700;
    color: var(--sq-primary);
}
.sq-hdemo__case-year {
    font-size: 0.675rem;
    color: var(--sq-text-xlight);
}
.sq-hdemo__case-topic-badge {
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--sq-primary-light);
    color: var(--sq-primary);
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    margin-left: auto;
}
.sq-hdemo__case-principle {
    font-size: 0.7125rem;
    color: var(--sq-text);
    line-height: 1.55;
    margin: 0;
}
.sq-hdemo__cases-count {
    font-size: 0.665rem;
    color: var(--sq-text-xlight);
    text-align: center;
    flex-shrink: 0;
}

/* ---- Slide 6: Leaderboard ---- */
.sq-hdemo__lb-coming {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--sq-warning-light);
    color: var(--sq-warning);
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
    width: fit-content;
    flex-shrink: 0;
}
.sq-hdemo__lb-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--sq-border);
    border-radius: var(--sq-radius);
    overflow: hidden;
    flex: 1;
}
.sq-hdemo__lb-row {
    display: grid;
    grid-template-columns: 28px 1fr 52px 56px;
    align-items: center;
    padding: 0.425rem 0.625rem;
    font-size: 0.7rem;
    border-bottom: 1px solid var(--sq-border);
    gap: 0.375rem;
}
.sq-hdemo__lb-row:last-child { border-bottom: none; }
.sq-hdemo__lb-row--header {
    background: var(--sq-surface);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sq-text-xlight);
    padding: 0.3rem 0.625rem;
}
.sq-hdemo__lb-row--you {
    background: var(--sq-primary-light);
    font-weight: 600;
}
.sq-hdemo__lb-rank {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--sq-text-light);
    text-align: center;
}
.sq-hdemo__lb-rank--1 { color: #B8860B; }
.sq-hdemo__lb-rank--2 { color: #6B7280; }
.sq-hdemo__lb-rank--3 { color: #9A5C28; }
.sq-hdemo__lb-acc { font-weight: 700; color: var(--sq-success); }
.sq-hdemo__lb-footer {
    font-size: 0.6375rem;
    color: var(--sq-text-xlight);
    text-align: center;
    flex-shrink: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .sq-hdemo { max-width: 480px; margin: 0 auto; }
}


/* =========================================================
   HOW IT WORKS v2 — Combined platform walkthrough page
   Prefix: sq-hiw2-
   ========================================================= */

/* ---- Hero ---- */
.sq-hiw2-hero {
    background: linear-gradient(135deg, var(--sq-primary) 0%, #4A1580 100%);
    color: var(--sq-white);
    padding: 4.5rem 0 3.5rem;
    text-align: center;
}
.sq-hiw2-hero__inner { max-width: 760px; margin: 0 auto; }
.sq-hiw2-hero h1 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--sq-white);
    margin: 0.5rem 0 1rem;
}
.sq-hiw2-hero__sub {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.82);
    max-width: 580px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.sq-hiw2-hero__steps-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.01em;
}
.sq-hiw2-hero__arrow { color: rgba(255,255,255,0.35); }

/* ---- Steps container ---- */
.sq-hiw2-steps {
    padding: 0 0 3rem;
}
.sq-hiw2-step {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 4.5rem 0;
    border-bottom: 1px solid var(--sq-border);
}
.sq-hiw2-step:last-child { border-bottom: none; }

/* flip — visual on left, text on right */
.sq-hiw2-step--flip .sq-hiw2-step__text  { order: 2; }
.sq-hiw2-step--flip .sq-hiw2-step__visual { order: 1; }

/* Step number eyebrow */
.sq-hiw2-step-num {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sq-accent);
    margin: 0 0 0.5rem;
}
.sq-hiw2-step__text h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sq-primary);
    margin: 0 0 1rem;
    line-height: 1.25;
}
.sq-hiw2-step__text p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--sq-text);
    margin-bottom: 0.75rem;
}
.sq-hiw2-step__text p:last-of-type { margin-bottom: 0; }

/* ---- App screen frame ---- */
.sq-hiw2-screen {
    background: var(--sq-white);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(45,10,94,0.13), 0 1px 4px rgba(45,10,94,0.07);
    overflow: hidden;
    border: 1px solid var(--sq-border);
}
.sq-hiw2-screen__bar {
    background: #f0ebfa;
    border-bottom: 1px solid var(--sq-border);
    padding: 0.45rem 0.85rem;
    font-size: 0.63rem;
    color: var(--sq-text-light);
    font-family: ui-monospace, monospace;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sq-hiw2-screen__bar::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--sq-primary);
    opacity: 0.3;
    flex-shrink: 0;
}
.sq-hiw2-screen__body {
    padding: 1.1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.sq-hiw2-screen__body--compact { gap: 0.4rem; }
.sq-hiw2-screen__title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--sq-primary);
    margin: 0 0 0.5rem;
}

/* ---- Form fields (Step 1 mockup) ---- */
.sq-hiw2-field { display: flex; flex-direction: column; gap: 0.2rem; }
.sq-hiw2-field__label {
    font-size: 0.63rem;
    font-weight: 600;
    color: var(--sq-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sq-hiw2-field__input {
    background: var(--sq-surface);
    border: 1px solid var(--sq-border);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-size: 0.75rem;
    color: var(--sq-text);
}
.sq-hiw2-pill {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    border: 1.5px solid var(--sq-border);
    color: var(--sq-text-light);
}
.sq-hiw2-pill--on {
    background: var(--sq-primary);
    border-color: var(--sq-primary);
    color: var(--sq-white);
}
.sq-hiw2-submit {
    background: var(--sq-primary);
    color: var(--sq-white);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    margin-top: 0.25rem;
    cursor: default;
}

/* ---- Dashboard mockup (Step 2) ---- */
.sq-hiw2-db-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.sq-hiw2-db-welcome {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--sq-primary);
    margin: 0;
}
.sq-hiw2-db-streak {
    font-size: 0.7rem;
    color: var(--sq-text-light);
    margin: 0.15rem 0 0;
}
.sq-hiw2-db-today {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.sq-hiw2-db-today__num {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--sq-primary);
    line-height: 1;
}
.sq-hiw2-db-today__lbl {
    font-size: 0.6rem;
    color: var(--sq-text-xlight);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sq-hiw2-db-bar {
    background: var(--sq-border);
    border-radius: 4px;
    height: 7px;
    overflow: hidden;
}
.sq-hiw2-db-bar__fill {
    height: 100%;
    background: var(--sq-accent);
    border-radius: 4px;
}
.sq-hiw2-nudge {
    background: #fff9e6;
    border: 1px solid #f0d060;
    border-radius: 6px;
    padding: 0.45rem 0.6rem;
    font-size: 0.68rem;
    color: var(--sq-text);
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    line-height: 1.4;
}
.sq-hiw2-section-lbl {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sq-text-light);
    margin: 0.2rem 0 0.1rem;
}
.sq-hiw2-mastery-row {
    display: grid;
    grid-template-columns: 80px 1fr 36px;
    align-items: center;
    gap: 0.5rem;
}
.sq-hiw2-mastery-topic { font-size: 0.7rem; color: var(--sq-text); }
.sq-hiw2-mastery-pct   { font-size: 0.7rem; font-weight: 700; text-align: right; }
.sq-hiw2-bar-track {
    background: var(--sq-border);
    border-radius: 3px;
    height: 6px;
    overflow: hidden;
}
.sq-hiw2-bar-fill {
    height: 100%;
    border-radius: 3px;
}
.sq-hiw2-bar-fill--high { background: var(--sq-success); }
.sq-hiw2-bar-fill--mid  { background: var(--sq-warning); }
.sq-hiw2-bar-fill--low  { background: var(--sq-danger); }

/* ---- Practice mockup (Step 3) ---- */
.sq-hiw2-smart-bar {
    background: #f0ebfa;
    border-radius: 6px;
    padding: 0.35rem 0.65rem;
    font-size: 0.65rem;
    color: var(--sq-primary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.sq-hiw2-smart-pulse {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--sq-accent);
    flex-shrink: 0;
    animation: sq-hiw2-pulse 2s ease-in-out infinite;
}
@keyframes sq-hiw2-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}
.sq-hiw2-q-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sq-hiw2-badge {
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--sq-primary-light);
    color: var(--sq-primary);
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
}
.sq-hiw2-q {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--sq-text);
    margin: 0;
}
.sq-hiw2-opt {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    background: var(--sq-surface);
    border: 1px solid var(--sq-border);
    border-radius: 6px;
    padding: 0.35rem 0.55rem;
    font-size: 0.7rem;
    color: var(--sq-text);
    line-height: 1.4;
}
.sq-hiw2-opt__letter {
    font-weight: 700;
    color: var(--sq-primary);
    flex-shrink: 0;
    width: 14px;
}
.sq-hiw2-opt--correct {
    background: #ecfdf5;
    border-color: var(--sq-success);
    color: #065f46;
}
.sq-hiw2-opt--correct .sq-hiw2-opt__letter { color: var(--sq-success); }
.sq-hiw2-opt--wrong {
    background: #fff1f0;
    border-color: #fca5a5;
    opacity: 0.65;
}
.sq-hiw2-opt--selecting {
    background: #eff6ff;
    border-color: #93c5fd;
}
.sq-hiw2-explanation {
    background: #f0fdf4;
    border-left: 3px solid var(--sq-success);
    border-radius: 0 6px 6px 0;
    padding: 0.5rem 0.65rem;
    font-size: 0.67rem;
    line-height: 1.5;
    color: var(--sq-text);
}

/* ---- Key Cases mockup (Step 4) ---- */
.sq-hiw2-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--sq-surface);
    border: 1px solid var(--sq-border);
    border-radius: 6px;
    padding: 0.4rem 0.65rem;
    font-size: 0.72rem;
    color: var(--sq-text);
}
.sq-hiw2-case-card {
    background: var(--sq-surface);
    border: 1px solid var(--sq-border);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
}
.sq-hiw2-case-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    margin-bottom: 0.35rem;
}
.sq-hiw2-case-year {
    font-size: 0.63rem;
    color: var(--sq-text-light);
}
.sq-hiw2-case-rule {
    font-size: 0.67rem;
    line-height: 1.5;
    color: var(--sq-text);
    margin: 0;
}

/* ---- Mock exam mockup (Step 5) ---- */
.sq-hiw2-mock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--sq-primary);
}
.sq-hiw2-mock-timer {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sq-accent);
    font-variant-numeric: tabular-nums;
}
.sq-hiw2-mock-prog { display: flex; flex-direction: column; gap: 0.2rem; }

/* ---- Study planner mockup (Step 6) ---- */
.sq-hiw2-planner-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.3rem;
}
.sq-hiw2-plan-slot {
    background: var(--sq-surface);
    border: 1px solid var(--sq-border);
    border-radius: 6px;
    padding: 0.4rem 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-height: 56px;
    justify-content: center;
}
.sq-hiw2-plan-day {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sq-text-light);
}
.sq-hiw2-plan-topic {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--sq-text);
    text-align: center;
}
.sq-hiw2-plan-topic--rest { color: var(--sq-text-xlight); }
.sq-hiw2-plan-tick {
    font-size: 0.65rem;
    color: var(--sq-success);
    font-weight: 700;
}
.sq-hiw2-plan-today-badge {
    font-size: 0.5rem;
    font-weight: 800;
    color: var(--sq-accent);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sq-hiw2-plan-slot--done {
    background: #ecfdf5;
    border-color: var(--sq-success);
}
.sq-hiw2-plan-slot--today {
    background: #fff7ed;
    border-color: var(--sq-accent);
    border-width: 2px;
}
.sq-hiw2-plan-slot--rest {
    background: var(--sq-surface);
    opacity: 0.6;
}
.sq-hiw2-plan-slot--mock {
    background: #f0ebfa;
    border-color: var(--sq-primary);
}
.sq-hiw2-plan-slot--mock .sq-hiw2-plan-topic { color: var(--sq-primary); }
.sq-hiw2-planner-detail {
    background: var(--sq-surface);
    border-radius: 6px;
    padding: 0.55rem 0.75rem;
    font-size: 0.67rem;
    line-height: 1.5;
    color: var(--sq-text);
    border: 1px solid var(--sq-border);
    margin-top: 0.25rem;
}

/* ---- Quality assurance section ---- */
.sq-hiw2-quality {
    background: var(--sq-surface);
    padding: 4rem 0;
    border-top: 1px solid var(--sq-border);
    border-bottom: 1px solid var(--sq-border);
}
.sq-hiw2-quality__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem;
    align-items: center;
}
.sq-hiw2-quality__text h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sq-primary);
    margin: 0 0 1rem;
}
.sq-hiw2-quality__text > p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--sq-text);
    margin-bottom: 1.5rem;
}
.sq-hiw2-quality__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sq-hiw2-quality__steps li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--sq-text);
}
.sq-hiw2-quality__steps li svg { flex-shrink: 0; margin-top: 0.2rem; }
.sq-hiw2-quality__badge {
    text-align: center;
    padding: 1.5rem;
    background: var(--sq-white);
    border-radius: 16px;
    box-shadow: var(--sq-shadow-sm);
    min-width: 140px;
}
.sq-hiw2-quality__badge-label {
    font-weight: 800;
    font-size: 0.875rem;
    color: var(--sq-primary);
    margin: 0.75rem 0 0.25rem;
    line-height: 1.3;
}
.sq-hiw2-quality__badge-sub {
    font-size: 0.75rem;
    color: var(--sq-text-light);
    margin: 0;
}

/* ---- Comparison table ---- */
.sq-hiw2-compare {
    padding: 4rem 0;
}
.sq-hiw2-section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sq-primary);
    text-align: center;
    margin: 0 0 0.5rem;
}
.sq-hiw2-section-sub {
    text-align: center;
    color: var(--sq-text-light);
    font-size: 0.9375rem;
    margin: 0 0 2.5rem;
}
.sq-hiw2-compare-wrap { overflow-x: auto; }
.sq-hiw2-compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sq-white);
    border-radius: var(--sq-radius-lg);
    overflow: hidden;
    box-shadow: var(--sq-shadow-sm);
    border: 1px solid var(--sq-border);
}
.sq-hiw2-cth {
    padding: 1rem 1.25rem;
    background: var(--sq-primary);
    color: var(--sq-white);
    text-align: center;
    font-size: 0.875rem;
}
.sq-hiw2-cth--feature { text-align: left; }
.sq-hiw2-cth--sqewise { background: var(--sq-accent); }
.sq-hiw2-cth__brand { display: block; font-weight: 700; }
.sq-hiw2-cth__price { display: block; font-size: 0.7rem; font-weight: 400; opacity: 0.85; margin-top: 0.15rem; }
.sq-hiw2-crow { border-bottom: 1px solid var(--sq-border); }
.sq-hiw2-ctd {
    padding: 0.85rem 1.25rem;
    font-size: 0.875rem;
    text-align: center;
    color: var(--sq-text);
}
.sq-hiw2-ctd--feature { text-align: left; font-weight: 600; }
.sq-hiw2-ctd--sqewise { background: #fff9f5; }
.sq-hiw2-yes     { color: var(--sq-success); font-weight: 700; }
.sq-hiw2-no      { color: var(--sq-text-xlight); }
.sq-hiw2-partial { color: var(--sq-text-light); font-style: italic; }

/* ---- Dashboard mockup v2 — purple header strip, stat grid, alert, activity ---- */
.sq-hiw2-db-strip {
    background: linear-gradient(135deg, var(--sq-primary) 0%, #4A1580 100%);
    padding: 0.85rem 1.25rem 0.75rem;
    border-bottom: none;
}
.sq-hiw2-db-strip__greeting {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--sq-white);
    margin: 0 0 0.15rem;
}
.sq-hiw2-db-strip__sub {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.65);
    margin: 0;
}

/* 4 stat boxes */
.sq-hiw2-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--sq-border);
}
.sq-hiw2-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.4rem;
    border-right: 1px solid var(--sq-border);
    text-align: center;
}
.sq-hiw2-stat-box:last-child { border-right: none; }
.sq-hiw2-stat-val {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--sq-primary);
    line-height: 1.1;
}
.sq-hiw2-stat-val--accent { color: var(--sq-accent); }
.sq-hiw2-stat-lbl {
    font-size: 0.53rem;
    color: var(--sq-text-xlight);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
    line-height: 1.3;
    text-align: center;
}

/* Alert banner */
.sq-hiw2-alert {
    background: #fff7ed;
    border-bottom: 1px solid #fed7aa;
    padding: 0.4rem 1.25rem;
    font-size: 0.63rem;
    color: #9a3412;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
}

/* Recent activity rows */
.sq-hiw2-activity-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.63rem;
    color: var(--sq-text);
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--sq-surface);
    line-height: 1.3;
}
.sq-hiw2-activity-row:last-child { border-bottom: none; }
.sq-hiw2-activity-tick {
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}
.sq-hiw2-activity-tick--correct { color: var(--sq-success); }
.sq-hiw2-activity-tick--wrong   { color: var(--sq-danger); }
.sq-hiw2-activity-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sq-text);
}
.sq-hiw2-activity-tag {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--sq-text-light);
    background: var(--sq-surface);
    border: 1px solid var(--sq-border);
    border-radius: 10px;
    padding: 0.1rem 0.35rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---- Progress page mockup (Step 6) ---- */
.sq-hiw2-prog-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--sq-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.1rem;
}
.sq-hiw2-prog-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.55rem 0.3rem;
    border-right: 1px solid var(--sq-border);
    text-align: center;
}
.sq-hiw2-prog-stat:last-child { border-right: none; }
.sq-hiw2-prog-stat__val {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--sq-primary);
    line-height: 1.1;
}
.sq-hiw2-prog-stat__lbl {
    font-size: 0.5rem;
    color: var(--sq-text-xlight);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
    line-height: 1.3;
}

/* FLK1 vs FLK2 split */
.sq-hiw2-flk-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.sq-hiw2-flk-card {
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sq-hiw2-flk-card--flk1 {
    background: var(--sq-primary-light);
    border: 1px solid rgba(45,10,94,0.15);
}
.sq-hiw2-flk-card--flk2 {
    background: var(--sq-purple-mid-10);
    border: 1px solid rgba(109,40,217,0.15);
}
.sq-hiw2-flk-label {
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--sq-primary);
}
.sq-hiw2-flk-card--flk2 .sq-hiw2-flk-label { color: var(--sq-purple-mid); }
.sq-hiw2-flk-pct {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--sq-primary);
    line-height: 1;
}
.sq-hiw2-flk-card--flk2 .sq-hiw2-flk-pct { color: var(--sq-purple-mid); }
.sq-hiw2-flk-topics {
    font-size: 0.55rem;
    color: var(--sq-text-light);
    line-height: 1.4;
    margin-top: 0.1rem;
}

/* Topic breakdown table */
.sq-hiw2-topic-table {
    border: 1px solid var(--sq-border);
    border-radius: 6px;
    overflow: hidden;
}
.sq-hiw2-topic-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.63rem;
    color: var(--sq-text);
    border-bottom: 1px solid var(--sq-border);
    align-items: center;
}
.sq-hiw2-topic-row:last-child { border-bottom: none; }
.sq-hiw2-topic-row--head {
    background: var(--sq-surface);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sq-text-light);
}
.sq-hiw2-status {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    white-space: nowrap;
}
.sq-hiw2-status--strong  { background: #dcfce7; color: #166534; }
.sq-hiw2-status--building { background: #fef9c3; color: #854d0e; }
.sq-hiw2-status--needs   { background: #fee2e2; color: #991b1b; }
.sq-hiw2-status--none    { background: var(--sq-surface); color: var(--sq-text-xlight); }

/* ---- Leaderboard mockup (Step 8) ---- */
.sq-hiw2-lb-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sq-border);
    border-radius: 8px;
    overflow: hidden;
}
.sq-hiw2-lb-row {
    display: grid;
    grid-template-columns: 28px 1fr 52px 52px;
    gap: 0.25rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.67rem;
    color: var(--sq-text);
    border-bottom: 1px solid var(--sq-border);
    align-items: center;
}
.sq-hiw2-lb-row:last-child { border-bottom: none; }
.sq-hiw2-lb-row--head {
    background: var(--sq-surface);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sq-text-light);
}
.sq-hiw2-lb-row--you {
    background: var(--sq-primary-light);
    font-weight: 600;
}
.sq-hiw2-lb-row--divider {
    background: var(--sq-surface);
    font-size: 0.6rem;
    color: var(--sq-text-xlight);
    justify-content: center;
    padding: 0.25rem;
    grid-template-columns: 1fr;
    text-align: center;
}
.sq-hiw2-lb-rank {
    font-weight: 700;
    font-size: 0.7rem;
    text-align: center;
}
.sq-hiw2-lb-rank--1 { color: #B8860B; }
.sq-hiw2-lb-rank--2 { color: #6B7280; }
.sq-hiw2-lb-rank--3 { color: #9A5C28; }
.sq-hiw2-lb-acc {
    font-weight: 700;
    color: var(--sq-success);
    text-align: right;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .sq-hiw2-step,
    .sq-hiw2-step--flip .sq-hiw2-step__text,
    .sq-hiw2-step--flip .sq-hiw2-step__visual {
        grid-template-columns: 1fr;
        order: unset;
    }
    .sq-hiw2-step { display: flex; flex-direction: column; gap: 2rem; }
    .sq-hiw2-step--flip .sq-hiw2-step__visual { order: -1; }
    .sq-hiw2-quality__inner { grid-template-columns: 1fr; }
    .sq-hiw2-quality__badge { display: none; }
    .sq-hiw2-hero__steps-strip { display: none; }
    .sq-hiw2-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .sq-hiw2-prog-stats { grid-template-columns: repeat(2, 1fr); }
}

/* =============================================================
   HOMEPAGE ENRICHMENT SECTIONS
   sq-home-* prefix
   ============================================================= */

/* ---- What is SQE1 section ---- */
.sq-home-sqe__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
.sq-home-sqe__text h2 {
    margin-top: 0.5rem;
    font-size: clamp(1.6rem, 2.5vw, 2rem);
}
.sq-home-sqe__text p {
    color: var(--sq-text-light);
    line-height: 1.7;
    margin-bottom: 1rem;
}
.sq-home-sqe__facts {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
}
.sq-home-sqe__fact {
    flex: 1 1 auto;
    background: #fff;
    border: 1px solid var(--sq-border);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    text-align: center;
    min-width: 90px;
}
.sq-home-sqe__fact-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--sq-primary);
    line-height: 1.1;
}
.sq-home-sqe__fact-lbl {
    display: block;
    font-size: 0.7rem;
    color: var(--sq-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.2rem;
}

/* FLK1 / FLK2 paper cards */
.sq-home-sqe__papers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sq-home-paper {
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.sq-home-paper--flk1 {
    background: rgba(45,10,94,0.07);
    border-left: 4px solid var(--sq-primary);
}
.sq-home-paper--flk2 {
    background: var(--sq-purple-mid-10);
    border-left: 4px solid var(--sq-purple-mid);
}
.sq-home-paper__label {
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 0.75rem;
    color: var(--sq-primary);
}
.sq-home-paper--flk2 .sq-home-paper__label {
    color: var(--sq-purple-mid);
}
.sq-home-paper__list {
    margin: 0;
    padding: 0 0 0 1rem;
    list-style: disc;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
}
.sq-home-paper__list li {
    font-size: 0.8rem;
    color: var(--sq-text);
    flex: 0 0 calc(50% - 0.75rem);
    min-width: 140px;
}

/* ---- Platform tools teaser ---- */
.sq-home-tools__sub {
    color: var(--sq-text-light);
    max-width: 540px;
    margin: 0 auto;
}
.sq-home-tools {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
}
.sq-home-tool {
    background: var(--sq-surface);
    border: 1px solid var(--sq-border);
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
    transition: box-shadow 0.18s, transform 0.18s;
}
.sq-home-tool:hover {
    box-shadow: 0 6px 20px rgba(45,10,94,0.1);
    transform: translateY(-2px);
}
.sq-home-tool__icon {
    width: 44px;
    height: 44px;
    background: rgba(45,10,94,0.07);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.sq-home-tool h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: var(--sq-primary);
}
.sq-home-tool p {
    font-size: 0.83rem;
    color: var(--sq-text-light);
    line-height: 1.6;
    margin: 0;
}

/* ---- 13 Topics section ---- */
.sq-home-topics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}
.sq-home-topics__paper-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}
.sq-home-topics__paper-label--flk1 { color: var(--sq-primary); }
.sq-home-topics__paper-label--flk2 { color: var(--sq-purple-mid); }
.sq-home-topics__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sq-home-topic-tag {
    display: inline-block;
    background: #fff;
    border: 1.5px solid var(--sq-border);
    border-radius: 100px;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    color: var(--sq-text);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.sq-home-topic-tag:hover {
    border-color: var(--sq-primary);
    color: var(--sq-primary);
    background: rgba(45,10,94,0.04);
}
.sq-home-topics__paper:first-child .sq-home-topic-tag:hover {
    border-color: var(--sq-primary);
    color: var(--sq-primary);
}
.sq-home-topics__paper:last-child .sq-home-topic-tag:hover {
    border-color: var(--sq-purple-mid);
    color: var(--sq-purple-mid);
}

/* ---- Homepage enrichment responsive ---- */
@media (max-width: 900px) {
    .sq-home-sqe__inner { grid-template-columns: 1fr; gap: 2rem; }
    .sq-home-tools { grid-template-columns: repeat(2, 1fr); }
    .sq-home-topics { grid-template-columns: 1fr; gap: 1.5rem; }
    .sq-home-paper__list li { flex: 0 0 100%; }
}
@media (max-width: 520px) {
    .sq-home-tools { grid-template-columns: 1fr; }
    .sq-home-sqe__facts { gap: 0.5rem; }
}

/* =============================================================
   BREADCRUMB NAV
   ============================================================= */
.sq-breadcrumb {
    background: var(--sq-surface);
    border-bottom: 1px solid var(--sq-border);
    padding: 0.6rem 0;
}
.sq-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}
.sq-breadcrumb__item {
    display: flex;
    align-items: center;
    font-size: 0.78rem;
    color: var(--sq-text-light);
}
.sq-breadcrumb__item + .sq-breadcrumb__item::before {
    content: '›';
    margin: 0 0.5rem;
    color: var(--sq-border);
    font-size: 0.9rem;
    line-height: 1;
}
.sq-breadcrumb__item a {
    color: var(--sq-text-light);
    text-decoration: none;
    transition: color 0.15s;
    padding: 0.1rem 0;
}
.sq-breadcrumb__item a:hover {
    color: var(--sq-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sq-breadcrumb__item--current {
    color: var(--sq-primary);
    font-weight: 600;
}

/* =============================================================
   HOMEPAGE TOPICS — REDESIGNED (numbered list, not pills)
   ============================================================= */

/* Remove old pill styles */
.sq-home-topics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}
.sq-home-topics__col {
    background: #fff;
    border: 1px solid var(--sq-border);
    border-radius: 14px;
    overflow: hidden;
}
.sq-home-topics__col-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--sq-border);
}
.sq-home-topics__col-header--flk1 { background: rgba(45,10,94,0.05); }
.sq-home-topics__col-header--flk2 { background: var(--sq-purple-mid-10); }
.sq-home-topics__flk-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    background: var(--sq-primary);
    color: #fff;
}
.sq-home-topics__flk-badge--flk2 {
    background: var(--sq-purple-mid);
}
.sq-home-topics__col-sub {
    font-size: 0.75rem;
    color: var(--sq-text-light);
}
.sq-home-topics__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: topic-counter;
}
.sq-home-topics__list li {
    counter-increment: topic-counter;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1.25rem;
    border-bottom: 1px solid var(--sq-border);
    font-size: 0.85rem;
}
.sq-home-topics__list li:last-child { border-bottom: none; }
.sq-home-topics__list li::before {
    content: counter(topic-counter, decimal-leading-zero);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--sq-text-xlight);
    min-width: 1.5rem;
    flex-shrink: 0;
}
.sq-home-topics__list li a {
    color: var(--sq-text);
    text-decoration: none;
    transition: color 0.15s;
    line-height: 1.4;
}
.sq-home-topics__list li:hover { background: rgba(45,10,94,0.03); }
.sq-home-topics__list li a:hover { color: var(--sq-primary); }
.sq-home-topics__list--flk2 li a:hover { color: var(--sq-purple-mid); }
.sq-home-topics__list--flk2 li:hover { background: var(--sq-purple-mid-10); }

/* =============================================================
   TOPICS PAGE — CARD SUB-TOPICS + GRID
   ============================================================= */
.sq-topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    align-items: stretch;
}
.sq-topic-card__subtopics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--sq-border);
}
.sq-topic-card__subtopics span {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    border-radius: 100px;
    background: rgba(45,10,94,0.07);
    color: var(--sq-primary);
    font-weight: 500;
}
.sq-topic-card__subtopics--flk2 span {
    background: var(--sq-purple-mid-10);
    color: var(--sq-purple-mid);
}

@media (max-width: 700px) {
    .sq-home-topics { grid-template-columns: 1fr; }
    .sq-topics-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   TOPIC LIST — LINKED CARDS
   ============================================================= */
.sq-topic-card--link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.sq-topic-card--link:hover {
    box-shadow: 0 6px 24px rgba(45,10,94,0.12);
    transform: translateY(-2px);
    border-color: var(--sq-primary);
    text-decoration: none;
    color: inherit;
}
.sq-topic-card--flk2.sq-topic-card--link:hover {
    border-color: var(--sq-purple-mid);
    box-shadow: 0 6px 24px rgba(109,40,217,0.12);
}
.sq-topic-card__cta {
    display: block;
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sq-primary);
    transition: color 0.15s;
}

.sq-topic-card--link:hover .sq-topic-card__cta { color: var(--sq-accent); }
.sq-topic-card--flk2 .sq-topic-card--link:hover .sq-topic-card__cta { color: var(--sq-purple-mid); }
.sq-topic-card--flk2 .sq-topic-card__cta {
    color: var(--sq-purple-mid);
}

/* =============================================================
   TOPIC DETAIL PAGE (sq-td-*)
   ============================================================= */
.sq-topic-detail-hero {
    padding-bottom: 3rem;
}
.sq-td-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.2rem 0.7rem;
    border-radius: 100px;
    margin-bottom: 0.75rem;
}
.sq-td-badge--flk1 {
    background: rgba(45,10,94,0.12);
    color: var(--sq-primary);
}
.sq-td-badge--flk2 {
    background: var(--sq-purple-mid-15);
    color: var(--sq-purple-mid);
}
.sq-td-section-heading {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--sq-border);
}

/* Sub-topics */
.sq-td-subtopics {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.sq-td-subtopic {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1.25rem;
    background: var(--sq-surface);
    border: 1px solid var(--sq-border);
    border-radius: 12px;
}
.sq-td-subtopic__num {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--sq-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sq-td-subtopic__body h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: var(--sq-primary);
}
.sq-td-subtopic__body p {
    font-size: 0.85rem;
    color: var(--sq-text-light);
    line-height: 1.7;
    margin: 0;
}

/* Key cases */
.sq-td-cases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.sq-td-case {
    background: var(--sq-white);
    border: 1px solid var(--sq-border);
    border-left: 4px solid var(--sq-primary);
    border-radius: var(--sq-radius-lg);
    padding: 1.125rem 1.375rem;
    box-shadow: var(--sq-shadow);
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
    position: relative;
}
.sq-td-case:hover {
    box-shadow: 0 6px 20px rgba(45,10,94,0.13);
    transform: translateY(-2px);
    border-left-color: var(--sq-accent);
}
.sq-td-case__name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--sq-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.sq-td-case__year {
    font-weight: 400;
    color: var(--sq-text-light);
    margin-left: 0.25rem;
}
.sq-td-case__principle {
    font-size: 0.8rem;
    color: var(--sq-text-light);
    line-height: 1.6;
    margin: 0;
}

/* Related topics */
.sq-td-related {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.sq-td-related-link {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1.5px solid var(--sq-border);
    border-radius: 100px;
    font-size: 0.8rem;
    color: var(--sq-text);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.sq-td-related-link:hover {
    border-color: var(--sq-primary);
    color: var(--sq-primary);
    background: rgba(45,10,94,0.05);
    transform: translateY(-1px);
    box-shadow: var(--sq-shadow-sm);
}

@media (max-width: 600px) {
    .sq-td-subtopic { grid-template-columns: 1fr; }
    .sq-td-subtopic__num { display: none; }
    .sq-td-cases { grid-template-columns: 1fr; }
}