{"id":21307,"date":"2025-08-19T17:06:59","date_gmt":"2025-08-19T17:06:59","guid":{"rendered":"https:\/\/wptablebuilder.com\/?page_id=21307"},"modified":"2026-04-16T04:53:40","modified_gmt":"2026-04-16T04:53:40","slug":"features","status":"publish","type":"page","link":"https:\/\/wptablebuilder.com\/es\/features\/","title":{"rendered":"WPTB Features Page"},"content":{"rendered":"<div class=\"gb-container gb-container-3a7113e0 alignfull\">\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&#038;family=JetBrains+Mono:wght@400;500&#038;display=swap\" rel=\"stylesheet\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/geist@1.3.1\/dist\/fonts\/geist-sans\/style.min.css\">\n\n\n\n<style>\n    :root {\n      --brand: #10609e;\n      --brand-dark: #0c4d7e;\n      --brand-light: #e8f1f8;\n      --brand-lighter: #f4f8fb;\n      --gold: #ffc403;\n      --gold-dark: #e6b003;\n      --gold-light: #fff8e0;\n      --ink: #1a1a2e;\n      --ink-soft: #4a4a5a;\n      --ink-muted: #8a8a9a;\n      --surface: #ffffff;\n      --surface-warm: #fafaf8;\n      --surface-cool: #edf1f7;\n      --border: #e8e8ec;\n      --border-light: #f0f0f4;\n      --serif: 'Geist', -apple-system, sans-serif;\n      --sans: 'Instrument Sans', -apple-system, sans-serif;\n      --mono: 'JetBrains Mono', monospace;\n      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\n      --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);\n      \/* Plugin theme colors *\/\n      --plugin-border: #9fb3c8;\n      --plugin-active: #0071bc;\n      --plugin-bg: #f0f0f1;\n      --plugin-text: #112a43;\n    }\n\n    .wptb-landing *, .wptb-landing *::before, .wptb-landing *::after {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    .wptb-landing {\n      font-family: var(--sans);\n      color: var(--ink);\n      background: var(--surface);\n      line-height: 1.6;\n      overflow-x: hidden;\n      width: 100%;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       UTILITY\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .container {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 0 24px;\n    }\n\n    .container--wide {\n      max-width: 1400px;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       REVEAL ANIMATIONS\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .reveal {\n      opacity: 0;\n      transform: translateY(40px);\n      transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);\n    }\n\n    .reveal.visible {\n      opacity: 1;\n      transform: none;\n    }\n\n    .reveal-stagger > .reveal,\n    .reveal-stagger > [class*=\"reveal-\"] {\n      transition-delay: calc(var(--i, 0) * 0.1s);\n    }\n\n    .reveal-fade {\n      opacity: 0;\n      transition: opacity 1s var(--ease-out-expo);\n    }\n\n    .reveal-fade.visible { opacity: 1; }\n\n    .reveal-scale {\n      opacity: 0;\n      transform: scale(0.92);\n      transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-back);\n    }\n\n    .reveal-scale.visible { opacity: 1; transform: none; }\n\n    .reveal-left {\n      opacity: 0;\n      transform: translateX(-80px);\n      transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);\n    }\n\n    .reveal-left.visible { opacity: 1; transform: none; }\n\n    .reveal-right {\n      opacity: 0;\n      transform: translateX(80px);\n      transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);\n    }\n\n    .reveal-right.visible { opacity: 1; transform: none; }\n\n    .reveal-zoom {\n      opacity: 0;\n      transform: scale(0.85);\n      transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-back);\n    }\n\n    .reveal-zoom.visible { opacity: 1; transform: none; }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       3D CARD TILT\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .tilt-card {\n      transform-style: preserve-3d;\n      perspective: 800px;\n      will-change: transform;\n    }\n\n    .tilt-card__shine {\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.3s;\n      background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),\n        rgba(255,255,255,0.25) 0%, transparent 60%);\n      z-index: 10;\n    }\n\n    .tilt-card:hover .tilt-card__shine { opacity: 1; }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       MAGNETIC BUTTONS (only for final CTA)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .btn-magnetic {\n      position: relative;\n      transition: transform 0.2s var(--ease-out-expo);\n    }\n\n    .btn-magnetic .btn-magnetic__ripple {\n      position: absolute;\n      border-radius: 50%;\n      background: rgba(255,255,255,0.4);\n      transform: scale(0);\n      animation: ripple-out 0.6s ease-out forwards;\n      pointer-events: none;\n    }\n\n    @keyframes ripple-out {\n      to { transform: scale(4); opacity: 0; }\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SCROLL PROGRESS BAR\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .scroll-progress {\n      position: fixed;\n      top: 0;\n      left: 0;\n      height: 3px;\n      background: linear-gradient(90deg, var(--brand), var(--gold));\n      z-index: 200;\n      transform-origin: left;\n      transform: scaleX(0);\n      will-change: transform;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       BUTTONS\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      padding: 16px 32px;\n      border-radius: 10px;\n      font-family: var(--sans);\n      font-size: 16px;\n      font-weight: 600;\n      text-decoration: none;\n      cursor: pointer;\n      border: none;\n      transition: all 0.3s var(--ease-out-expo);\n    }\n\n    .btn--gold {\n      background: var(--gold);\n      color: var(--ink);\n      box-shadow: 0 4px 16px rgba(255, 196, 3, 0.35);\n      position: relative;\n      overflow: hidden;\n    }\n\n    .btn--gold:hover {\n      background: var(--gold-dark);\n      transform: translateY(-2px);\n      box-shadow: 0 8px 28px rgba(255, 196, 3, 0.4);\n    }\n\n    .btn--gold::before {\n      content: '';\n      position: absolute;\n      top: -50%;\n      left: -50%;\n      width: 200%;\n      height: 200%;\n      background: conic-gradient(transparent, rgba(255,255,255,0.3), transparent 30%);\n      animation: cta-glow 3s linear infinite;\n      pointer-events: none;\n    }\n\n    @keyframes cta-glow {\n      to { transform: rotate(1turn); }\n    }\n\n    .btn--gold::after {\n      content: '';\n      position: absolute;\n      inset: 2px;\n      background: var(--gold);\n      border-radius: 8px;\n      z-index: 0;\n      transition: background 0.3s;\n    }\n\n    .btn--gold:hover::after {\n      background: var(--gold-dark);\n    }\n\n    .btn--gold > * { position: relative; z-index: 1; }\n\n    .btn--ghost {\n      background: transparent;\n      color: var(--ink);\n      border: 2px solid var(--border);\n    }\n\n    .btn--ghost:hover {\n      border-color: var(--brand);\n      color: var(--brand);\n      transform: translateY(-2px);\n    }\n\n    .btn__arrow {\n      transition: transform 0.3s var(--ease-out-expo);\n    }\n\n    .btn:hover .btn__arrow {\n      transform: translateX(4px);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       PAGE HEADER\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .page-header {\n      padding: 80px 0 60px;\n      text-align: center;\n    }\n\n    .page-header__title {\n      font-family: var(--serif);\n      font-size: clamp(48px, 6vw, 72px);\n      font-weight: 800;\n      letter-spacing: -2px;\n      line-height: 1.05;\n      margin-bottom: 12px;\n    }\n\n    .page-header__subtitle {\n      font-size: clamp(16px, 1.8vw, 20px);\n      color: var(--ink-muted);\n      font-weight: 400;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       FEATURE SECTIONS (shared)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .feature-section {\n      padding: 100px 0;\n      position: relative;\n    }\n\n    .feature-section--cool {\n      background: var(--surface-cool);\n    }\n\n    .feature-section--warm {\n      background: var(--surface-warm);\n    }\n\n    .feature-section__number {\n      font-family: var(--serif);\n      font-size: clamp(64px, 8vw, 96px);\n      font-weight: 800;\n      color: var(--border);\n      line-height: 1;\n      margin-bottom: 8px;\n      letter-spacing: -4px;\n    }\n\n    .feature-section__title {\n      font-family: var(--serif);\n      font-size: clamp(28px, 3.5vw, 42px);\n      font-weight: 700;\n      line-height: 1.15;\n      letter-spacing: -1px;\n      margin-bottom: 16px;\n    }\n\n    .feature-section__subtitle {\n      font-size: 17px;\n      color: var(--ink-muted);\n      margin-bottom: 20px;\n    }\n\n    .feature-section__desc {\n      font-size: 16px;\n      color: var(--ink-soft);\n      line-height: 1.7;\n      margin-bottom: 24px;\n      max-width: 520px;\n    }\n\n    .feature-section__details {\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 10px;\n    }\n\n    .feature-section__details li {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: var(--ink-soft);\n      font-weight: 500;\n    }\n\n    .feature-section__details li::before {\n      content: '';\n      width: 20px;\n      height: 20px;\n      background: var(--brand-light);\n      border-radius: 50%;\n      flex-shrink: 0;\n      background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 20 20' fill='%2310609e'%3E%3Cpath d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'\/%3E%3C\/svg%3E\");\n      background-size: 14px;\n      background-repeat: no-repeat;\n      background-position: center;\n    }\n\n    \/* Two-column feature layout *\/\n    .feature-split {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 80px;\n      align-items: center;\n    }\n\n    .feature-split--reverse {\n      direction: rtl;\n    }\n\n    .feature-split--reverse > * {\n      direction: ltr;\n    }\n\n    \/* Centered feature layout *\/\n    .feature-centered {\n      text-align: center;\n    }\n\n    .feature-centered .feature-section__title {\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .feature-centered .feature-section__subtitle {\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .feature-centered .feature-section__desc {\n      margin-left: auto;\n      margin-right: auto;\n      max-width: 640px;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       MOCKUP SYSTEM\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .mockup {\n      border-radius: 12px;\n      overflow: hidden;\n      box-shadow:\n        0 4px 8px rgba(0,0,0,0.04),\n        0 16px 40px rgba(0,0,0,0.06),\n        0 40px 80px rgba(0,0,0,0.04);\n      background: var(--surface);\n      border: 1px solid var(--border);\n    }\n\n    \/* \u2500\u2500 Editor Mockup \u2500\u2500 *\/\n    .mockup-editor {\n      display: flex;\n      border-radius: 12px;\n      overflow: hidden;\n      box-shadow:\n        0 4px 8px rgba(0,0,0,0.04),\n        0 16px 40px rgba(0,0,0,0.06);\n      background: var(--surface);\n      border: 1px solid var(--plugin-border);\n      min-height: 380px;\n    }\n\n    \/* Sidebar *\/\n    .mockup-sidebar {\n      width: 280px;\n      flex-shrink: 0;\n      border-right: 1px solid var(--plugin-border);\n      background: var(--surface);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .mockup-sidebar__tabs {\n      display: flex;\n      border-bottom: 1px solid var(--plugin-border);\n    }\n\n    .mockup-sidebar__tab {\n      flex: 1;\n      padding: 12px 16px;\n      font-size: 12px;\n      font-weight: 600;\n      text-align: center;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      color: var(--ink-muted);\n      background: var(--plugin-bg);\n      border: none;\n      cursor: default;\n    }\n\n    .mockup-sidebar__tab--active {\n      color: var(--plugin-active);\n      background: var(--surface);\n      border-bottom: 2px solid var(--plugin-active);\n    }\n\n    .mockup-sidebar__body {\n      padding: 16px;\n      flex: 1;\n      overflow-y: auto;\n    }\n\n    .mockup-sidebar__section-title {\n      font-size: 10px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n      color: var(--ink-muted);\n      margin-bottom: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .mockup-sidebar__section-title::before {\n      content: '';\n      width: 0;\n      height: 0;\n      border-left: 5px solid var(--ink-muted);\n      border-top: 4px solid transparent;\n      border-bottom: 4px solid transparent;\n    }\n\n    .mockup-sidebar__section-title--open::before {\n      transform: rotate(90deg);\n    }\n\n    .mockup-sidebar__elements {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 8px;\n      margin-bottom: 20px;\n    }\n\n    .mockup-sidebar__element {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 6px;\n      padding: 12px 8px;\n      background: var(--plugin-bg);\n      border: 1px solid var(--border);\n      border-radius: 6px;\n      font-size: 10px;\n      font-weight: 500;\n      color: var(--plugin-text);\n      cursor: default;\n      transition: border-color 0.2s;\n      position: relative;\n    }\n\n    .mockup-sidebar__element:hover {\n      border-color: var(--plugin-active);\n    }\n\n    .mockup-sidebar__element-icon {\n      font-size: 18px;\n      line-height: 1;\n    }\n\n    .mockup-sidebar__pro-badge {\n      position: absolute;\n      top: 4px;\n      right: 4px;\n      font-size: 7px;\n      font-weight: 700;\n      background: var(--gold);\n      color: var(--ink);\n      padding: 1px 4px;\n      border-radius: 3px;\n      letter-spacing: 0.3px;\n    }\n\n    \/* Table grid area *\/\n    .mockup-table-area {\n      flex: 1;\n      background:\n        repeating-conic-gradient(var(--plugin-bg) 0% 25%, transparent 0% 50%) 50% \/ 20px 20px;\n      padding: 24px;\n      display: flex;\n      align-items: flex-start;\n      justify-content: center;\n    }\n\n    .mockup-table-grid {\n      width: 100%;\n      max-width: 440px;\n      border-collapse: collapse;\n      background: var(--surface);\n      border: 1px solid var(--plugin-border);\n      border-radius: 6px;\n      overflow: hidden;\n      font-size: 12px;\n    }\n\n    .mockup-table-grid th {\n      background: var(--plugin-active);\n      color: white;\n      padding: 10px 14px;\n      text-align: left;\n      font-weight: 600;\n      font-size: 11px;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .mockup-table-grid td {\n      padding: 12px 14px;\n      border-bottom: 1px solid var(--border-light);\n      color: var(--plugin-text);\n    }\n\n    .mockup-table-grid tr:last-child td {\n      border-bottom: none;\n    }\n\n    .mockup-table-grid .cell-stars {\n      color: var(--gold);\n      letter-spacing: 1px;\n      font-size: 13px;\n    }\n\n    .mockup-table-grid .cell-button {\n      display: inline-block;\n      padding: 4px 12px;\n      background: var(--plugin-active);\n      color: white;\n      border-radius: 4px;\n      font-size: 10px;\n      font-weight: 600;\n    }\n\n    .mockup-table-grid .cell-drop {\n      border: 2px dashed var(--plugin-border);\n      border-radius: 4px;\n      padding: 8px;\n      text-align: center;\n      color: var(--ink-muted);\n      font-size: 10px;\n      font-style: italic;\n      background: rgba(0, 113, 188, 0.04);\n    }\n\n    \/* \u2500\u2500 Element Cards Grid \u2500\u2500 *\/\n    .elements-grid {\n      display: grid;\n      grid-template-columns: repeat(7, 1fr);\n      gap: 16px;\n      margin-top: 48px;\n    }\n\n    .element-card {\n      background: var(--surface);\n      border: 1px solid var(--border);\n      border-radius: 14px;\n      padding: 24px 16px;\n      text-align: center;\n      transition: all 0.4s var(--ease-out-expo);\n      position: relative;\n      perspective: 600px;\n    }\n\n    .element-card:hover {\n      transform: translateY(-4px) rotateY(8deg) rotateX(4deg);\n      box-shadow: 0 12px 40px rgba(0,0,0,0.06);\n      border-color: var(--brand);\n    }\n\n    .element-card--pro {\n      border-color: transparent;\n      background: linear-gradient(var(--surface), var(--surface)) padding-box,\n                  linear-gradient(135deg, var(--brand), var(--gold)) border-box;\n      border: 2px solid transparent;\n    }\n\n    .element-card__pro-tag {\n      position: absolute;\n      top: -8px;\n      right: -8px;\n      background: var(--gold);\n      color: var(--ink);\n      font-size: 9px;\n      font-weight: 700;\n      padding: 3px 8px;\n      border-radius: 6px;\n      letter-spacing: 0.5px;\n    }\n\n    .element-card__icon {\n      font-size: 28px;\n      margin-bottom: 10px;\n      line-height: 1;\n    }\n\n    .element-card__name {\n      font-size: 13px;\n      font-weight: 700;\n      letter-spacing: -0.2px;\n      margin-bottom: 6px;\n    }\n\n    .element-card__desc {\n      font-size: 11px;\n      color: var(--ink-muted);\n      line-height: 1.4;\n    }\n\n    \/* \u2500\u2500 Search\/Sort\/Pagination Mockup \u2500\u2500 *\/\n    .mockup-interactive-table {\n      border-radius: 12px;\n      overflow: hidden;\n      box-shadow:\n        0 4px 8px rgba(0,0,0,0.04),\n        0 16px 40px rgba(0,0,0,0.06);\n      background: var(--surface);\n      border: 1px solid var(--border);\n      max-width: 700px;\n      margin: 0 auto;\n    }\n\n    .mockup-search-bar {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--border-light);\n      background: var(--surface-cool);\n    }\n\n    .mockup-search-input {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      background: var(--surface);\n      border: 1px solid var(--border);\n      border-radius: 20px;\n      padding: 8px 16px;\n      font-size: 13px;\n      color: var(--ink-muted);\n      flex: 0 0 240px;\n    }\n\n    .mockup-search-input__icon {\n      font-size: 14px;\n      opacity: 0.5;\n    }\n\n    .mockup-sticky-badge {\n      font-size: 10px;\n      font-weight: 600;\n      background: var(--brand-light);\n      color: var(--brand);\n      padding: 3px 10px;\n      border-radius: 10px;\n      margin-left: auto;\n    }\n\n    .mockup-data-table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n\n    .mockup-data-table thead th {\n      background: var(--brand);\n      color: white;\n      padding: 12px 16px;\n      text-align: left;\n      font-weight: 600;\n      font-size: 12px;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n      cursor: default;\n      white-space: nowrap;\n    }\n\n    .mockup-data-table thead th .sort-arrows {\n      display: inline-block;\n      margin-left: 4px;\n      font-size: 9px;\n      vertical-align: middle;\n      opacity: 0.5;\n    }\n\n    .mockup-data-table thead th .sort-arrows--active {\n      opacity: 1;\n    }\n\n    .mockup-data-table tbody td {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--border-light);\n      color: var(--ink);\n    }\n\n    .mockup-data-table tbody tr:nth-child(even) {\n      background: var(--surface-cool);\n    }\n\n    .mockup-data-table tbody tr:last-child td {\n      border-bottom: none;\n    }\n\n    .mockup-data-table .price {\n      font-weight: 700;\n      color: var(--brand);\n    }\n\n    .mockup-data-table .stars {\n      color: var(--gold);\n      letter-spacing: 1px;\n    }\n\n    .mockup-pagination {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 6px;\n      padding: 16px 20px;\n      border-top: 1px solid var(--border-light);\n      background: var(--surface-cool);\n    }\n\n    .mockup-pagination__btn {\n      width: 32px;\n      height: 32px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: 50%;\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--ink-soft);\n      background: var(--surface);\n      border: 1px solid var(--border);\n      cursor: default;\n      transition: all 0.2s;\n    }\n\n    .mockup-pagination__btn--active {\n      background: var(--brand);\n      color: white;\n      border-color: var(--brand);\n    }\n\n    .mockup-pagination__btn--arrow {\n      color: var(--ink-muted);\n      font-size: 14px;\n    }\n\n    .mockup-pagination__dots {\n      font-size: 12px;\n      color: var(--ink-muted);\n      padding: 0 4px;\n    }\n\n    \/* \u2500\u2500 Sticky Headers Mockup \u2500\u2500 *\/\n    .mockup-sticky-layout {\n      display: grid;\n      grid-template-columns: 1fr 240px;\n      gap: 24px;\n      align-items: flex-start;\n    }\n\n    .mockup-sticky-table {\n      border-radius: 10px;\n      overflow: hidden;\n      border: 1px solid var(--border);\n      box-shadow: 0 4px 16px rgba(0,0,0,0.04);\n    }\n\n    .mockup-sticky-table table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n\n    .mockup-sticky-table thead th {\n      background: var(--brand);\n      color: white;\n      padding: 12px 16px;\n      text-align: left;\n      font-weight: 600;\n      font-size: 11px;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .mockup-sticky-table thead th:first-child {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .mockup-sticky-table tbody td {\n      padding: 10px 16px;\n      border-bottom: 1px solid var(--border-light);\n    }\n\n    .mockup-sticky-table tbody td:first-child {\n      background: var(--surface-cool);\n      font-weight: 600;\n      color: var(--ink);\n      border-right: 1px solid var(--border-light);\n    }\n\n    .mockup-sticky-table tbody tr:last-child td {\n      border-bottom: none;\n    }\n\n    .mockup-sticky-table .scroll-hint {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: 8px;\n      font-size: 10px;\n      color: var(--ink-muted);\n      background: var(--surface-cool);\n      gap: 4px;\n    }\n\n    \/* Settings panel *\/\n    .mockup-settings {\n      background: var(--surface);\n      border: 1px solid var(--border);\n      border-radius: 10px;\n      overflow: hidden;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.04);\n    }\n\n    .mockup-settings__header {\n      padding: 12px 16px;\n      background: var(--plugin-bg);\n      border-bottom: 1px solid var(--border);\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      color: var(--plugin-text);\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .mockup-settings__body {\n      padding: 16px;\n    }\n\n    .mockup-settings__row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 10px 0;\n      font-size: 13px;\n      color: var(--ink-soft);\n    }\n\n    .mockup-settings__row + .mockup-settings__row {\n      border-top: 1px solid var(--border-light);\n    }\n\n    .mockup-toggle {\n      width: 40px;\n      height: 22px;\n      background: var(--border);\n      border-radius: 11px;\n      position: relative;\n      cursor: default;\n      transition: background 0.2s;\n    }\n\n    .mockup-toggle--on {\n      background: var(--plugin-active);\n    }\n\n    .mockup-toggle__knob {\n      position: absolute;\n      top: 2px;\n      left: 2px;\n      width: 18px;\n      height: 18px;\n      background: white;\n      border-radius: 50%;\n      transition: transform 0.2s;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n    }\n\n    .mockup-toggle--on .mockup-toggle__knob {\n      transform: translateX(18px);\n    }\n\n    \/* \u2500\u2500 Responsive Devices Mockup \u2500\u2500 *\/\n    .mockup-devices {\n      display: flex;\n      align-items: flex-end;\n      justify-content: center;\n      gap: 32px;\n      padding: 32px 0;\n    }\n\n    .mockup-device {\n      background: var(--surface);\n      border: 2px solid var(--ink);\n      border-radius: 12px;\n      overflow: hidden;\n      position: relative;\n    }\n\n    .mockup-device--desktop {\n      width: 260px;\n    }\n\n    .mockup-device--tablet {\n      width: 160px;\n    }\n\n    .mockup-device--phone {\n      width: 90px;\n    }\n\n    .mockup-device__notch {\n      width: 40%;\n      height: 4px;\n      background: var(--ink);\n      border-radius: 0 0 4px 4px;\n      margin: 0 auto;\n    }\n\n    .mockup-device__screen {\n      padding: 8px;\n    }\n\n    .mockup-device__label {\n      text-align: center;\n      font-size: 11px;\n      font-weight: 600;\n      color: var(--ink-muted);\n      margin-top: 10px;\n    }\n\n    .mockup-device__table {\n      width: 100%;\n      font-size: 7px;\n      border-collapse: collapse;\n    }\n\n    .mockup-device__table th {\n      background: var(--brand);\n      color: white;\n      padding: 4px;\n      text-align: left;\n      font-size: 6px;\n    }\n\n    .mockup-device__table td {\n      padding: 3px 4px;\n      border-bottom: 1px solid var(--border-light);\n      font-size: 6px;\n    }\n\n    .mockup-device__stacked {\n      font-size: 6px;\n    }\n\n    .mockup-device__stacked-row {\n      padding: 4px 6px;\n      border-bottom: 1px solid var(--border-light);\n    }\n\n    .mockup-device__stacked-label {\n      font-weight: 700;\n      color: var(--brand);\n      font-size: 5px;\n      text-transform: uppercase;\n    }\n\n    .mockup-device__stacked-value {\n      color: var(--ink-soft);\n      font-size: 6px;\n    }\n\n    .mockup-responsive-settings {\n      max-width: 400px;\n      margin: 24px auto 0;\n    }\n\n    \/* \u2500\u2500 Styling Mockup \u2500\u2500 *\/\n    .mockup-styling-layout {\n      display: grid;\n      grid-template-columns: 260px 1fr;\n      gap: 24px;\n      align-items: flex-start;\n    }\n\n    .mockup-settings-panel {\n      background: var(--surface);\n      border: 1px solid var(--border);\n      border-radius: 10px;\n      overflow: hidden;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.04);\n    }\n\n    .mockup-settings-section {\n      padding: 14px 16px;\n      border-bottom: 1px solid var(--border-light);\n    }\n\n    .mockup-settings-section:last-child {\n      border-bottom: none;\n    }\n\n    .mockup-settings-section__title {\n      font-size: 10px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      color: var(--plugin-text);\n      margin-bottom: 10px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .mockup-color-row {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 4px 0;\n      font-size: 12px;\n      color: var(--ink-soft);\n    }\n\n    .mockup-color-swatch {\n      width: 24px;\n      height: 24px;\n      border-radius: 6px;\n      border: 1px solid var(--border);\n      flex-shrink: 0;\n    }\n\n    .mockup-border-controls {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    .mockup-border-select {\n      padding: 4px 8px;\n      border: 1px solid var(--border);\n      border-radius: 4px;\n      font-size: 11px;\n      background: var(--surface);\n      color: var(--ink-soft);\n    }\n\n    .mockup-font-controls {\n      display: flex;\n      gap: 8px;\n      align-items: center;\n    }\n\n    .mockup-styled-table {\n      border-radius: 12px;\n      overflow: hidden;\n      border: 1px solid var(--border);\n      box-shadow: 0 4px 16px rgba(0,0,0,0.04);\n    }\n\n    .mockup-styled-table table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n\n    .mockup-styled-table thead th {\n      background: #2c5282;\n      color: white;\n      padding: 14px 16px;\n      text-align: left;\n      font-weight: 600;\n    }\n\n    .mockup-styled-table tbody td {\n      padding: 12px 16px;\n      border-bottom: 1px solid rgba(44, 82, 130, 0.1);\n    }\n\n    .mockup-styled-table tbody tr:nth-child(odd) td {\n      background: #ebf8ff;\n    }\n\n    .mockup-styled-table tbody tr:nth-child(even) td {\n      background: #ffffff;\n    }\n\n    \/* \u2500\u2500 Template Carousel \u2500\u2500 *\/\n    .templates-scroll {\n      display: flex;\n      gap: 24px;\n      overflow-x: auto;\n      padding: 8px 0 24px;\n      scroll-snap-type: x mandatory;\n      -webkit-overflow-scrolling: touch;\n      scrollbar-width: none;\n      margin-top: 48px;\n    }\n\n    .templates-scroll::-webkit-scrollbar {\n      display: none;\n    }\n\n    .template-card {\n      flex: 0 0 260px;\n      scroll-snap-align: start;\n      background: var(--surface);\n      border: 1px solid var(--border);\n      border-radius: 16px;\n      overflow: hidden;\n      transition: all 0.4s var(--ease-out-expo);\n      display: flex;\n      flex-direction: column;\n    }\n\n    .template-card:hover {\n      transform: translateY(-6px);\n      box-shadow: 0 16px 48px rgba(0,0,0,0.08);\n    }\n\n    .template-card__preview {\n      height: 140px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 40px;\n    }\n\n    .template-card__preview--pricing {\n      background: linear-gradient(135deg, var(--brand-light), #e8e0f8);\n    }\n\n    .template-card__preview--comparison {\n      background: linear-gradient(135deg, var(--gold-light), #e8f8ee);\n    }\n\n    .template-card__preview--pros {\n      background: linear-gradient(135deg, #e8f8ee, #e8f1f8);\n    }\n\n    .template-card__preview--amazon {\n      background: linear-gradient(135deg, #fff0e8, var(--gold-light));\n    }\n\n    .template-card__preview--schedule {\n      background: linear-gradient(135deg, #fce8f4, var(--brand-light));\n    }\n\n    .template-card__preview--league {\n      background: linear-gradient(135deg, #e8f1f8, #e8f6f8);\n    }\n\n    .template-card__preview--feature {\n      background: linear-gradient(135deg, #f0e8f8, #e8f1f8);\n    }\n\n    .template-card__preview--rating {\n      background: linear-gradient(135deg, var(--gold-light), #fce8f4);\n    }\n\n    .template-card__body {\n      padding: 18px;\n    }\n\n    .template-card__name {\n      font-weight: 700;\n      font-size: 15px;\n      letter-spacing: -0.3px;\n      margin-bottom: 4px;\n    }\n\n    .template-card__desc {\n      font-size: 12px;\n      color: var(--ink-muted);\n    }\n\n    \/* \u2500\u2500 Lazy Loading Mockup \u2500\u2500 *\/\n    .mockup-lazy {\n      max-width: 600px;\n      margin: 32px auto 0;\n      border-radius: 12px;\n      overflow: hidden;\n      border: 1px solid var(--border);\n      box-shadow: 0 4px 16px rgba(0,0,0,0.04);\n    }\n\n    .mockup-lazy table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n\n    .mockup-lazy thead th {\n      background: var(--brand);\n      color: white;\n      padding: 12px 16px;\n      text-align: left;\n      font-weight: 600;\n      font-size: 11px;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n    }\n\n    .mockup-lazy tbody td {\n      padding: 12px 16px;\n      border-bottom: 1px solid var(--border-light);\n    }\n\n    .mockup-lazy tbody tr:nth-child(even) td {\n      background: var(--surface-cool);\n    }\n\n    .mockup-skeleton-row td {\n      position: relative;\n    }\n\n    .mockup-skeleton {\n      height: 12px;\n      background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);\n      background-size: 200% 100%;\n      animation: skeleton-pulse 1.5s ease-in-out infinite;\n      border-radius: 4px;\n    }\n\n    .mockup-skeleton--short {\n      width: 60%;\n    }\n\n    .mockup-skeleton--medium {\n      width: 80%;\n    }\n\n    .mockup-skeleton--long {\n      width: 90%;\n    }\n\n    @keyframes skeleton-pulse {\n      0% { background-position: 200% 0; }\n      100% { background-position: -200% 0; }\n    }\n\n    \/* \u2500\u2500 Gutenberg Mockup \u2500\u2500 *\/\n    .mockup-gutenberg {\n      max-width: 600px;\n      margin: 32px auto 0;\n      border-radius: 12px;\n      overflow: hidden;\n      border: 1px solid var(--border);\n      box-shadow: 0 4px 16px rgba(0,0,0,0.04);\n      background: var(--surface);\n    }\n\n    .mockup-gutenberg__toolbar {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 10px 16px;\n      background: var(--surface);\n      border-bottom: 1px solid var(--border-light);\n    }\n\n    .mockup-gutenberg__toolbar-btn {\n      width: 28px;\n      height: 28px;\n      border-radius: 4px;\n      background: var(--surface-cool);\n      border: 1px solid var(--border);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n      color: var(--ink-muted);\n    }\n\n    .mockup-gutenberg__toolbar-title {\n      font-size: 13px;\n      color: var(--ink-muted);\n      margin-left: auto;\n    }\n\n    .mockup-gutenberg__body {\n      padding: 24px;\n      min-height: 200px;\n    }\n\n    .mockup-gutenberg__inserter {\n      display: inline-flex;\n      align-items: center;\n      gap: 8px;\n      background: var(--surface-cool);\n      border: 1px solid var(--brand);\n      border-radius: 8px;\n      padding: 8px 14px;\n      margin-bottom: 16px;\n      font-size: 12px;\n      color: var(--brand);\n      font-weight: 600;\n    }\n\n    .mockup-gutenberg__inserter-icon {\n      width: 22px;\n      height: 22px;\n      border-radius: 4px;\n      background: var(--brand);\n      color: white;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 14px;\n    }\n\n    .mockup-gutenberg__block {\n      border: 2px solid var(--brand);\n      border-radius: 8px;\n      padding: 16px;\n      background: var(--brand-lighter);\n    }\n\n    .mockup-gutenberg__block-label {\n      font-size: 10px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      color: var(--brand);\n      margin-bottom: 8px;\n    }\n\n    .mockup-gutenberg__mini-table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 11px;\n      border-radius: 4px;\n      overflow: hidden;\n      border: 1px solid var(--border);\n    }\n\n    .mockup-gutenberg__mini-table th {\n      background: var(--brand);\n      color: white;\n      padding: 6px 10px;\n      text-align: left;\n      font-size: 9px;\n      font-weight: 600;\n    }\n\n    .mockup-gutenberg__mini-table td {\n      padding: 5px 10px;\n      border-bottom: 1px solid var(--border-light);\n      font-size: 10px;\n    }\n\n    .mockup-gutenberg__mini-table tr:last-child td {\n      border-bottom: none;\n    }\n\n    \/* \u2500\u2500 All Features Checklist \u2500\u2500 *\/\n    .checklist-section {\n      padding: 100px 0;\n      background: var(--surface-warm);\n    }\n\n    .checklist-section__title {\n      font-family: var(--serif);\n      font-size: clamp(32px, 4vw, 48px);\n      font-weight: 800;\n      letter-spacing: -1.5px;\n      text-align: center;\n      margin-bottom: 56px;\n    }\n\n    .checklist-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 40px 48px;\n    }\n\n    .checklist-group__title {\n      font-size: 13px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      color: var(--brand);\n      margin-bottom: 16px;\n      padding-bottom: 8px;\n      border-bottom: 2px solid var(--brand-light);\n    }\n\n    .checklist-group__items {\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .checklist-group__items li {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 14px;\n      color: var(--ink-soft);\n    }\n\n    .checklist-group__items li::before {\n      content: '';\n      width: 18px;\n      height: 18px;\n      background: var(--brand-light);\n      border-radius: 50%;\n      flex-shrink: 0;\n      background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 20 20' fill='%2310609e'%3E%3Cpath d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'\/%3E%3C\/svg%3E\");\n      background-size: 12px;\n      background-repeat: no-repeat;\n      background-position: center;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       HERO FEATURES (enhanced)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .hero-features {\n      padding: 120px 0 100px;\n      text-align: center;\n      position: relative;\n      overflow: hidden;\n      background: linear-gradient(180deg, var(--surface) 0%, var(--surface-cool) 100%);\n    }\n\n    .hero-features::before {\n      content: '';\n      position: absolute;\n      top: -100px;\n      left: 50%;\n      transform: translateX(-50%);\n      width: 800px;\n      height: 800px;\n      background: radial-gradient(circle, rgba(16,96,158,0.06) 0%, transparent 70%);\n      pointer-events: none;\n    }\n\n    .hero-features__label {\n      font-family: var(--mono);\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--brand);\n      text-transform: uppercase;\n      letter-spacing: 2px;\n      margin-bottom: 20px;\n    }\n\n    .hero-features__title {\n      font-family: var(--serif);\n      font-size: clamp(40px, 5.5vw, 64px);\n      font-weight: 800;\n      letter-spacing: -2px;\n      line-height: 1.08;\n      margin-bottom: 20px;\n      max-width: 700px;\n      margin-left: auto;\n      margin-right: auto;\n      position: relative;\n    }\n\n    .hero-features__title em {\n      font-style: normal;\n      color: var(--brand);\n    }\n\n    .hero-features__subtitle {\n      font-size: clamp(17px, 2vw, 20px);\n      color: var(--ink-soft);\n      max-width: 560px;\n      margin: 0 auto 36px;\n      line-height: 1.6;\n    }\n\n    .hero-features__actions {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 16px;\n      flex-wrap: wrap;\n      margin-bottom: 40px;\n    }\n\n    .hero-features__trust {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 24px;\n      font-size: 14px;\n      color: var(--ink-muted);\n    }\n\n    .hero-features__trust-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .hero-features__trust-icon {\n      color: var(--gold);\n      font-size: 16px;\n    }\n\n    .hero-features__trust-divider {\n      width: 1px;\n      height: 16px;\n      background: var(--border);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       THE GAP (Before \/ After)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .gap-section {\n      padding: 120px 0;\n      background: var(--surface);\n    }\n\n    .gap-section__header {\n      text-align: center;\n      margin-bottom: 64px;\n    }\n\n    .gap-section__label {\n      font-family: var(--mono);\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--brand);\n      text-transform: uppercase;\n      letter-spacing: 2px;\n      margin-bottom: 16px;\n    }\n\n    .gap-section__title {\n      font-family: var(--serif);\n      font-size: clamp(28px, 3.5vw, 42px);\n      font-weight: 700;\n      letter-spacing: -1px;\n      line-height: 1.15;\n      margin-bottom: 12px;\n    }\n\n    .gap-section__subtitle {\n      font-size: 17px;\n      color: var(--ink-muted);\n    }\n\n    .gap-toggle {\n      display: flex;\n      justify-content: center;\n      gap: 4px;\n      margin-bottom: 40px;\n      background: var(--surface-cool);\n      border-radius: 12px;\n      padding: 4px;\n      width: fit-content;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .gap-toggle__btn {\n      padding: 10px 28px;\n      border-radius: 10px;\n      border: none;\n      font-family: var(--sans);\n      font-size: 14px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s var(--ease-out-expo);\n      background: transparent;\n      color: var(--ink-muted);\n    }\n\n    .gap-toggle__btn--active {\n      background: var(--surface);\n      color: var(--ink);\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n\n    .gap-toggle__btn--pro.gap-toggle__btn--active {\n      background: var(--brand);\n      color: white;\n    }\n\n    .gap-display {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 32px;\n      max-width: 1000px;\n      margin: 0 auto;\n    }\n\n    .gap-table {\n      border-radius: 12px;\n      overflow: hidden;\n      border: 2px solid var(--border);\n      transition: all 0.5s var(--ease-out-expo);\n      position: relative;\n    }\n\n    .gap-table--free {\n      opacity: 1;\n    }\n\n    .gap-table--pro {\n      border-color: var(--brand);\n      box-shadow: 0 8px 32px rgba(16,96,158,0.12);\n    }\n\n    .gap-table__label {\n      padding: 12px 20px;\n      font-size: 12px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .gap-table--free .gap-table__label {\n      background: var(--surface-cool);\n      color: var(--ink-muted);\n    }\n\n    .gap-table--pro .gap-table__label {\n      background: var(--brand);\n      color: white;\n    }\n\n    .gap-table__pro-badge {\n      font-size: 9px;\n      background: var(--gold);\n      color: var(--ink);\n      padding: 2px 6px;\n      border-radius: 4px;\n    }\n\n    .gap-table table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: 13px;\n    }\n\n    .gap-table thead th {\n      padding: 10px 16px;\n      text-align: left;\n      font-weight: 600;\n      font-size: 11px;\n      text-transform: uppercase;\n      letter-spacing: 0.3px;\n      border-bottom: 1px solid var(--border-light);\n    }\n\n    .gap-table--free thead th {\n      background: var(--surface-cool);\n      color: var(--ink-muted);\n    }\n\n    .gap-table--pro thead th {\n      background: var(--brand-light);\n      color: var(--brand);\n    }\n\n    .gap-table tbody td {\n      padding: 11px 16px;\n      border-bottom: 1px solid var(--border-light);\n    }\n\n    .gap-table tbody tr:last-child td {\n      border-bottom: none;\n    }\n\n    .gap-table--pro .stars { color: var(--gold); letter-spacing: 1px; }\n\n    .gap-table--pro .cell-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      background: #dcfce7;\n      color: #166534;\n      border-radius: 4px;\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .gap-table--pro .cell-progress {\n      height: 6px;\n      background: var(--border-light);\n      border-radius: 3px;\n      overflow: hidden;\n      width: 80px;\n    }\n\n    .gap-table--pro .cell-progress__fill {\n      height: 100%;\n      background: var(--brand);\n      border-radius: 3px;\n    }\n\n    .gap-caption {\n      text-align: center;\n      margin-top: 32px;\n      font-size: 15px;\n      color: var(--ink-muted);\n      font-weight: 500;\n    }\n\n    .gap-caption strong {\n      color: var(--ink);\n    }\n\n    \/* Mobile: stacked with toggle *\/\n    .gap-display--mobile {\n      display: none;\n    }\n\n    .gap-display--mobile .gap-table {\n      display: none;\n    }\n\n    .gap-display--mobile .gap-table--visible {\n      display: block;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       PILLAR NAVIGATION\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    \/* Individual pillar *\/\n    .pillar {\n      padding: 120px 0;\n    }\n\n    .pillar--tinted {\n      background: var(--surface-cool);\n    }\n\n    .pillar > .container {\n      max-width: 1200px;\n      margin: 0 auto;\n      padding: 0 24px;\n    }\n\n    .pillar__header {\n      margin-bottom: 88px;\n      text-align: center;\n    }\n\n    .pillar__title {\n      font-family: var(--serif);\n      font-size: clamp(36px, 5vw, 56px);\n      font-weight: 800;\n      letter-spacing: -2px;\n      line-height: 1.1;\n      margin-bottom: 16px;\n    }\n\n    .pillar__subtitle {\n      font-size: 17px;\n      color: var(--ink-muted);\n      max-width: 520px;\n      margin-left: auto;\n      margin-right: auto;\n      line-height: 1.6;\n    }\n\n    \/* Pillar review quote *\/\n    .pillar__review {\n      margin-top: 72px;\n      padding: 28px 32px;\n      background: var(--surface-cool);\n      border-radius: 16px;\n      border-left: 4px solid var(--brand);\n      position: relative;\n    }\n\n    .pillar__review::before {\n      content: '\\201C';\n      position: absolute;\n      top: 16px;\n      left: 20px;\n      font-family: var(--serif);\n      font-size: 48px;\n      color: var(--brand);\n      opacity: 0.15;\n      line-height: 1;\n    }\n\n    .pillar__review-text {\n      font-size: 15px;\n      color: var(--ink-soft);\n      line-height: 1.7;\n      font-style: italic;\n      margin-bottom: 12px;\n    }\n\n    .pillar__review-author {\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--ink);\n    }\n\n    .pillar__review-source {\n      font-size: 12px;\n      color: var(--ink-muted);\n    }\n\n    .pillar__review-stars {\n      color: var(--gold);\n      font-size: 14px;\n      letter-spacing: 2px;\n      margin-bottom: 8px;\n    }\n\n    \/* Feature sub-section within a pillar *\/\n    .pillar-feature {\n      margin-bottom: 96px;\n    }\n\n    .pillar-feature:last-of-type {\n      margin-bottom: 0;\n    }\n\n    .pillar-feature .feature-section__title {\n      font-family: var(--sans);\n      font-size: clamp(20px, 2.2vw, 26px);\n      font-weight: 700;\n      letter-spacing: -0.3px;\n      color: var(--ink);\n    }\n\n    .pillar-feature .feature-section__subtitle {\n      font-size: 15px;\n      color: var(--ink-muted);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       MID-SECTION CTA\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .mid-cta {\n      padding: 64px 0;\n      text-align: center;\n      background: linear-gradient(135deg, var(--brand-light), var(--gold-light));\n    }\n\n    .mid-cta__text {\n      font-family: var(--serif);\n      font-size: clamp(22px, 3vw, 32px);\n      font-weight: 700;\n      letter-spacing: -0.5px;\n      margin-bottom: 20px;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       FREE VS PRO COMPARISON TABLE\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .compare-section {\n      padding: 120px 0;\n      background: var(--surface);\n    }\n\n    .compare-section__header {\n      text-align: center;\n      margin-bottom: 56px;\n    }\n\n    .compare-section__label {\n      font-family: var(--mono);\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--brand);\n      text-transform: uppercase;\n      letter-spacing: 2px;\n      margin-bottom: 16px;\n    }\n\n    .compare-section__title {\n      font-family: var(--serif);\n      font-size: clamp(28px, 3.5vw, 42px);\n      font-weight: 700;\n      letter-spacing: -1px;\n    }\n\n    .compare-table-wrapper {\n      max-width: 800px;\n      margin: 0 auto;\n      border-radius: 16px;\n      overflow: hidden;\n      box-shadow: 0 4px 24px rgba(0,0,0,0.06);\n      border: 1px solid var(--border);\n      background: var(--surface);\n    }\n\n    .compare-table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .compare-table thead th {\n      padding: 20px 24px;\n      font-size: 14px;\n      font-weight: 700;\n      text-align: center;\n      background: var(--surface-cool);\n      border-bottom: 2px solid var(--border);\n    }\n\n    .compare-table thead th:first-child {\n      text-align: left;\n      width: 40%;\n    }\n\n    .compare-table thead th:last-child {\n      background: var(--brand);\n      color: white;\n    }\n\n    .compare-table .compare-group {\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      color: var(--brand);\n      background: var(--brand-light);\n    }\n\n    .compare-table .compare-group td {\n      padding: 10px 24px;\n    }\n\n    .compare-table tbody td {\n      padding: 14px 24px;\n      font-size: 14px;\n      border-bottom: 1px solid var(--border-light);\n      text-align: center;\n      color: var(--ink-soft);\n    }\n\n    .compare-table tbody td:first-child {\n      text-align: left;\n      font-weight: 500;\n      color: var(--ink);\n    }\n\n    .compare-table tbody td:last-child {\n      background: rgba(16, 96, 158, 0.03);\n    }\n\n    .compare-table .check {\n      color: var(--brand);\n      font-size: 18px;\n      font-weight: 700;\n    }\n\n    .compare-table .check--gold {\n      color: var(--gold-dark);\n    }\n\n    .compare-table .cross {\n      color: var(--border);\n      font-size: 18px;\n    }\n\n    .compare-table .compare-value {\n      font-weight: 600;\n    }\n\n    .compare-table .compare-value--pro {\n      color: var(--brand);\n      font-weight: 700;\n    }\n\n    .compare-cta {\n      text-align: center;\n      padding: 32px 24px;\n      background: var(--surface-cool);\n      border-top: 2px solid var(--border);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       SOCIAL PROOF \/ REVIEWS\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .reviews-section {\n      padding: 120px 0;\n      background: var(--surface-cool);\n    }\n\n    .reviews-section__header {\n      text-align: center;\n      margin-bottom: 56px;\n    }\n\n    .reviews-section__title {\n      font-family: var(--serif);\n      font-size: clamp(28px, 3.5vw, 42px);\n      font-weight: 700;\n      letter-spacing: -1px;\n      margin-bottom: 12px;\n    }\n\n    .reviews-section__subtitle {\n      font-size: 17px;\n      color: var(--ink-muted);\n    }\n\n    .reviews-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 24px;\n      margin-bottom: 64px;\n    }\n\n    .review-card {\n      background: var(--surface);\n      border: 1px solid var(--border);\n      border-radius: 16px;\n      padding: 32px;\n      transition: all 0.4s var(--ease-out-expo);\n    }\n\n    .review-card:hover {\n      transform: translateY(-4px);\n      box-shadow: 0 12px 40px rgba(0,0,0,0.06);\n    }\n\n    .review-card__stars {\n      color: var(--gold);\n      font-size: 16px;\n      letter-spacing: 2px;\n      margin-bottom: 16px;\n    }\n\n    .review-card__text {\n      font-size: 15px;\n      color: var(--ink-soft);\n      line-height: 1.7;\n      margin-bottom: 20px;\n    }\n\n    .review-card__author {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--ink);\n    }\n\n    .review-card__source {\n      font-size: 12px;\n      color: var(--ink-muted);\n      margin-top: 2px;\n    }\n\n    \/* Stats bar *\/\n    .stats-bar {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 32px;\n      text-align: center;\n      padding: 48px 0 0;\n      border-top: 1px solid var(--border);\n    }\n\n    .stats-bar__item {\n      padding: 16px;\n    }\n\n    .stats-bar__value {\n      font-family: var(--serif);\n      font-size: clamp(32px, 3.5vw, 44px);\n      font-weight: 800;\n      color: var(--brand);\n      letter-spacing: -2px;\n      line-height: 1;\n      margin-bottom: 6px;\n    }\n\n    .stats-bar__label {\n      font-size: 13px;\n      color: var(--ink-muted);\n      font-weight: 500;\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       PRICING (ported from index.html)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .pricing-section {\n      padding: 120px 0;\n      background: var(--ink);\n      color: white;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .pricing-section::before {\n      content: '';\n      position: absolute;\n      top: -200px;\n      right: -200px;\n      width: 600px;\n      height: 600px;\n      background: radial-gradient(circle, rgba(16,96,158,0.3) 0%, transparent 70%);\n    }\n\n    .pricing-section__header {\n      text-align: center;\n      margin-bottom: 64px;\n      position: relative;\n    }\n\n    .pricing-section__label {\n      font-family: var(--mono);\n      font-size: 12px;\n      font-weight: 500;\n      color: var(--gold);\n      text-transform: uppercase;\n      letter-spacing: 2px;\n      margin-bottom: 20px;\n    }\n\n    .pricing-section__title {\n      font-family: var(--serif);\n      font-size: clamp(32px, 4vw, 48px);\n      font-weight: 800;\n      letter-spacing: -1.5px;\n      line-height: 1.15;\n    }\n\n    .pricing-grid {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: 24px;\n      max-width: 1100px;\n      margin: 0 auto;\n      position: relative;\n      align-items: start;\n    }\n\n    .plan-card {\n      border-radius: 20px;\n      padding: 40px 36px;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      background: rgba(255,255,255,0.06);\n      border: 1px solid rgba(255,255,255,0.1);\n    }\n\n    .plan-card--featured {\n      background: linear-gradient(135deg, var(--brand), var(--brand-dark));\n      border: 2px solid rgba(255,255,255,0.15);\n      box-shadow: 0 20px 60px rgba(16, 96, 158, 0.4);\n      transform: scale(1.04);\n    }\n\n    .plan-card--lifetime {\n      background: linear-gradient(135deg, rgba(255,196,3,0.12), rgba(255,196,3,0.04));\n      border: 2px solid rgba(255,196,3,0.3);\n    }\n\n    .plan-card__name {\n      font-family: var(--serif);\n      font-size: 24px;\n      font-weight: 700;\n      margin-bottom: 12px;\n      color: var(--brand-light);\n    }\n\n    .plan-card--featured .plan-card__name { color: white; }\n    .plan-card--lifetime .plan-card__name { color: var(--gold); }\n\n    .plan-card__badge {\n      display: inline-block;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 4px 14px;\n      border-radius: 6px;\n      letter-spacing: 0.3px;\n      margin-bottom: 20px;\n      width: fit-content;\n    }\n\n    .plan-card__badge--starter {\n      background: rgba(255,255,255,0.1);\n      color: rgba(255,255,255,0.7);\n      border: 1px solid rgba(255,255,255,0.15);\n    }\n\n    .plan-card__badge--flexible {\n      background: var(--brand-light);\n      color: var(--brand);\n    }\n\n    .plan-card__badge--popular {\n      background: var(--gold);\n      color: var(--ink);\n      font-weight: 700;\n    }\n\n    .plan-card__amount {\n      font-family: var(--serif);\n      font-size: 52px;\n      font-weight: 800;\n      letter-spacing: -2px;\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .plan-card__period {\n      font-size: 13px;\n      opacity: 0.5;\n      margin-bottom: 28px;\n    }\n\n    .plan-card__features {\n      list-style: none;\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      margin-bottom: 32px;\n      flex: 1;\n    }\n\n    .plan-card__features li {\n      display: flex;\n      align-items: flex-start;\n      gap: 10px;\n      font-size: 14px;\n      line-height: 1.5;\n    }\n\n    .plan-card__features li::before {\n      content: '\\2713';\n      color: var(--gold);\n      font-weight: 700;\n      flex-shrink: 0;\n      margin-top: 1px;\n    }\n\n    .plan-card__cta {\n      display: block;\n      width: 100%;\n      text-align: center;\n      margin-bottom: 12px;\n    }\n\n    .plan-card__guarantee {\n      font-size: 12px;\n      text-align: center;\n      opacity: 0.5;\n    }\n\n    .btn--white {\n      background: white;\n      color: var(--brand);\n      box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n    }\n\n    .btn--white:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 28px rgba(0,0,0,0.2);\n    }\n\n    .btn--outline-white {\n      background: transparent;\n      color: white;\n      border: 2px solid rgba(255,255,255,0.2);\n    }\n\n    .btn--outline-white:hover {\n      border-color: rgba(255,255,255,0.5);\n      transform: translateY(-2px);\n    }\n\n    .btn--navy {\n      background: var(--ink);\n      color: var(--gold);\n      box-shadow: 0 4px 16px rgba(0,0,0,0.3);\n    }\n\n    .btn--navy:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 28px rgba(0,0,0,0.4);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       DEVICE TOGGLE\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    .device-toggle {\n      display: flex;\n      justify-content: center;\n      gap: 4px;\n      margin-bottom: 24px;\n      background: var(--surface-cool);\n      border-radius: 10px;\n      padding: 4px;\n      width: fit-content;\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .device-toggle__btn {\n      padding: 8px 20px;\n      border-radius: 8px;\n      border: none;\n      font-family: var(--sans);\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s var(--ease-out-expo);\n      background: transparent;\n      color: var(--ink-muted);\n    }\n\n    .device-toggle__btn--active {\n      background: var(--surface);\n      color: var(--ink);\n      box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n    }\n\n    .mockup-device--dimmed {\n      opacity: 0.3;\n      transform: scale(0.95);\n      transition: all 0.4s var(--ease-out-expo);\n    }\n\n    .mockup-device--highlighted {\n      opacity: 1;\n      transform: scale(1.02);\n      transition: all 0.4s var(--ease-out-expo);\n      box-shadow: 0 8px 32px rgba(0,0,0,0.1);\n    }\n\n    \/* \u2500\u2500 Final CTA \u2500\u2500 *\/\n    .cta-final {\n      padding: 120px 0;\n      text-align: center;\n      position: relative;\n      overflow: hidden;\n      background: linear-gradient(180deg, var(--surface) 0%, var(--brand-light) 100%);\n    }\n\n    .cta-final::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 800px;\n      height: 800px;\n      background: radial-gradient(circle, rgba(16,96,158,0.08) 0%, transparent 70%);\n      pointer-events: none;\n    }\n\n    .cta-final__headline {\n      font-family: var(--serif);\n      font-size: clamp(36px, 5vw, 56px);\n      font-weight: 800;\n      line-height: 1.1;\n      letter-spacing: -2px;\n      max-width: 600px;\n      margin: 0 auto 12px;\n      position: relative;\n    }\n\n    .cta-final__headline em {\n      font-style: normal;\n      color: var(--brand);\n    }\n\n    .cta-final__text {\n      font-size: 17px;\n      color: var(--ink-soft);\n      max-width: 400px;\n      margin: 0 auto 40px;\n      line-height: 1.6;\n    }\n\n    .cta-final__actions {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 16px;\n      flex-wrap: wrap;\n      margin-bottom: 24px;\n    }\n\n    .cta-final__note {\n      font-size: 13px;\n      color: var(--ink-muted);\n    }\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       RESPONSIVE\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    @media (max-width: 1024px) {\n      .feature-split {\n        grid-template-columns: 1fr;\n        gap: 40px;\n      }\n\n      .feature-split--reverse {\n        direction: ltr;\n      }\n\n      .elements-grid {\n        grid-template-columns: repeat(4, 1fr);\n      }\n\n      .mockup-editor {\n        flex-direction: column;\n      }\n\n      .mockup-sidebar {\n        width: 100%;\n        border-right: none;\n        border-bottom: 1px solid var(--plugin-border);\n      }\n\n      .mockup-sidebar__elements {\n        grid-template-columns: repeat(3, 1fr);\n      }\n\n      .mockup-sticky-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .mockup-styling-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .checklist-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n\n      .gap-display {\n        grid-template-columns: 1fr;\n        gap: 24px;\n      }\n\n      .reviews-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n\n      .pricing-grid {\n        grid-template-columns: 1fr;\n        max-width: 440px;\n      }\n\n      .plan-card--featured {\n        transform: none;\n      }\n\n      .stats-bar {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 768px) {\n      .feature-section {\n        padding: 72px 0;\n      }\n\n      .page-header {\n        padding: 56px 0 40px;\n      }\n\n      .elements-grid {\n        grid-template-columns: repeat(2, 1fr);\n        gap: 12px;\n      }\n\n      .mockup-devices {\n        gap: 16px;\n      }\n\n      .mockup-device--desktop {\n        width: 180px;\n      }\n\n      .mockup-device--tablet {\n        width: 120px;\n      }\n\n      .mockup-device--phone {\n        width: 70px;\n      }\n\n      .mockup-data-table {\n        font-size: 11px;\n      }\n\n      .mockup-data-table thead th,\n      .mockup-data-table tbody td {\n        padding: 8px 10px;\n      }\n\n      .mockup-search-input {\n        flex: 1;\n      }\n\n      .checklist-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .gap-display--desktop {\n        display: none;\n      }\n\n      .gap-display--mobile {\n        display: block;\n      }\n\n      .reviews-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .hero-features__trust {\n        flex-direction: column;\n        gap: 12px;\n      }\n\n      .hero-features__trust-divider {\n        display: none;\n      }\n\n      .compare-table thead th,\n      .compare-table tbody td {\n        padding: 12px 16px;\n        font-size: 13px;\n      }\n\n      .cta-final__actions {\n        flex-direction: column;\n        align-items: stretch;\n        max-width: 360px;\n        margin-left: auto;\n        margin-right: auto;\n      }\n\n      .btn { justify-content: center; }\n    }\n\n    @media (max-width: 480px) {\n      .elements-grid {\n        grid-template-columns: repeat(2, 1fr);\n      }\n\n      .mockup-devices {\n        gap: 10px;\n      }\n\n      .mockup-device--desktop {\n        width: 140px;\n      }\n\n      .mockup-device--tablet {\n        width: 90px;\n      }\n\n      .mockup-device--phone {\n        width: 60px;\n      }\n\n      .feature-section {\n        padding: 56px 0;\n      }\n\n      .container {\n        padding: 0 16px;\n      }\n\n      .template-card {\n        flex: 0 0 220px;\n      }\n    }\n<\/style>\n\n\n\n<div class=\"scroll-progress\" id=\"scrollProgress\"><\/div>\n\n\n\n<div class=\"wp-block-group wptb-landing is-layout-flow wp-block-group-is-layout-flow\">\n<section class=\"hero-features\">\n    <div class=\"container\">\n      <div class=\"hero-features__label reveal-fade\">WP Table Builder Pro<\/div>\n      <h1 class=\"hero-features__title reveal-fade\">\n        Tables that <em>sell<\/em>,<br>not just display\n      <\/h1>\n      <p class=\"hero-features__subtitle reveal-fade\">\n        Stop losing conversions to ugly, unresponsive data tables. Build tables that look professional, work on every device, and guide visitors to click.\n      <\/p>\n      <div class=\"hero-features__actions reveal\">\n        <a href=\"https:\/\/wptablebuilder.com\/pricing\/\" class=\"btn btn--gold btn-magnetic\">\n          <span>Get Pro Now<\/span>\n          <span class=\"btn__arrow\">&rarr;<\/span>\n        <\/a>\n        <a href=\"#pillar-beautiful\" class=\"btn btn--ghost\"><span>See What&#8217;s Included<\/span><\/a>\n      <\/div>\n      <div class=\"hero-features__trust reveal-fade\">\n        <div class=\"hero-features__trust-item\">\n          <span class=\"hero-features__trust-icon\">&#9733;<\/span>\n          50,000+ Active Installs\n        <\/div>\n        <div class=\"hero-features__trust-divider\"><\/div>\n        <div class=\"hero-features__trust-item\">\n          <span class=\"hero-features__trust-icon\">&#9733;<\/span>\n          4.8\/5 Average Rating\n        <\/div>\n        <div class=\"hero-features__trust-divider\"><\/div>\n        <div class=\"hero-features__trust-item\">\n          <span class=\"hero-features__trust-icon\">&#9733;<\/span>\n          WordPress.org Verified\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n\n<section class=\"gap-section\">\n    <div class=\"container\">\n      <div class=\"gap-section__header\">\n        <div class=\"gap-section__label reveal-fade\">The difference<\/div>\n        <h2 class=\"gap-section__title reveal-fade\">Same data. Different results.<\/h2>\n        <p class=\"gap-section__subtitle reveal-fade\">See what Pro does to an ordinary table<\/p>\n      <\/div>\n\n      <!-- Desktop: side by side -->\n      <div class=\"gap-display gap-display--desktop reveal\">\n        <div class=\"gap-table gap-table--free\">\n          <div class=\"gap-table__label\">Free Version<\/div>\n          <table>\n            <thead>\n              <tr><th>Product<\/th><th>Category<\/th><th>Rating<\/th><th>Price<\/th><\/tr>\n            <\/thead>\n            <tbody>\n              <tr><td>Starter Kit<\/td><td>Essentials<\/td><td>4\/5<\/td><td>$29<\/td><\/tr>\n              <tr><td>Pro Bundle<\/td><td>Premium<\/td><td>5\/5<\/td><td>$49<\/td><\/tr>\n              <tr><td>Team Plan<\/td><td>Business<\/td><td>5\/5<\/td><td>$99<\/td><\/tr>\n              <tr><td>Enterprise<\/td><td>Business<\/td><td>4\/5<\/td><td>$199<\/td><\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n        <div class=\"gap-table gap-table--pro\">\n          <div class=\"gap-table__label\">Pro Version <span class=\"gap-table__pro-badge\">PRO<\/span><\/div>\n          <table>\n            <thead>\n              <tr><th>Product<\/th><th>Category<\/th><th>Rating<\/th><th>Price<\/th><\/tr>\n            <\/thead>\n            <tbody>\n              <tr>\n                <td><strong>Starter Kit<\/strong><\/td>\n                <td><span class=\"cell-badge\">Essentials<\/span><\/td>\n                <td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9734;<\/span><\/td>\n                <td><strong style=\"color: var(--brand);\">$29<\/strong><\/td>\n              <\/tr>\n              <tr>\n                <td><strong>Pro Bundle<\/strong><\/td>\n                <td><span class=\"cell-badge\" style=\"background: #fef3c7; color: #92400e;\">Popular<\/span><\/td>\n                <td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/span><\/td>\n                <td><strong style=\"color: var(--brand);\">$49<\/strong><\/td>\n              <\/tr>\n              <tr>\n                <td><strong>Team Plan<\/strong><\/td>\n                <td><span class=\"cell-badge\">Business<\/span><\/td>\n                <td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/span><\/td>\n                <td><strong style=\"color: var(--brand);\">$99<\/strong><\/td>\n              <\/tr>\n              <tr>\n                <td><strong>Enterprise<\/strong><\/td>\n                <td><span class=\"cell-badge\" style=\"background: #e0e7ff; color: #3730a3;\">Premium<\/span><\/td>\n                <td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9734;<\/span><\/td>\n                <td><strong style=\"color: var(--brand);\">$199<\/strong><\/td>\n              <\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n      <\/div>\n\n      <!-- Mobile: tabbed -->\n      <div class=\"gap-display gap-display--mobile\">\n        <div class=\"gap-toggle\">\n          <button class=\"gap-toggle__btn gap-toggle__btn--free gap-toggle__btn--active\" data-target=\"free\">Free Version<\/button>\n          <button class=\"gap-toggle__btn gap-toggle__btn--pro\" data-target=\"pro\">Pro Version<\/button>\n        <\/div>\n        <div class=\"gap-table gap-table--free gap-table--visible\" data-gap=\"free\">\n          <table>\n            <thead>\n              <tr><th>Product<\/th><th>Category<\/th><th>Rating<\/th><th>Price<\/th><\/tr>\n            <\/thead>\n            <tbody>\n              <tr><td>Starter Kit<\/td><td>Essentials<\/td><td>4\/5<\/td><td>$29<\/td><\/tr>\n              <tr><td>Pro Bundle<\/td><td>Premium<\/td><td>5\/5<\/td><td>$49<\/td><\/tr>\n              <tr><td>Team Plan<\/td><td>Business<\/td><td>5\/5<\/td><td>$99<\/td><\/tr>\n              <tr><td>Enterprise<\/td><td>Business<\/td><td>4\/5<\/td><td>$199<\/td><\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n        <div class=\"gap-table gap-table--pro\" data-gap=\"pro\">\n          <table>\n            <thead>\n              <tr><th>Product<\/th><th>Category<\/th><th>Rating<\/th><th>Price<\/th><\/tr>\n            <\/thead>\n            <tbody>\n              <tr>\n                <td><strong>Starter Kit<\/strong><\/td>\n                <td><span class=\"cell-badge\">Essentials<\/span><\/td>\n                <td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9734;<\/span><\/td>\n                <td><strong style=\"color: var(--brand);\">$29<\/strong><\/td>\n              <\/tr>\n              <tr>\n                <td><strong>Pro Bundle<\/strong><\/td>\n                <td><span class=\"cell-badge\" style=\"background: #fef3c7; color: #92400e;\">Popular<\/span><\/td>\n                <td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/span><\/td>\n                <td><strong style=\"color: var(--brand);\">$49<\/strong><\/td>\n              <\/tr>\n              <tr>\n                <td><strong>Team Plan<\/strong><\/td>\n                <td><span class=\"cell-badge\">Business<\/span><\/td>\n                <td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/span><\/td>\n                <td><strong style=\"color: var(--brand);\">$99<\/strong><\/td>\n              <\/tr>\n              <tr>\n                <td><strong>Enterprise<\/strong><\/td>\n                <td><span class=\"cell-badge\" style=\"background: #e0e7ff; color: #3730a3;\">Premium<\/span><\/td>\n                <td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9734;<\/span><\/td>\n                <td><strong style=\"color: var(--brand);\">$199<\/strong><\/td>\n              <\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n      <\/div>\n\n      <p class=\"gap-caption reveal-fade\"><strong>Same data.<\/strong> One looks like a spreadsheet. The other closes deals.<\/p>\n    <\/div>\n  <\/section>\n\n\n\n<div class=\"pillar pillar--tinted\" id=\"pillar-beautiful\">\n    <div class=\"container\">\n          <div class=\"pillar__header reveal-fade\">\n            <h2 class=\"pillar__title\">Make it beautiful<\/h2>\n            <p class=\"pillar__subtitle\">14 content elements, full style control, and 27 templates to make every table on-brand and conversion-ready.<\/p>\n          <\/div>\n\n          <!-- 14 Content Elements -->\n          <div class=\"pillar-feature\">\n            <div class=\"feature-centered\">\n              <h3 class=\"feature-section__title reveal-fade\">14 Content Elements<\/h3>\n              <p class=\"feature-section__subtitle reveal-fade\">Every element you need, built into every cell<\/p>\n            <\/div>\n            <div class=\"elements-grid reveal-stagger\">\n              <div class=\"element-card reveal\" style=\"--i: 0\"><div class=\"element-card__icon\">A<\/div><div class=\"element-card__name\">Text<\/div><div class=\"element-card__desc\">Rich text with formatting<\/div><\/div>\n              <div class=\"element-card reveal\" style=\"--i: 1\"><div class=\"element-card__icon\">&#x1F4F7;<\/div><div class=\"element-card__name\">Image<\/div><div class=\"element-card__desc\">Photos and graphics<\/div><\/div>\n              <div class=\"element-card reveal\" style=\"--i: 2\"><div class=\"element-card__icon\">&#x25B6;<\/div><div class=\"element-card__name\">Button<\/div><div class=\"element-card__desc\">Call-to-action buttons<\/div><\/div>\n              <div class=\"element-card reveal\" style=\"--i: 3\"><div class=\"element-card__icon\">&#x1F4CB;<\/div><div class=\"element-card__name\">List<\/div><div class=\"element-card__desc\">Ordered and unordered lists<\/div><\/div>\n              <div class=\"element-card reveal\" style=\"--i: 4\"><div class=\"element-card__icon\">&#x2B50;<\/div><div class=\"element-card__name\">Star Rating<\/div><div class=\"element-card__desc\">Visual star scores<\/div><\/div>\n              <div class=\"element-card reveal\" style=\"--i: 5\"><div class=\"element-card__icon\">&lt;\/&gt;<\/div><div class=\"element-card__name\">Custom HTML<\/div><div class=\"element-card__desc\">Raw HTML content<\/div><\/div>\n              <div class=\"element-card reveal\" style=\"--i: 6\"><div class=\"element-card__icon\">[ ]<\/div><div class=\"element-card__name\">Shortcode<\/div><div class=\"element-card__desc\">WordPress shortcodes<\/div><\/div>\n              <div class=\"element-card element-card--pro reveal\" style=\"--i: 7\"><span class=\"element-card__pro-tag\">PRO<\/span><div class=\"element-card__icon\">&#x1F3C6;<\/div><div class=\"element-card__name\">Badge<\/div><div class=\"element-card__desc\">Status labels and tags<\/div><\/div>\n              <div class=\"element-card element-card--pro reveal\" style=\"--i: 8\"><span class=\"element-card__pro-tag\">PRO<\/span><div class=\"element-card__icon\">&#x2B55;<\/div><div class=\"element-card__name\">Circle Rating<\/div><div class=\"element-card__desc\">Circular percentage display<\/div><\/div>\n              <div class=\"element-card element-card--pro reveal\" style=\"--i: 9\"><span class=\"element-card__pro-tag\">PRO<\/span><div class=\"element-card__icon\">&#x1F4C8;<\/div><div class=\"element-card__name\">Progress Bar<\/div><div class=\"element-card__desc\">Horizontal comparison bars<\/div><\/div>\n              <div class=\"element-card element-card--pro reveal\" style=\"--i: 10\"><span class=\"element-card__pro-tag\">PRO<\/span><div class=\"element-card__icon\">&#x1F3F7;<\/div><div class=\"element-card__name\">Ribbon<\/div><div class=\"element-card__desc\">Decorative banner labels<\/div><\/div>\n              <div class=\"element-card element-card--pro reveal\" style=\"--i: 11\"><span class=\"element-card__pro-tag\">PRO<\/span><div class=\"element-card__icon\">&#x2630;<\/div><div class=\"element-card__name\">Styled List<\/div><div class=\"element-card__desc\">Formatted lists with icons<\/div><\/div>\n              <div class=\"element-card element-card--pro reveal\" style=\"--i: 12\"><span class=\"element-card__pro-tag\">PRO<\/span><div class=\"element-card__icon\">&#x1F4AC;<\/div><div class=\"element-card__name\">Text Icon<\/div><div class=\"element-card__desc\">Combined text and icon<\/div><\/div>\n              <div class=\"element-card element-card--pro reveal\" style=\"--i: 13\"><span class=\"element-card__pro-tag\">PRO<\/span><div class=\"element-card__icon\">&#x2605;<\/div><div class=\"element-card__name\">Icon<\/div><div class=\"element-card__desc\">Standalone icon display<\/div><\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Styling & Customization -->\n          <div class=\"pillar-feature\">\n            <div class=\"feature-split\">\n              <div class=\"reveal-left\">\n                <h3 class=\"feature-section__title\">Styling &#038; Customization<\/h3>\n                <p class=\"feature-section__desc\">\n                  Control the visual design of every table element. Set background colors per cell, row, or column. Customize borders, border radius, fonts, text colors, and link styles. Every table matches your brand.\n                <\/p>\n              <\/div>\n              <div class=\"reveal-right\">\n                <div class=\"mockup-styling-layout\">\n                  <div class=\"mockup-settings-panel\">\n                    <div class=\"mockup-settings-section\">\n                      <div class=\"mockup-settings-section__title\">&#x1F4D0; Border<\/div>\n                      <div class=\"mockup-border-controls\">\n                        <div class=\"mockup-border-select\">Solid &#x25BC;<\/div>\n                        <div class=\"mockup-border-select\">1px<\/div>\n                        <div class=\"mockup-color-swatch\" style=\"background: #cbd5e0;\"><\/div>\n                      <\/div>\n                    <\/div>\n                    <div class=\"mockup-settings-section\">\n                      <div class=\"mockup-settings-section__title\">&#x1F3A8; Background<\/div>\n                      <div class=\"mockup-color-row\"><div class=\"mockup-color-swatch\" style=\"background: #2c5282;\"><\/div><span>Header row<\/span><\/div>\n                      <div class=\"mockup-color-row\"><div class=\"mockup-color-swatch\" style=\"background: #ebf8ff;\"><\/div><span>Odd rows<\/span><\/div>\n                      <div class=\"mockup-color-row\"><div class=\"mockup-color-swatch\" style=\"background: #ffffff;\"><\/div><span>Even rows<\/span><\/div>\n                    <\/div>\n                    <div class=\"mockup-settings-section\">\n                      <div class=\"mockup-settings-section__title\">&#x1F524; Font Style<\/div>\n                      <div class=\"mockup-font-controls\">\n                        <div class=\"mockup-color-swatch\" style=\"background: #2d3748;\"><\/div>\n                        <div class=\"mockup-border-select\">14px<\/div>\n                        <div class=\"mockup-border-select\">Regular &#x25BC;<\/div>\n                      <\/div>\n                    <\/div>\n                  <\/div>\n                  <div class=\"mockup-styled-table\">\n                    <table>\n                      <thead><tr><th>Service<\/th><th>Tier<\/th><th>Status<\/th><\/tr><\/thead>\n                      <tbody>\n                        <tr><td>Hosting<\/td><td>Premium<\/td><td>Active<\/td><\/tr>\n                        <tr><td>CDN<\/td><td>Business<\/td><td>Active<\/td><\/tr>\n                        <tr><td>Analytics<\/td><td>Pro<\/td><td>Active<\/td><\/tr>\n                        <tr><td>Backup<\/td><td>Basic<\/td><td>Pending<\/td><\/tr>\n                      <\/tbody>\n                    <\/table>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- 27 Templates -->\n          <div class=\"pillar-feature\">\n            <div class=\"feature-centered\">\n              <h3 class=\"feature-section__title reveal-fade\">27 Pre-Built Templates<\/h3>\n              <p class=\"feature-section__subtitle reveal-fade\">Start with a professionally designed template, customize it to match your brand<\/p>\n            <\/div>\n            <div class=\"templates-scroll\">\n              <div class=\"template-card\"><div class=\"template-card__preview template-card__preview--pricing\">&#x1F4B0;<\/div><div class=\"template-card__body\"><div class=\"template-card__name\">Pricing Table<\/div><div class=\"template-card__desc\">Compare plans side by side<\/div><\/div><\/div>\n              <div class=\"template-card\"><div class=\"template-card__preview template-card__preview--comparison\">&#x2696;<\/div><div class=\"template-card__body\"><div class=\"template-card__name\">Product Comparison<\/div><div class=\"template-card__desc\">Feature-by-feature breakdown<\/div><\/div><\/div>\n              <div class=\"template-card\"><div class=\"template-card__preview template-card__preview--pros\">&#x2705;<\/div><div class=\"template-card__body\"><div class=\"template-card__name\">Pros &#038; Cons<\/div><div class=\"template-card__desc\">Balanced product reviews<\/div><\/div><\/div>\n              <div class=\"template-card\"><div class=\"template-card__preview template-card__preview--amazon\">&#x1F4E6;<\/div><div class=\"template-card__body\"><div class=\"template-card__name\">Amazon-Style<\/div><div class=\"template-card__desc\">Product listing format<\/div><\/div><\/div>\n              <div class=\"template-card\"><div class=\"template-card__preview template-card__preview--schedule\">&#x1F4C5;<\/div><div class=\"template-card__body\"><div class=\"template-card__name\">Schedule<\/div><div class=\"template-card__desc\">Event and time grids<\/div><\/div><\/div>\n              <div class=\"template-card\"><div class=\"template-card__preview template-card__preview--league\">&#x26BD;<\/div><div class=\"template-card__body\"><div class=\"template-card__name\">League &#038; Scores<\/div><div class=\"template-card__desc\">Sports standings tables<\/div><\/div><\/div>\n              <div class=\"template-card\"><div class=\"template-card__preview template-card__preview--feature\">&#x1F527;<\/div><div class=\"template-card__body\"><div class=\"template-card__name\">Feature Comparison<\/div><div class=\"template-card__desc\">Checkmark grids<\/div><\/div><\/div>\n              <div class=\"template-card\"><div class=\"template-card__preview template-card__preview--rating\">&#x2B50;<\/div><div class=\"template-card__body\"><div class=\"template-card__name\">Rating Box<\/div><div class=\"template-card__desc\">Visual review summaries<\/div><\/div><\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Review quote -->\n          <div class=\"pillar__review reveal\">\n            <div class=\"pillar__review-stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/div>\n            <p class=\"pillar__review-text\">The customization options are incredible. I can match any table to my brand perfectly. The Pro elements like badges and progress bars make my comparison tables look professional.<\/p>\n            <div class=\"pillar__review-author\">@developer2023<\/div>\n            <div class=\"pillar__review-source\">WordPress.org review<\/div>\n          <\/div>\n    <\/div>\n  <\/div>\n\n\n\n<div class=\"pillar\" id=\"pillar-usable\">\n    <div class=\"container\">\n          <div class=\"pillar__header reveal-fade\">\n            <h2 class=\"pillar__title\">Make it usable<\/h2>\n            <p class=\"pillar__subtitle\">Search, sort, paginate, and pin headers so visitors find what they need in tables of any size.<\/p>\n          <\/div>\n\n          <!-- Search, Sort & Pagination -->\n          <div class=\"pillar-feature\">\n            <div class=\"feature-centered\">\n              <h3 class=\"feature-section__title reveal-fade\">Search, Sort &#038; Pagination<\/h3>\n              <p class=\"feature-section__desc reveal-fade\" style=\"margin-left:auto;margin-right:auto;max-width:640px;\">\n                Large tables become usable with built-in search filtering, column sorting with one click, and automatic pagination that splits content into manageable pages.\n              <\/p>\n            <\/div>\n            <div class=\"mockup-interactive-table reveal-scale\">\n              <div class=\"mockup-search-bar\">\n                <div class=\"mockup-search-input\">\n                  <span class=\"mockup-search-input__icon\">&#x1F50D;<\/span>\n                  <span>Search table&#8230;<\/span>\n                <\/div>\n                <div class=\"mockup-sticky-badge\">&#x1F4CC; Sticky Header<\/div>\n              <\/div>\n              <table class=\"mockup-data-table\">\n                <thead>\n                  <tr>\n                    <th>Product <span class=\"sort-arrows\">&#x25B2;&#x25BC;<\/span><\/th>\n                    <th>Category <span class=\"sort-arrows\">&#x25B2;&#x25BC;<\/span><\/th>\n                    <th>Rating <span class=\"sort-arrows\">&#x25B2;&#x25BC;<\/span><\/th>\n                    <th>Price <span class=\"sort-arrows sort-arrows--active\">&#x25B2;<\/span><\/th>\n                  <\/tr>\n                <\/thead>\n                <tbody>\n                  <tr><td><strong>Starter Kit<\/strong><\/td><td>Essentials<\/td><td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9734;<\/span><\/td><td><span class=\"price\">$29<\/span><\/td><\/tr>\n                  <tr><td><strong>Pro Bundle<\/strong><\/td><td>Premium<\/td><td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/span><\/td><td><span class=\"price\">$49<\/span><\/td><\/tr>\n                  <tr><td><strong>Team Plan<\/strong><\/td><td>Business<\/td><td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/span><\/td><td><span class=\"price\">$99<\/span><\/td><\/tr>\n                  <tr><td><strong>Enterprise<\/strong><\/td><td>Business<\/td><td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9734;<\/span><\/td><td><span class=\"price\">$199<\/span><\/td><\/tr>\n                  <tr><td><strong>Custom Build<\/strong><\/td><td>Enterprise<\/td><td><span class=\"stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/span><\/td><td><span class=\"price\">$349<\/span><\/td><\/tr>\n                <\/tbody>\n              <\/table>\n              <div class=\"mockup-pagination\">\n                <div class=\"mockup-pagination__btn mockup-pagination__btn--arrow\">&#x2190;<\/div>\n                <div class=\"mockup-pagination__btn\">1<\/div>\n                <div class=\"mockup-pagination__btn mockup-pagination__btn--active\">2<\/div>\n                <div class=\"mockup-pagination__btn\">3<\/div>\n                <div class=\"mockup-pagination__dots\">&#8230;<\/div>\n                <div class=\"mockup-pagination__btn\">8<\/div>\n                <div class=\"mockup-pagination__btn mockup-pagination__btn--arrow\">&#x2192;<\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Sticky Headers & Columns -->\n          <div class=\"pillar-feature\">\n            <div class=\"feature-split feature-split--reverse\">\n              <div class=\"reveal-left\">\n                <h3 class=\"feature-section__title\">Sticky Headers &#038; Columns<\/h3>\n                <p class=\"feature-section__desc\">\n                  When visitors scroll through long tables, the header row and first column stay pinned in place. Column and row context is never lost, even on tables with dozens of rows or columns.\n                <\/p>\n              <\/div>\n              <div class=\"reveal-right\">\n                <div class=\"mockup-sticky-layout\">\n                  <div class=\"mockup-sticky-table\">\n                    <table>\n                      <thead><tr><th><span>&#x1F4CC;<\/span> Feature<\/th><th>Basic<\/th><th>Pro<\/th><th>Enterprise<\/th><\/tr><\/thead>\n                      <tbody>\n                        <tr><td>Storage<\/td><td>5 GB<\/td><td>50 GB<\/td><td>Unlimited<\/td><\/tr>\n                        <tr><td>Users<\/td><td>1<\/td><td>10<\/td><td>Unlimited<\/td><\/tr>\n                        <tr><td>Support<\/td><td>Email<\/td><td>Priority<\/td><td>Dedicated<\/td><\/tr>\n                        <tr><td>API<\/td><td>&#8211;<\/td><td>REST<\/td><td>REST + GraphQL<\/td><\/tr>\n                      <\/tbody>\n                    <\/table>\n                    <div class=\"scroll-hint\">&#x2194; Scroll to see more columns<\/div>\n                  <\/div>\n                  <div class=\"mockup-settings\">\n                    <div class=\"mockup-settings__header\">&#x1F4CC; Sticky<\/div>\n                    <div class=\"mockup-settings__body\">\n                      <div class=\"mockup-settings__row\"><span>Make top row sticky<\/span><div class=\"mockup-toggle mockup-toggle--on\"><div class=\"mockup-toggle__knob\"><\/div><\/div><\/div>\n                      <div class=\"mockup-settings__row\"><span>Make first column sticky<\/span><div class=\"mockup-toggle mockup-toggle--on\"><div class=\"mockup-toggle__knob\"><\/div><\/div><\/div>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Review quote -->\n          <div class=\"pillar__review reveal\">\n            <div class=\"pillar__review-stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/div>\n            <p class=\"pillar__review-text\">The search and sort features are game changers. My product comparison tables have 50+ rows and visitors can now find exactly what they need instantly. Pagination keeps the page fast.<\/p>\n            <div class=\"pillar__review-author\">@tablebuilder_fan<\/div>\n            <div class=\"pillar__review-source\">WordPress.org review<\/div>\n          <\/div>\n    <\/div>\n  <\/div>\n\n\n\n<div class=\"pillar pillar--tinted\" id=\"pillar-responsive\">\n    <div class=\"container\">\n          <div class=\"pillar__header reveal-fade\">\n            <h2 class=\"pillar__title\">Make it responsive<\/h2>\n            <p class=\"pillar__subtitle\">Control exactly how tables adapt on every screen size. No more horizontal scroll nightmares on mobile.<\/p>\n          <\/div>\n\n          <div class=\"pillar-feature\">\n            <div class=\"feature-centered\">\n              <h3 class=\"feature-section__title reveal-fade\">Beautiful on Every Screen<\/h3>\n              <p class=\"feature-section__desc reveal-fade\" style=\"margin-left:auto;margin-right:auto;max-width:640px;\">\n                Set custom breakpoints, choose between stacking or scrolling layouts, and preview the result across devices directly in the editor.\n              <\/p>\n            <\/div>\n\n            <!-- Device toggle -->\n            <div class=\"device-toggle reveal-fade\">\n              <button class=\"device-toggle__btn device-toggle__btn--active\" data-device=\"desktop\">Desktop<\/button>\n              <button class=\"device-toggle__btn\" data-device=\"tablet\">Tablet<\/button>\n              <button class=\"device-toggle__btn\" data-device=\"phone\">Phone<\/button>\n            <\/div>\n\n            <div class=\"mockup-devices reveal\" id=\"deviceMockups\">\n              <div>\n                <div class=\"mockup-device mockup-device--desktop mockup-device--highlighted\" data-device-type=\"desktop\">\n                  <div class=\"mockup-device__notch\"><\/div>\n                  <div class=\"mockup-device__screen\">\n                    <table class=\"mockup-device__table\">\n                      <thead><tr><th>Plan<\/th><th>Features<\/th><th>Price<\/th><th>Rating<\/th><\/tr><\/thead>\n                      <tbody>\n                        <tr><td>Basic<\/td><td>5 items<\/td><td>$9<\/td><td>4.2<\/td><\/tr>\n                        <tr><td>Pro<\/td><td>20 items<\/td><td>$29<\/td><td>4.8<\/td><\/tr>\n                        <tr><td>Team<\/td><td>Unlimited<\/td><td>$79<\/td><td>4.9<\/td><\/tr>\n                      <\/tbody>\n                    <\/table>\n                  <\/div>\n                <\/div>\n                <div class=\"mockup-device__label\">Desktop<\/div>\n              <\/div>\n              <div>\n                <div class=\"mockup-device mockup-device--tablet\" data-device-type=\"tablet\">\n                  <div class=\"mockup-device__notch\"><\/div>\n                  <div class=\"mockup-device__screen\">\n                    <table class=\"mockup-device__table\">\n                      <thead><tr><th>Plan<\/th><th>Price<\/th><th>Rating<\/th><\/tr><\/thead>\n                      <tbody>\n                        <tr><td>Basic<\/td><td>$9<\/td><td>4.2<\/td><\/tr>\n                        <tr><td>Pro<\/td><td>$29<\/td><td>4.8<\/td><\/tr>\n                        <tr><td>Team<\/td><td>$79<\/td><td>4.9<\/td><\/tr>\n                      <\/tbody>\n                    <\/table>\n                  <\/div>\n                <\/div>\n                <div class=\"mockup-device__label\">Tablet<\/div>\n              <\/div>\n              <div>\n                <div class=\"mockup-device mockup-device--phone\" data-device-type=\"phone\">\n                  <div class=\"mockup-device__notch\"><\/div>\n                  <div class=\"mockup-device__screen\">\n                    <div class=\"mockup-device__stacked\">\n                      <div class=\"mockup-device__stacked-row\"><div class=\"mockup-device__stacked-label\">Plan<\/div><div class=\"mockup-device__stacked-value\">Basic<\/div><\/div>\n                      <div class=\"mockup-device__stacked-row\"><div class=\"mockup-device__stacked-label\">Price<\/div><div class=\"mockup-device__stacked-value\">$9<\/div><\/div>\n                      <div class=\"mockup-device__stacked-row\"><div class=\"mockup-device__stacked-label\">Plan<\/div><div class=\"mockup-device__stacked-value\">Pro<\/div><\/div>\n                      <div class=\"mockup-device__stacked-row\"><div class=\"mockup-device__stacked-label\">Price<\/div><div class=\"mockup-device__stacked-value\">$29<\/div><\/div>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"mockup-device__label\">Phone<\/div>\n              <\/div>\n            <\/div>\n\n            <div class=\"mockup-responsive-settings reveal-fade\">\n              <div class=\"mockup-settings\">\n                <div class=\"mockup-settings__header\">&#x1F4F1; Responsive<\/div>\n                <div class=\"mockup-settings__body\">\n                  <div class=\"mockup-settings__row\"><span>Breakpoint (px)<\/span><div class=\"mockup-border-select\" style=\"min-width: 72px; text-align: center;\">768<\/div><\/div>\n                  <div class=\"mockup-settings__row\"><span>Stack direction<\/span><div class=\"mockup-border-select\">Vertical &#x25BC;<\/div><\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <div class=\"pillar__review reveal\">\n            <div class=\"pillar__review-stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/div>\n            <p class=\"pillar__review-text\">Finally, tables that don&#8217;t break on mobile! The responsive controls are exactly what I needed. My pricing tables now look great on phones and tablets.<\/p>\n            <div class=\"pillar__review-author\">@wpdesigner<\/div>\n            <div class=\"pillar__review-source\">WordPress.org review<\/div>\n          <\/div>\n    <\/div>\n  <\/div>\n\n\n\n<div class=\"pillar\" id=\"pillar-easy\">\n    <div class=\"container\">\n          <div class=\"pillar__header reveal-fade\">\n            <h2 class=\"pillar__title\">Make it easy<\/h2>\n            <p class=\"pillar__subtitle\">Drag-and-drop builder, native Gutenberg block, and lazy loading. No code, no hassle, no performance hit.<\/p>\n          <\/div>\n\n          <!-- Drag & Drop Builder -->\n          <div class=\"pillar-feature\">\n            <div class=\"feature-split\">\n              <div class=\"reveal-left\">\n                <h3 class=\"feature-section__title\">Drag &#038; Drop Builder<\/h3>\n                <p class=\"feature-section__desc\">\n                  Build tables visually with a real-time editor. Drag content elements from the sidebar directly into table cells, edit text inline, and see your changes instantly.\n                <\/p>\n                <ul class=\"feature-section__details\">\n                  <li>Visual cell editor<\/li>\n                  <li>Inline content editing<\/li>\n                  <li>Live preview<\/li>\n                  <li>No code required<\/li>\n                <\/ul>\n              <\/div>\n              <div class=\"reveal-right\">\n                <div class=\"mockup-editor\">\n                  <div class=\"mockup-sidebar\">\n                    <div class=\"mockup-sidebar__tabs\">\n                      <div class=\"mockup-sidebar__tab mockup-sidebar__tab--active\">Elements<\/div>\n                      <div class=\"mockup-sidebar__tab\">Settings<\/div>\n                    <\/div>\n                    <div class=\"mockup-sidebar__body\">\n                      <div class=\"mockup-sidebar__section-title mockup-sidebar__section-title--open\">Basic<\/div>\n                      <div class=\"mockup-sidebar__elements\">\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__element-icon\">A<\/span>Text<\/div>\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__element-icon\">&#x1F4F7;<\/span>Image<\/div>\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__element-icon\">&#x25B6;<\/span>Button<\/div>\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__element-icon\">&#x1F4CB;<\/span>List<\/div>\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__element-icon\">&#x2B50;<\/span>Star Rating<\/div>\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__element-icon\">&lt;\/&gt;<\/span>HTML<\/div>\n                      <\/div>\n                      <div class=\"mockup-sidebar__section-title mockup-sidebar__section-title--open\">Pro<\/div>\n                      <div class=\"mockup-sidebar__elements\">\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__pro-badge\">PRO<\/span><span class=\"mockup-sidebar__element-icon\">&#x1F3C6;<\/span>Badge<\/div>\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__pro-badge\">PRO<\/span><span class=\"mockup-sidebar__element-icon\">&#x1F3F7;<\/span>Ribbon<\/div>\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__pro-badge\">PRO<\/span><span class=\"mockup-sidebar__element-icon\">&#x2B55;<\/span>Circle Rating<\/div>\n                        <div class=\"mockup-sidebar__element\"><span class=\"mockup-sidebar__pro-badge\">PRO<\/span><span class=\"mockup-sidebar__element-icon\">&#x1F4C8;<\/span>Progress Bar<\/div>\n                      <\/div>\n                    <\/div>\n                  <\/div>\n                  <div class=\"mockup-table-area\">\n                    <table class=\"mockup-table-grid\">\n                      <thead><tr><th>Feature<\/th><th>Rating<\/th><th>Action<\/th><\/tr><\/thead>\n                      <tbody>\n                        <tr><td>Cloud Storage<\/td><td><span class=\"cell-stars\">&#9733;&#9733;&#9733;&#9733;&#9734;<\/span><\/td><td><span class=\"cell-button\">View Plans<\/span><\/td><\/tr>\n                        <tr><td>Team Collab<\/td><td><span class=\"cell-stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/span><\/td><td><span class=\"cell-button\">Get Started<\/span><\/td><\/tr>\n                        <tr><td>Analytics<\/td><td><div class=\"cell-drop\">Drop element here<\/div><\/td><td><span class=\"cell-button\">Try Free<\/span><\/td><\/tr>\n                        <tr><td>API Access<\/td><td><span class=\"cell-stars\">&#9733;&#9733;&#9733;&#9734;&#9734;<\/span><\/td><td><div class=\"cell-drop\">Drop element here<\/div><\/td><\/tr>\n                      <\/tbody>\n                    <\/table>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Gutenberg Block -->\n          <div class=\"pillar-feature\">\n            <div class=\"feature-centered\">\n              <h3 class=\"feature-section__title reveal-fade\">Gutenberg Block<\/h3>\n              <p class=\"feature-section__desc reveal-fade\" style=\"margin-left:auto;margin-right:auto;max-width:640px;\">\n                Native block editor integration. Search for &#8220;Table Builder&#8221; in the block inserter, select your table, and it renders directly in the content area. No shortcodes to remember.\n              <\/p>\n            <\/div>\n            <div class=\"mockup-gutenberg reveal-scale\">\n              <div class=\"mockup-gutenberg__toolbar\">\n                <div class=\"mockup-gutenberg__toolbar-btn\">+<\/div>\n                <div class=\"mockup-gutenberg__toolbar-btn\">&#x2190;<\/div>\n                <div class=\"mockup-gutenberg__toolbar-btn\">&#x2192;<\/div>\n                <div class=\"mockup-gutenberg__toolbar-title\">Draft<\/div>\n              <\/div>\n              <div class=\"mockup-gutenberg__body\">\n                <div class=\"mockup-gutenberg__inserter\"><div class=\"mockup-gutenberg__inserter-icon\">&#x1F4CA;<\/div>WP Table Builder<\/div>\n                <div class=\"mockup-gutenberg__block\">\n                  <div class=\"mockup-gutenberg__block-label\">WP Table Builder<\/div>\n                  <table class=\"mockup-gutenberg__mini-table\">\n                    <thead><tr><th>Feature<\/th><th>Free<\/th><th>Pro<\/th><\/tr><\/thead>\n                    <tbody>\n                      <tr><td>Drag &#038; Drop<\/td><td>&#x2713;<\/td><td>&#x2713;<\/td><\/tr>\n                      <tr><td>Templates<\/td><td>3<\/td><td>27<\/td><\/tr>\n                      <tr><td>Elements<\/td><td>7<\/td><td>14<\/td><\/tr>\n                    <\/tbody>\n                  <\/table>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n          <!-- Lazy Loading -->\n          <div class=\"pillar-feature\">\n            <div class=\"feature-centered\">\n              <h3 class=\"feature-section__title reveal-fade\">Lazy Loading<\/h3>\n              <p class=\"feature-section__desc reveal-fade\" style=\"margin-left:auto;margin-right:auto;max-width:640px;\">\n                Tables with hundreds of rows load progressively. Visible rows render first, the rest loads in the background.\n              <\/p>\n            <\/div>\n            <div class=\"mockup-lazy reveal-scale\">\n              <table>\n                <thead><tr><th>Item<\/th><th>Category<\/th><th>Status<\/th><\/tr><\/thead>\n                <tbody>\n                  <tr><td>Dashboard Widget<\/td><td>UI Component<\/td><td>Loaded<\/td><\/tr>\n                  <tr><td>Data Pipeline<\/td><td>Backend<\/td><td>Loaded<\/td><\/tr>\n                  <tr><td>Auth Module<\/td><td>Security<\/td><td>Loaded<\/td><\/tr>\n                  <tr class=\"mockup-skeleton-row\"><td><div class=\"mockup-skeleton mockup-skeleton--medium\"><\/div><\/td><td><div class=\"mockup-skeleton mockup-skeleton--short\"><\/div><\/td><td><div class=\"mockup-skeleton mockup-skeleton--short\"><\/div><\/td><\/tr>\n                  <tr class=\"mockup-skeleton-row\"><td><div class=\"mockup-skeleton mockup-skeleton--long\"><\/div><\/td><td><div class=\"mockup-skeleton mockup-skeleton--medium\"><\/div><\/td><td><div class=\"mockup-skeleton mockup-skeleton--short\"><\/div><\/td><\/tr>\n                  <tr class=\"mockup-skeleton-row\"><td><div class=\"mockup-skeleton mockup-skeleton--short\"><\/div><\/td><td><div class=\"mockup-skeleton mockup-skeleton--long\"><\/div><\/td><td><div class=\"mockup-skeleton mockup-skeleton--medium\"><\/div><\/td><\/tr>\n                <\/tbody>\n              <\/table>\n            <\/div>\n          <\/div>\n\n          <div class=\"pillar__review reveal\">\n            <div class=\"pillar__review-stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/div>\n            <p class=\"pillar__review-text\">So easy to use! I built my first table in under 5 minutes. The drag and drop editor is intuitive, and the Gutenberg block makes embedding tables a breeze. No coding needed at all.<\/p>\n            <div class=\"pillar__review-author\">@wordpress_beginner<\/div>\n            <div class=\"pillar__review-source\">WordPress.org review<\/div>\n          <\/div>\n    <\/div>\n  <\/div>\n\n\n\n<section class=\"compare-section\">\n    <div class=\"container\">\n      <div class=\"compare-section__header\">\n        <div class=\"compare-section__label reveal-fade\">Free vs Pro<\/div>\n        <h2 class=\"compare-section__title reveal-fade\">Everything you unlock with Pro<\/h2>\n      <\/div>\n      <div class=\"compare-table-wrapper reveal\">\n        <table class=\"compare-table\">\n          <thead>\n            <tr>\n              <th>Feature<\/th>\n              <th>Free<\/th>\n              <th>Pro<\/th>\n            <\/tr>\n          <\/thead>\n          <tbody>\n            <tr class=\"compare-group\"><td colspan=\"3\">Elements<\/td><\/tr>\n            <tr><td>Content elements<\/td><td class=\"compare-value\">7<\/td><td class=\"compare-value compare-value--pro\">14<\/td><\/tr>\n            <tr><td>Badge, Ribbon, Icon<\/td><td><span class=\"cross\">&times;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n            <tr><td>Circle Rating, Progress Bar<\/td><td><span class=\"cross\">&times;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n            <tr><td>Styled List, Text Icon<\/td><td><span class=\"cross\">&times;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n\n            <tr class=\"compare-group\"><td colspan=\"3\">Table Controls<\/td><\/tr>\n            <tr><td>Search &#038; filter<\/td><td><span class=\"cross\">&times;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n            <tr><td>Column sorting<\/td><td><span class=\"cross\">&times;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n            <tr><td>Pagination<\/td><td><span class=\"cross\">&times;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n            <tr><td>Sticky headers &#038; columns<\/td><td><span class=\"cross\">&times;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n\n            <tr class=\"compare-group\"><td colspan=\"3\">Styling &#038; Templates<\/td><\/tr>\n            <tr><td>Pre-built templates<\/td><td class=\"compare-value\">3<\/td><td class=\"compare-value compare-value--pro\">27<\/td><\/tr>\n            <tr><td>Full style customization<\/td><td>Basic<\/td><td class=\"compare-value compare-value--pro\">Complete<\/td><\/tr>\n            <tr><td>Save as template<\/td><td><span class=\"cross\">&times;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n\n            <tr class=\"compare-group\"><td colspan=\"3\">Performance &#038; Integration<\/td><\/tr>\n            <tr><td>Lazy loading<\/td><td><span class=\"cross\">&times;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n            <tr><td>Responsive breakpoint control<\/td><td>Auto<\/td><td class=\"compare-value compare-value--pro\">Full control<\/td><\/tr>\n            <tr><td>Gutenberg block<\/td><td><span class=\"check check--gold\">&#x2713;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n\n            <tr class=\"compare-group\"><td colspan=\"3\">Support<\/td><\/tr>\n            <tr><td>Support channel<\/td><td>Community<\/td><td class=\"compare-value compare-value--pro\">Priority email<\/td><\/tr>\n            <tr><td>Updates<\/td><td><span class=\"check check--gold\">&#x2713;<\/span><\/td><td><span class=\"check\">&#x2713;<\/span><\/td><\/tr>\n          <\/tbody>\n        <\/table>\n        <div class=\"compare-cta\">\n          <a href=\"https:\/\/wptablebuilder.com\/pricing\/\" class=\"btn btn--gold\">\n            <span>Unlock Everything &mdash; Get Pro<\/span>\n            <span class=\"btn__arrow\">&rarr;<\/span>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n\n<section class=\"reviews-section\">\n    <div class=\"container\">\n      <div class=\"reviews-section__header\">\n        <h2 class=\"reviews-section__title reveal-fade\">Trusted by 50,000+ WordPress sites<\/h2>\n        <p class=\"reviews-section__subtitle reveal-fade\">Real reviews from real WordPress users<\/p>\n      <\/div>\n      <div class=\"reviews-grid reveal-stagger\">\n        <div class=\"review-card reveal\" style=\"--i: 0\">\n          <div class=\"review-card__stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/div>\n          <p class=\"review-card__text\">&#8220;Best table plugin I&#8217;ve used. The drag and drop interface is incredibly intuitive, and the Pro features like badges and progress bars take my comparison tables to the next level.&#8221;<\/p>\n          <div class=\"review-card__author\">@developer2023<\/div>\n          <div class=\"review-card__source\">WordPress.org review<\/div>\n        <\/div>\n        <div class=\"review-card reveal\" style=\"--i: 1\">\n          <div class=\"review-card__stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/div>\n          <p class=\"review-card__text\">&#8220;Tried 4 different table plugins before finding WP Table Builder. This is the only one where my tables actually look good on mobile. The responsive controls are exactly what I needed.&#8221;<\/p>\n          <div class=\"review-card__author\">@wpdesigner<\/div>\n          <div class=\"review-card__source\">WordPress.org review<\/div>\n        <\/div>\n        <div class=\"review-card reveal\" style=\"--i: 2\">\n          <div class=\"review-card__stars\">&#9733;&#9733;&#9733;&#9733;&#9733;<\/div>\n          <p class=\"review-card__text\">&#8220;The search, sort, and pagination features transformed my product listings. Customers can actually find what they&#8217;re looking for now. My conversion rate improved noticeably after switching.&#8221;<\/p>\n          <div class=\"review-card__author\">@ecommerce_pro<\/div>\n          <div class=\"review-card__source\">WordPress.org review<\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Stats bar -->\n      <div class=\"stats-bar reveal-stagger\">\n        <div class=\"stats-bar__item reveal\" style=\"--i: 0\">\n          <div class=\"stats-bar__value\" data-count=\"50000\">0<\/div>\n          <div class=\"stats-bar__label\">Active Installs<\/div>\n        <\/div>\n        <div class=\"stats-bar__item reveal\" style=\"--i: 1\">\n          <div class=\"stats-bar__value\">4.8\/5<\/div>\n          <div class=\"stats-bar__label\">Average Rating<\/div>\n        <\/div>\n        <div class=\"stats-bar__item reveal\" style=\"--i: 2\">\n          <div class=\"stats-bar__value\">27<\/div>\n          <div class=\"stats-bar__label\">Pre-Built Templates<\/div>\n        <\/div>\n        <div class=\"stats-bar__item reveal\" style=\"--i: 3\">\n          <div class=\"stats-bar__value\">14<\/div>\n          <div class=\"stats-bar__label\">Content Elements<\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n\n\n<section class=\"cta-final\">\n    <div class=\"container\">\n      <h2 class=\"cta-final__headline reveal-fade\">Ready to build tables<br>that <em>convert<\/em>?<\/h2>\n      <p class=\"cta-final__text reveal-fade\">Join 50,000+ WordPress sites that stopped losing conversions to ugly tables.<\/p>\n      <div class=\"cta-final__actions reveal\">\n        <a href=\"https:\/\/wptablebuilder.com\/pricing\/\" class=\"btn btn--gold btn-magnetic\">\n          <span>Get Pro Now<\/span>\n          <span class=\"btn__arrow\">&rarr;<\/span>\n        <\/a>\n        <a href=\"https:\/\/wordpress.org\/plugins\/wp-table-builder\/\" class=\"btn btn--ghost btn-magnetic\" target=\"_blank\" rel=\"noopener\"><span>Try Free Version<\/span><\/a>\n      <\/div>\n      <p class=\"cta-final__note reveal-fade\">30-day money-back guarantee. Cancel anytime.<\/p>\n    <\/div>\n  <\/section>\n<\/div>\n\n\n\n<script>\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       1. SCROLL REVEAL (all variants)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    const revealObserver = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          entry.target.classList.add('visible');\n        }\n      });\n    }, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });\n\n    document.querySelectorAll('.reveal, .reveal-fade, .reveal-scale, .reveal-left, .reveal-right, .reveal-zoom').forEach(el => {\n      revealObserver.observe(el);\n    });\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       2. 3D CARD TILT (element cards, mockup panels)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    document.querySelectorAll('.element-card, .mockup-editor, .mockup-settings, .mockup-settings-panel, .review-card').forEach(card => {\n      card.addEventListener('mousemove', (e) => {\n        const rect = card.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const centerX = rect.width \/ 2;\n        const centerY = rect.height \/ 2;\n        const rotateX = ((y - centerY) \/ centerY) * -4;\n        const rotateY = ((x - centerX) \/ centerX) * 4;\n        card.style.transform = `perspective(800px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.01)`;\n      });\n      card.addEventListener('mouseleave', () => { card.style.transform = ''; });\n    });\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       3. MAGNETIC BUTTONS\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    document.querySelectorAll('.btn-magnetic').forEach(btn => {\n      btn.addEventListener('mousemove', (e) => {\n        const rect = btn.getBoundingClientRect();\n        const x = e.clientX - rect.left - rect.width \/ 2;\n        const y = e.clientY - rect.top - rect.height \/ 2;\n        btn.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;\n      });\n      btn.addEventListener('mouseleave', () => { btn.style.transform = ''; });\n      btn.addEventListener('click', (e) => {\n        const ripple = document.createElement('span');\n        ripple.className = 'btn-magnetic__ripple';\n        const rect = btn.getBoundingClientRect();\n        const size = Math.max(rect.width, rect.height);\n        ripple.style.width = ripple.style.height = size + 'px';\n        ripple.style.left = (e.clientX - rect.left - size \/ 2) + 'px';\n        ripple.style.top = (e.clientY - rect.top - size \/ 2) + 'px';\n        btn.appendChild(ripple);\n        setTimeout(() => ripple.remove(), 600);\n      });\n    });\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       4. SCROLL PROGRESS BAR\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    const progressBar = document.getElementById('scrollProgress');\n    window.addEventListener('scroll', () => {\n      const scrolled = window.scrollY;\n      const total = document.documentElement.scrollHeight - window.innerHeight;\n      const progress = Math.min(scrolled \/ total, 1);\n      progressBar.style.transform = `scaleX(${progress})`;\n    }, { passive: true });\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       5. SMOOTH SCROLL\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n      anchor.addEventListener('click', (e) => {\n        const target = document.querySelector(anchor.getAttribute('href'));\n        if (target) {\n          e.preventDefault();\n          target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n        }\n      });\n    });\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       6. GAP SECTION \u2014 Before\/After Toggle (mobile)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    document.querySelectorAll('.gap-toggle__btn').forEach(btn => {\n      btn.addEventListener('click', () => {\n        const target = btn.dataset.target;\n        const container = btn.closest('.gap-display--mobile');\n        \/\/ Update buttons\n        container.querySelectorAll('.gap-toggle__btn').forEach(b => b.classList.remove('gap-toggle__btn--active'));\n        btn.classList.add('gap-toggle__btn--active');\n        \/\/ Update tables\n        container.querySelectorAll('.gap-table').forEach(t => t.classList.remove('gap-table--visible'));\n        container.querySelector(`[data-gap=\"${target}\"]`).classList.add('gap-table--visible');\n      });\n    });\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       7. DEVICE RESPONSIVE TOGGLE\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    document.querySelectorAll('.device-toggle__btn').forEach(btn => {\n      btn.addEventListener('click', () => {\n        const device = btn.dataset.device;\n        \/\/ Update toggle buttons\n        document.querySelectorAll('.device-toggle__btn').forEach(b => b.classList.remove('device-toggle__btn--active'));\n        btn.classList.add('device-toggle__btn--active');\n        \/\/ Update device mockups\n        document.querySelectorAll('.mockup-device').forEach(d => {\n          const type = d.dataset.deviceType;\n          if (type) {\n            d.classList.remove('mockup-device--highlighted', 'mockup-device--dimmed');\n            d.classList.add(type === device ? 'mockup-device--highlighted' : 'mockup-device--dimmed');\n          }\n        });\n      });\n    });\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       9. ANIMATED COUNTERS (slot-machine style)\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n    const counters = document.querySelectorAll('[data-count]');\n    const counterObserver = new IntersectionObserver((entries) => {\n      entries.forEach(entry => {\n        if (entry.isIntersecting) {\n          const el = entry.target;\n          const target = parseInt(el.dataset.count);\n          const duration = 2000;\n          const start = performance.now();\n          const animate = (now) => {\n            const elapsed = now - start;\n            const progress = Math.min(elapsed \/ duration, 1);\n            const t = progress;\n            const eased = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) \/ 2;\n            const current = Math.floor(eased * target);\n            el.textContent = target >= 1000 ? current.toLocaleString() + '+' : current;\n            if (progress < 1) {\n              requestAnimationFrame(animate);\n            } else {\n              el.style.transform = 'scale(1.15)';\n              el.style.transition = 'transform 0.3s var(--ease-out-back)';\n              setTimeout(() => { el.style.transform = 'scale(1)'; }, 200);\n            }\n          };\n          requestAnimationFrame(animate);\n          counterObserver.unobserve(el);\n        }\n      });\n    }, { threshold: 0.5 });\n    counters.forEach(el => counterObserver.observe(el));\n  <\/script>\n\n<\/div>","protected":false},"excerpt":{"rendered":"<p>WP Table Builder Pro Tables that sell,not just display Stop losing conversions to ugly, unresponsive data tables. Build tables that look professional, work on every device, and guide visitors to click. Get Pro Now &rarr; See What&#8217;s Included &#9733; 50,000+ Active Installs &#9733; 4.8\/5 Average Rating &#9733; WordPress.org Verified The difference Same data. Different results. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-no-title","meta":{"footnotes":""},"class_list":["post-21307","page","type-page","status-publish","hentry"],"featured_image_src":null,"_links":{"self":[{"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/pages\/21307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/comments?post=21307"}],"version-history":[{"count":0,"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/pages\/21307\/revisions"}],"wp:attachment":[{"href":"https:\/\/wptablebuilder.com\/es\/wp-json\/wp\/v2\/media?parent=21307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}