/* ==========================================================================
   SWYFT CORP LLC -- Reusable page components
   Formation selector, trust strip, entity/structure cards, pricing cards,
   how-it-works steps, service cards, state cards, FAQ accordion.
   ========================================================================== */

/* ---- Formation selector (homepage, below hero) ---- */
.formation-selector {
  max-width: 900px;
  margin: -56px auto 0;
  position: relative;
  z-index: 5;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 40px;
}
.formation-selector .selector-title { text-align: center; margin-bottom: 28px; }
.selector-step { display: none; }
.selector-step.is-active { display: block; }
.selector-question { font-weight: 700; font-size: 1rem; margin-bottom: 16px; color: var(--color-primary); }

.entity-grid {
  display: grid;
  /* Was a fixed repeat(4, 1fr) -- state-selector.js's loadEntityTypes()
     renders one button per ACTIVE entity type, so disabling one at
     /admin/entity-types drops this to 3 buttons (or fewer) while the grid
     still reserved 4 columns' worth of width, leaving a visible empty gap
     where the disabled type used to sit. auto-fit collapses to however
     many buttons actually exist and lets them share the row evenly, so
     3 (or 2, or 1) active types fill the width cleanly instead of leaving
     a hole -- and 4 active types still lay out exactly as before. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.entity-option {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.entity-option:hover { border-color: var(--color-secondary); }
.entity-option.is-selected { border-color: var(--color-secondary); background: #eef3ff; color: var(--color-secondary-dark); }
.entity-option .entity-option-desc { display: block; font-weight: 400; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 4px; }

.state-search-wrap { position: relative; }
.state-search-input {
  width: 100%; padding: 14px 16px; font-size: 1rem;
  border: 2px solid var(--color-border); border-radius: var(--radius-md);
  font-family: inherit;
}
.state-search-input:focus { border-color: var(--color-secondary); }
.state-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); z-index: 10; display: none;
}
.state-results.is-open { display: block; }
.state-results button {
  width: 100%; text-align: left; padding: 11px 16px; background: none; border: none;
  cursor: pointer; font-size: 0.92rem; font-family: inherit; color: var(--color-text);
}
.state-results button:hover, .state-results button.is-active { background: var(--color-surface-alt); }
.state-results .state-abbr { color: var(--color-text-muted); font-size: 0.8rem; margin-left: 6px; }
.state-results .no-results { padding: 14px 16px; color: var(--color-text-muted); font-size: 0.9rem; }

.selector-selected-state {
  display: none; align-items: center; justify-content: space-between;
  padding: 14px 16px; border: 2px solid var(--color-secondary); border-radius: var(--radius-md);
  background: #eef3ff; font-weight: 600; color: var(--color-secondary-dark);
}
.selector-selected-state.is-visible { display: flex; }
.selector-selected-state button { background: none; border: none; color: var(--color-secondary-dark); font-weight: 700; cursor: pointer; font-size: 0.85rem; }

.selector-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.selector-nav .btn { min-width: 140px; }
.selector-back { background: none; border: none; color: var(--color-text-muted); font-weight: 600; cursor: pointer; padding: 10px; }
.selector-progress { display: flex; gap: 6px; }
.selector-progress span { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.selector-progress span.is-active { background: var(--color-secondary); width: 20px; border-radius: 4px; }

/* ---- Trust strip ---- */
.trust-strip { padding: 56px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.trust-item { display: flex; align-items: flex-start; gap: 14px; }
.trust-item .card-icon { margin-bottom: 0; flex-shrink: 0; }
.trust-item h4 { font-size: 0.98rem; margin-bottom: 4px; color: var(--color-primary); }
.trust-item p { font-size: 0.87rem; margin: 0; }

/* ---- Entity / structure cards ---- */
/* auto-fit rather than a fixed repeat(4, 1fr) -- entity-visibility.js (see
   its own docblock) can genuinely remove one of these four cards from the
   page entirely (display:none via [hidden] below, not just visually
   dimmed) whenever an entity type is disabled at /admin/entity-types, and a
   fixed 4-column track left the remaining 3 (or fewer) cards stranded at
   their original narrow width with a dead gap where the hidden card used
   to be. auto-fit + minmax lets however many cards are actually visible
   stretch to fill the row -- still lays out as 4 even columns at the
   current ~273px-per-card width when all four are shown (1200px container
   comfortably fits four 240px+ tracks), so this changes nothing when
   nothing is disabled. The two explicit breakpoint overrides below (1024px/
   768px) still win at smaller widths, same as before. */
.structure-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.structure-card { padding: 28px 24px; display: flex; flex-direction: column; }
.structure-card h3 { margin-bottom: 8px; }
.structure-card p { font-size: 0.9rem; flex: 1; }
/* entity-visibility.js hides a disabled entity type's nav/footer/homepage
   elements by setting them hidden -- same [hidden]-vs-specificity fix as
   .need-item/.requirement-row/.requirement-panel-cta below, since a bare
   `[hidden]` loses to an equal-specificity `display` rule declared earlier
   in this file (the .structure-card rule above, in this case). */
.structure-card[hidden] { display: none; }
.dropdown-panel a[hidden] { display: none; }
.mobile-accordion-panel a[hidden] { display: none; }
.footer-col li[hidden] { display: none; }
.structure-card .learn-more { font-weight: 700; font-size: 0.88rem; color: var(--color-secondary); margin-top: 8px; }

/* ---- How it works ---- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step-item { text-align: center; }
.step-number {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--color-surface-alt); color: var(--color-secondary);
  font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.step-item h3 { margin-bottom: 8px; }
.step-item p { font-size: 0.9rem; max-width: 280px; margin: 0 auto; }

/* ---- Pricing ---- */
/* auto-fit + a capped column width (not a hardcoded repeat(3, 1fr)): with
   exactly 3 packages this sizes identically to the old fixed 3-column
   grid (368px columns in a 1200px container), but with only 2 packages
   currently configured, a fixed 3-column grid left a bare, unfilled third
   column -- auto-fit collapses that empty track instead, and
   justify-content: center keeps the 2 real cards centered as a pair
   rather than pinned to the left with dead space on the right. Also
   future-proofs a 4th package: it wraps to its own centered row instead
   of squeezing a 4-up layout into 3 fixed tracks. */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 368px)); justify-content: center; gap: 24px; align-items: start; }
.pricing-card {
  padding: 32px 28px; display: flex; flex-direction: column; position: relative;
  border-width: 2px;
}
.pricing-card.is-popular { border-color: var(--color-secondary); box-shadow: var(--shadow-md); }
.pricing-badge {
  position: absolute; top: -13px; left: 28px;
  background: var(--color-secondary); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 5px 12px; border-radius: 999px; letter-spacing: 0.03em; text-transform: uppercase;
}
.pricing-name { font-size: 1.1rem; margin-bottom: 6px; }
.pricing-desc { font-size: 0.88rem; min-height: 40px; }
.pricing-price { display: flex; align-items: baseline; gap: 6px; margin: 12px 0 4px; }
.pricing-price .amount { font-size: 2.25rem; font-weight: 800; color: var(--color-primary); }
.pricing-price .period { color: var(--color-text-muted); font-size: 0.85rem; }
.pricing-statefee { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 20px; }
/* .pricing-grid no longer stretches every card to the tallest one
   (align-items: start above, not stretch) -- a card with fewer features
   (Basic Launch Pack's 6 vs. Elite's 12) now simply ends where its own
   content ends, with its CTA sitting directly under its own list. An
   earlier attempt kept the cards equal-height and instead distributed
   the leftover space between the feature rows, which just traded one
   large gap before the button for several smaller gaps between every
   feature -- still visibly broken. Not force-equalizing card height in
   the first place avoids manufacturing a gap anywhere in the card. */
.pricing-features { margin: 0 0 24px; }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; padding: 7px 0; color: var(--color-text); }
.pricing-features li svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-accent); margin-top: 1px; }
.pricing-loading, .pricing-error { text-align: center; color: var(--color-text-muted); grid-column: 1 / -1; padding: 40px 0; }

/* ---- Homepage pricing teaser (index.html) -- a condensed package summary
   (price + one-line description + CTA, no itemized feature list), styled
   after a Bizee reference screenshot but kept in the site's own blue/green
   palette rather than Bizee's orange -- same convention as the service
   directory tabs below. The full line-item comparison still exists per
   entity (llc/index.html, s-corporation.html, ...) and inside the
   formation wizard; "Compare Packages" below the grid points there instead
   of repeating every feature on the homepage. ---- */
.pricing-grid-teaser { margin-bottom: 32px; }
.pricing-card-teaser { padding: 28px 26px; }
.pricing-card-teaser .pricing-desc { min-height: 0; margin: 0 0 22px; }
.pricing-compare-cta { text-align: center; }

/* ---- Service cards ---- */
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { padding: 26px; }
.service-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.service-card p { font-size: 0.88rem; margin-bottom: 12px; }
.service-card .service-price { font-weight: 700; color: var(--color-primary); font-size: 0.9rem; margin-bottom: 10px; }
.service-card .learn-more { font-weight: 700; font-size: 0.85rem; color: var(--color-secondary); }

/* ---- FAQ accordion (used across pages) ---- */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; text-align: left; padding: 20px 4px; cursor: pointer;
  font-size: 1rem; font-weight: 600; color: var(--color-primary);
}
.faq-question .chevron { flex-shrink: 0; width: 18px; height: 18px; transition: transform 0.2s ease; }
.faq-item.is-open .chevron { transform: rotate(180deg); }
/* Smooth drop-open instead of an instant display:none/block toggle --
   max-height is a generous cap (not a real measured height) so the CSS
   transition has something to animate; .is-open reveals it. */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 4px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
}
.faq-item.is-open .faq-answer { max-height: 600px; opacity: 1; padding: 0 4px 20px; }

/* ---- CTA band ---- */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 14px; }
.cta-band p { max-width: 520px; margin: 0 auto 32px; }

/* ---- Support panel (homepage, above "Everything Your Business Needs
   Next") -- deliberately an icon-based graphic on the right rather than a
   stock photo of a person, consistent with the no-fabricated-imagery
   approach used across the site. ---- */
