/**
 * premium-polish-1602280.css
 * Task #1602280 — 10/10 Premium Visual Polish: Fortune 500 Grade Perfection
 *
 * Loads right before armor zone (layout-head.ejs) for high cascade priority.
 * Builds on top of pro-visual-overhaul-1589907.css foundations.
 *
 * Sections:
 *   1. Typography Refinements — text-wrap balance, font features, orphan prevention
 *   2. Spacing & Rhythm — section alternation, container consistency, grid gaps
 *   3. Card System — elevation hierarchy, consistent hover states, radius enforcement
 *   4. Button System — pressed states, focus-visible, spring transitions
 *   5. Form Polish — refined inputs, consistent placeholder, focus glow
 *   6. Badge/Pill Polish — optical size corrections, spacing
 *   7. Navigation Polish — backdrop blur, scroll shadow, link hover underlines
 *   8. Footer Polish — column alignment, link hover, bottom spacing
 *   9. Animation & Micro-Interactions — GPU-composited, purposeful motion
 *  10. Shadows & Depth — unified shadow scale (3 tiers)
 *  11. Pricing Page — card height equalization, toggle refinements
 *  12. Settlement Detail — sidebar spacing, hero image treatment
 *  13. Homepage — hero polish, stats bar, category cards
 *  14. Auth Pages — centered card, branded input focus
 *  15. Content Pages — prose readability, heading anchors
 *  16. 404 Page — premium treatment
 *  17. Mobile Refinements (≤768px) — compact spacing, safe-area, touch targets
 *  18. Desktop Refinements (≥1024px) — max-width, balanced grids
 *  19. Tablet (769px–1023px) — transitional layout
 *  20. Print — clean print output
 */

/* ══════════════════════════════════════════════════════════════
   1. TYPOGRAPHY REFINEMENTS
   Text-wrap balance prevents orphaned single words in headings.
   OpenType features enable proper numeral rendering.
   ══════════════════════════════════════════════════════════════ */

/* Balanced text wrap on headings — prevents orphaned words */
h1, h2, h3, .h1, .h2, .h3,
.hp-hero__headline,
.section-heading,
.section-title,
.pr-hero h1,
.ab4 h1,
.e404-head h1 {
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: normal;
}

/* OpenType features for professional numeral rendering */
body {
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
}

/* Tabular numbers in data contexts — prices, stats, counters */
.stat-value,
.counter-value,
.pr-price-num,
.hp-stat-value,
[class*="stat-number"],
[class*="stats__value"],
[class*="payout"],
[class*="price"],
.e404-sc-payout,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'kern' 1, 'tnum' 1;
}

/* Oldstyle figures for prose — more elegant in body text */
.prose p,
.article-body p,
.blog-content p,
.ab4-body p {
  font-variant-numeric: oldstyle-nums;
}

/* Tighter tracking on large display text */
.hp-hero__headline {
  letter-spacing: -0.035em;
}

/* Slightly looser tracking on small caps / eyebrows */
.hp-hero__eyebrow,
.pr-hero .eyebrow,
[class*="__eyebrow"] {
  letter-spacing: 0.1em;
}

/* Selection color — brand-consistent highlight */
::selection {
  background: rgba(0, 135, 90, 0.15);
  color: #0A0A0A;
}

/* Task #1610452: heading font-size transition REMOVED — zero decorative motion */

/* ══════════════════════════════════════════════════════════════
   2. SPACING & RHYTHM
   Standardized section padding. Alternating backgrounds.
   Container max-width consistency. Breathing room.
   ══════════════════════════════════════════════════════════════ */

/* Section alternation: every even section gets subtle gray-50 background */
main#main-content > section:nth-child(even):not([class*="streak"]):not([class*="leaderboard"]):not(.hp-hero):not([class*="closing"]):not([style*="background"]) {
  background-color: #F9FAFB;
}

