@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap");
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
}
:root {
  --foreground:          222.2 84% 4.9%;
  --primary:             #0385ff;
  --muted-hsl:           260 20% 97%;
  --muted-foreground:    215.4 16.3% 46.9%;
  --border-hsl:          214.3 31.8% 91.4%;
  --radius:              .5rem;
  --color-foreground:    hsl(var(--foreground));
  --color-muted:         hsl(var(--muted-hsl));
  --color-muted-fg:      hsl(var(--muted-foreground));
  --color-border:        hsl(var(--border-hsl));
  --green:      #0385ff;
  --green-dk:   #0270d9;
  --blue:       #0385ff;
  --blue-dk:    #0270d9;
  --navy:       #1E293B;
  --orange:     #F59E0B;
  --border:     hsl(var(--border-hsl));
  --text:       hsl(var(--foreground));
  --heading:    #0f172a;
  --text-secondary: #64748b;
  --muted:      hsl(var(--muted-foreground));
  --bg:         hsl(var(--muted-hsl));
  --white:      #fff;
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --font-ui: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --shadow-elev-1: 0 0 0 1px rgba(148, 163, 184, .12), 0 0 26px rgba(15, 23, 42, .05), 0 0 58px rgba(15, 23, 42, .07);
  --shadow-elev-2: 0 0 0 1px rgba(148, 163, 184, .12), 0 0 18px rgba(15, 23, 42, .04), 0 0 38px rgba(15, 23, 42, .05);
  --site-container: 1200px;
  --site-gutter-x: clamp(1rem, 3vw, 1.5rem);
  --site-shell-y: clamp(1.5rem, 2.8vw, 2.5rem);
  --site-touch-target: 48px;
}
[hidden] { display: none !important; }
body {
  font-family: var(--font-ui);
  color: var(--color-foreground);
  font-size: clamp(15px, .94rem, 16px);
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  display: block;
  padding: 0;
  background: transparent;
}
.ps-header {
  background: rgba(255,255,255,.92);
  color: var(--text);
  padding: 0 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 66px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(148, 163, 184, .18), 0 0 26px rgba(15, 23, 42, .05), 0 0 58px rgba(15, 23, 42, .06);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ps-header--admin,
.ps-header--account {
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,251,255,.92));
  box-shadow: 0 1px 0 rgba(148, 163, 184, .16), 0 0 24px rgba(15, 23, 42, .05), 0 0 52px rgba(15, 23, 42, .05);
}
.ps-header--storefront-glass {
  background: transparent;
  box-shadow: none;
  border-bottom: 0;
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}
.shell-storefront .ps-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 0;
}
.ps-header--utility {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}
.ps-header--utility .ps-header-nav__cluster {
  display: none;
}
.ps-header--utility .ps-header-menu-toggle,
.ps-header--utility .ps-header-cta,
.ps-header--utility .nav-cart-btn {
  display: none;
}
html[data-theme='dark'] .ps-header--utility {
  background: rgba(15, 23, 42, .96);
}
.ps-footer--utility {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: .4rem;
  min-height: auto;
  padding: 1rem 2rem;
}
.ps-footer--utility .ps-footer-links {
  justify-content: center;
}
.shell-main {
  min-width: 0;
}
.shell-main--storefront-offset {
  padding-top: calc(66px);
}
.ps-logo-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  flex: 0 0 auto;
  max-width: min(220px, 40vw);
  min-width: 0;
}
.ps-logo-image {
  display: block;
  height: 52px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.ps-header-context {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .65rem;
  padding: .3rem .62rem;
  border-radius: 999px;
  background: rgba(3, 133, 255, .08);
  color: var(--blue);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12);
}
.ps-header nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}
.ps-header-nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: .25rem;
  min-width: 0;
}
.ps-header-nav--admin,
.ps-header-nav--account {
  gap: .4rem;
}
.ps-header nav a {
  color: #62597b;
  text-decoration: none;
  padding: .36rem .62rem;
  font-size: .82rem;
  font-weight: 500;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.ps-header nav a:hover { color: var(--primary) !important; font-weight: 800 !important;
  background: rgba(3, 133, 255, .08); }
.ps-header nav a.is-active {
  color: #0f172a;
   color: var(#0f172a) !important;
  background: rgba(15, 23, 42, .06);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .14);
}
.ps-header-link--utility {
  color: #475569 !important;
  background: rgba(255,255,255,.74);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12);
}
.ps-header--admin .ps-logo-link,
.ps-header--account .ps-logo-link {
  position: relative;
}
.ps-header--admin .ps-logo-link::after,
.ps-header--account .ps-logo-link::after {
  content: "";
  position: absolute;
  right: -1.1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: rgba(148, 163, 184, .22);
}
.nav-account-menu {
  position: relative;
}
.nav-account-menu summary {
  list-style: none;
}
.nav-account-menu summary::-webkit-details-marker {
  display: none;
}
.nav-account-menu__panel {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  width: min(320px, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  padding: .95rem;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, .18);
  background:
    radial-gradient(circle at top right, rgba(3, 133, 255, .08), transparent 30%),
    rgba(255, 255, 255, .98);
  box-shadow: 0 24px 56px rgba(15, 23, 42, .16);
  display: grid;
  gap: .7rem;
  z-index: 40;
}
.nav-account-menu__meta {
  padding: .1rem .2rem .65rem;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.nav-account-menu__meta strong {
  display: block;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 1rem;
}
.nav-account-menu__meta span {
  display: block;
  margin-top: .18rem;
  color: #64748b;
  font-size: .77rem;
  line-height: 1.5;
}
.nav-account-menu__links {
  display: grid;
  gap: .25rem;
}
.nav-account-menu__section-label {
  padding: .45rem .82rem .1rem;
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nav-account-menu__links a,
.nav-account-menu__logout {
  display: block;
  padding: .66rem .82rem !important;
  border-radius: 14px;
  color: #334155 !important;
  text-decoration: none;
  font-size: .86rem !important;
  font-weight: 700 !important;
}
.nav-account-menu__links a:hover,
.nav-account-menu__logout:hover {
  background: #f8fafc !important;
  color: var(--blue) !important;
}
.nav-account-menu__logout {
  border-top: 1px solid rgba(148, 163, 184, .18);
  padding-top: .8rem !important;
  color: #b91c1c !important;
}
.nav-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(3, 133, 255, .08);
  border: 1px solid rgba(3, 133, 255, .16);
  border-radius: 8px;
  color: var(--blue);
  cursor: pointer;
  margin-left: .25rem;
  transition: background .15s, color .15s;
}
.nav-cart-btn:hover { background: rgba(3, 133, 255, .14); color: var(--blue-dk); }
.nav-cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--orange);
  color: #fff;
  font-size: .58rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #fff;
}
.shell-admin .ps-header nav a,
.shell-account .ps-header nav a {
  border-radius: 999px;
  padding: .48rem .82rem;
  font-size: .8rem;
  font-weight: 700;
}
.shell-admin .ps-header nav a.is-active,
.shell-account .ps-header nav a.is-active {
  background: linear-gradient(135deg, rgba(3, 133, 255, .11), rgba(96, 165, 250, .08));
  color: #0f172a;
  box-shadow: inset 0 0 0 1px rgba(3, 133, 255, .12);
}
.ps-hero { display: none; }
.wiz-progress-wrap {
  width: 100%;
  max-width: var(--site-container);
  margin: 0 auto;
}
.ps-preview-col {
  flex: 0 0 31.8%;
  max-width: 31.8%;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 0;
  padding-bottom: 3rem;
  min-width: 0;
}
@media (max-width: 1024px) {
  .ps-preview-col { flex: none; max-width: 100%; padding-top: 0; }
}
.step-card {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-elev-1);
  overflow: visible;
  position: relative;
  margin-bottom: 0;
  width: 100%;
}
.step-card-header {
  display: none; 
}
.step-card-body { padding: 2rem; gap: 1rem;}
@media (min-width: 1025px) {
  .step-card-body { padding: 2.5rem; }
}
.ps-row { display: grid; gap: .7rem; margin-bottom: .7rem; }
.ps-row.two   { grid-template-columns: 1fr 1fr; }
.ps-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .ps-row.two,
  .ps-row.three { grid-template-columns: 1fr; }
}
.ps-field { display: flex; flex-direction: column; gap: .25rem; }
.ps-field label { font-size: 0.75rem; font-weight: 600; color: #374151; margin-bottom: 0.25rem; }
.ps-field input,
.ps-field select,
.ps-check-row + div input {
  border: 1px solid #6a7282;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  height: 2.25rem;
  color: var(--text);
  outline: none;
  background: var(--color-muted);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
@media (max-width: 768px) {
  .step-card-body {
    padding: 2rem;
  }
  .ps-field input,
  .ps-field select,
  .ps-check-row + div input {
    min-height: 2.75rem;
    height: 2.75rem;
    font-size: 16px;
    line-height: 1.25;
    padding: .7rem .85rem;
  }
  .ps-field label {
    font-size: .875rem;
    line-height: 1.35;
  }
  .ps-check-row {
    align-items: flex-start;
    gap: .65rem;
    font-size: .95rem;
    line-height: 1.45;
  }
  .ps-check-row input[type="checkbox"],
  .generator-consent-check,
  .local-tax-toggle input[type="checkbox"] {
    width: 1.125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    min-height: 1.125rem;
    flex: 0 0 1.125rem;
    margin-top: .18rem;
  }
  .tmpl-card {
    padding: 0;
    border: none;
    border-radius: .65rem;
    background: transparent;
    box-shadow: none;
  }
  .preview-template-status,
  .preview-summary-bar,
  .generator-preview-header,
  .cart-item__header,
  .cart-item__footer,
  .payment-modal__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .payment-modal__actions > * {
    width: 100%;
  }
  .btn-add, .btn-rm, .preview-template-toggle, .cart-panel__clear, .cart-panel__promo-btn, .delivery-email-add, .delivery-email-remove, .wiz-preview-gallery #wizPreviewNav .btn-nav {
    min-height: 44px;
  }
  .btn-add, .preview-template-toggle, .cart-panel__clear, .cart-panel__promo-btn, .delivery-email-add, .delivery-email-remove {
    font-size: 16px;
  }
  .btn-rm,
  .wiz-preview-gallery #wizPreviewNav .btn-nav {
    min-width: 44px;
  }
  .li-header,
  .li-row,
  .li-row--addition,
  .li-row.li-ded,
  .li-header.li-ded {
    grid-template-columns: minmax(0, 1fr);
  }
    .li-row.li-ded {
        display: grid;
        grid-template-columns: 2.5fr 1fr .5fr .5fr !important;
        gap: .5rem;
    }
  .li-header {
    gap: .25rem;
  }
  .li-row {
    gap: .55rem;
    margin-bottom: .65rem;
  }
  .li-row input {
    min-height: 2.75rem;
    font-size: 16px;
  }
  .btn-rm {
    justify-self: stretch;
    border: 1px solid rgba(239, 68, 68, .2);
    border-radius: .7rem;
    padding: .55rem .8rem;
    line-height: 1;
  }
}
.ps-header nav a,
.nav-cart-btn,
.btn-wiz-back,
.btn-wiz-next,
.btn-wiz-cart,
.btn-wiz-buynow,
.cart-panel__clear,
.cart-panel__promo-btn,
.cart-item__edit,
.cart-item__remove,
.payment-modal__pay,
.payment-modal__cancel {
  min-height: var(--site-touch-target);
}
.nav-cart-btn,
.cart-item__remove {
  min-width: var(--site-touch-target);
}
.ps-field:has(input[data-val-required]) label::after,
.ps-field:has(select[data-val-required]) label::after {
  content: ' *';
  color: #ef4444;
  font-weight: 700;
}
.ps-field input:focus,
.ps-field select:focus {
  border-color: #155dfc;
  background: var(--color-muted);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 1px oklch(54.6% .245 262.881), 0 0 0 3px oklch(54.6% .245 262.881 / .2);
}
.pay-type-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.ps-check-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  margin-top: .3rem;
}
.ps-check-row input[type="checkbox"] { accent-color: var(--green); width: 15px; height: 15px; }
.acc-item {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  margin-bottom: .5rem;
  overflow: hidden;
  background: var(--white);
  box-shadow:
    0 8px 16px -2px rgba(0,0,0,.06),
    0 32px 64px -12px rgba(0,0,0,.1),
    0 64px 120px -20px rgba(0,0,0,.14);
}
.acc-item.acc-open { border-color: #a9d9bc; }
.acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  cursor: pointer;
  background: var(--color-muted);
  user-select: none;
  transition: background .15s;
}
.acc-item.acc-open .acc-header { background: hsl(210 40% 96%); }
.acc-header:hover { background: hsl(210 20% 94%); }
.acc-item.acc-open .acc-header:hover { background: hsl(210 45% 93%); }
.acc-title { display: flex; align-items: center; gap: .8rem; }
.acc-num {
  font-weight: 700;
  font-size: .88rem;
  color: var(--blue);
}
.acc-date {
  font-size: .85rem;
  color: var(--color-muted-fg);
  background: hsl(210 20% 92%);
  padding: .15rem .55rem;
  border-radius: 4px;
  font-family: monospace;
}
.acc-item.acc-open .acc-date { background: hsl(210 50% 90%); color: var(--blue); }
.acc-chevron { color: var(--muted); font-size: .8rem; }
.acc-body {
  padding: 1rem;
  border-top: 1px solid var(--border);
}
.btn-add-link {
  background: none;
  border: none;
  color: var(--green);
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  padding: .2rem 0;
  text-decoration: underline;
  display: block;
  margin-top: .4rem;
}
.btn-add-link:hover { color: var(--green-dk); }
.li-header {
  display: grid;
  grid-template-columns: 1fr 1fr 28px;
  gap: .4rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  padding-bottom: .3rem;
}
.li-row {
  display: grid;
  grid-template-columns: 1fr 1fr 28px;
  gap: .4rem;
  align-items: center;
  margin-bottom: .4rem;
}
.li-row > *,
.li-header > * {
  min-width: 0;
}
.li-row--addition { grid-template-columns: 1fr 80px 110px 44px; }
.li-row.li-ded { grid-template-columns: minmax(0, 1fr) minmax(94px, 120px) 44px 44px; gap: .35rem; }
.li-header.li-ded { grid-template-columns: minmax(0, 1fr) minmax(94px, 120px) 44px 44px; }
.li-row input {
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: .42rem .6rem;
  font-size: .84rem;
  outline: none;
  background: #fafbfc;
  width: 100%;
}
.li-row input:focus { border-color: var(--green); background: var(--white); }
.btn-rm {
  background: none;
  border: none;
  color: #e74c3c;
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  justify-self: center;
}
.li-row.li-ded .btn-rm {
  min-width: 44px;
  min-height: 44px;
}
.btn-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  cursor: grab;
  justify-self: center;
  touch-action: none;
}
.btn-drag:active {
  cursor: grabbing;
}
.btn-drag__grip {
  width: 12px;
  height: 18px;
  border-radius: 999px;
  opacity: .72;
  background-image: radial-gradient(currentColor 1.2px, transparent 1.3px);
  background-size: 6px 6px;
  background-position: center;
}
.li-row.li-ded.li-row--dragging {
  opacity: .9;
}
.btn-order {
  border: 1px solid var(--border);
  background: #fafbfc;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
  padding: .35rem 0;
}
.btn-add {
  background: none;
  border: 1.5px dashed var(--green);
  color: var(--green);
  border-radius: 6px;
  padding: .38rem .9rem;
  font-size: .82rem;
  cursor: pointer;
  margin-top: .25rem;
  font-weight: 600;
}
.btn-add:hover { background: #eafaf1; }
.ps-alert {
  background: #fdecea;
  border-left: 4px solid #e74c3c;
  border-radius: 6px;
  padding: .65rem 1rem;
  font-size: .84rem;
  color: #c0392b;
  margin-bottom: 1rem;
}
.ps-alert ul { margin: 0; padding-left: 1.2rem; }
.btn-generate {
  display: block;
  width: 100%;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .9rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .5px;
  transition: background .18s;
}
.btn-generate:hover { background: var(--green-dk); }
.ps-preview-col {
  overflow: visible;
  position: sticky;
  top: 1rem;
}
#pdfPreviewWrap {
  overflow: visible;
}
.doc-stub-paged {
  border-bottom: 3px dashed var(--border);
}
.doc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 3px solid var(--green);
  padding-bottom: .9rem;
  margin-bottom: .9rem;
}
.doc-co-name { font-size: 1.15rem; font-weight: 800; color: var(--blue); }
.doc-muted   { color: var(--muted); font-size: .76rem; margin-top: .12rem; }
.doc-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .8rem;
  background: #f8f9fa;
  border-radius: 6px;
  padding: .75rem .9rem;
  margin-bottom: .9rem;
}
.ps-footer {
  padding: 1.2rem 2rem;
  font-size: .78rem;
  color: var(--text);
  background: linear-gradient(180deg, #fbfdff, #f3f8ff);
  border-top: 1px solid rgba(148, 163, 184, .28);
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.ps-footer-links {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}
.ps-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #334155;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .35rem 1rem;
  transition: color .15s, background .15s;
  border-radius: 999px;
}
.ps-footer-links a + a {
  border-left: 1px solid rgba(148, 163, 184, .24);
}
.ps-footer-links a:hover { color: #0258b5; background: rgba(3, 133, 255, .08); }
.ps-footer-copy {
  font-size: .75rem;
  color: #475569;
}
.shell-account .ps-footer,
.shell-admin .ps-footer {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(246,249,255,.96));
  border-top-color: rgba(148, 163, 184, .18);
}
.shell-account .ps-footer-links a,
.shell-admin .ps-footer-links a {
  font-weight: 700;
}
.shell-account .ps-footer-links a + a,
.shell-admin .ps-footer-links a + a {
  border-left-color: rgba(148, 163, 184, .24);
}
@media (max-width: 1024px) {
  .ps-header-context {
    display: none;
  }
}
.text-right { text-align: right; }
@media print {
  body { background: #fff; }
  .ps-header, .ps-hero, .ps-footer, .no-print { display: none !important; }
  .wiz-progress-wrap, .wiz-progress { display: none !important; }
  .ps-preview-col { position: static; }
  .doc-stub-paged { page-break-after: always; border-bottom: none; }
}
.btn-nav {
  background: var(--blue); color: #fff; border: none;
  border-radius: 4px; padding: .25rem .6rem; cursor: pointer; font-size: .85rem;
}
.btn-nav:hover { background: var(--green); }
.text-uppercase { text-transform: uppercase; }
.tmpl-card {
  border: 1.5px solid var(--border);
  border-radius: 1.25rem;
  padding: .85rem .85rem 1rem;
  transition: border-color .32s ease, box-shadow .32s ease, transform .32s cubic-bezier(.22,1,.36,1);
  font-size: .92rem;
  color: var(--text);
  user-select: none;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15,23,42,.06);
}
.tmpl-card:hover {
  border-color: color-mix(in srgb, var(--blue) 52%, white);
  transform: translateY(8px) scale(1.04);
  box-shadow: 0 0 0 1px rgba(3,133,255,.10), 0 24px 48px rgba(15,23,42,.09), 0 48px 96px rgba(15,23,42,.11);
}
.tmpl-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .25rem .62rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  margin-bottom: .7rem;
}
.tmpl-card__label { display: none; }
.tmpl-card__label--quickbooks { color: #0f4c81; }
.tmpl-card__label--adp { color: #5b3fd0; }
.tmpl-card__label--professional { color: #16a34a; }
.tmpl-card__chip--quickbooks {
  background: rgba(3, 133, 255, .1);
  color: #0f4c81;
}
.tmpl-card__chip--adp {
  background: rgba(111, 84, 255, .12);
  color: #5b3fd0;
}
.tmpl-card__chip--professional {
  background: rgba(15, 23, 42, .08);
  color: #1e293b;
}
.tmpl-card__frame {
  width: 100%;
  border-radius: .85rem;
  overflow: hidden;
  border: 1px solid rgba(203, 213, 225, .5);
  background: #fff;
  margin-bottom: .75rem;
  transition: transform .32s cubic-bezier(.22,1,.36,1);
}
.tmpl-card:hover .tmpl-card__frame {
  transform: scale(1.02);
}
.tmpl-card__frame img {
  display: block;
  width: 100%;
  height: auto;
}
.tmpl-card__copy {
  min-width: 0;
  width: 100%;
  text-align: center;
}
.tmpl-card__title {
  display: block;
  margin-bottom: .3rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}
.tmpl-card__subtitle {
  display: block;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.55;
}
@media (max-width: 768px) {
  .tmpl-card__chip { display: none !important; }
  .tmpl-card__copy { display: none !important; }
  .tmpl-card { display: flex; flex-direction: column; }
  .tmpl-card__frame { margin-bottom: 0; border: none; }
  .tmpl-card__label {
    display: block;
    text-align: center;
    margin-bottom: .3rem;
    font-size: .7rem;
    font-weight: 700;
    order: -1;
  }
}
.local-tax-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(110px, .9fr) minmax(110px, .9fr) auto auto;
  gap: .65rem;
  align-items: center;
  margin-bottom: .65rem;
}
.local-tax-row input[type="text"],
.local-tax-row input[type="number"] {
  width: 100%;
}
.local-tax-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 42px;
  padding: 0 .7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: .78rem;
  color: var(--muted);
}
@media (max-width: 768px) {
  .local-tax-row {
    grid-template-columns: 1fr 1fr;
  }
  .local-tax-toggle {
    justify-content: center;
    gap: .5rem;
  }
}
@media (max-width: 480px) {
  .local-tax-row {
    grid-template-columns: 1fr;
  }
  .local-tax-row > * {
    width: 100%;
  }
  .li-row--addition,
  .li-header {
    grid-template-columns: 1fr;
  }
  .li-row.li-ded,
  .li-header.li-ded {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 112px) 52px 28px;
  }
  .cart-panel {
    width: 100vw;
  }
  .payment-modal {
    padding: .75rem;
  }
  .payment-modal__dialog {
    padding: 1rem;
  }
}
.account-shell {
  width: 100%;
  max-width: var(--site-container);
  margin: 0 auto;
  padding: var(--site-shell-y) var(--site-gutter-x) 3rem;
  display: grid;
  gap: 1.25rem;
}
.account-shell--centered {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px);
  padding: 2rem var(--site-gutter-x);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background:
    radial-gradient(ellipse at top left, rgba(3, 133, 255, .06), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,250,255,.96));
  box-shadow: var(--shadow-elev-1);
  overflow: hidden;
}
.auth-card__header {
    padding: 2rem 2rem 0;
    text-align: center;
    align-content: center;
}
.auth-card__logo {
    height: 50px;
    align-self: center;
    margin-bottom: 1.1rem;
}
.auth-card__title {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.04em;
  color: var(--heading);
}
.auth-card__subtitle {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.auth-card__body {
  padding: 1.5rem 2rem;
}
.auth-card__footer {
  padding: 0 2rem 1.5rem;
  text-align: center;
}
.auth-card__footer p {
  margin: 0;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
html[data-theme='dark'] .auth-card {
  background:
    radial-gradient(ellipse at top left, rgba(3, 133, 255, .1), transparent 52%),
    linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.96));
}
@media (max-width: 480px) {
  .auth-card__header,
  .auth-card__body,
  .auth-card__footer {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}
.account-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
  gap: 1rem;
  padding: .15rem 0 .45rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.account-page-hero h1 {
  margin: .45rem 0 .45rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.3vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -.05em;
  color: #0f172a;
}
.account-page-hero p {
  margin: 0;
  max-width: 62ch;
  color: #475569;
  line-height: 1.8;
}
.workspace-page-title {
  padding: .2rem 0 .2rem;
}
.workspace-page-title h1 {
  margin: 0;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.account-summary-card,
.account-side-card {
  padding: 1.25rem 1.3rem;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow-elev-1);
}
.account-summary-card strong {
  display: block;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.2;
}
.account-summary-card span {
  display: block;
  margin-top: .55rem;
  color: #5b6b7f;
  line-height: 1.7;
  font-size: .88rem;
}
.account-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .72fr);
  gap: 1rem;
  align-items: start;
}
.account-page-hero .account-summary-card {
  box-shadow: var(--shadow-elev-2);
}
.account-dashboard-grid > .step-card,
.account-dashboard-grid > .account-side-card {
  box-shadow: var(--shadow-elev-1);
}
.account-side-card__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .34rem .68rem;
  border-radius: 999px;
  background: rgba(3,133,255,.08);
  color: var(--blue);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.account-side-card h2 {
  margin: .85rem 0 .55rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.16;
  color: #0f172a;
}
.account-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.1rem;
}
.acc-section-copy {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.6;
}
.success-list {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: #334155;
  line-height: 1.7;
  font-size: .84rem;
}
@media (max-width: 768px) {
  .account-page-hero,
  .account-dashboard-grid {
    grid-template-columns: 1fr;
  }
}
.btn-acc-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--site-touch-target);
  background: var(--blue);
  color: #fff !important;
  border: none;
  border-radius: 25px !important;
  padding: .72rem 1.75rem !important;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .15s;
  box-shadow: 0 14px 26px rgba(2, 104, 212, .22);
}
.btn-acc-primary:hover { background: #0258b5; transform: translateY(-1px); box-shadow: 0 18px 32px rgba(2, 88, 181, .26); }
.btn-acc-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--site-touch-target);
  background: var(--white);
  color: var(--blue);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: .66rem 1.05rem;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s, transform .15s, color .15s;
}
.btn-acc-secondary:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
/* Moved from bottom-right to top-right so the toast no longer
   sits over the wizard's botbar Continue/Cart/Checkout buttons.
   top: 4rem clears the sticky site header / wizard topbar with
   a small gap. Slide-in direction flipped: starts above the
   resting position and drops into place. Mirror of site.core.css
   — keep in sync. */
/* ─────────────────────────────────────────────────────────────────
   Mobile uniformity — storefront homepage at <768px viewport.

   Audit at 375px revealed:
     • Section H2 font-sizes ranged 21.6 → 33.75 px (1.6× variance).
       Outliers: .why-choose at 21.6 (too small), .generator-story
       and .storefront-join-cta at 33.75 (too big for mobile).
     • Title left positions ranged 13.6 → 56.8 px (4.2× variance).
       .verification-promo-card was 56.8 px (deep card-stack indent);
       .review-spotlight, .customer-counter were flush at 13.6 px.
     • Each card shell baked in its own horizontal padding +
       margin, layering inconsistently on top of section padding.

   Fix: one source of truth for mobile horizontal rhythm.
     1. Every .sf-section / .market-section / .market-hero pads
        in 1 rem from the viewport edges.
     2. Card shells (.why-choose-card, .verification-promo-card, …)
        zero their own horizontal margin and use a uniform 1 rem
        inner padding — so the card's title always lands at
        viewport-pad + card-pad = 32 px from the edge.
     3. Section H2 collapses to 1.75 rem (28 px) — matches the
        existing cluster (FAQ, Reviews, Guide) so the change is
        invisible there and only fixes the outliers. H1 (hero
        headline) keeps its larger fluid size; H3 (step cards)
        also stays untouched.

   Scoped to <768 px so the desktop band layouts and card sizing
   stay exactly as designed. */
@media (max-width: 768px) {
    /* (1) Section edge rhythm — 1rem horizontal padding on every
           storefront section. */
    .shell-storefront .sf-section,
    .shell-storefront .market-section,
    .shell-storefront .market-hero {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* (2) Card shells: zero own horizontal margins, uniform 1rem
           inner padding, full width within the section. */
    .shell-storefront .why-choose-card,
    .shell-storefront .verification-promo-card,
    .shell-storefront .paystub-purpose-card,
    .shell-storefront .faq-card,
    .shell-storefront .guide-panel,
    .shell-storefront .customer-counter-card,
    .shell-storefront .review-spotlight-shell,
    .shell-storefront .market-carousel-shell,
    .shell-storefront .generator-story-mobile-card-shell,
    .shell-storefront .generator-story-shell,
    .shell-storefront .storefront-join-cta-band {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* (3) Unified section H2 size — 28px closes the 21.6→33.75 range.
           Hero H1 (.storefront-hero-headline) and step-card H3s are
           excluded so they keep their distinct typographic roles. */
    .shell-storefront .sf-section h2,
    .shell-storefront .market-section h2:not(.storefront-hero-headline) {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    /* (4) Inner sf-containers inside the now-padded sections should
           not double-indent. */
    .shell-storefront .sf-section > .sf-container,
    .shell-storefront .market-section > .sf-container {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }
    /* (5) Zero out the inner-wrapper paddings that stack EXTRA
           horizontal indent on top of section + card padding. The
           audit found three specific offenders adding 22-43 px past
           the card edge:
             • .verification-promo-hero (16.8 ml + 26.4 pl = 43 px)
             • .why-choose-card__copy (22 pl)
             • .section-heading--single nested inside
               .sf-container--narrow (12 + 13.6 = 25.6 pl)
           After this rule, every section title lands at either 16 px
           (section-only) or 32 px (section + card) — closing the
           4.2× variance to a 2× tier that reads visually consistent. */
    .shell-storefront .verification-promo-hero,
    .shell-storefront .why-choose-card__copy,
    .shell-storefront .sf-container .section-heading,
    .shell-storefront .sf-container .section-heading--single {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }
    /* Nested sf-container--narrow inside another sf-container (seen
       in #storefrontGuideExplainerSection's heading wrapper) drops
       its own horizontal padding too — the outer container already
       owns the indent. */
    .shell-storefront .sf-container .sf-container--narrow {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }
    /* (6) Critical mobile-overflow fix.
       .verification-promo-card and .verification-promo-note ship
       with an off-canvas slide-in entrance animation
       (translateX(96px) and translateX(124px) at rest, cleared by
       an IntersectionObserver adding .is-visible). On desktop's
       two-column hero the shift is graceful. On mobile — where
       the section collapses to a single 1fr column — the same
       offsets push 47-108 px of card content past the 375 px
       viewport, where the parent .sf-section { overflow: clip }
       hides it. Visible result: the user sees only the left edge
       of the card and the right half of the body / CTA / list is
       silently chopped off.

       The IntersectionObserver does eventually clear the transform,
       but until that fires (or if the visitor lands directly on
       the section without scrolling, or if JS is slow to attach)
       the card is broken. The safe fix on mobile is to skip the
       entrance animation entirely: the section is already short
       enough that the slide-in adds nothing to the UX, and the
       reduced-motion path effectively does the same thing.

       Also force width:100% + zero horizontal margin so any other
       desktop-only positioning doesn't sneak in. */
    .shell-storefront .verification-promo-card,
    .shell-storefront .verification-promo-note {
        transform: none !important;
        opacity: 1 !important;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    /* Belt-and-braces: ensure the hero's grid template is actually
       single-column on mobile. The existing rule at line 5880 sets
       this under @media (max-width: 1024px); duplicating it inside
       this stricter mobile block guards against any future
       higher-specificity desktop rule sneaking in. */
    .shell-storefront .verification-promo-hero {
        grid-template-columns: 1fr;
    }
    /* (7) Unified card system.
       Audit at 375 px found five primary content cards drifting
       apart from each other:
         radius      18 → 28 px   (4 distinct values)
         padding     0/16 → 30/30 (5 distinct values, two with NO
                                   vertical breathing room)
         border-color 3 systems  (blue / faint-white / gray)
       Converging to one shared visual language so cards on
       different bands still read as the same component:
         radius      20 px
         padding     20 px
         border      1px solid rgba(148, 163, 184, .2) — neutral
                     gray that reads on dark AND light bands
       Backgrounds + box-shadows intentionally NOT touched — they're
       context-sensitive (some cards sit on dark bands, some on
       light) and the existing per-card shadow recipes already
       respect that contrast. */
    .shell-storefront .paystub-purpose-card,
    .shell-storefront .verification-promo-card,
    .shell-storefront .why-choose-card,
    .shell-storefront .faq-card,
    .shell-storefront .guide-panel,
    html[data-theme='dark'] .shell-storefront .paystub-purpose-card,
    html[data-theme='dark'] .shell-storefront .verification-promo-card,
    html[data-theme='dark'] .shell-storefront .why-choose-card,
    html[data-theme='dark'] .shell-storefront .faq-card,
    html[data-theme='dark'] .shell-storefront .guide-panel {
        /* !important required because each card has 2-4 rules
           competing for its border / padding (base + variant +
           dark-theme override + .feature-card group rule). The
           cleanest path to one unified value across all variants
           is to override at the end of cascade. The audit ran
           against these computed values, so this is the actual
           visible state. */
        border-radius: 20px !important;
        padding: 20px !important;
        border: 1px solid rgba(148, 163, 184, .2) !important;
    }
}

#accountToast {
  position: fixed;
  top: 4rem;
  right: 2rem;
  background: var(--green);
  color: #fff;
  padding: .7rem 1.2rem;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .3s, transform .3s;
  z-index: 9999;
  pointer-events: none;
}
#accountToast.show { opacity: 1; transform: translateY(0); }
.wiz-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  --wiz-side-pad: clamp(1rem, 8vw, 11rem);
  padding: 2rem var(--wiz-side-pad) 2rem;
  margin: 2% 0 0 0;
  position: relative;
}
.wiz-progress::before {
  content: '';
  position: absolute;
  top: calc(2rem + 14px);
  left: var(--wiz-line-left, calc(var(--wiz-side-pad) + 14px));
  width: var(--wiz-line-width, calc(100% - (var(--wiz-side-pad) * 2) - 28px));
  height: 2px;
  background: #cbd5e1;
  z-index: 0;
  border-radius: 2px;
}
img {
  max-width: 100%;
  height: auto;
}
.step-card[data-wiz-step] { display: none; }
@keyframes wizIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.btn-wiz-back {
  flex: 1;
  padding: 1rem 1.5rem;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 0.75rem 0 0 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;
}
.btn-wiz-back .btn-wiz-arrow-left {
  position: absolute;
  left: 1rem;
}
.btn-wiz-back:hover { background: #3f1a86; }
.btn-wiz-next {
  flex: 1;
  padding: 1rem 1.5rem;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 0 0.75rem 0.75rem 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: background .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;
}
.btn-wiz-next .btn-wiz-arrow-right {
  position: absolute;
  right: 1rem;
}
.btn-wiz-next:hover { background: var(--blue-dk); }
.btn-wiz-next--solo { border-radius: .75rem; }
.btn-wiz-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: .72rem 1.5rem;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: background .18s;
}
.btn-wiz-cart:hover { background: var(--green-dk); }
.btn-wiz-buynow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: .72rem 1.5rem;
  background: #7c3aed;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: background .18s;
}
.btn-wiz-buynow:hover { background: #6d28d9; }
.btn-wiz-arrow-left,
.btn-wiz-arrow-right { flex-shrink: 0; display: block; }
.preview-canvas-wrap {
  position: relative;
  overflow: visible;
}
.preview-template-toggle {
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  color: var(--text);
  padding: .45rem .8rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background .2s, box-shadow .2s;
}
.preview-template-toggle:hover {
  background: rgba(255,255,255,.4);
  box-shadow: 0 6px 20px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.4);
}
.preview-template-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .85rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(148,163,184,.28);
  border-radius: 1rem;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
}
.preview-template-status__actions {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.preview-template-status__eyebrow {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .25rem;
}
.preview-template-status__row {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.preview-template-status__name {
  font-size: .98rem;
  color: var(--text);
}
.preview-template-status__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .28rem .65rem;
  font-size: .73rem;
  font-weight: 700;
}
.preview-template-status__chip--quickbooks {
  background: rgba(3, 133, 255, .1);
  color: #0f4c81;
}
.preview-template-status__chip--adp {
  background: rgba(111, 84, 255, .12);
  color: #5b3fd0;
}
.preview-template-status__chip--professional {
  background: rgba(15, 23, 42, .08);
  color: #1e293b;
}
#pdfPages {
  transform-origin: top center;
  transition: none;
  will-change: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
#pdfPages canvas {
  display: block;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 16px -2px rgba(0,0,0,.06),
    0 32px 64px -12px rgba(0,0,0,.1),
    0 64px 120px -20px rgba(0,0,0,.14);
}
.preview-popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
}
.preview-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.58);
}
.preview-popup__dialog {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.38);
  box-shadow: 0 24px 70px rgba(15,23,42,.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.preview-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(148,163,184,.25);
}
.preview-popup__header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}
.preview-popup__close {
  border: none;
  background: transparent;
  color: #475569;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}
#previewPopupPages {
  overflow: auto;
  padding: 1rem;
  background: #f8fafc;
}
@media (max-width: 700px) {
  .preview-popup__dialog {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    border-radius: 12px;
  }
  #previewPopupPages {
    padding: .65rem;
  }
}
.wiz-review-item span {
  font-size: .71rem;
  font-weight: 600;
  color: var(--muted);
  display: block;
  margin-bottom: .1rem;
}
.wiz-review-item strong { font-size: .88rem; color: var(--text); }
.wiz-preview-step {
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,.07);
  overflow: hidden;
  display: none;
}
.wiz-preview-actions {
  display: flex;
  gap: .75rem;
  padding: 1rem 1rem 1.2rem;
  border-top: 1px solid var(--border);
  margin-top: .5rem;
}
.wiz-preview-actions .btn-wiz-cart,
.wiz-preview-actions .btn-wiz-buynow { flex: 1; font-size: 1rem; padding: .85rem 1.2rem; }
.generator-panel {
  margin-top: .85rem;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafbfc;
}
.generator-panel--spacious {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 14px;
}
.generator-panel__title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .65rem;
}
.generator-panel__section { margin-top: .85rem; }
.form-label-note {
  color: #888;
}
.step-card-header__hint {
  font-weight: 400;
  font-size: .85rem;
  color: #95a5a6;
}
.ps-row--top-gap { margin-top: .8rem; }
.ps-row--flush-top { margin-top: 0; }
.ps-row--align-end { align-items: end; }
.ps-check-row--top-gap-sm { margin-top: .65rem; }
.ps-check-row--top-gap { margin-top: .8rem; }
.ps-check-row--top-gap-md { margin-top: .75rem; }
.ps-check-row--top-gap-lg { margin-top: 1rem; }
.ps-check-row--bottom-gap { margin-bottom: .75rem; }
.ps-field--section { margin-bottom: .9rem; }
.ps-field--compact { margin-bottom: .85rem; }
.ps-field--check-number {
  max-width: 220px;
  margin-bottom: .8rem;
}
.step-card--compact-gap { margin-bottom: .75rem; }
.generator-hire-date-row { margin-top: .5rem; }
.generator-inline-note {
  margin: 0 0 .85rem;
  font-size: .78rem;
  line-height: 1.5;
}
.generator-inline-note--warning {
  color: #e67e22;
}
.generator-warning {
  margin-top: .5rem;
  padding: .4rem .7rem;
  border-left: 3px solid #e67e22;
  border-radius: 5px;
  background: #fff8f0;
  color: #e67e22;
  font-size: .8rem;
}
.generator-local-note {
  padding-top: .35rem;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}
.generator-add-btn { margin-top: .65rem; }
.generator-ytd-grid { margin-top: .5rem; }
.generator-ytd-label {
  color: var(--muted);
  font-size: .78rem;
}
.generator-estimate-input {
  background: #f5f5f5;
  color: var(--muted);
}
.generator-onboard-copy {
  margin: 0 0 1rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--muted);
}
.generator-required {
  color: #e74c3c;
  font-size: .8rem;
}
.generator-email-input {
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: .5rem .75rem;
  font-size: .9rem;
  width: 100%;
  outline: none;
  background: #fafbfc;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.generator-email-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(110,193,130,.12);
}
.generator-consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
}
.generator-consent + .generator-consent { margin-top: .6rem; }
.generator-consent-check {
  margin-top: .15rem;
  flex-shrink: 0;
}
.generator-link-inline {
  color: var(--blue);
  margin: 0 .2rem;
}
.generator-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.generator-preview-nav {
  justify-content: center;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border);
}
.generator-preview-label {
  font-size: .82rem;
  color: #555;
}
.generator-spinner {
  padding: 2rem;
  text-align: center;
  color: #888;
  font-size: .85rem;
}
.generator-spinner--wide {
  padding: 3rem;
  font-size: .88rem;
}
.generator-preview-pages {
  padding: .75rem 1rem 0;
}
.preview-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .65rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: #f8f9fa;
  color: var(--text);
  font-size: .82rem;
}
.preview-summary-bar__price {
  color: var(--green);
  font-weight: 700;
}
.preview-error {
  margin: 0;
  color: #dc2626;
  font-size: .85rem;
  padding: 1rem;
}
.pdf-preview-canvas {
  width: 100%;
  pointer-events: none;
}
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .44);
  backdrop-filter: blur(4px);
  z-index: 79;
}
body.cart-panel-open {
  overflow: hidden;
}
.cart-panel {
  position: fixed;
  top: 66px;
  right: 0;
  bottom: 0;
  width: min(27.5rem, calc(100vw - 1rem));
  max-width: 100%;
  height: calc(100vh - 66px);
  height: calc(100dvh - 66px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at top right, rgba(3, 133, 255, .08), transparent 30%),
    rgba(255, 255, 255, .98);
  border-left: 1px solid rgba(148, 163, 184, .18);
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 80;
  font-size: .88rem;
}
.cart-panel.is-open {
  transform: translateX(0);
  box-shadow: -18px 0 38px rgba(15, 23, 42, .16);
}
.cart-panel__header,
.cart-panel__footer {
  padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) .95rem max(1rem, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.cart-panel__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: transparent;
  backdrop-filter: none;
}
.cart-panel__title { text-align: center; }
.cart-panel__title {
  margin: 0;
  font-size: 1.06rem;
  font-family: var(--font-display);
  color: #0f172a;
}
.cart-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .88);
  font-size: 1.2rem;
  color: var(--muted);
  cursor: pointer;
}
.cart-panel__close:hover {
  color: var(--blue);
  border-color: rgba(3, 133, 255, .18);
  background: rgba(3, 133, 255, .08);
}
.cart-panel__items {
  flex: 1;
  overflow-y: auto;
  padding: 1rem max(1rem, env(safe-area-inset-right, 0px)) 1rem max(1rem, env(safe-area-inset-left, 0px));
}
.cart-panel__footer {
  border-top: 1px solid rgba(148, 163, 184, .16);
  border-bottom: none;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
  padding-bottom: calc(.95rem + env(safe-area-inset-bottom, 0px));
}
.cart-panel__meta-row,
.cart-panel__total-row,
.cart-panel__discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.cart-panel__meta-row { margin-bottom: .85rem; }
.cart-panel__meta {
  color: #475569;
  font-size: .83rem;
  font-weight: 600;
}
.cart-panel__meta--global-note {
  display: block;
  margin: .85rem 0 1rem;
  line-height: 1.55;
}
.cart-panel__promo-row {
  display: flex;
  gap: .6rem;
}
.cart-panel__clear,
.cart-panel__promo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: .85rem;
  background: #fff;
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.cart-panel__clear {
  padding: .55rem .85rem;
  font-size: .8rem;
}
.cart-panel__promo-input {
  flex: 1;
  min-width: 0;
  min-height: var(--site-touch-target);
  border: 1.5px solid var(--border);
  border-radius: .85rem;
  background: rgba(255, 255, 255, .92);
  padding: .7rem .9rem;
  font: inherit;
  color: var(--text);
}
.cart-panel__promo-btn {
  padding: .65rem .95rem;
}
.cart-panel__clear:hover,
.cart-panel__promo-btn:hover {
  border-color: rgba(3, 133, 255, .2);
  background: rgba(3, 133, 255, .08);
  color: var(--blue-dk);
  transform: translateY(-1px);
}
.cart-panel__promo-message {
  min-height: 1.25rem;
  margin: .45rem 0 .6rem;
  font-size: .82rem;
}
.cart-panel__promo-message.is-success { color: #27ae60; }
.cart-panel__promo-message.is-error { color: #e74c3c; }
.cart-panel__discount-row[hidden] { display: none; }
.cart-panel__discount-amount,
.cart-panel__total-value,
.cart-item__price {
  color: var(--green);
  font-weight: 700;
}
.cart-panel__total-row {
  margin-top: .3rem;
  padding-top: .65rem;
  border-top: 1px solid var(--border);
}
.cart-panel__total-label {
  font-size: .92rem;
  font-weight: 700;
}
.cart-panel__checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: .9rem;
  min-height: var(--site-touch-target);
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue), #36a2ff);
  color: #fff;
  box-shadow: 0 18px 32px rgba(3, 133, 255, .2);
  font-size: .96rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}
.cart-panel__checkout:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--blue-dk), var(--blue));
  box-shadow: 0 20px 36px rgba(3, 133, 255, .24);
  transform: translateY(-1px);
}
.cart-panel__checkout:disabled {
  cursor: not-allowed;
  opacity: .62;
  box-shadow: none;
}
.cart-empty {
  text-align: center;
  color: var(--muted);
  padding: 3rem 1rem;
}
.cart-item {
  margin-bottom: .7rem;
  padding: 1rem 1rem .95rem;
  border: 1px solid rgba(148, 163, 184, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}
.cart-item.is-editing {
  border-color: rgba(3, 133, 255, .25);
  box-shadow: 0 0 0 1px rgba(3, 133, 255, .18), 0 14px 28px rgba(3, 133, 255, .12);
}
.cart-item__header,
.cart-item__footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
}
.cart-item__content {
  flex: 1;
  min-width: 0;
}
.cart-item__title {
  margin: 0 0 .15rem;
  font-size: .98rem;
  font-weight: 800;
  color: #0f172a;
}
.cart-item__meta {
  margin: 0;
  font-size: .83rem;
  color: #64748b;
}
.cart-item__meta strong { color: var(--text); }
.cart-item__actions {
  display: flex;
  gap: .3rem;
  flex-shrink: 0;
}
.cart-item__edit {
  background: rgba(3, 133, 255, .08);
  border: 1px solid rgba(3, 133, 255, .16);
  color: var(--blue);
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: .75rem;
  padding: .42rem .7rem;
  line-height: 1.4;
}
.cart-item__edit:hover {
  background: rgba(3, 133, 255, .14);
  color: var(--blue-dk);
}
.cart-item__remove {
  background: rgba(248, 250, 252, .96);
  border: 1px solid rgba(148, 163, 184, .16);
  color: #e74c3c;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: .4rem .55rem;
  border-radius: .75rem;
}
.cart-item__footer {
  align-items: center;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(148, 163, 184, .14);
}
.cart-item__details {
  font-size: .82rem;
  color: #475569;
}
.payment-modal {
  position: fixed;
  inset: 0;
  z-index: 81;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(6px);
}
.payment-modal__dialog {
  width: min(40rem, 100%);
  max-height: min(90vh, 48rem);
  overflow: auto;
  background: #fff;
  border-radius: 1rem;
  padding: 1.2rem;
  box-shadow: 0 22px 48px rgba(15,23,42,.2);
}
.payment-modal__title {
  margin: 0 0 .9rem;
  font-size: 1.18rem;
}
.payment-modal__summary { margin-bottom: 1rem; }
.payment-modal__element {
  margin-bottom: .85rem;
}
.payment-modal__error {
  min-height: 1.2rem;
  color: #dc2626;
  font-size: .84rem;
  margin-bottom: .85rem;
}
.payment-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
}
.payment-modal__pay,
.payment-modal__cancel {
  min-height: 2.75rem;
  padding: .7rem 1rem;
  border-radius: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.payment-modal__pay {
  border: none;
  background: var(--green);
  color: #fff;
}
.payment-modal__cancel {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
}
.wiz-review-item__price {
  color: var(--green);
  font-weight: 700;
}
.payment-summary-table__total {
  font-weight: 800;
  font-size: 1rem;
}
#wizPreviewPages {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#wizPreviewPages canvas {
  display: block;
  margin: 0 auto 1rem;
  max-width: 100%;
}
.preview-blur-hint {
  display: none;
  text-align: center;
  font-size: .72rem;
  color: var(--muted);
  margin-top: .35rem;
  padding: .2rem .5rem;
}
html[data-theme='dark'] {
  color-scheme: dark;
  --foreground: 210 40% 96%;
  --muted-hsl: 222 30% 13%;
  --muted-foreground: 215 22% 78%;
  --border-hsl: 217 24% 22%;
  --text: hsl(var(--foreground));
  --heading: #f8fafc;
  --text-secondary: #cbd5e1;
  --muted: hsl(var(--muted-foreground));
  --bg: #0a111f;
  --white: #0f172a;
  --shadow-elev-1: 0 0 0 1px rgba(255, 255, 255, .04), 0 16px 34px rgba(2, 6, 23, .30), 0 34px 72px rgba(2, 6, 23, .42);
  --shadow-elev-2: 0 0 0 1px rgba(255, 255, 255, .04), 0 12px 28px rgba(2, 6, 23, .26), 0 26px 56px rgba(2, 6, 23, .36);
}
html[data-theme='dark'] body {
  color: #e5edf7;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.404), rgba(10, 17, 31, 0.404)),
  var(--surface) !important;
  box-shadow: var(--shadow-glass) !important;
}
body.shell-storefront {
  background: var(--bg, #010309);
}
html[data-theme='light'] body.shell-storefront {
  background: var(--bg, #fdfdfe);
}
html[data-theme='dark'] .ps-header {
  background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
  border-bottom-color: rgba(148, 163, 184, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 18px 42px rgba(2, 6, 23, .32);
}
html[data-theme='dark'] .ps-header--admin,
html[data-theme='dark'] .ps-header--account,
html[data-theme='dark'] .ps-header--utility {
  background: var(--surface);
  border-bottom-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .shell-storefront .ps-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
html[data-theme='dark'] .ps-header-context,
html[data-theme='dark'] .ps-footer,
html[data-theme='dark'] .ps-footer-links a,
html[data-theme='dark'] .cart-panel__title,
html[data-theme='dark'] .cart-item__title,
html[data-theme='dark'] .payment-modal__title,
html[data-theme='dark'] .payment-summary-table__total {
  color: #f8fafc;
}
html[data-theme='dark'] .ps-footer,
html[data-theme='dark'] .shell-account .ps-footer,
html[data-theme='dark'] .shell-admin .ps-footer {
  background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
  border-top-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .ps-footer-links a + a,
html[data-theme='dark'] .shell-account .ps-footer-links a + a,
html[data-theme='dark'] .shell-admin .ps-footer-links a + a {
  border-left-color: rgba(148, 163, 184, .18);
}
html[data-theme='dark'] .ps-alert {
  background: rgba(239, 68, 68, .12);
  border-left-color: #f87171;
  color: #fca5a5;
}
html[data-theme='dark'] .ps-footer-copy, html[data-theme='dark'] .cart-panel__meta, html[data-theme='dark'] .cart-panel__meta--global-note, html[data-theme='dark'] .cart-empty, html[data-theme='dark'] .cart-item__meta, html[data-theme='dark'] .cart-item__details, html[data-theme='dark'] .ps-field label, html[data-theme='dark'] .step-card-header__hint, html[data-theme='dark'] .doc-muted {
  color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .cart-panel, html[data-theme='dark'] .cart-panel__header, html[data-theme='dark'] .cart-panel__footer, html[data-theme='dark'] .cart-item, html[data-theme='dark'] .payment-modal__dialog, html[data-theme='dark'] .preview-summary-bar {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(15, 23, 42, .78);
  box-shadow: 0 18px 40px rgba(2, 6, 23, .24);
}
html[data-theme='dark'] .btn-acc-secondary {
  background: rgba(30, 41, 59, .72);
  color: #93c5fd;
  border-color: rgba(148, 163, 184, .22);
}
html[data-theme='dark'] .btn-acc-secondary:hover {
  background: rgba(30, 41, 59, .92);
  border-color: rgba(96, 165, 250, .36);
  color: #bfdbfe;
}
html[data-theme='dark'] .cart-panel__total-row, html[data-theme='dark'] .cart-item__footer {
  border-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .workspace-page-title h1,
html[data-theme='dark'] .account-side-card h2 {
  color: #f8fafc;
}
html[data-theme='dark'] .account-side-card__label {
  background: rgba(3, 133, 255, .14);
  color: #93c5fd;
}
html[data-theme='dark'] .success-list {
  color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .ps-field input, html[data-theme='dark'] .ps-field select, html[data-theme='dark'] .ps-field textarea, html[data-theme='dark'] .ps-check-row+div input, html[data-theme='dark'] .cart-panel__promo-input, html[data-theme='dark'] .cart-panel__clear, html[data-theme='dark'] .cart-panel__promo-btn, html[data-theme='dark'] .cart-panel__close, html[data-theme='dark'] .payment-modal__cancel, html[data-theme='dark'] .cart-item__remove {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .70);
  color: #f8fafc;
}
html[data-theme='dark'] .ps-field input::placeholder,
html[data-theme='dark'] .ps-field textarea::placeholder {
  color: rgba(226, 232, 240, .42);
}
html[data-theme='dark'] .payment-modal__cancel,
html[data-theme='dark'] .cart-panel__clear,
html[data-theme='dark'] .cart-panel__promo-btn,
html[data-theme='dark'] .cart-panel__close {
  color: #cbd5e1;
}
html[data-theme='dark'] .cart-item__remove {
  color: #fca5a5;
}
html[data-theme='dark'] .cart-panel__clear:hover,
html[data-theme='dark'] .cart-panel__promo-btn:hover,
html[data-theme='dark'] .cart-panel__close:hover {
  color: #93c5fd;
  background: rgba(30, 41, 59, .92);
}
html[data-theme='dark'] .cart-panel__discount-amount, html[data-theme='dark'] .cart-panel__total-value, html[data-theme='dark'] .cart-item__price {
  color: #7dd3fc;
}
html[data-theme='dark'] .wiz-progress-wrap {
  background: transparent;
}
html[data-theme='dark'] .wiz-progress::before {
  background: rgba(148, 163, 184, .24);
}
html[data-theme='dark'] .form-label-note, html[data-theme='dark'] .generator-inline-note, html[data-theme='dark'] .generator-local-note, html[data-theme='dark'] .generator-onboard-copy, html[data-theme='dark'] .preview-template-status__eyebrow, html[data-theme='dark'] .wiz-review-item span {
  color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .generator-panel, html[data-theme='dark'] .tmpl-card, html[data-theme='dark'] .acc-item, html[data-theme='dark'] .preview-template-toggle, html[data-theme='dark'] .local-tax-toggle {
  border-color: rgba(148, 163, 184, .16);
  background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
  color: #e5edf7;
  box-shadow: 0 18px 40px rgba(2, 6, 23, .24);
}
html[data-theme='dark'] .tmpl-card__frame {
  border-color: rgba(148, 163, 184, .16);
  background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
  box-shadow: 0 18px 40px rgba(2, 6, 23, .28);
}
html[data-theme='dark'] .tmpl-card__title, html[data-theme='dark'] .preview-template-status__name, html[data-theme='dark'] .generator-panel__title, html[data-theme='dark'] .wiz-review-item strong, html[data-theme='dark'] .acc-header, html[data-theme='dark'] .acc-num, html[data-theme='dark'] .local-tax-toggle {
  color: #f8fafc;
}
html[data-theme='dark'] .tmpl-card__subtitle, html[data-theme='dark'] .acc-chevron, html[data-theme='dark'] .acc-date, html[data-theme='dark'] .li-header, html[data-theme='dark'] .li-header.li-ded, html[data-theme='dark'] .generator-ytd-label {
  color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .tmpl-card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 20px 44px rgba(2, 6, 23, .28);
}
html[data-theme='dark'] .tmpl-card:hover {
  border-color: rgba(96, 165, 250, .42);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .12), 0 24px 48px rgba(2, 6, 23, .34);
}
html[data-theme='dark'] .acc-header {
  background: rgba(30, 41, 59, .72);
}
html[data-theme='dark'] .acc-item.acc-open .acc-header,
html[data-theme='dark'] .acc-header:hover,
html[data-theme='dark'] .acc-item.acc-open .acc-header:hover {
  background: rgba(37, 52, 77, .88);
}
html[data-theme='dark'] .acc-date {
  background: rgba(15, 23, 42, .9);
}
html[data-theme='dark'] .acc-item.acc-open .acc-date {
  background: rgba(3, 133, 255, .16);
  color: #93c5fd;
}
html[data-theme='dark'] .acc-body,
html[data-theme='dark'] .wiz-preview-actions {
  border-top-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .li-row input, html[data-theme='dark'] .generator-email-input, html[data-theme='dark'] .generator-estimate-input {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .78);
  color: #f8fafc;
}
html[data-theme='dark'] .li-row input:focus,
html[data-theme='dark'] .generator-email-input:focus {
  background: rgba(15, 23, 42, .94);
}
html[data-theme='dark'] .generator-warning {
  border-left-color: #fb923c;
  background: rgba(251, 146, 60, .12);
  color: #fdba74;
}
html[data-theme='dark'] #pdfPages canvas {
  border-color: rgba(96, 165, 250, .34);
  box-shadow: 0 18px 40px rgba(2, 6, 23, .3);
}
@media (max-width: 768px) {
  html {
    font-size: 17px;
  }
  body {
    font-size: 15.5px;
  }
  .ps-header {
    padding-inline: 1rem;
  }
  .ps-footer-links a, .ps-footer-copy, .ps-field label, .cart-item__meta, .cart-item__details, .step-card-header__hint, .doc-muted {
    font-size: .84rem;
  }
  .btn-acc-primary,
  .btn-acc-secondary,
  .payment-modal__pay,
  .payment-modal__cancel,
  .cart-panel__checkout,
  .cart-panel__clear,
  .cart-panel__promo-btn,
  .cart-item__edit,
  .cart-item__remove {
    min-height: 52px;
    padding: .82rem 1rem;
    font-size: .98rem;
    line-height: 1.15;
    border-radius: 14px;
  }
}
.content-shell,
.article-shell,
.admin-shell {
  width: 100%;
  max-width: var(--site-container);
  margin: 0 auto;
  padding: var(--site-shell-y) var(--site-gutter-x) clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
  min-width: 0;
}
.market-hero,
.content-hero {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.35rem, 2.6vw, 1.75rem);
  border-radius: 30px;
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: 0 30px 60px rgba(15, 23, 42, .08);
}
.market-hero {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  background: #fff;
}
.content-hero {
  background: #fff;
}
.market-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .42rem .82rem;
  border-radius: 999px;
  background: rgba(3, 133, 255, .08);
  color: var(--primary);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.market-hero h1,
.content-hero h1 {
  margin: .9rem 0 .7rem;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  max-width: 15ch;
}
.content-hero h1 {
  max-width: 18ch;
}
.market-subtitle,
.content-hero p {
  margin: 0;
  max-width: 66ch;
  color: #1e293b;
  font-size: 1.04rem;
  line-height: 1.85;
}
.market-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.1rem;
}
.market-cta-row a {
  min-height: var(--site-touch-target);
}
.tutorial-feature {
  display: grid;
  gap: 1rem;
}
.tutorial-feature__article {
  padding: 1.1rem;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, .18);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .08);
  background: rgba(255, 255, 255, .86);
}
.market-section {
    --section-marker: var(--sf-grad-border, linear-gradient(90deg, var(--brand, #0385ff), var(--accent, #18b7ff), var(--brand, #0385ff)));
    margin: 0;
    width: 100%;
    min-width: 0;
    padding: 2.65rem 2.4rem 2.4rem;
    border-radius: 32px;
    border: 1px solid var(--border, rgba(148, 163, 184, .14));
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .10), 0 22px 46px rgba(15, 23, 42, .05), 0 52px 96px rgba(15, 23, 42, .06);
    position: relative;
    overflow: visible;
}
.market-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 18px;
  background: var(--section-marker);
  border-radius: 30px 30px 0 0;
  pointer-events: none;
}
.market-section--tutorials {
  --section-marker: linear-gradient(90deg, var(--accent, #18b7ff), var(--brand, #0385ff), color-mix(in srgb, var(--accent, #18b7ff) 68%, var(--brand, #0385ff) 32%));
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.7rem;
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.section-heading h2 {
  margin: .9rem 0 0;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.section-heading > p {
  margin: .1rem 0 0;
  max-width: none;
  width: 100%;
  color: #1e293b;
  line-height: 1.8;
  font-size: 1rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}
.section-heading--single {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.section-heading--single > div {
  max-width: none;
}
.section-heading__body-copy {
  margin: .9rem 0 0;
  max-width: none;
  width: 100%;
  color: #1e293b;
  line-height: 1.8;
  font-size: 1rem;
}
.editorial-grid {
  display: grid;
  gap: 1rem;
}
.market-carousel-card,
.tutorial-card,
.tutorial-overview-card,
.editorial-card,
.editorial-feature,
.review-card {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, .14);
  border-radius: 26px;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, .10), 0 14px 30px rgba(15, 23, 42, .045), 0 32px 62px rgba(15, 23, 42, .05);
  padding-top: 1.35rem;
}
.market-carousel-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: visible;
  overflow-y: visible;
  padding: .35rem 0 .55rem;
  margin: 0;
}
.market-carousel-controls {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
}
.market-carousel-control {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.market-carousel-control:hover {
  transform: translateY(-1px);
  border-color: rgba(3, 133, 255, .28);
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
}
.market-carousel-control span {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}
.market-carousel {
  --carousel-gap: 1.15rem;
  --carousel-side-pad: 1.05rem;
  --carousel-edge-gutter: .42rem;
  --carousel-visible: 3;
  --carousel-card-width: calc((100% - (var(--carousel-gap) * (var(--carousel-visible) - 1))) / var(--carousel-visible));
  display: flex;
  align-items: stretch;
  gap: var(--carousel-gap);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .55rem calc(var(--carousel-side-pad) + var(--carousel-edge-gutter)) 1.25rem var(--carousel-side-pad);
  margin: 0;
  scroll-padding-left: var(--carousel-side-pad);
  scroll-padding-right: calc(var(--carousel-side-pad) + var(--carousel-edge-gutter));
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--carousel-side-pad),
    #000 calc(100% - (var(--carousel-side-pad) + var(--carousel-edge-gutter))),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--carousel-side-pad),
    #000 calc(100% - (var(--carousel-side-pad) + var(--carousel-edge-gutter))),
    transparent 100%
  );
}
.market-carousel > * {
  flex: 0 0 var(--carousel-card-width);
  scroll-snap-align: start;
  min-width: 0;
  max-width: var(--carousel-card-width);
}
.market-carousel::-webkit-scrollbar {
  display: none;
}
.market-carousel-card {
  width: 100%;
  overflow: visible;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, .07),
    0 2px 8px rgba(15, 23, 42, .04);
}
.editorial-card__body {
  padding: 1.3rem;
}
.editorial-card {
  overflow: visible;
}
.tutorial-card h3,
.editorial-card h3,
.editorial-feature h3,
.editorial-feature h2,
.article-sidebar strong {
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.review-card p,
.tutorial-card p,
.editorial-card p,
.editorial-feature p,
.tutorial-feature__article p {
  margin-top: .7rem;
  color: #1e293b;
  line-height: 1.8;
  font-size: .94rem;
}
.tutorial-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(3, 133, 255, .12);
  color: var(--blue);
  font-weight: 800;
  margin-bottom: .8rem;
}
.review-card {
  padding: 1.35rem;
  background: linear-gradient(180deg, #fff, #fbfdff);
  border-color: rgba(148, 163, 184, .14);
}
.review-card__top {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.review-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(3,133,255,.16), rgba(96,165,250,.16));
  color: #0f172a;
  font-weight: 800;
  font-size: .95rem;
}
.review-card__identity strong {
  display: block;
  color: #0f172a;
  font-size: .96rem;
}
.review-card__identity span {
  display: block;
  margin-top: .12rem;
  color: #64748b;
  font-size: .82rem;
}
.review-stars {
  color: #f59e0b;
  letter-spacing: .14em;
  font-size: .86rem;
  font-weight: 800;
  margin-top: 1rem;
}
.review-proof,
.editorial-meta {
  color: #64748b;
  font-size: .86rem;
  line-height: 1.6;
}
.review-proof {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid rgba(148,163,184,.16);
  font-weight: 600;
}
.tutorial-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .68rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.editorial-feature {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  overflow: visible;
  background: linear-gradient(180deg, #fff, #f9fbff);
  border-color: rgba(167, 139, 250, .14);
  box-shadow: 0 22px 54px rgba(15, 23, 42, .09);
}
.editorial-feature--page {
  margin-bottom: 0;
}
.editorial-feature__cover,
.editorial-card__cover {
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 22px 0 0 22px;
}
.editorial-feature__cover img,
.editorial-card__cover img,
.tutorial-feature__article img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editorial-feature__copy {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}
.editorial-feature__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .8rem;
  padding: .36rem .68rem;
  border-radius: 999px;
  background: rgba(3,133,255,.09);
  color: var(--blue);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.editorial-feature__copy h3 a,
.editorial-feature__copy h2 a,
.editorial-card h3 a {
  color: inherit;
  text-decoration: none;
}
.editorial-feature__flag {
  order: 1;
  align-self: flex-start;
}
.editorial-feature__copy h2,
.editorial-feature__copy h3,
.editorial-card__body h3 {
  order: 2;
}
.editorial-feature__copy .editorial-meta,
.editorial-card__body .editorial-meta {
  order: 3;
  margin-top: .6rem;
}
.editorial-feature__copy .market-chip-row,
.editorial-card__body .market-chip-row {
  order: 4;
  margin: .95rem 0 1rem;
  padding: .85rem 0 1rem;
  border-top: 1px solid rgba(148, 163, 184, .16);
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.editorial-feature__copy .market-chip,
.editorial-card__body .market-chip {
  background: rgba(248, 250, 252, .96);
  border: 1px solid rgba(148, 163, 184, .18);
  color: #516276;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.editorial-feature__copy > p,
.editorial-card__body > p {
  order: 5;
  margin-top: 0;
}
.editorial-feature__copy .market-cta-row,
.editorial-card__body .editorial-card__link {
  order: 6;
}
.editorial-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.3rem;
}
.editorial-grid--full {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 1.7rem;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.9));
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 22px 48px rgba(15,23,42,.06);
}
.editorial-divider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
  gap: 1rem;
  align-items: end;
  margin: 1.65rem 0 1.15rem;
  padding: 0 .15rem;
}
.editorial-divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .45rem;
  padding: .34rem .7rem;
  border-radius: 999px;
  background: rgba(3, 133, 255, .09);
  color: var(--blue);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.editorial-divider strong {
  display: block;
  color: #0f172a;
  font-size: 1.08rem;
  line-height: 1.2;
}
.editorial-divider p {
  margin: 0;
  color: #334155;
  font-size: .94rem;
  line-height: 1.8;
}
.editorial-divider--page {
  margin: .35rem 0 1.35rem;
}
.editorial-card--blog .editorial-card__cover {
  aspect-ratio: 16 / 9;
  border-radius: 22px 22px 0 0;
}
.market-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.market-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .34rem .68rem;
  border-radius: 999px;
  background: rgba(3, 133, 255, .09);
  color: var(--blue);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
}
.market-chip--active {
  background: var(--blue);
  color: #fff;
}
.content-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-top: 1.3rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(148, 163, 184, .14);
}
.market-inline-cta {
  --sf-accent-section-heading: #0b2342;
  --sf-accent-section-muted: #1b3b5f;
  --sf-accent-section-kicker-bg: rgba(255, 255, 255, .72);
  --sf-accent-section-kicker-text: #0f4c81;
  --sf-accent-section-card: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .68));
  --sf-accent-section-border: rgba(125, 211, 252, .42);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.8rem 2rem;
  border-radius: 30px;
  border: 1px solid rgba(125, 211, 252, .42);
  background: linear-gradient(130deg, #ecfeff 0%, #dbeafe 52%, #e0f2fe 100%);
  box-shadow: 0 28px 68px rgba(15, 23, 42, .12);
}
.market-inline-cta h2 {
  margin: .7rem 0 0;
  color: var(--sf-accent-section-heading, #fff);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.5vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}
.market-inline-cta p {
  margin-top: .8rem;
  max-width: 60ch;
  color: var(--sf-accent-section-muted, rgba(255,255,255,.84));
  line-height: 1.8;
}
.market-inline-cta .market-kicker {
  background: var(--sf-accent-section-kicker-bg, rgba(255,255,255,.14));
  color: var(--sf-accent-section-kicker-text, #fff);
}
.paystub-explainer-inner {
  max-width: none;
  margin: 0 auto;
  padding: 2.4rem var(--site-gutter-x) 2.2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 1.25rem;
  align-items: stretch;
}
.paystub-purpose-grid {
  display: grid;
  gap: 1rem;
}
.paystub-purpose-card {
  display: grid;
  gap: .9rem;
  padding: 1.15rem 1.2rem;
  border-radius: 24px;
  background: var(--sf-accent-section-card, linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08)));
  border: 1px solid var(--sf-accent-section-border, rgba(191, 219, 254, .16));
  box-shadow: 0 14px 30px rgba(4, 17, 45, .18), 0 32px 54px rgba(4, 17, 45, .12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.paystub-purpose-card strong {
  color: var(--sf-accent-section-heading, #fff);
  font-size: 1rem;
  letter-spacing: -.02em;
}
.paystub-purpose-card ul {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: .6rem;
}
.paystub-purpose-card li {
  color: var(--sf-accent-section-muted, rgba(255, 255, 255, .88));
  line-height: 1.6;
}
.article-topmatter {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.article-topmatter h1 {
  margin: .2rem 0 0;
  color: #0f172a;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.05em;
  max-width: 16ch;
}
.article-topmatter__summary {
  margin: 0;
  max-width: 68ch;
  color: #475569;
  font-size: 1.06rem;
  line-height: 1.86;
}
.article-cover-image {
  display: block;
  width: min(100%, 760px);
  max-width: 100%;
  height: auto;
  border-radius: 26px;
  margin: -.25rem auto 0;
  box-shadow: 0 22px 48px rgba(15, 23, 42, .08);
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr);
  gap: 1rem;
  margin-top: 1.6rem;
}
.article-content {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.article-problem-panel,
.article-key-takeaways-panel,
.article-toc-panel,
.article-conclusion-panel {
  padding: 1.15rem 0 1.2rem;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  box-shadow: none;
  background: transparent;
}
.article-content > .article-problem-panel,
.article-content > .article-key-takeaways-panel,
.article-content > .article-toc-panel,
.article-content > .article-resource-strip {
  margin-bottom: 1rem;
}
.article-problem-panel h2,
.article-toc-panel h2,
.article-conclusion-panel h2 {
  margin: .8rem 0 .6rem;
}
.article-problem-list,
.article-key-takeaways-list {
  margin: .9rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
}
.article-problem-list li,
.article-key-takeaways-list li {
  color: #334155;
  line-height: 1.72;
}
.article-key-takeaways-list li::marker {
  color: #0385ff;
}
/* `.article-toc-list*` rules removed — owned by `blog-editorial.css` (mockup). */
.article-resource-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .1rem 0 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.article-content h2[id],
.article-key-takeaways-panel[id],
.article-conclusion-panel[id] {
  scroll-margin-top: 7rem;
}
.article-content h2,
.article-content h3 {
  margin: 1.2rem 0 .65rem;
  color: #0f172a;
  line-height: 1.16;
}
.article-content p,
.article-content li {
  color: #334155;
  line-height: 1.85;
}
.article-content p + p,
.article-content ul + p,
.article-content ol + p {
  margin-top: .95rem;
}
.article-content ul,
.article-content ol {
  padding-left: 1.15rem;
  margin-top: .85rem;
}
.article-content blockquote {
  margin: 1rem 0;
  padding: .95rem 1rem;
  border-left: 4px solid var(--blue);
  border-radius: 14px;
  background: rgba(3, 133, 255, .06);
  color: #0f172a;
}
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  margin: 1rem 0;
}
.article-content code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.article-content code {
  padding: .15rem .35rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, .06);
}
.article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
.article-content th,
.article-content td {
  padding: .7rem .75rem;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
  text-align: left;
}
/* `.article-sidebar` rule removed — owned by `blog-editorial.css` (mockup):
   `display:flex; flex-direction:column; gap:var(--space-md);
    position:sticky; top:24px;`. Removing the legacy duplicate avoids a
   specificity tie that fights the mockup. */
.article-sidebar-panel {
  /* Flat sidebar column — see site.shells.css for rationale. */
  display: block;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.article-sidebar-panel strong {
  color: #0f172a;
}
.article-sidebar-panel p {
  margin: 0;
  color: #475569;
  line-height: 1.72;
}
.article-sidebar-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: .75rem;
}
.article-related-section,
.article-faq-section {
  margin-top: 1.2rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(148, 163, 184, .16);
}
.article-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.article-section-heading h2 {
  margin: .35rem 0 0;
  color: #0f172a;
}
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.article-related-card {
  display: grid;
  gap: .85rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.article-related-card__cover {
  display: block;
  overflow: hidden;
  border-radius: 20px;
}
.article-related-card__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.article-related-card__body {
  display: grid;
  gap: .55rem;
}
.article-related-card__body h3 {
  margin: 0;
  color: #0f172a;
  font-size: 1.06rem;
  line-height: 1.28;
}
.article-related-card__body h3 a {
  color: inherit;
  text-decoration: none;
}
.article-related-card__body h3 a:hover {
  color: var(--blue);
}
.article-related-card__body p {
  margin: 0;
  color: #475569;
  line-height: 1.72;
}
.article-faq-list {
  display: grid;
  gap: .85rem;
}
.article-faq-item {
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.article-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .2rem 0 .95rem;
  cursor: pointer;
  list-style: none;
}
.article-faq-item summary::-webkit-details-marker {
  display: none;
}
.article-faq-item summary span:first-child {
  color: #0f172a;
  font-weight: 700;
  line-height: 1.45;
}
.article-faq-item__icon {
  color: var(--blue);
  font-size: 1.2rem;
  font-weight: 700;
  transition: transform .2s ease;
}
.article-faq-item[open] .article-faq-item__icon {
  transform: rotate(45deg);
}
.article-faq-item__body {
  padding: 0 0 1rem;
}
.article-faq-item__body p {
  margin: 0;
  color: #475569;
  line-height: 1.75;
}
.market-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #f8fafc;
  color: #0f172a;
  padding: .78rem .9rem;
  font-size: .9rem;
  line-height: 1.55;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.market-input:focus {
  outline: none;
  border-color: rgba(3, 133, 255, .55);
  box-shadow: 0 0 0 4px rgba(3, 133, 255, .12);
  background: #fff;
}
.tutorial-feature {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
  align-items: start;
  padding: 1.45rem;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,250,255,.9));
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 22px 48px rgba(15,23,42,.06);
}
.tutorial-feature__rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.tutorial-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 1.2rem;
}
.tutorial-overview-card {
  padding: 1.05rem 1.1rem;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.92));
  border: 1px solid rgba(148, 163, 184, .16);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .05);
}
.tutorial-overview-card strong {
  display: block;
  color: #0f172a;
  font-size: .96rem;
}
.tutorial-overview-card p {
  margin: .48rem 0 0;
  color: #5b6b7f;
  font-size: .86rem;
  line-height: 1.75;
}
.tutorial-card {
  padding: 1.25rem;
}
.tutorial-feature__article {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}
.tutorial-feature__article img {
  border-radius: 18px;
  min-height: 220px;
  max-height: 280px;
}
.admin-shell {
  max-width: var(--site-container-wide);
}
.admin-shell--workspace-content {
  width: 100%;
  max-width: calc(var(--site-container-wide) - var(--site-admin-sidebar-width));
  padding: 0;
  margin: 0 auto;
}
.editorial-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: .95rem;
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}
.editorial-card__link:hover {
  color: var(--green);
}
.admin-workspace {
  --site-active-admin-sidebar-width: var(--site-admin-sidebar-width);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--site-active-admin-sidebar-width) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 100vh;
}
.admin-workspace:has(.workspace-sidebar.is-compact) {
  --site-active-admin-sidebar-width: var(--site-admin-sidebar-compact-width);
}
.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .85rem 0 0;
  min-height: 100vh;
  align-self: stretch;
  border-radius: 0;
  border: 0;
  border-right: 1px solid rgba(148, 163, 184, .16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.98) 46%, rgba(243,247,253,.98) 100%);
  box-shadow: 16px 0 38px rgba(15, 23, 42, .07), 4px 0 14px rgba(15, 23, 42, .05);
  overflow: hidden;
  align-content: flex-start;
}
.admin-sidebar__nav,
.admin-sidebar__footer {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.admin-sidebar__nav {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: .4rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(3, 133, 255, .42) rgba(226, 232, 240, .52);
}
.admin-sidebar__nav::-webkit-scrollbar {
  width: 10px;
}
.admin-sidebar__nav::-webkit-scrollbar-track {
  background: rgba(226, 232, 240, .52);
  border-radius: 999px;
}
.admin-sidebar__nav::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(89, 178, 255, .9), rgba(3, 133, 255, .9));
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .72);
}
.admin-sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(68, 164, 255, .96), rgba(2, 118, 232, .96));
}
.workspace-sidebar__top {
  padding: 0 .85rem;
}
.workspace-sidebar__brand-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: center;
}
.workspace-sidebar__size-toggle,
.workspace-sidebar__mobile-launcher {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(255, 255, 255, .84);
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.workspace-sidebar__size-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.workspace-sidebar__size-toggle:hover,
.workspace-sidebar__mobile-launcher:hover {
  transform: translateY(-1px);
  border-color: rgba(3, 133, 255, .22);
}
.workspace-sidebar__size-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.workspace-sidebar__mobile-launcher {
  display: none;
  position: sticky;
  top: calc(66px + .85rem);
  z-index: 1200;
  width: fit-content;
  margin: .85rem 1rem 0 auto;
  padding: .72rem .95rem;
  border-radius: 14px;
  align-items: center;
  gap: .55rem;
  box-shadow: 0 14px 28px rgba(15, 23, 42, .16);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.workspace-sidebar__mobile-launcher svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.workspace-sidebar__brand {
  display: grid;
  grid-template-columns: 1fr;
  gap: .45rem;
  align-items: center;
  text-decoration: none;
}
.workspace-sidebar__brand-image {
  display: block;
  width: min(100%, 232px);
  height: auto;
  object-fit: contain;
}
.workspace-sidebar__brand-copy strong,
.workspace-account-menu__meta strong {
  display: block;
  color: #0f172a;
}
.workspace-sidebar__brand-copy--stack {
  display: grid;
  gap: 0;
}
.workspace-sidebar__brand-copy small,
.workspace-account-menu__meta small {
  display: block;
  margin-top: 0;
  color: #64748b;
  font-size: .78rem;
  line-height: 1.5;
}
.admin-sidebar__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: .36rem .72rem;
  border-radius: 999px;
  background: rgba(3, 133, 255, .09);
  color: var(--blue);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-sidebar__label {
  background: transparent;
  color: #64748b;
  padding: 0;
  border-radius: 0;
  margin: 0 1rem .35rem;
  justify-content: flex-start;
  font-size: .68rem;
}
.workspace-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: .4rem;
}
.workspace-sidebar__group + .workspace-sidebar__group {
  margin-top: .75rem;
}
.workspace-sidebar__group-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.admin-sidebar__section-toggle {
  width: calc(100% - 2rem);
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-sidebar__section-toggle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform .18s ease;
}
.workspace-sidebar__group.is-collapsed .admin-sidebar__section-toggle svg {
  transform: rotate(-90deg);
}
.workspace-sidebar__group.is-collapsed .workspace-sidebar__group-body {
  display: none;
}
.admin-sidebar__link {
  display: flex;
  align-items: center;
  gap: .82rem;
  position: relative;
  width: 100%;
  min-height: 42px;
  padding: .48rem .95rem .48rem 1.35rem;
  border-radius: 0;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
  color: #243447;
  font-size: .9rem;
  font-weight: 700;
}
.workspace-sidebar__link-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: .82;
}
.workspace-sidebar__link-label {
  display: block;
  min-width: 0;
}
.admin-sidebar__link:hover {
  transform: none;
  border-left-color: rgba(3, 133, 255, .22);
  background: rgba(3, 133, 255, .04);
  box-shadow: none;
}
.admin-sidebar__link.is-active {
  border-left-color: var(--blue);
  background: linear-gradient(90deg, rgba(3, 133, 255, .08), rgba(3, 133, 255, .02) 72%, transparent);
  box-shadow: none;
}
.admin-sidebar__footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding: .75rem .85rem .9rem;
  border-top: 1px solid rgba(148, 163, 184, .18);
}
.workspace-account-menu {
  display: grid;
}
.workspace-account-menu__summary {
  list-style: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  cursor: pointer;
}
.workspace-account-menu__summary::-webkit-details-marker {
  display: none;
}
.workspace-account-menu__avatar {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #0385ff 58%, #8b5cf6 100%);
  color: #fff;
  font-weight: 900;
}
.workspace-account-menu__panel {
  display: grid;
  gap: .12rem;
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(148, 163, 184, .16);
}
.workspace-account-menu__panel a {
  padding: .42rem 0;
  color: #334155;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
}
.workspace-account-menu__panel a:hover {
  color: var(--blue);
}
.admin-workspace__main {
  min-width: 0;
  max-width:48rem;
  padding: 1.35rem var(--site-gutter-x) 3rem;
}
.shell-account .admin-workspace__main {
  display: block;
}
.shell-account .admin-shell--workspace-content {
  max-width: calc(
    var(--site-container-wide)
    - var(--site-account-sidebar-width)
    - var(--site-account-workspace-gap)
  );
}
.shell-account main,
.shell-admin main {
  min-height: 100vh;
}
.workspace-sidebar.is-compact {
  width: 92px;
}
.workspace-sidebar.is-compact .workspace-sidebar__brand-copy,
.workspace-sidebar.is-compact .admin-sidebar__label span,
.workspace-sidebar.is-compact .admin-sidebar__section-toggle svg,
.workspace-sidebar.is-compact .workspace-account-menu__meta {
  display: none;
}
.workspace-sidebar.is-compact .workspace-sidebar__brand-image {
  width: 42px;
  margin: 0 auto;
}
.workspace-sidebar.is-compact .workspace-sidebar__brand-row,
.workspace-sidebar.is-compact .workspace-sidebar__top,
.workspace-sidebar.is-compact .admin-sidebar__footer {
  padding-left: .7rem;
  padding-right: .7rem;
}
.workspace-sidebar.is-compact .admin-sidebar__section-toggle {
  width: 100%;
  margin: 0;
  min-height: 28px;
}
.workspace-sidebar.is-compact .admin-sidebar__link {
  justify-content: center;
  padding-left: .6rem;
  padding-right: .6rem;
  min-height: 38px;
}
.workspace-sidebar.is-compact .admin-sidebar__link.is-active,
.workspace-sidebar.is-compact .admin-sidebar__link:hover {
  background: rgba(3, 133, 255, .07);
}
.workspace-sidebar.is-compact .workspace-sidebar__link-label {
  display: none;
}
.workspace-sidebar.is-compact .admin-sidebar__link::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + .75rem);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: .45rem .7rem;
  border-radius: 10px;
  background: rgba(15, 23, 42, .92);
  color: #f8fafc;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .24);
  transition: opacity .14s ease, transform .14s ease;
  z-index: 20;
}
.workspace-sidebar.is-compact .admin-sidebar__link:hover::after,
.workspace-sidebar.is-compact .admin-sidebar__link:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.workspace-sidebar.is-compact .workspace-account-menu__summary {
  grid-template-columns: 1fr;
  justify-items: center;
}
.workspace-sidebar.is-compact .workspace-account-menu__panel {
  display: none;
}
@media (max-width: 1024px) {
  .market-hero,
  .editorial-feature,
  .article-layout,
  .tutorial-feature,
  .tutorial-overview-grid,
  .section-heading,
  .editorial-grid,
  .editorial-grid--full {
    grid-template-columns: 1fr;
  }
  .market-carousel {
    --carousel-visible: 2;
    --carousel-side-pad: .9rem;
    padding: .45rem var(--carousel-side-pad) 1.1rem;
    scroll-padding-inline: var(--carousel-side-pad);
  }
  .market-inline-cta {
    grid-template-columns: 1fr;
  }
  .paystub-explainer-inner {
    grid-template-columns: 1fr;
    padding: 2rem 1.4rem 1.9rem;
  }
  .market-carousel-shell {
    padding: .3rem 0 .45rem;
    margin: 0;
  }
  .article-sidebar {
    position: static;
  }
  .editorial-feature__cover,
  .editorial-card__cover {
    border-radius: 22px 22px 0 0;
  }
  .editorial-divider,
  .section-heading {
    grid-template-columns: 1fr;
    margin: 1.35rem 0 1rem;
  }
  .admin-workspace {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .admin-shell--workspace-content,
  .shell-account .admin-shell--workspace-content {
    max-width: var(--site-container-wide);
  }
  .shell-account .admin-workspace__main {
    grid-template-columns: 1fr;
  }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1250;
    width: min(22rem, calc(100vw - 3rem));
    height: 100vh;
    min-height: 100vh;
    padding: .85rem 0 0;
    transform: translateX(calc(-100% - 1rem));
    transition: transform .22s ease;
  }
  .workspace-sidebar.is-mobile-open {
    transform: translateX(0);
  }
  .workspace-sidebar__mobile-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .workspace-sidebar__size-toggle {
    display: none;
  }
  .admin-workspace__main {
    padding: 1.15rem 1rem 2.6rem;
  }
  .admin-sidebar__footer {
    margin-top: auto;
  }
}
@media (max-width: 640px) {
  .workspace-sidebar__mobile-launcher {
    top: calc(66px + .65rem);
    margin-right: .85rem;
    padding: .68rem .88rem;
    border-radius: 12px;
    font-size: .88rem;
  }
}
@media (max-width: 768px) {
  .content-shell,
  .article-shell,
  .admin-shell {
    gap: 1.8rem;
  }
  .market-hero,
  .content-hero,
  .tutorial-feature,
  .editorial-grid--full {
    padding: 1.15rem;
    border-radius: 22px;
  }
  .market-hero h1,
  .content-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.6rem);
  }
  .article-topmatter h1 {
    font-size: clamp(2rem, 8vw, 3rem);
    max-width: 100%;
  }
  .article-cover-image {
    width: 100%;
    border-radius: 22px;
    margin-top: -.2rem;
  }
  .article-content,
  .article-problem-panel,
  .article-key-takeaways-panel,
  .article-toc-panel,
  .article-conclusion-panel {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
  }
  .article-related-grid {
    grid-template-columns: 1fr;
  }
  .article-section-heading {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: .85rem;
  }
  .article-sidebar-panel {
    padding: .95rem;
  }
  .market-section {
    padding: 1.2rem;
    border-radius: 22px;
  }
  .section-heading > p {
    font-size: .92rem;
  }
  .editorial-divider strong {
    font-size: 1rem;
  }
  .tutorial-feature__rail {
    grid-template-columns: 1fr;
  }
  .admin-workspace {
    padding: 0;
    gap: 1rem;
  }
  .admin-sidebar {
    border-radius: 0;
  }
  .admin-sidebar {
    padding: .85rem 0 0;
  }
}
html[data-theme='dark'] .content-shell,
html[data-theme='dark'] .article-shell,
html[data-theme='dark'] .admin-shell,
html[data-theme='dark'] .coming-soon-panel,
html[data-theme='dark'] .market-hero,
html[data-theme='dark'] .content-hero,
html[data-theme='dark'] .admin-sidebar,
html[data-theme='dark'] .workspace-account-menu__panel {
  border-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .market-hero,
html[data-theme='dark'] .content-hero,
html[data-theme='dark'] .coming-soon-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
  box-shadow: 0 20px 48px rgba(2, 6, 23, .28);
}
html[data-theme='dark'] .market-hero h1,
html[data-theme='dark'] .content-hero h1,
html[data-theme='dark'] .workspace-sidebar__brand-copy strong,
html[data-theme='dark'] .workspace-account-menu__meta strong,
html[data-theme='dark'] .workspace-sidebar__size-toggle,
html[data-theme='dark'] .workspace-sidebar__mobile-launcher,
html[data-theme='dark'] .admin-sidebar__link,
html[data-theme='dark'] .workspace-account-menu__panel a,
html[data-theme='dark'] .coming-soon-panel__title {
  color: #f8fafc;
}
html[data-theme='dark'] .market-subtitle,
html[data-theme='dark'] .content-hero p,
html[data-theme='dark'] .workspace-sidebar__brand-copy small,
html[data-theme='dark'] .workspace-account-menu__meta small,
html[data-theme='dark'] .admin-sidebar__label,
html[data-theme='dark'] .coming-soon-panel__copy {
  color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .admin-sidebar {
  background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
  box-shadow: 16px 0 38px rgba(2, 6, 23, .28), 4px 0 14px rgba(2, 6, 23, .22);
}
html[data-theme='dark'] .workspace-sidebar__size-toggle,
html[data-theme='dark'] .workspace-sidebar__mobile-launcher {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .9);
  box-shadow: 0 16px 32px rgba(2, 6, 23, .28);
}
html[data-theme='dark'] .admin-sidebar__footer,
html[data-theme='dark'] .workspace-account-menu__panel {
  border-top-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .admin-sidebar__link:hover,
html[data-theme='dark'] .workspace-account-menu__panel a:hover {
  background: rgba(30, 41, 59, .56);
  color: #93c5fd;
}
html[data-theme='dark'] .admin-sidebar__link.is-active {
  border-left-color: #60a5fa;
  background: linear-gradient(90deg, rgba(59, 130, 246, .20), rgba(59, 130, 246, .08) 72%, transparent);
  color: #bfdbfe;
}
html[data-theme='dark'] .content-hero__stat {
  background: rgba(30, 41, 59, .6);
  border-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .content-hero__stat strong {
  color: #f8fafc;
}
html[data-theme='dark'] .content-hero__stat span {
  color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .content-editorial-focus {
  background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
  border-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .content-editorial-focus__eyebrow {
  background: rgba(191, 219, 254, .14);
  color: #bfdbfe;
}
html[data-theme='dark'] .content-editorial-focus strong a {
  color: #f8fafc;
}
html[data-theme='dark'] .content-editorial-focus p {
  color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .editorial-divider strong {
  color: #f8fafc;
}
html[data-theme='dark'] .editorial-divider p {
  color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .editorial-divider span {
  background: rgba(3, 133, 255, .14);
  color: #93c5fd;
}
html[data-theme='dark'] .editorial-grid--full {
  background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
  border-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .editorial-feature__flag {
  background: rgba(3, 133, 255, .14);
  color: #93c5fd;
}
html[data-theme='dark'] .editorial-feature__copy > p,
html[data-theme='dark'] .editorial-card__body > p {
  color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .editorial-feature__copy .market-chip,
html[data-theme='dark'] .editorial-card__body .market-chip {
  background: rgba(30, 41, 59, .72);
  border-color: rgba(148, 163, 184, .18);
  color: #cbd5e1;
}
html[data-theme='dark'] .editorial-feature__copy .market-chip-row,
html[data-theme='dark'] .editorial-card__body .market-chip-row {
  border-top-color: rgba(148, 163, 184, .14);
  border-bottom-color: rgba(148, 163, 184, .12);
}
html[data-theme='dark'] .market-chip {
  background: rgba(3, 133, 255, .14);
  color: #93c5fd;
}
html[data-theme='dark'] .market-chip--active {
  background: var(--blue);
  color: #fff;
}
html[data-theme='dark'] .content-filter-row {
  border-top-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .editorial-meta {
  color: #64748b;
}
html[data-theme='dark'] .review-proof {
  color: #93c5fd;
  border-top-color: rgba(148, 163, 184, .16);
}
:root {
    --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --space-4: 1rem;
    --radius-md: 1rem;
    --radius-lg: 1.375rem;
    --radius-xl: 1.75rem;
    --text-sm: 0.875rem;
    --text-md: 0.98rem;
    --text-lg: 1.08rem;
    --text-2xl: clamp(1.46rem, 2.6vw, 1.96rem);
    --container-max: 1180px;
    --grid-gap: clamp(1.2rem, 2.5vw, 2rem);
    --surface-padding: clamp(1.9rem, 3.15vw, 3rem);
    --touch-target-min: 48px;
    --tracking-wide: 0.14em;
    --shadow-elevated: 0 28px 70px -34px rgba(0, 0, 0, 0.46), 0 12px 28px -18px rgba(0, 0, 0, 0.28);
    --shadow-glass: 0 40px 100px -20px rgba(0, 0, 0, 0.78), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    --motion-fast: 110ms cubic-bezier(0.22, 1, 0.36, 1);
    --motion-base: 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
:root,
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #010309;
    --surface: rgba(4, 6, 26, 0.7);
    --surface-strong: rgba(12, 18, 34, 0.9);
    --surface-soft: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #f4f7fb;
    --text-muted: #c3cedb;
    --text-soft: #90a1b5;
    --heading: #ffffff;
    --brand: #1557ff;
    --accent: #18b7ff;
    --atmo-blue: #4a5d7a;
    --atmo-violet: #5c5470;
    --grain-opacity: 0.035;
}
[data-theme="light"] {
    color-scheme: light;
    --bg: #fdfdfe;
    --surface: rgba(255, 255, 255, 0.82);
    --surface-strong: rgba(255, 255, 255, 0.94);
    --surface-soft: rgba(12, 18, 34, 0.04);
    --border: rgba(12, 18, 34, 0.08);
    --border-strong: rgba(12, 18, 34, 0.14);
    --text: #101824;
    --text-muted: #4e6077;
    --text-soft: #73839a;
    --heading: #0a1220;
    --brand: #0f4fff;
    --accent: #00a6ff;
    --atmo-blue: #b0c4de;
    --atmo-violet: #c5b4d1;
    --grain-opacity: 0.024;
    --shadow-elevated: 0 26px 66px -40px rgba(20, 30, 54, 0.2), 0 10px 22px -18px rgba(20, 30, 54, 0.12);
    --shadow-glass: 0 40px 100px -40px rgba(74, 93, 122, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}
html {
    box-sizing: border-box;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--text);
    transition: background 0.7s cubic-bezier(0.4, 0, 0.2, 1), color var(--motion-base);
    overflow-x: hidden;
}
img,
svg {
    display: block;
    max-width: 100%;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
select,
textarea {
    font: inherit;
}
.zf-app {
    position: relative;
    min-height: 100vh;
    overflow: visible;
    isolation: isolate;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text);
}
    .zf-app::before {
        content: none;
    }
    .zf-app::after {
        content: none;
    }
.background-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}
    .background-stage .glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(160px);
        transition: transform 0.6s ease, opacity 0.6s ease;
        opacity: 0.12;
    }
    .background-stage .glow-primary {
        width: 70vw;
        height: 70vh;
        top: -10%;
        left: -10%;
        background: var(--atmo-blue);
        opacity: 0.13;
    }
    .background-stage .glow-accent {
        width: 60vw;
        height: 60vh;
        bottom: -10%;
        right: -10%;
        background: var(--atmo-violet);
        opacity: 0.08;
    }
    .background-stage .grain {
        position: absolute;
        inset: 0;
        opacity: var(--grain-opacity);
        mix-blend-mode: overlay;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") center/220px 220px repeat;
    }
.section {
    padding-block: clamp(1.6rem, 4vw, 3.2rem);
}
.row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
}
    .row > * {
        min-width: 0;
        grid-column: span 12;
    }
.h2 {
    margin: 0;
    color: var(--heading);
}
.h2 {
    font-size: var(--text-2xl);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 600;
}
.card,
.timeline {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent) 0%, color-mix(in srgb, var(--surface-strong) 78%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--border-strong) 42%, var(--border) 58%);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(36px) saturate(132%);
    -webkit-backdrop-filter: blur(36px) saturate(132%);
    box-shadow: var(--shadow-elevated), var(--shadow-glass);
}
    .card::before,
    .timeline::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(155deg, rgba(255, 255, 255, 0.065), transparent 18%), radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 32%);
        pointer-events: none;
    }
.card,
.timeline,
.feature-card,
.review-card,
.faq-card,
.blog-card {
    padding: var(--surface-padding);
}
.card,
.timeline,
.feature-card,
.review-card,
.faq-card,
.blog-card {
    align-content: start;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
    padding: 0.8rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 0.95rem;
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), box-shadow var(--motion-fast), filter var(--motion-fast);
}
    .btn:hover {
        transform: translateY(-1px);
    }
    .btn:active {
        transform: translateY(0);
    }
.alert {
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1rem 0.95rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-soft), transparent 170%);
}
.price {
    display: flex;
    justify-content: space-between;
    gap: 0.9rem;
}
.timeline {
    gap: 1rem;
}
.price {
    flex-wrap: wrap;
    align-items: flex-end;
}
    .price .period {
        font-size: 0.95rem;
        line-height: 1.4;
        color: var(--text-soft);
        padding-bottom: 0.3rem;
    }
.feature-card,
.review-card,
.faq-card,
.blog-card {
    position: relative;
    overflow: hidden;
    padding: var(--surface-padding);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent) 0%, color-mix(in srgb, var(--surface-strong) 64%, transparent) 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-elevated);
}
    .feature-card::before,
    .review-card::before,
    .faq-card::before,
    .blog-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 18%), radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 30%);
        pointer-events: none;
        box-shadow: var(--shadow-glass);
    }
.feature-card {
    display: grid;
    gap: 1.15rem;
    grid-template-rows: auto auto 1fr;
    height: 100%;
}
.review-card {
    display: grid;
    gap: 1.3rem;
    grid-template-rows: auto 1fr auto;
    height: 100%;
}
.review-avatar {
    display: inline-grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 70%, white 30%), color-mix(in srgb, var(--accent) 78%, white 22%));
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    transition: transform var(--motion-fast), box-shadow var(--motion-fast);
}
.faq-card {
    display: grid;
}
.blog-card {
    display: grid;
    gap: 1rem;
    padding: 0;
    grid-template-rows: auto 1fr;
    height: 100%;
}
@media (max-width: 991px) {
    .price .period {
        width: 100%;
        padding-bottom: 0;
    }
}
@media (max-width: 767px) {
    .zf-app {
        min-height: calc(100vh - 1.4rem);
        border-radius: 1.4rem;
    }
    .section {
        padding-block: 1.15rem;
    }
    .card,
    .timeline,
    .feature-card,
    .review-card,
    .faq-card,
    .blog-card {
        padding: 1.35rem;
        border-radius: 1.2rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}
:root {
    --sf-container: 1200px;
    --sf-container-narrow: 1100px;
    --sf-blue-500: var(--brand, #0f4fff);
    --sf-slate-900: #0f172a;
    --sf-slate-700: #334155;
    --sf-white: #ffffff;
    --sf-font-display: var(--font-display);
    --sf-font-body: 'Plus Jakarta Sans', Inter, ui-sans-serif, system-ui, sans-serif;
    --sf-space-2: clamp(.85rem, 1.45vw, 1.1rem);
    --sf-space-4: clamp(1.85rem, 3vw, 2.75rem);
    --sf-grad-light: radial-gradient(circle at 12% 14%, rgba(59, 130, 246, .10), transparent 26%), radial-gradient(circle at 84% 18%, rgba(99, 102, 241, .12), transparent 24%), radial-gradient(circle at 18% 82%, rgba(20, 184, 166, .10), transparent 26%), linear-gradient(180deg, #ffffff 0%, #fbfdff 32%, #f4f8ff 100%);
    --sf-grad-border: linear-gradient(90deg, var(--brand, #0f4fff), color-mix(in srgb, var(--accent, #18b7ff) 80%, var(--brand, #0f4fff) 20%), var(--brand, #0f4fff));
    --sf-accent-sect-bg-light: linear-gradient(135deg, color-mix(in srgb, var(--brand) 34%, var(--surface-soft) 66%), transparent 60%), linear-gradient(315deg, color-mix(in srgb, var(--accent) 28%, var(--surface-soft) 72%), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 88%, transparent), transparent);
    --sf-premium-bg-dark: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 26%), radial-gradient(circle at 50% 38%, rgba(96, 68, 210, 0.34) 0%, rgba(96, 68, 210, 0) 30%), radial-gradient(circle at 50% 58%, rgba(52, 32, 168, 0.28) 0%, rgba(52, 32, 168, 0) 40%), radial-gradient(circle at center, #3627b8 0%, #251999 32%, #110d5a 70%, #03041a 100%);
    --sf-accent-sect-bg-dark: var(--sf-premium-bg-dark);
    --sf-accent-section-border: color-mix(in srgb, var(--brand, #0f4fff) 24%, var(--border, rgba(148, 163, 184, .18)) 76%);
    --sf-accent-section-card: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08));
    --sf-accent-section-heading: #ffffff;
    --sf-accent-section-text: rgba(255, 255, 255, .90);
    --sf-accent-section-muted: rgba(255, 255, 255, .82);
    --sf-accent-section-kicker-bg: rgba(255, 255, 255, .14);
    --sf-accent-section-kicker-text: #ffffff;
    --sf-control-highlight-text: color-mix(in srgb, var(--brand, #0f4fff) 84%, var(--heading, #0f172a) 16%);
    --primary: var(--brand, #0f4fff);
    --blue: var(--brand, #0f4fff);
    --blue-dk: color-mix(in srgb, var(--brand, #0f4fff) 82%, #001b4d 18%);
    --green: var(--brand, #0f4fff);
    --sf-type-body-s-size: 12px;
    --sf-type-body-s-line: 16px;
    --sf-type-body-l-size: 16px;
    --sf-type-body-l-line: 24px;
    --sf-type-h1-size: 28px;
    --sf-type-h1-line: 32px;
    --sf-grid-margin: 32px;
    --sf-copy-pad-inline: 16px;
}
html[data-theme='dark'],
body.shell-storefront[data-theme='dark'] {
    --sf-accent-section-bg: var(--sf-accent-sect-bg-dark);
    --sf-accent-section-border: color-mix(in srgb, var(--brand, #1557ff) 28%, rgba(191, 219, 254, .16) 72%);
    --sf-accent-section-card: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .12));
    --sf-accent-section-heading: #ffffff;
    --sf-accent-section-text: rgba(248, 250, 255, .98);
    --sf-accent-section-muted: rgba(233, 239, 255, .94);
    --sf-accent-section-kicker-bg: rgba(191, 219, 254, .14);
    --sf-accent-section-kicker-text: #bfdbfe;
    --sf-dark-section-dimmer: transparent;
}
html[data-theme='light'],
body.shell-storefront[data-theme='light'] {
    --sf-accent-section-bg: var(--sf-accent-sect-bg-light);
    --sf-accent-section-border: color-mix(in srgb, var(--brand, #1557ff) 28%, rgba(191, 219, 254, .16) 72%);
    --sf-accent-section-card: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08));
    --sf-accent-section-heading: #ffffff;
    --sf-accent-section-text: rgba(255, 255, 255, .90);
    --sf-accent-section-muted: rgba(255, 255, 255, .82);
    --sf-accent-section-kicker-bg: rgba(255, 255, 255, .14);
    --sf-accent-section-kicker-text: #ffffff;
}
.sf-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: clip;
}
html[data-theme='dark'] .shell-storefront .sf-section::after {
    content: none;
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--sf-dark-section-dimmer);
}
html[data-theme='dark'] .shell-storefront .sf-section > * {
    position: relative;
    z-index: 1;
}
.sf-section--light {
    background: transparent;
    color: var(--text, var(--sf-slate-900));
}
.sf-section--dark-band {
    background: var(--sf-accent-section-bg);
    color: var(--sf-accent-section-text) !important;
    border-color: var(--sf-accent-section-border);
}
#storefrontPaystubExplainerSection.sf-section--dark-band.market-inline-cta {
    background: var(--sf-accent-section-bg) !important;
    border-color: var(--sf-accent-section-border) !important;
}
[data-theme="light"] .sf-section--light {
    background: var(--surface, var(--sf-grad-light));
    color: var(--text, var(--sf-slate-900));
}
[data-theme="light"] .sf-section--dark-band {
    color: var(--sf-accent-section-text);
}
.sf-section--dark-band .sf-title-section {
    color: var(--sf-accent-section-heading);
}
.sf-section--dark-band .sf-text-lead {
    color: var(--sf-accent-section-muted);
}
.sf-section--dark-band .sf-kicker,
.sf-section--dark-band .market-kicker {
    background: var(--sf-accent-section-kicker-bg);
    color: var(--sf-accent-section-kicker-text);
}
/* Hero band sits on the dark gradient only in DARK theme. In light
   theme the hero is on a light background, so the white-on-transparent
   accent values would render the kicker invisible. Scope the override
   to dark theme so light theme falls back to the standard blue-on-pill
   .market-kicker chrome (rgba(3,133,255,.08) bg + var(--primary) text)
   — same eyebrow pattern as every other kicker on the page. */
html[data-theme='dark'] .market-hero--storefront .market-kicker {
    background: var(--sf-accent-section-kicker-bg);
    color: var(--sf-accent-section-kicker-text);
}
html[data-theme='dark'] .sf-section--dark-band .paystub-purpose-card {
    background: var(--sf-accent-section-card);
    border-color: var(--sf-accent-section-border);
}
html[data-theme='dark'] .sf-section--dark-band .paystub-purpose-card strong {
    color: var(--sf-accent-section-heading);
}
html[data-theme='dark'] .sf-section--dark-band .paystub-purpose-card li {
    color: var(--sf-accent-section-muted);
}
html[data-theme='dark'] #storefrontPaystubExplainerSection,
html[data-theme='dark'] #storefrontJoinCtaBandSection .market-kicker,
html[data-theme='dark'] #storefrontJoinCtaBandSection h2,
html[data-theme='dark'] #storefrontJoinCtaBandSection p,
html[data-theme='dark'] #storefrontJoinCtaBandSection,
html[data-theme='dark'] #storefrontPaystubExplainerSection h2,
html[data-theme='dark'] #storefrontPaystubExplainerSection p,
html[data-theme='dark'] #storefrontPaystubExplainerSection strong,
html[data-theme='dark'] #storefrontPaystubExplainerSection li,
html[data-theme='dark'] #storefrontPaystubExplainerSection .market-kicker {
    color: #ffffff !important;
}
html[data-theme='dark'] #storefrontPaystubExplainerSection .market-kicker,
html[data-theme='dark'] #storefrontJoinCtaBandSection .market-kicker,
html[data-theme='dark'] #storefrontPaystubExplainerSection article {
    background: rgba(0,0,0,0.25) !important;
}
html[data-theme='dark'] #storefrontPaystubExplainerSection .market-kicker,
html[data-theme='dark'] #storefrontJoinCtaBandSection .market-kicker {
    background: rgba(191, 219, 254, .14) !important;
    color: #bfdbfe !important;
}
.sf-container {
    width: 100%;
    max-width: var(--sf-container);
    margin-inline: auto;
    padding: clamp(1.35rem, 2.4vw, 2.2rem) var(--sf-grid-margin);
    box-sizing: border-box;
}
.sf-container--narrow {
    max-width: var(--sf-container-narrow);
}
.sf-container--compact {
    padding-block: clamp(.95rem, 1.8vw, 1.45rem);
}
.sf-section-head {
    display: grid;
    gap: var(--sf-space-2);
    max-width: 860px;
    margin: 0 0 var(--sf-space-4);
}
.sf-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: .44rem .9rem;
    border-radius: 999px;
    background: rgba(3, 133, 255, .08);
    color: var(--sf-blue-500);
    font-family: var(--sf-font-body);
    font-size: var(--sf-type-body-s-size);
    line-height: var(--sf-type-body-s-line);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.sf-section--dark-band .sf-kicker {
    background: var(--brand-soft, rgba(3, 133, 255, .14));
    color: var(--sf-control-highlight-text);
}
.sf-title-section,
.sf-text-lead {
    margin: 0;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.sf-title-section {
    font-family: var(--sf-font-display);
    color: var(--sf-slate-900);
    letter-spacing: -.06em;
    font-size: var(--sf-type-h1-size);
    line-height: var(--sf-type-h1-line);
    max-width: 16ch;
}
.sf-text-lead {
    font-family: var(--sf-font-body);
    color: var(--sf-slate-700);
    max-width: 62ch;
    font-size: var(--sf-type-body-l-size);
    line-height: var(--sf-type-body-l-line);
}

.sf-list-check {
    list-style: none;
    display: grid;
    gap: .8rem;
    margin: 0;
    padding: 0;
}
    .sf-list-check li {
        position: relative;
        padding-left: 1.55rem;
        color: inherit;
        font-family: var(--sf-font-body);
        line-height: 1.6;
    }
        .sf-list-check li::before {
            content: "\2713";
            position: absolute;
            left: 0;
            top: .1rem;
            color: #22c55e;
            font-size: .92em;
            font-weight: 900;
            line-height: 1;
        }
@media (max-width: 1024px) {
    :root {
        --sf-grid-margin: 16px;
        --sf-copy-pad-inline: 12px;
    }
    .sf-title-section {
        max-width: none;
    }
    .sf-section-head {
        max-width: none;
    }
}
@media (max-width: 768px) {
    .sf-container {
        padding-block: clamp(1.15rem, 4.5vw, 1.75rem);
        padding-inline: var(--sf-grid-margin);
    }
    .sf-container--compact {
        padding-block: clamp(.85rem, 3.5vw, 1.2rem);
    }
}
@media (max-width: 480px) {
    :root {
    }
    .sf-title-section {
        font-size: clamp(2rem, 10vw, 2.6rem);
        line-height: .98;
    }
    .sf-text-lead {
        font-size: .98rem;
        line-height: 1.72;
    }
}
[data-theme='dark'] .sf-section--light {
    color: var(--text, #e2e8f0);
}
    [data-theme='dark'] .sf-section--light .sf-title-section {
        color: var(--heading, #f8fafc);
    }
    [data-theme='dark'] .sf-section--light .sf-text-lead {
        color: var(--text-muted, rgba(226, 232, 240, .76));
    }
    [data-theme='dark'] .sf-section--light .sf-kicker,
    [data-theme='dark'] .sf-section--light .market-kicker {
        background: rgba(191, 219, 254, .14);
        color: #bfdbfe;
    }
.market-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: 1.35rem;
    padding: 2rem;
    border: 1px solid var(--border, rgba(148, 163, 184, .14));
    box-shadow: 0 34px 82px rgba(15, 23, 42, .1);
}
.market-subtitle {
    max-width: 60ch;
    color: #1e293b;
    font-size: 1rem;
    line-height: 1.9;
}
.editorial-divider {
    padding: 0 .15rem;
}
.market-carousel-shell {
    padding: 2rem;
}
.market-carousel {
    --carousel-side-pad: 1.2rem;
    padding: .7rem var(--carousel-side-pad) 1.4rem;
    scroll-padding-inline: var(--carousel-side-pad);
}
.market-carousel-card {
    box-shadow: 0 10px 22px rgba(15, 23, 42, .07), 0 2px 8px rgba(15, 23, 42, .04);
}
.review-card {
    min-height: 100%;
    background: #fff;
}
.review-card__top {
    align-items: center;
}
.review-avatar {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 12px 24px rgba(15, 23, 42, .12);
}
.review-proof {
    padding-top: .85rem;
    margin-top: .9rem;
    border-top: 1px solid rgba(148, 163, 184, .16);
    color: #0f4c81;
    font-weight: 700;
}
.tutorial-feature,
.tutorial-overview-card {
    box-shadow: 0 20px 42px rgba(15, 23, 42, .07);
}
.content-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, .72fr);
    gap: 1rem;
    align-items: start;
    padding: 1.8rem;
    border: 1px solid rgba(148, 163, 184, .16);
    box-shadow: 0 26px 60px rgba(15, 23, 42, .08);
}
.content-hero__copy {
    min-width: 0;
}
.content-hero__rail {
    display: grid;
    gap: .85rem;
}
.content-hero__stat {
    padding: .95rem 1rem;
    border-radius: 18px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(148, 163, 184, .14);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .05);
}
    .content-hero__stat strong {
        display: block;
        color: #0f172a;
        font-family: var(--font-display);
        font-size: 1rem;
    }
    .content-hero__stat span {
        display: block;
        margin-top: .3rem;
        color: #5b6b7f;
        line-height: 1.7;
    }
@media (max-width: 1024px) {
    .content-hero,
    .content-shell--blog .content-hero,
    .content-shell--tutorials-page .content-hero,
    .content-hero__stats-inline,
    .tutorial-hero-roadmap {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .market-hero,
    .content-hero {
        padding: 1.2rem;
    }
    .market-carousel {
        --carousel-visible: 1;
        --carousel-side-pad: .95rem;
        padding: .65rem var(--carousel-side-pad) 1.2rem;
        scroll-padding-inline: var(--carousel-side-pad);
    }
}
.market-hero--storefront {
    grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
    align-items: stretch;
}
.market-hero-copy {
    min-width: 0;
}
.content-shell--blog,
.content-shell--tutorials-page {
    gap: 2rem;
}
    .content-shell--blog .content-hero {
        grid-template-columns: minmax(0, 1.04fr) minmax(320px, .76fr);
    }
    .content-shell--tutorials-page .content-hero {
        grid-template-columns: minmax(0, 1fr) minmax(300px, .78fr);
    }
.content-hero__stats-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
    margin-top: 1.15rem;
}
.content-editorial-focus {
    display: grid;
    gap: .85rem;
    align-content: start;
    padding: 1rem;
    border-radius: 24px;
    border: 1px solid rgba(148, 163, 184, .16);
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.95));
    box-shadow: 0 20px 42px rgba(15, 23, 42, .07);
}
.content-editorial-focus__eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: .32rem .68rem;
    border-radius: 999px;
    background: rgba(3, 133, 255, .08);
    color: var(--blue);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.content-editorial-focus__cover {
    display: block;
    overflow: hidden;
    border-radius: 18px;
}
    .content-editorial-focus__cover img {
        width: 100%;
        min-height: 220px;
        object-fit: cover;
    }
.content-editorial-focus strong a {
    color: #0f172a;
    text-decoration: none;
    font-size: 1.35rem;
    line-height: 1.15;
}
.content-editorial-focus p {
    margin: 0;
    color: #1e293b;
    line-height: 1.75;
}
.content-filter-row--editorial {
    grid-column: 1 / -1;
    padding-top: 1rem;
    margin-top: .15rem;
    border-top: 1px solid rgba(148, 163, 184, .14);
}
.tutorial-hero-roadmap {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .95rem;
}
.tutorial-hero-roadmap__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    padding: .95rem 1rem;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, .15);
    background: rgba(255,255,255,.84);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .05);
}
    .tutorial-hero-roadmap__item span {
        display: inline-flex;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(3, 133, 255, .12);
        color: var(--blue);
        font-weight: 800;
    }
    .tutorial-hero-roadmap__item strong {
        display: block;
        color: #0f172a;
    }
    .tutorial-hero-roadmap__item p {
        margin: .35rem 0 0;
        color: #5b6b7f;
        font-size: .86rem;
        line-height: 1.7;
    }
.market-hero,
.market-inline-cta,
.content-hero,
.content-shell--blog > .editorial-feature--page,
.content-shell--tutorials-page > .editorial-feature--page,
.tutorial-feature,
.account-dashboard-grid > .step-card,
.account-dashboard-grid > .account-side-card,
.shell-account .admin-workspace__main > .step-card {
    box-shadow: var(--shadow-elev-1);
}
.editorial-grid--full {
    box-shadow: none;
}
.market-section .market-carousel-card,
.market-section .tutorial-card,
.market-section .tutorial-overview-card,
.market-section .editorial-card,
.market-section .editorial-feature,
.content-hero .content-hero__stat,
.content-hero .tutorial-hero-roadmap__item,
.content-hero .content-editorial-focus,
.tutorial-feature .tutorial-feature__article {
    box-shadow: var(--shadow-elev-2);
}
.market-carousel-control,
.btn-acc-secondary,
.btn-acc-secondary:visited {
    box-shadow: var(--shadow-centered-sm);
}
    .market-carousel-control:hover {
        box-shadow: var(--shadow-centered-md);
    }
.btn-acc-primary {
    box-shadow: var(--shadow-elev-2);
}
    .btn-acc-primary:hover {
        box-shadow: 0 0 0 1px rgba(3, 133, 255, .16), 0 0 22px rgba(3, 133, 255, .2), 0 0 42px rgba(3, 133, 255, .24);
        background: var(--surface);
        color:var(--blue) !important;
    }
.home-faq-grid {
    display: grid;
    gap: 1.25rem;
}
.market-section--verification-promo {
    display: grid;
    gap: 0;
    width: 100%;
    min-width: 0;
    padding-top: clamp(2.65rem, 8.25vh, 5.25rem);
    padding-bottom: clamp(1.5rem, 4.5vh, 3rem);
    padding-inline: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}
.verification-promo-hero {
    display: grid;
    grid-template-columns: minmax(0, .94fr) minmax(300px, .96fr);
    gap: 1rem;
    width: min(100%, var(--sf-container));
    margin-inline: auto;
    padding-inline: 1.65rem;
    align-items: center;
    align-content: center;
    min-height: clamp(24.75rem, 59vh, 38.75rem);
}
.verification-promo-hero__copy {
    display: grid;
    gap: .92rem;
    align-content: center;
    max-width: 72rem;
}
    .verification-promo-hero__copy .market-kicker {
        /* Inherit padding / font-size / letter-spacing from the
           base .market-kicker rule (line 2452) so this section's
           eyebrow matches every other section's chip — was the
           only outlier on the page at .6rem font + .07em tracking
           + .26/.62rem padding, which the mobile audit flagged
           as visibly smaller and tighter than its neighbors. */
        justify-self: start;
    }
    .verification-promo-hero__copy h2 {
        max-width: 9.5ch;
        color: #0f172a;
        font-family: var(--font-display);
        font-size: clamp(2.3rem, 5vw, 4rem);
        line-height: .94;
        letter-spacing: -.04em;
    }
.verification-promo-wave {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    --p1x: 12%;
    --p1y: 56%;
    --p2x: 88%;
    --p2y: 44%;
    --burst-x: 50%;
    --burst-y: 50%;
    --burst-radius: 0%;
    --burst-opacity: 0;
    color: #0f172a;
    -webkit-text-stroke: .016em rgba(61, 168, 255, .16);
    text-shadow: 0 0 .04em rgba(3, 133, 255, .04);
    transition: -webkit-text-stroke-color .45s ease, text-shadow .45s ease;
}
    .verification-promo-wave::before,
    .verification-promo-wave::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        white-space: nowrap;
        pointer-events: none;
    }
    .verification-promo-wave::before {
        background-image: radial-gradient(circle at center, rgba(149, 225, 255, .98) 0 5%, rgba(149, 225, 255, .92) 7.2%, rgba(149, 225, 255, .34) 12%, transparent 19%), radial-gradient(circle at center, rgba(94, 197, 255, .96) 0 4.8%, rgba(94, 197, 255, .86) 7%, rgba(94, 197, 255, .3) 11.8%, transparent 18%);
        background-size: 18% 180%, 18% 180%;
        background-repeat: no-repeat, no-repeat;
        background-position: var(--p1x) var(--p1y), var(--p2x) var(--p2y);
        color: transparent;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        filter: drop-shadow(0 0 5px rgba(86, 189, 255, .16));
        opacity: 1;
        transition: opacity .28s ease;
    }
    .verification-promo-wave::after {
        display: block;
        color: var(--blue);
        -webkit-text-fill-color: var(--blue);
        clip-path: circle(var(--burst-radius) at var(--burst-x) var(--burst-y));
        opacity: var(--burst-opacity);
        text-shadow: 0 0 0 rgba(3, 133, 255, 0);
        will-change: clip-path, opacity, text-shadow;
    }
    .verification-promo-wave.is-bursting {
        text-shadow: 0 0 10px rgba(3, 133, 255, .2), 0 0 24px rgba(3, 133, 255, .14), 0 0 52px rgba(3, 133, 255, .08);
    }
        .verification-promo-wave.is-bursting::before {
            opacity: 0;
        }
        .verification-promo-wave.is-bursting::after {
            text-shadow: 0 0 8px rgba(3, 133, 255, .36), 0 0 22px rgba(3, 133, 255, .24), 0 0 52px rgba(3, 133, 255, .16);
        }
    .verification-promo-wave.is-charged {
        color: var(--blue);
        -webkit-text-stroke: .014em rgba(74, 181, 255, .12);
        text-shadow: 0 0 12px rgba(3, 133, 255, .16), 0 0 28px rgba(3, 133, 255, .1);
        transition: none;
    }
        .verification-promo-wave.is-charged::before,
        .verification-promo-wave.is-charged::after {
            opacity: 0;
        }
.verification-promo-hero__copy p {
    margin-top: .14rem;
    max-width: 58ch;
    color: #1e293b;
    font-size: 1rem;
    line-height: 1.85;
}
.verification-promo-hero__actions {
    padding-top: .46rem;
}
.verification-promo-hero__visual {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    min-width: 0;
    margin: 0;
}
    .verification-promo-hero__visual img {
        display: block;
        width: 100%;
        max-width: 40rem;
        height: auto;
        object-fit: contain;
    }
.verification-promo-body {
    display: grid;
    grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
    gap: 1rem;
    width: min(100%, var(--sf-container));
    margin-inline: auto;
    margin-top: clamp(2.65rem, 8.25vh, 5.25rem);
    align-items: stretch;
}
.verification-promo-card {
    position: relative;
    border-radius: 28px;
    border: 1px solid rgba(148, 163, 184, .16);
}
/* The scroll-reveal start state only applies where the observer that clears it
   actually ships. Unscoped, any other page reusing this card renders it at
   opacity:0, shifted 96px out of its grid column, and it never comes back. */
.has-reveal .verification-promo-card {
    opacity: 0;
    transform: translateX(96px);
    transition: transform .85s cubic-bezier(.18, .84, .22, 1), opacity .55s ease;
}
.verification-promo-card {
    display: grid;
    padding: 1.5rem 1.8rem 1.6rem;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .08), 0 18px 38px rgba(15, 23, 42, .05), 0 40px 82px rgba(15, 23, 42, .06);
}
.verification-promo-card__inner {
    display: grid;
    gap: .82rem;
    align-content: start;
    justify-items: center;
    width: 100%;
    text-align: center;
}
.verification-promo-card__brandline {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
}
    .verification-promo-card__brandline img {
        width: 12.4rem;
        height: auto;
        object-fit: contain;
    }
.verification-promo-card h3 {
    color: #0f172a;
    font-family: var(--font-display);
    font-size: 1.48rem;
    line-height: 1.02;
    letter-spacing: -.05em;
    max-width: none;
    margin-inline: auto;
    white-space: nowrap;
}
.verification-promo-card__price {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: .3rem;
    padding-top: .05rem;
}
    .verification-promo-card__price strong {
        color: var(--primary);
        font-family: var(--font-display);
        font-size: clamp(2.1rem, 4vw, 2.85rem);
        line-height: .92;
        letter-spacing: -.05em;
    }
    .verification-promo-card__price span {
        color: #334155;
        font-size: var(--sf-type-body-s-size);
        line-height: var(--sf-type-body-s-line);
        font-weight: 600;
        padding-bottom: .22rem;
    }
.verification-promo-card__cta {
    justify-self: center;
    min-width: 12.5rem;
    text-align: center;
    justify-content: center;
    padding-inline: 1.35rem;
}
.verification-promo-card__features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .45rem;
    gap: .46rem;
    margin: .12rem 0 0;
    padding: 0;
    width: fit-content;
    max-width: 100%;
    justify-self: center;
    text-align: left;
}
    .verification-promo-card__features li {
        position: relative;
        padding-left: 1.2rem;
        color: #334155;
        font-weight: 600;
        font-size: var(--sf-type-body-size);
        line-height: var(--sf-type-body-line);
    }
        .verification-promo-card__features li::before {
            content: "\2713";
            position: absolute;
            left: 0;
            top: .04rem;
            color: #16a34a;
            font-size: .8rem;
            font-weight: 900;
            line-height: 1;
        }
.verification-promo-card__intro {
    margin: -.1rem 0 .1rem;
    color: #334155;
    font-size: .95rem;
    line-height: 1.55;
    font-weight: 600;
}
.verification-promo-note {
    display: grid;
    align-content: start;
    gap: .95rem;
    padding: 1.5rem 1.45rem 1.55rem;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 28px;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .08), 0 16px 34px rgba(15, 23, 42, .04), 0 34px 68px rgba(15, 23, 42, .05);
}
.has-reveal .verification-promo-note {
    opacity: 0;
    transform: translateX(124px);
    transition: transform .95s cubic-bezier(.16, .86, .2, 1) .08s, opacity .6s ease .08s;
}
    .verification-promo-card.is-visible,
    .verification-promo-note.is-visible {
        opacity: 1;
        transform: translateX(0);
    }
        .verification-promo-card.is-visible .verification-promo-card__inner {
            animation: verificationCardFloat 4.8s ease-in-out .85s infinite;
        }
.verification-promo-note__tag {
    justify-self: start;
    padding: .18rem .48rem;
    border-radius: .35rem;
    background: #dc2626;
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.verification-promo-note h3 {
    max-width: none;
    color: #0f172a;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 3.9vw, 3.35rem);
    line-height: 1;
    letter-spacing: -.045em;
}
.verification-promo-note p {
    margin: 0;
    max-width: none;
    color: #1e293b;
    font-size: 1.02rem;
    line-height: 1.72;
}
@keyframes verificationCardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-9px);
    }
}
.market-section--review-spotlight {
    overflow: visible;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    padding: 0;
}
.market-section--review-spotlight::before {
    display: none;
}
.market-section--review-spotlight .market-kicker {
    background: rgba(3, 133, 255, .1);
    color: var(--blue);
}
.market-section--review-spotlight .section-heading h2,
.market-section--review-spotlight .section-heading p,
.market-section--review-spotlight .section-heading__body-copy {
    color: #0f172a;
}
.market-section--review-spotlight .section-heading__body-copy,
.market-section--review-spotlight .section-heading p {
    color: #475569;
}
.review-spotlight-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.2rem;
    margin: .5rem 0 .35rem;
}
.review-spotlight-summary {
    display: grid;
    gap: .4rem;
    max-width: 100%;
}
.review-spotlight-summary__label {
    color: #0f4c81;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.review-spotlight-summary__stars {
    color: #fbbf24;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: .16em;
}
/* Decimal-aware star widget — two stacked 5-star strips. The empty
   one sits in a muted gray underneath; the gold one overlays it
   with width: var(--fill, 0%) so any fractional rating (4.7, 3.25,
   etc.) lights up exactly the right horizontal slice of stars
   without needing per-rating CSS classes or special half-star
   glyphs. Used both in the section summary and inside each
   review card's rating-row. */
.rating-stars {
    position: relative;
    display: inline-block;
    line-height: 1;
    letter-spacing: 1px;
    color: #e5e7eb;
}
.rating-stars__empty {
    display: inline-block;
    color: inherit;
}
.rating-stars__filled {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    color: #fbbc04;
    overflow: hidden;
    white-space: nowrap;
    width: var(--fill, 0%);
    pointer-events: none;
}
/* Summary version: lays out Google brand mark, stars, average number,
   and total count in one inline row. Eye flow:
   [G] Google → ★★★★★ → 4.7 → (12) */
.review-spotlight-summary__rating {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    line-height: 1;
}
.review-spotlight-summary__brand {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    line-height: 1;
}
.review-spotlight-summary__brand .google-g-logo {
    display: block;
    flex-shrink: 0;
}
.review-spotlight-summary__brand-name {
    color: #1f1f1f;
    font-size: 1rem;
    /* Google's wordmark on the trust strip uses a slightly heavier
       weight than body copy — 500/medium reads as branded without
       shouting. */
    font-weight: 500;
    letter-spacing: -.01em;
}
html[data-theme='dark'] .review-spotlight-summary__brand-name {
    color: #f8fafc;
}
.review-spotlight-summary__rating .rating-stars {
    font-size: 1.1rem;
}
.review-spotlight-summary__avg {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
.review-spotlight-summary__count {
    color: #5f6368;
    font-size: .85rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}
html[data-theme='dark'] .review-spotlight-summary__avg {
    color: #f8fafc;
}
html[data-theme='dark'] .review-spotlight-summary__count {
    color: #94a3b8;
}
html[data-theme='dark'] .rating-stars {
    color: #334155;
}
.review-spotlight-summary p {
    margin: 0;
    color: #475569;
    font-size: .95rem;
    line-height: 1.72;
}
.review-spotlight-controls .market-carousel-control {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(148, 163, 184, .18);
    color: #0f172a;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}
    .review-spotlight-controls .market-carousel-control:hover {
        background: rgba(3, 133, 255, .08);
        border-color: rgba(3, 133, 255, .22);
        color: var(--blue);
        box-shadow: 0 14px 28px rgba(15, 23, 42, .1);
    }
.review-spotlight-shell {
    overflow: visible;
    padding-bottom: 0;
    /* Full-bleed (true viewport edge-to-edge) carousel surface.
       Cards extend to both viewport edges via the 100vw escape
       pattern + zero horizontal padding. */
    background: transparent !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}
/* Reviews section text (title, body, eyebrow, prev/next arrows)
   reduces its horizontal padding so it sits closer to the viewport
   edges, more in line with the now full-bleed carousel below.
   Drops the 1 rem (16 px) gutter inherited from the mobile
   uniformity block down to .5 rem (8 px) — visible relief without
   text touching the screen edges. */
@media (max-width: 768px) {
    /* Section padding matches the rest of the mobile sections — the
       full-bleed carousel still escapes via .review-spotlight-shell's
       width:100vw + negative margins, so the section can stay at the
       uniform 1rem gutter without re-clipping the carousel.
       padding-top: 0 closes the visual gap to the previous section
       (Why Choose) — the carousel's own padding-top supplies the
       small breathing room above the first card. */
    .shell-storefront .market-section--review-spotlight {
        padding-top: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    /* .section-heading--single bakes in an extra horizontal pad that
       pushed the Reviews H2 past the standard 16px alignment. Zero it
       inside the reviews section so the heading lands flush with the
       paystub-explainer / FAQ / verification-promo headings. */
    .shell-storefront .market-section--review-spotlight .section-heading--single {
        padding-left: 0;
        padding-right: 0;
    }
    /* The .sf-container--compact variant adds its own horizontal pad
       too — zero that as well so the heading anchor stays at the
       section's own 16px gutter. */
    .shell-storefront .market-section--review-spotlight .sf-container--compact {
        padding-left: 0;
        padding-right: 0;
    }
    /* Customer-counter headline — explicitly larger than the rest
       of the H2 system. Per user request, the "We've Helped X
       Customers / Create Their Paystub..." headline reads as a
       hero stat moment, so it gets a bigger font-size than the
       28 px H2 norm. 2.25rem (36 px) at 375px viewport feels
       prominent without overflowing the section. */
    .shell-storefront .customer-counter__headline {
        font-size: 2.25rem !important;
        line-height: 1.15 !important;
    }
    /* "Customers" word inside the highlight stays at headline size — only
       the digits get the enlargement. white-space:normal lets the line
       break naturally between number and word if it ever overflows. */
    .shell-storefront .customer-counter__highlight {
        font-size: inherit !important;
        line-height: inherit !important;
        white-space: normal !important;
    }
    /* The digits themselves are the hero statistic — sized dramatically
       larger than the surrounding headline so the eye lands on the
       number first. clamp() keeps it from overflowing on narrow
       phones while still scaling up on roomier ones. */
    .shell-storefront .customer-counter__highlight-number {
        font-size: clamp(4rem, 18vw, 6rem) !important;
        line-height: 1 !important;
        display: inline-block !important;
        vertical-align: baseline;
    }
}

.review-spotlight-carousel {
    --carousel-gap: .85rem;
    --carousel-side-pad: 0;
    --carousel-edge-gutter: 0;
    padding-top: .6rem;
    padding-bottom: 1rem;
    scroll-padding-left: 0;
    scroll-padding-right: 0;
    /* No snap — the autoplay JS at the bottom of Index.cshtml runs a
       continuous RAF loop that nudges scrollLeft by fractional pixel
       values every frame to create a marquee/ticker effect (cards
       glide in from the right edge of the viewport and exit through
       the left). scroll-snap-type: mandatory would yank scrollLeft
       back to the nearest card boundary every frame, killing the
       smooth motion. Cards still keep their scroll-snap-align so a
       human swipe gesture (on touch devices) still snaps cleanly to
       a card edge — only the auto-marquee is free-scrolling. */
    scroll-snap-type: none;
}
/* The autoplay marquee never stops to read a single card, so the
   prev/next buttons would interrupt the motion if clicked. Hide them
   on the review-spotlight carousel — users who want to dwell on a
   card can hover (CSS pauses motion via :hover below) or tap. */
.review-spotlight-controls {
    display: none;
}
/* Pause-on-hover so visitors can read a quote without it sliding
   away mid-sentence. Implementation note: we can't pause the JS
   RAF loop from CSS, but we CAN slow it to a crawl by setting a
   CSS variable the JS could read — for now the simpler trick is
   relying on the JS observer pausing when the carousel scrolls
   out of view; in-place hover dwell falls back to the human
   eye tracking the card. */
/* ─────────────────────────────────────────────────────────────────
   Review card — Google Reviews–style compact layout.
   Smaller than the previous spotlight card (max-width 300px vs 350px,
   tighter padding, flat white background, no gradient + no decorative
   shadow). Reads as one of many reviews glancing past rather than a
   billboard. Typography mirrors Google's review style:
   - 14 px name, 12 px location, 12 px date
   - Gold (#fbbc04) stars at 14 px, modest letter-spacing
   - 13 px body copy in #3c4043 (Google's text gray)
   - Proof line in muted gray with a thin separator above
   ───────────────────────────────────────────────────────────────── */
.review-card.review-card--spotlight {
    min-height: 0;
    max-width: 300px;
    padding: 14px 16px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: none;
}
    .review-card.review-card--spotlight .review-card__top {
        gap: 10px;
        align-items: center;
    }
    .review-card.review-card--spotlight .review-avatar {
        width: 36px;
        height: 36px;
        background: linear-gradient(135deg, #4285f4, #1a73e8);
        color: #fff;
        box-shadow: none;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
    }
    .review-card.review-card--spotlight .review-card__identity strong {
        color: #1f1f1f;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.25;
    }
    .review-card.review-card--spotlight .review-card__identity span {
        margin-top: 1px;
        color: #5f6368;
        font-size: 12px;
        font-weight: 400;
    }
.review-card__title {
    margin: 10px 0 0;
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
}
.review-card__meta {
    margin-top: 0;
    color: #5f6368;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}
/* Stars + date sit in one row. The wrapper applies !important
   margin/line-height resets on its children because the .review-stars
   spotlight rule below sets its own margin-top — without these
   resets the stars would push below the date's baseline. */
.review-card__rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
    line-height: 1;
}
.review-card__rating-row .review-stars,
.review-card__rating-row .review-card__meta {
    margin: 0 !important;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.review-card__rating-sep {
    color: #bdc1c6;
    font-weight: 400;
    line-height: 1;
}
/* The card's .review-stars container now hosts the decimal-aware
   .rating-stars widget — empty track color lives on the parent
   (light gray), filled overlay is gold (handled by .rating-stars__filled).
   The font-size + letter-spacing here size both stacked star strips. */
.review-card.review-card--spotlight .review-stars {
    margin-top: 0;
    letter-spacing: 1px;
    font-size: 13px;
}
.review-card.review-card--spotlight p {
    margin-top: 8px;
    color: #3c4043;
    font-size: 13px;
    line-height: 1.5;
}
.review-card.review-card--spotlight .review-proof {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f1f3f4;
    color: #5f6368;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.storefront-join-cta-band .storefront-join-cta-title,
.storefront-join-cta-band .storefront-join-cta-title span,
.storefront-join-cta-band .storefront-hero-title-accent {
    color: var(--sf-accent-section-heading, #0b2342);
}
.storefront-join-cta-band .section-heading__body-copy {
    color: var(--sf-accent-section-muted, #1b3b5f);
}
#storefrontPaystubExplainerSection,
#storefrontJoinCtaBandSection {
    --sf-accent-section-text: #0b2342;
    --sf-accent-section-heading: #0b2342;
    --sf-accent-section-muted: #1b3b5f;
    --sf-accent-section-kicker-bg: rgba(255, 255, 255, .72);
    --sf-accent-section-kicker-text: #0f4c81;
    --sf-accent-section-border: rgba(96, 165, 250, .45);
    color: var(--sf-accent-section-text) !important;
}
html[data-theme='dark'] .market-section--review-spotlight .market-kicker {
    background: rgba(191, 219, 254, .14);
    color: #bfdbfe;
}
html[data-theme='dark'] .market-section--review-spotlight .section-heading h2,
html[data-theme='dark'] .market-section--review-spotlight .section-heading p,
html[data-theme='dark'] .market-section--review-spotlight .section-heading__body-copy,
html[data-theme='dark'] .review-card.review-card--spotlight .review-card__identity strong,
html[data-theme='dark'] .review-card__title {
    color: #f8fafc;
}
html[data-theme='dark'] .market-section--review-spotlight .section-heading__body-copy,
html[data-theme='dark'] .market-section--review-spotlight .section-heading p,
html[data-theme='dark'] .review-spotlight-summary p,
html[data-theme='dark'] .review-card.review-card--spotlight .review-card__identity span,
html[data-theme='dark'] .review-card.review-card--spotlight p {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .review-spotlight-summary__label {
    color: rgba(191, 219, 254, .88);
}
html[data-theme='dark'] .review-spotlight-controls .market-carousel-control {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(191, 219, 254, .18);
    color: #f8fafc;
    box-shadow: none;
}
    html[data-theme='dark'] .review-spotlight-controls .market-carousel-control:hover {
        background: rgba(255, 255, 255, .16);
        border-color: rgba(191, 219, 254, .28);
        color: #f8fafc;
        box-shadow: none;
    }
html[data-theme='dark'] .review-card.review-card--spotlight {
    background: var(--surface);
    border-color: rgba(96, 165, 250, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 30px rgba(2, 8, 23, .16), 0 28px 58px rgba(2, 8, 23, .18);
}
    html[data-theme='dark'] .review-card.review-card--spotlight .review-avatar {
        background: linear-gradient(135deg, rgba(3, 133, 255, .28), rgba(56, 189, 248, .14));
        color: #dbeafe;
    }
html[data-theme='dark'] .review-card__meta {
    color: rgba(147, 197, 253, .88);
}
html[data-theme='dark'] .review-card.review-card--spotlight .review-proof {
    border-top-color: rgba(96, 165, 250, .16);
    color: #93c5fd;
}
html[data-theme='dark'] .storefront-join-cta-band .market-kicker {
    background: rgba(191, 219, 254, .14);
    color: #bfdbfe;
}
html[data-theme='dark'] .storefront-join-cta-band .storefront-join-cta-title,
html[data-theme='dark'] .storefront-join-cta-band .storefront-join-cta-title span,
html[data-theme='dark'] .storefront-join-cta-band .storefront-hero-title-accent {
    color: var(--sf-accent-section-heading, #0b2342);
}
html[data-theme='dark'] .storefront-join-cta-band .section-heading__body-copy {
    color: var(--sf-accent-section-muted, #1b3b5f);
}
html[data-theme='dark'] .market-inline-cta h2 {
    color: #0b2342;
}
html[data-theme='dark'] .market-inline-cta p {
    color: #1b3b5f;
}
@media (max-width: 1280px) {
    .review-spotlight-shell {
        padding-inline: 1rem;
    }
   
}
@media (max-width: 768px) {
    .review-spotlight-shell {
        padding-inline: .95rem;
    }
    .review-spotlight-carousel {
       
        --carousel-gap: .75rem;
    }
}
.market-subtitle,
.section-heading__body-copy,
.section-heading p,
.verification-promo-card__intro,
.verification-promo-note p,
.blog-featured__body p,
.blog-card__meta,
.blog-list-item__body span,
.resource-card__text span,
.home-faq-accordion__body p,
.homepage-guide-prose p,
.homepage-guide-prose li {
    font-family: var(--font-ui);
    font-size: var(--sf-type-body-size);
    line-height: var(--sf-type-body-line);
}
.section-heading h2,
.blog-featured__body h3,
.blog-list-item__body strong,
.resource-card__text strong,
.review-card__title {
    font-family: var(--font-display);
}
.section-heading h2 {
    margin-bottom: var(--sf-rhythm-title-to-body);
}
.section-heading :is(.section-heading__body-copy, p) {
    margin-top: 0;
}
.section-heading :is(.section-heading__body-copy, p) + :is(.section-heading__body-copy, p) {
    margin-top: var(--sf-rhythm-body-stack);
}
.blog-featured__body h3,
.blog-list-item__body strong,
.review-card__title {
    font-size: var(--sf-type-h3-size);
    line-height: var(--sf-type-h3-line);
}
.resource-card__text strong {
    font-size: var(--sf-type-h4-size);
    line-height: var(--sf-type-h4-line);
}
.blog-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.blog-featured {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, .14);
    background: #fff;
    overflow: hidden;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
    .blog-featured:hover {
        border-color: rgba(3, 133, 255, .2);
        box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
    }
.blog-featured__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
    .blog-featured__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }
.blog-featured:hover .blog-featured__image img {
    transform: scale(1.03);
}
.blog-featured__body {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1.15rem 1.25rem 1.35rem;
}
    .blog-featured__body h3 {
        margin: 0;
        font-family: var(--font-display);
        font-size: 1.2rem;
        font-weight: 800;
        line-height: 1.18;
        letter-spacing: -.03em;
        color: var(--heading, #0f172a);
    }
    .blog-featured__body p {
        margin: 0;
        font-size: .82rem;
        line-height: 1.6;
        color: var(--text-secondary, #64748b);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }
.blog-card__chips {
    display: flex;
    gap: .35rem;
}
    .blog-card__chips span {
        padding: .18rem .55rem;
        border-radius: 6px;
        background: rgba(3, 133, 255, .12);
        color: #0f4c81;
        font-size: .65rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
.blog-card__meta {
    font-size: .7rem;
    color: var(--text-secondary, #94a3b8);
    font-weight: 500;
}
.blog-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.blog-list-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .65rem .8rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .12);
    background: #fff;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}
    .blog-list-item:hover {
        background: rgba(3, 133, 255, .02);
        border-color: rgba(3, 133, 255, .18);
    }
.blog-list-item__image {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
}
    .blog-list-item__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
.blog-list-item__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
    .blog-list-item__body strong {
        font-family: var(--font-display);
        font-size: .84rem;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: -.015em;
        color: var(--heading, #0f172a);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
.blog-list-item__arrow {
    flex-shrink: 0;
    color: var(--primary, #0385ff);
    font-size: .85rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
.blog-list-item:hover .blog-list-item__arrow {
    opacity: 1;
    transform: translateX(0);
}
html[data-theme='dark'] .blog-featured {
    background: var(--surface);
    border-color: rgba(255, 255, 255, .06);
    box-shadow: var(--shadow-glass) !important;
}
    html[data-theme='dark'] .blog-featured:hover {
        border-color: rgba(3, 133, 255, .28);
        box-shadow: var(--shadow-elevated) !important;
    }
html[data-theme='dark'] .blog-featured__body h3,
html[data-theme='dark'] .blog-list-item__body strong {
    color: #f1f5f9;
}
html[data-theme='dark'] .blog-list-item {
    background: var(--surface);
    border-color: rgba(255, 255, 255, .06);
     box-shadow: var(--shadow-glass) !important;
}
    html[data-theme='dark'] .blog-list-item:hover {
        background: rgba(30, 41, 59, .8);
        border-color: rgba(3, 133, 255, .25);
        box-shadow: var(--shadow-elevated) !important;
    }
html[data-theme='dark'] .blog-card__chips span {
    background: rgba(3, 133, 255, .14);
}
html[data-theme='dark'] .blog-featured__body p,
html[data-theme='dark'] .blog-list-item__body span {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .blog-card__meta {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .blog-list-item__arrow {
    color: #64748b;
}
html[data-theme='dark'] .blog-list-item:hover .blog-list-item__arrow {
    color: #93c5fd;
}
@media (max-width: 768px) {
    .blog-showcase {
        grid-template-columns: 1fr;
    }
    .blog-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .blog-list-item__image {
        width: 56px;
        height: 56px;
    }
}
@media (max-width: 480px) {
    .blog-list {
        grid-template-columns: 1fr;
    }
}
.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}
.resource-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(3, 133, 255, .1), rgba(96, 165, 250, .06));
    color: var(--primary, #0385ff);
}
.resource-card__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
    .resource-card__text strong {
        font-family: var(--font-display);
        font-size: .88rem;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -.02em;
        color: var(--heading, #0f172a);
    }
    .resource-card__text span {
        font-size: .76rem;
        line-height: 1.45;
        color: var(--text-secondary, #64748b);
    }
.resource-card__arrow {
    flex-shrink: 0;
    font-size: .9rem;
    color: var(--primary, #0385ff);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .18s ease, transform .18s ease;
}
html[data-theme='dark'] .resource-card__text strong {
    color: #f1f5f9;
}
html[data-theme='dark'] .resource-card__icon {
    background: linear-gradient(135deg, rgba(3, 133, 255, .16), rgba(96, 165, 250, .08));
}
html[data-theme='dark'] .resource-card__text span {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .resource-card__arrow {
    color: #64748b;
}
@media (max-width: 900px) {
    .resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 560px) {
    .resource-grid {
        grid-template-columns: 1fr;
    }
    .resource-card__arrow {
        opacity: 1;
        transform: translateX(0);
    }
}
.paystub-generator-compare-card,
.paystub-generator-trust-point {
    border: 1px solid rgba(148, 163, 184, .16);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .95));
    box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 32px rgba(15, 23, 42, .05), 0 36px 64px rgba(15, 23, 42, .06);
}
    .paystub-generator-trust-point h3,
    .paystub-generator-compare-card h3 {
        margin: 0;
        color: #0f172a;
        font-family: var(--font-display);
        font-size: clamp(1.45rem, 2vw, 1.9rem);
        line-height: 1.02;
        letter-spacing: -.05em;
    }
    .paystub-generator-trust-point p {
        margin: 0;
        color: #475569;
        font-size: .96rem;
        line-height: 1.8;
    }
.paystub-generator-compare-card,
.paystub-generator-trust-point {
    border-radius: 28px;
    padding: 1.35rem;
}
.paystub-generator-trust__grid,
.paystub-generator-compare__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.paystub-generator-trust-point {
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .06));
    border-color: rgba(191, 219, 254, .16);
    box-shadow: 0 14px 32px rgba(4, 17, 45, .14), 0 36px 60px rgba(4, 17, 45, .10);
}
    .paystub-generator-trust-point h3 {
        color: #ffffff;
    }
    .paystub-generator-trust-point p {
        color: rgba(226, 232, 240, .76);
    }
.paystub-generator-compare__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1024px) {
    .paystub-generator-trust__grid,
    .paystub-generator-compare__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .paystub-generator-trust__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 768px) {
    .paystub-generator-trust__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.home-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1024px) {
    .home-faq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 1024px) {
    .verification-promo-hero {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-inline: 1.05rem;
        min-height: clamp(18.75rem, 48vh, 26.75rem);
    }
    .market-section--verification-promo {
        padding-top: clamp(1.8rem, 6vw, 3rem);
        padding-bottom: clamp(1.15rem, 3.75vw, 1.9rem);
    }
    .home-faq-grid,
    .verification-promo-body {
        grid-template-columns: 1fr;
    }
    .review-spotlight-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .review-spotlight-shell {
        padding-inline: .95rem;
    }
   
    .verification-promo-body {
        gap: 1rem;
    }
    .verification-promo-body {
        margin-top: clamp(1.8rem, 6vw, 3rem);
    }
    .verification-promo-card__features {
        grid-template-columns: 1fr;
    }
    .verification-promo-hero__copy h2,
    .verification-promo-note h3 {
        max-width: none;
    }
    .editorial-card__cover,
    .editorial-feature__cover {
        aspect-ratio: 16 / 10;
    }
        .editorial-card__cover img,
        .editorial-feature__cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    .storefront-hero-usecard {
        padding: 1.3rem 1.15rem 0;
    }
    .storefront-hero-usecard__art {
        min-height: 170px;
        padding-top: .75rem;
    }
        .storefront-hero-usecard__art img {
            max-height: 170px;
            width: min(100%, 300px);
        }
}
.market-hero,
.market-section,
.market-inline-cta {
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .10), 0 22px 46px rgba(15, 23, 42, .05), 0 52px 96px rgba(15, 23, 42, .06);
}
.market-hero--storefront {
    min-height: 100svh;
    width: 100%;
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    text-align: center;
    padding: calc(66px + 2.25rem) max(2.2rem, calc((100vw - 1280px) / 2 + 1.5rem)) 17rem;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    background: transparent;
}
.market-hero-storefront-padding-adjustment2 {
    padding-bottom: 4rem !important;
    padding-top: 4rem !important;
    color: inherit;
}
.market-hero--storefront-home {
    min-height: auto;
    padding-top: calc(66px + clamp(3.8rem, 7vw, 5.3rem));
    padding-bottom: 0;
}
.market-hero-copy--centered {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: clamp(1.15rem, 2.2vw, 1.7rem);
}
.market-hero--storefront h1 {
    font-family: var(--font-display);
    max-width: none;
    margin-top: .55rem;
    font-size: clamp(3.4rem, 7.2vw, 6.3rem);
    line-height: .92;
    letter-spacing: -.065em;
}
    .market-hero--storefront h1 > span {
        display: block;
    }
.storefront-hero-headline {
    overflow: visible;
}
.storefront-hero-headline__line {
    display: block;
}
.storefront-hero-headline__line--top {
    display: inline-flex !important;
    justify-content: center;
    gap: .22em;
    flex-wrap: wrap;
    padding-inline: .04em .1em;
}
.storefront-hero-headline__word,
.storefront-hero-headline__line--from-bottom {
    display: inline-block;
    opacity: 1;
}
.storefront-hero-headline__word--from-left {
}
.storefront-hero-headline__word--from-right {
    padding-inline-end: .06em;
}
.storefront-hero-headline__line--from-bottom {
}
.storefront-hero-title-accent {
    color: var(--primary);
}
.storefront-hero-usecards {
    width: 100%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}
.storefront-hero-usecards--anchored {
    position: relative;
    z-index: 2;
    margin-top: clamp(2.2rem, 4.2vw, 3rem);
    margin-bottom: clamp(-20rem, -22vw, -14.5rem);
}
.storefront-hero-usecard {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    text-align: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    padding: 1.55rem 1.55rem 0;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .16);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .10), 0 16px 36px rgba(15, 23, 42, .05), 0 34px 68px rgba(15, 23, 42, .06);
    overflow: hidden;
    opacity: 1;
}
    .storefront-hero-usecard > * {
        position: relative;
        z-index: 1;
    }
.storefront-hero-usecard--left {
}
.storefront-hero-usecard--right {
}
.storefront-hero-usecard.is-visible {
    opacity: 1;
}
.storefront-hero-usecard--left.is-visible {
}
.storefront-hero-usecard--right.is-visible {
}
.storefront-hero-usecard__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: .35rem .72rem;
    border-radius: 999px;
    background: rgba(3, 133, 255, .12);
    color: #0f4c81;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.storefront-hero-usecard__title {
    color: #0f172a;
    font-family: var(--font-display);
    /* 1.75rem = 28px, matches every other H2 on the storefront. Was
       1.82rem (= 18.88px at the page's 0.65rem root scaling) — the
       audit flagged it as the only H2 size variant on the page. */
    font-size: 1.75rem;
    line-height: 1.08;
    letter-spacing: -.04em;
    max-width: 14ch;
}
.storefront-hero-usecard p {
    color: #475569;
    line-height: 1.75;
    font-size: 1.04rem;
    max-width: 31ch;
}
.storefront-hero-usecard__price-note {
    margin: -.25rem 0 0;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
    .storefront-hero-usecard__price-note strong {
        color: #0f172a;
        font-size: .98rem;
        font-weight: 900;
        letter-spacing: -.03em;
    }
.storefront-hero-usecards--anchored .storefront-hero-usecard__title {
    max-width: 18ch;
}
.storefront-hero-usecards--anchored .storefront-hero-usecard {
    gap: 1rem;
    padding-bottom: 1.55rem;
}
.storefront-hero-usecards--anchored .storefront-hero-usecard__art {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 250px;
    transform: none;
}
    .storefront-hero-usecards--anchored .storefront-hero-usecard__art img {
        width: min(100%, 420px);
        max-height: 250px;
    }
.storefront-hero-usecards--anchored .btn-acc-primary {
    margin-top: 0;
    margin-bottom: 0;
}
.storefront-hero-usecard .btn-acc-primary {
    align-self: center;
    z-index: 2;
    margin-top: -.95rem;
    margin-bottom: 2.8rem;
    margin-inline: 0;
    padding-inline: 2rem;
    max-width: calc(100% - 3rem);
}
.storefront-hero-usecard__art {
    width: 100%;
    margin-top: auto;
    margin-bottom: -.45rem;
    margin-top: -2.15rem;
    padding-top: 0;
    min-height: 300px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform: translateY(-16px);
    z-index: 0;
    pointer-events: none;
}
    .storefront-hero-usecard__art img {
        display: block;
        width: min(114%, 460px);
        max-height: 300px;
        height: auto;
        object-fit: contain;
    }
@keyframes heroCardBrakeLeft {
    0% {
        opacity: 0;
        transform: translateX(calc(-100vw - 220px)) translateY(18px);
    }
    78% {
        opacity: 1;
        transform: translateX(5px) translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}
@keyframes heroCardCollideRight {
    0% {
        opacity: 0;
        transform: translateX(calc(100vw + 220px)) translateY(18px);
    }
    76% {
        opacity: 1;
        transform: translateX(10px) translateY(0);
    }
    90% {
        opacity: 1;
        transform: translateX(-2px) translateY(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}
@keyframes storefrontHeroTextFromLeft {
    from {
        opacity: 0;
        transform: translate3d(-64px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes storefrontHeroTextFromRight {
    from {
        opacity: 0;
        transform: translate3d(64px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes storefrontHeroTextFromBottom {
    from {
        opacity: 0;
        transform: translate3d(0, 42px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes storefrontHeroCopyReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes storefrontHeroCtaReveal {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0) scale(.98);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}
.market-hero--storefront .market-subtitle {
    max-width: 56ch;
    font-size: 1.08rem;
    line-height: 1.82;
    font-weight: 700;
}
.storefront-hero-subtitle {
    opacity: 1;
    transform: none;
}
.storefront-hero-primary-action {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: .85rem;
}
.storefront-hero-primary-action--intro {
    opacity: 1;
    transform: none;
}
.storefront-hero-primary-action .btn-acc-primary {
    min-width: 220px;
}
.hero-micro-proof {
    margin-top: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: .01em;
}
.market-hero--storefront .market-cta-row {
    justify-content: center;
    margin-top: 1.4rem;
}
.market-hero--storefront-home {
    position: relative;
    isolation: isolate;
    /* Lifts the isolated hero above the next section so the anchored use-cards are not painted over. */
    z-index: 1;
    background:
        radial-gradient(46% 40% at 14% 6%, rgba(3, 133, 255, .12), transparent 70%),
        radial-gradient(40% 36% at 88% 2%, rgba(6, 182, 212, .11), transparent 72%),
        radial-gradient(60% 45% at 50% 108%, rgba(3, 133, 255, .07), transparent 65%);
}
.market-hero--storefront-home::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(15, 23, 42, .07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 62% 48% at 50% 4%, #000 40%, transparent 78%);
    mask-image: radial-gradient(ellipse 62% 48% at 50% 4%, #000 40%, transparent 78%);
    pointer-events: none;
}
.market-hero-copy--centered {
    position: relative;
    z-index: 1;
}
.market-kicker__pulse {
    position: relative;
    display: inline-flex;
    width: 6px;
    height: 6px;
    margin-right: .5rem;
    border-radius: 50%;
    background: currentColor;
}
.market-kicker__pulse::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    animation: marketKickerPulse 2.2s ease-out infinite;
}
@keyframes marketKickerPulse {
    0% { transform: scale(.6); opacity: .5; }
    75% { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}
.storefront-hero-title-accent {
    background: linear-gradient(128deg, #0385ff 15%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hero-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: .01em;
}
.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.hero-trust-item svg {
    width: 14px;
    height: 14px;
    color: var(--primary);
    flex: 0 0 auto;
}
.hero-trust-divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
}
@media (prefers-reduced-motion: reduce) {
    .market-kicker__pulse::after {
        animation: none;
        opacity: 0;
    }
}
.market-carousel-card,
.editorial-card,
.editorial-feature,
.review-card,
.tutorial-card,
.tutorial-overview-card {
    border-color: rgba(148, 163, 184, .14);
}
.market-carousel-card,
.editorial-card__body,
.editorial-feature__copy,
.review-card,
.tutorial-card,
.tutorial-overview-card {
    padding-top: 1.35rem;
}
.review-card__top,
.section-heading,
.editorial-divider {
    gap: 1rem;
}
.editorial-card__body,
.editorial-feature__copy {
    padding: 1.35rem;
}
@media (max-width: 1024px) {
    .market-hero--storefront {
        min-height: auto;
        width: 100%;
        margin: 0;
        padding: calc(66px + 1.4rem) 1.4rem 9rem;
    }
    .market-hero--storefront-home {
        padding-top: calc(66px + 2.65rem);
        padding-bottom: 0;
    }
    .storefront-hero-usecards--anchored {
        margin-top: 1.8rem;
        margin-bottom: -10.75rem;
        padding-inline: 0;
    }
    .market-hero--storefront h1 {
        font-size: clamp(2.4rem, 9vw, 4rem);
    }
}
.ps-header-nav {
    justify-content: space-between;
    width: auto;
    margin-left: auto;
}
.ps-header-nav__cluster,
.ps-header-nav__utility,
.ps-header-nav__links,
.ps-header-nav__section,
.ps-header-nav__desktop-actions {
    display: flex;
    align-items: center;
}
.ps-header-nav__cluster {
    flex: 1 1 auto;
    justify-content: center;
    gap: .75rem;
    min-width: 0;
}
.ps-header-nav__section {
    gap: .62rem;
    min-width: 0;
}
.ps-header-nav__section--storefront {
    width: 100%;
    justify-content: center;
}
.ps-header-nav__title {
    color: #64748b;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ps-header-nav__links {
    gap: .28rem;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
}
.ps-header-nav__links--storefront {
    justify-content: center;
    gap: .25rem;
}
.ps-header-nav__utility {
    justify-content: flex-end;
    gap: .35rem;
    margin-left: auto;
    flex-shrink: 0;
}
.ps-header-nav__desktop-actions {
    gap: .35rem;
}
.shell-storefront .ps-header-nav__links--storefront > a,
.shell-storefront .ps-header-dropdown__toggle,
.shell-storefront .ps-header-account-link,
.shell-storefront .ps-header-cta,
.shell-storefront .ps-header-mobile-actions .btn-acc-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    padding: 0 .8rem !important;
    border: 0;
    border-radius: 6px !important;
    background: transparent !important;
    color: #334155 !important;
    box-shadow: none !important;
    box-sizing: border-box;
    font-size: .9rem !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.shell-storefront .ps-header-nav__links--storefront > a:hover,
.shell-storefront .ps-header-nav__links--storefront > a.is-active,
.shell-storefront .ps-header-dropdown[open] > .ps-header-dropdown__toggle,
.shell-storefront .ps-header-dropdown.is-active > .ps-header-dropdown__toggle,
.shell-storefront .ps-header-account-link:hover,
.shell-storefront .nav-account-menu[open] > .ps-header-account-link,
.shell-storefront .ps-header-cta:hover,
.shell-storefront .ps-header-cta.is-active,
.shell-storefront .ps-header-mobile-actions .btn-acc-secondary:hover {
    background: rgba(15, 23, 42, .06) !important;
    color: #0f172a !important;
    box-shadow: none !important;
}
.shell-storefront .ps-header-cart-btn,
.shell-storefront .ps-theme-toggle,
.shell-storefront .ps-header-menu-toggle {
    align-items: center;
    justify-content: center;
    height: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #334155;
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.shell-storefront .ps-header-cart-btn,
.shell-storefront .ps-header-menu-toggle {
    width: 40px;
    min-width: 40px;
    padding: 0;
}
.shell-storefront .ps-header-cart-btn {
    display: inline-flex;
}
.shell-storefront .ps-theme-toggle {
    display: inline-flex;
    gap: .45rem;
    padding: 0 .75rem;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
}
.shell-storefront .ps-theme-toggle--icon,
.shell-storefront .ps-header-account-link--icon {
    width: 40px;
    min-width: 40px;
    padding: 0 !important;
    justify-content: center;
}
.shell-storefront .ps-header-account-link--icon svg,
.shell-storefront .ps-theme-toggle--icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.shell-storefront .ps-header-cart-btn:hover,
.shell-storefront .ps-header-cart-btn[aria-expanded='true'],
.shell-storefront .ps-theme-toggle:hover,
.shell-storefront .ps-theme-toggle[aria-pressed='true'],
.shell-storefront .ps-header-menu-toggle:hover {
    background: rgba(15, 23, 42, .06);
    color: #0f172a;
    box-shadow: none;
}
.shell-storefront .ps-header-cart-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.shell-storefront .ps-header-cart-btn .nav-cart-badge {
    top: -4px;
    right: -4px;
    border-color: rgba(255, 255, 255, .96);
}
.ps-theme-toggle__icon {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.ps-theme-toggle__sun,
.ps-theme-toggle__moon {
    position: absolute;
    inset: 0;
    transition: opacity .18s ease, transform .18s ease;
}
.ps-theme-toggle__moon {
    opacity: 0;
    transform: scale(.72);
}
html[data-theme='dark'] .ps-theme-toggle__sun {
    opacity: 0;
    transform: scale(.72);
}
html[data-theme='dark'] .ps-theme-toggle__moon {
    opacity: 1;
    transform: scale(1);
}
.ps-header-menu-toggle {
    display: none;
    position: relative;
}
.ps-header-menu-toggle__line {
    position: absolute;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .18s ease, opacity .18s ease;
}
.ps-header-menu-toggle__line--top {
    transform: translateY(-6px);
}
.ps-header-menu-toggle__line--bottom {
    transform: translateY(6px);
}
.ps-header-nav.is-mobile-open .ps-header-menu-toggle__line--top {
    transform: rotate(45deg);
}
.ps-header-nav.is-mobile-open .ps-header-menu-toggle__line--middle {
    opacity: 0;
}
.ps-header-nav.is-mobile-open .ps-header-menu-toggle__line--bottom {
    transform: rotate(-45deg);
}
.shell-storefront .ps-header-dropdown,
.shell-storefront .nav-account-menu--header {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}
.shell-storefront .ps-header-dropdown > summary,
.shell-storefront .nav-account-menu--header summary {
    list-style: none;
}
.shell-storefront .ps-header-dropdown > summary::-webkit-details-marker,
.shell-storefront .nav-account-menu--header summary::-webkit-details-marker {
    display: none;
}
.shell-storefront .ps-header-dropdown__toggle::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: .45rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-1px) rotate(45deg);
    transition: transform .15s ease;
}
.shell-storefront .ps-header-dropdown[open] > .ps-header-dropdown__toggle::after {
    transform: translateY(2px) rotate(-135deg);
}
.shell-storefront .ps-header-dropdown__menu,
.shell-storefront .nav-account-menu__panel {
    position: absolute;
    top: calc(100% + .45rem);
    padding: .35rem;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    display: grid;
    gap: .15rem;
    z-index: 45;
}
.shell-storefront .ps-header-dropdown__menu {
    left: 50%;
    min-width: 210px;
    transform: translateX(-50%);
}
.shell-storefront .nav-account-menu__panel {
    right: 0;
    width: min(300px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
}
.shell-storefront .ps-header-dropdown__menu a,
.shell-storefront .nav-account-menu__links a,
.shell-storefront .nav-account-menu__logout,
.shell-storefront .ps-header-mobile-account-links a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: .62rem .7rem !important;
    border-radius: 6px;
    background: transparent !important;
    color: #334155 !important;
    box-shadow: none !important;
    box-sizing: border-box;
    font-size: .86rem !important;
    font-weight: 700 !important;
    line-height: 1.25;
    text-decoration: none;
}
.shell-storefront .ps-header-dropdown__menu a:hover,
.shell-storefront .ps-header-dropdown__menu a.is-active,
.shell-storefront .nav-account-menu__links a:hover,
.shell-storefront .nav-account-menu__logout:hover,
.shell-storefront .ps-header-mobile-account-links a:hover {
    background: rgba(15, 23, 42, .06) !important;
    color: #0f172a !important;
}
.shell-storefront .nav-account-menu__meta {
    padding: .25rem .45rem .55rem;
    border-bottom: 1px solid rgba(148, 163, 184, .18);
}
.shell-storefront .nav-account-menu__meta strong {
    display: block;
    color: #0f172a;
    font-size: .95rem;
    font-weight: 800;
}
.shell-storefront .nav-account-menu__meta span,
.shell-storefront .nav-account-menu__section-label {
    color: #64748b;
    font-size: .72rem;
}
.shell-storefront .nav-account-menu__links,
.shell-storefront .ps-header-mobile-actions__group,
.shell-storefront .ps-header-mobile-account-links {
    display: grid;
    gap: .2rem;
}
.shell-storefront .nav-account-menu__section-label {
    padding: .45rem .7rem .05rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.shell-storefront .nav-account-menu__logout {
    border-top: 1px solid rgba(148, 163, 184, .18);
    color: #b91c1c !important;
}
.shell-storefront .ps-header-mobile-actions {
    display: none;
}
/* Featured product tier is mobile-drawer-only — desktop has its own
   promoted-link treatment via .ps-header-product-link so the tile
   block would be redundant there. The mobile media query below
   promotes it to display:flex when the drawer is open. */
.shell-storefront .ps-header-products {
    display: none;
}
/* Promoted product links in the desktop nav — mirror the mobile
   featured tier by giving Paystubs / 1099 / Calculator / Blog a
   distinct visual weight that separates them from the secondary nav
   (More / Contact / About). They sit in the regular flex flow but
   each gets a subtle accent: heavier font weight, accent-blue text,
   and a glassy hover tint pulled from the brand-blue token. The
   active-page state lights up with the full primary background so
   the user always knows where they are.

   The base nav rule already declares color / background / font-weight
   with !important (it's a hard reset for the cluster), so the overrides
   below need to use !important to win the cascade — specificity alone
   isn't enough against !important. */
.shell-storefront .ps-header-nav__links--storefront > a.ps-header-product-link {
    position: relative;
    padding: .42rem .85rem !important;
    border-radius: 8px !important;
    color: var(--primary, #0385ff) !important;
    font-weight: 700 !important;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.shell-storefront .ps-header-nav__links--storefront > a.ps-header-product-link:hover,
.shell-storefront .ps-header-nav__links--storefront > a.ps-header-product-link:focus-visible {
    background: rgba(3, 133, 255, .1) !important;
    color: var(--primary, #0385ff) !important;
}
.shell-storefront .ps-header-nav__links--storefront > a.ps-header-product-link.is-active {
    background: rgba(3, 133, 255, .15) !important;
    color: var(--primary, #0385ff) !important;
}
html[data-theme='dark'] .shell-storefront .ps-header-nav__links--storefront > a.ps-header-product-link {
    color: #bfdbfe !important;
}
html[data-theme='dark'] .shell-storefront .ps-header-nav__links--storefront > a.ps-header-product-link:hover,
html[data-theme='dark'] .shell-storefront .ps-header-nav__links--storefront > a.ps-header-product-link:focus-visible {
    background: rgba(191, 219, 254, .15) !important;
    color: #fff !important;
}
html[data-theme='dark'] .shell-storefront .ps-header-nav__links--storefront > a.ps-header-product-link.is-active {
    background: rgba(3, 133, 255, .28) !important;
    color: #fff !important;
}
/* Tools dropdown — visually identical to About / More so the secondary
   nav reads as one consistent tier. The Products / Tools split survives
   on mobile via the eyebrow-labeled tile groups; on desktop the only
   elevation reserved is for Paystubs + 1099 as direct accent links. */
@media (max-width: 1180px) {
    .shell-storefront .ps-header-nav--storefront {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .35rem;
    }
    .shell-storefront .ps-header-menu-toggle {
        display: inline-flex;
    }
    .shell-storefront .ps-header-nav__desktop-actions {
        display: none;
    }
    .shell-storefront .ps-theme-toggle__label {
        display: none;
    }
    .shell-storefront .ps-header-nav__cluster {
        display: none;
        position: absolute;
        top: calc(100% + .45rem);
        left: 1rem;
        right: 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
        padding: .75rem;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: 8px;
        background: rgba(255, 255, 255, .98);
        box-shadow: none;
        z-index: 25;
    }
    .shell-storefront .ps-header-nav.is-mobile-open .ps-header-nav__cluster {
        display: flex;
    }
    .shell-storefront .ps-header-nav__section--storefront,
    .shell-storefront .ps-header-nav__links--storefront {
        display: grid;
        width: 100%;
        justify-content: stretch;
        gap: .25rem;
    }
    /* Featured product tier inside the mobile drawer. Reads as four
       product cards stacked vertically — accent-bordered rows with an
       icon, name, and tagline — sitting above the standard nav links
       so the four primary destinations are the first thing a visitor
       sees when the drawer opens. Tier-2 nav (Home / About / Resources
       / Contact) stays as plain text rows beneath. */
    .shell-storefront .ps-header-products {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        margin: 0 0 .85rem;
        padding: 0 0 .85rem;
        border-bottom: 1px solid rgba(148, 163, 184, .22);
    }
    .shell-storefront .ps-header-products__eyebrow {
        display: inline-flex;
        align-self: flex-start;
        padding: .3rem .7rem;
        margin: .1rem 0 .25rem;
        border-radius: 999px;
        background: rgba(3, 133, 255, .1);
        color: var(--primary, #0385ff);
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    .shell-storefront .ps-header-product {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: .8rem;
        padding: .9rem 1rem;
        /* Match .btn-acc-primary chrome — 25px pill radius, layered ambient
           shadow, and no visible border — so the product tile reads as the
           same family of element as the Create Paystub CTA. */
        border-radius: 25px;
        border: 0;
        background: linear-gradient(180deg, rgba(3, 133, 255, .03), rgba(3, 133, 255, .07));
        color: var(--heading, #0f172a);
        text-decoration: none;
        box-shadow: 0 0 0 1px rgba(148, 163, 184, .12), 0 0 18px rgba(15, 23, 42, .04), 0 0 38px rgba(15, 23, 42, .05);
        transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .shell-storefront .ps-header-product:hover,
    .shell-storefront .ps-header-product:focus-visible {
        border-color: var(--primary, #0385ff);
        background: linear-gradient(180deg, rgba(3, 133, 255, .08), rgba(3, 133, 255, .14));
        transform: translateY(-1px);
    }
    .shell-storefront .ps-header-product.is-active {
        border-color: var(--primary, #0385ff);
        background: rgba(3, 133, 255, .12);
    }
    .shell-storefront .ps-header-product__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(3, 133, 255, .12);
        color: var(--primary, #0385ff);
        flex-shrink: 0;
    }
    .shell-storefront .ps-header-product__body {
        display: flex;
        flex-direction: column;
        gap: .15rem;
        min-width: 0;
    }
    .shell-storefront .ps-header-product__title {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.2;
        color: var(--heading, #0f172a);
    }
    .shell-storefront .ps-header-product__tag {
        font-size: .8rem;
        line-height: 1.3;
        color: var(--muted, #64748b);
    }
    .shell-storefront .ps-header-product__chev {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--primary, #0385ff);
        flex-shrink: 0;
    }
    html[data-theme='dark'] .shell-storefront .ps-header-product {
        background: rgba(255, 255, 255, .04);
        border-color: rgba(255, 255, 255, .08);
        color: #fff;
    }
    html[data-theme='dark'] .shell-storefront .ps-header-product:hover,
    html[data-theme='dark'] .shell-storefront .ps-header-product:focus-visible {
        background: rgba(3, 133, 255, .18);
        border-color: var(--primary, #0385ff);
    }
    html[data-theme='dark'] .shell-storefront .ps-header-product__title {
        color: #fff;
    }
    html[data-theme='dark'] .shell-storefront .ps-header-product__tag {
        color: #bfdbfe;
    }
    /* Primary-button color treatment for OUR PRODUCTS tiles — solid
       brand blue with white text + icon, matching the .btn-acc-primary
       CTA. Reinforces these as the paid hero destinations. */
    .shell-storefront .ps-header-products:not(.ps-header-products--tools) .ps-header-product {
        background: #0f4fff;
        border-color: #0f4fff;
        color: #fff;
    }
    .shell-storefront .ps-header-products:not(.ps-header-products--tools) .ps-header-product:hover,
    .shell-storefront .ps-header-products:not(.ps-header-products--tools) .ps-header-product:focus-visible {
        background: #0258b5 !important;
        border-color: #0258b5 !important;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 18px 32px rgba(2, 88, 181, .26);
    }
    .shell-storefront .ps-header-products:not(.ps-header-products--tools) .ps-header-product__icon {
        background: rgba(255, 255, 255, .18);
        color: #fff;
    }
    .shell-storefront .ps-header-products:not(.ps-header-products--tools) .ps-header-product__title,
    .shell-storefront .ps-header-products:not(.ps-header-products--tools) .ps-header-product__chev {
        color: #fff;
    }
    .shell-storefront .ps-header-products:not(.ps-header-products--tools) .ps-header-product__tag {
        color: rgba(255, 255, 255, .82);
    }
    /* Secondary-button (inverted) treatment for TOOLS tiles — white bg,
       brand-blue text + icon + border. Reads as a softer companion to
       the solid-blue product tiles above. */
    .shell-storefront .ps-header-products--tools .ps-header-product {
        background: #fff;
        border: 1.5px solid #0f4fff;
        color: #0f4fff;
        /* Tools tiles drop the ambient shadow so the inverted treatment
           reads as a flatter "secondary" pair next to the heavier filled
           products. Still uses the same 25px pill from the base rule. */
        box-shadow: none;
    }
    .shell-storefront .ps-header-products--tools .ps-header-product:hover,
    .shell-storefront .ps-header-products--tools .ps-header-product:focus-visible {
        background: rgba(15, 79, 255, .08) !important;
        border-color: #0f4fff !important;
        color: #0f4fff;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(15, 79, 255, .14);
    }
    .shell-storefront .ps-header-products--tools .ps-header-product__icon {
        background: rgba(15, 79, 255, .12);
        color: #0f4fff;
    }
    .shell-storefront .ps-header-products--tools .ps-header-product__title,
    .shell-storefront .ps-header-products--tools .ps-header-product__chev {
        color: #0f4fff;
    }
    .shell-storefront .ps-header-products--tools .ps-header-product__tag {
        color: #475569;
    }
    /* Dark-mode parity — keep the same primary/secondary inversion but
       lift the tones so they sit on the dark drawer background. */
    html[data-theme='dark'] .shell-storefront .ps-header-products:not(.ps-header-products--tools) .ps-header-product {
        background: #0385ff;
        border-color: #0385ff;
        color: #fff;
    }
    html[data-theme='dark'] .shell-storefront .ps-header-products--tools .ps-header-product {
        background: transparent;
        border: 1.5px solid #0385ff;
        color: #bfdbfe;
    }
    html[data-theme='dark'] .shell-storefront .ps-header-products--tools .ps-header-product__icon {
        background: rgba(3, 133, 255, .25);
        color: #bfdbfe;
    }
    html[data-theme='dark'] .shell-storefront .ps-header-products--tools .ps-header-product__title,
    html[data-theme='dark'] .shell-storefront .ps-header-products--tools .ps-header-product__chev {
        color: #bfdbfe;
    }
    html[data-theme='dark'] .shell-storefront .ps-header-products--tools .ps-header-product__tag {
        color: #94a3b8;
    }
    .shell-storefront .ps-header-nav__links--storefront > a,
    .shell-storefront .ps-header-dropdown__toggle {
        width: 100%;
        justify-content: space-between;
    }
    /* On mobile the featured product tier (.ps-header-products) already
       lists Paystubs / 1099 / Calculator / Blog with rich tile rows, so
       hide the duplicate top-level product links inside the drawer.
       Selector specificity here intentionally matches the earlier
       `.ps-header-nav__links--storefront > a` rule (which forces
       display:inline-flex) so this hide wins inside the media query. */
    .shell-storefront .ps-header-nav__links--storefront > a.ps-header-product-link {
        display: none;
    }
    /* Same idea for the desktop "Tools" dropdown — the mobile drawer's
       TOOLS tile group already covers Tax Calculator + Blog, so hide
       the duplicate dropdown inside the drawer. */
    .shell-storefront .ps-header-dropdown--desktop-only {
        display: none;
    }
    .shell-storefront .ps-header-dropdown__menu {
        position: static;
        min-width: 0;
        padding: .2rem 0 0 .5rem;
        border: 0;
        background: transparent;
        transform: none;
    }
    .shell-storefront .ps-header-mobile-actions {
        display: grid;
        gap: .45rem;
        padding-top: .55rem;
        border-top: 0;
    }
    .shell-storefront .ps-header-mobile-actions .btn-acc-secondary,
    .shell-storefront .ps-header-cta--mobile {
        width: 100%;
        justify-content: flex-start;
    }
}
.home-faq-grid--accordion {
    grid-template-columns: 1fr;
}
.home-faq-accordion {
    padding: 0;
    overflow: hidden;
}
    .home-faq-accordion summary {
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.35rem 1.4rem;
        cursor: pointer;
    }
        .home-faq-accordion summary::-webkit-details-marker {
            display: none;
        }
        .home-faq-accordion summary span:first-child {
            color: #0f172a;
            font-size: 1.02rem;
            font-weight: 700;
            line-height: 1.5;
        }
.home-faq-accordion__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding-bottom: 0.7rem;
    padding-left: 0.1rem;
    border-radius: 999px;
    background: rgba(3, 133, 255, .08);
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: transform .18s ease, background .18s ease;
}
.home-faq-accordion[open] .home-faq-accordion__icon {
    transform: rotate(45deg);
    background: rgba(3, 133, 255, .14);
}
.home-faq-accordion__body {
    padding: 0 1.4rem 1.35rem;
    border-top: 1px solid rgba(148, 163, 184, .12);
}
    .home-faq-accordion__body p {
        margin-top: 1rem;
    }
html[data-theme='dark'] {
    color-scheme: dark;
}
html[data-theme='dark'] .shell-storefront .ps-header-nav.is-mobile-open .ps-header-nav__cluster {
    background: rgba(6,6,20,.98);
    box-shadow: var(--shadow-glass);
}
    html[data-theme='dark'] .market-hero,
    html[data-theme='dark'] .market-section,
    html[data-theme='dark'] .market-inline-cta,
    html[data-theme='dark'] .editorial-card,
    html[data-theme='dark'] .editorial-feature,
    html[data-theme='dark'] .market-carousel-card,
    html[data-theme='dark'] .tutorial-card,
    html[data-theme='dark'] .tutorial-overview-card,
    html[data-theme='dark'] .content-hero,
    html[data-theme='dark'] .account-page-hero,
    html[data-theme='dark'] .step-card,
    html[data-theme='dark'] .account-side-card,
    html[data-theme='dark'] .info-card {
        background: radial-gradient(circle at top right, rgba(5, 10, 25, 0.95), rgba(15, 20, 35, 0.97));
        border-color: var(--border);
        color: var(--text);
    }
    html[data-theme='dark'] .market-section--verification-promo {
        border-color: transparent;
        box-shadow: none;
    }
    html[data-theme='dark'] .verification-promo-hero__copy h2,
    html[data-theme='dark'] .verification-promo-card h3,
    html[data-theme='dark'] .verification-promo-note h3 {
        color: var(--heading);
    }
    html[data-theme='dark'] .verification-promo-hero__copy p,
    html[data-theme='dark'] .verification-promo-card p,
    html[data-theme='dark'] .verification-promo-note p,
    html[data-theme='dark'] .verification-promo-card__price span,
    html[data-theme='dark'] .verification-promo-card__features li,
    html[data-theme='dark'] .verification-promo-card__intro {
        color: var(--text-muted);
    }
    html[data-theme='dark'] .verification-promo-card {
        background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
        border-color: var(--border);
        box-shadow: var(--shadow-glass);
    }
    html[data-theme='dark'] .verification-promo-card__price strong {
        color: var(--heading);
    }
    html[data-theme='dark'] .verification-promo-note {
        background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
        border-color: var(--border);
    }
@media (prefers-reduced-motion: reduce) {
    .verification-promo-card,
    .verification-promo-note {
        opacity: 1;
        transform: none;
        transition: none;
    }
        .verification-promo-card.is-visible .verification-promo-card__inner {
            animation: none;
        }
}
html[data-theme='dark'] .article-problem-panel,
html[data-theme='dark'] .article-key-takeaways-panel,
html[data-theme='dark'] .article-toc-panel,
html[data-theme='dark'] .article-conclusion-panel,
html[data-theme='dark'] .article-resource-strip,
html[data-theme='dark'] .article-related-section,
html[data-theme='dark'] .article-faq-section,
html[data-theme='dark'] .article-related-card,
html[data-theme='dark'] .article-faq-item {
    border-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .article-sidebar-panel {
    background: var(--surface);
    border-color: var(--border);
}
    html[data-theme='dark'] .ps-header nav a,
    html[data-theme='dark'] .section-heading h2,
    html[data-theme='dark'] .market-hero h1,
    html[data-theme='dark'] .editorial-card__body h3 a,
    html[data-theme='dark'] .editorial-feature__copy h3 a,
    html[data-theme='dark'] .home-faq-accordion summary span:first-child,
    html[data-theme='dark'] .article-topmatter h1,
    html[data-theme='dark'] .article-problem-panel h2,
    html[data-theme='dark'] .article-toc-panel h2,
    html[data-theme='dark'] .article-conclusion-panel h2,
    html[data-theme='dark'] .article-section-heading h2,
    html[data-theme='dark'] .article-sidebar-panel strong,
    html[data-theme='dark'] .article-related-card__body h3,
    html[data-theme='dark'] .article-related-card__body h3 a,
    html[data-theme='dark'] .article-faq-item summary span:first-child,
    html[data-theme='dark'] label,
    html[data-theme='dark'] .info-card h2,
    html[data-theme='dark'] .info-card h3 {
        color: var(--heading);
    }
html[data-theme='dark'] .paystub-purpose-card strong {
    color: var(--heading);
}
html[data-theme='dark'] p,
html[data-theme='dark'] li,
html[data-theme='dark'] .market-subtitle,
html[data-theme='dark'] .section-heading p,
html[data-theme='dark'] .editorial-meta,
html[data-theme='dark'] .ps-header-nav__title,
html[data-theme='dark'] .nav-account-menu__meta span,
html[data-theme='dark'] .info-subtitle,
html[data-theme='dark'] .info-prose p,
html[data-theme='dark'] .info-prose li,
html[data-theme='dark'] .paystub-purpose-card li,
html[data-theme='dark'] .article-topmatter__summary,
html[data-theme='dark'] .article-problem-list li,
html[data-theme='dark'] .article-key-takeaways-list li,
html[data-theme='dark'] .article-toc-list li,
html[data-theme='dark'] .article-sidebar-panel p,
html[data-theme='dark'] .article-related-card__body p,
html[data-theme='dark'] .article-faq-item__body p {
    color: var(--text-muted);
}
html[data-theme='dark'] .article-toc-list a {
    color: #93c5fd;
}
html[data-theme='dark'] .article-faq-item__icon {
    color: #93c5fd;
}
html[data-theme='dark'] .market-section--verification-promo
html[data-theme='dark'] .market-section--review-spotlight
html[data-theme='dark'] #storefrontFaqBlogResourcesSection
html[data-theme='dark'] #storefrontGuideExplainerSection {
    background: radial-gradient(circle at top right, rgba(5, 10, 25, 0.95), rgba(15, 20, 35, 0.97)), var(--surface);
    
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .06)) drop-shadow(0 2px 4px rgba(255, 255, 255, .06)) drop-shadow(0 4px 8px rgba(255, 255, 255, .06));
    filter: blur( 10px);
}
html[data-theme='dark'] .ps-header nav a:hover,
html[data-theme='dark'] .ps-header nav a.is-active,
html[data-theme='dark'] .ps-header-link--utility,
html[data-theme='dark'] .home-faq-accordion__icon,
html[data-theme='dark'] .nav-account-menu__panel,
html[data-theme='dark'] .nav-account-menu__links a:hover,
html[data-theme='dark'] .ps-field input,
html[data-theme='dark'] .ps-field textarea,
html[data-theme='dark'] .ps-field select {
    background: var(--surface) !important;
    border-color: var(--border);
}
html[data-theme='dark'] .ps-field input,
html[data-theme='dark'] .ps-field textarea,
html[data-theme='dark'] .ps-field select {
    color: var(--text);
}
    html[data-theme='dark'] .ps-field input::placeholder,
    html[data-theme='dark'] .ps-field textarea::placeholder {
        color: var(--text-muted);
    }
html[data-theme='dark'] .shell-storefront .ps-header-nav__links--storefront > a,
html[data-theme='dark'] .shell-storefront .ps-header-dropdown__toggle,
html[data-theme='dark'] .shell-storefront .ps-header-account-link,
html[data-theme='dark'] .shell-storefront .ps-header-cta,
html[data-theme='dark'] .shell-storefront .ps-header-mobile-actions .btn-acc-secondary,
html[data-theme='dark'] .shell-storefront .ps-header-cart-btn,
html[data-theme='dark'] .shell-storefront .ps-theme-toggle,
html[data-theme='dark'] .shell-storefront .ps-header-menu-toggle {
    background: transparent !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}
html[data-theme='dark'] .shell-storefront .ps-header-nav__links--storefront > a:hover,
html[data-theme='dark'] .shell-storefront .ps-header-nav__links--storefront > a.is-active,
html[data-theme='dark'] .shell-storefront .ps-header-dropdown[open] > .ps-header-dropdown__toggle,
html[data-theme='dark'] .shell-storefront .ps-header-dropdown.is-active > .ps-header-dropdown__toggle,
html[data-theme='dark'] .shell-storefront .ps-header-account-link:hover,
html[data-theme='dark'] .shell-storefront .nav-account-menu[open] > .ps-header-account-link,
html[data-theme='dark'] .shell-storefront .ps-header-cta:hover,
html[data-theme='dark'] .shell-storefront .ps-header-cta.is-active,
html[data-theme='dark'] .shell-storefront .ps-header-mobile-actions .btn-acc-secondary:hover,
html[data-theme='dark'] .shell-storefront .ps-header-cart-btn:hover,
html[data-theme='dark'] .shell-storefront .ps-header-cart-btn[aria-expanded='true'],
html[data-theme='dark'] .shell-storefront .ps-theme-toggle:hover,
html[data-theme='dark'] .shell-storefront .ps-theme-toggle[aria-pressed='true'],
html[data-theme='dark'] .shell-storefront .ps-header-menu-toggle:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}
html[data-theme='dark'] .shell-storefront .ps-header-dropdown__menu,
html[data-theme='dark'] .shell-storefront .nav-account-menu__panel,
html[data-theme='dark'] .shell-storefront .ps-header-nav__cluster {
    border-color: var(--border);
    box-shadow: none !important;
}
html[data-theme='dark'] .shell-storefront .ps-header-dropdown__menu 
html[data-theme='dark'] .shell-storefront .ps-header-nav.is-mobile-open .ps-header-nav__cluster
{
    background: var(--surface) !important;
}
html[data-theme='dark'] .shell-storefront .ps-header-dropdown__menu{
        background: var(--surface);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .06)) drop-shadow(0 2px 4px rgba(0, 0, 0, .06)) drop-shadow(0 4px 8px rgba(0, 0, 0, .06));
}
html[data-theme='dark'] .shell-storefront .ps-header-dropdown__menu a:hover{
        background: #3e98ff7c !important;
}
html[data-theme='dark'] .shell-storefront .ps-header-dropdown__menu a,
html[data-theme='dark'] .shell-storefront .ps-header-mobile-account-links a,
html[data-theme='dark'] .shell-storefront .nav-account-menu__links a {
    color: #e2e8f0 !important;
}
html[data-theme='dark'] .shell-storefront .ps-header-cart-btn .nav-cart-badge {
    border-color: var(--bg);
}
html[data-theme='dark'] .ps-footer-copy,
html[data-theme='dark'] .ps-footer a {
    color: var(--text-muted);
}
html[data-theme='dark'] .storefront-hero-usecard {
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
    border-color: var(--border);
}
    html[data-theme='dark'] .storefront-hero-usecard__title {
        color: var(--heading);
    }
    html[data-theme='dark'] .storefront-hero-usecard p {
        color: var(--text-muted);
    }
html[data-theme='dark'] .storefront-hero-usecard__eyebrow {
    background: rgba(191, 219, 254, .14);
    color: #bfdbfe;
}
html[data-theme='dark'] .storefront-hero-usecard__price-note {
    color: var(--text-muted);
}
    html[data-theme='dark'] .storefront-hero-usecard__price-note strong {
        color: var(--heading);
    }
html[data-theme='dark'] .hero-micro-proof {
    color: var(--text-muted);
}
html[data-theme='dark'] .hero-trust-strip {
    color: var(--text-muted);
}
html[data-theme='dark'] .market-hero--storefront-home {
    background:
        radial-gradient(46% 40% at 14% 6%, rgba(3, 133, 255, .22), transparent 70%),
        radial-gradient(40% 36% at 88% 2%, rgba(6, 182, 212, .16), transparent 72%),
        radial-gradient(60% 45% at 50% 108%, rgba(3, 133, 255, .10), transparent 65%);
}
html[data-theme='dark'] .market-hero--storefront-home::before {
    background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
}
html[data-theme='dark'] .storefront-hero-title-accent {
    background: linear-gradient(128deg, #4fa8ff 15%, #22d3ee 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 1024px) {
    .storefront-hero-usecards {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .ps-header {
        padding: 0 1rem;
        height: 66px;
        min-height: 66px;
        flex-wrap: nowrap;
        gap: .8rem;
        overflow: visible;
    }
    .shell-main--storefront-offset {
        padding-top: 66px;
    }
    .ps-logo-image {
        height: 46px;
    }
    .ps-logo-link {
        max-width: min(180px, 44vw);
    }
    .market-hero--storefront {
        min-height: auto;
        padding-bottom: 2rem;
    }
    .market-hero--storefront-home {
        padding-top: calc(66px + 1.55rem);
        padding-bottom: 1.1rem;
    }
    .storefront-hero-usecards {
        width: 100%;
        max-width: 100%;
        gap: .65rem;
    }
    .storefront-hero-usecards--anchored {
        margin-top: 1rem;
        margin-bottom: 0;
    }
    .verification-promo-card,
    .verification-promo-note,
    .tutorial-card,
    .tutorial-overview-card,
    .editorial-card,
    .editorial-feature {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: 20px;
    }
    .verification-promo-card,
    .verification-promo-note,
    .tutorial-card,
    .tutorial-overview-card,
    .editorial-card__body,
    .editorial-feature__copy {
        padding: 1rem;
    }
    .editorial-card__cover,
    .editorial-feature__cover {
        aspect-ratio: 16 / 10;
        margin-bottom: .85rem;
    }
    .storefront-hero-usecards--anchored .storefront-hero-usecard {
        padding: 1rem 1rem 1.05rem;
        gap: .72rem;
        border-radius: 20px;
    }
        .storefront-hero-usecards--anchored .storefront-hero-usecard__title {
            max-width: 16ch;
            /* 1.75rem = 28px — matches every other section H2 on the
               storefront so the hero use-card titles read at the
               same scale as "What is a paystub?" / "Why choose"
               etc. Was 1.18rem (= 18.88px), the only H2 outlier left
               after the audit's typography pass. */
            font-size: 1.75rem;
        }
        .storefront-hero-usecards--anchored .storefront-hero-usecard p {
            max-width: 29ch;
            font-size: .93rem;
            line-height: 1.58;
        }
    .storefront-hero-usecard__eyebrow {
        font-size: .65rem;
        padding: .25rem .6rem;
    }
    .storefront-hero-usecard__price-note {
        margin-top: -.1rem;
        font-size: .76rem;
    }
        .storefront-hero-usecard__price-note strong {
            font-size: .94rem;
        }
    .storefront-hero-usecards--anchored .storefront-hero-usecard .btn-acc-primary {
        width: 100%;
        justify-self: stretch;
        margin-top: 0;
        margin-bottom: 0;
        padding: .78rem 1rem;
        font-size: .86rem;
    }
    .storefront-hero-usecards--anchored .storefront-hero-usecard__art {
        min-height: 126px;
        margin-top: -.1rem;
        margin-bottom: 0;
        padding-top: 0;
        transform: none;
    }
        .storefront-hero-usecards--anchored .storefront-hero-usecard__art img {
            max-height: 132px;
            width: min(100%, 214px);
        }
}
.tracking-pixel {
    display: none;
}
.tracking-consent-bar {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: #0f172a;
    color: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .28);
}
.tracking-consent-bar__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    flex-wrap: wrap;
}
.tracking-consent-bar__copy {
    max-width: 58rem;
    line-height: 1.6;
}
.tracking-consent-bar__actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}
.tracking-consent-bar__button {
    padding: .55rem 1rem;
}
.btn-acc-secondary--inverse {
    background: #1e293b;
    color: #fff;
    border-color: #334155;
}
.ps-alert--spaced {
    margin-bottom: 1rem;
}
.ps-field--spaced {
    margin-bottom: 1.2rem;
}
.btn-acc-primary--block {
    width: 100%;
}
.verify-code-input {
    font-size: 1.4rem;
    letter-spacing: .3rem;
    text-align: center;
}
.link-accent {
    color: var(--blue);
}
.btn-compact {
    padding: .35rem .75rem;
    font-size: .75rem;
}
.coming-soon-panel {
    max-width: 680px;
    margin: 3rem auto;
    padding: 2rem;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.coming-soon-panel__mark {
    margin-bottom: 1rem;
    color: #7c3aed;
    font-size: 3rem;
    font-weight: 800;
}
.coming-soon-panel__title {
    margin-bottom: .75rem;
    color: #4c1d95;
}
.coming-soon-panel__copy {
    margin-bottom: 1.5rem;
    color: #666;
    line-height: 1.6;
}
.coming-soon-panel__link {
    display: inline-block;
    padding: .75rem 2rem;
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.info-shell {
    width: 100%;
    max-width: var(--site-container);
    margin: 0 auto;
    padding: 2rem var(--site-gutter-x) 3.5rem;
}
.info-hero {
    margin-bottom: 1.5rem;
}
.info-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(3, 133, 255, .09);
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.info-title {
    margin-top: .95rem;
    max-width: 14ch;
    color: #0f172a;
    font-size: clamp(2.15rem, 3vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -.04em;
}
.info-subtitle {
    margin-top: .9rem;
    max-width: 64ch;
    color: #475569;
    font-size: 1.02rem;
    line-height: 1.75;
}
.info-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.25fr) minmax(260px, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.info-main,
.info-sidebar {
    display: grid;
    gap: 1.25rem;
}
.info-card {
    padding: 1.45rem;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}
.info-card--soft {
    background: linear-gradient(140deg, rgba(3, 133, 255, .08), rgba(96, 165, 250, .08));
}
.info-card--accent {
    border-color: color-mix(in srgb, var(--brand, #0385ff) 22%, var(--border, rgba(148, 163, 184, .16)) 78%);
    background: linear-gradient(140deg, color-mix(in srgb, var(--brand, #0385ff) 10%, transparent), color-mix(in srgb, var(--accent, #18b7ff) 8%, transparent), color-mix(in srgb, var(--brand, #0385ff) 6%, transparent));
}
.info-card h2 {
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1.14;
    letter-spacing: -.03em;
}
.info-card h3 {
    color: #0f172a;
    font-size: 1.02rem;
}
.info-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .9rem;
    color: #64748b;
    font-size: .79rem;
    font-weight: 700;
}
.info-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
}
.info-prose {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}
.info-prose--spaced {
    margin-top: 1.1rem;
}
.info-prose p,
.info-prose li {
    color: #475569;
    line-height: 1.75;
}
.info-prose ul,
.info-prose ol {
    padding-left: 1.15rem;
}
.info-prose li + li {
    margin-top: .45rem;
}
.info-link-list {
    display: grid;
    gap: .65rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
    .info-link-list a {
        display: block;
        padding: .8rem .9rem;
        border: 1px solid rgba(148, 163, 184, .28);
        border-radius: 14px;
        background: #f8fafc;
        color: #334155;
        font-weight: 600;
        text-decoration: none;
        transition: border-color .15s, transform .15s, color .15s;
    }
        .info-link-list a:hover {
            transform: translateY(-1px);
            border-color: rgba(3, 133, 255, .32);
            color: var(--primary);
        }
.info-note {
    padding: .95rem 1rem;
    border-left: 4px solid var(--green);
    border-radius: 14px;
    background: rgba(3, 133, 255, .08);
    color: #0f4c81;
    font-weight: 600;
}
.info-note--top-gap {
    margin-top: 1rem;
}
.legal-summary {
    margin-top: 1rem;
    padding-left: 1.1rem;
}
    .legal-summary li {
        color: #334155;
        font-weight: 600;
        line-height: 1.7;
    }
.legal-section {
    scroll-margin-top: 110px;
}
.preview-error-message {
    color: #dc2626;
    font-size: .8rem;
}
.preview-error-message--padded {
    padding: 1rem;
    font-size: .85rem;
}
@media (max-width: 1024px) {
    .info-shell {
        padding: 1.5rem 1rem 2.75rem;
    }
    .info-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .tracking-consent-bar {
        left: .75rem;
        right: .75rem;
        bottom: .75rem;
        padding: .95rem 1rem;
    }
    .coming-soon-panel {
        margin: 2rem 1rem;
        padding: 1.5rem 1.15rem;
    }
}
.generator-story-section {
    --generator-node-size: 64px;
    --generator-radius: 30px;
    background: transparent;
    border: none;
    border-radius: 0 !important;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    padding-top: clamp(14rem, 20vw, 18rem);
}
    .generator-story-section::before {
        display: none;
    }
.generator-story-shell {
    position: relative;
    overflow: visible;
    width: min(100%, var(--sf-container));
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2.25rem) clamp(2.15rem, 4vw, 3.25rem);
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
    .generator-story-shell * {
        box-sizing: border-box;
    }
.generator-story-hero {
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
    animation: generatorStoryFadeUp .3s ease-out both;
}
    .generator-story-hero h2 {
        margin: 0;
        font-family: var(--font-display);
        font-size: clamp(2.5rem, 6vw, 4rem);
        line-height: 1.02;
        letter-spacing: -.04em;
        font-weight: 700;
        color: #0f172a;
        text-wrap: balance;
    }
    .generator-story-hero p {
        margin: 20px auto 0;
        max-width: 720px;
        font-size: clamp(1rem, 2vw, 1.18rem);
        line-height: 1.75;
        color: rgba(15,23,42,0.72);
        text-wrap: pretty;
    }
.generator-story-desktop {
    position: relative;
    margin-top: clamp(2.35rem, 4vw, 4rem);
    display: none;
}
.generator-story-grid {
    display: grid;
    gap: 20px;
    align-items: start;
    position: relative;
    z-index: 1;
}
.generator-story-track,
.generator-story-progress {
    position: absolute;
    top: calc(var(--generator-node-size) / 2);
    height: 2px;
    transform: translateY(-50%);
    border-radius: 999px;
}
.generator-story-track {
    z-index: 0;
    background: rgba(15,23,42,0.10);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
.generator-story-progress {
    z-index: 0;
    width: 0;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #14b8a6);
    background-size: 220% 100%;
    transition: width .45s ease-in-out;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 4px 18px rgba(59,130,246,0.16);
    animation: generatorStoryFlow 3s linear infinite;
}
.generator-story-step {
    position: relative;
    padding: 0 8px;
    text-align: center;
}
.generator-story-section button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.generator-story-node-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.generator-story-node {
    width: var(--generator-node-size);
    height: var(--generator-node-size);
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,243,255,0.98));
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(18px);
    position: relative;
    transform: translateY(0) scale(1);
    transition: transform .3s ease-out, border-color .3s ease-out, background .3s ease-out, box-shadow .3s ease-out;
    box-shadow: 0 8px 16px rgba(15,23,42,0.05), 0 20px 34px rgba(15,23,42,0.07), inset 0 1px 0 rgba(255,255,255,0.95);
    opacity: 1;
}
    .generator-story-node::after,
    .generator-story-mobile-badge::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(90deg, #3b82f6, #6366f1, #14b8a6, #3b82f6);
        background-size: 220% 100%;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        opacity: 0;
        pointer-events: none;
    }
.generator-story-step.is-completed .generator-story-node {
    border-color: rgba(15,23,42,0.10);
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,243,255,0.98));
}
.generator-story-step.is-active .generator-story-node {
    border-color: rgba(59,130,246,0.24);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(246,250,255,1));
    transform: translateY(-2px) scale(1.10);
    box-shadow: 0 10px 20px rgba(15,23,42,0.06), 0 26px 48px rgba(59,130,246,0.16), 0 0 0 6px rgba(59,130,246,0.08), inset 0 1px 0 rgba(255,255,255,1);
}
    .generator-story-step.is-active .generator-story-node::after,
    .generator-story-mobile-step.is-active .generator-story-mobile-badge::after {
        opacity: 1;
        animation: generatorStoryFlow 2.8s linear infinite;
    }
.generator-story-node-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(59,130,246,0.28);
    opacity: 0;
    transform: scale(.9);
}
.generator-story-step.is-active .generator-story-node-ring {
    animation: generatorStoryNodeRing 1.6s ease-out infinite;
}
.generator-story-node-number {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: rgba(15,23,42,0.86);
    transition: color .3s ease;
}
.generator-story-step.is-active .generator-story-node-number {
    color: #2563eb;
}
.generator-story-card-wrap {
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: visible;
    transition: max-height .55s ease, opacity .25s ease, margin-top .35s ease;
}
.generator-story-step.is-revealed .generator-story-card-wrap {
    margin-top: 24px;
    max-height: 520px;
    opacity: 1;
}
.generator-story-fusion-stem {
    position: absolute;
    left: 50%;
    top: calc(var(--generator-node-size) + 2px);
    width: 2px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, #3b82f6 0%, #6366f1 45%, #14b8a6 78%, rgba(20,184,166,0) 100%);
    background-size: 100% 220%;
    box-shadow: 0 0 10px rgba(59,130,246,0.10);
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: transform .38s ease, opacity .22s ease;
    pointer-events: none;
}
.generator-story-step.is-revealed .generator-story-fusion-stem {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
}
.generator-story-step.is-active .generator-story-fusion-stem {
    box-shadow: 0 0 14px rgba(59,130,246,0.14);
    animation: generatorStoryFlowVertical 3.2s linear infinite;
}
.generator-story-card-button {
    width: 100%;
    display: block;
    max-width: 390px;
    margin: 0 auto;
    transform: translateY(64px) scale(.96);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}
.generator-story-step.is-revealed .generator-story-card-button {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.generator-story-card {
    --generator-story-card-inline-pad: 28px;
    position: relative;
    overflow: hidden;
    border-radius: var(--generator-radius);
    border: 1px solid rgba(15,23,42,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(252,253,255,1));
    padding: 28px var(--generator-story-card-inline-pad) 26px;
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 20px rgba(15,23,42,0.04), 0 24px 48px rgba(15,23,42,0.06), 0 40px 80px rgba(59,130,246,0.05), inset 0 1px 0 rgba(255,255,255,0.98);
    transition: transform .35s ease-out, opacity .35s ease-out, color .35s ease-out, border-color .35s ease-out, background .35s ease-out, box-shadow .35s ease-out;
}
    .generator-story-card::before {
        content: none;
    }
    .generator-story-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(90deg, #3b82f6, #6366f1, #14b8a6, #3b82f6);
        background-size: 220% 100%;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        opacity: 0;
        pointer-events: none;
    }
.generator-story-step.is-completed .generator-story-card {
    background: linear-gradient(180deg, rgba(255,255,255,.995), rgba(250,252,255,.995));
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 10px 24px rgba(15,23,42,0.06), 0 28px 56px rgba(15,23,42,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.generator-story-step.is-active .generator-story-card,
.generator-story-mobile-step.is-active .generator-story-card {
    border-color: rgba(59,130,246,0.18);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,251,255,1));
    transform: translateY(-4px);
    opacity: 1;
    box-shadow: 0 12px 28px rgba(15,23,42,0.08), 0 34px 72px rgba(59,130,246,0.12), 0 0 0 1px rgba(59,130,246,0.10), 0 1px 0 rgba(255,255,255,0.95) inset;
}
    .generator-story-step.is-active .generator-story-card::after,
    .generator-story-mobile-step.is-active .generator-story-card::after {
        opacity: 1;
        animation: generatorStoryFlow 2.8s linear infinite;
    }
.generator-story-step.is-revealed:not(.is-active) .generator-story-card {
    background: linear-gradient(180deg, rgba(255,255,255,.995), rgba(250,252,255,.99));
    border-color: rgba(15,23,42,0.08);
    opacity: 1;
    box-shadow: 0 10px 24px rgba(15,23,42,0.06), 0 28px 56px rgba(15,23,42,0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.generator-story-mobile-step.is-revealed:not(.is-active) .generator-story-card {
    opacity: 1;
}
.generator-story-card-track {
    display: none;
}
.generator-story-card-fill {
    display: none;
}
.generator-story-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .24em;
    color: rgba(15,23,42,0.46);
    display: block;
    position: relative;
    z-index: 2;
}
.generator-story-card h3 {
    margin: 12px 0 0;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1.06;
    letter-spacing: -.03em;
    font-weight: 700;
    color: #0f172a;
    transform: translateX(0);
    transition: transform .45s ease-out;
    position: relative;
    z-index: 2;
}
.generator-story-step.is-active .generator-story-card h3,
.generator-story-mobile-step.is-active .generator-story-card h3 {
    transform: translateX(2px);
}
.generator-story-card-subtitle {
    margin-top: 8px;
    font-size: 14px;
    color: rgba(15,23,42,0.60);
    position: relative;
    z-index: 2;
}
.generator-story-card-description {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.72;
    color: rgba(15,23,42,0.78);
    position: relative;
    z-index: 2;
}
.generator-story-card-glow {
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    background: radial-gradient(circle at top, rgba(59,130,246,0.08), transparent 58%);
    z-index: 0;
}
.generator-story-step.is-active .generator-story-card-glow,
.generator-story-mobile-step.is-active .generator-story-card-glow {
    animation: generatorStoryCardGlow 1.8s ease-in-out infinite;
}
.generator-story-mobile {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.generator-story-mobile-step {
    position: relative;
    padding-top: 34px;
}
.generator-story-mobile-badge-button {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 3;
    width: 88px;
    display: flex;
    justify-content: center;
}
.generator-story-mobile-badge {
    width: 84px;
    height: 84px;
    border-radius: 999px;
    border: 1px solid rgba(15,23,42,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(245,243,255,1));
    box-shadow: 0 8px 18px rgba(15,23,42,0.05), 0 20px 36px rgba(59,130,246,0.10), inset 0 1px 0 rgba(255,255,255,0.98);
    backdrop-filter: blur(18px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 1;
    position: relative;
}
.generator-story-mobile-number {
    font-size: 32px;
    font-weight: 800;
    color: rgba(15,23,42,0.92);
    margin-top: -2px;
}
.generator-story-mobile-stepword {
    margin-top: 2px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    color: rgba(15,23,42,0.56);
    text-transform: uppercase;
}
.generator-story-mobile-step.is-active .generator-story-mobile-badge {
    border-color: rgba(59,130,246,0.18);
    background: linear-gradient(180deg, rgba(255,255,255,1), rgba(244,249,255,1));
    box-shadow: 0 10px 20px rgba(15,23,42,0.06), 0 24px 42px rgba(59,130,246,0.14), 0 0 0 6px rgba(59,130,246,0.06), inset 0 1px 0 rgba(255,255,255,1);
}
.generator-story-mobile-step.is-active .generator-story-mobile-number {
    color: #2563eb;
}
.generator-story-mobile-step.is-active .generator-story-mobile-stepword {
    color: rgba(37,99,235,0.72);
}
.generator-story-mobile-card-shell .generator-story-card {
    --generator-story-card-inline-pad: 18px;
    padding: 56px var(--generator-story-card-inline-pad) 18px;
    border-radius: 24px;
}
.generator-story-pager {
    margin: 40px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.generator-story-pager-button {
    position: relative;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 999px;
    background: transparent;
}
    .generator-story-pager-button::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(15,23,42,0.22);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.46);
        transform: translate(-50%, -50%);
        transition: width .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
    }
    .generator-story-pager-button.is-active::before {
        width: 40px;
        background: linear-gradient(90deg, #3b82f6, #6366f1, #14b8a6);
        box-shadow: 0 6px 18px rgba(59,130,246,0.24);
    }
@media (max-width: 767px) {
    .generator-story-section {
        padding-top: .5rem;
    }
    .generator-story-shell {
        padding: 2.25rem .9rem 2rem;
        border-radius: 0;
    }
    .generator-story-hero {
        max-width: none;
        text-align: left;
    }
        .generator-story-hero h2 {
            font-size: clamp(1.9rem, 9vw, 2.625rem);
            line-height: 1.05;
        }
        .generator-story-hero p {
            font-size: 1rem;
            line-height: 1.6;
            margin-top: 16px;
        }
    .generator-story-desktop {
        display: none;
    }
    .generator-story-mobile {
        display: flex;
    }
    .generator-story-mobile-step .generator-story-card-label {
        display: none;
    }
    .generator-story-mobile-step .generator-story-card h3 {
        font-size: 26px;
        line-height: 1.08;
        text-align: center;
    }
    .generator-story-mobile-step .generator-story-card-description {
        font-size: 15px;
        line-height: 1.6;
        text-align: center;
    }
    .generator-story-mobile-step .generator-story-card-subtitle,
    .generator-story-mobile-step .generator-story-card,
    .generator-story-mobile-step .generator-story-card-label {
        text-align: center;
    }
    .generator-story-section.is-started .generator-story-mobile-step:nth-child(odd) .generator-story-mobile-card-shell {
        animation: generatorStoryMobilePanelEnterLeft .48s cubic-bezier(.22, 1, .36, 1) both;
    }
    .generator-story-section.is-started .generator-story-mobile-step:nth-child(even) .generator-story-mobile-card-shell {
        animation: generatorStoryMobilePanelEnterRight .48s cubic-bezier(.22, 1, .36, 1) both;
    }
    .generator-story-section.is-started .generator-story-mobile-step:nth-child(1) .generator-story-mobile-card-shell {
        animation-delay: .02s;
    }
    .generator-story-section.is-started .generator-story-mobile-step:nth-child(2) .generator-story-mobile-card-shell {
        animation-delay: .08s;
    }
    .generator-story-section.is-started .generator-story-mobile-step:nth-child(3) .generator-story-mobile-card-shell {
        animation-delay: .14s;
    }
    .generator-story-pager {
        margin-top: 32px;
    }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .generator-story-section {
        padding-top: 15rem;
    }
    .generator-story-grid {
        gap: 16px;
    }
    .generator-story-card-button {
        max-width: 360px;
    }
    .generator-story-card {
        --generator-story-card-inline-pad: 20px;
        padding: 22px var(--generator-story-card-inline-pad) 20px;
        text-align: center;
    }
        .generator-story-card h3 {
            font-size: 28px;
        }
    .generator-story-card-description {
        font-size: 15px;
        line-height: 1.65;
    }
    .generator-story-desktop {
        display: none;
    }
    .generator-story-mobile {
        display: flex;
    }
    .generator-story-mobile-step .generator-story-card-label {
        display: none;
    }
    .generator-story-mobile-step .generator-story-card h3 {
        font-size: 28px;
    }
    .generator-story-mobile-card-shell .generator-story-card {
        max-width: 680px;
        margin-inline: auto;
    }
}
@media (min-width: 1101px) {
    .generator-story-desktop {
        display: block;
    }
    .generator-story-mobile {
        display: none;
    }
    .generator-story-card-button {
        max-width: 420px;
    }
}
html[data-theme='dark'] .generator-story-shell {
    border: none;
    background: transparent;
    box-shadow: none;
}
html[data-theme='dark'] .generator-story-hero h2,
html[data-theme='dark'] .generator-story-card h3 {
    color: #f8fafc;
}
html[data-theme='dark'] .generator-story-hero p {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .generator-story-track {
    background: rgba(148,163,184,.20);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
html[data-theme='dark'] .generator-story-node,
html[data-theme='dark'] .generator-story-mobile-badge {
    border-color: rgba(148,163,184,.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
    box-shadow: 0 8px 18px rgba(2,6,23,.24), 0 20px 36px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme='dark'] .generator-story-node-number,
html[data-theme='dark'] .generator-story-mobile-number {
    color: rgba(226,232,240,.9);
}
html[data-theme='dark'] .generator-story-mobile-stepword {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .generator-story-card {
    border-color: rgba(148,163,184,.18);
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
    box-shadow: 0 10px 20px rgba(2,6,23,.22), 0 24px 48px rgba(2,6,23,.28);
}
html[data-theme='dark'] .generator-story-step.is-active .generator-story-node,
html[data-theme='dark'] .generator-story-mobile-step.is-active .generator-story-mobile-badge {
    border-color: rgba(96,165,250,.32);
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
    box-shadow: 0 10px 20px rgba(2,6,23,.26), 0 24px 42px rgba(59,130,246,.18), 0 0 0 6px rgba(59,130,246,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme='dark'] .generator-story-step.is-active .generator-story-node-number,
html[data-theme='dark'] .generator-story-mobile-step.is-active .generator-story-mobile-number {
    color: #bfdbfe;
}
html[data-theme='dark'] .generator-story-mobile-step.is-active .generator-story-mobile-stepword {
    color: rgba(191,219,254,.72);
}
html[data-theme='dark'] .generator-story-step.is-completed .generator-story-card,
html[data-theme='dark'] .generator-story-step.is-completed .generator-story-node,
html[data-theme='dark'] .generator-story-step.is-revealed:not(.is-active) .generator-story-card,
html[data-theme='dark'] .generator-story-mobile-step.is-revealed:not(.is-active) .generator-story-card,
html[data-theme='dark'] .generator-story-step.is-active .generator-story-card,
html[data-theme='dark'] .generator-story-mobile-step.is-active .generator-story-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
    border-color: rgba(148,163,184,.18);
    box-shadow: 0 10px 20px rgba(2,6,23,.22), 0 24px 48px rgba(2,6,23,.28);
}
html[data-theme='dark'] .generator-story-card-label,
html[data-theme='dark'] .generator-story-card-subtitle {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .generator-story-card-description {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .generator-story-pager-button::before {
    background: rgba(148,163,184,.24);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
html[data-theme='dark'] .generator-story-pager-button.is-active::before {
    background: linear-gradient(90deg, #3b82f6, #6366f1, #14b8a6);
    box-shadow: 0 6px 18px rgba(59,130,246,0.24);
}
@media (prefers-reduced-motion: reduce) {
    .storefront-hero-headline__word,
    .storefront-hero-headline__line--from-bottom,
    .storefront-hero-subtitle,
    .storefront-hero-primary-action--intro {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .generator-story-hero,
    .generator-story-node,
    .generator-story-card-wrap,
    .generator-story-card-button,
    .generator-story-card,
    .generator-story-card-fill,
    .generator-story-pager-button,
    .generator-story-pager-button::before,
    .generator-story-fusion-stem,
    .generator-story-mobile-card-shell {
        animation: none !important;
        transition: none !important;
    }
    .generator-story-node-ring,
    .generator-story-card-glow {
        animation: none !important;
    }
}
@keyframes generatorStoryFadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes generatorStoryNodeRing {
    0% {
        opacity: .78;
        transform: scale(.9);
    }
    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}
@keyframes generatorStoryFlow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 220% 50%;
    }
}
@keyframes generatorStoryFlowVertical {
    0% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 50% 220%;
    }
}
@keyframes generatorStoryCardGlow {
    0%, 100% {
        opacity: .16;
    }
    50% {
        opacity: .28;
    }
}
@keyframes generatorStoryMobilePanelEnterRight {
    0% {
        transform: translateX(110vw) scale(.98);
        opacity: 0;
    }
    70% {
        transform: translateX(-8px) scale(1.01);
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}
@keyframes generatorStoryMobilePanelEnterLeft {
    0% {
        transform: translateX(-110vw) scale(.98);
        opacity: 0;
    }
    70% {
        transform: translateX(8px) scale(1.01);
        opacity: 1;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}
html[data-theme='dark'] .builder-icon-button {
    border-color: rgba(148, 163, 184, .22);
    background: rgba(15, 23, 42, .86);
    color: #e2e8f0;
}
.guide-page {
    display: grid;
    gap: 0;
}
.guide-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 2rem;
    align-items: start;
}
.guide-prose {
    display: grid;
    gap: 0;
}
    .guide-prose section {
        padding: 1.3rem 0;
        border-top: 1px solid rgba(148, 163, 184, .16);
    }
        .guide-prose section:first-child {
            padding-top: 0;
            border-top: 0;
        }
    .guide-prose h2 {
        margin: 0 0 var(--sf-rhythm-title-to-body);
        color: #0f172a;
        font-size: var(--sf-type-h3-l-size);
        line-height: var(--sf-type-h3-l-line);
        letter-spacing: -.04em;
    }
    .guide-prose h3,
    .guide-panel h3,
    .homepage-guide-prose h3 {
        font-size: var(--sf-type-h3-size);
        line-height: var(--sf-type-h3-line);
    }
    .guide-prose p,
    .guide-prose li {
        color: #475569;
        font-size: var(--sf-type-body-l-size);
        line-height: var(--sf-type-body-l-line);
    }
    .guide-prose p + p {
        margin-top: var(--sf-rhythm-body-stack);
    }
    .guide-prose p + :is(h2, h3) {
        margin-top: var(--sf-rhythm-paragraph-to-title);
    }
    .guide-prose ul,
    .guide-prose ol {
        margin: .8rem 0 0;
        padding-left: 1.2rem;
    }
    .guide-prose li + li {
        margin-top: .45rem;
    }
.guide-aside {
    position: sticky;
    top: 6.6rem;
    display: grid;
    gap: 1rem;
}
.guide-panel {
    padding: 1rem 1.05rem;
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(248, 250, 252, .74);
}
    .guide-panel h3 {
        margin: 0 0 var(--sf-rhythm-copy-reset);
        color: #0f172a;
        font-size: var(--sf-type-h4-size);
        line-height: var(--sf-type-h4-line);
        letter-spacing: -.02em;
    }
    .guide-panel p,
    .guide-panel li,
    .guide-panel a {
        color: #475569;
        font-size: var(--sf-type-body-size);
        line-height: var(--sf-type-body-line);
    }
    .guide-panel p + p {
        margin-top: var(--sf-rhythm-copy-reset);
    }
    .guide-panel p + h3 {
        margin-top: var(--sf-rhythm-paragraph-to-title);
    }
    .guide-panel ul {
        margin: 0;
        padding-left: 1rem;
    }
    .guide-panel a {
        text-decoration: none;
        font-weight: 700;
    }
        .guide-panel a:hover {
            color: var(--blue-dk);
        }
.guide-link-list {
    display: grid;
    gap: 0;
    border-top: 1px solid rgba(148, 163, 184, .16);
}
.guide-link-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.guide-link-row__copy {
    min-width: 0;
}
.guide-link-row__eyebrow {
    margin: 0 0 .25rem;
    color: #0385ff;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.guide-link-row h2,
.guide-link-row h3 {
    margin: 0 0 .35rem;
    color: #0f172a;
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    letter-spacing: -.03em;
}
.guide-link-row p {
    margin: 0;
    color: #475569;
    line-height: 1.75;
}
.guide-link-row__action {
    flex-shrink: 0;
    align-self: center;
}
.resource-hub-intro {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.4rem;
}
.resource-topic {
    display: grid;
    gap: 1rem;
    margin-top: 2.25rem;
}
    .resource-topic:first-child {
        margin-top: 0;
    }
.resource-topic__header {
    max-width: 780px;
}
    .resource-topic__header h2 {
        margin: 0 0 var(--sf-rhythm-title-to-body);
        color: #0f172a;
        font-size: clamp(1.45rem, 2.2vw, 2rem);
        letter-spacing: -.04em;
    }
    .resource-topic__header p:last-child {
        margin: 0;
        color: #475569;
        line-height: 1.75;
    }
    .resource-topic__header p + p {
        margin-top: var(--sf-rhythm-body-stack);
    }
.guide-section-list {
    display: grid;
    gap: .85rem;
}
    .guide-section-list details {
        border-top: 1px solid rgba(148, 163, 184, .16);
        padding-top: .85rem;
    }
    .guide-section-list summary {
        list-style: none;
        cursor: pointer;
        color: #0f172a;
        font-weight: 800;
    }
        .guide-section-list summary::-webkit-details-marker {
            display: none;
        }
html[data-theme='dark'] .guide-prose h2,
html[data-theme='dark'] .guide-link-row h2,
html[data-theme='dark'] .guide-link-row h3,
html[data-theme='dark'] .guide-panel h3,
html[data-theme='dark'] .guide-section-list summary,
html[data-theme='dark'] .resource-topic__header h2 {
    color: #f8fafc;
}
html[data-theme='dark'] .guide-prose p,
html[data-theme='dark'] .guide-prose li,
html[data-theme='dark'] .guide-link-row p,
html[data-theme='dark'] .guide-panel p,
html[data-theme='dark'] .guide-panel li,
html[data-theme='dark'] .guide-panel a,
html[data-theme='dark'] .resource-topic__header p {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .guide-panel {
    background: rgba(15, 23, 42, .72);
    border-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .guide-prose section,
html[data-theme='dark'] .guide-link-list,
html[data-theme='dark'] .guide-link-row,
html[data-theme='dark'] .guide-section-list details {
    border-color: rgba(148, 163, 184, .16);
}
@media (max-width: 1024px) {
    .guide-layout {
        grid-template-columns: 1fr;
    }
    .guide-aside {
        position: static;
    }
    .resource-hub-intro {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .guide-link-row {
        flex-direction: column;
        align-items: flex-start;
    }
}
.guide-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-top: 1rem;
}
.guide-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    border-top: 1px solid rgba(148, 163, 184, .16);
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}
    .guide-table th,
    .guide-table td {
        padding: .85rem .9rem;
        text-align: left;
        vertical-align: top;
        border-top: 1px solid rgba(148, 163, 184, .16);
    }
    .guide-table thead th {
        color: #0f172a;
        font-size: .78rem;
        font-weight: 900;
        letter-spacing: .1em;
        text-transform: uppercase;
        background: rgba(248, 250, 252, .92);
    }
    .guide-table tbody td {
        color: #475569;
        font-size: .96rem;
        line-height: 1.72;
    }
        .guide-table tbody td strong {
            color: #0f172a;
        }
.guide-note {
    margin-top: 1rem;
    padding: .95rem 1rem;
    border-left: 3px solid rgba(3, 133, 255, .32);
    background: rgba(248, 250, 252, .7);
}
    .guide-note p {
        margin: 0;
    }
.guide-terms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem 1.2rem;
    margin-top: 1rem;
}
    .guide-terms div {
        padding-top: .85rem;
        border-top: 1px solid rgba(148, 163, 184, .16);
    }
    .guide-terms dt {
        margin: 0;
        color: #0f172a;
        font-size: .86rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .guide-terms dd {
        margin: .35rem 0 0;
        color: #475569;
        font-size: .94rem;
        line-height: 1.68;
    }
.guide-anchor-list {
    margin: 0;
    padding-left: 1rem;
}
    .guide-anchor-list li + li {
        margin-top: .45rem;
    }
.guide-example-list {
    display: grid;
    gap: .85rem;
    margin-top: 1rem;
}
    .guide-example-list article {
        padding: .95rem 1rem 0;
        border-top: 1px solid rgba(148, 163, 184, .16);
    }
    .guide-example-list h3,
    .guide-example-list strong {
        color: #0f172a;
    }
    .guide-example-list h3 {
        margin: 0 0 .3rem;
        font-size: 1rem;
        letter-spacing: -.02em;
    }
.guide-backlink {
    margin-top: 1rem;
    font-weight: 800;
}
    .guide-backlink a {
        color: #0f172a;
        text-decoration: none;
    }
        .guide-backlink a:hover {
            color: #0385ff;
        }
.homepage-guide-layout {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.homepage-guide-jump {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1rem;
    align-items: center;
    margin: 0 0 1.2rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.homepage-guide-jump__label {
    color: #0385ff;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.homepage-guide-jump a,
.homepage-guide-linkline a {
    color: #0f172a;
    font-weight: 800;
    text-decoration: none;
}
    .homepage-guide-jump a:hover,
    .homepage-guide-linkline a:hover {
        color: #0385ff;
    }
.homepage-guide-prose section {
    padding: 1.45rem 0;
}
.homepage-guide-prose h3 {
    margin: calc(var(--sf-type-body-l-line) * 0.375) 0 calc(var(--sf-type-body-line) * 0.4);
    color: #0f172a;
    font-size: var(--sf-type-h4-size);
    line-height: var(--sf-type-h4-line);
    letter-spacing: -.02em;
}
.homepage-guide-prose p + p {
    margin-top: var(--sf-rhythm-body-stack);
}
.homepage-guide-prose p + h3 {
    margin-top: var(--sf-rhythm-paragraph-to-title);
}
.homepage-guide-substack {
    display: grid;
    gap: .1rem;
    margin-top: .3rem;
}
.homepage-guide-linkline {
    margin-top: .8rem;
}
.homepage-guide-aside {
    top: 7.2rem;
}
html[data-theme='dark'] .homepage-guide-jump,
html[data-theme='dark'] .homepage-guide-prose section {
    border-color: rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .homepage-guide-jump__label {
    color: #93c5fd;
}
html[data-theme='dark'] .homepage-guide-jump a,
html[data-theme='dark'] .homepage-guide-linkline a,
html[data-theme='dark'] .homepage-guide-prose h3 {
    color: #f8fafc;
}
    html[data-theme='dark'] .homepage-guide-jump a:hover,
    html[data-theme='dark'] .homepage-guide-linkline a:hover {
        color: #bfdbfe;
    }
html[data-theme='dark'] .guide-table,
html[data-theme='dark'] .guide-table th,
html[data-theme='dark'] .guide-table td,
html[data-theme='dark'] .guide-terms div,
html[data-theme='dark'] .guide-example-list article {
    border-color: rgba(148, 163, 184, .16);
}
    html[data-theme='dark'] .guide-table thead th,
    html[data-theme='dark'] .guide-note {
        background: rgba(15, 23, 42, .72);
    }
    html[data-theme='dark'] .guide-table thead th,
    html[data-theme='dark'] .guide-table tbody td strong,
    html[data-theme='dark'] .guide-terms dt,
    html[data-theme='dark'] .guide-example-list h3,
    html[data-theme='dark'] .guide-example-list strong,
    html[data-theme='dark'] .guide-backlink a {
        color: #f8fafc;
    }
    html[data-theme='dark'] .guide-table tbody td,
    html[data-theme='dark'] .guide-terms dd {
        color: rgba(226, 232, 240, .76);
    }
html[data-theme='dark'] .guide-backlink a:hover {
    color: #bfdbfe;
}
@media (max-width: 768px) {
    .homepage-guide-jump {
        align-items: flex-start;
    }
    .homepage-guide-aside {
        display: grid;
        gap: .9rem;
    }
    .guide-terms {
        grid-template-columns: 1fr;
    }
}
html[data-theme='dark'] .info-shell,
html[data-theme='dark'] .info-main,
html[data-theme='dark'] .info-sidebar {
    color: #e5edf7;
}
html[data-theme='dark'] .info-card,
html[data-theme='dark'] .info-card--soft,
html[data-theme='dark'] .info-card--accent {
    border-color: rgba(148, 163, 184, .16);
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
    box-shadow: 0 22px 50px rgba(2, 6, 23, .26);
}
    html[data-theme='dark'] .info-title,
    html[data-theme='dark'] .info-card h2,
    html[data-theme='dark'] .info-card h3 {
        color: #f8fafc;
    }
    html[data-theme='dark'] .info-subtitle,
    html[data-theme='dark'] .info-meta,
    html[data-theme='dark'] .info-card p,
    html[data-theme='dark'] .info-card li,
    html[data-theme='dark'] .info-note {
        color: rgba(226, 232, 240, .76);
    }
html[data-theme='dark'] .info-eyebrow {
    background: rgba(191, 219, 254, .14);
    color: #bfdbfe;
}
html[data-theme='dark'] .coming-soon-panel {
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
    border: 1px solid rgba(148, 163, 184, .16);
}
html[data-theme='dark'] .coming-soon-panel__mark {
    color: #93c5fd;
}
html[data-theme='dark'] .generator-story-card-subtitle,
html[data-theme='dark'] .generator-story-card-description {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .generator-story-card {
    border-color: rgba(148, 163, 184, .18);
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 17, 31, .95));
}
@media (max-width: 768px) {
    .market-kicker,
    .info-eyebrow,
    .info-meta,
    .generator-story-card-subtitle,
    .generator-story-card-description,
    .homepage-guide-jump__label {
        font-size: var(--sf-type-body-s-size);
        line-height: var(--sf-type-body-s-line);
    }
    .info-subtitle,
    .guide-prose p,
    .guide-prose li,
    .guide-panel p,
    .guide-panel li,
    .homepage-guide-prose p,
    .homepage-guide-prose li {
        font-size: var(--sf-type-body-l-size);
        line-height: var(--sf-type-body-l-line);
    }
}
.market-subtitle,
.verification-promo-card__intro,
.verification-promo-note p,
.section-heading__body-copy,
.resource-card__text span,
.info-subtitle,
.info-prose p,
.info-prose li,
.guide-panel p,
.guide-panel li,
.homepage-guide-prose p,
.homepage-guide-prose li {
    color: #334155;
}
.review-card__meta,
.editorial-meta,
.info-meta,
.resource-topic__header p:last-child,
.guide-table tbody td,
.guide-terms dd {
    color: #475569;
}
@media (max-width: 768px) {
    .info-shell,
    .resource-hub-intro {
        padding-left: .95rem;
        padding-right: .95rem;
    }
    .market-section,
    .sf-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .market-kicker,
    .storefront-hero-usecard__eyebrow,
    .homepage-guide-jump__label,
    .editorial-meta,
    .review-card__meta,
    .resource-card__text span,
    .guide-table thead th,
    .guide-terms dt {
        font-size: var(--sf-type-body-s-size);
        line-height: var(--sf-type-body-s-line);
    }
    .market-subtitle,
    .section-heading__body-copy,
    .verification-promo-card__intro,
    .verification-promo-note p,
    .resource-card__text span,
    .info-subtitle,
    .info-prose p,
    .info-prose li,
    .guide-panel p,
    .guide-panel li,
    .homepage-guide-prose p,
    .homepage-guide-prose li {
        font-size: var(--sf-type-body-l-size);
        line-height: var(--sf-type-body-l-line);
    }
    .market-hero--storefront .market-subtitle {
        font-size: var(--sf-type-body-l-size);
        line-height: var(--sf-type-body-l-line);
    }
    .market-hero--storefront h1 {
        font-size: clamp(2.2rem, 10vw, 3.2rem);
        line-height: .95;
    }
    .sf-title-section,
    .verification-promo-hero__copy h2,
    .guide-panel h2,
    .resource-topic__header h2 {
        font-size: var(--sf-type-h2-l-size);
        line-height: var(--sf-type-h2-l-line);
    }
    .storefront-hero-primary-action .btn-acc-primary,
    .verification-promo-card__cta {
        width: 100%;
        min-height: 52px;
        padding: .9rem 1rem;
        font-size: .95rem;
        line-height: 1.15;
        border-radius: 14px;
    }
    .verification-promo-card,
    .verification-promo-note,
    .info-card,
    .guide-panel,
    .resource-topic,
    .review-card.review-card--spotlight {
        border-radius: 20px;
    }
    .verification-promo-card__inner,
    .info-card,
    .guide-panel,
    .resource-topic {
        padding: 1rem;
    }
}
@media (max-width: 480px) {
    .info-shell {
        padding-left: .78rem;
        padding-right: .78rem;
    }
    .market-section,
    .sf-container {
        padding-left: .85rem;
        padding-right: .85rem;
    }
    .storefront-hero-usecards {
        gap: .85rem;
    }
    .storefront-hero-usecards--anchored .storefront-hero-usecard {
        padding: .95rem .9rem 1rem;
    }
    .storefront-hero-usecards--anchored .storefront-hero-usecard__art img {
        width: min(100%, 196px);
        max-height: 120px;
    }
    .storefront-hero-usecards--anchored .storefront-hero-usecard .btn-acc-primary {
        font-size: .92rem;
    }
}
.sf-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    margin: 0 0 1rem;
    font-size: .88rem;
    font-weight: 600;
    color: var(--sf-muted-strong);
}
.sf-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}
.sf-breadcrumbs a:hover {
    color: var(--color-primary);
}
.calculator-hero-picker {
    width: min(100%, 560px);
    margin: 2rem auto 0;
    padding: 1rem;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(247, 250, 255, .94));
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .16), 0 18px 36px rgba(15, 23, 42, .08), 0 34px 72px rgba(15, 23, 42, .08);
}
.calculator-hero-picker__label {
    display: block;
    margin-bottom: .7rem;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #475569;
}
.calculator-hero-picker__bar {
    position: relative;
    border-radius: 22px;
    padding: .35rem;
    background: linear-gradient(135deg, rgba(3, 133, 255, .12), rgba(15, 23, 42, .04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 10px 24px rgba(3, 133, 255, .08);
}
    .calculator-hero-picker__bar::after {
        content: "\25BE";
        position: absolute;
        right: 1.1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem;
        color: #0f172a;
        pointer-events: none;
    }
.calculator-hero-picker__select {
    width: 100%;
    min-height: 62px;
    padding: 0 3rem 0 1.15rem;
    border: 0;
    outline: 0;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    color: #0f172a;
    font-size: 1.03rem;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18);
}
.calculator-hero-picker__select:focus {
    box-shadow: inset 0 0 0 2px rgba(3, 133, 255, .55), 0 0 0 4px rgba(3, 133, 255, .12);
}
.calculator-hero-picker__button {
    width: 100%;
    margin-top: .85rem;
    min-height: 54px;
}
.article-byline {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    margin: .85rem 0 0;
    font-size: .92rem;
    color: var(--sf-muted-strong);
}
html[data-theme='dark'] .sf-breadcrumbs,
html[data-theme='dark'] .article-byline {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .calculator-hero-picker {
    background: linear-gradient(180deg, rgba(15, 23, 42, .94), rgba(12, 18, 30, .96));
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .14), 0 18px 36px rgba(2, 6, 23, .34), 0 36px 72px rgba(2, 6, 23, .3);
}
html[data-theme='dark'] .calculator-hero-picker__label {
    color: rgba(191, 219, 254, .88);
}
html[data-theme='dark'] .calculator-hero-picker__bar {
    background: linear-gradient(135deg, rgba(59, 130, 246, .18), rgba(15, 23, 42, .38));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 28px rgba(2, 6, 23, .28);
}
html[data-theme='dark'] .calculator-hero-picker__bar::after {
    color: #dbeafe;
}
html[data-theme='dark'] .calculator-hero-picker__select {
    background: rgba(15, 23, 42, .88);
    color: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18);
}
html[data-theme='dark'] .calculator-hero-picker__select:focus {
    box-shadow: inset 0 0 0 2px rgba(96, 165, 250, .55), 0 0 0 4px rgba(59, 130, 246, .14);
}
.calc-page-header {
    padding: 3rem 0 2.6rem;
    background: var(--sf-accent-section-bg);
    text-align: center;
}
.calc-page-header h1 {
    margin: 0 auto .65rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #0f172a;
    line-height: 1.15;
    max-width: 720px;
}
.calc-page-header p {
    margin: 0 auto;
    font-size: 1.05rem;
    color: #334155;
    max-width: 560px;
    line-height: 1.55;
}
html[data-theme='dark'] .calc-page-header h1 { color: #ffffff; }
html[data-theme='dark'] .calc-page-header p  { color: rgba(255, 255, 255, .82); }
/* The header paints --sf-accent-section-bg, so its kicker has to take the matching
   accent foreground too. Without this it falls through to the light-theme
   .market-kicker pill (#1557ff on rgba(3,133,255,.08)) and disappears into the
   dark gradient at ~1.6:1 contrast. */
/* Dark theme only. The accent-section kicker tokens are white-on-white in
   light theme (they are meant for the dark band), which made this pill
   invisible at 1:1 contrast. Light theme keeps the base .market-kicker
   treatment — brand blue on a pale blue pill — which reads on the light band. */
html[data-theme='dark'] .calc-page-header .market-kicker,
html[data-theme='dark'] .calc-page-header .sf-kicker {
    background: var(--sf-accent-section-kicker-bg);
    color: var(--sf-accent-section-kicker-text);
}
.calc-breadcrumbs {
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
}
.calc-state-overview {
    margin-top: 2rem;
    padding: 1.4rem 1.6rem;
    border-radius: 24px;
    background: rgba(255,255,255,.7);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.14);
}
.calc-state-overview h2 {
    margin: 0 0 .6rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
}
.calc-state-overview p {
    margin: 0 0 .6rem;
    color: #475569;
    font-size: .95rem;
}
.calc-state-overview ul {
    margin: 0;
    padding-left: 1.1rem;
    color: #475569;
    font-size: .95rem;
}
html[data-theme='dark'] .calc-state-overview {
    background: rgba(15,23,42,.6);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.12);
}
html[data-theme='dark'] .calc-state-overview h2 { color: #f8fafc; }
html[data-theme='dark'] .calc-state-overview p,
html[data-theme='dark'] .calc-state-overview ul { color: rgba(148,163,184,.8); }
.calc-shell {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.75rem;
    align-items: stretch;
}
.calc-form-card,
.calc-results-card {
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, .11),
        0 2px 4px rgba(15, 23, 42, .04),
        0 8px 20px rgba(15, 23, 42, .06),
        0 28px 52px rgba(15, 23, 42, .07);
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.calc-card-header {
    padding: 1.75rem 1.4rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.calc-card-header h2 {
    margin: .2rem 0 0;
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #0f172a;
}
.calc-card-header p {
    margin: .35rem 0 0;
    font-size: .88rem;
    color: #64748b;
}
.calc-tabs-nav {
    display: flex;
    gap: .2rem;
    margin: .9rem 1.4rem .75rem;
    padding: .28rem;
    background: rgba(148, 163, 184, .1);
    border-radius: 12px;
    border-bottom: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.calc-tabs-nav::-webkit-scrollbar { display: none; }
.calc-tab-btn {
    flex: 1;
    padding: .55rem .75rem;
    background: none;
    border: none;
    border-bottom: none;
    border-radius: 9px;
    margin-bottom: -2px;
    font-size: .845rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s, border-color .12s;
    letter-spacing: .01em;
}
.calc-tab-btn:hover { color: #1e293b; background: rgba(148, 163, 184, .12); }
.calc-tab-btn.is-active {
    color: #0385ff;
    background: #ffffff;
    border-bottom-color: transparent;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .1), 0 2px 8px rgba(15, 23, 42, .07);
}
.calc-tab-panel { display: none; }
.calc-tab-panel.is-active { display: block; min-width: 0; }
.calc-state-switcher {
    padding: 1rem 1.4rem .75rem;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}
.calc-state-switcher label {
    display: block;
    margin-bottom: .45rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #64748b;
}
.calc-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.calc-form-section + .calc-form-section {
    border-top: 1px solid rgba(148, 163, 184, .13);
}
.calc-form-section {
    padding: 1.1rem 1.4rem;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}
.calc-form-section .calc-form-grid,
.calc-advanced .calc-form-grid {
    min-width: 0;
}
.calc-form-section .form-control,
.calc-form-section .form-select,
.calc-advanced .form-control,
.calc-advanced .form-select {
    min-width: 0;
    max-width: 100%;
    width: 100%;
}
.calc-form-section__title {
    margin-bottom: .9rem;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2563eb;
}
.calc-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}
.calc-field label {
    display: block;
    margin-bottom: .45rem;
    font-size: .92rem;
    font-weight: 700;
    color: #1e293b;
}
.calc-field--full {
    grid-column: 1 / -1;
}
.calc-field--checkbox {
    display: flex;
    align-items: end;
}
.calc-check {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    color: #1e293b;
}
.calc-sd-rate-display {
    margin-top: .4rem;
}
.calc-sd-rate-badge {
    display: inline-flex;
    align-items: center;
    padding: .35rem .85rem;
    border-radius: 10px;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    font-size: .9rem;
    font-weight: 700;
    color: #1d4ed8;
    letter-spacing: .02em;
}
html[data-theme='dark'] .calc-sd-rate-badge {
    background: rgba(30, 58, 138, .4);
    border-color: rgba(96, 165, 250, .3);
    color: #93c5fd;
}
.calc-field-question {
    display: block;
    margin-bottom: .5rem;
    font-size: .92rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}
.calc-yn-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.calc-yn-group {
    display: inline-flex;
    gap: .4rem;
}
.calc-yn-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .45rem 1.25rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s, box-shadow .12s;
    user-select: none;
}
.calc-yn-label:hover {
    border-color: #94a3b8;
    color: #1e293b;
}
.calc-yn-input:checked + .calc-yn-label {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
.calc-yn-input:focus-visible + .calc-yn-label {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
.calc-form-card .form-control,
.calc-form-card .form-select,
.calc-state-switcher .form-select {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    padding: .6rem .9rem;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.5;
    color: #0f172a;
    background-color: #fff;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: border-color .15s, box-shadow .15s;
}
.calc-form-card .form-select,
.calc-state-switcher .form-select {
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px;
    cursor: pointer;
}
.calc-form-card .form-control:focus,
.calc-form-card .form-select:focus,
.calc-state-switcher .form-select:focus {
    outline: none;
    border-color: #0385ff;
    box-shadow: 0 0 0 3px rgba(3, 133, 255, .18);
}
.calc-form-card .form-control::placeholder {
    color: #94a3b8;
}
.calc-earnings-list {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}
.calc-earnings-row {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
}
.calc-earnings-row__grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr .65fr .9fr .9fr;
    gap: .65rem;
    align-items: end;
}
.calc-add-row-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .75rem;
    padding: 0;
    border: none;
    background: none;
    font-size: .875rem;
    font-weight: 700;
    color: #2563eb;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.calc-add-row-btn:hover { color: #1d4ed8; }
.calc-remove-row-btn {
    flex-shrink: 0;
    width: 32px;
    height: 38px;
    padding: 0;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: none;
    color: #94a3b8;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
}
.calc-remove-row-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}
.calc-earn-total {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 .75rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    font-size: .9rem;
    color: #0f172a;
    background: #f8fafc;
    font-variant-numeric: tabular-nums;
}
html[data-theme='dark'] .calc-earn-total {
    background: rgba(148, 163, 184, .06);
    border-color: rgba(148, 163, 184, .18);
    color: #e2e8f0;
}
.calc-gross-preview {
    margin-bottom: .75rem;
    font-size: .9rem;
    color: #475569;
    text-align: center;
}
.calc-gross-preview strong {
    color: #0f172a;
    font-size: 1rem;
}
@media (max-width: 520px) {
    .calc-earnings-row__grid {
        grid-template-columns: 1fr 1fr;
    }
    .calc-earnings-row__grid .calc-field:first-child {
        grid-column: 1 / -1;
    }
}
.calc-form-actions {
    margin-top: 1.15rem;
    padding: 1rem 1.4rem 1.4rem;
    border-top: 1px solid rgba(148, 163, 184, .13);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
}
.calc-form-actions__toggles {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.calc-submit-btn {
    width: 50%;
    justify-content: center;
    min-height: 52px;
}
.calc-advanced {
    margin-top: 1.15rem;
    width: 100%;
    min-width: 0;
}
.calc-advanced__summary {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .9rem 1rem;
    border-radius: 0px;
    background: linear-gradient(180deg, rgba(239, 246, 255, .95), rgba(219, 234, 254, .92));
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, .18);
    cursor: pointer;
    list-style: none;
}
.calc-advanced__summary::-webkit-details-marker {
    display: none;
}
.calc-advanced__summary span {
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1d4ed8;
}
.calc-advanced__summary small {
    color: #475569;
    font-size: .88rem;
}
.calc-form-section--advanced {
    margin-top: .75rem;
}
.calc-results-card {
    padding: 1.75rem 1.4rem 1.4rem;
}
.calc-visual-card,
.calc-tax-table-card,
.calc-notes-card {
    margin-top: 1rem;
    padding: 1.1rem 1.15rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12);
}
.calc-visual-card__title,
.calc-tax-table-card__title,
.calc-notes-card__title {
    margin: 0 0 .85rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}
.calc-tax-table__total td {
    background: #e2e8f0;
    border-bottom: 0;
    padding: .82rem .8rem;
    font-weight: 800;
}
.calc-tax-table__total td:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}
.calc-tax-table__total td:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}
.calc-notes-card ul {
    margin: 0;
    padding-left: 1.1rem;
}
html[data-theme='dark'] .calc-form-card,
html[data-theme='dark'] .calc-results-card {
    background: #0f172a;
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, .10),
        0 2px 4px rgba(2, 6, 23, .15),
        0 8px 20px rgba(2, 6, 23, .22),
        0 28px 52px rgba(2, 6, 23, .28);
}
html[data-theme='dark'] .calc-card-header { border-bottom-color: rgba(148, 163, 184, .10); }
html[data-theme='dark'] .calc-card-header h2 { color: #f8fafc; }
html[data-theme='dark'] .calc-tabs-nav { background: rgba(15, 23, 42, .55); }
html[data-theme='dark'] .calc-tab-btn { color: rgba(148, 163, 184, .7); }
html[data-theme='dark'] .calc-tab-btn:hover { color: #f1f5f9; background: rgba(148, 163, 184, .1); }
html[data-theme='dark'] .calc-tab-btn.is-active { background: rgba(59, 130, 246, .18); box-shadow: 0 0 0 1px rgba(59, 130, 246, .25); color: #60a5fa; }
html[data-theme='dark'] .calc-state-switcher { border-bottom-color: rgba(148, 163, 184, .10); }
html[data-theme='dark'] .calc-form-section + .calc-form-section { border-top-color: rgba(148, 163, 184, .10); }
html[data-theme='dark'] .calc-card-header h2, html[data-theme='dark'] .calc-tax-table-card__title, html[data-theme='dark'] .calc-visual-card__title, html[data-theme='dark'] .calc-notes-card__title {
    color: #f8fafc;
}
html[data-theme='dark'] .calc-card-header p, html[data-theme='dark'] .calc-state-switcher label {
    color: rgba(226, 232, 240, .76);
}
html[data-theme='dark'] .calc-form-section, html[data-theme='dark'] .calc-visual-card, html[data-theme='dark'] .calc-tax-table-card, html[data-theme='dark'] .calc-notes-card {
    background: rgba(15, 23, 42, .78);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .14);
}
html[data-theme='dark'] .calc-form-section__title {
    color: #93c5fd;
}
html[data-theme='dark'] .calc-advanced__summary {
    background: linear-gradient(180deg, rgba(30, 41, 59, .95), rgba(15, 23, 42, .92));
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .18);
}
html[data-theme='dark'] .calc-advanced__summary span {
    color: #bfdbfe;
}
html[data-theme='dark'] .calc-advanced__summary small {
    color: rgba(226, 232, 240, .72);
}
html[data-theme='dark'] .calc-field label,
html[data-theme='dark'] .calc-check {
    color: #f8fafc;
}
html[data-theme='dark'] .calc-form-card .form-control,
html[data-theme='dark'] .calc-form-card .form-select,
html[data-theme='dark'] .calc-state-switcher .form-select {
    color: #f1f5f9;
    background-color: rgba(15, 23, 42, .85);
    border-color: rgba(148, 163, 184, .28);
    box-shadow: 0 1px 3px rgba(2, 6, 23, .2);
}
html[data-theme='dark'] .calc-form-card .form-select,
html[data-theme='dark'] .calc-state-switcher .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
html[data-theme='dark'] .calc-form-card .form-control:focus,
html[data-theme='dark'] .calc-form-card .form-select:focus,
html[data-theme='dark'] .calc-state-switcher .form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .22);
}
html[data-theme='dark'] .calc-form-card .form-control::placeholder {
    color: #64748b;
}
html[data-theme='dark'] .calc-field-question { color: #f1f5f9; }
html[data-theme='dark'] .calc-yn-label {
    background: rgba(15, 23, 42, .85);
    border-color: rgba(148, 163, 184, .28);
    color: rgba(226, 232, 240, .8);
}
html[data-theme='dark'] .calc-yn-label:hover {
    border-color: #64748b;
    color: #f1f5f9;
}
html[data-theme='dark'] .calc-yn-input:checked + .calc-yn-label {
    background: rgba(30, 58, 138, .45);
    border-color: #3b82f6;
    color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}
html[data-theme='dark'] .calc-add-row-btn { color: #93c5fd; }
html[data-theme='dark'] .calc-add-row-btn:hover { color: #bfdbfe; }
html[data-theme='dark'] .calc-remove-row-btn {
    border-color: rgba(148, 163, 184, .2);
    color: #64748b;
}
html[data-theme='dark'] .calc-remove-row-btn:hover {
    background: rgba(239, 68, 68, .15);
    border-color: rgba(239, 68, 68, .3);
    color: #fca5a5;
}
html[data-theme='dark'] .calc-gross-preview { color: rgba(226, 232, 240, .72); }
html[data-theme='dark'] .calc-gross-preview strong { color: #f1f5f9; }
html[data-theme='dark'] .calc-tax-table__total td {
    background: rgba(71, 85, 105, .52);
}
.calc-donut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    padding: 1.4rem 0 1rem;
}
.calc-donut {
    position: relative;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    flex-shrink: 0;
}
.calc-donut__center {
    position: absolute;
    inset: 32px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    text-align: center;
}
.calc-donut__center span {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}
.calc-donut__center strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}
.calc-donut-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.calc-donut-legend__item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: #64748b;
    font-weight: 600;
}
.calc-donut-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.calc-donut-legend__dot--net     { background: #f59e0b; }
.calc-donut-legend__dot--taxes   { background: #7c3aed; }
.calc-donut-legend__dot--employer { background: #e2e8f0; }
.calc-breakdown {
    margin-top: 1rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .14);
}
.calc-breakdown__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .78rem 1.1rem;
    font-size: .97rem;
    color: #334155;
    border-bottom: 1px solid rgba(148, 163, 184, .13);
}
.calc-breakdown__row:last-child { border-bottom: 0; }
.calc-breakdown__row--section {
    background: rgba(241, 245, 249, .8);
    font-weight: 700;
    color: #0f172a;
}
.calc-breakdown__row--section strong {
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}
.calc-breakdown__row--neg strong { color: #dc2626; }
.calc-breakdown__row--item {
    padding-left: 1.75rem;
    font-size: .9rem;
    color: #64748b;
}
.calc-breakdown__row--item span:last-child { color: #dc2626; font-weight: 600; }
.calc-breakdown__row--total {
    background: #0f172a;
    font-weight: 800;
    font-size: 1rem;
    color: #f1f5f9;
    border-bottom: 0;
}
.calc-breakdown__row--total span  { color: #94a3b8; }
.calc-breakdown__row--total strong { color: #f8fafc; font-size: 1.1rem; }
.calc-employer-block {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(148, 163, 184, .16);
}
.calc-employer-block__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: .6rem;
}
.calc-employer-block .calc-breakdown__row--total {
    background: #1e293b;
}
html[data-theme='dark'] .calc-donut__center {
    background: #0f172a;
}
html[data-theme='dark'] .calc-donut__center span { color: rgba(148, 163, 184, .8); }
html[data-theme='dark'] .calc-donut__center strong { color: #f8fafc; }
html[data-theme='dark'] .calc-donut-legend__item { color: rgba(148, 163, 184, .8); }
html[data-theme='dark'] .calc-donut-legend__dot--employer { background: rgba(148, 163, 184, .3); }
html[data-theme='dark'] .calc-breakdown {
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .12);
}
html[data-theme='dark'] .calc-breakdown__row {
    color: rgba(226, 232, 240, .8);
    border-bottom-color: rgba(148, 163, 184, .1);
}
html[data-theme='dark'] .calc-breakdown__row--section {
    background: rgba(30, 41, 59, .7);
    color: #f8fafc;
}
html[data-theme='dark'] .calc-breakdown__row--section strong { color: #f8fafc; }
html[data-theme='dark'] .calc-breakdown__row--item { color: rgba(148, 163, 184, .8); }
html[data-theme='dark'] .calc-breakdown__row--item span:last-child { color: #fca5a5; }
html[data-theme='dark'] .calc-breakdown__row--neg strong { color: #fca5a5; }
html[data-theme='dark'] .calc-breakdown__row--total {
    background: rgba(255, 255, 255, .04);
    border-top: 1px solid rgba(148, 163, 184, .14);
}
html[data-theme='dark'] .calc-employer-block { border-top-color: rgba(148, 163, 184, .14); }
html[data-theme='dark'] .calc-employer-block__title { color: rgba(148, 163, 184, .7); }
html[data-theme='dark'] .calc-employer-block .calc-breakdown__row--total { background: rgba(255,255,255,.06); }
.calc-retirement-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.calc-retirement-row {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
}
.calc-retirement-row__grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr .9fr;
    gap: .65rem;
    align-items: end;
}
.calc-lines-table-wrap {
    margin-top: 2rem;
    padding: 2rem;
    border-radius: 24px;
    background: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-elev-1);
}
.calc-lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.calc-lines-table thead th {
    padding: .7rem 1rem;
    background: rgba(248, 250, 252, .9);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    border-bottom: 1px solid rgba(148, 163, 184, .15);
    text-align: left;
}
.calc-lines-table tbody tr {
    border-bottom: 1px solid rgba(148, 163, 184, .1);
}
.calc-lines-table tbody tr:last-child { border-bottom: none; }
.calc-lines-table tbody td {
    padding: .75rem 1rem;
    vertical-align: top;
    color: #334155;
}
.calc-lines-table__name {
    font-weight: 600;
    color: #0f172a;
    margin-bottom: .18rem;
}
.calc-lines-table__desc {
    font-size: .82rem;
    color: #64748b;
    line-height: 1.45;
}
html[data-theme='dark'] .calc-lines-table-wrap {
    background: #0f172a;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, .12), 0 2px 8px rgba(2, 6, 23, .18);
}
html[data-theme='dark'] .calc-lines-table thead th {
    background: rgba(15, 23, 42, .7);
    color: rgba(148, 163, 184, .75);
    border-bottom-color: rgba(148, 163, 184, .12);
}
html[data-theme='dark'] .calc-lines-table tbody tr { border-bottom-color: rgba(148, 163, 184, .08); }
html[data-theme='dark'] .calc-lines-table tbody td { color: #cbd5e1; }
html[data-theme='dark'] .calc-lines-table__name { color: #f1f5f9; }
html[data-theme='dark'] .calc-lines-table__desc { color: rgba(148, 163, 184, .7); }
.calc-page-coverage {
    margin-top: 1.25rem;
    padding: .85rem 1rem;
    border-radius: 10px;
    background: rgba(148, 163, 184, .07);
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.calc-page-coverage span {
    font-size: .78rem;
    color: #94a3b8;
    line-height: 1.45;
}
html[data-theme='dark'] .calc-page-coverage { background: rgba(15, 23, 42, .4); }
html[data-theme='dark'] .calc-page-coverage span { color: rgba(148, 163, 184, .55); }
.calc-disclaimer {
    margin-top: .85rem;
    font-size: .76rem;
    color: #94a3b8;
    text-align: center;
    line-height: 1.5;
}
html[data-theme='dark'] .calc-disclaimer { color: rgba(148, 163, 184, .45); }
@media (max-width: 992px) {
    .calc-shell {
        grid-template-columns: 1fr;
    }
    .calc-results-card {
        order: 2;
    }
}
@media (max-width: 640px) {
    .calc-form-grid {
        grid-template-columns: 1fr;
    }
    .calc-form-card,
    .calc-results-card {
        border-radius: 18px;
    }
    .calc-tabs-nav { padding: 0 1rem; }
    .calc-form-section { padding: 1rem; }
    .calc-card-header { padding: 1rem 1rem .75rem; }
}
@media (max-width: 768px) {
    .sf-breadcrumbs {
        font-size: .8rem;
        gap: .35rem;
    }
    .article-byline {
        flex-direction: column;
        gap: .35rem;
        font-size: .86rem;
    }
}
@media (max-width: 768px) {
    .guide-layout {
        gap: 1.15rem;
    }
    .guide-prose section {
        padding: 1rem 0;
    }
    .guide-panel {
        padding: .95rem .9rem;
        border-radius: 18px;
    }
    .guide-table-wrap {
        margin-top: .85rem;
        margin-inline: -.1rem;
        padding-bottom: .2rem;
    }
    .guide-table {
        min-width: 520px;
    }
    .guide-table th,
    .guide-table td {
        padding: .75rem .78rem;
    }
    .guide-terms {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
    #faqHeroSection .sf-section-head {
        text-align: center;
    }
    #faqContentSection .guide-layout {
        gap: 1rem;
    }
    .home-faq-accordion summary {
        align-items: flex-start;
        padding: 1.05rem 1rem;
    }
    .home-faq-accordion summary span:first-child {
        flex: 1 1 auto;
        text-align: left;
        line-height: 1.45;
    }
    .home-faq-accordion__icon {
        width: 2.5rem;
        height: 2.5rem;
    }
    .home-faq-accordion__body {
        padding: 0 1rem 1rem;
    }
    #storefrontReviewsSection > .sf-container {
        max-width: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    #storefrontReviewsSection .section-heading,
    #storefrontReviewsSection .review-spotlight-toolbar {
        /* Zero horizontal — the section itself now carries the standard
           1rem gutter (matches the rest of the page). Inner inset would
           push the heading + summary past every other section's 16px. */
        padding-inline: 0;
    }
    #storefrontReviewsSection .review-spotlight-shell {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-inline: 1rem;
        padding-top: .15rem;
        overflow: visible;
    }
    #storefrontReviewsSection .review-spotlight-carousel {
       
        --carousel-gap: .85rem;
        padding-top: .85rem;
        padding-bottom: 1.5rem;
        scroll-padding-left: 1rem;
        scroll-padding-right: 1rem;
    }
    #storefrontReviewsSection .review-card.review-card--spotlight {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 14px 26px rgba(15, 23, 42, .1), 0 26px 54px rgba(15, 23, 42, .12);
    }
    html[data-theme='dark'] #storefrontReviewsSection .review-card.review-card--spotlight {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 16px 30px rgba(2, 8, 23, .22), 0 28px 58px rgba(2, 8, 23, .26);
    }
}
@media (max-width: 480px) {
    /* Heading + summary stay flush with the section's own 1rem gutter
       (no extra inset). The shell — which escapes the container via
       width:100vw — keeps its tighter .85rem gutter so the carousel
       cards start a hair inside the viewport edge. */
    #storefrontReviewsSection .section-heading,
    #storefrontReviewsSection .review-spotlight-toolbar {
        padding-inline: 0;
    }
    #storefrontReviewsSection .review-spotlight-shell {
        padding-inline: .85rem;
    }
    #storefrontReviewsSection .review-spotlight-carousel {
       
        --carousel-gap: .78rem;
        scroll-padding-left: .85rem;
        scroll-padding-right: .85rem;
    }
}
#wizPreviewPages {
  max-width: 780px;
  margin: 0 auto;
  padding: .75rem .75rem 0;
}
#wizPreviewPages canvas {
  width: 100%;
  max-width: 740px;
  border: 1px solid rgba(148, 163, 184, .35);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}
.wiz-preview-purchase-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin: .35rem 1rem .1rem;
  padding: .65rem .85rem;
  border: 1px solid rgba(148, 163, 184, .3);
  border-radius: 10px;
  background: #fff;
  font-size: .9rem;
  color: #0f172a;
}
.wiz-preview-actions {
  align-items: center;
  flex-wrap: wrap;
}
.btn-wiz-secondary {
  border: 1px solid rgba(148, 163, 184, .5);
  background: #f8fafc;
  color: #0f172a;
  border-radius: 10px;
  padding: .8rem 1rem;
  font-weight: 700;
  cursor: pointer;
}
.preview-popup__zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem .8rem;
  border-bottom: 1px solid rgba(148, 163, 184, .2);
  background: #f8fafc;
}
.preview-popup__zoom button {
  border: 1px solid rgba(148, 163, 184, .45);
  background: #fff;
  color: #0f172a;
  border-radius: 8px;
  min-width: 2.1rem;
  padding: .35rem .55rem;
  font-weight: 700;
  cursor: pointer;
}
#previewPopupZoomLabel {
  min-width: 3.2rem;
  text-align: center;
  font-size: .9rem;
  color: #0f172a;
  font-weight: 700;
}
.wiz-preview-step {
  margin-top: .9rem;
}
.wiz-preview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
  align-items: start;
  padding: .85rem 1rem 1.1rem;
}
.wiz-preview-gallery {
  --wiz-frame-width: clamp(210px, 34vw, 320px);
  --wiz-frame-half: clamp(105px, 17vw, 160px);
  --wiz-arrow-size: clamp(2.1rem, 3.2vw, 2.6rem);
  --wiz-arrow-gap: clamp(.55rem, 1.2vw, .95rem);
  --wiz-arrow-offset: calc(var(--wiz-arrow-size) + var(--wiz-arrow-gap));
  position: relative;
  display: grid;
  place-items: center;
  overflow: visible;
}
#wizPreviewPages.wiz-preview-carousel {
  width: var(--wiz-frame-width);
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  place-items: center;
  overflow: hidden;
  padding: .25rem 0 .35rem;
  position: relative;
  z-index: 1;
}
#wizPreviewPages.wiz-preview-carousel .wiz-preview-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 23, 42, .22), 0 6px 14px rgba(15, 23, 42, .14);
}
#wizPreviewPages.wiz-preview-carousel::-webkit-scrollbar { display: none; }
#wizPreviewPages.wiz-preview-carousel { scrollbar-width: none; }
.wiz-preview-gallery #wizPreviewNav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
  border: 0;
  z-index: 10;
}
.wiz-preview-gallery #wizPreviewNav .generator-preview-label { display: none; }
.wiz-preview-gallery #wizPreviewNav .btn-nav {
  position: absolute;
  top: 0;
  width: var(--wiz-arrow-size);
  height: var(--wiz-arrow-size);
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .45);
  background: radial-gradient(circle at 28% 28%, rgba(255,255,255,.98) 0%, rgba(239,246,255,.94) 38%, rgba(219,234,254,.9) 100%);
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .2), inset 0 1px 0 rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: auto;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wiz-preview-gallery #wizPreviewNav .btn-nav span {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 800;
  line-height: 1;
}
.wiz-preview-gallery #wizPreviewNav .btn-nav--prev {
  left: calc(50% - var(--wiz-frame-half) - var(--wiz-arrow-offset));
}
.wiz-preview-gallery #wizPreviewNav .btn-nav--next {
  left: calc(50% + var(--wiz-frame-half) + var(--wiz-arrow-gap));
}
.wiz-preview-gallery #wizPreviewNav .btn-nav:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 14px 26px rgba(15, 23, 42, .28), inset 0 1px 0 rgba(255,255,255,.9);
}
.wiz-preview-gallery #wizPreviewNav[hidden] { display: none !important; }
@media (max-width: 640px) {
  .wiz-preview-gallery {
    --wiz-frame-width: min(74vw, 280px);
    --wiz-frame-half: min(37vw, 140px);
    --wiz-arrow-size: 2rem;
    --wiz-arrow-gap: .35rem;
  }
}
@keyframes wizSlideEnterRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wizSlideEnterLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wizSlideLeaveLeft {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-60px); }
}
@keyframes wizSlideLeaveRight {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(60px); }
}
.wiz-carousel-item--leave-to-left {
  animation: wizSlideLeaveLeft .25s cubic-bezier(.4, 0, .2, 1) both;
  z-index: 1;
}
.wiz-carousel-item--leave-to-right {
  animation: wizSlideLeaveRight .25s cubic-bezier(.4, 0, .2, 1) both;
  z-index: 1;
}
.preview-summary-bar {
  background: transparent;
  border-bottom: 0;
  padding: .55rem 0 .35rem;
}
.wiz-purchase-card {
  position: sticky;
  top: 1rem;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.15);
  padding: .9rem;
}
.wiz-preview-purchase-meta {
  margin: 0;
}
.wiz-preview-purchase-meta span {
  display: block;
  font-size: .9rem;
  color: #0f172a;
  margin-bottom: .4rem;
}
.wiz-preview-actions {
  margin-top: .45rem;
  padding: 0;
  border-top: 0;
  display: grid;
  gap: .55rem;
}
.wiz-preview-actions .btn-wiz-cart,
.wiz-preview-actions .btn-wiz-buynow,
.wiz-preview-actions .btn-wiz-secondary {
  width: 100%;
}
@media (max-width: 1040px) {
  .wiz-preview-layout {
    grid-template-columns: 1fr;
  }
  .wiz-purchase-card {
    position: static;
  }
}
#wizPreviewPages.wiz-preview-carousel {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: .75rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .35rem .25rem .5rem;
}
.wiz-preview-step {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-elev-1);
  background: var(--white);
  overflow: visible;
  position: relative;
  margin-bottom: 0;
}
.wiz-preview-step .generator-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem .55rem 4.35rem;
  min-height: 56px;
}
.wiz-preview-layout {
  display: block;
  padding: .75rem 1rem 1rem;
}
@media (max-width: 900px) {
  .wiz-preview-step .generator-preview-header {
    padding-left: 1rem;
  }
}
.preview-summary-bar {
  background: transparent;
  border-bottom: 0;
  padding: .55rem 0 .35rem;
}
.wiz-preview-gallery {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
#wizPreviewPages.wiz-preview-carousel {
  display: flex !important;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: .35rem 0 .25rem;
}
#wizPreviewPages.wiz-preview-carousel::-webkit-scrollbar {
  display: none;
}
#wizPreviewPages.wiz-preview-carousel {
  scrollbar-width: none;
}
.wiz-preview-gallery {
  position: relative;
}
.wiz-preview-gallery #wizPreviewNav {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(.25rem, 1.5vw, .65rem);
  border: 0;
  pointer-events: none;
  z-index: 3;
}
.wiz-preview-gallery #wizPreviewNav .generator-preview-label {
  display: none;
}
.wiz-preview-gallery #wizPreviewNav .btn-nav {
  width: clamp(2rem, 3.8vw, 2.35rem);
  height: clamp(2rem, 3.8vw, 2.35rem);
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .45);
  background: rgba(255,255,255,.95);
  color: #0f172a;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .16);
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.wiz-preview-gallery #wizPreviewNav[hidden] {
  display: none !important;
}
.wiz-receipt__totals>div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
}
.wiz-receipt__totals span {
  font-size: .82rem;
  color: #64748b;
}
.wiz-receipt__totals strong {
  font-size: .92rem;
  color: #0f172a;
  font-weight: 700;
}
.wiz-receipt__totals {
  display: grid;
  gap: .28rem;
}
.wiz-receipt__grand span {
  font-size: .9rem;
  font-weight: 700;
  color: #0f172a;
}
.wiz-receipt__grand strong {
  font-size: 1rem;
}
html[data-theme='dark'] .wiz-receipt__totals span {
  color: #94a3b8;
}
html[data-theme='dark'] .wiz-receipt__totals strong, html[data-theme='dark'] .wiz-receipt__grand span {
  color: #f8fafc;
}
:root {
  --site-admin-sidebar-width: 18.75rem;
  --site-admin-sidebar-compact-width: 5.25rem;
  --site-account-sidebar-width: var(--site-admin-sidebar-width);
  --site-account-workspace-gap: 0rem;
}
.admin-workspace {
  grid-template-columns: var(--site-active-admin-sidebar-width, var(--site-admin-sidebar-width)) minmax(0, 1fr);
}
.admin-sidebar {
  width: var(--site-active-admin-sidebar-width, var(--site-admin-sidebar-width));
  max-width: var(--site-active-admin-sidebar-width, var(--site-admin-sidebar-width));
  flex: 0 0 var(--site-active-admin-sidebar-width, var(--site-admin-sidebar-width));
}
:root {
  --site-container-wide: 1200px;
  --brand-soft: #e2efff;
  --color-primary: #0385ff;
  --shadow-centered-sm: 0 6px 16px rgba(15, 23, 42, .08);
  --shadow-centered-md: 0 10px 24px rgba(15, 23, 42, .12);
  --shadow-centered-green: 0 14px 30px rgba(5, 150, 105, .22);
  --sf-muted-strong: #475569;
  --sf-type-body-size: 1rem;
  --sf-type-body-line: 1.6;
  --sf-type-h2-l-size: clamp(2rem, 4vw, 2.8rem);
  --sf-type-h2-l-line: 1.1;
  --sf-type-h3-size: clamp(1.35rem, 2.2vw, 1.65rem);
  --sf-type-h3-line: 1.2;
  --sf-type-h3-l-size: clamp(1.6rem, 3vw, 2rem);
  --sf-type-h3-l-line: 1.14;
  --sf-type-h4-size: 1.12rem;
  --sf-type-h4-line: 1.25;
  --sf-rhythm-copy-reset: 0;
  --sf-rhythm-title-to-body: .65rem;
  --sf-rhythm-paragraph-to-title: 1rem;
  --sf-rhythm-body-stack: .9rem;
  --wiz-line-left: 0px;
  --wiz-line-width: 100%;
}
body:not(.shell-account):not(.shell-admin) .admin-workspace {
  display: block;
  grid-template-columns: none;
  min-height: auto;
}
body:not(.shell-account):not(.shell-admin) .admin-sidebar {
  position: static;
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 0;
  transform: none;
  border-right: 0;
  box-shadow: none;
}
@media (min-width: 1025px) {
  body.shell-account .admin-workspace,
  body.shell-admin .admin-workspace {
    grid-template-columns: var(--site-active-admin-sidebar-width, var(--site-admin-sidebar-width)) minmax(0, 1fr) !important;
  }
  body.shell-account .admin-sidebar,
  body.shell-admin .admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: var(--site-active-admin-sidebar-width, var(--site-admin-sidebar-width)) !important;
    max-width: var(--site-active-admin-sidebar-width, var(--site-admin-sidebar-width)) !important;
    height: 100vh !important;
    min-height: 100vh !important;
  }
}
@media (max-width: 1024px) {
  body.shell-account .admin-sidebar,
  body.shell-admin .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(22rem, calc(100vw - 3rem)) !important;
    max-width: 100% !important;
    transform: translateX(calc(-100% - 1rem)) !important;
  }
  body.shell-account .workspace-sidebar.is-mobile-open,
  body.shell-admin .workspace-sidebar.is-mobile-open {
    transform: translateX(0) !important;
  }
}
.ticket-badge {
  display: inline-flex;
  align-items: center;
  padding: .22rem .65rem;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.ticket-badge--new     { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.ticket-badge--open    { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.ticket-badge--resolved { background: #dcfce7; color: #166534; border-color: #86efac; }
.ticket-badge--closed  { background: #f8fafc; color: #64748b; border-color: #cbd5e1; }
.ticket-badge--appeal  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.ticket-badge--critical { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.ticket-badge--high    { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.ticket-badge--medium  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.ticket-badge--low     { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.ticket-timeline { display: grid; gap: 1.25rem; }
.ticket-timeline__item { display: flex; gap: .75rem; align-items: flex-start; }
.ticket-timeline__avatar {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  background: #e2e8f0;
  color: #64748b;
}
.ticket-timeline__avatar--customer { background: #eff6ff; color: #1d4ed8; }
.ticket-timeline__avatar--agent    { background: #ecfdf5; color: #059669; }
.ticket-timeline__avatar--system   { background: #faf5ff; color: #7c3aed; }
.ticket-timeline__body {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0 12px 12px 12px;
  padding: .85rem 1.1rem;
  font-size: .92rem;
  color: #1e293b;
  line-height: 1.65;
  min-width: 0;
}
.ticket-timeline__body--policy { background: #faf5ff; border-color: #e9d5ff; }
.ticket-timeline__meta {
  font-size: .76rem;
  color: #94a3b8;
  margin-top: .4rem;
  padding-left: .25rem;
}
.support-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 2rem;
  counter-reset: step;
}
.support-stepper__step {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  font-weight: 600;
  color: #94a3b8;
  flex: 1;
}
.support-stepper__step::after {
  content: '';
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin-left: .5rem;
}
.support-stepper__step:last-child::after { display: none; }
.support-stepper__dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
  color: #94a3b8;
}
.support-stepper__step--active .support-stepper__dot {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
.support-stepper__step--active { color: #1e293b; }
.support-stepper__step--done .support-stepper__dot {
  background: #059669;
  border-color: #059669;
  color: #fff;
}
.support-stepper__step--done { color: #059669; }
.support-deflect-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  color: #1e293b;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.support-deflect-card:hover {
  border-color: #1d4ed8;
  box-shadow: 0 4px 16px rgba(29,78,216,.1);
  transform: translateY(-2px);
  color: #1e293b;
}
.support-deflect-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1d4ed8;
}
.support-deflect-card__title { font-weight: 700; font-size: .95rem; }
.support-deflect-card__desc  { font-size: .82rem; color: #64748b; line-height: 1.45; }
.cw-wrap {
  max-width: 680px;
  margin: 0 auto;
}
.cw-progress {
  height: 4px;
  background: #e2e8f0;
  border-radius: 999px;
  margin-bottom: 2rem;
  overflow: hidden;
}
.cw-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  border-radius: 999px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.cw-q { display: none; }
.cw-q.is-active {
  display: block;
  animation: cwEnter .22s ease;
}
.cw-q.is-leaving {
  animation: cwLeave .16s ease forwards;
}
@keyframes cwEnter {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cwEnterBack {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cwLeave {
  to { opacity: 0; transform: translateX(-16px); }
}
.cw-q__step {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #3b82f6;
  margin: 0 0 .35rem;
}
.cw-q__title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 .35rem;
  line-height: 1.2;
}
.cw-q__hint {
  font-size: .875rem;
  color: #64748b;
  margin: 0 0 1.5rem;
}
.cw-q__head {
  margin-bottom: 1.5rem;
}
.cw-choices {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, 1fr);
}
.cw-choices--3col {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
  .cw-choices, .cw-choices--3col { grid-template-columns: 1fr; }
  .cw-q__title { font-size: 1.25rem; }
}
@media (min-width: 601px) and (max-width: 800px) {
  .cw-choices--3col { grid-template-columns: repeat(2, 1fr); }
}
.cw-choice {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1.1rem 1.2rem;
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color .14s, background .14s, box-shadow .14s, transform .12s;
}
.cw-choice:hover {
  border-color: #93c5fd;
  background: #f8fafc;
  box-shadow: 0 4px 14px rgba(59,130,246,.1);
  transform: translateY(-1px);
}
.cw-choice:active { transform: scale(.99); }
.cw-choice__icon {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  transition: background .14s, color .14s;
}
.cw-choice:hover .cw-choice__icon { background: #dbeafe; color: #1d4ed8; }
.cw-choice__body { min-width: 0; }
.cw-choice__label {
  font-weight: 700;
  font-size: .9rem;
  color: #1e293b;
  line-height: 1.3;
  display: block;
}
.cw-choice__desc {
  font-size: .78rem;
  color: #64748b;
  line-height: 1.45;
  margin-top: .2rem;
}
.cw-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: none;
  color: #64748b;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.25rem;
  transition: color .12s;
}
.cw-back:hover { color: #1e293b; }
.cw-breadcrumb {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}
html[data-theme='dark'] .cw-progress { background: rgba(148,163,184,.2); }
html[data-theme='dark'] .cw-q__title { color: #f1f5f9; }
html[data-theme='dark'] .cw-q__hint { color: rgba(148,163,184,.8); }
html[data-theme='dark'] .cw-choice { background: rgba(15,23,42,.6); border-color: rgba(148,163,184,.18); }
html[data-theme='dark'] .cw-choice:hover { background: rgba(30,41,59,.7); border-color: #3b82f6; box-shadow: 0 4px 14px rgba(59,130,246,.18); }
html[data-theme='dark'] .cw-choice__icon { background: rgba(148,163,184,.12); color: #94a3b8; }
html[data-theme='dark'] .cw-choice:hover .cw-choice__icon { background: rgba(59,130,246,.18); color: #93c5fd; }
html[data-theme='dark'] .cw-choice__label { color: #e2e8f0; }
html[data-theme='dark'] .cw-choice__desc { color: rgba(148,163,184,.75); }
html[data-theme='dark'] .cw-back { color: rgba(148,163,184,.75); }
html[data-theme='dark'] .cw-back:hover { color: #e2e8f0; }
html[data-theme='dark'] .ticket-badge { background: rgba(148,163,184,.12); color: #94a3b8; border-color: rgba(148,163,184,.2); }
html[data-theme='dark'] .ticket-badge--new { background: rgba(59,130,246,.14); color: #93c5fd; border-color: rgba(59,130,246,.3); }
html[data-theme='dark'] .ticket-badge--open,
html[data-theme='dark'] .ticket-badge--resolved { background: rgba(34,197,94,.12); color: #86efac; border-color: rgba(34,197,94,.28); }
html[data-theme='dark'] .ticket-badge--closed,
html[data-theme='dark'] .ticket-badge--low { background: rgba(148,163,184,.1); color: #94a3b8; border-color: rgba(148,163,184,.22); }
html[data-theme='dark'] .ticket-badge--critical { background: rgba(239,68,68,.14); color: #fca5a5; border-color: rgba(239,68,68,.28); }
html[data-theme='dark'] .ticket-badge--high { background: rgba(249,115,22,.12); color: #fdba74; border-color: rgba(249,115,22,.28); }
html[data-theme='dark'] .ticket-badge--appeal,
html[data-theme='dark'] .ticket-badge--medium { background: rgba(245,158,11,.12); color: #fcd34d; border-color: rgba(245,158,11,.28); }
html[data-theme='dark'] .ticket-timeline__avatar { background: rgba(148,163,184,.18); color: #94a3b8; }
html[data-theme='dark'] .ticket-timeline__avatar--customer { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme='dark'] .ticket-timeline__avatar--agent { background: rgba(34,197,94,.14); color: #86efac; }
html[data-theme='dark'] .ticket-timeline__avatar--system { background: rgba(167,139,250,.14); color: #c4b5fd; }
html[data-theme='dark'] .ticket-timeline__body { background: rgba(15,23,42,.5); border-color: rgba(148,163,184,.18); color: #e2e8f0; }
html[data-theme='dark'] .ticket-timeline__body--policy { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.24); }
html[data-theme='dark'] .ticket-timeline__meta { color: rgba(148,163,184,.7); }
html[data-theme='dark'] .support-stepper__step { color: rgba(148,163,184,.7); }
html[data-theme='dark'] .support-stepper__step::after { background: rgba(148,163,184,.22); }
html[data-theme='dark'] .support-stepper__dot { border-color: rgba(148,163,184,.3); background: rgba(15,23,42,.6); color: rgba(148,163,184,.7); }
html[data-theme='dark'] .support-stepper__step--active { color: #e2e8f0; }
html[data-theme='dark'] .support-stepper__step--done { color: #86efac; }
html[data-theme='dark'] .support-deflect-card { background: rgba(15,23,42,.6); border-color: rgba(148,163,184,.18); color: #e2e8f0; }
html[data-theme='dark'] .support-deflect-card:hover { border-color: #3b82f6; box-shadow: 0 4px 16px rgba(59,130,246,.18); color: #e2e8f0; }
html[data-theme='dark'] .support-deflect-card__icon { background: rgba(59,130,246,.16); color: #93c5fd; }
html[data-theme='dark'] .support-deflect-card__desc { color: rgba(148,163,184,.8); }
.acc-header {
  gap: .75rem;
}
.acc-title {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.acc-date {
  max-width: 100%;
  white-space: nowrap;
}
.acc-chevron {
  flex: 0 0 auto;
  margin-left: auto;
}
.generator-consent {
  align-items: flex-start;
  gap: .75rem;
}
.generator-consent-check {
  flex: 0 0 auto;
  margin-top: .1rem;
}
.wiz-preview-layout, .wiz-preview-gallery, #wizPreviewPages.wiz-preview-carousel {
  min-width: 0;
}
@media (max-width: 900px) {
  .wiz-progress-wrap {
    overflow-x: auto;
    padding: 0 .25rem .25rem;
    margin-inline: -.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .wiz-progress-wrap::-webkit-scrollbar {
    display: none;
  }
  .wiz-progress {
    width: 100%;
    min-width: 40rem;
    justify-content: space-between;
    gap: 0;
    --wiz-side-pad: .75rem;
    padding: 1.5rem .75rem 1.35rem;
  }
  .wiz-progress::before {
    top: calc(1.5rem + 14px);
  }
  .acc-header {
    align-items: flex-start;
  }
  .li-header.li-ded {
    display: none;
  }
  .li-row--addition {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
    gap: .5rem;
  }
  .li-row--addition > :first-child {
    grid-column: 1 / -1;
  }
  .li-row--addition > :nth-child(2),
  .li-row--addition > :nth-child(3),
  .li-row--addition > :nth-child(4) {
    grid-row: 2;
  }
  .li-row.li-ded {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 102px) 28px 32px;
    gap: .35rem;
  }
  .local-tax-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
  }
  .local-tax-row > :first-child {
    grid-column: 1 / -1;
  }
  .local-tax-row > :nth-child(4) {
    grid-column: 1 / 3;
    width: 100%;
    justify-content: center;
  }
  .local-tax-row > :nth-child(5) {
    grid-column: 3;
    justify-self: center;
  }
  #wizPreviewPages.wiz-preview-carousel {
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .35rem .25rem .5rem;
    scroll-snap-type: x proximity;
  }
}
@media (max-width: 640px) {
  .pay-type-toggle {
    gap: .6rem;
  }
  .acc-title {
    gap: .45rem .55rem;
  }
  .generator-consent {
    font-size: .82rem;
  }
  .wiz-preview-step .generator-preview-header {
    padding: 1rem 1rem .55rem;
    min-height: 0;
  }
  .wiz-preview-layout {
    padding: .7rem .75rem .9rem;
  }
  .wiz-preview-gallery #wizPreviewNav {
    padding-inline: .1rem;
  }
  .wiz-preview-gallery #wizPreviewNav .btn-nav {
    width: 1.9rem;
    height: 1.9rem;
  }
}
@media (max-width: 540px) {
  .li-row--addition,
  .local-tax-row {
    grid-template-columns: 1fr;
  }
  .li-row--addition > *,
  .local-tax-row > * {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
  }
  .btn-rm {
    justify-self: start;
  }
  .li-row.li-ded {
    grid-template-columns: minmax(0, 1fr) minmax(76px, 92px) 28px 30px;
    gap: .3rem;
  }
  .li-row.li-ded > * {
    width: auto;
  }
  .li-row.li-ded .btn-rm,
  .li-row.li-ded .btn-drag {
    justify-self: center;
  }
}
@media (max-width: 640px) {
    .cart-panel,
    .checkout-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        border-left: 0;
    }
    .checkout-panel-overlay {
        display: none;
    }
}

.article-shell--editorial {
  max-width: 1180px;
}

.article-shell--editorial .article-topmatter {
  max-width: 860px;
  margin-inline: auto;
  text-align: left;
}

.article-shell--editorial .article-topmatter h1 {
  max-width: 820px;
  font-size: clamp(2.25rem, 4vw, 4.35rem);
  line-height: 1.02;
}

.article-shell--editorial .article-topmatter__summary {
  max-width: 760px;
  font-size: 1.18rem;
}

.article-shell--editorial .article-cover-image {
  max-height: 520px;
  border-radius: 8px;
  object-fit: cover;
}

.article-shell--editorial .article-layout {
  grid-template-columns: minmax(0, 760px) 300px;
  align-items: start;
  gap: 2rem;
}

.article-shell--editorial .article-content {
  max-width: 760px;
}

.article-shell--editorial .article-problem-panel,
.article-shell--editorial .article-key-takeaways-panel,
.article-shell--editorial .article-toc-panel,
.article-shell--editorial .article-conclusion-panel {
  border-radius: 8px;
}

.article-shell--editorial .article-toc-panel {
  display: none;
}

.article-shell--editorial .article-section {
  padding-block: 1.1rem;
}

.article-shell--editorial .article-section h2 {
  margin-top: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: 1.14;
}

.article-shell--editorial .article-content p,
.article-shell--editorial .article-content li {
  font-size: 1.03rem;
  line-height: 1.78;
}

.article-shell--editorial .article-content a {
  color: #075eb8;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-shell--editorial .article-table-wrap {
  margin-block: 1.3rem;
  border-radius: 8px;
}

.article-sidebar-panel--sticky {
  position: sticky;
  top: 96px;
}

.article-sidebar-list {
  margin: .85rem 0 0;
  padding-left: 1.15rem;
}

.article-sidebar-list li {
  margin-bottom: .65rem;
  color: #475569;
  font-size: .92rem;
  line-height: 1.45;
}

.article-sidebar-list a {
  color: #0f172a;
  text-decoration: none;
}

.article-sidebar-list a:hover {
  color: #075eb8;
  text-decoration: underline;
}

html[data-theme='dark'] .article-shell--editorial .article-content a,
html[data-theme='dark'] .article-sidebar-list a:hover {
  color: #7dd3fc;
}

html[data-theme='dark'] .article-sidebar-list li {
  color: rgba(226, 232, 240, .76);
}

html[data-theme='dark'] .article-sidebar-list a {
  color: rgba(248, 250, 252, .92);
}

@media (max-width: 980px) {
  .article-shell--editorial .article-layout {
    grid-template-columns: 1fr;
  }

  .article-shell--editorial .article-toc-panel {
    display: block;
  }

  .article-sidebar-panel--sticky {
    position: static;
  }
}

/* =====================================================================
   .resource-cta  —  conversion block shipped on every /resources/* page
   via Pages/Shared/_ResourceCta.cshtml. Sits at top + bottom of each
   long-form article so the reader hits a generator path early AND
   after they've absorbed the answer. Light + dark theme variants below.
   ===================================================================== */
.resource-cta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.25rem;
    margin: 2rem 0;
    border-radius: 20px;
    border: 1px solid rgba(15, 79, 255, .18);
    background: linear-gradient(180deg, rgba(15, 79, 255, .06), rgba(15, 79, 255, .02));
}
    .resource-cta__title {
        margin: 0;
        font-size: var(--sf-type-h4-size, 1.3rem);
        line-height: 1.25;
        letter-spacing: -.01em;
        color: #0f172a;
    }
    .resource-cta__lead {
        margin: .35rem auto 0;
        max-width: 56ch;
        color: #475569;
        font-size: 1rem;
        line-height: 1.55;
    }
    .resource-cta__actions {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        justify-content: center;
        margin-top: .35rem;
    }
        .resource-cta__actions > a {
            min-width: 11rem;
        }

html[data-theme='dark'] .resource-cta {
    border-color: rgba(120, 160, 255, .35);
    background: linear-gradient(180deg, rgba(15, 79, 255, .18), rgba(15, 79, 255, .06));
}
    html[data-theme='dark'] .resource-cta__title { color: #f8fafc; }
    html[data-theme='dark'] .resource-cta__lead  { color: #cbd5e1; }

@media (max-width: 640px) {
    .resource-cta__actions > a { min-width: 100%; }
}

/* =====================================================================
   .reviewed-by  —  E-E-A-T byline + last-reviewed-date block emitted
   by Pages/Shared/_ReviewedBy.cshtml. Sits right under the H1 on
   editorial content pages so readers AND Google's quality raters see
   a real author + recent review date.
   ===================================================================== */
.reviewed-by {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    margin: -.5rem 0 1.25rem;
    font-size: .9rem;
    color: #475569;
}
    .reviewed-by__byline strong { color: #0f172a; font-weight: 600; }
    .reviewed-by__sep    { color: #94a3b8; }
    .reviewed-by__date   { color: #64748b; }
    .reviewed-by__date time { color: #64748b; }

html[data-theme='dark'] .reviewed-by               { color: #cbd5e1; }
html[data-theme='dark'] .reviewed-by__byline strong{ color: #f1f5f9; }
html[data-theme='dark'] .reviewed-by__sep,
html[data-theme='dark'] .reviewed-by__date,
html[data-theme='dark'] .reviewed-by__date time    { color: #94a3b8; }

/* =====================================================================
   SEO landing-page layout wrappers — thin grid/list containers around
   the existing .feature-card / .faq-card / .verification-promo-card
   chrome so the SEO landings (state / vs / glossary / industry / use-
   case / pricing) reuse the storefront's existing card pattern instead
   of each page inventing its own grid.
   ===================================================================== */

/* Grid of .feature-card items. Auto-fit fills the row with cards
   sized between 240px and 1fr; below 240px it stacks. Used by:
   PaystubGeneratorState (context cards + how-it-works steps),
   Form1099GeneratorState, VsHub (comparison cards), GlossaryHub,
   PaystubForUseCase, PaystubGeneratorForIndustry, Pricing. */
.feature-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    list-style: none;
    padding-left: 0;
}
.feature-card-grid--steps {
    counter-reset: feature-step;
}
    .feature-card-grid--steps > .feature-card {
        counter-increment: feature-step;
    }

/* Vertical stack of .faq-card details elements. Used by every page
   with an FAQ section — state landings, glossary, pricing, seasonal,
   use-case, etc. */
.faq-card-list {
    display: grid;
    gap: .65rem;
    margin-top: 1.25rem;
}
    .faq-card-list .faq-card {
        padding: 1rem 1.15rem;
    }
    .faq-card-list .faq-card > summary {
        cursor: pointer;
        font-weight: 600;
        color: #0f172a;
        list-style: none;
        padding: .15rem 0;
    }
        .faq-card-list .faq-card > summary::-webkit-details-marker { display: none; }
        .faq-card-list .faq-card > summary::after {
            content: "+";
            float: right;
            color: #0385ff;
            font-weight: 700;
        }
        .faq-card-list .faq-card[open] > summary::after { content: "−"; }
    .faq-card-list .faq-card > p {
        margin: .65rem 0 0;
        color: #475569;
        line-height: 1.65;
    }

html[data-theme='dark'] .faq-card-list .faq-card > summary { color: #f1f5f9; }
html[data-theme='dark'] .faq-card-list .faq-card > p       { color: #cbd5e1; }

/* Compact pill-style grid for hub link directories (state hubs, vs
   hub, glossary hub). 180-220px tile width — narrower than the
   feature-card grid so 50+ state tiles tile densely. */
.seo-tile-grid {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .65rem;
}
    .seo-tile-grid > li > a {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .75rem .9rem;
        border-radius: 12px;
        border: 1px solid rgba(148, 163, 184, .2);
        background: rgba(248, 250, 252, .5);
        text-decoration: none;
        color: #0f172a;
        transition: border-color .15s ease, background .15s ease, transform .12s ease;
    }
        .seo-tile-grid > li > a:hover {
            border-color: #0385ff;
            background: rgba(15, 79, 255, .06);
            transform: translateY(-1px);
        }
    .seo-tile-grid__abbr {
        display: inline-block;
        min-width: 2.1rem;
        padding: .15rem .3rem;
        font-weight: 700;
        font-size: .8rem;
        color: #0385ff;
        background: rgba(15, 79, 255, .1);
        border-radius: 6px;
        text-align: center;
    }
    .seo-tile-grid__name { font-size: .9rem; }

html[data-theme='dark'] .seo-tile-grid > li > a {
    background: rgba(15, 23, 42, .55);
    border-color: rgba(120, 160, 255, .25);
    color: #f1f5f9;
}
    html[data-theme='dark'] .seo-tile-grid > li > a:hover {
        background: rgba(15, 79, 255, .2);
        border-color: rgba(120, 160, 255, .55);
    }
    html[data-theme='dark'] .seo-tile-grid__abbr {
        background: rgba(15, 79, 255, .28);
        color: #cbd5ff;
    }

/* ============ Home hero — e1099f-derived design language ============ */
.sfx-hero{
    --sfx-blue:#0385FF; --sfx-blue-dk:#0270D9; --sfx-cyan:#22D3EE; --sfx-violet:#6D5EF6;
    --sfx-head:#0B1220; --sfx-text2:#3D4859; --sfx-text3:#6B7688;
    --sfx-surface:#FFFFFF; --sfx-surface1:#F5F8FC; --sfx-line:#E5EBF3; --sfx-line2:#EEF3F8;
    --sfx-soft:#EAF4FF; --sfx-ok-bg:#E9F7EE; --sfx-ok-tx:#15803D;
    --sfx-ease:cubic-bezier(.2,.7,.2,1);
    --sfx-sh:0 1px 1px rgba(11,27,51,.05),0 2px 2px rgba(11,27,51,.045),0 4px 5px rgba(11,27,51,.04),0 7px 10px rgba(11,27,51,.035),0 12px 18px rgba(11,27,51,.03);
    --sfx-sh-hi:0 1px 1px rgba(11,27,51,.05),0 2px 3px rgba(11,27,51,.045),0 5px 8px rgba(11,27,51,.05),0 10px 16px rgba(11,27,51,.055),0 18px 30px rgba(11,27,51,.06),0 30px 48px rgba(11,27,51,.07);
    --sfx-sh-pop:0 2px 2px rgba(11,27,51,.05),0 5px 7px rgba(11,27,51,.05),0 11px 15px rgba(11,27,51,.055),0 21px 30px rgba(11,27,51,.06),0 34px 52px rgba(11,27,51,.07);
    position:relative; padding:clamp(44px,5vw,84px) 0 clamp(36px,4vw,64px);
}
html[data-theme='dark'] .sfx-hero{
    --sfx-head:#F1F6FC; --sfx-text2:#AEBBCC; --sfx-text3:#8492A6;
    --sfx-surface:#101927; --sfx-surface1:#0D1520; --sfx-line:rgba(255,255,255,.09); --sfx-line2:rgba(255,255,255,.06);
    --sfx-soft:rgba(3,133,255,.14); --sfx-ok-bg:rgba(22,163,74,.16); --sfx-ok-tx:#4ADE80;
    --sfx-sh:0 1px 2px rgba(0,0,0,.4),0 6px 14px rgba(0,0,0,.34),0 14px 28px rgba(0,0,0,.28);
    --sfx-sh-hi:0 2px 4px rgba(0,0,0,.45),0 10px 22px rgba(0,0,0,.42),0 26px 50px rgba(0,0,0,.4);
    --sfx-sh-pop:0 4px 10px rgba(0,0,0,.5),0 18px 38px rgba(0,0,0,.45),0 34px 64px rgba(0,0,0,.4);
}
/* Aura blobs are clipped here, not on .sfx-hero, so the anchored use-cards can overhang the hero. */
.sfx-hero__bg{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.sfx-hero__bg::before,.sfx-hero__bg::after{content:""; position:absolute; border-radius:50%; filter:blur(70px)}
.sfx-hero__bg::before{width:52vw; height:52vw; left:-14vw; top:-22vw; background:radial-gradient(circle,rgba(3,133,255,.20),transparent 66%); animation:sfxAuraL 17s ease-in-out infinite}
.sfx-hero__bg::after{width:46vw; height:46vw; right:-12vw; top:-14vw; background:radial-gradient(circle,rgba(109,94,246,.16),transparent 66%); animation:sfxAuraR 21s ease-in-out infinite}
.sfx-hero__grid{position:relative; z-index:1; display:grid; gap:clamp(32px,4vw,60px); grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); align-items:center}
.sfx-pill{display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 12px; border-radius:999px; background:var(--sfx-surface); border:1px solid var(--sfx-line); box-shadow:var(--sfx-sh); font-size:.8125rem; font-weight:600; color:var(--sfx-text2); line-height:1}
.sfx-dot{width:6px; height:6px; border-radius:50%; background:var(--sfx-blue); flex:0 0 auto; animation:sfxPulse 2.2s ease-in-out infinite}
.sfx-hero h1{font-size:clamp(2.25rem,1.15rem + 3.5vw,3.5rem); line-height:1.04; letter-spacing:-.022em; font-weight:800; color:var(--sfx-head); margin:20px 0 0}
.sfx-accent{background:linear-gradient(122deg,var(--sfx-blue) 12%,#3AA5FF 52%,var(--sfx-cyan) 108%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent}
.sfx-lede{margin-top:20px; max-width:34em; font-size:1.125rem; line-height:1.65; color:var(--sfx-text2)}
.sfx-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.sfx-btn{display:inline-flex; align-items:center; gap:8px; font-size:.9375rem; font-weight:600; padding:14px 24px; border-radius:12px; border:1px solid transparent; transition:transform 140ms ease,box-shadow 140ms ease}
.sfx-btn--pri{background:linear-gradient(135deg,var(--sfx-blue) 0%,#2E9BFF 48%,var(--sfx-blue-dk) 100%); color:#fff; box-shadow:var(--sfx-sh); position:relative; overflow:hidden}
.sfx-btn--pri::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%); background-size:200% 100%; animation:sfxShimmer 3.2s linear infinite}
.sfx-btn--gho{background:var(--sfx-surface); color:var(--sfx-head); border-color:var(--sfx-line); box-shadow:var(--sfx-sh)}
.sfx-btn:hover{transform:translateY(-1px); box-shadow:var(--sfx-sh-hi)}
.sfx-trust{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:24px; list-style:none; padding:0}
.sfx-trust li{display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:500; color:var(--sfx-text2)}
.sfx-tick{width:17px; height:17px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--sfx-ok-bg); color:var(--sfx-ok-tx)}
.sfx-tick svg{width:10px; height:10px}
.sfx-mock{position:relative; border-radius:22px; background:var(--sfx-surface); border:1px solid var(--sfx-line); box-shadow:var(--sfx-sh-pop); animation:sfxFloat 7s ease-in-out infinite}
.sfx-mock__chrome{display:flex; align-items:center; gap:8px; padding:12px 16px; border-bottom:1px solid var(--sfx-line2); background:var(--sfx-surface1); border-radius:22px 22px 0 0}
.sfx-tl{display:flex; gap:6px}
.sfx-tl i{width:10px; height:10px; border-radius:50%; display:block}
.sfx-tl i:nth-child(1){background:#FF5F57}.sfx-tl i:nth-child(2){background:#FEBC2E}.sfx-tl i:nth-child(3){background:#28C840}
.sfx-addr{flex:1; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6875rem; color:var(--sfx-text3)}
.sfx-mock__body{padding:20px; position:relative; overflow:hidden; border-radius:0 0 22px 22px}
.sfx-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.sfx-stat{padding:14px 14px 12px; border-radius:12px; background:var(--sfx-surface1); border:1px solid var(--sfx-line2)}
.sfx-stat b{display:block; font-size:1.4rem; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--sfx-head)}
.sfx-stat small{font-size:.6875rem; color:var(--sfx-text3); font-weight:500}
.sfx-stat--ok b{color:var(--sfx-ok-tx)} .sfx-stat--blue b{color:var(--sfx-blue)}
.sfx-row{display:flex; align-items:center; gap:12px; margin-top:12px; padding:13px 14px; border-radius:12px; border:1px solid var(--sfx-line2); background:var(--sfx-surface); box-shadow:var(--sfx-sh)}
.sfx-row__ico{width:32px; height:32px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; background:var(--sfx-soft); color:var(--sfx-blue)}
.sfx-row__ico svg{width:15px; height:15px}
.sfx-row__tx{flex:1; min-width:0}
.sfx-row__tx b{display:block; font-size:.8125rem; font-weight:600; color:var(--sfx-head); line-height:1.5}
.sfx-row__tx small{font-size:.6875rem; color:var(--sfx-text3)}
.sfx-badge{font-size:.625rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; background:var(--sfx-ok-bg); color:var(--sfx-ok-tx); white-space:nowrap}
.sfx-flag{position:absolute; top:-14px; right:18px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:linear-gradient(135deg,#16A34A,#22C55E); color:#fff; font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; box-shadow:0 8px 20px rgba(22,163,74,.36); animation:sfxFloat 5.5s ease-in-out infinite .6s}
.sfx-scan{position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(3,133,255,.24),transparent); animation:sfxScan 4.5s linear infinite}
@keyframes sfxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sfxPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
@keyframes sfxShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes sfxAuraL{0%,100%{transform:translate3d(-3%,-2%,0) scale(1)}50%{transform:translate3d(4%,3%,0) scale(1.08)}}
@keyframes sfxAuraR{0%,100%{transform:translate3d(3%,-2%,0) scale(1)}50%{transform:translate3d(14%,4%,0) scale(1.1)}}
@keyframes sfxScan{0%{top:0}100%{top:100%}}
@media (max-width:980px){ .sfx-hero__grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .sfx-hero *,.sfx-hero *::before,.sfx-hero *::after{animation:none !important} }
.sfx-hero .market-hero-copy{text-align:left; max-width:none; margin:0; padding:0}
.sfx-hero .market-hero-copy h1{
    font-size:clamp(2.25rem,1.15rem + 3.5vw,3.5rem); line-height:1.04; letter-spacing:-.022em;
    font-weight:800; color:var(--sfx-head); margin:20px 0 0; text-align:left; text-transform:none;
}
.sfx-hero .market-hero-copy h1 br{display:block}
.sfx-hero .sfx-lede{text-align:left}
.sfx-hero.market-hero{display:block; min-height:0; text-align:left}
.sfx-hero .market-hero-copy h1 span{display:inline}
.sfx-hero .market-hero-copy h1{color:#0B1220}
.sfx-hero .market-hero-copy .sfx-lede,
.sfx-hero .sfx-trust li{color:#3D4859}
html[data-theme='dark'] .sfx-hero .market-hero-copy h1{color:#F1F6FC}
html[data-theme='dark'] .sfx-hero .market-hero-copy .sfx-lede,
html[data-theme='dark'] .sfx-hero .sfx-trust li,
html[data-theme='dark'] .sfx-hero .sfx-pill{color:#AEBBCC}
html[data-theme='dark'] .sfx-hero .sfx-row__tx b,
html[data-theme='dark'] .sfx-hero .sfx-stat b{color:#F1F6FC}
html[data-theme='dark'] .sfx-hero .sfx-row__tx small,
html[data-theme='dark'] .sfx-hero .sfx-addr{color:#8492A6}
html[data-theme='dark'] .sfx-hero .sfx-stat--ok b{color:#4ADE80}
html[data-theme='dark'] .sfx-hero .sfx-stat--blue b{color:#0385FF}

/* Three-up pricing grid: the card's two-column feature list is too narrow at
   335px, so it runs single-column here. Everything else stays as designed. */
.pricing-card-grid .verification-promo-card__features {
    grid-template-columns: 1fr;
    width: 100%;
}

/* The .sfx-* palette is declared on .sfx-hero, so .sfx-btn only renders
   correctly inside the hero. Re-declare the handful the button needs at the
   shell level so the same treatment works anywhere; the hero's own block still
   wins inside it, with identical values. */
.shell-storefront {
    --sfx-blue: #0385FF;
    --sfx-blue-dk: #0270D9;
    --sfx-sh: 0 1px 1px rgba(11,27,51,.05), 0 2px 2px rgba(11,27,51,.045), 0 4px 5px rgba(11,27,51,.04), 0 7px 10px rgba(11,27,51,.035), 0 12px 18px rgba(11,27,51,.03);
    --sfx-sh-hi: 0 1px 1px rgba(11,27,51,.05), 0 2px 3px rgba(11,27,51,.045), 0 5px 8px rgba(11,27,51,.05), 0 10px 16px rgba(11,27,51,.055), 0 18px 30px rgba(11,27,51,.06), 0 30px 48px rgba(11,27,51,.07);
}
/* Card CTA keeps the card's full-width footprint while wearing the hero button. */
.verification-promo-card__cta.sfx-btn {
    width: 100%;
    justify-content: center;
}
@media (prefers-reduced-motion: reduce) {
    .sfx-btn--pri::after { animation: none; }
}

/* ---- Dark band = the light band, inverted ----
   Same three layers, same angles, same mix percentages as
   --sf-accent-sect-bg-light; only the token VALUES flip to their dark
   counterparts (white .94 veil -> near-black .9, dark .04 tint -> white .05).

   Written literally rather than as var(--accent) because --accent is shadowed
   on <html> as a bare HSL triplet ("217 30% 18%"), and --sf-accent-section-bg
   is assigned at html scope — substituting it there makes color-mix() invalid
   and the whole background computes to none. */
html[data-theme='dark'],
body.shell-storefront[data-theme='dark'] {
    --sf-accent-sect-bg-dark:
        linear-gradient(135deg, color-mix(in srgb, #1557ff 34%, rgba(255, 255, 255, .05) 66%), transparent 60%),
        linear-gradient(315deg, color-mix(in srgb, #18b7ff 28%, rgba(255, 255, 255, .05) 72%), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, rgba(12, 18, 34, .9) 88%, transparent), transparent);
}

/* Hero CTA pairs — .btn-acc-primary is a 25px pill (.72rem 1.75rem, .92rem type)
   and .btn-acc-secondary a 12px rect (.66rem 1.05rem, .9rem). Side by side in the
   same row they read as two unrelated components, so the secondary takes the
   primary's geometry here. Colour keeps them distinguishable. */
.market-cta-row .btn-acc-secondary {
    border-radius: 25px;
    padding: .72rem 1.75rem;
    font-size: .92rem;
}

/* .review-card sets height:100%, which overrides the carousel's
   align-items:stretch and lets each card size to its own quote — a 51px ragged
   spread across the row. Returning height to auto lets stretch apply. */
.market-carousel > .review-card {
    height: auto;
    align-self: stretch;
}

/* The closing band reuses .generator-story-hero as its wrapper, so its title
   inherited that section's clamp(2.5rem, 6vw, 4rem) — 64px, larger than every
   H1 on the site (43px on hub pages, 56px on the homepage hero). Reset it to
   sit between the page H1 and a section H2. */
.storefront-join-cta-band .storefront-join-cta-title {
    /* Scales slower than the page H1 (clamp(2rem, 3vw, 2.8rem)) so it stays
       subordinate at every width — at 1024px a 3.2vw band title overtook the
       H1's 2rem floor by 1px. */
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);
    line-height: 1.12;
}

/* Headings inside the content shells (.info-card on /privacy + /terms,
   .guide-prose / .guide-panel on /about, /resources, /faqs, /lawful-use-policy
   and the 1099 guide) set colour and size but never a family, so they fell back
   to the body face while .sf-title-section correctly used the display face.
   Sizes stay as-is — those vary by role — only the family is unified. */
.info-card h2,
.info-card h3,
.guide-prose h2,
.guide-prose h3,
.guide-panel h2,
.guide-panel h3,
.homepage-guide-prose h3,
.resource-topic h2,
.resource-topic h3 {
    font-family: var(--sf-font-display, var(--font-display));
}

/* Primary buttons site-wide take the home hero's gradient and shimmer.
   .btn-acc-primary was a flat rgb(21,87,255) with no animation on 9 pages while
   .sfx-btn--pri carried the gradient + sfxShimmer. Shape (25px pill) is kept —
   only colour and animation are unified. */
.btn-acc-primary {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--sfx-blue, #0385FF) 0%, #2E9BFF 48%, var(--sfx-blue-dk, #0270D9) 100%);
}
.btn-acc-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .42) 50%, transparent 80%);
    background-size: 200% 100%;
    animation: sfxShimmer 3.2s linear infinite;
}
.btn-acc-primary > * { position: relative; z-index: 1; }
.btn-acc-primary:hover {
    background: linear-gradient(135deg, #0270D9 0%, #1E86E8 48%, #015CB4 100%);
}
@media (prefers-reduced-motion: reduce) {
    .btn-acc-primary::after { animation: none; }
}

/* ---- Heading face, by role rather than by class ----
   The earlier per-class fix missed every heading whose class I hadn't found:
   bare h2/h3 in prose, .resource-cta__title, .cw-q__title, .bl-title and more,
   all still falling back to the body face. Setting it on the shell catches
   every current and future class instead of chasing names. */
.shell-storefront h1,
.shell-storefront h2,
.shell-storefront h3,
.shell-storefront h4 {
    font-family: var(--sf-font-display, var(--font-display));
}

/* ---- Section heading must sit under the page H1 ----
   .generator-story-hero h2 is clamp(2.5rem, 6vw, 4rem) = 64px, against a 56px
   hero H1 on / and /1099-generator — the section heading outranked the page. */
.generator-story-hero h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    line-height: 1.14;
}

/* ---- Page title size, by element rather than by page ----
   .sf-title-section dresses both page H1s and section H2s, so nine pages that
   never got the calc-page-header render their page title at the section size
   (28px) instead of the canonical 43px. Sizing by element fixes all of them
   and any future page using the same pattern. */
h1.sf-title-section {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

/* ---- One eyebrow ----
   Detected by role rather than class, the site had six eyebrow treatments. The
   most-used one (.guide-link-row__eyebrow, 38 instances) was weight 900, grey
   and pill-less; the blog and resources variants were 11px brand-blue on the
   page ground. They all take the canonical .market-kicker appearance now, and
   one explicit gap to the title they introduce — that gap was previously 0 on
   most pages, leaving the visible space to line-box leading. */
.guide-link-row__eyebrow,
.blog-stage-eyebrow,
.resources-stage-eyebrow,
.resource-topic__eyebrow,
.storefront-hero-usecard__eyebrow,
.info-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .42rem .82rem;
    border-radius: 999px;
    background: rgba(3, 133, 255, .08);
    color: var(--primary);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
html[data-theme='dark'] .guide-link-row__eyebrow,
html[data-theme='dark'] .blog-stage-eyebrow,
html[data-theme='dark'] .resources-stage-eyebrow,
html[data-theme='dark'] .resource-topic__eyebrow,
html[data-theme='dark'] .storefront-hero-usecard__eyebrow,
html[data-theme='dark'] .info-eyebrow,
html[data-theme='dark'] .market-kicker {
    background: var(--sf-accent-section-kicker-bg, rgba(191, 219, 254, .14));
    color: var(--sf-accent-section-kicker-text, #bfdbfe);
}
.market-kicker,
.sf-kicker,
.guide-link-row__eyebrow,
.blog-stage-eyebrow,
.resources-stage-eyebrow,
.resource-topic__eyebrow,
.storefront-hero-usecard__eyebrow,
.info-eyebrow {
    margin-block: 0 .75rem;
}

/* The eyebrow inside .guide-prose is a <p>, so the prose paragraph colour rule
   (html[data-theme] .guide-prose p — 0,2,2) outranked the eyebrow rule (0,2,1).
   Matching the element as well takes the specificity back. */
p.guide-link-row__eyebrow,
p.blog-stage-eyebrow,
p.resources-stage-eyebrow,
p.resource-topic__eyebrow,
span.blog-stage-eyebrow,
span.resources-stage-eyebrow,
div.guide-link-row__eyebrow {
    font-size: .76rem;
    color: var(--primary);
}
html[data-theme='dark'] p.guide-link-row__eyebrow,
html[data-theme='dark'] p.blog-stage-eyebrow,
html[data-theme='dark'] p.resources-stage-eyebrow,
html[data-theme='dark'] p.resource-topic__eyebrow,
html[data-theme='dark'] span.blog-stage-eyebrow,
html[data-theme='dark'] span.resources-stage-eyebrow,
html[data-theme='dark'] div.guide-link-row__eyebrow {
    color: var(--sf-accent-section-kicker-text, #bfdbfe);
}

/* ---- Section headings sit under the page title ----
   Five separate classes each sized a big section heading independently, all of
   them above the 56px hero H1: .verification-promo-hero__copy h2 and
   .why-choose-plain__copy h2 at 4rem (4.4rem in the showcase row),
   .customer-counter__headline and .blog-stage-title at 3.6rem. Capped at 3rem
   so they stay emphatic but no longer outrank the page's own title. */
.verification-promo-hero__copy h2,
.why-choose-plain__copy h2,
.why-choose-row--showcase .why-choose-plain__copy h2,
.customer-counter__headline,
.blog-stage-title,
.resources-stage-title {
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.14;
}

/* .verification-promo-note h3 rendered at 3.35rem (54px) — an H3 larger than
   almost every H2 on the site. Seated just below the section-heading cap. */
.verification-promo-note h3 {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.14;
}

/* ---- Card system: one hairline, a three-step radius ----
   Detected by role, cards carried 9 border colours across 3 families
   (rgba(96,165,250,.18) ×78, rgba(148,163,184,.16) ×44, rgba(255,255,255,.08)
   ×36 plus six near-duplicates) and 9 radii (12/18/20/22/24/26/28/30/32).
   One hairline token, and radii collapsed to small / medium / large. */
.shell-storefront {
    --card-hairline: rgba(148, 163, 184, .16);
    --card-radius-sm: 12px;
    --card-radius-md: 20px;
    --card-radius-lg: 28px;
}
html[data-theme='dark'] .shell-storefront,
body.shell-storefront[data-theme='dark'] {
    --card-hairline: rgba(148, 163, 184, .18);
}

.review-card,
.info-card,
.resource-card-modern,
.blog-card-modern,
.feature-card,
.verification-promo-card,
.verification-promo-note,
.generator-story-card,
.guide-panel,
.tutorial-card,
.storefront-hero-usecard,
.paystub-purpose-card {
    border-color: var(--card-hairline);
}

/* Large surfaces */
.feature-card,
.verification-promo-card,
.verification-promo-note,
.generator-story-card,
.guide-panel,
.tutorial-card,
.storefront-hero-usecard {
    border-radius: var(--card-radius-lg);
}
/* Medium surfaces */
.info-card,
.resource-card-modern,
.blog-card-modern,
.paystub-purpose-card {
    border-radius: var(--card-radius-md);
}
/* Small surfaces */
.review-card {
    border-radius: var(--card-radius-sm);
}

/* ---- One prose size ----
   Long-form paragraphs ran at 15px inside .info-card / .guide-prose and 16px
   everywhere else — the same role at two sizes. 16px throughout. */
.guide-prose p,
.guide-prose li,
.info-card p,
.info-card li,
.info-prose p,
.info-prose li {
    font-size: 1rem;
}

/* ---- Card normalization, second pass ----
   The first pass lost to the inline style partials, which render after the
   stylesheet and win ties on document order, and missed the tutorials and blog
   card classes entirely. Scoped to body.shell-storefront (and the dark variant)
   so it outranks both. */
body.shell-storefront .feature-card,
body.shell-storefront .verification-promo-card,
body.shell-storefront .verification-promo-note,
body.shell-storefront .generator-story-card,
body.shell-storefront .guide-panel,
body.shell-storefront .tutorial-card,
body.shell-storefront .tutorial-feature,
body.shell-storefront .storefront-hero-usecard,
body.shell-storefront .content-hero--tutorials,
body.shell-storefront .blog-hero-feature,
body.shell-storefront .resources-hero {
    border-radius: var(--card-radius-lg, 28px);
    border-color: var(--card-hairline, rgba(148, 163, 184, .16));
}
body.shell-storefront .info-card,
body.shell-storefront .resource-card-modern,
body.shell-storefront .blog-card-modern,
body.shell-storefront .paystub-purpose-card,
body.shell-storefront .home-post-card,
body.shell-storefront .calc-form-card,
body.shell-storefront .content-hero__stat,
body.shell-storefront .paystub-generator-trust-point,
body.shell-storefront .tutorial-hero-roadmap__item {
    border-radius: var(--card-radius-md, 20px);
    border-color: var(--card-hairline, rgba(148, 163, 184, .16));
}
body.shell-storefront .review-card {
    border-radius: var(--card-radius-sm, 12px);
    border-color: var(--card-hairline, rgba(148, 163, 184, .16));
}
html[data-theme='dark'] body.shell-storefront .feature-card,
html[data-theme='dark'] body.shell-storefront .verification-promo-card,
html[data-theme='dark'] body.shell-storefront .verification-promo-note,
html[data-theme='dark'] body.shell-storefront .generator-story-card,
html[data-theme='dark'] body.shell-storefront .guide-panel,
html[data-theme='dark'] body.shell-storefront .tutorial-card,
html[data-theme='dark'] body.shell-storefront .tutorial-feature,
html[data-theme='dark'] body.shell-storefront .storefront-hero-usecard,
html[data-theme='dark'] body.shell-storefront .content-hero--tutorials,
html[data-theme='dark'] body.shell-storefront .blog-hero-feature,
html[data-theme='dark'] body.shell-storefront .resources-hero,
html[data-theme='dark'] body.shell-storefront .info-card,
html[data-theme='dark'] body.shell-storefront .resource-card-modern,
html[data-theme='dark'] body.shell-storefront .blog-card-modern,
html[data-theme='dark'] body.shell-storefront .paystub-purpose-card,
html[data-theme='dark'] body.shell-storefront .home-post-card,
html[data-theme='dark'] body.shell-storefront .calc-form-card,
html[data-theme='dark'] body.shell-storefront .content-hero__stat,
html[data-theme='dark'] body.shell-storefront .paystub-generator-trust-point,
html[data-theme='dark'] body.shell-storefront .tutorial-hero-roadmap__item,
html[data-theme='dark'] body.shell-storefront .review-card {
    border-color: var(--card-hairline, rgba(148, 163, 184, .18));
}

/* ============================================================
   SECTION RHYTHM — moved out of _StorefrontHomeStyles.cshtml
   These tokens and rules were written to give "uniform vertical padding on
   every major <section>", but they lived in a partial only / and
   /1099-generator include. Everywhere else var(--rhythm-section-pad) resolved
   to nothing and sections collapsed to 0 padding — 45 sections across the site
   had no vertical rhythm at all. Global now.
   ============================================================ */
:root {
    --rhythm-section-pad: clamp(2.75rem, 5vw, 4.5rem);
    --rhythm-block-gap: clamp(2rem, 4vw, 3.5rem);
    --rhythm-hero-top: clamp(7rem, 12vw, 10rem);
}
/* Uniform vertical padding on every major <section>. The
   `section.X` chain (type + class) raises specificity to (0,1,1)
   which beats the bundle's `.sf-section { padding: 0 }` at
   (0,1,0), so this owns the rhythm without !important.
   NOTE: hero is excluded because its .storefront-hero-usecards
   are designed to anchor at the bottom and overflow into the
   next section. Forcing pb on the hero would break that. */
section.market-section,
section.sf-section {
    padding-block: var(--rhythm-section-pad);
}
/* Hero gets a larger top so the headline clears the fixed nav
   bar; bottom stays 0 to preserve the use-cards overflow design. */
section.market-hero--storefront-home {
    padding-top: var(--rhythm-hero-top);
    padding-bottom: 0;
}
/* Generator-story section keeps its larger top pad so the
   .storefront-hero-usecards that overflow from the hero have
   clearance to spill in without crashing into the story content.
   Bottom uses the normalized rhythm value. The `section.market-section`
   rule above set padding-block (both sides) — this override
   specifically restores the larger top. */
section.market-section.generator-story-section {
    padding-top: clamp(17rem, 32vw, 28rem);
}
/* On mobile the hero use-cards stack and shrink, so the big
   desktop top pad eats most of the viewport. Drop it back to
   the standard section rhythm — same as every other section
   on the page. */
@media (max-width: 768px) {
    section.market-section.generator-story-section {
        padding-top: var(--rhythm-section-pad);
    }
}
/* Inner .sf-containers used to add 30.72px top + bottom on top
   of the section's own padding. Zero their vertical padding so
   the section now owns the full vertical rhythm. Horizontal
   indent (var(--sf-grid-margin)) is preserved. */
section.sf-section > .sf-container,
section.sf-section > .sf-container--narrow,
section.market-section > .sf-container,
section.market-section > .sf-container--narrow,
section.market-hero > .sf-container,
section.market-hero > .sf-container--narrow {
    padding-block: 0;
}
/* When multiple .sf-container blocks stack inside ONE section
   (e.g. FAQ + Blog + Resources all share
   #storefrontFaqBlogResourcesSection), they need a between-block
   gap. The section's outer padding still handles the spacing
   against the previous/next section. */
section.sf-section > .sf-container + .sf-container,
section.sf-section > .sf-container--narrow + .sf-container,
section.sf-section > .sf-container + .sf-container--narrow,
section.sf-section > .sf-container--narrow + .sf-container--narrow {
    margin-top: var(--rhythm-block-gap);
}
/* Pre-existing per-section overrides (.market-section--verification-promo
   etc.) baked in 74.25/40.5px asymmetric pad. Reset them so all
   light sections share the one rhythm. */
section.market-section--verification-promo,
section.market-section--review-spotlight {
    padding-block: var(--rhythm-section-pad);
}
/* Customer-counter sits inside the Reviews section as a punctuation
   card after the carousel. Its previous DOM sibling is a <style>
   element (the inline counter CSS), which breaks the
   `.sf-container--narrow + .sf-container--narrow` adjacent-sibling
   rule from above. Apply the gap directly so the counter reads as
   its own moment instead of crashing into the carousel. */
#storefrontCustomerCounterSection {
    margin-top: clamp(3.5rem, 7vw, 6rem);
}

/* ---- One eyebrow-to-title gap ----
   The gap ranged 0–30px because three things stacked independently: the
   eyebrow's own margin-bottom, the parent's row-gap when it was flex/grid, and
   the heading's margin-top. Measured: 38× 0px (.guide-link-row__copy, no
   margin), 24× 30px (.sf-section-head row-gap 17.6 + margin 12), 7× 26px
   (margin 12 + heading margin-top 14.4). Each source is pinned below. */
body.shell-storefront .market-kicker,
body.shell-storefront .sf-kicker,
body.shell-storefront .guide-link-row__eyebrow,
body.shell-storefront .blog-stage-eyebrow,
body.shell-storefront .resources-stage-eyebrow,
body.shell-storefront .resource-topic__eyebrow,
body.shell-storefront .storefront-hero-usecard__eyebrow,
body.shell-storefront .info-eyebrow {
    margin-bottom: .75rem;
}
body.shell-storefront .market-kicker + :is(h1, h2, h3, h4),
body.shell-storefront .sf-kicker + :is(h1, h2, h3, h4),
body.shell-storefront .guide-link-row__eyebrow + :is(h1, h2, h3, h4),
body.shell-storefront .blog-stage-eyebrow + :is(h1, h2, h3, h4),
body.shell-storefront .resources-stage-eyebrow + :is(h1, h2, h3, h4),
body.shell-storefront .resource-topic__eyebrow + :is(h1, h2, h3, h4),
body.shell-storefront .storefront-hero-usecard__eyebrow + :is(h1, h2, h3, h4),
body.shell-storefront .info-eyebrow + :is(h1, h2, h3, h4) {
    margin-top: 0;
}
/* Containers that space their children with row-gap carry the gap themselves,
   so the eyebrow drops its margin to avoid adding a second one. */
body.shell-storefront .sf-section-head,
body.shell-storefront .storefront-hero-usecard,
body.shell-storefront .verification-promo-hero__copy,
body.shell-storefront .verification-promo-note,
body.shell-storefront .why-choose-plain__copy,
body.shell-storefront .market-hero-copy {
    row-gap: .75rem;
}
body.shell-storefront .sf-section-head > :is(.market-kicker,.sf-kicker,.guide-link-row__eyebrow,.blog-stage-eyebrow,.resources-stage-eyebrow,.resource-topic__eyebrow,.storefront-hero-usecard__eyebrow,.info-eyebrow),
body.shell-storefront .storefront-hero-usecard > :is(.market-kicker,.sf-kicker,.guide-link-row__eyebrow,.blog-stage-eyebrow,.resources-stage-eyebrow,.resource-topic__eyebrow,.storefront-hero-usecard__eyebrow,.info-eyebrow),
body.shell-storefront .verification-promo-hero__copy > :is(.market-kicker,.sf-kicker,.guide-link-row__eyebrow,.blog-stage-eyebrow,.resources-stage-eyebrow,.resource-topic__eyebrow,.storefront-hero-usecard__eyebrow,.info-eyebrow),
body.shell-storefront .verification-promo-note > :is(.market-kicker,.sf-kicker,.guide-link-row__eyebrow,.blog-stage-eyebrow,.resources-stage-eyebrow,.resource-topic__eyebrow,.storefront-hero-usecard__eyebrow,.info-eyebrow),
body.shell-storefront .why-choose-plain__copy > :is(.market-kicker,.sf-kicker,.guide-link-row__eyebrow,.blog-stage-eyebrow,.resources-stage-eyebrow,.resource-topic__eyebrow,.storefront-hero-usecard__eyebrow,.info-eyebrow),
body.shell-storefront .market-hero-copy > :is(.market-kicker,.sf-kicker,.guide-link-row__eyebrow,.blog-stage-eyebrow,.resources-stage-eyebrow,.resource-topic__eyebrow,.storefront-hero-usecard__eyebrow,.info-eyebrow) {
    margin-bottom: 0;
}

/* ---- Row action buttons match the hero pair ----
   .guide-link-row__action ("Open comparison" on /vs, "Read more" on /glossary)
   kept the 12px rect while the hero CTA pair above it became pills. */
body.shell-storefront .guide-link-row__action.btn-acc-secondary,
body.shell-storefront .guide-link-row__action.btn-acc-primary {
    border-radius: 25px;
    padding: .72rem 1.75rem;
    font-size: .92rem;
}

/* ---- Long-document sidebar sticks ----
   /privacy is 4,221px and /terms 4,960px, and the "On this page" list scrolled
   away inside the first screen — decorative rather than navigational. The grid
   already sets align-items:start, so sticky just works. 86px clears the 66px
   fixed header. */
body.shell-storefront .info-sidebar {
    position: sticky;
    top: 86px;
    max-height: calc(100vh - 106px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (max-width: 900px) {
    body.shell-storefront .info-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

/* Breadcrumb sits below the hero band, on the page ground, rather than floating
   above a centred headline inside it. .calc-breadcrumbs keeps its old margins
   for any breadcrumb still rendered inside a header. */
.calc-breadcrumb-bar {
    padding-block: 1.15rem 0;
}
.calc-breadcrumb-bar .calc-breadcrumbs {
    margin-top: 0;
    margin-bottom: 0;
}

/* ---- Hero CTAs centre under the title ----
   .calc-page-header is text-align:center, but .market-cta-row is a flex
   container, and text-align does not reach flex items — so the buttons sat
   hard left under a centred headline (measured 590–664px off). */
.calc-page-header .market-cta-row,
.calc-page-header .sfx-cta,
.calc-page-header .storefront-hero-primary-action,
.calc-page-header .market-subtitle {
    justify-content: center;
}
.calc-page-header .market-cta-row,
.calc-page-header .sfx-cta,
.calc-page-header .storefront-hero-primary-action {
    display: flex;
    flex-wrap: wrap;
}

/* A .sf-container nested inside another one indents twice — measured 1100px
   → 1036px on the blog and 1099 sections, so those blocks sat 32px narrower
   than every other block on the page. The inner one becomes a plain wrapper. */
.sf-container .sf-container,
.sf-container .sf-container--narrow,
.sf-container--narrow .sf-container,
.sf-container--narrow .sf-container--narrow {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* .info-shell used --site-container / --site-gutter-x, giving /privacy and
   /terms a 144–1296 content column while the rest of the site (and their own
   calc-page-header above) sits at 202–1238 — the body was 116px wider than its
   own title. Puts the legal pages onto the standard content column. */
.info-shell {
    max-width: var(--sf-container-narrow);
    padding-inline: var(--sf-grid-margin);
}

/* Only two sections broke the shared content column (202–1238 everywhere else):
   the story section's container used 36px side padding instead of the 32px
   grid margin, and the explainer's container had margin-inline:0 so it was
   never centred — it sat 10px left of every other block on the page. */
#generatorStorySection > .sf-container,
#generatorStorySection > .sf-container--narrow {
    padding-inline: var(--sf-grid-margin);
}
#storefrontPaystubExplainerSection > .sf-container,
#storefrontPaystubExplainerSection > .sf-container--narrow {
    margin-inline: auto;
}

/* The explainer section is a grid whose template computed to `1420px 0px` — a
   1420px column plus a phantom second column inside a 1440px section, so its
   container centred in 1420 and landed 10px left of every other block on the
   page. One full-width column puts it back on the shared column. */
#storefrontPaystubExplainerSection {
    grid-template-columns: minmax(0, 1fr);
}

/* At 390px the hero H1 bottoms out on its clamp floor (2.25rem = 36px) and the
   customer-counter headline is pinned to exactly 2.25rem !important on mobile,
   so the two tied and the section heading drew level with the page title.
   The counter's size is a deliberate request, so the hero H1 floor rises
   instead — page title stays dominant, counter keeps its stat-moment scale. */
.sfx-hero h1,
.sfx-hero .market-hero-copy h1 {
    font-size: clamp(2.6rem, 1.15rem + 3.5vw, 3.5rem);
}

/* Tables do not shrink below their intrinsic content width, so one table in a
   guide forced the whole document to 549px at a 390px viewport — every section
   on the page stretched to match and the page scrolled sideways. At phone width
   the table becomes its own horizontal scroller; desktop table layout is
   untouched. */
@media (max-width: 760px) {
    .guide-prose table,
    .info-card table,
    .sf-section table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* A grid item with min-width:auto cannot shrink below its content's min-content
   width, so a single wide table inside .guide-prose propagated its intrinsic
   width all the way up and forced a 390px viewport to 549px — the table's own
   overflow-x scroller could not help, because the item above it refused to
   shrink. min-width:0 lets the track shrink and the scroller do its job. */
.guide-layout,
.guide-prose,
.guide-aside,
.guide-page .sf-container,
.guide-page .sf-container--narrow {
    min-width: 0;
}
.guide-prose > *,
.guide-table-wrap {
    min-width: 0;
    max-width: 100%;
}

/* ---- One padding per card tier ----
   The radius tiers were unified but padding was not: the r28 tier alone ran
   16/17, 22, 24/23, 24/29, 25, 28, 30 and 45px, several of them asymmetric by a
   pixel or two by accident. Media-topped cards (.blog-card-modern,
   .home-post-card, .calc-form-card) and split layouts (.blog-hero-feature,
   .resources-hero) are excluded — their padding lives on the inner body. */
body.shell-storefront .feature-card,
body.shell-storefront .verification-promo-card,
body.shell-storefront .verification-promo-note,
body.shell-storefront .generator-story-card,
body.shell-storefront .guide-panel,
body.shell-storefront .tutorial-card,
body.shell-storefront .tutorial-feature,
body.shell-storefront .storefront-hero-usecard,
body.shell-storefront .paystub-generator-compare-card {
    padding: 1.75rem;
}
body.shell-storefront .info-card,
body.shell-storefront .resource-card-modern,
body.shell-storefront .paystub-purpose-card,
body.shell-storefront .paystub-generator-trust-point,
body.shell-storefront .tutorial-hero-roadmap__item {
    padding: 1.375rem;
}
body.shell-storefront .review-card {
    padding: 1rem;
}

/* When the eyebrow is a grid item (inside .feature-card, .sf-section-head and
   similar) the default stretch alignment inflates the pill to the full column
   width. width:fit-content opts it out of stretch without disturbing the
   inline centring it relies on inside .calc-page-header. */
body.shell-storefront .market-kicker,
body.shell-storefront .sf-kicker,
body.shell-storefront .guide-link-row__eyebrow,
body.shell-storefront .blog-stage-eyebrow,
body.shell-storefront .resources-stage-eyebrow,
body.shell-storefront .resource-topic__eyebrow,
body.shell-storefront .storefront-hero-usecard__eyebrow,
body.shell-storefront .info-eyebrow {
    width: fit-content;
    max-width: 100%;
}

/* ---- Generator template chooser shows all three ----
   #tplCarousel sized its cards at flex: 0 0 58%, so only ~1.7 of the three fit
   the 491px panel (scrollWidth 684 vs clientWidth 491) and the third template
   was parked outside the visible area behind a horizontal scroll. All three
   share the width now; the scroll dots hide when there is nothing to scroll. */
#tplCarousel {
    overflow-x: visible;
}
#tplCarousel > .tpl {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}
#tplCarousel > .tpl .tpl__sub {
    overflow-wrap: anywhere;
}
#tplCarousel ~ .tpl-dots,
#tplDots {
    display: none;
}

/* ── Blog article masthead ────────────────────────────────────────────
   Title, dek, rule, meta line, rule, breadcrumbs, then the opening
   paragraph and the cover image. The whole column — headline included —
   runs alongside the sidebar instead of starting below a full-width hero. */
.article-shell--editorial .article-topmatter {
  gap: .5rem;
}
.article-shell--editorial .article-topmatter h1 {
  max-width: none;
  margin: .15rem 0 0;
  font-size: clamp(1.85rem, 2.8vw, 2.55rem);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.article-shell--editorial .article-topmatter__summary {
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.62;
}
.article-masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem 1.1rem;
  margin: 0;
  padding-block: .5rem;
  border-top: 1px solid rgba(148, 163, 184, .32);
  font-size: .84rem;
  color: #64748b;
}
.article-masthead-row--close {
  border-bottom: 1px solid rgba(148, 163, 184, .32);
}
.article-masthead-row .editorial-meta,
.article-masthead-row .sf-breadcrumbs {
  margin: 0;
  font-size: inherit;
  line-height: 1.5;
  color: inherit;
}
.article-shell--editorial .article-lede {
  font-size: 1.08rem;
  line-height: 1.72;
}
.article-shell--editorial .article-content > picture {
  display: block;
  margin: 1.1rem 0 .35rem;
}
.article-shell--editorial .article-content .article-cover-image {
  width: 100%;
  max-height: 400px;
  margin: 0;
}
/* Breadcrumbs, chips and buttons now sit inside .article-content, where the
   prose-link rule was underlining them. Nothing is underlined at rest; body
   links keep their colour and weight, and underline on hover. */
.article-shell--editorial .article-content a,
.article-shell--editorial .market-chip {
  text-decoration: none;
}
.article-shell--editorial .article-content p > a:hover,
.article-shell--editorial .article-content li > a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Section rhythm — the panels stacked a bottom margin on top of their own
   padding, which read as a gap between every block. */
.article-shell--editorial .article-problem-panel,
.article-shell--editorial .article-key-takeaways-panel,
.article-shell--editorial .article-conclusion-panel {
  padding-block: .85rem;
}
.article-shell--editorial .article-content > .article-problem-panel,
.article-shell--editorial .article-content > .article-key-takeaways-panel,
.article-shell--editorial .article-content > .article-resource-strip {
  margin-bottom: 0;
}
.article-shell--editorial .article-section {
  padding-block: .6rem;
}
.article-shell--editorial .article-content p {
  margin-block: .7rem;
}
.article-shell--editorial .article-problem-list,
.article-shell--editorial .article-key-takeaways-list {
  margin-top: .5rem;
}

/* Section headings sat within 6px of the (now smaller) H1. */
.article-shell--editorial .article-section h2 {
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.2;
}
html[data-theme='dark'] .article-masthead-row {
  border-color: rgba(148, 163, 184, .22);
  color: #94a3b8;
}

/* ── Resource guide pages ──────────────────────────────────────────────
   Sidebar links and the prose backlink rendered in body/heading ink with
   no underline, so they read as bold text rather than as links. */
.guide-panel a,
.guide-backlink a {
  color: var(--blue);
}
.guide-panel a:hover,
.guide-backlink a:hover {
  color: var(--blue-dk);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* One title-to-content gap for every panel, whether it holds a list, a
   paragraph or a bare link — otherwise the CTA panels sat tighter than the
   list panels beside them. */
.guide-panel > ul,
.guide-panel > p,
.guide-panel > a {
  display: block;
  margin-top: var(--sf-rhythm-copy-reset);
}
.guide-panel > ul {
  padding-left: 1.05rem;
}
html[data-theme='dark'] .guide-panel a,
html[data-theme='dark'] .guide-backlink a {
  color: #7dd3fc;
}
html[data-theme='dark'] .guide-panel a:hover,
html[data-theme='dark'] .guide-backlink a:hover {
  color: #bae6fd;
}

/* Per-state tax rule table + official-source citations (_StateTaxRuleTable). */
.tax-rule-source__heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 .5rem;
    text-wrap: balance;
}

.tax-rule-source__notes {
    margin: 0;
    color: #475569;
    font-size: .95rem;
    line-height: 1.6;
    max-width: 68ch;
}

.tax-rule-brackets {
    margin-top: .6rem;
}

.tax-rule-brackets > summary {
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    color: #2563eb;
}

.tax-rule-brackets__table {
    width: 100%;
    margin-top: .5rem;
    border-collapse: collapse;
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
}

.tax-rule-brackets__table th {
    padding: .35rem .5rem;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    border-bottom: 1px solid rgba(148, 163, 184, .25);
}

.tax-rule-brackets__table td {
    padding: .3rem .5rem;
    color: #334155;
    border-bottom: 1px solid rgba(148, 163, 184, .12);
}

.tax-rule-source__cites {
    margin-top: 1.25rem;
}

.tax-rule-source__cites-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 .5rem;
}

.tax-rule-source__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .75rem;
}

.tax-rule-source__list a {
    font-size: .82rem;
    color: #2563eb;
    text-decoration: none;
}

.tax-rule-source__list a:hover,
.tax-rule-source__list a:focus-visible {
    text-decoration: underline;
}

html[data-theme='dark'] .tax-rule-source__heading { color: #f1f5f9; }
html[data-theme='dark'] .tax-rule-source__notes { color: #cbd5e1; }
html[data-theme='dark'] .tax-rule-brackets > summary { color: #93c5fd; }
html[data-theme='dark'] .tax-rule-brackets__table th {
    color: rgba(148, 163, 184, .75);
    border-bottom-color: rgba(148, 163, 184, .2);
}
html[data-theme='dark'] .tax-rule-brackets__table td {
    color: #cbd5e1;
    border-bottom-color: rgba(148, 163, 184, .1);
}
html[data-theme='dark'] .tax-rule-source__cites-title { color: rgba(148, 163, 184, .75); }
html[data-theme='dark'] .tax-rule-source__list a { color: #93c5fd; }