.support-panel {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 48px;
  background: radial-gradient(circle at top right, #16295a 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-xl);
  padding: 56px;
  color: #fff;
}
.support-panel .eyebrow { color: #8fb0ff; }
.support-panel h2 { color: #fff; margin: 10px 0 14px; }
.support-panel-text > p { color: #c3ccdf; margin: 0 0 32px; max-width: 480px; }
.support-feature-list { display: flex; flex-direction: column; gap: 14px; }
.support-feature {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.support-feature-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: rgba(31, 174, 107, 0.18); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.support-feature-icon svg { width: 20px; height: 20px; }
.support-feature p { margin: 0; font-size: 0.95rem; color: #dbe1ef; }
.support-feature p strong { color: #fff; }
.support-panel-visual { display: flex; align-items: center; justify-content: center; }
.support-visual-rings {
  position: relative; width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}
.support-visual-rings::before {
  content: ""; position: absolute; inset: 24px;
  border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.14);
}
.support-visual-badge {
  width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.support-visual-badge svg { width: 52px; height: 52px; color: #fff; }

/* ---- Empty state (used on dashboard-adjacent public pages) ---- */
.empty-state { text-align: center; padding: 48px 24px; color: var(--color-text-muted); grid-column: 1 / -1; }

/* ---- Service directory (services.html) -- a pill tablist switching
   between 4 category panels, each a list of clickable rows. Own blue/
   green palette rather than copying a competitor reference's orange, to
   stay visually distinct while following the same tabbed-list pattern. ---- */
.service-tablist {
  display: flex; gap: 4px; padding: 5px; margin: 0 0 28px; width: 100%;
  background: var(--color-surface-alt); border-radius: 999px; border: 1px solid var(--color-border);
}
.service-tab {
  flex: 1; border: none; background: none; cursor: pointer; padding: 11px 22px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 700; color: var(--color-text-muted); white-space: nowrap;
  text-align: center; transition: background 0.15s ease, color 0.15s ease;
}
.service-tab:hover { color: var(--color-primary); }
.service-tab.is-active { background: var(--color-secondary); color: #fff; box-shadow: var(--shadow-sm); }

/* ---- Entity-type tabs above the homepage pricing grid (index.html) --
   same pill-tablist pattern as the service directory above, kept as its
   own class so index.html's tab-switching in pricing.js never collides
   with services.html's own [data-service-tablist] logic. ---- */
.pricing-entity-tablist {
  display: flex; gap: 4px; padding: 5px; margin: 0 auto 32px; max-width: 320px;
  background: var(--color-surface-alt); border-radius: 999px; border: 1px solid var(--color-border);
}
.pricing-entity-tab {
  flex: 1; border: none; background: none; cursor: pointer; padding: 11px 22px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 700; color: var(--color-text-muted); white-space: nowrap;
  text-align: center; transition: background 0.15s ease, color 0.15s ease;
}
.pricing-entity-tab:hover { color: var(--color-primary); }
.pricing-entity-tab.is-active { background: var(--color-secondary); color: #fff; box-shadow: var(--shadow-sm); }

.service-row-list { display: flex; flex-direction: column; gap: 12px; }
.service-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 20px 24px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.service-row:hover { border-color: var(--color-secondary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.service-row-title { display: block; font-weight: 700; font-size: 1rem; color: var(--color-primary); margin-bottom: 3px; }
.service-row-desc { display: block; font-size: 0.86rem; color: var(--color-text-muted); }
.service-row-chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-text-muted); }
.service-row:hover .service-row-chevron { color: var(--color-secondary); }

/* ---- Resource article body (resource.html) ---- */
.resource-body h2 { font-size: 1.3rem; margin: 32px 0 12px; }
.resource-body p { color: var(--color-text); font-size: 1rem; margin-bottom: 16px; line-height: 1.7; }
.resource-body p:first-child { margin-top: 0; }

/* ==========================================================================
   Split two-column section grids (hero / checklist / usage panels) -- used
   by ein.html and reusable on any future service page with the same shape.
   ========================================================================== */
.split-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.split-grid.split-grid-reverse { grid-template-columns: 0.85fr 1.15fr; }

/* ==========================================================================
   Premium quick-facts strip
   ========================================================================== */
.factstrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.factstrip-item {
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: 22px; text-align: left; display: flex; gap: 14px; align-items: flex-start;
  box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.factstrip-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.factstrip-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: rgba(37, 87, 214, 0.1); color: var(--color-secondary);
  display: flex; align-items: center; justify-content: center;
}
.factstrip-icon svg { width: 20px; height: 20px; }
.factstrip-item h4 { margin: 0 0 4px; font-size: 0.95rem; color: var(--color-primary); }
.factstrip-item p { margin: 0; font-size: 0.85rem; color: var(--color-text-muted); }

/* ==========================================================================
   Premium "do you need one" checklist + card
   ========================================================================== */
.need-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.need-item {
  display: flex; gap: 14px; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 14px 18px;
  box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.need-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* .need-item's own `display: flex` above beats the browser default
   [hidden]{display:none} on specificity -- same bug/fix as
   .requirement-row in Phase 4a. Needed for contact.html's phone/address
   rows, which start hidden until contact-info.js confirms a value is
   configured. */
.need-item[hidden] { display: none; }
.need-item-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(31, 174, 107, 0.12); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}
.need-item-icon svg { width: 16px; height: 16px; }
.need-item span { font-size: 0.95rem; color: var(--color-text); }

.notsure-card {
  padding: 32px; border-top: 3px solid var(--color-secondary);
  background: linear-gradient(165deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
}
.notsure-card-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-secondary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; margin-bottom: 16px;
}

/* Contact page -- a plain supportive icon standing in for a "meet our
   team" photo or a real-address map graphic, neither of which Swyft has
   an honest version of yet (see the Phase 4l+1 delivery notes). */
.contact-visual-icon {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--color-secondary); margin-top: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}

/* ---- Two-up device image showcase (e.g. "Do you need one" panel) ---- */
.device-showcase { position: relative; display: flex; justify-content: center; align-items: center; padding: 20px 0; }
.device-showcase-img {
  width: 62%; max-width: 260px; height: auto; display: block;
  border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(16, 24, 40, 0.22);
  position: relative;
}
.device-showcase-img-a { z-index: 1; transform: rotate(-6deg) translate(16px, 8px); }
.device-showcase-img-b { z-index: 2; margin-left: -70px; transform: rotate(5deg) translate(-8px, 24px); }

/* ---- "How to apply" comparison graphic ---- */
.apply-comparison-graphic { max-width: 420px; width: 100%; height: auto; margin: 28px auto 0; display: block; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* ---- Original phone-frame mockup (CSS-built, not a real document photo) ---- */
.phone-mockup {
  width: 240px; padding: 14px 11px 20px;
  background: linear-gradient(165deg, #3a4150, #14171d);
  border-radius: 42px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
  transform: rotate(-4deg);
}
.phone-mockup-notch {
  width: 84px; height: 16px; margin: 0 auto 10px;
  background: #14171d; border-radius: 10px;
}
.phone-mockup-screen { background: #fff; border-radius: 26px; padding: 24px 18px 20px; color: var(--color-text); }
.phone-mockup-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  color: #fff; font-weight: 800; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.phone-mockup-label { margin: 0 0 4px; font-size: 0.72rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.phone-mockup-divider { border: none; border-top: 1px solid var(--color-border); margin: 14px 0; }
.phone-mockup-status { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--color-text); font-size: 0.92rem; }
.phone-mockup-status svg { width: 15px; height: 15px; color: var(--color-accent); }
.phone-mockup-obtained {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--color-surface-alt); border-radius: var(--radius-md);
  padding: 12px 14px; margin: 14px 0;
}
.phone-mockup-obtained strong { font-size: 1.15rem; color: var(--color-secondary); letter-spacing: 0.01em; }
.phone-mockup-obtained-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--color-secondary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.phone-mockup-obtained-icon svg { width: 17px; height: 17px; }
.phone-mockup-ein { font-size: 1.3rem; font-weight: 800; color: var(--color-primary); letter-spacing: 0.02em; }
.phone-mockup-company { margin: 0; font-weight: 700; font-size: 0.92rem; color: var(--color-text); }

/* ==========================================================================
   "Using an EIN" section -- numbered list + an original document-center
   mockup card (no fabricated numbers, not a copied screenshot).
   ========================================================================== */
.usage-list { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.usage-item { display: flex; gap: 18px; align-items: flex-start; }
.usage-item-num {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--color-secondary); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.usage-item h4 { margin: 0 0 4px; font-size: 1.02rem; color: var(--color-primary); }
.usage-item p { margin: 0; font-size: 0.92rem; color: var(--color-text-muted); }

.usage-mockup { position: relative; display: flex; justify-content: center; padding-bottom: 20px; }
.usage-mockup-card {
  width: 100%; max-width: 340px; background: var(--color-surface);
  border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(16, 24, 40, 0.16);
  overflow: hidden; transform: rotate(-2deg);
}
.usage-mockup-header { background: var(--color-surface-alt); padding: 10px 16px; display: flex; gap: 6px; }
.usage-mockup-header .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); display: inline-block; }
.usage-mockup-body { padding: 22px; }
.usage-mockup-label { margin: 0 0 14px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 700; }
.usage-mockup-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.usage-mockup-row:first-of-type { border-top: none; }
.usage-mockup-row-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--color-surface-alt); color: var(--color-secondary);
  display: flex; align-items: center; justify-content: center;
}
.usage-mockup-row-icon svg { width: 17px; height: 17px; }
.usage-mockup-row-title { margin: 0; font-size: 0.87rem; font-weight: 700; color: var(--color-text); }
.usage-mockup-row-sub { margin: 0; font-size: 0.77rem; color: var(--color-text-muted); }
.usage-mockup-badge {
  margin-left: auto; flex-shrink: 0; font-size: 0.7rem; font-weight: 700;
  color: var(--color-accent); background: rgba(31, 174, 107, 0.12);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.usage-mockup-float {
  position: absolute; bottom: 0; left: 12px;
  display: flex; align-items: center; gap: 10px;
  background: var(--color-primary); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(15, 30, 61, 0.35);
  font-size: 0.8rem; font-weight: 700; white-space: nowrap;
}
.usage-mockup-float svg { width: 18px; height: 18px; color: var(--color-accent); flex-shrink: 0; }

/* ==========================================================================
   Long-form guide with sticky table of contents -- ein.html and any future
   service page with a deep-dive section.
   ========================================================================== */
.guide-layout { display: grid; grid-template-columns: 250px 1fr; gap: 56px; align-items: start; }
.guide-toc { position: sticky; top: calc(var(--header-height) + 24px); }
/* Modifier for a page that's hiding its .guide-toc aside (e.g.
   annual-report.html, for now) -- without this, the 250px column
   .guide-layout reserves would stay as a blank gap even with the aside
   itself hidden. Scoped to this modifier class, not .guide-layout itself,
   so ein.html's own table of contents (still shown) is unaffected. */
.guide-layout-no-toc { grid-template-columns: 1fr; }
.guide-toc-title { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0 0 14px 14px; }
.guide-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.guide-toc-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-md);
  font-size: 0.88rem; font-weight: 600; color: var(--color-text-muted);
  text-decoration: none; transition: background 0.15s ease, color 0.15s ease;
}
.guide-toc-link:hover { background: var(--color-surface-alt); color: var(--color-primary); }
.guide-toc-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-surface-alt); color: var(--color-secondary);
  display: flex; align-items: center; justify-content: center;
}
.guide-toc-icon svg { width: 12px; height: 12px; }
.guide-toc-link.is-active { background: var(--color-surface-alt); color: var(--color-secondary); }
.guide-toc-link.is-active .guide-toc-icon { background: var(--color-secondary); color: #fff; }

.guide-intro { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 44px; }
.guide-intro-badge {
  flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}
.guide-intro-badge svg { width: 28px; height: 28px; color: #fff; }
.guide-intro p { margin: 0; color: var(--color-text-muted); max-width: 520px; }

.guide-section { padding: 28px 0; border-top: 1px solid var(--color-border); }
.guide-section:first-of-type { border-top: none; padding-top: 0; }
.guide-section h3 { margin-bottom: 12px; }
.guide-section p { color: var(--color-text-muted); line-height: 1.7; }

/* ==========================================================================
   Numbered "reason" row-cards (e.g. annual-report.html "Why This Matters")
   ========================================================================== */
.reason-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.reason-item {
  display: flex; gap: 16px; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 18px 20px;
  box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.reason-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.reason-item-num {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: var(--color-secondary); color: #fff; font-weight: 800; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
}
.reason-item span:last-child { font-size: 0.98rem; font-weight: 600; color: var(--color-text); }

/* ---- "The 3 Absolute Compliance FAQs" (annual-report.html, right side of
   the "Why Annual Reports Matter" split section) -- a real toggle/
   accordion, not static text: built from the sitewide .faq-list/.faq-item/
   .faq-question/.faq-answer markup (same classes faq.js's renderFaqItem()
   emits elsewhere), so navigation.js's existing initFaqAccordions() wires
   up the click-to-expand behavior automatically on page load -- no new JS
   needed for this block. .compliance-faq-list only overrides the shared
   .faq-list's centered max-width (760px, margin:0 auto), which fights the
   half-width column this block actually sits in here. .compliance-faq-a
   styles the (occasionally 2, for FAQ 1's LLC/Corporation split) <p> tags
   inside one .faq-answer. */
.compliance-faq-list { max-width: none; margin: 0; }
.compliance-faq-a { margin: 0 0 10px; }
.compliance-faq-a:last-child { margin-bottom: 0; }
.compliance-faq-a strong { color: var(--color-text); }

/* ---- Premium redesign (annual-report.html) -- the hero and the entity/
   state picker section each now carry a generated illustration (an
   <img>, not the inline custom SVG index.html's hero uses) inside the
   same .hero-visual / .split-grid wrappers those sections already use
   elsewhere on the site, so the existing mobile collapse rules in
   responsive.css (.hero-grid, .split-grid -> 1fr) apply with no new
   responsive work needed. .picker-visual mirrors .hero-visual's simple
   centering role for the second (reversed) split-grid section. Hover
   lift + a step connector are scoped to .page-annual-report so they
   don't change .service-card/.step-item behavior on any other page. */
.hero-visual-img {
  width: 100%; max-width: 440px; height: auto;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.picker-visual { display: flex; align-items: center; justify-content: center; }
.picker-visual-img {
  width: 100%; max-width: 380px; height: auto;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.page-annual-report .service-card,
.page-annual-report .step-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-annual-report .service-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.page-annual-report .step-item:hover .step-number {
  background: var(--color-accent);
}
@media (prefers-reduced-motion: reduce) {
  .page-annual-report .service-card,
  .page-annual-report .step-item { transition: none; }
}

/* ---- Original abstract compliance graphic (not a photo) ---- */
.compliance-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 440px; border-radius: var(--radius-xl); overflow: hidden;
  background: radial-gradient(circle at 25% 15%, #2b4fd6 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
  box-shadow: 0 34px 80px rgba(15, 30, 61, 0.4);
}
.compliance-visual-eyebrow {
  position: absolute; top: 30px; left: 30px;
  color: #8fb0ff; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.compliance-visual-rings {
  position: relative; width: 270px; height: 270px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.22);
}
.compliance-visual-rings::before {
  content: ""; position: absolute; inset: 28px;
  border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.16);
}
.compliance-visual-badge {
  width: 186px; height: 186px; border-radius: 50%;
  background: linear-gradient(160deg, #ffffff 0%, #e4ecff 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 24px 55px rgba(0, 0, 0, 0.35);
}
.compliance-visual-badge svg { width: 84px; height: 84px; color: var(--color-secondary); }
.compliance-visual-chip {
  position: absolute; background: #fff; border-radius: var(--radius-md);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28); padding: 13px 18px;
  display: flex; align-items: center; gap: 9px;
  font-size: 0.94rem; font-weight: 700; color: var(--color-primary); white-space: nowrap;
}
.compliance-visual-chip svg { width: 19px; height: 19px; color: var(--color-accent); flex-shrink: 0; }
.compliance-visual-chip-a { top: 40px; right: 24px; transform: rotate(-4deg); }
.compliance-visual-chip-b { bottom: 38px; left: 20px; transform: rotate(3deg); }

/* ---- Small illustrative status card used inside guide sections ---- */
.status-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: 0 20px 46px rgba(16, 24, 40, 0.14);
  padding: 22px 26px; max-width: 440px; margin-top: 24px;
}
.status-card-icon {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.status-card-icon svg { width: 24px; height: 24px; }
.status-card-icon.is-warning { background: linear-gradient(160deg, #e2574c, #c23b2f); box-shadow: 0 10px 26px rgba(194, 59, 47, 0.38); }
.status-card-icon.is-ok { background: linear-gradient(160deg, var(--color-secondary), var(--color-accent)); box-shadow: 0 10px 26px rgba(37, 87, 214, 0.32); }
.status-card-label { margin: 0 0 3px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 700; }
.status-card-value { margin: 0; font-weight: 800; font-size: 1.14rem; color: var(--color-primary); }

/* ---- Fuller variant with a small detail table underneath ---- */
.status-card.is-detailed { flex-direction: column; align-items: stretch; gap: 0; max-width: 420px; padding: 28px 30px; }
.status-card-header { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.status-card-detail-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; border-top: 1px solid var(--color-border); font-size: 0.95rem;
}
.status-card-detail-row:first-of-type { border-top: none; }
.status-card-detail-row span:first-child { color: var(--color-text-muted); }
.status-card-detail-row span:last-child { font-weight: 700; font-size: 1rem; color: var(--color-text); }

/* ---- Two-step escalation timeline (e.g. penalty -> lost good standing) ---- */
.status-timeline {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); box-shadow: 0 20px 46px rgba(16, 24, 40, 0.14);
  padding: 30px 32px; max-width: 460px; margin-top: 24px;
}
.status-timeline-row {
  display: flex; align-items: center; gap: 18px;
  background: rgba(194, 59, 47, 0.06); border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.status-timeline-connector { width: 2px; height: 26px; background: var(--color-border); margin: 6px 0 6px 25px; }
.status-timeline-icon {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.status-timeline-icon svg { width: 22px; height: 22px; }
.status-timeline-icon.is-warning { background: linear-gradient(160deg, #e2574c, #c23b2f); box-shadow: 0 10px 26px rgba(194, 59, 47, 0.38); }
.status-timeline-label { margin: 0 0 2px; font-weight: 800; font-size: 1.05rem; color: var(--color-primary); }
.status-timeline-sub { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }

/* ---- Order fulfillment tracker (order-status.html) -- a vertical
   milestone list: done (green, filled check), current (blue, filled),
   pending (grey outline). Built fresh rather than reusing
   .status-timeline above, which is themed specifically for the red
   "escalation" warning case elsewhere on the site. ---- */
.order-track { display: flex; flex-direction: column; margin-top: 8px; }
.order-track-step { display: flex; gap: 18px; }
.order-track-marker-col { display: flex; flex-direction: column; align-items: center; }
.order-track-marker {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-border); color: var(--color-text-muted);
  background: var(--color-surface); font-weight: 800;
}
.order-track-marker svg { width: 20px; height: 20px; }
.order-track-connector { width: 2px; flex: 1; min-height: 28px; background: var(--color-border); margin: 2px 0; }
.order-track-step.is-done .order-track-marker { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.order-track-step.is-done .order-track-connector { background: var(--color-accent); }
.order-track-step.is-current .order-track-marker { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; box-shadow: 0 0 0 5px rgba(37, 87, 214, 0.15); }
.order-track-content { padding-bottom: 32px; }
.order-track-step:last-child .order-track-content { padding-bottom: 0; }
.order-track-title { margin: 6px 0 2px; font-weight: 800; color: var(--color-primary); }
.order-track-step.is-current .order-track-title { color: var(--color-secondary); }
.order-track-desc { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); max-width: 440px; }

/* ==========================================================================
   Live "order now" panel -- entity + state pickers, a real combined price
   (service flat fee + the selected state's own fee), and a genuine
   Order Now action (annual-report.html and reusable elsewhere).
   ========================================================================== */
.order-panel { max-width: 480px; width: 100%; margin-left: auto; }
.order-panel-title { margin: 0 0 20px; font-size: 1.1rem; font-weight: 800; color: var(--color-primary); text-align: center; }
.order-panel-price {
  margin: 22px 0 18px; padding: 20px; text-align: center;
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.order-panel-price-amount { margin: 0 0 4px; font-size: 1.9rem; font-weight: 800; color: var(--color-primary); }
.order-panel-price-sub { margin: 0; font-size: 0.88rem; color: var(--color-text-muted); }
.order-panel-cta { width: 100%; }
.order-panel-cta:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Pill treatment for the order panel (annual-report.html's "File
   Your Annual Report Now"), styled after a premium rounded-card reference
   -- fully-rounded selects, a bolder bordered price box, and a pill-shaped
   CTA -- but built entirely from Swyft's own palette and shadow tokens,
   not a copied layout or competitor's colors/branding. ---- */
.order-panel-pill { padding: 40px 36px; border-radius: 22px; box-shadow: var(--shadow-md); }
.order-panel-pill .order-panel-title { font-size: 1.25rem; margin-bottom: 26px; }
.order-panel-pill .form-field select {
  border-radius: 999px; padding: 13px 20px; border-color: var(--color-border);
  background: var(--color-surface-alt);
}
.order-panel-pill .form-field select:focus { background: #fff; }
.order-panel-pill .order-panel-price {
  border-radius: 18px; padding: 24px 20px; margin: 24px 0 20px;
  border: 1.5px solid var(--color-border); background: #fff;
}
.order-panel-pill .order-panel-price-amount { font-size: 2.3rem; }
.order-panel-pill .order-panel-cta {
  border-radius: 999px; padding: 16px 24px; font-size: 0.95rem;
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---- Entity/state picker cards (annual-report.html "Choose Your Entity
   Type and State" section) -- two icon cards side by side, each with an
   original graphic above its dropdown. Original artwork throughout: no
   Bizee document/map imagery, just a document-outline icon and a generic
   location-pin icon in the site's own palette. ---- */
.picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 22px; }
.picker-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 28px; text-align: center;
}
.picker-card-label {
  margin: 0 0 18px; font-size: 0.78rem; font-weight: 700; color: var(--color-secondary);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.picker-card-graphic {
  height: 130px; border-radius: var(--radius-md); margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--color-surface-alt) 0%, #dfe6f8 100%);
}
.picker-card-graphic-badge {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px rgba(37, 87, 214, 0.3);
}
.picker-card-graphic-badge svg { width: 32px; height: 32px; color: #fff; }

/* ---- Inline requirement result panel (appears once both picker fields
   are chosen -- entity-state-picker.js). Real data, not a mockup: every
   row is either a live figure from the API or an honest placeholder. ---- */
.requirement-panel { margin-top: 32px; }
.requirement-panel-title { margin: 0 0 16px; font-size: 1.3rem; font-weight: 800; color: var(--color-primary); }
.requirement-panel-body {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 4px 28px;
}
.requirement-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--color-border);
}
.requirement-row[hidden] { display: none; }
.requirement-row:first-child { border-top: none; }
.requirement-row span:first-child { font-weight: 700; color: var(--color-primary); }
.requirement-row strong { font-weight: 600; color: var(--color-text); text-align: right; }
.requirement-pill {
  display: inline-block; padding: 6px 16px; border-radius: 999px;
  background: var(--color-surface-alt); color: var(--color-secondary); font-weight: 800;
}
/* A variable-length list of extra notes (e.g. a state's corporation
   publication requirement) -- some state/entity combinations show none,
   others show two or more, so these rows are built by JS, not fixed
   markup. Same .requirement-row base, just top-aligned since the body
   text wraps to multiple lines. */
.requirement-row.requirement-note-row { align-items: flex-start; }
.requirement-row.requirement-note-row span:first-child { flex: 0 0 auto; padding-top: 1px; }
.requirement-row.requirement-note-row p {
  margin: 0; text-align: right; color: var(--color-text);
  font-size: 0.92rem; line-height: 1.55;
}

.requirement-panel-note {
  margin: 18px 0 0; padding: 16px 18px; background: var(--color-surface-alt);
  border-radius: var(--radius-md); color: var(--color-text); font-size: 0.92rem;
}
.requirement-panel-cta { width: 100%; max-width: 420px; margin: 24px auto 0; display: block; }
.requirement-panel-cta[hidden] { display: none; }

/* ---- Entity structure comparison table (compare-business-structures.html)
   A real <table> rather than a card grid -- side-by-side comparison across
   4 columns is exactly what a table is for, and it stays natively
   accessible (row/column headers) in a way a div-based grid wouldn't.
   Wrapped in a horizontally-scrolling container so it degrades gracefully
   on narrow screens instead of squeezing 4 columns into a phone width. ---- */
.compare-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); background: var(--color-surface);
}
.compare-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.92rem; }
.compare-table caption { text-align: left; padding: 20px 24px 0; font-size: 0.8rem; color: var(--color-text-muted); }
.compare-table th, .compare-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--color-border); }
.compare-table thead th { border-top: none; background: var(--color-surface-alt); position: sticky; top: 0; }
.compare-table th[scope="row"] { font-weight: 700; color: var(--color-primary); white-space: nowrap; background: var(--color-surface); }
.compare-table thead th:first-child { border-top-left-radius: var(--radius-lg); }
.compare-table thead th:last-child { border-top-right-radius: var(--radius-lg); }
.compare-table .compare-entity-name { display: block; font-size: 1rem; font-weight: 800; color: var(--color-primary); }
.compare-table .compare-entity-tag { display: block; font-size: 0.76rem; font-weight: 600; color: var(--color-text-muted); margin-top: 2px; }
.compare-table td { color: var(--color-text); line-height: 1.5; }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th[scope="row"] { background: var(--color-surface-alt); }

/* ---- Cost-by-state table's "Get Started" cell (cost-by-state.html) ---- */
.cost-table-actions { display: flex; gap: 8px; flex-wrap: nowrap; }

/* ---- cost-by-state.html -- premium pass on the 50-state fee table.
   Scoped to .state-cost-table/.state-cost-wrap (added alongside the
   shared .compare-table/.compare-table-wrap classes on just this table)
   so the plain .compare-table markup other pages use is untouched.
   Gradient header to match the same recipe used on the
   compare-business-structures.html matrix, zebra striping, a sticky
   first (State) column so it stays visible while scrolling the wide
   table horizontally, and a highlighted "Swyft Launch Service Fee"
   column since that's the page's own featured number against the
   surrounding government fee data. */
.state-cost-wrap { box-shadow: var(--shadow-lg); }
.state-cost-table thead th {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  border-top: none;
  padding: 18px 20px;
}
.state-cost-label { display: block; font-weight: 800; letter-spacing: 0.01em; font-size: 0.82rem; }
.state-cost-table tbody tr:nth-child(even) td,
.state-cost-table tbody tr:nth-child(even) th[scope="row"] {
  background: var(--color-surface-alt);
}
.state-cost-table th[scope="row"] {
  position: sticky; left: 0; z-index: 1;
  box-shadow: 2px 0 6px rgba(16, 24, 40, 0.06);
}
.state-cost-table thead th:first-child { position: sticky; left: 0; z-index: 2; }
.state-cost-fee {
  font-weight: 800; color: var(--color-accent);
  background: rgba(31, 174, 107, 0.08);
}
.state-cost-table tbody tr:nth-child(even) .state-cost-fee { background: rgba(31, 174, 107, 0.14); }
.state-cost-table .btn-table { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.state-cost-table .btn-table:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) {
  .state-cost-table .btn-table { transition: none; }
}

/* ---- 4-factor grid (the decision drivers behind the comparison table) ---- */
.factor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.factor-card { padding: 26px 22px; }
.factor-card-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 14px;
}
.factor-card-icon svg { width: 20px; height: 20px; }
.factor-card h3 { font-size: 0.98rem; margin: 0 0 6px; }
.factor-card p { font-size: 0.86rem; margin: 0; }

/* ---- "Match a structure to your situation" scenario cards ---- */
.match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
.match-card { padding: 26px 28px; }
.match-card-eyebrow { display: block; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-secondary); margin-bottom: 8px; }
.match-card h4 { margin: 0 0 8px; font-size: 1.02rem; color: var(--color-primary); }
.match-card p { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }
.match-card p strong { color: var(--color-text); font-weight: 700; }

/* ---- "Big Brand Trap vs Swyft Launch Promise" 2-card contrast block
   (start.html, just above the FAQ section) -- same 2-col card grid shape
   as .match-grid above, tinted to read at a glance: the Trap card in the
   site's existing warning tone, the Promise card in its existing success
   tone (same rgba-tint convention already used for badges elsewhere). ---- */
.compare-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 24px; }
.compare-card { padding: 26px 28px; border-width: 2px; }
.compare-card-eyebrow { display: block; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.compare-card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--color-text); }
.compare-card-trap { border-color: rgba(199, 124, 17, 0.35); background: rgba(199, 124, 17, 0.06); }
.compare-card-trap .compare-card-eyebrow { color: var(--color-warning); }
.compare-card-promise { border-color: rgba(31, 174, 107, 0.35); background: rgba(31, 174, 107, 0.06); }
.compare-card-promise .compare-card-eyebrow { color: var(--color-success); }

/* ==========================================================================
   Package inclusions grid (centered icon-top cards, e.g. a subscription's
   "what's included" list) + a vertical onboarding timeline
   ========================================================================== */
.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 32px; }
.package-item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 28px 20px; text-align: center;
}
.package-item-icon {
  width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 50%;
  border: 1.5px solid var(--color-secondary); color: var(--color-secondary);
  display: flex; align-items: center; justify-content: center;
}
.package-item-icon svg { width: 20px; height: 20px; }
.package-item p { margin: 0; font-size: 0.92rem; font-weight: 600; color: var(--color-text); }

/* ==========================================================================
   Included panel -- a dark, premium-feeling "everything you get" treatment:
   a navy gradient card with a soft accent glow, an icon + title + description
   per item instead of a plain checklist. Used on corporate-kit.html.
   ========================================================================== */
.kit-included-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--color-primary), #16294f);
  border-radius: var(--radius-lg); padding: 48px 44px;
  box-shadow: 0 30px 70px rgba(15, 30, 61, 0.3);
}
.kit-included-panel::before {
  content: ""; position: absolute; top: -80px; right: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 174, 107, 0.28), transparent 70%);
  pointer-events: none;
}
.kit-included-eyebrow {
  position: relative; display: flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: 28px;
}
.kit-included-eyebrow::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.14); }
.kit-included-grid {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 40px;
}
.kit-included-item { display: flex; gap: 16px; align-items: flex-start; }
.kit-included-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-accent); display: flex; align-items: center; justify-content: center;
}
.kit-included-icon svg { width: 21px; height: 21px; }
.kit-included-item h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: 0.01em; }
.kit-included-item p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: #c3ccdf; }

