/* ================================================================
   LEARNING COUPONS — Global Mobile Responsive Overrides
   Applies to ALL pages. Loaded after page-specific stylesheets.
   Fixes: nav, tables, videos, images, grids, sections on mobile.
================================================================ */

/* ============================================================
   GLOBAL — PREVENT HORIZONTAL OVERFLOW ON EVERY ELEMENT
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ============================================================
   TABLES — UNIVERSAL HORIZONTAL SCROLL WRAPPER
   Any table not already inside .table-wrapper gets scroll
============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
}
.table-wrapper,
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
}
/* Hint on narrow screens */
@media (max-width: 768px) {
  .table-wrapper::before,
  .table-scroll::before {
    content: '← Scroll to see more →';
    display: block;
    font-size: 11px;
    color: var(--muted-gray);
    text-align: center;
    padding: 4px 0 8px;
  }
}

/* ============================================================
   VIDEO EMBEDS — fully responsive, never overflow
============================================================ */
.video-embed-wrap,
.video-container,
.yt-embed-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #000;
}
.video-embed-wrap iframe,
.video-container iframe,
.yt-embed-wrap iframe,
iframe[src*="youtube"],
iframe[src*="youtu.be"],
iframe[src*="vimeo"] {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
  border-radius: var(--radius-md);
}

/* ============================================================
   IMAGES — never overflow, always responsive
============================================================ */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   CONTAINER — tighter horizontal padding on small screens
============================================================ */
@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
}

/* ============================================================
   ANNOUNCEMENT BAR — responsive fixes
============================================================ */