/* Consistent section vertical rhythm */
main#main-content > section {
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Hero sections get more generous spacing */
.hp-hero,
.pr-hero,
.dir-hero,
.ch2-hero,
[class*="-hero"] {
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* Consistent container widths */
.container,
[class*="__inner"],
[class*="-inner"],
.hp-hero__inner,
.pr-plans-grid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Content containers: narrower for readability */
.ab4-inner,
.content-inner,
.prose-container {
  max-width: 840px;
}

/* Wide containers: for grids and multi-column */
.ab4-inner--wide,
.pr-plans-grid,
.dir-grid-section {
  max-width: 1200px;
}

/* Dividers between sections: subtle, consistent */
.sr-divider,
.ab4-divider,
hr:not([class]) {
  border: none;
  border-top: 1px solid #E5E7EB;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   3. CARD SYSTEM — Elevation Hierarchy
   Level 0: flush (no shadow) — inline elements
   Level 1: resting — cards, panels
   Level 2: hover — interactive cards
   Level 3: floating — modals, dropdowns, popovers
   ══════════════════════════════════════════════════════════════ */

/* Level 1 — Resting cards */
.card,
.sr-card,
.hp-card,
.settlement-card,
.sr-settlement-card,
.sp-card,
.pr-card,
.e404-game-card,
.e404-settlement-card,
.e404-email-card,
.e404-pro-card,
.sr-auth-card,
.ch2-card,
[class*="testimonial-card"] {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  /* Task #1610452: card transitions stripped */
  overflow: hidden;
}

/* Task #1610452: card hover transforms REMOVED — zero decorative motion */

/* Level 3 — Floating (modals, dropdowns) */
#srPaywallModal > div,
.sr-modal-content,
.dropdown-menu,
[class*="popover"],
[class*="tooltip-content"] {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
}

/* Cards: no border-radius inconsistency — enforce 12px everywhere */
.card img:first-child,
.sr-card img:first-child,
[class*="card"] > img:first-child {
  border-radius: 12px 12px 0 0;
}

/* Card padding: standardized */
.card > :not(img):not(picture),
.sr-card > :not(img):not(picture) {
  padding-left: 24px;
  padding-right: 24px;
}

/* Task #1610452: pricing card transitions stripped */

/* ══════════════════════════════════════════════════════════════
   4. BUTTON SYSTEM — Spring Transitions & Pressed States
   ══════════════════════════════════════════════════════════════ */

/* Task #1610452: button transitions + pressed-state transforms REMOVED — zero decorative motion */
.btn,
[class*="btn-"],
button.btn,
.pr-cta,
.e404-btn-primary,
.e404-btn-secondary,
.sr-btn,
.sr-btn-primary,
.sr-btn-full {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Focus-visible — keyboard-only focus ring (not mouse click) */
.btn:focus-visible,
[class*="btn-"]:focus-visible,
.pr-cta:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #00875A;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 135, 90, 0.15);
}

/* Remove default focus outline for mouse users */
.btn:focus:not(:focus-visible),
[class*="btn-"]:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Primary button: emerald with subtle inner glow */
.btn-primary,
.btn-cta,
.sr-btn-primary,
.pr-cta,
.e404-btn-primary {
  position: relative;
}

.btn-primary:hover,
.btn-cta:hover,
.sr-btn-primary:hover,
.pr-cta:hover,
.e404-btn-primary:hover {
  box-shadow: 0 4px 14px rgba(0, 135, 90, 0.3);
}

/* Secondary button hover */
.btn-secondary:hover,
.sr-btn-secondary:hover,
.e404-btn-secondary:hover {
  background-color: #F0FBF6;
  border-color: #00875A;
}

/* Ghost button hover */
.btn-ghost:hover {
  background-color: #F3F4F6;
}

/* Disabled buttons */
.btn[disabled],
[class*="btn-"][disabled],
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   5. FORM POLISH
   Refined inputs with brand-consistent focus states.
   ══════════════════════════════════════════════════════════════ */

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
  color: #9CA3AF;
  opacity: 1;
  font-weight: 400;
}

/* Input hover state */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
textarea:hover,
select:hover {
  border-color: #9CA3AF;
}

/* Search inputs: icon alignment */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

/* Autofill: preserve white background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  -webkit-text-fill-color: #1F2A37;
  border-color: #D1D5DB;
  transition: background-color 5000s ease-in-out 0s;
}

/* Select dropdown: custom chevron */
select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
}

/* Checkbox / radio refinement */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #00875A;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Label styling */
label,
.sr-label {
  font-weight: 500;
  font-size: 0.9375rem;
  color: #1F2A37;
  margin-bottom: 0.375rem;
  display: block;
}

/* Required indicator */
.sr-label-req {
  color: #DC2626;
  margin-left: 0.15em;
}

/* ══════════════════════════════════════════════════════════════
   6. BADGE / PILL POLISH
   Optical corrections for small text at pill sizes.
   ══════════════════════════════════════════════════════════════ */