/* ==========================================================================
   Showcase grid -- a "here's what actually happens" card row: a two-line
   headline (2nd line accented) sitting above a small original graphic on a
   tinted panel. Used for "Everything You Get" style sections.
   ========================================================================== */
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.showcase-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 20px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(15, 30, 61, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.showcase-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 30, 61, 0.12); }
.showcase-card-head { padding: 24px 24px 0; }
.showcase-card-head-line { display: block; font-weight: 800; font-size: 1.04rem; line-height: 1.3; color: var(--color-text); }
.showcase-card-head-line.is-accent { color: var(--color-secondary); }
.showcase-card-visual {
  background: #f2f5fb; margin-top: 20px; padding: 26px 18px 0; min-height: 180px;
  display: flex; align-items: flex-end; justify-content: center;
}

/* Mini "document" graphic (showcase card 1) */
.mini-doc {
  position: relative; width: 172px; background: #fff; border-radius: 12px;
  box-shadow: 0 14px 30px rgba(15, 30, 61, 0.15); padding: 18px 16px 20px;
  transform: rotate(-3deg);
}
.mini-doc-tag {
  position: absolute; top: -10px; right: 12px; background: var(--color-accent); color: #fff;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; padding: 4px 10px;
  border-radius: 999px; box-shadow: 0 6px 14px rgba(31, 174, 107, 0.35);
}
.mini-doc-title { margin: 6px 0 14px; font-size: 0.78rem; font-weight: 800; color: var(--color-primary); line-height: 1.3; }
.mini-doc-line { display: block; height: 6px; border-radius: 3px; background: var(--color-border); margin-bottom: 8px; }