/* Tablet (≤768px): tighten padding, slightly smaller text */
@media (max-width: 768px) {
  .announcement-bar {
    padding: 10px 46px 10px 14px;
    font-size: 13px;
    min-height: 42px;
  }
  .announcement-inner {
    gap: 8px;
    flex-wrap: nowrap;
    max-width: calc(100% - 6px);
  }
  .announcement-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .announcement-cta {
    font-size: 12px;
    padding: 4px 13px;
  }
  .announcement-close {
    right: 10px;
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

/* Mobile (≤480px): compact single-line layout */
@media (max-width: 480px) {
  .announcement-bar {
    padding: 9px 42px 9px 10px;
    font-size: 12px;
    min-height: 40px;
    gap: 8px;
  }
  .announcement-inner {
    gap: 7px;
    flex-wrap: nowrap;
    width: 100%;
    max-width: calc(100% - 4px);
    overflow: hidden;
  }
  .announcement-icon {
    display: none; /* hide emoji on very small screens to save space */
  }
  .announcement-text {
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 0;
    min-width: 0;
  }
  .announcement-cta {
    font-size: 11px;
    padding: 4px 10px;
    flex-shrink: 0;
  }
  .announcement-close {
    right: 8px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/* Very small (≤360px): hide CTA pill, keep text + close */
@media (max-width: 360px) {
  .announcement-bar {
    padding: 9px 38px 9px 10px;
    font-size: 11.5px;
  }
  .announcement-cta {
    display: none;
  }
  .announcement-text {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================================
   HEADER / NAV — responsive adjustments
============================================================ */
@media (max-width: 1024px) {
  /* Hamburger shows, desktop nav/CTA hidden (handled in style.css) */
  .header-inner { gap: 8px; }
}
@media (max-width: 480px) {
  .logo-text { font-size: 18px; }
  .logo-badge { font-size: 11px; padding: 2px 7px; }
}

/* ============================================================
   MOBILE MENU — full-screen overlay refinements
============================================================ */
@media (max-width: 360px) {
  .mobile-menu-nav ul li a {
    font-size: 15px;
    padding: 13px 18px;
  }
  .mobile-cta-primary,
  .mobile-cta-secondary {
    font-size: 14px;
    padding: 12px 16px;
  }
}

/* ============================================================
   EVEN SECTION PADDING — all pages
============================================================ */
@media (max-width: 768px) {
  .content-section {
    padding: 32px 0;
  }
  section {
    padding-left: 0;
    padding-right: 0;
  }
}
@media (max-width: 480px) {
  /* All containers get consistent 16px horizontal padding */
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Consistent vertical section padding */
  .content-section {
    padding: 24px 0;
  }
  /* Card inner padding reduction */
  .plan-card,
  .feature-card,
  .deal-card,
  .coupon-card {
    padding: 18px 16px;
  }
  /* Section heading spacing */
  .section-heading,
  .section-title {
    margin-bottom: 16px;
  }
  .section-subtitle,
  .section-desc {
    margin-bottom: 20px;
    font-size: 14px;
  }
}

/* ============================================================
   BUTTONS — prevent overflow on small screens
============================================================ */
@media (max-width: 480px) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost {
    white-space: normal;
    word-break: break-word;
    padding: 11px 18px;
    font-size: 14px;
  }
  .gc-featured-footer {
    flex-direction: column;
  }
  .gc-featured-footer a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   HERO SECTIONS — padding & font reduction
============================================================ */
@media (max-width: 768px) {
  .hero-section {
    padding: 48px 0 40px;
  }
  .hero-title {
    font-size: clamp(1.6rem, 6vw, 2rem);
    line-height: 1.25;
  }
  .hero-subtitle {
    font-size: 15px;
  }
  .hero-coupon-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .coupon-code-display {
    width: 100%;
    justify-content: space-between;
  }
}
@media (max-width: 480px) {
  .hero-section {
    padding: 36px 0 32px;
  }
  .hero-title {
    font-size: 1.5rem;
  }
  .hero-subtitle {
    font-size: 14px;
  }
  .coupon-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
}

/* ============================================================
   ARTICLE / GUIDE HERO
============================================================ */
@media (max-width: 768px) {
  .article-hero {
    padding: 36px 0 30px;
  }
  .article-hero-title {
    font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
    line-height: 1.25;
  }
  .article-hero-subtitle {
    font-size: 14px;
    line-height: 1.65;
  }
  .article-meta-row {
    gap: 6px;
  }
  .article-category-badge {
    font-size: 11px;
    padding: 4px 10px;
  }
  .article-byline {
    flex-direction: column;
    gap: 12px;
  }
  .byline-stats {
    flex-wrap: wrap;
    gap: 10px;
    margin-left: 0;
  }
  .share-buttons {
    gap: 8px;
  }
}

/* ============================================================
   STAT HOOK GRID
============================================================ */
@media (max-width: 600px) {
  .stat-hook-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
  .sh-num { font-size: 1.3rem; }
  .sh-label { font-size: 12px; }
}
@media (max-width: 360px) {
  .stat-hook-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ============================================================
   TABLE OF CONTENTS
============================================================ */
@media (max-width: 600px) {
  .toc-list {
    grid-template-columns: 1fr !important;
  }
  .toc-item {
    font-size: 13px;
  }
}

/* ============================================================
   COMPARISON TABLE — full horizontal scroll
============================================================ */
.comparison-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .feature-comparison-table,
  .platform-compare-table,
  .pricing-table,
  .cost-breakdown-table,
  .comparison-table {
    min-width: 520px;
    font-size: 13px;
  }
  .feature-comparison-table th,
  .feature-comparison-table td,
  .platform-compare-table th,
  .platform-compare-table td {
    padding: 8px 10px !important;
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .feature-comparison-table,
  .platform-compare-table,
  .pricing-table,
  .cost-breakdown-table,
  .comparison-table {
    min-width: 420px;
    font-size: 12px;
  }
}

/* ============================================================
   CONTENT LAYOUT (already single-column, full-width in base CSS)
   Sidebar widget rows collapse to single column on very small screens
============================================================ */

@media (max-width: 600px) {
  .sidebar-col,
  .archive-sidebar-col {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   GUIDE STEPS / TUTORIAL NUMBERED STEPS
============================================================ */
@media (max-width: 768px) {
  .tutorial-steps-list {
    gap: 20px;
  }
  .tutorial-step {
    flex-direction: column;
    gap: 10px;
  }
  .step-num {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  .workflow-steps {
    flex-direction: column !important;
  }
  .ws-arrow {
    transform: rotate(90deg) !important;
    align-self: center;
    margin: -4px auto;
  }
}
@media (max-width: 480px) {
  .tutorial-step-body h4 {
    font-size: 14px;
  }
  .tutorial-step-body p {
    font-size: 13px;
  }
}

/* ============================================================
   PRICING MODEL CARDS
============================================================ */
@media (max-width: 768px) {
  .pricing-models-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .pricing-models-grid {
    grid-template-columns: 1fr !important;
  }
  .pricing-model-card {
    padding: 18px !important;
  }
}

/* ============================================================
   FEATURE CARDS GRID
============================================================ */
@media (max-width: 768px) {
  .features-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .app-feature-highlights {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 420px) {
  .features-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   PLAN COMPARISON CARDS (Pro / Learning Center etc.)
============================================================ */
@media (max-width: 768px) {
  .plan-cards-grid,
  .plan-compare-grid,
  .pricing-cards-row {
    grid-template-columns: 1fr !important;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  .featured-pricing-card,
  .featured-coupon {
    transform: none !important;
  }
}

/* ============================================================
   EXCLUSIVE COUPON HIGHLIGHT (code + CTA box)
============================================================ */
@media (max-width: 600px) {
  .exclusive-coupon-highlight {
    flex-direction: column !important;
    gap: 14px;
  }
  .ech-right {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  .ech-code {
    font-size: 22px;
  }
}

/* ============================================================
   INLINE CTA BANNERS / BOTTOM CTA
============================================================ */
@media (max-width: 768px) {
  .cta-banner {
    flex-direction: column !important;
    text-align: center;
    gap: 16px;
    padding: 24px 20px;
  }
  .cta-banner-left {
    justify-content: center !important;
    flex-direction: column;
    align-items: center;
  }
  .final-cta-box {
    padding: 32px 20px;
  }
  .final-cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .final-cta-buttons a,
  .final-cta-buttons button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .final-cta-perks {
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  .bottom-cta-section {
    padding: 40px 0;
  }
  .bottom-cta-buttons {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .bottom-cta-buttons a {
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   QUICK START CTA (inline in articles)
============================================================ */
@media (max-width: 600px) {
  .quick-start-cta {
    flex-direction: column !important;
    text-align: center;
    gap: 12px;
  }
  .qsc-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================================
   SALES PAGE / WEBSITE BUILDER IMAGES
============================================================ */
@media (max-width: 768px) {
  .section-image-wrap {
    margin: 0 -16px;
    border-radius: 0;
  }
  .section-image-wrap img,
  .content-image {
    width: 100%;
    border-radius: 8px;
  }
}

/* ============================================================
   MARKETING CHANNELS GRID / FUNNEL STAGES
============================================================ */
@media (max-width: 768px) {
  .marketing-channels-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .funnel-stages {
    flex-direction: column !important;
    gap: 0;
  }
  .funnel-arrow {
    transform: rotate(90deg);
    margin: -8px auto;
    align-self: center;
  }
}
@media (max-width: 480px) {
  .marketing-channels-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   REVENUE ROADMAP TABLE
============================================================ */
@media (max-width: 768px) {
  .revenue-roadmap-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -4px;
    padding: 0 4px;
  }
  .revenue-roadmap-table {
    min-width: 500px;
    font-size: 12px;
  }
  .revenue-roadmap-table th,
  .revenue-roadmap-table td {
    padding: 8px 10px;
  }
}

/* ============================================================
   ADVANCED FEATURES GRID (analytics, drip content)
============================================================ */
@media (max-width: 768px) {
  .advanced-features-grid {
    grid-template-columns: 1fr !important;
  }
  .adv-feature-card {
    grid-template-columns: 1fr !important;
  }
  .adv-feature-visual {
    height: 200px !important;
    order: 0 !important;
  }
  .adv-feature-text {
    order: 1 !important;
  }
}

/* ============================================================
   SCALING STRATEGIES GRID
============================================================ */
@media (max-width: 768px) {
  .scaling-strategies-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   FAQ ACCORDION
============================================================ */
@media (max-width: 480px) {
  .faq-question {
    font-size: 14px;
    padding: 14px 16px;
  }
  .faq-answer {
    font-size: 13px;
    padding: 0 16px 14px;
  }
}

/* ============================================================
   GIFT WIDGET — ensure not cut off on small screens
============================================================ */
@media (max-width: 768px) {
  /* gift btn = 60px tall; sits at bottom:76px → top edge at 136px from bottom */
  .gift-widget {
    right: 14px;
    bottom: 76px;
  }
  /* scroll-top: 44px tall, needs to clear gift top edge (136px) + 16px gap = 152px */
  .scroll-top-btn {
    bottom: 152px;
    right: 14px;
  }
}
@media (max-width: 480px) {
  /* gift btn stays at bottom:72px → top edge at 132px */
  .gift-widget {
    right: 12px;
    bottom: 72px;
  }
  .gift-dropdown {
    width: calc(100vw - 30px) !important;
    right: 0 !important;
    left: auto;
    max-width: 320px;
  }
  /* scroll-top: 38px tall; needs to clear gift top (132px) + 16px gap = 148px */
  .scroll-top-btn {
    bottom: 148px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
}

/* ============================================================
   FOOTER
============================================================ */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .footer-bottom-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .footer-social {
    justify-content: flex-start;
  }
}
@media (max-width: 480px) {
  .footer-main {
    padding: 40px 0 28px;
  }
  .footer-links-col h4 {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .footer-links-col ul li a {
    font-size: 13px;
  }
}

/* ============================================================
   PRICING PAGE — specific fixes
============================================================ */
@media (max-width: 768px) {
  .page-hero {
    padding: 40px 0 36px;
  }
  .page-hero-title {
    font-size: clamp(1.4rem, 5vw, 1.9rem) !important;
  }
  .page-hero-badge-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .pricing-toggle-row {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  .pricing-cards-row {
    grid-template-columns: 1fr !important;
  }
  .plan-card {
    max-width: 100%;
  }
  .feature-comparison-table {
    font-size: 12px;
  }
  .feature-comparison-table th {
    white-space: nowrap;
  }
  /* FAQ in pricing */
  .pricing-faq-list .faq-item {
    padding: 16px;
  }
}
@media (max-width: 480px) {
  .pricing-toggle {
    width: 100%;
    justify-content: center;
  }
  .plan-deep-header {
    flex-direction: column !important;
    gap: 12px;
  }
  .plan-deep-price-badge {
    align-self: flex-start;
  }
  .scale-addon-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   MOBILE APP PAGE — submission, cost table
============================================================ */
@media (max-width: 768px) {
  .submission-timeline {
    grid-template-columns: 1fr !important;
  }
  .apb-tiers {
    grid-template-columns: 1fr !important;
  }
  .cost-breakdown-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .cost-breakdown-table {
    min-width: 460px;
  }
  .pitfall-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .checklist-progress-wrap {
    flex-direction: column;
    gap: 8px;
  }
  .launch-strategy-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .metrics-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .test-paths-grid {
    grid-template-columns: 1fr !important;
  }
  .app-feature-highlights {
    grid-template-columns: 1fr 1fr !important;
  }
  .checklist-item {
    font-size: 13px;
    padding: 10px 12px;
  }
  .cl-progress-bar-wrap {
    flex-direction: column;
    gap: 6px;
  }
}

/* ============================================================
   GUIDES ARCHIVE PAGE
============================================================ */
@media (max-width: 768px) {
  .archive-hero {
    padding: 40px 0 36px;
  }
  .archive-hero-inner {
    grid-template-columns: 1fr !important;
  }
  .archive-hero-cta-box {
    max-width: 100%;
  }
  .archive-hero-title {
    font-size: clamp(1.5rem, 5vw, 2rem) !important;
  }
  .archive-hero-stats {
    gap: 12px;
  }
  .guide-card-featured {
    grid-template-columns: 1fr !important;
  }
  .gc-featured-image {
    min-height: 200px !important;
    max-height: 250px;
  }
  .gc-featured-body {
    padding: 20px !important;
  }
  .guide-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .cs-cards-grid {
    grid-template-columns: 1fr !important;
  }
  .topics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .newsletter-cta {
    flex-direction: column;
    text-align: center;
  }
  .nc-btn {
    width: 100%;
    text-align: center;
  }
  .archive-filter-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .afb-right {
    width: 100%;
    flex-wrap: wrap;
  }
}
@media (max-width: 480px) {
  .topics-grid {
    grid-template-columns: 1fr !important;
  }
  .gc-highlights {
    flex-wrap: wrap;
  }
  .gc-highlights span {
    font-size: 11px;
  }
  .ahs-num {
    font-size: 1.3rem;
  }
}

/* ============================================================
   SEARCH OVERLAY
============================================================ */
@media (max-width: 600px) {
  .search-box input {
    font-size: 16px;
    padding: 16px 56px 16px 18px;
  }
}

/* ============================================================
   TRUST BADGES ROW
============================================================ */
@media (max-width: 600px) {
  .trust-grid {
    gap: 12px;
    flex-wrap: wrap;
  }
  .trust-item {
    flex: 0 0 calc(50% - 8px);
    font-size: 12px;
  }
}

/* ============================================================
   HOMEPAGE SECTIONS — deals, steps, features
============================================================ */
@media (max-width: 768px) {
  .deals-grid {
    grid-template-columns: 1fr !important;
  }
  .steps-grid {
    grid-template-columns: 1fr !important;
  }
  .features-card-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .case-study-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .eligibility-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .saving-tips-grid {
    grid-template-columns: 1fr !important;
  }
  .free-trial-grid {
    grid-template-columns: 1fr !important;
  }
  .trial-features-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .how-to-steps-grid {
    grid-template-columns: 1fr !important;
  }
  .platform-overview-grid {
    grid-template-columns: 1fr !important;
  }
  .pricing-cta-row {
    flex-direction: column !important;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .eligibility-grid {
    grid-template-columns: 1fr !important;
  }
  .trial-features-row {
    grid-template-columns: 1fr !important;
  }
  .features-card-grid {
    grid-template-columns: 1fr !important;
  }
  .trust-item span:last-child {
    display: none;
  }
}

/* ============================================================
   SECTION HEADINGS — responsive font sizes
============================================================ */
@media (max-width: 768px) {
  .section-heading,
  .section-title {
    font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important;
    line-height: 1.3;
  }
  .section-subtitle,
  .section-desc {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .section-heading,
  .section-title {
    font-size: 1.2rem !important;
  }
}

/* ============================================================
   PLAN CARDS (Starter / Pro / Learning Center) on Pricing page
============================================================ */
@media (max-width: 768px) {
  .pricing-cards-row {
    flex-direction: column !important;
    align-items: stretch;
    gap: 16px;
  }
  .plan-card {
    width: 100% !important;
    max-width: 440px;
    margin: 0 auto;
  }
}

/* ============================================================
   HERO STATS BAR
============================================================ */
@media (max-width: 480px) {
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 16px;
  }
  .hero-stat-divider {
    display: none !important;
  }
  .hero-stat {
    text-align: center;
  }
  .hero-stat-num {
    font-size: 1.3rem;
  }
}

/* ============================================================
   COPY TOAST — centered on all screens
============================================================ */
@media (max-width: 480px) {
  .copy-toast {
    font-size: 12px;
    padding: 10px 18px;
    bottom: 64px;
    max-width: calc(100vw - 32px);
    white-space: nowrap;
  }
}

/* ============================================================
   SECTION LABEL BADGES — prevent overflow
============================================================ */
.section-label-badge {
  flex-wrap: wrap;
  max-width: 100%;
}

/* ============================================================
   CODE BLOCKS / COUPON CODES — prevent overflow
============================================================ */
code, pre {
  max-width: 100%;
  overflow-x: auto;
  word-break: break-all;
}

/* Sticky sidebar removed — layout is now single-column on all screen sizes */

/* ============================================================
   SPECIFIC MOBILE FIX: Pricing Comparison Table wrapper
============================================================ */
.pricing-compare-wrap,
.comparison-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-radius: var(--radius-md);
}

/* ============================================================
   SPECIFIC MOBILE FIX: guide.css tutorial step images
============================================================ */
@media (max-width: 768px) {
  .tutorial-image-wrap {
    margin: 16px 0;
  }
  .tutorial-image-wrap img {
    border-radius: var(--radius-md);
    width: 100%;
  }
}

/* ============================================================
   MOBILE APP PAGE — plan selection and checklist
============================================================ */
@media (max-width: 600px) {
  .apb-tiers {
    grid-template-columns: 1fr !important;
  }
  .mobile-addon-pricing {
    padding: 18px 16px;
  }
  .plan-cta-row {
    flex-direction: column;
    gap: 10px;
  }
  .plan-cta-row a {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   PRINT — basic
============================================================ */
@media print {
  .announcement-bar,
  .site-header,
  .gift-widget,
  .scroll-top-btn,
  .mobile-menu-overlay,
  .search-overlay { display: none !important; }
  body { font-size: 12pt; }
  a { color: #000 !important; }
}

/* ============================================================
   BREADCRUMB — visible text color on dark hero backgrounds
   Applies to: create-sell, mobile-app, pricing, guides pages
============================================================ */
.breadcrumb {
  margin-bottom: 18px;
}
.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.breadcrumb ol li {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.65);
}
.breadcrumb ol li::after {
  content: '/';
  margin: 0 8px;
  color: rgba(255,255,255,0.35);
}
.breadcrumb ol li:last-child::after { display: none; }
.breadcrumb ol li a {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb ol li a:hover { color: var(--teal, #38B2AC); }
/* Current page label — fully visible white */
.breadcrumb ol li span[aria-current="page"],
.breadcrumb ol li > span {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}
@media (max-width: 480px) {
  .breadcrumb ol li { font-size: 12px; }
  .breadcrumb ol li::after { margin: 0 5px; }
}

/* ============================================================
   CONTENT-SECTION — inner spacing on mobile
   (create-sell, pricing, mobile-app all use .content-section)
============================================================ */
@media (max-width: 768px) {
  .content-section {
    padding: 24px 18px !important;
    margin-bottom: 20px !important;
  }
  /* guide-main vertical padding */
  .guide-main {
    padding: 32px 0 48px !important;
  }
  /* Restore guide-step-section left indent on mobile */
  .guide-step-section {
    padding-left: 20px !important;
    border-left: 3px solid var(--border-gray) !important;
  }
  /* page-hero container inner top/bottom breathing room */
  .page-hero .container,
  .article-hero .container {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}
@media (max-width: 480px) {
  .content-section {
    padding: 18px 12px !important;
    margin-bottom: 14px !important;
    border-radius: 10px !important;
  }
  .guide-main {
    padding: 24px 0 36px !important;
  }
  /* guide-step-section — keep left indent but smaller */
  .guide-step-section {
    padding-left: 14px !important;
    border-left: 3px solid var(--border-gray) !important;
  }
  /* subsection headings tighter spacing */
  .subsection-heading {
    font-size: 15px !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
  }
}

/* ============================================================
   DATA TABLES — no column overlap, full horizontal scroll
   Applies to ALL pages using .data-table / .table-wrapper
============================================================ */

/* Force table-layout auto so columns size to their content */
.data-table {
  table-layout: auto !important;
  min-width: 480px;
  width: 100%;
}

/* Every table-wrapper must scroll horizontally */
.table-wrapper {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  border-radius: var(--radius-md, 10px);
  margin-bottom: 20px;
}

/* Prevent any cell from wrapping to avoid overlap */
.data-table th,
.data-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
/* First column (row labels) can wrap */
.data-table td:first-child,
.data-table th:first-child {
  white-space: normal;
  word-break: break-word;
  max-width: none;
  min-width: 100px;
}

@media (max-width: 768px) {
  .data-table {
    font-size: 12px !important;
    min-width: 460px;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  /* pricing-overview-table on pricing page: wider for 4 cols */
  .pricing-overview-table,
  .feature-comparison-table {
    min-width: 560px !important;
  }
  /* platform compare (create-sell) */
  .platform-compare-table {
    min-width: 500px !important;
  }
  /* cost-table (mobile-app page) */
  .cost-table {
    min-width: 480px !important;
  }
  /* revenue milestone table (create-sell) */
  .data-table[aria-label="Course revenue milestones"] {
    min-width: 540px !important;
  }
}
@media (max-width: 480px) {
  .data-table {
    font-size: 11px !important;
    min-width: 440px;
  }
  .data-table th,
  .data-table td {
    padding: 7px 8px !important;
    font-size: 11px !important;
  }
}