.badge,
.pill,
[class*="badge-"],
[class*="pill-"] {
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
}

/* Deadline badges: consistent sizing */
.badge-deadline-red,
.badge-deadline-yellow,
.badge-deadline-green {
  min-width: 60px;
  text-align: center;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   7. NAVIGATION POLISH
   Frosted glass backdrop, scroll shadow, link hover underlines.
   ══════════════════════════════════════════════════════════════ */

/* Task #1610452: nav backdrop-filter, hover underlines, scroll shadow REMOVED — zero decorative motion */

/* ══════════════════════════════════════════════════════════════
   8. FOOTER POLISH
   Even column distribution, link hover, bottom breathing room.
   ══════════════════════════════════════════════════════════════ */

footer a:not([class]) {
  transition: color 0.15s ease, opacity 0.15s ease;
}

footer a:not([class]):hover {
  color: #00875A;
  opacity: 0.85;
}

/* Footer bottom: copyright text */
footer .footer-bottom,
footer .sr-footer__bottom {
  border-top: 1px solid #E5E7EB;
  padding-top: 1.5rem;
  margin-top: 2rem;
}

/* ══════════════════════════════════════════════════════════════
   9. ANIMATION & MICRO-INTERACTIONS
   GPU-composited, respect reduced-motion, purposeful.
   ══════════════════════════════════════════════════════════════ */

/* Task #1610452: ALL animation/motion rules REMOVED from Section 9
   Removed: smooth scroll, sr-fade-up, sr-pulse-dot, image opacity trap,
   modal-enter, toast-enter, shimmer, link hover underline — zero decorative motion */

/* Skeleton loading — static gray, no shimmer */
.skeleton,
[class*="skeleton"] {
  background: #E5E7EB;
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════
   10. SHADOWS & DEPTH — Unified 3-tier Scale
   ══════════════════════════════════════════════════════════════ */

:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* ══════════════════════════════════════════════════════════════
   11. PRICING PAGE
   Card height equalization, toggle refinements, urgency bar.
   ══════════════════════════════════════════════════════════════ */

/* Plans grid: equal-height cards */
.pr-plans-grid {
  display: grid;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 768px) {
  .pr-plans-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Pricing card: flex column for aligned CTAs */
.pr-card {
  display: flex;
  flex-direction: column;
}

.pr-card .pr-features {
  flex: 1;
}

.pr-card .pr-cta {
  margin-top: auto;
}

/* Toggle switch: refined appearance */
.pr-toggle-switch {
  transition: background-color 0.2s ease;
}

/* Save badge: subtle bounce on toggle */
.pr-save-global-badge {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pricing comparison table: clean borders */
.pr-comparison-table th,
.pr-comparison-table td {
  border-bottom: 1px solid #F3F4F6;
  padding: 0.875rem 1rem;
}

.pr-comparison-table th {
  font-weight: 600;
  color: #0A0A0A;
  text-align: left;
}

/* ══════════════════════════════════════════════════════════════
   12. SETTLEMENT DETAIL
   Sidebar spacing, hero image treatment, content readability.
   ══════════════════════════════════════════════════════════════ */

/* Settlement hero image: premium treatment */
.settlement-hero-image,
[class*="settlement-hero"] img {
  border-radius: 12px;
  object-fit: cover;
}

/* Settlement detail content: readable width */
.settlement-detail-content,
.sd-content,
[class*="settlement-body"] {
  max-width: 720px;
  line-height: 1.7;
}

/* Settlement sidebar: consistent card spacing */
.settlement-sidebar .card,
.settlement-sidebar .sr-card,
[class*="sidebar-card"] {
  margin-bottom: 16px;
}

/* Filing button: prominent on settlement detail */
.settlement-file-btn,
[class*="file-claim-btn"] {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   13. HOMEPAGE
   Hero polish, stats bar, category cards, feed cards.
   ══════════════════════════════════════════════════════════════ */

/* Hero: tighter headline with gradient accent */
.hp-hero__headline {
  max-width: 14ch;
  margin-left: auto;
  margin-right: auto;
}

/* Hero sub: readable width */
.hp-hero__sub {
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
  color: #4B5563;
}

/* Stats bar: equal distribution */
.hp-stats__grid,
.sr-stats-bar__inner,
[class*="stats-grid"] {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}

/* Category cards: consistent sizing */
.hp-cat-card,
[class*="category-card"] {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.5rem;
}

/* Category card icon */
.hp-cat-card svg,
[class*="category-card"] svg {
  width: 32px;
  height: 32px;
  color: #00875A;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   14. AUTH PAGES
   Centered card, branded focus, clean form layout.
   ══════════════════════════════════════════════════════════════ */

/* Auth page: centered vertically */
.aup-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 140px);
  padding: 2rem 1rem;
}

/* Auth card: premium treatment */
.sr-auth-card {
  max-width: 420px;
  width: 100%;
  padding: 2.5rem;
  border-radius: 16px;
}

/* Auth tabs: clean underline style */
.aup-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #E5E7EB;
  margin-bottom: 1.5rem;
}

.aup-tab {
  flex: 1;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #6B7280;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.aup-tab.active,
.aup-tab[aria-selected="true"] {
  color: #00875A;
  border-bottom-color: #00875A;
}

.aup-tab:hover:not(.active) {
  color: #374151;
}

/* Auth input: generous sizing */
.sr-input,
.aup-input-pw {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1.5px solid #D1D5DB;
  width: 100%;
  box-sizing: border-box;
}

.sr-input:focus,
.aup-input-pw:focus {
  border-color: #00875A;
  box-shadow: 0 0 0 3px rgba(0, 135, 90, 0.12);
  outline: none;
}

/* Auth logo */
.sr-auth-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.sr-auth-logo-tagline {
  color: #6B7280;
  font-size: 0.875rem;
  margin-top: 0.375rem;
}

/* Error/success banners */
.aup-error,
.aup-success,
.aup-info {
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.aup-error {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

.aup-success {
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}

/* Google Sign-In button: consistent with design */
#gsi-btn-login iframe,
#gsi-btn-signup iframe {
  border-radius: 8px !important;
}

/* ══════════════════════════════════════════════════════════════
   15. CONTENT PAGES — Prose, Guides, About, News
   ══════════════════════════════════════════════════════════════ */

/* Prose: comfortable reading */
.prose,
.content-prose,
.ab4-body,
.article-body,
.blog-content,
.guide-content {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #1F2A37;
}

/* Prose headings: breathing room */
.prose h2,
.ab4-body h2,
.article-body h2,
.blog-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

.prose h3,
.ab4-body h3,
.article-body h3,
.blog-content h3 {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* Prose links: underline with offset */
.prose a:not([class]),
.ab4-body a:not([class]),
.article-body a:not([class]),
.blog-content a:not([class]) {
  color: #00875A;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0, 135, 90, 0.4);
  transition: text-decoration-color 0.15s ease;
}

.prose a:not([class]):hover,
.ab4-body a:not([class]):hover,
.article-body a:not([class]):hover,
.blog-content a:not([class]):hover {
  text-decoration-color: #00875A;
}

/* Blockquotes: styled pull-quote */
blockquote,
.prose blockquote {
  border-left: 3px solid #00875A;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: #F9FAFB;
  border-radius: 0 8px 8px 0;
  color: #374151;
  font-style: italic;
}

/* Lists in prose: proper spacing */
.prose ul,
.prose ol,
.ab4-body ul,
.ab4-body ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.prose li,
.ab4-body li {
  margin-bottom: 0.375rem;
  line-height: 1.7;
}

/* Code blocks in content */
.prose code,
.ab4-body code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.875em;
  background: #F3F4F6;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: #1F2A37;
}

/* ══════════════════════════════════════════════════════════════
   16. 404 PAGE — Premium Treatment
   ══════════════════════════════════════════════════════════════ */

/* 404 wrapper: centered with breathing room */
.e404-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* 404 heading: display treatment */
.e404-head h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  color: #0A0A0A;
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}

/* 404 navigation cards: equal height grid */
.e404-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 2rem 0;
}

.e404-game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.e404-game-emoji {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.e404-game-name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: #0A0A0A;
  margin-bottom: 0.25rem;
}

.e404-game-desc {
  font-size: 0.8125rem;
  color: #6B7280;
  line-height: 1.4;
}

/* 404 search: premium treatment */
.e404-search-wrap {
  max-width: 480px;
  margin: 1.5rem auto;
}

.e404-search-form {
  display: flex;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #E5E7EB;
  background: #FFFFFF;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.e404-search-form:focus-within {
  border-color: #00875A;
  box-shadow: 0 0 0 3px rgba(0, 135, 90, 0.12);
}

.e404-search-input {
  flex: 1;
  border: none;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  outline: none;
  background: transparent;
}

.e404-search-btn {
  padding: 0.75rem 1.25rem;
  background: #00875A;
  color: #FFFFFF;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.e404-search-btn:hover {
  background: #006B4D;
}

/* ══════════════════════════════════════════════════════════════
   17. MOBILE REFINEMENTS (≤768px)
   Compact spacing, safe-area awareness, touch targets.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Container padding: 16px on mobile */
  .container,
  [class*="__inner"],
  [class*="-inner"] {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Section padding: tighter on mobile */
  main#main-content > section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* Hero: compact on mobile */
  .hp-hero,
  .pr-hero,
  .dir-hero,
  [class*="-hero"] {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  /* Cards: tighter padding on mobile */
  .card > :not(img):not(picture),
  .sr-card > :not(img):not(picture) {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Full-width buttons on mobile */
  .btn-primary,
  .btn-cta,
  .sr-btn-primary,
  .sr-btn-full {
    width: 100%;
    justify-content: center;
  }

  /* Stack grid columns on mobile */
  .hp-stats__grid,
  [class*="stats-grid"] {
    gap: 1rem;
  }

  /* Auth card: no horizontal padding waste on mobile */
  .sr-auth-card {
    padding: 1.5rem;
    border-radius: 12px;
  }

  /* 404 grid: 2 columns on mobile */
  .e404-games-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Bottom safe area padding for devices with home indicator */
  .hn-sticky-bottom,
  .ms-tab-bar,
  .sr-tab-bar,
  [class*="bottom-bar"],
  [class*="sticky-bottom"] {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Pricing cards: stack vertically */
  .pr-plans-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Image aspect ratio consistency in cards */
  .settlement-card img,
  .sr-settlement-card img,
  .hp-card img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  /* Scroll snap for horizontal carousels */
  [class*="scroll-row"],
  [class*="swipe-row"],
  [class*="carousel"] {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  [class*="scroll-row"]::-webkit-scrollbar,
  [class*="swipe-row"]::-webkit-scrollbar {
    display: none;
  }

  [class*="scroll-row"] > *,
  [class*="swipe-row"] > * {
    scroll-snap-align: start;
  }

  /* No horizontal overflow on mobile */
  body {
    overflow-x: hidden;
  }
}

/* ══════════════════════════════════════════════════════════════
   18. DESKTOP REFINEMENTS (≥1024px)
   Max-width containers, balanced grids, generous whitespace.
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  /* Container: wider padding on desktop */
  .container,
  [class*="__inner"],
  [class*="-inner"] {
    padding-left: 32px;
    padding-right: 32px;
  }

  /* Hero headline: larger on desktop */
  .hp-hero__headline {
    max-width: 16ch;
  }

  /* Multi-column content */
  .settlement-detail-layout,
  [class*="detail-layout"] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 32px;
    align-items: start;
  }

  /* Category grid: 4 columns on desktop */
  .hp-cats__grid,
  [class*="category-grid"] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  /* Stats: horizontal layout with dividers */
  .hp-stats__grid {
    gap: 3rem;
  }

  /* Blog/news grid: 3 columns */
  .blog-grid,
  [class*="news-grid"],
  [class*="article-grid"] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  /* Auth page: max card width */
  .sr-auth-card {
    max-width: 440px;
  }

  /* Nav hover: subtle background on nav links */
  .hn-nav-link:hover,
  .hn-nav-btn:hover {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
  }
}

/* ══════════════════════════════════════════════════════════════
   19. TABLET (769px–1023px) — Transitional Layout
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1023px) {
  /* 2-column grids on tablet */
  .pr-plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hp-cats__grid,
  [class*="category-grid"] {
    grid-template-columns: repeat(3, 1fr);
  }

  .blog-grid,
  [class*="news-grid"] {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Settlement detail: stack sidebar below on tablet */
  .settlement-detail-layout,
  [class*="detail-layout"] {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ══════════════════════════════════════════════════════════════
   20. PRINT STYLES
   Clean print output without UI chrome.
   ══════════════════════════════════════════════════════════════ */

@media print {
  /* Hide non-content elements */
  nav, header, footer,
  .hn-sticky-bottom,
  .ms-tab-bar,
  .sr-tab-bar,
  [class*="sticky"],
  [class*="fixed"],
  [class*="paywall"],
  [class*="modal"],
  [class*="toast"],
  [class*="ticker"],
  #crisp-chatbox,
  #compareFloatBar,
  .e404-email-card,
  .e404-pro-card {
    display: none !important;
  }

  /* Clean white background */
  body {
    background: #FFFFFF !important;
    color: #000000 !important;
    font-size: 12pt;
  }

  /* Links: show URL */
  a[href]:not([class])::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #6B7280;
  }

  /* No shadows */
  * {
    box-shadow: none !important;
  }

  /* Cards: thin border only */
  .card, .sr-card, [class*="-card"] {
    border: 1px solid #D1D5DB !important;
    break-inside: avoid;
  }

  /* Images: contain */
  img {
    max-width: 100% !important;
    break-inside: avoid;
  }
}

/* ══════════════════════════════════════════════════════════════
   21. REDUCED MOTION
   Respects user preference for reduced animation.
   ══════════════════════════════════════════════════════════════ */

/* Task #1610452: reduced-motion section REMOVED — all motion already killed globally */

/* ══════════════════════════════════════════════════════════════
   22. SCROLLBAR STYLING
   Subtle, thin scrollbar on supported browsers.
   ══════════════════════════════════════════════════════════════ */

/* WebKit scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #D1D5DB transparent;
}

/* ══════════════════════════════════════════════════════════════
   23. LOADING STATES & EMPTY STATES
   Skeleton loaders, empty state messaging.
   ══════════════════════════════════════════════════════════════ */

/* Loading bar: emerald gradient */
#sr-load-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 99999;
  background: transparent;
  pointer-events: none;
}

/* Task #1610452: loading bar animation stripped — static emerald bar */
#sr-load-bar.sr-loading {
  background: #00875A;
}
#sr-load-bar.sr-load-done {
  display: none;
}

/* Empty state: centered message with illustration placeholder */
.empty-state,
[class*="empty-state"] {
  text-align: center;
  padding: 3rem 1.5rem;
  color: #6B7280;
}

.empty-state p,
[class*="empty-state"] p {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 360px;
  margin: 0.5rem auto;
}

/* ══════════════════════════════════════════════════════════════
   24. PAYWALL MODAL REFINEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Task #1610452: paywall modal animation stripped */

/* ══════════════════════════════════════════════════════════════
   25. COOKIE CONSENT / BANNER REFINEMENTS
   ══════════════════════════════════════════════════════════════ */

.cookie-consent,
[class*="cookie-banner"],
[class*="cookie-consent"] {
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

/* ══════════════════════════════════════════════════════════════
   26. IMAGE HANDLING
   Consistent aspect ratios, smooth loading, broken image fallback.
   ══════════════════════════════════════════════════════════════ */

/* Prevent layout shift from unloaded images */
img {
  max-width: 100%;
  height: auto;
}

/* Settlement card images: consistent aspect ratio */
.settlement-card img,
.sr-settlement-card img,
.hp-card img,
[class*="card"] > img,
[class*="card"] > picture > img {
  width: 100%;
  object-fit: cover;
  background: #F3F4F6;
}

/* Broken image fallback — hide alt text overlay */
img[alt]::after {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background: #F3F4F6;
  color: #9CA3AF;
  font-size: 0.75rem;
  content: attr(alt);
}

/* ══════════════════════════════════════════════════════════════
   27. TABLE REFINEMENTS
   Clean, readable tables with proper alignment.
   ══════════════════════════════════════════════════════════════ */

table:not([class]) {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

table:not([class]) th,
table:not([class]) td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #F3F4F6;
}

table:not([class]) th {
  font-weight: 600;
  color: #0A0A0A;
  background: #F9FAFB;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table:not([class]) tr:hover {
  background: #FAFBFC;
}

/* ══════════════════════════════════════════════════════════════
   28. BREADCRUMB REFINEMENTS
   ══════════════════════════════════════════════════════════════ */

.breadcrumb,
.ab4-breadcrumb,
[class*="breadcrumb"] {
  font-size: 0.8125rem;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.breadcrumb a,
.ab4-breadcrumb a,
[class*="breadcrumb"] a {
  color: #6B7280;
  text-decoration: none;
  transition: color 0.15s ease;
}

.breadcrumb a:hover,
.ab4-breadcrumb a:hover,
[class*="breadcrumb"] a:hover {
  color: #00875A;
}

/* Separator */
.breadcrumb .separator,
[class*="breadcrumb"] svg {
  color: #D1D5DB;
  flex-shrink: 0;
}