/* Mini "folder + badge" graphic (showcase card 2) */
.mini-folder { position: relative; width: 168px; height: 132px; }
.mini-folder-page { position: absolute; left: 8px; right: 8px; bottom: 0; height: 118px; background: #fff; border-radius: 10px; box-shadow: 0 10px 24px rgba(15, 30, 61, 0.12); }
.mini-folder-page-a { transform: rotate(-4deg); }
.mini-folder-page-b { height: 124px; transform: rotate(3deg); z-index: 1; }
.mini-folder-badge {
  position: absolute; left: 50%; top: 22px; transform: translateX(-50%); z-index: 2;
  background: var(--color-secondary); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 8px 14px; border-radius: 10px; display: flex; align-items: center; gap: 6px;
  box-shadow: 0 10px 22px rgba(37, 87, 214, 0.35); white-space: nowrap;
}
.mini-folder-badge svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ==========================================================================
   Kit visual -- a stylized closed binder/box with a wax-seal badge and two
   "peeking" document corners behind it. Original artwork, not a photo of an
   actual product or a real government seal. Used on corporate-kit.html.
   ========================================================================== */
.kit-visual { position: relative; width: 240px; height: 200px; margin: 0 auto; }
.kit-visual-doc {
  position: absolute; top: 10px; width: 150px; height: 190px; background: #fff;
  border-radius: 10px; box-shadow: 0 14px 28px rgba(15, 30, 61, 0.14);
}
.kit-visual-doc-a { left: 6px; transform: rotate(-9deg); }
.kit-visual-doc-b { right: 6px; transform: rotate(8deg); }
.kit-visual-box {
  position: absolute; left: 50%; top: 24px; transform: translateX(-50%);
  width: 176px; height: 156px; border-radius: 16px;
  background: linear-gradient(155deg, var(--color-primary), #16294f);
  box-shadow: 0 26px 50px rgba(15, 30, 61, 0.32);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.kit-visual-box-label {
  color: #fff; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.5; opacity: 0.92;
}
.kit-visual-seal {
  position: absolute; right: -14px; bottom: -14px; width: 62px; height: 62px;
  border-radius: 50%; background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 26px rgba(31, 174, 107, 0.4); border: 3px solid #fff;
}
.kit-visual-seal svg { width: 26px; height: 26px; }
.kit-visual.is-compact { width: 176px; height: 148px; }
.kit-visual.is-compact .kit-visual-doc { width: 110px; height: 140px; top: 6px; }
.kit-visual.is-compact .kit-visual-box { width: 128px; height: 114px; top: 18px; }
.kit-visual.is-compact .kit-visual-box-label { font-size: 0.68rem; }
.kit-visual.is-compact .kit-visual-seal { width: 46px; height: 46px; right: -10px; bottom: -10px; }
.kit-visual.is-compact .kit-visual-seal svg { width: 20px; height: 20px; }

/* ==========================================================================
   Document stack -- 3 fanned, labeled document cards. Used to show what a
   corporate kit actually contains without a photo of a real product.
   ========================================================================== */
.doc-stack { position: relative; width: 100%; max-width: 320px; height: 260px; margin: 0 auto; }
.doc-stack-card {
  position: absolute; width: 190px; background: #fff; border-radius: 14px;
  box-shadow: 0 16px 32px rgba(15, 30, 61, 0.14); padding: 20px 20px 22px;
}
.doc-stack-card-tag {
  display: inline-block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-secondary); background: rgba(37, 87, 214, 0.1);
  padding: 3px 9px; border-radius: 999px; margin-bottom: 10px;
}
.doc-stack-card p.doc-stack-title { margin: 0 0 12px; font-size: 0.86rem; font-weight: 800; color: var(--color-primary); line-height: 1.3; }
.doc-stack-line { display: block; height: 6px; border-radius: 3px; background: var(--color-border); margin-bottom: 7px; }
.doc-stack-card-a { left: 4px; top: 60px; transform: rotate(-7deg); z-index: 1; }
.doc-stack-card-b { left: 50%; top: 20px; transform: translateX(-50%) rotate(2deg); z-index: 3; }
.doc-stack-card-c { right: 4px; top: 66px; transform: rotate(8deg); z-index: 2; }

/* ==========================================================================
   Binder row -- 3 leaning "spine" cards, standing in for a shelf of records.
   Used alongside the numbered benefits list.
   ========================================================================== */
.binder-row { display: flex; align-items: flex-end; justify-content: center; gap: 14px; height: 220px; }
.binder-spine {
  width: 62px; border-radius: 10px 10px 6px 6px; display: flex; align-items: flex-end;
  justify-content: center; padding-bottom: 16px; box-shadow: 0 14px 28px rgba(15, 30, 61, 0.16);
}
.binder-spine span {
  color: #fff; font-weight: 800; font-size: 0.68rem; letter-spacing: 0.04em;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.binder-spine-a { height: 170px; background: linear-gradient(160deg, var(--color-primary), #16294f); transform: rotate(-4deg); }
.binder-spine-b { height: 200px; background: linear-gradient(160deg, var(--color-secondary), #1c3f9e); z-index: 1; }
.binder-spine-c { height: 178px; background: linear-gradient(160deg, var(--color-accent), #148753); transform: rotate(4deg); }

/* ==========================================================================
   Step item icon -- a small icon badge above a numbered step (steps-grid).
   ========================================================================== */
.step-item-icon {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%;
  background: rgba(37, 87, 214, 0.1); color: var(--color-secondary);
  display: flex; align-items: center; justify-content: center;
}
.step-item-icon svg { width: 22px; height: 22px; }

.timeline-list { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.timeline-item { position: relative; padding: 0 0 28px 44px; }
.timeline-item::before {
  content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px;
  background: var(--color-border);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:last-child::before { display: none; }
.timeline-item-icon {
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(37, 87, 214, 0.1); color: var(--color-secondary);
  display: flex; align-items: center; justify-content: center;
}
.timeline-item-icon svg { width: 16px; height: 16px; }
.timeline-item h4 { margin: 0 0 4px; font-size: 0.98rem; color: var(--color-primary); }
.timeline-item p { margin: 0; font-size: 0.88rem; color: var(--color-text-muted); }

/* ==========================================================================
   S Corp savings calculator -- a genuinely interactive estimate (real
   client-side math, not a static mockup): two sliders recompute the
   self-employment/FICA tax comparison and estimated savings live.
   ========================================================================== */
.calc-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 30px 28px; box-shadow: var(--shadow-md);
}
.calc-field { margin-bottom: 26px; }
.calc-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.calc-field-label { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text); }
.calc-field-icon {
  width: 28px; height: 28px; border-radius: 50%; background: var(--color-secondary); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.calc-field-icon svg { width: 14px; height: 14px; }
.calc-field-value { font-size: 1.4rem; font-weight: 800; color: var(--color-secondary); }
.calc-slider {
  width: 100%; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px;
  background: var(--color-border); outline: none; display: block;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-secondary); cursor: pointer; border: 3px solid #fff; box-shadow: var(--shadow-sm);
}
.calc-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--color-secondary); cursor: pointer;
  border: 3px solid #fff; box-shadow: var(--shadow-sm);
}
.calc-scale { display: flex; justify-content: space-between; font-size: 0.76rem; color: var(--color-text-muted); margin-top: 8px; }
.calc-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-border); flex-wrap: wrap; }
.calc-stat-row:first-of-type { border-top: 1px solid var(--color-border); margin-top: 6px; }
.calc-stat-label { font-size: 0.86rem; color: var(--color-text-muted); }
.calc-stat-value { font-size: 1.05rem; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.calc-savings-bar {
  margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--color-primary); color: #fff; border-radius: var(--radius-md); padding: 18px 22px; flex-wrap: wrap;
}
.calc-savings-bar span { font-size: 0.85rem; font-weight: 600; color: var(--color-text-on-dark); }
.calc-savings-bar strong { font-size: 1.5rem; font-weight: 800; }
.calc-disclaimer { margin-top: 16px; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.5; }

/* ---- Package select bar (start.html) ----
   Each field is one bordered pill: a solid colored number-chip fused to
   the left edge, label + dropdown stacked to its right, no separate
   visible border on the <select> itself. */
.package-select-bar {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 28px 32px; box-shadow: var(--shadow-sm); margin-bottom: 32px;
}
.package-select-fields { display: flex; gap: 16px; flex-wrap: wrap; }
.package-select-field {
  flex: 1; min-width: 220px; display: flex; align-items: stretch;
  border: 1.5px solid var(--color-secondary); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface);
}
.package-select-field-num {
  width: 40px; flex-shrink: 0; background: var(--color-secondary); color: #fff;
  font-size: 0.85rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.package-select-field-body { flex: 1; min-width: 0; padding: 8px 14px; }
.package-select-field-body label {
  display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-text-muted); margin-bottom: 2px;
}
.package-select-field select {
  width: 100%; border: none; padding: 2px 0; font-size: 0.98rem; font-weight: 600;
  font-family: inherit; background: transparent; color: var(--color-text); appearance: auto;
}
.package-select-field select:focus { outline: none; }
.package-select-field:focus-within { border-color: var(--color-secondary-dark); box-shadow: 0 0 0 3px rgba(37, 87, 214, 0.13); }

/* Get Started button's inline error message (start.html) -- same red/size
   as forms.css's .field-error, restated here since start.html doesn't
   link forms.css (that stylesheet is scoped to the wizard-form pages). */
.form-error { font-size: 0.85rem; color: var(--color-error); margin-top: 10px; text-align: center; }

/* ---- Package comparison table + order summary (start.html) ----
   A light, flat, blue-accented layout: package names read as a row of
   tabs, the Recommended tier gets a full-width ribbon and a colored
   frame around its whole column, and a row a package doesn't include
   either offers a real "+ $X" add-on or, when some other real package
   includes it, an honest "In {that package}" hint -- never a bare gap
   with nothing explaining it. */
.compare-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.compare-table-wrap {
  overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 620px; }
/* Fixed layout + an explicit <colgroup> (written by start-package-selector.js)
   keep all package columns the same width no matter which tab is active --
   otherwise the browser's default table layout re-measures column widths
   from cell content and the whole table visibly reflows on selection.
   Scoped to .compare-layout so this doesn't also affect
   compare-business-structures.html's own, differently-shaped comparison
   table, which happens to share the bare .compare-table class name. */
.compare-layout .compare-table { table-layout: fixed; }
.compare-table th, .compare-table td {
  padding: 16px 18px; border-bottom: 1px solid var(--color-border); text-align: center; vertical-align: middle;
}
.compare-table th:first-child, .compare-table td:first-child {
  text-align: left; font-size: 0.9rem; font-weight: 600; color: var(--color-text); min-width: 240px;
}
.compare-table-title { vertical-align: bottom !important; font-size: 1.05rem; font-weight: 800; color: var(--color-primary); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: var(--color-surface-alt); }
.compare-table tbody tr:hover td.is-selected-col { background: #eef3ff; }
.compare-table th.compare-package-head { position: relative; padding: 16px 18px 20px; }
.compare-package-head.is-selected-col,
.compare-table td.is-selected-col {
  border-left: 2px solid var(--color-secondary); border-right: 2px solid var(--color-secondary); background: #f6f9ff;
}
.compare-table tbody tr:last-child td.is-selected-col { border-bottom: 2px solid var(--color-secondary); }
.compare-package-ribbon {
  position: absolute; top: 0; left: 0; right: 0; background: var(--color-secondary); color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 0; text-align: center;
}
.compare-package-tab {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 20px;
  border-radius: 999px; border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); font-size: 0.92rem; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.compare-package-tab:hover { border-color: var(--color-secondary); }
.compare-package-tab.is-selected { background: var(--color-secondary); border-color: var(--color-secondary); color: #fff; }
.compare-package-tab .compare-check-inline { width: 13px; height: 13px; }
.compare-package-price { font-size: 1.7rem; font-weight: 800; color: var(--color-primary); margin-top: 14px; }
.compare-package-fee { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
.compare-package-turnaround {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 0.74rem; font-weight: 700;
  color: var(--color-secondary);
}
.compare-package-turnaround .compare-bolt { width: 13px; height: 13px; }
.compare-check { color: var(--color-secondary); width: 18px; height: 18px; }
.compare-dash { color: var(--color-border); font-weight: 700; }
/* Shown for a row a package doesn't include but a different real package
   does (2026-09-11 follow-up -- replaced the earlier "In {package}" text
   hint with a plain "X" mark). Which package actually includes it is kept
   as a native title attribute in the markup, not dropped -- just no longer
   spelled out in the cell itself. */
.compare-x { display: inline-block; color: var(--color-text-muted); font-weight: 700; font-size: 1.05rem; cursor: help; }
/* The ⓘ tooltip next to a row's service name (Phase 42) -- reuses the
   site's existing .info-tip pattern as-is, just nudged inline next to the
   row label instead of a form field's. */
.compare-table td:first-child .info-tip { margin-left: 6px; vertical-align: middle; }
.compare-table td:first-child .info-tip-bubble { white-space: normal; }
/* The default .info-tip-bubble opens upward (bottom: 100% + 8px), which is
   fine once there are other rows above to absorb it -- but the very first
   row (e.g. "Priority Corporate Name Check") has nothing above it except
   the package header (name/price/State Government Fee), so opening upward
   there covered that header instead (reported 2026-09-11). Flip just this
   one row's bubble to open downward -- every other row keeps the default
   upward direction, where it has real room. */
.compare-table tbody tr:first-child .info-tip-bubble {
  bottom: auto;
  top: calc(100% + 8px);
}
.compare-addon-btn {
  padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--color-secondary); background: var(--color-surface);
  color: var(--color-secondary); font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.compare-addon-btn.is-selected { background: var(--color-secondary); color: #fff; }

.order-summary-card {
  position: sticky; top: 24px; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-sm);
}
.order-summary-card h3 { font-size: 1rem; margin: 0 0 16px; }
.order-summary-line {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 0.88rem;
  border-bottom: 1px solid var(--color-border);
}
.order-summary-line .amt { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.order-summary-total {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px;
  font-weight: 800; font-size: 1.2rem; color: var(--color-primary);
}
.order-summary-note { font-size: 0.76rem; color: var(--color-text-muted); margin-top: 16px; line-height: 1.5; }
/* A discounted line (order-summary-form.js's own "Coupon (CODE)" row) --
   same shape as .order-summary-line, just the amount reads green instead
   of the usual near-black .amt, so a discount reads as a discount at a
   glance rather than one more charge in the list. */
.order-summary-discount .amt { color: var(--color-success); }
/* order-summary.html's own "Apply Coupon" field -- sits between the
   itemized lines above and the grand .order-summary-total below, not
   inside either. Reuses .form-field's input look (border/radius/color
   vars) directly rather than requiring the whole .form-field wrapper,
   since this is a single inline field, not a stacked label-over-input
   form group. */
.order-summary-coupon { padding: 14px 0 4px; border-bottom: 1px solid var(--color-border); }
.order-summary-coupon-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--color-primary); margin-bottom: 8px; }
.order-summary-coupon-row { display: flex; gap: 8px; }
.order-summary-coupon-row input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font: inherit; font-size: 0.88rem; color: var(--color-text); background: #fff;
}
.order-summary-coupon-row input:focus { border-color: var(--color-secondary); }
.order-summary-coupon-row input[readonly] { background: var(--color-bg, #f7f7f9); color: var(--color-text-muted); }
/* Frontend .btn's own base size (13px/24px padding, style.css) is too
   large for an inline control sitting next to a compact text input --
   same scoped-down-size pattern .header-actions .btn already uses in that
   same file for its own inline context. */
.order-summary-coupon-row .btn { white-space: nowrap; padding: 10px 16px; font-size: 0.82rem; }
.order-summary-coupon-message { font-size: 0.78rem; color: var(--color-error); margin: 8px 0 0; line-height: 1.4; }
/* A short sub-text tucked directly under one specific cart line (Phase 44,
   mailing-address.html's Virtual Address Integration row) -- unlike
   .order-summary-note above (a page-level note with its own top margin),
   this sits right under the line it explains. */
.order-summary-line-note { font-size: 0.74rem; color: var(--color-text-muted); margin: -6px 0 10px; line-height: 1.45; }

/* ---- order-success.html (Phase 45) -- reached by ?token= alone, same as
   every other not-yet-built wizard step; see order-success.js's own
   docblock for the caveat that no real checkout/payment gate exists yet. */
.order-success-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 40px 44px;
}
/* The emoji sits inline as the first word of the heading (Phase 45 fix --
   it was originally its own stacked <p> above the <h1>, which rendered as
   two separate lines instead of the single "🌟 Order Successful..." line
   the user's own copy specified). display:inline-block only so the
   slightly-larger font-size doesn't distort the h1's own line-height. */
.order-success-badge { font-size: 1.15em; display: inline-block; line-height: 1; vertical-align: -0.05em; }
.order-success-card h1 { font-size: 1.4rem; margin: 0 0 18px; color: var(--color-primary); line-height: 1.35; }
.order-success-card > p { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.65; margin: 0 0 16px; }
.order-success-steps { display: flex; flex-direction: column; gap: 20px; margin: 22px 0; }
.order-success-step { display: flex; gap: 14px; align-items: flex-start; }
.order-success-step-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1.5; }
.order-success-step-title { font-weight: 700; color: var(--color-primary); display: block; margin-bottom: 4px; }
.order-success-step-body { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }
.order-success-closing {
  font-style: italic; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.6;
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-border);
}
.order-summary-included { margin: 4px 0 0; padding: 0 0 0 4px; }
.order-summary-included li { font-size: 0.78rem; color: var(--color-text-muted); list-style: none; padding: 2px 0; }
.order-summary-included-note {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border);
  font-size: 0.76rem; color: var(--color-text-muted); line-height: 1.5;
}
.order-summary-included-note strong { color: var(--color-text); }

/* ---- Numbered FAQ (start.html only) -- reuses the sitewide .faq-list/
   .faq-item/.faq-question accordion as-is (same markup, same JS in
   faq.js), just adds a blue "01/02/03..." numeral in front of each
   question via a CSS counter. Scoped to .start-faq so every other page's
   FAQ preview keeps its plain, unnumbered look. */
.start-faq { counter-reset: startfaq; }
.start-faq .faq-question > span:first-child::before {
  counter-increment: startfaq; content: counter(startfaq, decimal-leading-zero) "  ";
  font-weight: 800; color: var(--color-secondary);
}

/* ---- company-information.html (Phase 33) -- the wizard step reached
   from start.html's "Get Started". Reuses .compare-layout (already a
   generic 1fr/320px two-column grid) and .order-summary-card as-is;
   everything below is new to this page only. */

.wizard-progress-section { padding: 22px 0 0; }
.wizard-progress { display: flex; align-items: center; gap: 14px; max-width: 640px; }
.wizard-progress-label { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; }
.wizard-progress-track {
  flex: 1; height: 6px; border-radius: 999px; background: var(--color-border); overflow: hidden;
}
/* Width is set inline by company-info-form.js, computed from
   FormationApplication::STEPS -- never a hardcoded percentage. */
.wizard-progress-fill { height: 100%; background: var(--color-secondary); border-radius: 999px; width: 0%; transition: width 0.3s ease; }

.company-info-column { display: flex; flex-direction: column; gap: 20px; }
.info-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: 28px 30px;
}
.info-card h2 { margin: 0 0 18px; font-size: 1.15rem; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }

.company-info-card .form-field label { display: flex; align-items: center; gap: 6px; }
.char-counter { font-weight: 400; color: var(--color-text-muted); text-transform: none; font-size: 0.8rem; }

/* A small, real, keyboard-accessible tooltip -- :hover for a mouse,
   :focus (via tabindex="0" on the wrapper) for keyboard and most mobile
   browsers' tap-to-focus, so this isn't only a desktop-hover affordance. */
.info-tip { position: relative; display: inline-flex; }
.info-tip-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--color-border); color: var(--color-text-muted);
  font-size: 0.68rem; font-style: normal; font-weight: 700; cursor: help;
}
.info-tip-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 5; width: 260px;
  background: var(--color-primary); color: var(--color-text-on-dark); font-size: 0.78rem; font-weight: 400;
  line-height: 1.5; padding: 12px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease;
}
.info-tip:hover .info-tip-bubble, .info-tip:focus .info-tip-bubble, .info-tip:focus-within .info-tip-bubble {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.industry-search-wrap { position: relative; }
.industry-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; max-height: 260px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.industry-results li {
  padding: 9px 10px; border-radius: var(--radius-sm); font-size: 0.88rem; cursor: pointer;
}
.industry-results li:hover, .industry-results li:focus { background: var(--color-surface-alt); }
.industry-results li.industry-result-empty { color: var(--color-text-muted); cursor: default; }
.industry-results li.industry-result-empty:hover { background: none; }

.company-info-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }

/* A plain HTML5 <details>/<summary> disclosure -- genuinely interactive
   with zero JS, matching the site's standing preference for real,
   native controls over decorative ones. */
.additional-explanation details {
  border-bottom: 1px solid var(--color-border); padding: 14px 0;
}
.additional-explanation details:last-child { border-bottom: none; padding-bottom: 0; }
.additional-explanation summary {
  cursor: pointer; font-weight: 600; color: var(--color-text); list-style: none; position: relative; padding-right: 24px;
}
.additional-explanation summary::-webkit-details-marker { display: none; }
.additional-explanation summary::after {
  content: ""; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted);
  transform: translateY(-65%) rotate(45deg); transition: transform 0.15s ease;
}
.additional-explanation details[open] summary::after { transform: translateY(-35%) rotate(-135deg); }
.additional-explanation details p { margin: 10px 0 0; color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.6; }

.order-summary-check { color: var(--color-success); font-weight: 700; }

/* A live preview of the actual Name + Designator combination that will be
   filed with the state -- purely a display convenience, computed in
   company-info-form.js from the same two real field values already being
   validated and saved; it introduces no new data of its own and starts
   hidden until the user has typed a name and picked a designator. */
.name-preview { margin: -8px 0 18px; }
.name-preview-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 8px; }
.name-preview-value {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 0.95rem; font-weight: 700; color: var(--color-primary); word-break: break-word;
}
.name-preview-check { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; }

/* ---- mailing-address.html (Phase 43) -- the "address" wizard step,
   reached right after company-information.html. Reuses .info-card,
   .company-info-actions and the shared .wizard-progress-*/.compare-layout/
   .order-summary-card as-is; everything below is new to this page only.
   No type="radio" component existed anywhere in the frontend before this
   -- built from scratch to match the rest of the site's card language
   rather than any competitor's visual design (phone mockups, colored
   progress bars and promo badges are deliberately not reproduced here --
   see this project's Phase 30 delivery notes for the same structural-
   pattern-yes/visual-copy-no distinction). */
.mailing-address-intro { color: var(--color-text-muted); font-size: 0.92rem; margin: -6px 0 20px; line-height: 1.6; }

/* The 💡 "Pro-Tip" callout above the address-option-group on
   mailing-address.html, nudging a cost-conscious customer toward "I'll
   use my own address" before they see either card. Same visual language
   as .filing-time-notice (surface-alt background, bordered, rounded) so
   it reads as this site's one established "friendly aside" pattern
   rather than a one-off box -- reuse this class for any other static,
   non-JS-rendered tip callout rather than inventing another variant. */
.address-pro-tip {
  margin-bottom: 20px; padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
}
.address-pro-tip p { font-size: 0.85rem; color: var(--color-text); line-height: 1.6; margin: 0; }

.address-option-group { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; }
.address-option-card {
  display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding: 18px 20px; transition: border-color 0.15s ease, background 0.15s ease;
}
.address-option-card:hover { border-color: var(--color-secondary); }
.address-option-card.is-selected { border-color: var(--color-secondary); background: var(--color-surface-alt); }
.address-option-card input[type="radio"] { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-secondary); flex-shrink: 0; cursor: pointer; }
.address-option-body { flex: 1; }
.address-option-title { display: block; font-weight: 700; color: var(--color-primary); font-size: 1rem; }
/* ---- ein.html -- a second line under .address-option-title for when an
   option's own price needs to show inline (e.g. the "Yes" / "No, Foreign
   Owner" SSN/ITIN choice, where each answer carries a different flat
   fee). Generic and reusable like .address-option-card/-title/-body
   themselves -- not ein.html-specific, just first used there. */
.address-option-sub { display: block; font-size: 0.82rem; color: var(--color-text-muted); font-weight: 500; margin-top: 2px; }
.address-option-recommended { font-weight: 600; color: var(--color-success); font-size: 0.85rem; }
.address-option-bullets { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.address-option-bullets li { position: relative; padding-left: 22px; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.4; }
.address-option-bullets li::before {
  content: "\2713"; position: absolute; left: 0; top: 0; color: var(--color-success); font-weight: 700; font-size: 0.85rem;
}

.address-option-detail {
  margin-top: 6px; padding: 18px 20px; border-radius: var(--radius-md);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
}
.address-option-detail p { color: var(--color-text); font-size: 0.88rem; line-height: 1.6; margin: 0 0 12px; }
.address-option-detail p:last-child { margin-bottom: 0; }
.address-option-detail p strong { color: var(--color-primary); }

/* The "I'll Use My Own Address" detail panel's own sub-choice (per explicit
   request) -- reuses .owner-select-list/-item/-icon/-name as-is (see that
   component's own docblock above) for the two mutually-exclusive rows, then
   this one new rule for the real Street/City/State/Zip form
   (mailing-address-form.js's wireAddressSource()) that "Use a different
   address" reveals -- just a top margin so it doesn't crowd the checkbox
   list above it; .form-row/.form-row-3/.form-field/.field-error-inline
   themselves come from forms.css, same as contact-information.html. */
.mailing-different-address { margin-top: 16px; }

/* ---- company-information.html -- the Delaware-only "Ownership
   Information" card (per explicit request, Phase 69's follow-up "design it
   more premium" pass). Everything below is scoped under
   .ownership-disclosure-card/-group so none of it leaks into
   .address-option-card/-group's shared base styles above, which several
   other pages (mailing-address.html, choose-registered-agent.html,
   filing-time.html, ein-information.html) still reuse completely plain.
   The card itself: a soft gradient top accent + a shield-check badge next
   to the heading (echoes the "official state filing" subject matter, not
   invented iconography), a small "Delaware Exclusive" eyebrow label (a
   factual statement -- this card is never shown for any other state, see
   company-info-form.js's own visibility check -- not a persuasive claim),
   and each option row gets its own icon (a document for "included on the
   public filing", an eye-slash for "kept private") plus a more pronounced
   hover/selected elevation than the plain .address-option-card default. */
.ownership-disclosure-card { position: relative; overflow: hidden; }
.ownership-disclosure-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-accent) 100%);
}
.ownership-disclosure-head { display: flex; align-items: flex-start; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); margin-bottom: 16px; }
.ownership-disclosure-badge {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.ownership-disclosure-badge svg { width: 22px; height: 22px; }
.ownership-disclosure-head-text { flex: 1; }
.ownership-disclosure-eyebrow {
  display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-secondary); background: rgba(37, 87, 214, 0.1); border-radius: 999px; padding: 3px 10px; margin-bottom: 8px;
}
.ownership-disclosure-card h2 { margin: 0; padding: 0; border: 0; font-size: 1.1rem; }
.ownership-disclosure-copy { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.65; margin: 0 0 18px; }

.ownership-disclosure-group .address-option-card {
  border-radius: var(--radius-md); padding: 16px 18px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.ownership-disclosure-group .address-option-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ownership-disclosure-group .address-option-card.is-selected { box-shadow: var(--shadow-md); }
.ownership-disclosure-option-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-alt); color: var(--color-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.ownership-disclosure-option-icon svg { width: 18px; height: 18px; }
.address-option-card.is-selected .ownership-disclosure-option-icon { background: var(--color-secondary); color: #fff; }
.ownership-disclosure-group .address-option-title { font-size: 0.94rem; line-height: 1.5; }

/* ---- registered-agent.html -- the "registered_agent" wizard step, reached
   right after mailing-address.html. Reuses the entire .address-option-*
   component above as-is (same "pick one of two cards" pattern, new copy) --
   only two small additions were genuinely new to this page:
   .address-option-price (a neutral-toned counterpart to the existing
   .address-option-recommended, for "$129/year" where that green "savings"
   framing wouldn't fit) and .consent-check (a real, required checkbox next
   to each option's own consent statement -- there was no checkbox
   component anywhere in the frontend before this).
   .registered-agent-state-note (per explicit request) is the "It's a state
   requirement in [State Name]..." line right under the intro -- its own
   bordered callout rather than plain muted text like the intro above it,
   so the real, per-application state name registered-agent-form.js's own
   applyStateName() fills in actually reads as a requirement notice, not
   another sentence of the same generic paragraph. */
.registered-agent-intro { color: var(--color-text-muted); font-size: 0.92rem; margin: -6px 0 10px; line-height: 1.6; }
.registered-agent-state-note {
  font-size: 0.88rem; color: var(--color-primary); line-height: 1.5; margin: 0 0 20px;
  padding: 10px 14px; border-radius: var(--radius-sm); background: var(--color-surface-alt);
  border-left: 3px solid var(--color-secondary);
}
.registered-agent-state-note strong { font-weight: 700; }
.address-option-price { font-weight: 600; color: var(--color-text-muted); font-size: 0.85rem; }

.consent-check { display: flex; gap: 10px; align-items: flex-start; }
.consent-check input[type="checkbox"] {
  margin-top: 3px; width: 18px; height: 18px; accent-color: var(--color-secondary); flex-shrink: 0; cursor: pointer;
}
.consent-check label { font-size: 0.85rem; color: var(--color-text); line-height: 1.5; cursor: pointer; }
/* A link inside a consent statement itself (e.g. order-summary.html's own
   "I agree to the Legal Statement and Cancellation Policy." checkbox) --
   .consent-check label's own color:var(--color-text) would otherwise make
   these read as plain, unclickable copy, so they're called out in the same
   link color/weight the rest of the site already uses (.review-edit-link,
   the dropdown-nav links' :hover state, etc.), underlined so they're
   recognizable as links even without a hover, per explicit request. */
.consent-check label a { color: var(--color-secondary); font-weight: 600; text-decoration: underline; }
.consent-check label a:hover { color: var(--color-secondary-dark); }

/* ---- filing-time.html -- the "filing_speed" wizard step, reached right
   after choose-registered-agent.html. Reuses .address-option-card/-group/
   -body/-title/-price as-is (this page's option cards are built entirely
   in JS since the real count/content genuinely varies by state -- see
   filing-time-form.js). New here: .filing-time-check (a plain checkmark
   in place of a radio, for the single-auto-selected-option states),
   .filing-time-fast-badge (an orange "FAST" pill for the expedited
   option, distinct from the green .address-option-recommended used
   elsewhere for a savings framing), .filing-time-date (the computed
   Estimated Formation Date line), .filing-time-disclaimer (the small
   "estimations, subject to change" footnote every variant shows), and
   .filing-time-notice (the "Absolute Honesty Check" / "Absolute State Fee
   Guarantee" callout box -- 3 real variants driven by state data, plus a
   plain, unbranded 4th for a state with no expedited data on file at
   all). */
.filing-time-check {
  margin-top: 3px; width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px;
  background: var(--color-success); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700;
}
.filing-time-fast-badge {
  display: inline-block; background: #f97316; color: #fff; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; margin-right: 8px;
  vertical-align: middle;
}
.filing-time-date { margin: 8px 0 0; font-size: 0.85rem; color: var(--color-text-muted); }
.filing-time-date strong { color: var(--color-primary); }
.filing-time-disclaimer { font-size: 0.76rem; color: var(--color-text-muted); margin: 10px 0 0; font-style: italic; }

.filing-time-notice {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
}
.filing-time-notice p { font-size: 0.85rem; color: var(--color-text); line-height: 1.6; margin: 0 0 10px; }
.filing-time-notice p:last-child { margin-bottom: 0; }
.filing-time-notice-head { font-weight: 700; color: var(--color-primary); margin-bottom: 6px !important; }
.filing-time-notice-warn { color: #b45309; }
.filing-time-notice-neutral { background: var(--color-surface); }
.filing-time-notice-neutral p { color: var(--color-text-muted); font-style: italic; }

/* ---- corporate-stock.html -- the "corporate_stock" wizard step, reached
   right after owners.html for a C-Corp application only (per explicit
   request -- see FormationApplication::requiresCorporateStockSetup()).
   Reuses .info-card/.company-info-card, .registered-agent-intro (the same
   intro-paragraph spacing choose-registered-agent.html's own intro uses),
   .address-pro-tip (the same 💡 Pro-Tip callout mailing-address.html
   already established -- see that class's own docblock above), and
   .form-row-3/.form-field/.field-error-inline (forms.css) for the three
   fields themselves. New to this page only: the Ohio/Missouri advisory
   notice below. */
.corporate-stock-state-warning {
  margin: -4px 0 18px; padding: 12px 16px; border-radius: var(--radius-sm);
  background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid #b45309;
  font-size: 0.85rem; color: #92400e; line-height: 1.55;
}

/* ---- ein-information.html -- the "ein" wizard step, reached right after
   owners.html. Reuses .address-option-card/-group/-body/-title (the Yes/No
   foreign-individual question and the SSN/ITIN identification-type choice,
   both compact two-up pairs nested in a .form-row instead of the full-width
   stacked .address-option-group the earlier registered-agent/mailing-address
   steps use -- see ein-form.js's own docblock), .consent-check (the two
   mutually-exclusive IRS Contact Address checkboxes), .form-status-banner
   .success (the Virtual Address note, same "hidden until real, not filled
   with a placeholder" pattern owners.html's own per-owner note uses), and
   .additional-explanation's <details> styling (the "why do you need this"
   SSN disclosure). New to this page only: .owner-select-list/-item (the
   Responsible Party checkbox list, built from this same application's
   already-listed owners.html names) and .ein-note-list (the plain,
   non-checkmarked IRS Contact Address bullets -- deliberately distinct from
   .address-option-bullets' green checkmarks, since these are cautionary
   notes, not a list of benefits). .owner-select-list/-item/-icon/-name are
   also reused by owners.html itself, per explicit request, for each
   owner row's own "same as Contact Information" (name and address, now two
   separate icon+label rows instead of one merged sentence) and "use the
   assigned company address" checkboxes -- see owners-form.js's own
   docblock. */
.owner-select-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.owner-select-item {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 10px 14px; transition: border-color 0.15s ease, background 0.15s ease;
}
.owner-select-item:hover { border-color: var(--color-secondary); }
.owner-select-item.is-selected { border-color: var(--color-secondary); background: var(--color-surface-alt); }
.owner-select-item input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--color-secondary); flex-shrink: 0; cursor: pointer;
}
.owner-select-icon {
  width: 26px; height: 26px; border-radius: 50%; background: var(--color-surface-alt);
  display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); flex-shrink: 0;
}
.owner-select-icon svg { width: 14px; height: 14px; }
.owner-select-name { font-size: 0.9rem; font-weight: 600; color: var(--color-text); }

.ein-note-list { margin: 12px 0 20px; padding: 0; list-style: none; }
.ein-note-list li {
  position: relative; padding-left: 18px; margin-bottom: 7px;
  font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.55;
}
.ein-note-list li:last-child { margin-bottom: 0; }
.ein-note-list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--color-text-muted);
}

/* ---- order-summary.html (this phase) -- the "review" wizard step, reached
   right after ein-information.html. Reuses .info-card/.company-info-column/
   .compare-layout/.order-summary-card as-is, the same shared frame every
   earlier wizard step already uses -- but unlike those steps' single
   .info-card, this page renders one .info-card per section (Formation
   Info, Contact Info, Agent Info, Company Info, Company Address & Contact
   Address, Member Info, EIN/Tax Info), since each has its own "Edit" link
   back to a different earlier step. Everything below is new to this page
   only. */
.review-pill {
  display: inline-block; background: var(--color-surface-alt); color: var(--color-primary);
  font-weight: 700; font-size: 0.95rem; padding: 10px 20px; border-radius: 999px; margin: 0 0 4px;
}
.review-card-header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--color-border);
}
.review-card-header h2 { margin: 0; padding: 0; border: none; font-size: 1.05rem; }
.review-edit-link { font-weight: 700; font-size: 0.85rem; color: var(--color-secondary); white-space: nowrap; flex-shrink: 0; }
.review-row { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; font-size: 0.9rem; }
.review-row-label { color: var(--color-text-muted); min-width: 170px; flex-shrink: 0; }
.review-row-value { color: var(--color-text); font-weight: 600; }
/* One sub-card per owner inside the Member Info card -- distinct from the
   page-level .info-card so it reads as "one of several" rather than its
   own top-level section. */
.review-member-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 16px 18px; margin-bottom: 12px;
}
.review-member-card:last-child { margin-bottom: 0; }
.review-member-name { font-weight: 700; color: var(--color-primary); margin: 0 0 8px; }
.review-note { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.55; margin-top: 10px; }
.review-empty { font-size: 0.88rem; color: var(--color-text-muted); font-style: italic; }

/* ---- s-corp-election.html -- the "s_corp_election" wizard step, reached
   right after ein-information.html (or, for a C-Corp application with no
   Federal EIN, right after corporate-stock.html), C-Corp only -- per
   explicit request (see FormationApplication::offersSCorpElection()).
   Reuses .info-card/.company-info-card, .registered-agent-intro (the same
   intro-paragraph spacing choose-registered-agent.html's own intro uses),
   .optional-label (forms.css -- the "(Optional)" suffix on this page's own
   heading), and .address-option-group/-card/-body/-title (the stacked,
   full-width Yes/No pair -- same layout choose-registered-agent.html's own
   two options use, not ein-information.html's compact two-up pair, since
   this is a single priced either/or choice with its own real consequence,
   not a quick compact toggle). New to this page only: the IRS filing-
   deadline warning below -- visually similar to corporate-stock.html's own
   .corporate-stock-state-warning (same amber advisory-box treatment) but
   its own class, since that one is a per-page-named class by this
   project's own convention (see that class's own docblock) and this
   warning is a hard statutory deadline, not a save-money suggestion. */
.scorp-deadline-warning {
  margin: 14px 0 18px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: #fffbeb; border: 1px solid #fde68a; border-left: 3px solid #b45309;
  font-size: 0.85rem; color: #92400e; line-height: 1.6; font-weight: 600;
}

/* ---- dissolution.html -- the "Initiate Official Business Closure"
   conversion box, placed just below the hero. A real, functional lead
   box (dissolution-widget.js), not a static mockup: the state select is
   live API data, the LLC/C-Corp choice reuses .address-option-card/
   .form-row exactly as ein-information.html's own compact two-up pair
   does (see that class's own docblock), and the flat-fee line below
   reuses the sitewide [data-service-price] mechanism (service-price.js)
   so it always shows the service's real current price rather than a
   number fixed in markup. Framed as one surface card -- .picker-card's
   same surface/border/radius/shadow recipe, just with left-aligned,
   roomier padding since this holds a stacked form rather than a single
   centered select. */
.closure-widget {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 36px 32px;
}
.closure-widget-head { margin-bottom: 22px; }
.closure-widget-head h2 { margin: 0; }
.closure-widget .address-option-card { margin: 0; }
.closure-widget-fee {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 22px 0; padding: 16px 18px;
  background: var(--color-surface-alt); border-radius: var(--radius-md);
}
.closure-widget-fee-label { font-weight: 700; color: var(--color-text); }
.closure-widget-fee .amount { font-weight: 800; color: var(--color-primary); font-size: 1.1rem; }
.closure-widget-fee-note { font-size: 0.85rem; color: var(--color-text-muted); width: 100%; }

/* ---- dissolution.html -- a "make it premium" pass, not a redesign: hover
   lift on every surface card, a gradient top accent on the closure widget
   (same accent-strip language this project already uses for its other
   "distinguished" cards), a warmer FAQ hover state, and a soft ambient glow
   behind the hero's floating document mockup. No new imagery -- gradients
   and motion only, consistent with this site's existing "abstract visuals,
   not stock photography" rule. Card/step/FAQ hover rules are scoped to
   .page-dissolution so no other page's plain .card/.faq-question/
   .step-item picks up this behavior; .closure-widget and .hero-mockup-card
   are already unique to this page, so they're styled unscoped. */
.page-dissolution .card,
.page-dissolution .step-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-dissolution .card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.page-dissolution .step-item:hover .step-number { background: var(--color-accent); color: #fff; }
.page-dissolution .faq-question { transition: color 0.15s ease; }
.page-dissolution .faq-question:hover { color: var(--color-secondary); }
@media (prefers-reduced-motion: reduce) {
  .page-dissolution .card,
  .page-dissolution .step-item { transition: none; }
}

.closure-widget { position: relative; overflow: hidden; transition: box-shadow 0.2s ease; }
.closure-widget::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
}
.closure-widget:focus-within { box-shadow: var(--shadow-lg); }

.hero-mockup-card { position: relative; z-index: 1; }
.page-dissolution .hero-visual { position: relative; }
.page-dissolution .hero-visual::before {
  content: ""; position: absolute; width: 380px; height: 380px; max-width: 90%;
  background: radial-gradient(circle, rgba(37, 87, 214, 0.45) 0%, rgba(37, 87, 214, 0) 70%);
  filter: blur(8px); z-index: 0;
}

/* ---- dissolution.html -- "HOW THE CLOSING PROCESS WORKS" section
   refinement. Scoped to .closing-process-steps (added alongside the
   shared .steps-grid class on just this section's grid, not touching
   .step-number/.step-item/.steps-grid themselves, which 20+ other pages'
   own "how it works" steps also rely on as-is).
   This also fixes a real contrast bug, not just a style preference:
   .step-number's circle is background: var(--color-surface-alt), and
   this section itself sits on a .section-alt (= var(--color-surface-alt))
   backdrop -- so the circle was rendering perfectly invisible, leaving a
   bare floating number with no badge (visible in the reported
   screenshot). Replaced with a gradient badge -- the same gradient-badge
   language this project already uses elsewhere (e.g. annual-report.html's
   .picker-card-graphic-badge) -- plus a thin connecting line through the
   three badges, the standard "process timeline" treatment. Desktop only,
   hidden below the same 860px breakpoint .steps-grid itself already
   collapses to one column at. */
.closing-process-steps { position: relative; }
.closing-process-steps::before {
  content: "";
  position: absolute; top: 30px; left: 16.6667%; right: 16.6667%; height: 2px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  opacity: 0.35; z-index: 0;
}
.closing-process-steps .step-item { position: relative; z-index: 1; }
.closing-process-steps .step-number {
  width: 60px; height: 60px; font-size: 1.2rem; color: #fff;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  box-shadow: 0 10px 24px rgba(37, 87, 214, 0.28);
  margin-bottom: 22px;
}
.closing-process-steps .step-item h3 { font-size: 1.1rem; }
.closing-process-steps .step-item p { line-height: 1.65; }
@media (max-width: 860px) {
  .closing-process-steps::before { display: none; }
}

/* ---- registered-agent.html -- the "Secure Your Certified Registered
   Agent" conversion box, placed just below the hero. Same recipe as
   dissolution.html's .closure-widget (gradient top accent, surface/
   border/radius/shadow card, focus-within lift, a dedicated -fee row
   reusing the sitewide [data-service-price] live-price mechanism), given
   its own class name since this is now a repeating pattern across
   service pages -- .conversion-widget is the generic name a third page
   should reach for too, rather than another one-off. */
.conversion-widget {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 36px 32px; position: relative; overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.conversion-widget::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
}
.conversion-widget:focus-within { box-shadow: var(--shadow-lg); }
.conversion-widget-head { margin-bottom: 22px; }
.conversion-widget-head h2 { margin: 0; }
.conversion-widget .address-option-card { margin: 0; }
.conversion-widget-fee {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin: 22px 0; padding: 16px 18px;
  background: var(--color-surface-alt); border-radius: var(--radius-md);
}
.conversion-widget-fee-label { font-weight: 700; color: var(--color-text); }
.conversion-widget-fee .amount { font-weight: 800; color: var(--color-primary); font-size: 1.1rem; }
.conversion-widget-fee-note { font-size: 0.85rem; color: var(--color-text-muted); }

/* ---- registered-agent.html -- "HOW THE SERVICE OPERATES" section.
   Identical refinement to dissolution.html's .closing-process-steps
   (gradient badge + connecting line, instead of .step-number's plain
   circle, which is invisible on a .section-alt backdrop since both
   share the same background color -- see that class's own docblock for
   the full explanation). Kept as its own class rather than renaming
   .closing-process-steps to something shared, since dissolution.html's
   copy already works and isn't worth the cross-file risk of touching;
   a future third page can standardize on one shared name then. */
.agent-process-steps { position: relative; }
.agent-process-steps::before {
  content: "";
  position: absolute; top: 30px; left: 16.6667%; right: 16.6667%; height: 2px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  opacity: 0.35; z-index: 0;
}
.agent-process-steps .step-item { position: relative; z-index: 1; }
.agent-process-steps .step-number {
  width: 60px; height: 60px; font-size: 1.2rem; color: #fff;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  box-shadow: 0 10px 24px rgba(37, 87, 214, 0.28);
  margin-bottom: 22px;
}
.agent-process-steps .step-item h3 { font-size: 1.1rem; }
.agent-process-steps .step-item p { line-height: 1.65; }
@media (max-width: 860px) {
  .agent-process-steps::before { display: none; }
}

/* ---- registered-agent.html -- full-page premium pass. Upgrades the
   "Three Promises" cards' .card-icon from the shared flat light-blue
   square (used as-is on 20+ other pages, so left alone there) to a
   gradient badge matching this project's existing gradient-badge
   language (e.g. annual-report.html's .picker-card-graphic-badge),
   scoped to .protection-promises so no other page's .card-icon changes.
   The rest (hover-lift on every card/step, FAQ hover color, hero glow
   behind the floating mockup) mirrors dissolution.html's own premium
   pass line for line, scoped to .page-registered-agent so nothing
   bleeds into other pages sharing these same base classes. */
.protection-promises .card-icon {
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  color: #fff; box-shadow: 0 10px 22px rgba(37, 87, 214, 0.25);
}
.page-registered-agent .card,
.page-registered-agent .package-item,
.page-registered-agent .step-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-registered-agent .card:hover,
.page-registered-agent .package-item:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.page-registered-agent .step-item:hover .step-number { transform: scale(1.06); box-shadow: 0 14px 30px rgba(37, 87, 214, 0.35); }
.page-registered-agent .step-number { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.page-registered-agent .faq-question { transition: color 0.15s ease; }
.page-registered-agent .faq-question:hover { color: var(--color-secondary); }
@media (prefers-reduced-motion: reduce) {
  .page-registered-agent .card,
  .page-registered-agent .package-item,
  .page-registered-agent .step-item { transition: none; }
}

.page-registered-agent .hero-visual { position: relative; }
.page-registered-agent .hero-visual::before {
  content: ""; position: absolute; width: 380px; height: 380px; max-width: 90%;
  background: radial-gradient(circle, rgba(37, 87, 214, 0.45) 0%, rgba(37, 87, 214, 0) 70%);
  filter: blur(8px); z-index: 0;
}
.page-registered-agent .hero-mockup-card { position: relative; z-index: 1; }

/* ---- reinstatement.html -- "HOW THE REVIVAL PROCESS OPERATES" section.
   Third use of the gradient-badge + connecting-line "process timeline"
   treatment (see .closing-process-steps's own docblock for why
   .step-number's plain circle is invisible on a .section-alt backdrop).
   Given its own class rather than a shared one, matching this project's
   established per-page-class precedent for this recipe. */
.revival-process-steps { position: relative; }
.revival-process-steps::before {
  content: "";
  position: absolute; top: 30px; left: 16.6667%; right: 16.6667%; height: 2px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  opacity: 0.35; z-index: 0;
}
.revival-process-steps .step-item { position: relative; z-index: 1; }
.revival-process-steps .step-number {
  width: 60px; height: 60px; font-size: 1.2rem; color: #fff;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  box-shadow: 0 10px 24px rgba(37, 87, 214, 0.28);
  margin-bottom: 22px;
}
.revival-process-steps .step-item h3 { font-size: 1.1rem; }
.revival-process-steps .step-item p { line-height: 1.65; }
@media (max-width: 860px) {
  .revival-process-steps::before { display: none; }
}

/* ---- reinstatement.html -- full-page premium pass, same recipe as
   dissolution.html / registered-agent.html's own passes: hover lift on
   every card/package/step, a warmer FAQ hover color, and a soft ambient
   glow behind the hero's floating mockup card. .conversion-widget is
   already reused as-is (it's the generic name a third page was meant to
   reach for), so it needs no new CSS here. */
.page-reinstatement .card,
.page-reinstatement .step-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-reinstatement .card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.page-reinstatement .step-item:hover .step-number { transform: scale(1.06); box-shadow: 0 14px 30px rgba(37, 87, 214, 0.35); }
.page-reinstatement .step-number { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.page-reinstatement .faq-question { transition: color 0.15s ease; }
.page-reinstatement .faq-question:hover { color: var(--color-secondary); }
@media (prefers-reduced-motion: reduce) {
  .page-reinstatement .card,
  .page-reinstatement .step-item { transition: none; }
}

.page-reinstatement .hero-visual { position: relative; }
.page-reinstatement .hero-visual::before {
  content: ""; position: absolute; width: 380px; height: 380px; max-width: 90%;
  background: radial-gradient(circle, rgba(37, 87, 214, 0.45) 0%, rgba(37, 87, 214, 0) 70%);
  filter: blur(8px); z-index: 0;
}
.page-reinstatement .hero-mockup-card { position: relative; z-index: 1; }

/* ---- ein.html -- "HOW THE EIN APPLICATION PROCESS OPERATES" section.
   Fourth use of the gradient-badge + connecting-line "process timeline"
   treatment (see .closing-process-steps's own docblock for why
   .step-number's plain circle is invisible on a .section-alt backdrop --
   this section sits on one). Given its own class, matching this
   project's established per-page-class precedent for this recipe. */
.ein-process-steps { position: relative; }
.ein-process-steps::before {
  content: "";
  position: absolute; top: 30px; left: 16.6667%; right: 16.6667%; height: 2px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  opacity: 0.35; z-index: 0;
}
.ein-process-steps .step-item { position: relative; z-index: 1; }
.ein-process-steps .step-number {
  width: 60px; height: 60px; font-size: 1.2rem; color: #fff;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  box-shadow: 0 10px 24px rgba(37, 87, 214, 0.28);
  margin-bottom: 22px;
}
.ein-process-steps .step-item h3 { font-size: 1.1rem; }
.ein-process-steps .step-item p { line-height: 1.65; }
@media (max-width: 860px) {
  .ein-process-steps::before { display: none; }
}

/* ---- ein.html -- full-page premium pass, same recipe as the other
   service pages' own passes: hover lift on every card/step, a warmer
   FAQ hover color, and a soft ambient glow behind the hero's floating
   mockup card. .conversion-widget is already reused as-is, so it needs
   no new CSS here. */
.page-ein .card,
.page-ein .step-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-ein .card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.page-ein .step-item:hover .step-number { transform: scale(1.06); box-shadow: 0 14px 30px rgba(37, 87, 214, 0.35); }
.page-ein .step-number { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.page-ein .faq-question { transition: color 0.15s ease; }
.page-ein .faq-question:hover { color: var(--color-secondary); }
@media (prefers-reduced-motion: reduce) {
  .page-ein .card,
  .page-ein .step-item { transition: none; }
}

.page-ein .hero-visual { position: relative; }
.page-ein .hero-visual::before {
  content: ""; position: absolute; width: 380px; height: 380px; max-width: 90%;
  background: radial-gradient(circle, rgba(37, 87, 214, 0.45) 0%, rgba(37, 87, 214, 0) 70%);
  filter: blur(8px); z-index: 0;
}
.page-ein .hero-mockup-card { position: relative; z-index: 1; }

/* ---- virtual-address.html -- "HOW THE ADDRESS SETUP OPERATES" section.
   Fifth use of the gradient-badge + connecting-line "process timeline"
   treatment (see .closing-process-steps's own docblock for why
   .step-number's plain circle is invisible on a .section-alt backdrop --
   this section sits on one). Given its own class, matching this
   project's established per-page-class precedent for this recipe. */
.address-setup-steps { position: relative; }
.address-setup-steps::before {
  content: "";
  position: absolute; top: 30px; left: 16.6667%; right: 16.6667%; height: 2px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  opacity: 0.35; z-index: 0;
}
.address-setup-steps .step-item { position: relative; z-index: 1; }
.address-setup-steps .step-number {
  width: 60px; height: 60px; font-size: 1.2rem; color: #fff;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  box-shadow: 0 10px 24px rgba(37, 87, 214, 0.28);
  margin-bottom: 22px;
}
.address-setup-steps .step-item h3 { font-size: 1.1rem; }
.address-setup-steps .step-item p { line-height: 1.65; }
@media (max-width: 860px) {
  .address-setup-steps::before { display: none; }
}

/* ---- virtual-address.html -- full-page premium pass, same recipe as
   the other service pages' own passes: hover lift on every
   card/package/step, a warmer FAQ hover color, and a soft ambient glow
   behind the hero's floating mockup card. .conversion-widget is already
   reused as-is, so it needs no new CSS here. */
.page-virtual-address .card,
.page-virtual-address .package-item,
.page-virtual-address .step-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-virtual-address .card:hover,
.page-virtual-address .package-item:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.page-virtual-address .step-item:hover .step-number { transform: scale(1.06); box-shadow: 0 14px 30px rgba(37, 87, 214, 0.35); }
.page-virtual-address .step-number { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.page-virtual-address .faq-question { transition: color 0.15s ease; }
.page-virtual-address .faq-question:hover { color: var(--color-secondary); }
@media (prefers-reduced-motion: reduce) {
  .page-virtual-address .card,
  .page-virtual-address .package-item,
  .page-virtual-address .step-item { transition: none; }
}

.page-virtual-address .hero-visual { position: relative; }
.page-virtual-address .hero-visual::before {
  content: ""; position: absolute; width: 380px; height: 380px; max-width: 90%;
  background: radial-gradient(circle, rgba(37, 87, 214, 0.45) 0%, rgba(37, 87, 214, 0) 70%);
  filter: blur(8px); z-index: 0;
}
.page-virtual-address .hero-mockup-card { position: relative; z-index: 1; }

/* ---- compare-business-structures.html -- "THE 6-POINT COMPLETE
   STRUCTURAL MATRIX" table. Scoped to .structural-matrix (added
   alongside the shared .compare-table class on just this table) so the
   alternating white/soft-grey row tints don't touch the bare
   .compare-table markup other pages still use as-is. Hover state
   already comes from .compare-table tbody tr:hover -- this only adds
   the zebra striping the brief asked for. */
.structural-matrix tbody tr:nth-child(even) td,
.structural-matrix tbody tr:nth-child(even) th[scope="row"] {
  background: var(--color-surface-alt);
}
.structural-matrix th[scope="row"] { white-space: normal; min-width: 200px; }

/* ---- "make the table look more premium" follow-up on the same matrix:
   gradient header (replacing the flat .compare-table thead th background
   just for this table), icon-over-label header layout, and a small
   gradient number badge on each row label reusing the .step-number
   gradient-badge language already established on the process-step
   sections (revival/ein/address-setup). Elevates the wrap shadow and
   adds a subtle divider between the LLC and C-Corp columns. Still
   scoped to .structural-matrix so the plain .compare-table markup other
   pages use is untouched. */
.structural-matrix-wrap { box-shadow: var(--shadow-lg); }
.structural-matrix thead th {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  border-top: none;
  padding: 22px 20px;
}
.structural-matrix thead th:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.structural-matrix thead th:nth-child(3) { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.structural-matrix-icon { display: block; font-size: 1.6rem; line-height: 1; margin-bottom: 6px; }
.structural-matrix-label { display: block; font-weight: 800; letter-spacing: 0.01em; }
.structural-matrix th[scope="row"] {
  display: flex; align-items: center; gap: 12px;
}
.structural-matrix-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  font-size: 0.82rem; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, var(--color-secondary), var(--color-accent));
  box-shadow: 0 6px 14px rgba(37, 87, 214, 0.3);
}
.structural-matrix td:nth-child(2) { border-left: 1px solid var(--color-border); }
.structural-matrix td:nth-child(3) { border-left: 1px solid var(--color-border); }

/* ---- compare-business-structures.html -- full-page premium pass, same
   recipe as the other resource/service pages: hover lift on every card,
   a warmer FAQ hover color. No hero mockup card on this page, so no
   hero-glow rule is needed here. */
.page-compare-structures .card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.page-compare-structures .card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.page-compare-structures .faq-question { transition: color 0.15s ease; }
.page-compare-structures .faq-question:hover { color: var(--color-secondary); }
@media (prefers-reduced-motion: reduce) {
  .page-compare-structures .card { transition: none; }
}