/* Shared 2026 Text2Sheets interface layer. Loaded after page-specific styles. */
:root {
  --blue-ink: #07101f;
  --blue-ink-soft: #0a162c;
  --blue-panel: #101d38;
  --blue-panel-2: #142442;
  --blue-line: rgba(190, 215, 255, .14);
  --blue-text: #eef5ff;
  --blue-muted: #8fa6c7;
  --blue-accent: #68b5ff;
  --blue-accent-soft: #a9d6ff;
  --blue-violet: #8b7cff;
  --blue-danger: #ff7d91;
}

body.blue-ui {
  --bg: var(--blue-ink);
  --panel: rgba(16, 29, 56, .72);
  --panel-strong: rgba(20, 36, 66, .9);
  --border: var(--blue-line);
  --muted: var(--blue-muted);
  --text: var(--blue-text);
  --accent: var(--blue-accent);
  --accent-2: var(--blue-violet);
  --accent-3: var(--blue-accent-soft);
  color: var(--blue-text);
  background:
    radial-gradient(circle at 82% 4%, rgba(104,181,255,.14), transparent 30rem),
    radial-gradient(circle at 5% 62%, rgba(139,124,255,.08), transparent 34rem),
    var(--blue-ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
body.blue-ui::before {
  content: ''; position: fixed; inset: 0; z-index: -1; opacity: .18; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
.blue-ui a { transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease; }
.blue-ui i { font-style: normal; }
.blue-ui ::selection { color: var(--blue-ink); background: var(--blue-accent-soft); }
.blue-ui .navbar { background: rgba(7,16,31,.78) !important; border-bottom: 1px solid var(--blue-line) !important; backdrop-filter: blur(22px); }
.blue-ui .nav-container { max-width: 1240px !important; }
.blue-ui .nav-logo img { content: url('/static/logo-modern.svg'); width: 44px !important; height: 44px !important; border-radius: 13px !important; }
.blue-ui img.app-logo, .blue-ui .logo-section img { content: url('/static/logo-modern.svg'); }
.blue-ui .nav-logo span { color: var(--blue-text) !important; letter-spacing: -.04em; }
.blue-ui .nav-menu a, .blue-ui .footer-links a { color: var(--blue-muted) !important; }
.blue-ui .nav-menu a:hover, .blue-ui .footer-links a:hover { color: var(--blue-accent) !important; }
.blue-ui .btn, .blue-ui .button, .blue-ui .submit-btn { border-radius: 12px !important; font-weight: 700 !important; }
.blue-ui .btn-pro, .blue-ui .btn-primary, .blue-ui .button.primary, .blue-ui .submit-btn {
  color: var(--blue-ink) !important; border-color: transparent !important;
  background: linear-gradient(135deg, var(--blue-accent), #3b82f6) !important;
  box-shadow: 0 12px 34px rgba(104,181,255,.18) !important;
}
.blue-ui .btn-pro:hover, .blue-ui .btn-primary:hover, .blue-ui .button.primary:hover, .blue-ui .submit-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.blue-ui .btn-ghost, .blue-ui .button.secondary, .blue-ui .back-button {
  color: var(--blue-text) !important; background: rgba(255,255,255,.045) !important; border: 1px solid var(--blue-line) !important;
}
.blue-ui .button.danger { color: #ffc1cb !important; background: rgba(255,125,145,.08) !important; border: 1px solid rgba(255,125,145,.22) !important; }

/* Marketing and pricing */
.blue-ui .hero, .blue-ui .pricing-hero { background: transparent !important; }
.blue-ui .hero-badge, .blue-ui .feature-pill, .blue-ui .popular-tag {
  color: var(--blue-accent-soft) !important; background: rgba(104,181,255,.08) !important; border-color: rgba(104,181,255,.2) !important;
}
.blue-ui .feature-pill, .blue-ui .popular-tag { display: inline-flex; align-items: center; gap: 8px; }
.blue-ui .feature-pill i, .blue-ui .popular-tag i { color: var(--blue-accent); font-size: .86em; }
.blue-ui .hero-title, .blue-ui .hero-content h1, .blue-ui .pricing-header h2, .blue-ui .features-header h2, .blue-ui .use-cases-header h2 { color: var(--blue-text) !important; letter-spacing: -.055em !important; }
.blue-ui .gradient-text { color: var(--blue-accent) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.blue-ui .hero-subtitle, .blue-ui .hero-content p, .blue-ui .pricing-header p, .blue-ui .features-header p, .blue-ui .use-cases-header p { color: var(--blue-muted) !important; }
.blue-ui .stat-number, .blue-ui .price-amount { color: var(--blue-accent) !important; }
.blue-ui .pricing-hero, .blue-ui .pricing-section, .blue-ui .trust-section, .blue-ui .video-section, .blue-ui .features-section, .blue-ui .use-cases-section, .blue-ui .final-cta { border-color: var(--blue-line) !important; }
.blue-ui .pricing-card, .blue-ui .feature-card, .blue-ui .use-case-card, .blue-ui .trust-badge, .blue-ui .gumroad-trust, .blue-ui .video-wrapper {
  color: var(--blue-text) !important; background: rgba(16,29,56,.74) !important; border: 1px solid var(--blue-line) !important;
  box-shadow: 0 25px 70px rgba(0,0,0,.22) !important; border-radius: 20px !important;
}
.blue-ui .pricing-card.featured, .blue-ui .pricing-card.pro { border-color: rgba(104,181,255,.42) !important; background: linear-gradient(150deg, rgba(104,181,255,.12), rgba(16,29,56,.9)) !important; }
.blue-ui .feature-card:hover, .blue-ui .use-case-card:hover { border-color: rgba(104,181,255,.4) !important; transform: translateY(-3px); }
.blue-ui .feature-icon, .blue-ui .use-case-icon { color: var(--blue-accent) !important; background: rgba(104,181,255,.1) !important; }
.blue-ui .feature-icon i, .blue-ui .use-case-icon i { transition: transform .25s ease; }
.blue-ui .feature-card:hover .feature-icon i, .blue-ui .use-case-card:hover .use-case-icon i { transform: scale(1.08) rotate(-3deg); }
.blue-ui .feature-card h3, .blue-ui .use-case-card h3, .blue-ui .plan-name { color: var(--blue-text) !important; }
.blue-ui .feature-card p, .blue-ui .use-case-card p, .blue-ui .plan-desc, .blue-ui .price-period, .blue-ui .stat-label { color: var(--blue-muted) !important; }
.blue-ui .plan-features li i, .blue-ui .trust-badge i { color: var(--blue-accent) !important; }
.blue-ui .final-cta { background: linear-gradient(135deg, rgba(104,181,255,.13), rgba(139,124,255,.08)) !important; }
.blue-ui .footer { color: var(--blue-muted) !important; background: #081225 !important; border-color: var(--blue-line) !important; }
.blue-ui .footer-logo img { content: url('/static/logo-modern.svg'); }

/* Shared content, legal, blog and SEO landing surfaces */
.blue-ui h1, .blue-ui h2, .blue-ui h3 { color: var(--blue-text); }
.blue-ui .legal-content {
  margin: 44px 0 70px; padding: clamp(24px, 5vw, 54px) !important;
  color: #cad8ed; background: rgba(16,29,56,.68); border: 1px solid var(--blue-line);
  border-radius: 24px; box-shadow: 0 28px 80px rgba(0,0,0,.22);
}
.blue-ui .legal-content h1 { color: var(--blue-text) !important; letter-spacing: -.045em; }
.blue-ui .legal-content h2, .blue-ui .legal-content h3 { color: #dceaff !important; }
.blue-ui .legal-content p, .blue-ui .legal-content li, .blue-ui .last-updated { color: var(--blue-muted) !important; }
.blue-ui .legal-content a { color: var(--blue-accent) !important; }
.blue-ui .glass-card, .blue-ui .blog-post, .blue-ui .method-box, .blue-ui .example-box,
.blue-ui .step, .blue-ui .feature, .blue-ui .faq-item, .blue-ui .related-card,
.blue-ui .intro-text, .blue-ui .cta-panel, .blue-ui .cta-box {
  color: var(--blue-text) !important; background: rgba(16,29,56,.7) !important;
  border: 1px solid var(--blue-line) !important; border-radius: 20px !important;
  box-shadow: 0 24px 68px rgba(0,0,0,.2) !important;
}
.blue-ui .article-content p, .blue-ui .article-content li, .blue-ui .method-box p,
.blue-ui .step p, .blue-ui .feature p, .blue-ui .faq-item p, .blue-ui .intro-text p { color: var(--blue-muted) !important; }
.blue-ui .method-number, .blue-ui .num { color: var(--blue-ink) !important; background: var(--blue-accent) !important; }
.blue-ui .grad { color: var(--blue-accent) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.blue-ui .breadcrumb, .blue-ui .breadcrumb a { color: var(--blue-muted) !important; }
.blue-ui .final { background: linear-gradient(135deg, rgba(104,181,255,.14), rgba(139,124,255,.09)) !important; }

/* Standalone converter pages */
.converter-page > .header {
  background: rgba(7,16,31,.84) !important; border-bottom: 1px solid var(--blue-line) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.16); backdrop-filter: blur(22px);
}
.converter-page > .header .nav { min-height: 76px; padding: 12px 0; }
.converter-page > .header .logo { display: inline-flex; align-items: center; gap: 11px; color: var(--blue-text) !important; letter-spacing: -.04em; }
.converter-page > .header .logo img { width: 42px; height: 42px; border-radius: 13px; box-shadow: 0 10px 26px rgba(104,181,255,.16); }
.converter-page > .header .nav-menu a { color: var(--blue-muted) !important; }
.converter-page > .header .nav-menu a:hover { color: var(--blue-text) !important; }
.converter-page .hero {
  position: relative; isolation: isolate; min-height: 600px; display: grid; place-items: center;
  padding: 160px 0 108px !important; overflow: hidden; border-bottom: 1px solid var(--blue-line);
  background: radial-gradient(circle at 50% 34%, rgba(104,181,255,.2), transparent 27rem) !important;
}
.converter-page .hero::after {
  content: ''; position: absolute; z-index: -1; width: min(760px, 84vw); height: min(760px, 84vw);
  border: 1px solid rgba(104,181,255,.12); border-radius: 50%; box-shadow: inset 0 0 90px rgba(104,181,255,.04);
}
.converter-page .hero h1 { max-width: 860px; margin-inline: auto; color: var(--blue-text) !important; font-size: clamp(42px, 5.4vw, 72px) !important; line-height: 1.02; letter-spacing: -.06em; }
.converter-page .hero .subtitle { max-width: 720px; color: var(--blue-muted) !important; font-size: clamp(17px, 2vw, 21px); }
.converter-page .hero .cta-button, .converter-page .cta-section .button {
  display: inline-flex; align-items: center; justify-content: center; color: var(--blue-ink) !important;
  background: linear-gradient(135deg, var(--blue-accent-soft), #4f8fff) !important;
  box-shadow: 0 16px 40px rgba(104,181,255,.2); border: 1px solid rgba(255,255,255,.14) !important;
}
.converter-page .hero .cta-button:hover, .converter-page .cta-section .button:hover { transform: translateY(-2px); filter: brightness(1.07); }
.converter-page .list-types, .converter-page .features, .converter-page .example { padding: 104px 0 !important; background: transparent !important; }
.converter-page .features { border-block: 1px solid var(--blue-line); background: rgba(10,22,44,.45) !important; }
.converter-page .list-types h2, .converter-page .features h2, .converter-page .example h2 { color: var(--blue-text) !important; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.045em; }
.converter-page .types-grid, .converter-page .features-grid { gap: 20px !important; }
.converter-page .type-card, .converter-page .feature-card, .converter-page .example-input, .converter-page .example-output {
  color: var(--blue-text) !important; background: linear-gradient(155deg, rgba(20,36,66,.88), rgba(10,22,44,.76)) !important;
  border: 1px solid var(--blue-line) !important; border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.18) !important;
}
.converter-page .type-card { position: relative; padding: 30px !important; overflow: hidden; text-align: left; border-top-color: rgba(104,181,255,.34) !important; }
.converter-page .type-card::after { content: ''; position: absolute; width: 120px; height: 120px; right: -72px; top: -72px; border: 1px solid rgba(104,181,255,.16); border-radius: 50%; }
.converter-page .type-card:hover, .converter-page .feature-card:hover { transform: translateY(-4px); border-color: rgba(104,181,255,.38) !important; }
.converter-page .type-icon, .converter-page .feature-icon {
  width: 52px !important; height: 52px !important; display: grid !important; place-items: center; margin: 0 0 22px !important;
  color: var(--blue-accent) !important; background: rgba(104,181,255,.1) !important; border: 1px solid rgba(104,181,255,.18); border-radius: 15px !important; font-size: 20px !important;
}
.converter-page .feature-card { text-align: left !important; }
.converter-page .type-card h3, .converter-page .feature-card h3, .converter-page .example-input h3, .converter-page .example-output h3 { color: var(--blue-text) !important; }
.converter-page .type-card p, .converter-page .feature-card p { color: var(--blue-muted) !important; }
.converter-page .type-examples, .converter-page .example-text {
  color: #bfd0e9 !important; background: rgba(7,16,31,.72) !important; border: 1px solid var(--blue-line); border-radius: 12px !important;
}
.converter-page .example-input, .converter-page .example-output { border-left-color: var(--blue-accent) !important; }
.converter-page .example-input h3 i, .converter-page .example-output h3 i { margin-right: 8px; color: var(--blue-accent); }
.converter-page .cta-section {
  color: var(--blue-text) !important; background: linear-gradient(135deg, rgba(104,181,255,.16), rgba(139,124,255,.1)) !important;
  border-block: 1px solid var(--blue-line);
}
.converter-page .cta-section p { color: var(--blue-muted); }

.seo-product-page > .header { background: rgba(7,16,31,.84) !important; border-bottom-color: var(--blue-line) !important; backdrop-filter: blur(22px); }
.seo-product-page > .header .nav-logo { color: var(--blue-text) !important; }
.seo-product-page > .header .nav-links a { color: var(--blue-muted) !important; }
.seo-product-page > .header .nav-links a:hover { color: var(--blue-text) !important; }
.seo-product-page > .header .nav-cta { color: var(--blue-ink) !important; background: linear-gradient(135deg, var(--blue-accent-soft), #4f8fff) !important; }
.seo-product-page section.block { border-color: var(--blue-line) !important; }
.seo-product-page section.block .lead, .seo-product-page .trust-line { color: var(--blue-muted) !important; }
.seo-product-page .related-grid a { color: var(--blue-accent-soft) !important; background: rgba(104,181,255,.08) !important; border: 1px solid rgba(104,181,255,.16); }
.blue-ui .example-title i, .blue-ui .tip-title i, .blue-ui .practice-title i { margin-right: 7px; color: var(--blue-accent); }


/* Confirmation, purchase and utility states */
.blue-ui .plan-info, .blue-ui .info-box, .blue-ui .upgrade-teaser {
  color: var(--blue-text) !important; background: rgba(16,29,56,.78) !important;
  border: 1px solid var(--blue-line) !important; border-radius: 18px !important;
}
.blue-ui .plan-info h3, .blue-ui .plan-info .quota, .blue-ui .info-box strong { color: var(--blue-accent) !important; }
.blue-ui .success-icon, .blue-ui .loading-icon, .blue-ui .cancel-icon {
  color: var(--blue-ink) !important; background-color: var(--blue-accent) !important;
  border-color: var(--blue-accent) !important; box-shadow: 0 14px 36px rgba(104,181,255,.2) !important;
}
.blue-ui .logo-section .app-title { color: var(--blue-text) !important; }
.status-page > .container {
  width: min(560px, calc(100% - 36px)) !important; margin: 28px auto !important; padding: clamp(28px, 5vw, 48px) !important;
  color: var(--blue-text) !important; background: linear-gradient(155deg, rgba(20,36,66,.9), rgba(9,20,40,.88)) !important;
  border: 1px solid rgba(190,215,255,.16) !important; border-radius: 26px !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.35) !important;
}
.status-page > .container h1, .status-page > .container h2, .status-page > .container h3 { color: var(--blue-text) !important; }
.status-page > .container > p, .status-page .plan-info li, .status-page .plan-info p, .status-page .info-box p { color: var(--blue-muted) !important; }
.status-page .plan-info strong, .status-page .info-box strong { color: #dceaff !important; }
.status-page .plan-info, .status-page .info-box { padding: 24px !important; background: rgba(7,16,31,.5) !important; }
.status-page .btn { margin: 5px !important; border-radius: 12px !important; }
.status-page .btn-secondary, .status-page .button.secondary { color: var(--blue-text) !important; background: rgba(255,255,255,.055) !important; border: 1px solid var(--blue-line) !important; }
.status-page .btn-secondary:hover { background: rgba(255,255,255,.09) !important; }

/* Admin */
.blue-ui .admin-header { background: rgba(7,16,31,.86) !important; border-color: var(--blue-line) !important; backdrop-filter: blur(20px); }
.blue-ui .admin-login-container, .blue-ui .stat-card, .blue-ui .section-card,
.blue-ui .insight-card, .blue-ui .metric-card, .blue-ui .api-key-card {
  color: var(--blue-text) !important; background: rgba(16,29,56,.76) !important;
  border: 1px solid var(--blue-line) !important; border-radius: 18px !important;
  box-shadow: 0 24px 68px rgba(0,0,0,.2) !important;
}
.blue-ui .admin-logo, .blue-ui .stat-icon { background: linear-gradient(135deg, var(--blue-accent), #3b82f6) !important; color: var(--blue-ink) !important; }
.blue-ui .admin-nav button.active, .blue-ui .login-btn, .blue-ui .google-btn { background: linear-gradient(135deg, var(--blue-accent), #3b82f6) !important; color: var(--blue-ink) !important; }
.blue-ui .admin-login-container label, .blue-ui .insight-label, .blue-ui .metric-label, .blue-ui .stat-label { color: var(--blue-muted) !important; }
.blue-ui .key-display { color: var(--blue-accent-soft) !important; background: rgba(7,16,31,.6) !important; border-color: var(--blue-line) !important; }
.blue-ui table { color: var(--blue-text); }
.blue-ui th { color: var(--blue-text) !important; background: var(--blue-panel-2) !important; }
.blue-ui td { color: #cad8ed; border-color: var(--blue-line) !important; }

/* Authentication */
.blue-ui .promo-side { background: linear-gradient(145deg, #0a1730, #101f42) !important; border-right: 1px solid var(--blue-line); }
.blue-ui .promo-side::before { background: radial-gradient(circle, rgba(104,181,255,.2), transparent 68%) !important; }
.blue-ui .promo-badge { color: var(--blue-accent-soft) !important; background: rgba(104,181,255,.1) !important; border-color: rgba(104,181,255,.22) !important; }
.blue-ui .promo-content h1, .blue-ui .promo-content h1 span { color: var(--blue-text) !important; }
.blue-ui .promo-content h1 span, .blue-ui .pro-price-amount, .blue-ui .upgrade-teaser .price { color: var(--blue-accent) !important; }
.blue-ui .promo-content > p, .blue-ui .pro-price-period, .blue-ui .pro-price-note { color: var(--blue-muted) !important; }
.blue-ui .pro-features i, .blue-ui .free-features i { color: var(--blue-accent) !important; }
.blue-ui .pro-price, .blue-ui .upgrade-teaser { background: rgba(104,181,255,.07) !important; border: 1px solid rgba(104,181,255,.18) !important; }
.blue-ui .login-side, .blue-ui .signup-side { background: rgba(7,16,31,.72) !important; }
.blue-ui .login-header img, .blue-ui .signup-header img { content: url('/static/logo-modern.svg'); width: 60px !important; height: 60px !important; border-radius: 18px !important; }
.blue-ui .login-header h2, .blue-ui .signup-header h2 { color: var(--blue-text) !important; letter-spacing: -.04em; }
.blue-ui .login-header p, .blue-ui .signup-header p, .blue-ui .terms-note { color: var(--blue-muted) !important; }
.blue-ui .google-btn, .blue-ui .form-group input {
  color: var(--blue-text) !important; background: rgba(16,29,56,.75) !important; border: 1px solid var(--blue-line) !important; border-radius: 12px !important;
}
.blue-ui .form-group input::placeholder { color: #7187a9 !important; }
.blue-ui .form-group input:focus { border-color: var(--blue-accent) !important; box-shadow: 0 0 0 3px rgba(104,181,255,.1) !important; }
.blue-ui .divider { color: #6d83a5 !important; }
.blue-ui .login-footer a, .blue-ui .signup-footer a, .blue-ui .signup-link a, .blue-ui .login-link a, .blue-ui .terms-note a { color: var(--blue-accent) !important; }

/* Authenticated utility pages */
.blue-ui.app-shell-page > .container, .blue-ui .project-container { background: transparent !important; }
.blue-ui .header { border-color: var(--blue-line) !important; }
.blue-ui .header h1, .blue-ui .project-title, .blue-ui .section-title { color: var(--blue-text) !important; letter-spacing: -.04em; }
.blue-ui .search-input, .blue-ui .filter-dropdown, .blue-ui input, .blue-ui textarea, .blue-ui select {
  color: var(--blue-text); background-color: rgba(16,29,56,.72); border-color: var(--blue-line);
}
.blue-ui .search-input:focus, .blue-ui input:focus, .blue-ui textarea:focus, .blue-ui select:focus { border-color: var(--blue-accent) !important; box-shadow: 0 0 0 3px rgba(104,181,255,.1) !important; }
.blue-ui .sheet-card, .blue-ui .project-card, .blue-ui .settings-section, .blue-ui .project-header, .blue-ui .project-info-section, .blue-ui .config-section, .blue-ui .original-text, .blue-ui .table-container, .blue-ui .modal-content {
  color: var(--blue-text) !important; background: rgba(16,29,56,.72) !important; border: 1px solid var(--blue-line) !important; border-radius: 20px !important; box-shadow: 0 25px 70px rgba(0,0,0,.2) !important;
}
.blue-ui .sheet-card:hover, .blue-ui .project-card:hover { border-color: rgba(104,181,255,.4) !important; box-shadow: 0 25px 70px rgba(104,181,255,.1) !important; }
.blue-ui .sheet-title, .blue-ui .project-card .project-title, .blue-ui .user-details h3, .blue-ui .detail-title { color: var(--blue-text) !important; }
.blue-ui .sheet-date, .blue-ui .project-date, .blue-ui .project-meta, .blue-ui .user-details p, .blue-ui .preview-label { color: var(--blue-muted) !important; }
.blue-ui .sheet-preview, .blue-ui .preview-content, .blue-ui .plan-info, .blue-ui .original-text-content { background: rgba(7,16,31,.55) !important; border-color: var(--blue-line) !important; color: #cbd9ee !important; }
.blue-ui .action-button.primary, .blue-ui .action-button.success, .blue-ui .btn-success { background: #3b82f6 !important; color: white !important; }
.blue-ui .modal { background: rgba(3,8,18,.76) !important; backdrop-filter: blur(10px); }
.blue-ui .modal-header { border-color: var(--blue-line) !important; }
.blue-ui .pro-status-section { background: linear-gradient(145deg, rgba(104,181,255,.12), rgba(16,29,56,.78)) !important; border-color: rgba(104,181,255,.25) !important; }
.blue-ui .excel-table, .blue-ui .sheet-table { background: var(--blue-panel) !important; color: var(--blue-text) !important; }
.blue-ui .excel-table th, .blue-ui .sheet-table th { background: var(--blue-panel-2) !important; color: var(--blue-text) !important; border-color: var(--blue-line) !important; }
.blue-ui .excel-table td, .blue-ui .sheet-table td { color: #ccdaf0 !important; border-color: var(--blue-line) !important; }
.blue-ui .excel-table tr:nth-child(even), .blue-ui .excel-table tr:hover, .blue-ui .sheet-table tr:hover { background: rgba(104,181,255,.045) !important; }
.blue-ui .row-number { background: rgba(104,181,255,.08) !important; color: var(--blue-muted) !important; }

@keyframes blue-ui-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.blue-ui .hero-badge, .blue-ui .hero-feature-pills, .blue-ui .hero-title, .blue-ui .hero-subtitle, .blue-ui .hero-cta,
.converter-page .type-card, .converter-page .feature-card, .status-page > .container {
  animation: blue-ui-rise .62s cubic-bezier(.2,.75,.25,1) both;
}
.blue-ui .hero-feature-pills { animation-delay: .06s; }
.blue-ui .hero-title { animation-delay: .11s; }
.blue-ui .hero-subtitle { animation-delay: .16s; }
.blue-ui .hero-cta { animation-delay: .21s; }
.converter-page .type-card:nth-child(2), .converter-page .feature-card:nth-child(2) { animation-delay: .06s; }
.converter-page .type-card:nth-child(3), .converter-page .feature-card:nth-child(3) { animation-delay: .12s; }
.converter-page .type-card:nth-child(4), .converter-page .feature-card:nth-child(4) { animation-delay: .18s; }
.converter-page .type-card:nth-child(5), .converter-page .feature-card:nth-child(5) { animation-delay: .24s; }
.converter-page .type-card:nth-child(6), .converter-page .feature-card:nth-child(6) { animation-delay: .3s; }

.blue-ui button:focus-visible, .blue-ui a:focus-visible, .blue-ui input:focus-visible, .blue-ui textarea:focus-visible, .blue-ui select:focus-visible { outline: 2px solid var(--blue-accent) !important; outline-offset: 3px !important; }
@media (max-width: 760px) {
  .blue-ui .nav-menu { display: none !important; }
  .blue-ui .promo-side { display: none !important; }
  .blue-ui .login-side, .blue-ui .signup-side { width: 100% !important; min-height: 100vh; padding: 42px 24px !important; }
  .blue-ui .header { align-items: flex-start; gap: 18px; }
  .blue-ui .header-actions { flex-wrap: wrap; justify-content: flex-end; }
  .blue-ui .project-actions { flex-direction: column; }
  .converter-page > .header .nav { min-height: 68px; }
  .converter-page > .header .logo img { width: 38px; height: 38px; }
  .converter-page .hero { min-height: 530px; padding: 132px 0 80px !important; }
  .converter-page .list-types, .converter-page .features, .converter-page .example { padding: 72px 0 !important; }
  .converter-page .example-container { grid-template-columns: 1fr; }
  .status-page > .container { margin-block: 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .blue-ui *, .blue-ui *::before, .blue-ui *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================================================================
   2026 EDITORIAL WORKSPACE REDESIGN
   Content stays intact; layout, hierarchy, surfaces and motion change.
   ================================================================ */
body.blue-ui {
  --v4-bg: #07101f;
  --v4-surface: #0b172b;
  --v4-surface-2: #101f38;
  --v4-surface-3: #152845;
  --v4-line: rgba(161, 195, 241, .16);
  --v4-line-hot: rgba(104, 181, 255, .48);
  --v4-text: #f2f7ff;
  --v4-muted: #91a8c8;
  --v4-blue: #68b5ff;
  --v4-blue-2: #9ed0ff;
  --v4-radius: 28px;
  background:
    linear-gradient(115deg, rgba(104,181,255,.08), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(75,128,255,.12), transparent 30rem),
    var(--v4-bg) !important;
}
body.blue-ui::before {
  opacity: .28;
  background-image:
    linear-gradient(rgba(161,195,241,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(161,195,241,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}
body.blue-ui::after {
  content: ''; position: fixed; z-index: -2; width: 440px; height: 440px; right: -210px; bottom: -210px;
  border: 1px solid rgba(104,181,255,.15); border-radius: 50%; box-shadow: 0 0 0 70px rgba(104,181,255,.025), 0 0 0 140px rgba(104,181,255,.018);
}
.blue-ui h1, .blue-ui h2, .blue-ui h3, .blue-ui h4 { text-wrap: balance; }
.blue-ui p { text-wrap: pretty; }
.blue-ui .btn, .blue-ui .button, .blue-ui .submit-btn, .blue-ui .auth-button, .blue-ui .action-button {
  min-height: 44px; border-radius: 999px !important; letter-spacing: -.01em;
}
.blue-ui .btn-primary, .blue-ui .btn-pro, .blue-ui .submit-btn, .blue-ui .button.primary {
  background: var(--v4-blue) !important; color: var(--v4-bg) !important; box-shadow: none !important;
}
.blue-ui .btn-primary:hover, .blue-ui .btn-pro:hover, .blue-ui .submit-btn:hover, .blue-ui .button.primary:hover {
  background: var(--v4-blue-2) !important; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(104,181,255,.16) !important;
}

/* Floating navigation shared by marketing, pricing and editorial pages */
.blue-ui .navbar,
.marketing-body.blue-ui > .header,
.converter-page.blue-ui > .header,
.seo-product-page.blue-ui > .header {
  position: sticky !important; top: 14px !important; z-index: 120;
  width: min(1180px, calc(100% - 28px)); margin: 14px auto 0 !important;
  background: rgba(9,20,39,.86) !important; border: 1px solid var(--v4-line) !important;
  border-radius: 22px !important; box-shadow: 0 18px 55px rgba(0,0,0,.24) !important;
  backdrop-filter: blur(24px) saturate(1.2);
}
.blue-ui .navbar .nav-container,
.marketing-body.blue-ui > .header .header-content,
.marketing-body.blue-ui > .header .container,
.converter-page.blue-ui > .header .container,
.seo-product-page.blue-ui > .header .container { min-height: 68px; padding: 10px 16px !important; }
.blue-ui .nav-logo img,
.marketing-body.blue-ui > .header .app-logo,
.converter-page.blue-ui > .header .logo img,
.seo-product-page.blue-ui > .header .nav-logo img { width: 42px !important; height: 42px !important; border-radius: 14px !important; }
.blue-ui .nav-menu { padding: 5px; gap: 4px !important; border: 1px solid rgba(161,195,241,.09); border-radius: 999px; background: rgba(255,255,255,.025); }
.blue-ui .nav-menu a { display: block; padding: 9px 14px; border-radius: 999px; font-size: 14px; }
.blue-ui .nav-menu a:hover { color: var(--v4-text) !important; background: rgba(104,181,255,.09); }

/* Landing page: asymmetric editorial hero and bento sections */
.marketing-home .hero { min-height: 780px; padding: 104px 0 92px !important; border-bottom: 1px solid var(--v4-line); }
.marketing-home .hero-container {
  position: relative; max-width: 1180px !important; min-height: 570px; margin: 0 auto; padding: 56px !important;
  display: grid !important; grid-template-columns: repeat(12, 1fr); grid-auto-rows: min-content; column-gap: 18px;
  align-content: center; text-align: left !important; overflow: hidden;
  border: 1px solid var(--v4-line); border-radius: 36px;
  background: linear-gradient(145deg, rgba(16,31,56,.88), rgba(8,18,35,.76));
  box-shadow: 0 40px 100px rgba(0,0,0,.25);
}
.marketing-home .hero-container::before {
  content: 'TEXT  →  STRUCTURE  →  SHEET'; position: absolute; right: 34px; top: 28px;
  color: #5d769b; font-size: 10px; font-weight: 800; letter-spacing: .18em;
}
.marketing-home .hero-container::after {
  content: ''; position: absolute; width: 420px; height: 420px; right: -110px; top: 74px; border-radius: 50%;
  border: 1px solid rgba(104,181,255,.2); box-shadow: 0 0 0 55px rgba(104,181,255,.025), inset 0 0 80px rgba(104,181,255,.05);
}
.marketing-home .hero-badge { grid-column: 1 / 8; justify-self: start; margin: 0 0 18px !important; }
.marketing-home .hero-feature-pills { grid-column: 1 / 9; justify-content: flex-start !important; margin: 0 0 24px !important; }
.marketing-home .hero-title { grid-column: 1 / 9; max-width: 820px !important; margin: 0 0 22px !important; font-size: clamp(52px, 6vw, 78px) !important; line-height: .98 !important; text-align: left !important; }
.marketing-home .hero-subtitle { grid-column: 1 / 8; max-width: 690px !important; margin: 0 0 30px !important; text-align: left !important; }
.marketing-home .hero-cta { grid-column: 1 / 9; justify-content: flex-start !important; }
.marketing-home .hero-stats {
  grid-column: 9 / 13; grid-row: 1 / 7; align-self: end; position: relative; z-index: 2;
  display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin: 0 !important;
}
.marketing-home .hero-stats .stat-item { padding: 19px 20px; border: 1px solid var(--v4-line); border-radius: 18px; background: rgba(7,16,31,.72); text-align: left; }
.marketing-home .hero-stats .stat-number { font-size: 28px; }
.marketing-home .hero-stats .stat-label { margin-top: 3px; }
.marketing-home .pricing-hero,
.marketing-home .trust-section,
.marketing-home .features-section,
.marketing-home .use-cases-section { padding: 112px 24px !important; background: transparent !important; border-bottom: 1px solid var(--v4-line) !important; }
.marketing-home .pricing-container,
.marketing-home .trust-container,
.marketing-home .features-container,
.marketing-home .use-cases-container { max-width: 1180px !important; }
.marketing-home .pricing-header,
.marketing-home .features-header,
.marketing-home .use-cases-header { max-width: 700px; margin: 0 0 42px !important; text-align: left !important; }
.marketing-home .pricing-header h2,
.marketing-home .features-header h2,
.marketing-home .use-cases-header h2 { font-size: clamp(38px, 5vw, 58px) !important; line-height: 1; }
.marketing-home .pricing-card { max-width: none !important; padding: 38px !important; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 36px; border-radius: 30px !important; }
.marketing-home .pricing-card .popular-tag,
.marketing-home .pricing-card .plan-name,
.marketing-home .pricing-card .plan-desc,
.marketing-home .pricing-card .plan-price { grid-column: 1; }
.marketing-home .pricing-card .plan-features { grid-column: 2; grid-row: 1 / 6; }
.marketing-home .pricing-card .plan-cta { grid-column: 1; align-self: end; justify-self: start; }
.marketing-home .trust-badges { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 10px !important; }
.marketing-home .trust-badge { justify-content: flex-start !important; padding: 20px !important; box-shadow: none !important; }
.marketing-home .gumroad-trust { margin-top: 12px; border-radius: 24px !important; }
.marketing-home .features-grid { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 14px !important; }
.marketing-home .feature-card { grid-column: span 4; min-height: 240px; padding: 28px !important; text-align: left !important; box-shadow: none !important; }
.marketing-home .feature-card:nth-child(1), .marketing-home .feature-card:nth-child(6) { grid-column: span 6; }
.marketing-home .feature-card:nth-child(2), .marketing-home .feature-card:nth-child(3), .marketing-home .feature-card:nth-child(4), .marketing-home .feature-card:nth-child(5) { grid-column: span 3; }
.marketing-home .feature-icon { margin: 0 0 auto !important; }
.marketing-home .use-cases-grid { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 12px !important; }
.marketing-home .use-case-card { grid-column: span 4; min-height: 245px; padding: 26px !important; display: flex !important; flex-direction: column; align-items: flex-start !important; text-align: left !important; box-shadow: none !important; }
.marketing-home .use-case-card .use-case-icon { margin: 0 0 auto !important; }
.marketing-home .faq-section { padding: 112px 24px !important; background: rgba(7,16,31,.42) !important; }
.marketing-home .faq-q { margin: 0 !important; padding: 0 !important; border: 1px solid var(--v4-line) !important; border-radius: 18px; background: var(--v4-surface); }
.marketing-home .faq-q + .faq-q { margin-top: 10px !important; }
.marketing-home .faq-q summary { padding: 22px 24px !important; }
.marketing-home .faq-q p { padding: 0 24px 22px !important; }
.marketing-home .final-cta { margin: 28px; border: 1px solid var(--v4-line-hot) !important; border-radius: 34px; overflow: hidden; }

/* Pricing gets its own comparison-first composition */
.pricing-page .pricing-hero { min-height: 480px; padding: 120px 24px 76px !important; display: grid; place-items: center; }
.pricing-page .pricing-hero .hero-content { width: min(1120px, 100%); text-align: left !important; }
.pricing-page .pricing-hero h1 { max-width: 760px; font-size: clamp(52px, 7vw, 82px) !important; line-height: .96; letter-spacing: -.065em; }
.pricing-page .pricing-hero p { max-width: 620px; margin-left: 0 !important; }
.pricing-page .pricing-section { padding: 40px 24px 108px !important; background: transparent !important; }
.pricing-page .pricing-grid { max-width: 1120px !important; display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 14px !important; }
.pricing-page .pricing-card { grid-column: span 6; padding: 36px !important; border-radius: 30px !important; box-shadow: none !important; }
.pricing-page .pricing-card:first-child:last-child { grid-column: 2 / 12; }
.pricing-page .comparison-section { max-width: 1120px !important; margin-top: 18px !important; padding: 30px !important; border: 1px solid var(--v4-line) !important; border-radius: 28px !important; background: var(--v4-surface) !important; }
.pricing-page .comparison-table { overflow: hidden; border-radius: 18px; border: 1px solid var(--v4-line); }
.pricing-page .trust-section, .pricing-page .faq-section { padding: 96px 24px !important; background: transparent !important; }

/* Auth: two independent floating panels instead of a hard split screen */
.auth-page.blue-ui { min-height: 100vh; padding: 24px; display: grid !important; grid-template-columns: minmax(360px, 1.08fr) minmax(380px, .92fr); gap: 18px; align-items: stretch; }
.auth-page .promo-side, .auth-page .login-side, .auth-page .signup-side {
  position: relative; width: auto !important; min-height: calc(100vh - 48px) !important; border: 1px solid var(--v4-line) !important; border-radius: 30px; overflow: hidden;
}
.auth-page .promo-side { padding: clamp(44px, 7vw, 90px) !important; display: flex; align-items: flex-end; background: linear-gradient(155deg, #13294b, #081427 72%) !important; }
.auth-page .promo-side::after { content: ''; position: absolute; width: 430px; height: 430px; top: -170px; right: -170px; border: 1px solid rgba(104,181,255,.28); border-radius: 50%; box-shadow: 0 0 0 70px rgba(104,181,255,.025); }
.auth-page .promo-content { max-width: 610px !important; margin: 0 !important; }
.auth-page .promo-content h1 { font-size: clamp(48px, 6vw, 76px) !important; line-height: .98 !important; letter-spacing: -.06em; }
.auth-page .pro-features, .auth-page .free-features { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 22px; }
.auth-page .pro-price, .auth-page .upgrade-teaser { max-width: 430px; border-radius: 20px !important; }
.auth-page .login-side, .auth-page .signup-side { padding: clamp(38px, 5vw, 72px) !important; background: rgba(9,20,39,.9) !important; display: flex; flex-direction: column; justify-content: center; }
.auth-page .login-header, .auth-page .signup-header { text-align: left !important; }
.auth-page .login-header img, .auth-page .signup-header img { width: 54px !important; height: 54px !important; border-radius: 16px !important; }
.auth-page .login-header h2, .auth-page .signup-header h2 { font-size: 36px !important; }
.auth-page .google-btn, .auth-page .form-group input { min-height: 54px; border-radius: 15px !important; }
.auth-page .submit-btn { min-height: 54px; width: 100%; }
.auth-page .login-footer, .auth-page .signup-footer, .auth-page .signup-link, .auth-page .login-link { text-align: left !important; }

/* Converter and dynamic SEO landing pages */
.converter-page .hero { min-height: 690px !important; padding: 150px 24px 90px !important; place-items: stretch !important; }
.converter-page .hero > .container { position: relative; display: grid; align-content: center; text-align: left; max-width: 1180px; padding-right: 46% !important; }
.converter-page .hero > .container::after { content: ''; position: absolute; right: 0; top: 50%; width: 38%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 32px; border: 1px solid var(--v4-line-hot); background: linear-gradient(145deg, rgba(104,181,255,.16), rgba(11,23,43,.88)); box-shadow: 34px 34px 0 rgba(104,181,255,.035); }
.converter-page .hero h1 { margin-inline: 0 !important; font-size: clamp(50px, 6vw, 76px) !important; }
.converter-page .hero .subtitle { margin-left: 0 !important; }
.converter-page .hero .cta-button { justify-self: start; }
.converter-page .list-types, .converter-page .features, .converter-page .example { padding: 104px 24px !important; }
.converter-page .type-card, .converter-page .feature-card { min-height: 285px; display: flex; flex-direction: column; }
.converter-page .type-card .type-examples { margin-top: auto; }
.converter-page .example-container { gap: 14px !important; align-items: stretch !important; }
.converter-page .example-input, .converter-page .example-output { padding: 30px !important; border-left-width: 1px !important; }
.seo-product-page .hero { min-height: 590px; display: grid; align-items: center; text-align: left !important; }
.seo-product-page .hero .container { margin-left: max(24px, calc((100vw - 1100px)/2)); max-width: 760px; padding: 80px 24px !important; }
.seo-product-page .hero h1, .seo-product-page .hero .subtitle { margin-left: 0 !important; text-align: left !important; }
.seo-product-page .hero-cta { justify-content: flex-start !important; }
.seo-product-page section.block { max-width: 1100px; margin: 14px auto !important; padding: 48px !important; border-radius: 28px !important; }

/* Shared marketing pages: left-aligned narratives and bento content */
.marketing-body.blue-ui { padding-bottom: 42px !important; }
.marketing-body.blue-ui .main-content,
.marketing-body.blue-ui .page-shell { max-width: 1180px !important; margin-inline: auto; padding-inline: 24px !important; }
.marketing-body.blue-ui .page-hero,
.marketing-body.blue-ui .hero-section,
.marketing-body.blue-ui .blog-header { min-height: 500px; padding: 120px 0 72px !important; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left !important; border-bottom: 1px solid var(--v4-line); }
.marketing-body.blue-ui .hero-title { max-width: 900px; margin-left: 0 !important; font-size: clamp(48px, 6vw, 76px) !important; line-height: .98; }
.marketing-body.blue-ui .hero-subtitle { max-width: 700px; margin-left: 0 !important; }
.marketing-body.blue-ui .hero-actions { justify-content: flex-start !important; }
.marketing-body.blue-ui .glass-card { border-radius: 26px !important; box-shadow: none !important; background: linear-gradient(145deg, rgba(16,31,56,.85), rgba(9,20,39,.75)) !important; }
.marketing-body.blue-ui .card-grid { grid-template-columns: repeat(12, 1fr) !important; gap: 14px !important; }
.marketing-body.blue-ui .card-grid > * { grid-column: span 4; min-height: 240px; }
.about-page .page-shell > .glass-card:nth-of-type(2), .support-page .page-shell > .glass-card { border-color: var(--v4-line-hot) !important; }
.use-case-page .use-cases-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; }
.use-case-page .use-case { min-height: 360px; grid-template-columns: 210px 1fr !important; grid-template-rows: 1fr !important; border-radius: 28px !important; background: var(--v4-surface) !important; box-shadow: none !important; }
.use-case-page .use-case-icon { border: 0 !important; border-right: 1px solid var(--v4-line) !important; font-size: 48px !important; }
.use-case-page .use-case-content { padding: 34px !important; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; }
.use-case-page .use-case-title, .use-case-page .use-case-description { grid-column: 1 / -1; }

/* Blog listing and long-form editorial reading */
.blog-listing .blog-container { max-width: 1180px !important; padding: 0 !important; }
.blog-listing .blog-posts { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 14px !important; }
.blog-listing .blog-post { grid-column: span 4; min-height: 420px; border-radius: 26px !important; box-shadow: none !important; display: flex; flex-direction: column; }
.blog-listing .blog-post:nth-child(1), .blog-listing .blog-post:nth-child(2) { grid-column: span 6; }
.blog-listing .blog-post-image { height: 210px !important; justify-content: flex-start !important; padding: 30px; font-size: 32px !important; }
.blog-listing .blog-post-content { padding: 26px !important; display: flex; flex: 1; flex-direction: column; }
.blog-listing .blog-post-meta { margin-top: auto; }
.article-page .article { padding: 90px 24px 60px !important; }
.article-page .article > .container { max-width: 860px !important; }
.article-page .article-header { min-height: 430px; display: flex; flex-direction: column; justify-content: center; text-align: left !important; border-bottom: 1px solid var(--v4-line); }
.article-page .article-title { max-width: 800px; font-size: clamp(46px, 6vw, 72px) !important; line-height: 1; letter-spacing: -.05em; }
.article-page .article-intro { padding: 28px !important; border-radius: 22px !important; }
.article-page .article-content { font-size: 17px; line-height: 1.8; }
.article-page .article-content h2 { margin-top: 64px !important; padding-top: 24px; border-top: 1px solid var(--v4-line); font-size: 31px; }
.article-page .toc, .article-page .code-block, .article-page .example-box, .article-page .method-box, .article-page .framework-box, .article-page .best-practice, .article-page .tip-box, .article-page .warning-box { border-radius: 22px !important; box-shadow: none !important; padding: 24px !important; }

/* Legal reading room */
.legal-page.blue-ui > .container { max-width: 1180px !important; padding: 0 24px 70px !important; }
.legal-page.blue-ui > .container > .header { position: sticky; top: 14px; z-index: 90; margin: 14px 0 36px !important; padding: 12px 16px !important; border: 1px solid var(--v4-line) !important; border-radius: 22px; background: rgba(9,20,39,.88) !important; backdrop-filter: blur(22px); }
.legal-page .legal-content { max-width: 900px; margin: 0 auto 36px !important; padding: clamp(34px, 6vw, 72px) !important; border-radius: 32px !important; background: rgba(9,20,39,.78) !important; box-shadow: none !important; }
.legal-page .legal-content > h1 { font-size: clamp(46px, 7vw, 72px) !important; line-height: 1; }
.legal-page .legal-content section { margin: 0 !important; padding: 32px 0 !important; border: 0 !important; border-top: 1px solid var(--v4-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.legal-page .legal-content h2 { font-size: 26px; }

/* App shell pages, settings, projects and inventory */
.app-shell-page.blue-ui { padding: 24px; }
.app-shell-page.blue-ui > .container, .app-shell-page .project-container { max-width: 1280px !important; margin: 0 auto !important; padding: 0 !important; }
.app-shell-page .header, .app-shell-page .project-header { margin-bottom: 16px !important; padding: 24px !important; border: 1px solid var(--v4-line) !important; border-radius: 26px !important; background: var(--v4-surface) !important; }
.app-shell-page .sheets-grid { grid-template-columns: repeat(12, 1fr) !important; gap: 14px !important; }
.app-shell-page .project-card, .app-shell-page .sheet-card { grid-column: span 4; min-height: 250px; padding: 24px !important; border-radius: 24px !important; box-shadow: none !important; display: flex; flex-direction: column; }
.app-shell-page .project-actions { margin-top: auto; }
.app-shell-page .settings-container { max-width: 1280px !important; }
.app-shell-page .settings-content { display: grid !important; grid-template-columns: repeat(12, 1fr); gap: 14px !important; }
.app-shell-page .settings-section { grid-column: span 6; margin: 0 !important; padding: 28px !important; border-radius: 26px !important; box-shadow: none !important; }
.app-shell-page .settings-section:first-child { grid-column: span 12; }
.app-shell-page .project-info-section, .app-shell-page .config-section, .app-shell-page .text-input-section, .app-shell-page .result-section, .app-shell-page .table-container { border-radius: 26px !important; box-shadow: none !important; }
.app-shell-page .table-container { overflow: auto; }

/* Admin console */
.admin-page.blue-ui { padding: 20px; }
.admin-page .admin-header { position: sticky; top: 14px; z-index: 100; border: 1px solid var(--v4-line) !important; border-radius: 22px; background: rgba(9,20,39,.9) !important; }
.admin-dashboard-page .admin-container { max-width: 1340px !important; margin: 18px auto !important; padding: 0 !important; }
.admin-dashboard-page .stats-grid, .admin-dashboard-page .insights-grid { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 12px !important; }
.admin-dashboard-page .stat-card { grid-column: span 3; min-height: 150px; }
.admin-dashboard-page .insight-card, .admin-dashboard-page .metric-card { grid-column: span 3; }
.admin-dashboard-page .stat-card, .admin-dashboard-page .section-card, .admin-dashboard-page .insight-card, .admin-dashboard-page .metric-card, .admin-dashboard-page .api-key-card { border-radius: 24px !important; box-shadow: none !important; }
.admin-dashboard-page .section-card { padding: 28px !important; }
.admin-dashboard-page .admin-alert { border: 1px solid var(--v4-line-hot) !important; border-radius: 18px !important; background: rgba(104,181,255,.1) !important; color: var(--v4-text) !important; }
.admin-login-page { display: grid; place-items: center; min-height: 100vh; }
.admin-login-page .admin-login-container { width: min(480px, 100%); padding: 42px !important; border-radius: 30px !important; }

/* Status pages become concise product receipts */
.status-page.blue-ui { padding: 24px; }
.status-page > .container { max-width: 680px !important; width: 100% !important; margin: auto !important; padding: 46px !important; border-radius: 34px !important; box-shadow: 26px 26px 0 rgba(104,181,255,.035) !important; text-align: left !important; }
.status-page .logo-section { justify-content: flex-start !important; }
.status-page .success-icon, .status-page .loading-icon, .status-page .cancel-icon { margin-left: 0 !important; }
.status-page .plan-info, .status-page .info-box { text-align: left; border-radius: 22px !important; }
.status-page > .login-container { width: min(680px, 100%); margin: auto; padding: 46px; border: 1px solid var(--v4-line); border-radius: 34px; background: linear-gradient(155deg, rgba(20,36,66,.9), rgba(9,20,40,.88)); box-shadow: 26px 26px 0 rgba(104,181,255,.035); text-align: left; }
.status-page > .login-container h1 { color: var(--v4-text); font-size: clamp(34px, 5vw, 52px); line-height: 1; letter-spacing: -.045em; }
.status-page > .login-container p { color: var(--v4-muted); }
.status-page > .login-container .login-button { min-height: 50px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--v4-blue); color: var(--v4-bg); font-weight: 800; cursor: pointer; }
.app-shell-page .menu-dropdown { background: var(--v4-surface-2) !important; border: 1px solid var(--v4-line) !important; border-radius: 16px !important; box-shadow: 0 18px 50px rgba(0,0,0,.34) !important; }

@keyframes v4-reveal {
  from { opacity: 0; transform: translateY(22px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.marketing-home .hero-container,
.marketing-body .page-hero > *,
.converter-page .hero > .container > *,
.pricing-page .pricing-hero .hero-content > *,
.auth-page > *,
.status-page > .container, .status-page > .login-container { animation: v4-reveal .72s cubic-bezier(.16,.8,.2,1) both; }
.marketing-body .page-hero > *:nth-child(2), .converter-page .hero > .container > *:nth-child(2), .pricing-page .pricing-hero .hero-content > *:nth-child(2) { animation-delay: .08s; }
.marketing-body .page-hero > *:nth-child(3), .converter-page .hero > .container > *:nth-child(3), .pricing-page .pricing-hero .hero-content > *:nth-child(3) { animation-delay: .16s; }
.auth-page > *:nth-child(2) { animation-delay: .09s; }

@media (max-width: 980px) {
  .marketing-home .hero-container { padding: 40px !important; }
  .marketing-home .hero-title, .marketing-home .hero-subtitle, .marketing-home .hero-badge, .marketing-home .hero-feature-pills, .marketing-home .hero-cta { grid-column: 1 / 9; }
  .marketing-home .hero-stats { grid-column: 9 / 13; }
  .marketing-home .feature-card, .marketing-home .feature-card:nth-child(n), .marketing-home .use-case-card { grid-column: span 6; }
  .auth-page.blue-ui { grid-template-columns: 1fr; }
  .auth-page .promo-side { min-height: 570px !important; }
  .auth-page .login-side, .auth-page .signup-side { min-height: auto !important; }
  .app-shell-page .project-card, .app-shell-page .sheet-card { grid-column: span 6; }
  .app-shell-page .settings-section { grid-column: span 12; }
  .admin-dashboard-page .stat-card, .admin-dashboard-page .insight-card, .admin-dashboard-page .metric-card { grid-column: span 6; }
}

@media (max-width: 760px) {
  .blue-ui .navbar, .marketing-body.blue-ui > .header, .converter-page.blue-ui > .header, .seo-product-page.blue-ui > .header { top: 8px !important; width: calc(100% - 16px); margin-top: 8px !important; border-radius: 18px !important; }
  .blue-ui .nav-buttons { margin-left: auto; }
  .marketing-home .nav-container { gap: 8px; }
  .marketing-home .nav-logo span { font-size: 17px; }
  .blue-ui .nav-buttons .btn { min-height: 40px; padding: 8px 13px !important; }
  .marketing-home .hero { min-height: auto; padding: 70px 8px 58px !important; }
  .marketing-home .hero-container { display: flex !important; flex-direction: column !important; align-items: stretch !important; min-height: auto; padding: 34px 22px !important; border-radius: 28px; }
  .marketing-home .hero-container::before, .marketing-home .hero-container::after { display: none; }
  .marketing-home .hero-title { font-size: clamp(44px, 13vw, 64px) !important; }
  .marketing-home .hero-badge, .marketing-home .hero-feature-pills, .marketing-home .hero-title, .marketing-home .hero-subtitle, .marketing-home .hero-cta, .marketing-home .hero-stats { width: 100%; }
  .marketing-home .hero-feature-pills { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .marketing-home .feature-pill { justify-content: flex-start; min-height: 42px; padding: 9px 12px !important; border-radius: 14px !important; }
  .marketing-home .hero-cta { display: grid !important; grid-template-columns: 1fr; gap: 9px !important; }
  .marketing-home .hero-cta .btn { width: 100%; justify-content: center; }
  .marketing-home .hero-stats { width: 100%; grid-template-columns: repeat(3, 1fr) !important; }
  .marketing-home .hero-stats .stat-item { padding: 14px 10px; }
  .marketing-home .pricing-card { display: block; padding: 26px !important; }
  .marketing-home .pricing-card .plan-features { margin-block: 24px; }
  .marketing-home .trust-badges { grid-template-columns: 1fr 1fr; }
  .marketing-home .feature-card, .marketing-home .feature-card:nth-child(n), .marketing-home .use-case-card { grid-column: span 12; }
  .pricing-page .pricing-hero { padding-top: 90px !important; }
  .pricing-page .pricing-card, .pricing-page .pricing-card:first-child:last-child { grid-column: 1 / -1; }
  .auth-page.blue-ui { padding: 8px; gap: 8px; }
  .auth-page .promo-side { display: none !important; }
  .auth-page .login-side, .auth-page .signup-side { min-height: calc(100vh - 16px) !important; padding: 38px 24px !important; border-radius: 24px; }
  .converter-page .hero { min-height: auto !important; padding: 100px 14px 70px !important; }
  .converter-page .hero > .container { padding-right: 20px !important; text-align: left; }
  .converter-page .hero > .container::after { display: none; }
  .converter-page .hero h1 { font-size: clamp(44px, 13vw, 62px) !important; }
  .marketing-body.blue-ui .page-hero, .marketing-body.blue-ui .hero-section { min-height: auto; padding: 90px 0 56px !important; }
  .marketing-body.blue-ui .hero-title { font-size: clamp(44px, 12vw, 62px) !important; }
  .marketing-body.blue-ui .card-grid > * { grid-column: span 12; }
  .use-case-page .use-case { grid-template-columns: 1fr !important; }
  .use-case-page .use-case-icon { min-height: 130px; border-right: 0 !important; border-bottom: 1px solid var(--v4-line) !important; }
  .use-case-page .use-case-content { grid-template-columns: 1fr; padding: 24px !important; }
  .blog-listing .blog-post, .blog-listing .blog-post:nth-child(n) { grid-column: span 12; }
  .article-page .article-title { font-size: 43px !important; }
  .legal-page .legal-content { padding: 32px 22px !important; }
  .app-shell-page.blue-ui, .admin-page.blue-ui, .status-page.blue-ui { padding: 8px; }
  .app-shell-page .project-card, .app-shell-page .sheet-card { grid-column: span 12; }
  .admin-dashboard-page .stat-card, .admin-dashboard-page .insight-card, .admin-dashboard-page .metric-card { grid-column: span 12; }
  .admin-dashboard-page .admin-header { display: flex !important; flex-wrap: wrap; gap: 8px !important; overflow: hidden; }
  .admin-dashboard-page .admin-logo { flex: 1 1 auto; }
  .admin-dashboard-page .admin-header form { margin-left: auto; }
  .admin-dashboard-page .admin-nav { order: 3; width: 100%; max-width: 100%; display: flex !important; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none; white-space: nowrap; }
  .admin-dashboard-page .admin-nav::-webkit-scrollbar { display: none; }
  .admin-dashboard-page .admin-container, .admin-dashboard-page .section, .admin-dashboard-page .section-card { min-width: 0; max-width: 100%; }
  .admin-dashboard-page .section-card { overflow-x: auto; }
  .status-page > .container { padding: 32px 24px !important; border-radius: 26px !important; }
  .status-page > .login-container { padding: 32px 24px !important; border-radius: 26px !important; }
}

/* ================================================================
   2026 MARKETING V5 — product-led, compact and consistently blue
   ================================================================ */
.marketing-home,
.pricing-page,
.use-case-page {
  --mkt-bg: #07101f;
  --mkt-panel: #0b172b;
  --mkt-panel-2: #101f38;
  --mkt-line: rgba(161, 195, 241, .16);
  --mkt-blue: #68b5ff;
  --mkt-blue-soft: #9ed0ff;
  --mkt-text: #f2f7ff;
  --mkt-muted: #91a8c8;
}

.marketing-home .navbar,
.pricing-page .navbar,
.use-case-page .navbar {
  top: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  background: rgba(7, 16, 31, .88) !important;
  box-shadow: none !important;
}
.marketing-home .navbar .nav-container,
.pricing-page .navbar .nav-container,
.use-case-page .navbar .nav-container {
  width: min(1180px, 100%);
  min-height: 76px;
  margin: 0 auto;
  padding: 10px 24px !important;
}
.marketing-home .nav-menu,
.pricing-page .nav-menu,
.use-case-page .nav-menu {
  border: 0;
  background: transparent;
}
.marketing-home .nav-logo span,
.pricing-page .nav-logo span,
.use-case-page .nav-logo span { letter-spacing: -.035em; }

/* Home: a clear product story with a live-data inspired right rail. */
.marketing-home .hero {
  min-height: auto;
  padding: 34px 24px 86px !important;
  border: 0 !important;
}
.marketing-home .hero-container {
  width: min(1180px, 100%);
  min-height: 640px;
  padding: clamp(42px, 6vw, 72px) !important;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-content: center;
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(16, 31, 56, .96), rgba(8, 18, 35, .9)),
    var(--mkt-panel) !important;
}
.marketing-home .hero-container::before {
  content: 'AI EXTRACTION / READY';
  top: 28px;
  right: 32px;
  color: #7993b9;
  font-size: 9px;
}
.marketing-home .hero-container::after {
  width: 520px;
  height: 520px;
  top: -230px;
  right: -190px;
  background: rgba(104, 181, 255, .035);
}
.marketing-home .hero-badge,
.marketing-home .hero-feature-pills,
.marketing-home .hero-title,
.marketing-home .hero-subtitle,
.marketing-home .hero-cta { grid-column: 1 / 8; }
.marketing-home .hero-badge {
  width: fit-content;
  margin-bottom: 16px !important;
  padding: 7px 12px !important;
  font-size: 12px;
}
.marketing-home .hero-feature-pills {
  gap: 7px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap;
}
.marketing-home .feature-pill {
  padding: 7px 10px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  background: rgba(255, 255, 255, .035) !important;
}
.marketing-home .hero-title {
  max-width: 700px !important;
  margin-bottom: 22px !important;
  font-size: clamp(48px, 5vw, 64px) !important;
  line-height: .99 !important;
  letter-spacing: -.058em !important;
}
.marketing-home .hero-subtitle {
  max-width: 620px !important;
  margin-bottom: 30px !important;
  font-size: clamp(16px, 1.8vw, 19px) !important;
}
.marketing-home .hero-cta { gap: 9px !important; }
.marketing-home .hero-cta .btn { min-height: 50px; padding: 12px 18px !important; }
.marketing-home .hero-stats {
  grid-column: 8 / 13;
  grid-row: 1 / 7;
  align-self: center;
  min-height: 410px;
  padding: 76px 20px 20px;
  border: 1px solid var(--mkt-line);
  border-radius: 26px;
  background:
    linear-gradient(rgba(104, 181, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 181, 255, .04) 1px, transparent 1px),
    rgba(5, 13, 26, .78);
  background-size: 28px 28px;
  box-shadow: 22px 22px 0 rgba(104, 181, 255, .025);
}
.marketing-home .hero-stats::before {
  content: 'STRUCTURED OUTPUT';
  position: absolute;
  top: 25px;
  left: 22px;
  color: var(--mkt-blue);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .17em;
}
.marketing-home .hero-stats::after {
  content: '3 columns detected';
  position: absolute;
  right: 20px;
  top: 21px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(104, 181, 255, .09);
  color: #a7d6ff;
  font-size: 9px;
}
.marketing-home .hero-stats .stat-item {
  min-height: 92px;
  padding: 18px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 16px;
  background: rgba(16, 31, 56, .82);
}
.marketing-home .hero-stats .stat-number { font-size: 24px; }
.marketing-home .hero-stats .stat-label { max-width: 100px; text-align: right; }

.marketing-home .pricing-hero,
.marketing-home .features-section,
.marketing-home .use-cases-section {
  padding: 96px 24px !important;
  border: 0 !important;
}
.marketing-home .pricing-hero,
.marketing-home .use-cases-section { background: rgba(5, 13, 26, .42) !important; }
.marketing-home .pricing-container,
.marketing-home .features-container,
.marketing-home .use-cases-container,
.marketing-home .trust-container { width: min(1120px, 100%); }
.marketing-home .pricing-header,
.marketing-home .features-header,
.marketing-home .use-cases-header {
  max-width: 720px;
  margin-bottom: 38px !important;
}
.marketing-home .pricing-header h2,
.marketing-home .features-header h2,
.marketing-home .use-cases-header h2 {
  font-size: clamp(38px, 4.3vw, 54px) !important;
  line-height: 1.02 !important;
}
.marketing-home .pricing-card {
  min-height: 430px;
  padding: 42px !important;
  grid-template-columns: minmax(250px, .82fr) minmax(360px, 1.18fr);
  align-items: start;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(104, 181, 255, .13), rgba(11, 23, 43, .94)) !important;
}
.marketing-home .pricing-card .plan-features {
  margin: 0;
  padding-left: 24px;
  border-left: 1px solid var(--mkt-line);
}
.marketing-home .pricing-card .plan-cta { min-height: 48px; }
.marketing-home .trust-section {
  padding: 0 24px 96px !important;
  border: 0 !important;
  background: rgba(5, 13, 26, .42) !important;
}
.marketing-home .trust-badges {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
.marketing-home .trust-badge {
  min-height: 78px;
  padding: 16px 18px !important;
  gap: 12px;
  border-radius: 16px !important;
  background: rgba(11, 23, 43, .72) !important;
}
.marketing-home .trust-badge i { font-size: 18px !important; }
.marketing-home .trust-badge span { font-size: 13px; white-space: nowrap; }
.marketing-home .gumroad-trust {
  min-height: 122px;
  margin-top: 10px;
  padding: 24px 26px !important;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  align-items: center;
  gap: 28px;
  border-radius: 18px !important;
}
.marketing-home .gumroad-trust p { margin: 0 !important; text-align: left !important; }

.marketing-home .features-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
.marketing-home .feature-card,
.marketing-home .feature-card:nth-child(n) {
  grid-column: auto;
  min-height: 250px;
  padding: 26px !important;
  border-radius: 22px !important;
  display: flex;
  flex-direction: column;
}
.marketing-home .feature-card:first-child,
.marketing-home .feature-card:last-child {
  background: linear-gradient(145deg, rgba(104, 181, 255, .12), rgba(11, 23, 43, .86)) !important;
}
.marketing-home .feature-icon,
.marketing-home .use-case-icon {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border: 1px solid rgba(104, 181, 255, .18) !important;
  border-radius: 14px !important;
  font-size: 18px !important;
}
.marketing-home .feature-card h3 { margin-top: auto !important; }
.marketing-home .use-cases-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
}
.marketing-home .use-case-card {
  grid-column: auto;
  min-height: 225px;
  padding: 24px !important;
  border-radius: 22px !important;
}
.marketing-home .use-case-card h3 { margin-top: auto; }
.marketing-home .faq-section {
  padding: 96px 24px !important;
  background: transparent !important;
}
.marketing-home .faq-section > div { max-width: 900px !important; }
.marketing-home .final-cta {
  width: min(1120px, calc(100% - 48px));
  margin: 24px auto 72px;
  padding: 84px 24px !important;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(104, 181, 255, .17), rgba(11, 23, 43, .92)) !important;
}

/* Pricing: plan and comparison are visible together, trust follows compactly. */
.pricing-page .pricing-hero {
  width: min(1180px, calc(100% - 48px));
  min-height: 430px;
  margin: 28px auto 0;
  padding: 64px !important;
  place-items: center start;
  overflow: hidden;
  border: 1px solid var(--mkt-line);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(16, 31, 56, .96), rgba(8, 18, 35, .9)) !important;
}
.pricing-page .pricing-hero::before {
  width: 500px;
  height: 500px;
  top: -250px;
  left: auto;
  right: -120px;
  transform: none;
  background: radial-gradient(circle, rgba(104, 181, 255, .18), transparent 68%);
}
.pricing-page .pricing-hero::after {
  content: '$6.99\A / MONTH';
  position: absolute;
  right: 68px;
  top: 50%;
  z-index: 1;
  width: 260px;
  padding: 46px 28px;
  transform: translateY(-50%) rotate(3deg);
  border: 1px solid rgba(104, 181, 255, .28);
  border-radius: 26px;
  background: rgba(7, 16, 31, .72);
  color: var(--mkt-text);
  font-size: 46px;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.055em;
  text-align: center;
  white-space: pre;
  box-shadow: 20px 20px 0 rgba(104, 181, 255, .035);
}
.pricing-page .pricing-hero .hero-content { width: min(650px, 62%); margin: 0 !important; }
.pricing-page .pricing-hero h1 {
  max-width: 650px;
  font-size: clamp(48px, 5.5vw, 68px) !important;
  line-height: .98;
}
.pricing-page .pricing-section {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 72px 24px 96px !important;
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(520px, 1.18fr);
  gap: 14px;
  align-items: stretch;
}
.pricing-page .pricing-grid { display: block !important; margin: 0 !important; }
.pricing-page .pricing-card,
.pricing-page .pricing-card:first-child:last-child {
  min-height: 100%;
  padding: 34px !important;
  display: flex;
  flex-direction: column;
  border-radius: 26px !important;
}
.pricing-page .pricing-card .plan-cta { margin-top: auto; }
.pricing-page .comparison-section {
  margin: 0 !important;
  padding: 28px !important;
  border-radius: 26px !important;
}
.pricing-page .comparison-section h2 { text-align: left; }
.pricing-page .comparison-table th,
.pricing-page .comparison-table td { padding: 15px 14px !important; }
.pricing-page .trust-section {
  width: min(1132px, calc(100% - 48px));
  margin: 0 auto 96px;
  padding: 0 !important;
}
.pricing-page .trust-badges {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
}
.pricing-page .trust-badge {
  min-height: 82px;
  padding: 16px !important;
  border-radius: 16px !important;
}
.pricing-page .gumroad-box {
  margin-top: 10px;
  padding: 24px 28px !important;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  align-items: center;
  gap: 24px;
  border-radius: 18px !important;
}
.pricing-page .gumroad-box h3,
.pricing-page .gumroad-box p { margin: 0 !important; text-align: left; }
.pricing-page .faq-section {
  width: min(1132px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 96px !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pricing-page .faq-section h2 { grid-column: 1 / -1; margin-bottom: 28px !important; text-align: left; }
.pricing-page .faq-item { margin: 0 !important; border-radius: 18px !important; }
.pricing-page .final-cta {
  width: min(1132px, calc(100% - 48px));
  margin: 0 auto 72px;
  padding: 76px 24px !important;
  border: 1px solid var(--mkt-line);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(104, 181, 255, .15), rgba(11, 23, 43, .92)) !important;
}

/* Use cases: readable workflow cards instead of oversized icon bands. */
.use-case-page .main-content { margin-top: 0 !important; }
.use-case-page .hero-section {
  width: min(1180px, calc(100% - 48px));
  min-height: 460px;
  margin: 28px auto 52px;
  padding: 64px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--mkt-line);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(16, 31, 56, .96), rgba(8, 18, 35, .9)) !important;
  text-align: left !important;
}
.use-case-page .hero-section::after {
  content: '6 WORKFLOWS';
  position: absolute;
  right: 54px;
  bottom: 44px;
  color: rgba(104, 181, 255, .18);
  font-size: clamp(64px, 9vw, 116px);
  font-weight: 800;
  letter-spacing: -.07em;
  pointer-events: none;
}
.use-case-page .hero-eyebrow,
.use-case-page .hero-title,
.use-case-page .hero-subtitle,
.use-case-page .hero-actions { position: relative; z-index: 1; }
.use-case-page.marketing-body.blue-ui .hero-title {
  max-width: 850px !important;
  margin: 18px 0 22px !important;
  font-size: clamp(48px, 5vw, 64px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}
.use-case-page .hero-subtitle {
  max-width: 680px !important;
  margin: 0 0 28px !important;
  font-size: 18px !important;
}
.use-case-page .use-cases-grid {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 96px !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.use-case-page .use-case {
  grid-column: span 6;
  min-width: 0;
  min-height: 0;
  padding: 28px;
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: start;
  gap: 20px;
  border: 1px solid var(--mkt-line);
  border-radius: 24px !important;
  background: rgba(11, 23, 43, .82) !important;
}
.use-case-page .use-case:hover {
  border-color: rgba(104, 181, 255, .42) !important;
  transform: translateY(-3px);
}
.use-case-page .use-case-icon {
  width: 58px;
  height: 58px;
  min-height: 58px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border: 1px solid rgba(104, 181, 255, .2) !important;
  border-radius: 16px !important;
  background: rgba(104, 181, 255, .09) !important;
  color: var(--mkt-blue) !important;
  font-size: 21px !important;
}
.use-case-page .use-case-content {
  min-width: 0;
  padding: 0 !important;
  display: block;
}
.use-case-page .use-case-title { margin-bottom: 9px; font-size: 21px !important; }
.use-case-page .use-case-description { margin-bottom: 18px; font-size: 14px; }
.use-case-page .use-case-example {
  margin-bottom: 16px;
  padding: 16px !important;
  border-radius: 14px !important;
}
.use-case-page .use-case-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 14px;
}
.use-case-page .use-case-benefits li { padding: 4px 0; font-size: 12px; }
.use-case-page .cta-panel {
  width: min(1132px, calc(100% - 48px));
  margin: 0 auto 72px !important;
  padding: 72px 28px !important;
  border-radius: 30px !important;
  background: linear-gradient(135deg, rgba(104, 181, 255, .15), rgba(11, 23, 43, .92)) !important;
}

@keyframes marketing-v5-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.marketing-home .hero-container,
.pricing-page .pricing-hero,
.use-case-page .hero-section,
.marketing-home .feature-card,
.marketing-home .use-case-card,
.use-case-page .use-case {
  animation: marketing-v5-reveal .58s cubic-bezier(.2, .75, .25, 1) both;
}

@media (max-width: 900px) {
  .marketing-home .hero-container { display: flex !important; flex-direction: column; }
  .marketing-home .hero-badge,
  .marketing-home .hero-feature-pills,
  .marketing-home .hero-title,
  .marketing-home .hero-subtitle,
  .marketing-home .hero-cta,
  .marketing-home .hero-stats { width: 100%; }
  .marketing-home .hero-stats { min-height: 0; margin-top: 36px !important; }
  .marketing-home .features-grid,
  .marketing-home .use-cases-grid { grid-template-columns: 1fr 1fr !important; }
  .pricing-page .pricing-hero::after { display: none; }
  .pricing-page .pricing-hero .hero-content { width: 100%; }
  .pricing-page .pricing-section { grid-template-columns: 1fr; }
  .use-case-page .use-case { grid-column: span 12; }
}

@media (max-width: 760px) {
  .marketing-home .navbar,
  .pricing-page .navbar,
  .use-case-page .navbar { top: 0 !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; }
  .marketing-home .navbar .nav-container,
  .pricing-page .navbar .nav-container,
  .use-case-page .navbar .nav-container { min-height: 66px; padding: 8px 14px !important; }
  .marketing-home .hero { padding: 16px 8px 62px !important; }
  .marketing-home .hero-container { padding: 34px 22px !important; border-radius: 24px; }
  .marketing-home .hero-title { font-size: clamp(42px, 12.5vw, 58px) !important; }
  .marketing-home .hero-feature-pills { grid-template-columns: 1fr 1fr; }
  .marketing-home .hero-stats { padding: 68px 14px 14px; border-radius: 20px; }
  .marketing-home .hero-stats .stat-item { min-height: 74px; }
  .marketing-home .pricing-hero,
  .marketing-home .features-section,
  .marketing-home .use-cases-section,
  .marketing-home .faq-section { padding: 72px 16px !important; }
  .marketing-home .pricing-card { display: block; min-height: 0; padding: 28px !important; }
  .marketing-home .pricing-card .plan-features { margin-top: 24px; padding-left: 0; border-left: 0; }
  .marketing-home .trust-section { padding: 0 16px 72px !important; }
  .marketing-home .trust-badges { grid-template-columns: 1fr 1fr !important; }
  .marketing-home .trust-badge span { white-space: normal; }
  .marketing-home .gumroad-trust { display: block; padding: 22px !important; }
  .marketing-home .gumroad-trust p { margin-top: 16px !important; }
  .marketing-home .features-grid,
  .marketing-home .use-cases-grid { grid-template-columns: 1fr !important; }
  .marketing-home .feature-card,
  .marketing-home .use-case-card { min-height: 210px; }
  .marketing-home .final-cta { width: calc(100% - 24px); margin-bottom: 48px; }

  .pricing-page .pricing-hero,
  .use-case-page .hero-section {
    width: calc(100% - 16px);
    min-height: 0;
    margin-top: 16px;
    padding: 42px 24px !important;
    border-radius: 24px;
  }
  .pricing-page .pricing-hero h1,
  .use-case-page.marketing-body.blue-ui .hero-title { font-size: clamp(40px, 11vw, 52px) !important; }
  .pricing-page .pricing-section { padding: 48px 8px 72px !important; }
  .pricing-page .comparison-section { padding: 20px 14px !important; overflow-x: auto; }
  .pricing-page .trust-section,
  .pricing-page .faq-section,
  .pricing-page .final-cta,
  .use-case-page .use-cases-grid,
  .use-case-page .cta-panel { width: calc(100% - 16px); }
  .pricing-page .trust-badges { grid-template-columns: 1fr 1fr !important; }
  .pricing-page .gumroad-box { display: block; padding: 22px !important; }
  .pricing-page .gumroad-box p { margin-top: 14px !important; }
  .pricing-page .faq-section { grid-template-columns: 1fr; }
  .pricing-page .faq-section h2 { grid-column: 1; }
  .use-case-page .hero-section::after { display: none; }
  .use-case-page .use-cases-grid { padding-bottom: 72px !important; }
  .use-case-page .use-case { padding: 22px; grid-template-columns: 48px minmax(0, 1fr) !important; gap: 14px; }
  .use-case-page .use-case-icon { width: 48px; height: 48px; min-height: 48px; }
  .use-case-page .use-case-benefits { grid-template-columns: 1fr; }
  .use-case-page .cta-panel { padding: 54px 22px !important; }
}

/* ================================================================
   2026 CONTENT V6 — blog, articles and converter detail consistency
   ================================================================ */

/* One stable navigation rhythm across content and converter pages. */
.blog-listing .navbar,
.article-page.blue-ui > .header,
.converter-page.blue-ui > .header,
.seo-product-page.blue-ui > .header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  background: rgba(7, 16, 31, .9) !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) saturate(1.15);
}
.blog-listing .navbar .nav-container,
.article-page.blue-ui > .header .container,
.converter-page.blue-ui > .header .container,
.seo-product-page.blue-ui > .header .container {
  width: min(1180px, 100%);
  max-width: 1180px !important;
  min-height: 76px;
  margin: 0 auto;
  padding: 0 24px !important;
}
.article-page.blue-ui > .header .nav,
.converter-page.blue-ui > .header .nav,
.seo-product-page.blue-ui > .header .nav { min-height: 76px; padding: 0 !important; }

/* Blog index: one featured story, then a predictable two-column grid. */
.blog-listing .main-content { margin-top: 0 !important; }
.blog-listing .page-hero {
  width: min(1180px, calc(100% - 48px));
  min-height: 460px;
  margin: 28px auto 52px;
  padding: 64px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--v4-line);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(16, 31, 56, .96), rgba(8, 18, 35, .9)),
    var(--v4-surface) !important;
  text-align: left !important;
}
.blog-listing .page-hero::after {
  content: 'FIELD NOTES';
  position: absolute;
  right: 50px;
  bottom: 32px;
  color: rgba(104, 181, 255, .13);
  font-size: clamp(68px, 9vw, 122px);
  font-weight: 800;
  letter-spacing: -.075em;
  pointer-events: none;
}
.blog-listing .page-hero > * { position: relative; z-index: 1; }
.blog-listing.marketing-body.blue-ui .hero-title {
  max-width: 790px;
  margin: 18px 0 22px !important;
  font-size: clamp(48px, 5vw, 64px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}
.blog-listing.marketing-body.blue-ui .hero-subtitle {
  max-width: 680px;
  margin: 0 0 28px !important;
  font-size: 18px !important;
  line-height: 1.65;
}
.blog-listing .hero-actions { justify-content: flex-start !important; }
.blog-listing .blog-container {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px !important;
  padding: 0 0 96px !important;
}
.blog-listing .blog-posts {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.blog-listing .blog-post,
.blog-listing .blog-post:nth-child(n) {
  grid-column: span 6;
  min-width: 0;
  min-height: 390px;
  overflow: hidden;
  border-radius: 24px !important;
  background: rgba(11, 23, 43, .82) !important;
}
.blog-listing .blog-post:first-child {
  grid-column: 1 / -1;
  min-height: 340px;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
}
.blog-listing .blog-post-image {
  height: 142px !important;
  min-height: 142px;
  padding: 24px !important;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start !important;
  background:
    linear-gradient(145deg, rgba(104, 181, 255, .16), rgba(16, 31, 56, .88)) !important;
  font-size: 28px !important;
}
.blog-listing .blog-post:first-child .blog-post-image {
  width: 100%;
  height: 100% !important;
  min-height: 338px;
  padding: 34px !important;
  font-size: 42px !important;
}
.blog-listing .blog-post-content { min-width: 0; padding: 26px !important; }
.blog-listing .blog-post:first-child .blog-post-content { padding: 38px !important; }
.blog-listing .blog-post-title {
  margin-bottom: 12px !important;
  color: var(--v4-text) !important;
  font-size: 22px !important;
  line-height: 1.22;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.blog-listing .blog-post:first-child .blog-post-title { font-size: clamp(28px, 3vw, 40px) !important; }
.blog-listing .blog-post-excerpt {
  color: var(--v4-muted) !important;
  font-size: 15px !important;
  line-height: 1.65;
}
.blog-listing .blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: #7189ad !important;
  font-size: 12px !important;
}
.blog-listing .cta-panel {
  margin-top: 14px !important;
  padding: 54px !important;
  border-radius: 26px !important;
}

/* Long-form articles: a wider header and a calm, readable measure. */
.article-page .article {
  padding: 28px 24px 96px !important;
  overflow: hidden;
}
.article-page .article > .container {
  width: min(1080px, 100%);
  max-width: 1080px !important;
  padding: 0 !important;
}
.article-page .article-header {
  width: 100%;
  min-height: 0;
  padding: clamp(46px, 7vw, 78px);
  border: 1px solid var(--v4-line) !important;
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(16, 31, 56, .9), rgba(8, 18, 35, .82));
  text-align: left !important;
}
.article-page .article-title {
  max-width: 900px;
  margin: 0 0 18px !important;
  color: var(--v4-text) !important;
  font-size: clamp(44px, 4.6vw, 62px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.052em !important;
  overflow-wrap: anywhere;
}
.article-page .article-meta {
  max-width: 820px;
  color: #7189ad !important;
  font-size: 13px !important;
  line-height: 1.55;
}
.article-page .article-intro {
  max-width: 820px;
  margin: 26px 0 0 !important;
  padding: 22px 24px !important;
  border: 1px solid rgba(104, 181, 255, .17) !important;
  border-radius: 18px !important;
  background: rgba(104, 181, 255, .055) !important;
  color: #b9cae3 !important;
  font-size: 18px !important;
  line-height: 1.7;
}
.article-page .article > .container > .cta-panel,
.article-page .article > .container > .cta-box,
.article-page .article > .container > .cta-section {
  width: min(860px, 100%);
  margin: 18px auto 0 !important;
  padding: 28px !important;
  border-radius: 20px !important;
}
.article-page .article-content {
  width: min(760px, 100%);
  max-width: 760px;
  margin: 54px auto 0;
  color: #cad8ec !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  overflow-wrap: anywhere;
  word-break: normal;
}
.article-page .article-content > * { max-width: 100%; }
.article-page .article-content p,
.article-page .article-content li,
.article-page .article-content a,
.article-page .article-content strong,
.article-page .article-content code { overflow-wrap: anywhere; }
.article-page .article-content p,
.article-page .article-content li { font-size: 17px !important; line-height: 1.8 !important; }
.article-page .article-content ul,
.article-page .article-content ol {
  max-width: 100%;
  margin: 20px 0 28px !important;
  padding-left: 24px !important;
}
.article-page .article-content h2 {
  margin: 64px 0 22px !important;
  padding-top: 24px;
  border-top: 1px solid var(--v4-line);
  font-size: clamp(28px, 3vw, 34px) !important;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.article-page .article-content h3 {
  margin: 36px 0 14px !important;
  font-size: 23px !important;
  line-height: 1.25;
}
.article-page .toc,
.article-page .code-block,
.article-page .example-box,
.article-page .pattern-example,
.article-page .trend-box,
.article-page .timeline-content,
.article-page .method-box,
.article-page .framework-box,
.article-page .best-practice,
.article-page .tip-box,
.article-page .warning-box {
  max-width: 100%;
  margin: 24px 0 !important;
  padding: 22px !important;
  overflow: hidden;
  border: 1px solid var(--v4-line) !important;
  border-radius: 18px !important;
  background: rgba(16, 31, 56, .72) !important;
  box-shadow: none !important;
}
.article-page pre,
.article-page table,
.article-page .code-block,
.article-page .example-text {
  max-width: 100%;
  overflow-x: auto !important;
  overscroll-behavior-inline: contain;
}
.article-page img { max-width: 100%; height: auto; }

/* Converter detail pages: reduce hero scale and prevent decorative overflow. */
.converter-page .hero {
  width: min(1180px, calc(100% - 48px));
  min-height: 620px !important;
  margin: 28px auto 42px;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--v4-line);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(16, 31, 56, .96), rgba(8, 18, 35, .9)) !important;
}
.converter-page .hero > .container {
  width: 100%;
  max-width: none !important;
  min-height: 618px;
  padding: 64px 48% 64px 64px !important;
}
.converter-page .hero > .container::after {
  content: 'AI READY\A\A TABLE DETECTED\A 12 ROWS  ·  5 COLUMNS';
  display: flex;
  align-items: flex-end;
  padding: 34px;
  color: #8fc9ff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.9;
  letter-spacing: .12em;
  white-space: pre;
  background:
    linear-gradient(rgba(104, 181, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 181, 255, .045) 1px, transparent 1px),
    rgba(7, 16, 31, .78);
  background-size: 28px 28px;
}
.converter-page .hero h1 {
  max-width: 620px;
  font-size: clamp(46px, 4.8vw, 64px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  overflow-wrap: anywhere;
}
.converter-page .hero .subtitle {
  max-width: 600px;
  font-size: 18px !important;
  line-height: 1.65;
}
.converter-page .list-types,
.converter-page .features,
.converter-page .example {
  padding: 82px 24px !important;
}
.converter-page .list-types > .container,
.converter-page .features > .container,
.converter-page .example > .container { width: min(1160px, 100%); }
.converter-page .types-grid,
.converter-page .features-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.converter-page .type-card,
.converter-page .feature-card {
  min-width: 0;
  min-height: 250px;
  padding: 26px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
}
.converter-page .type-card::after { pointer-events: none; }
.converter-page .type-card h3,
.converter-page .type-card p,
.converter-page .type-examples,
.converter-page .feature-card h3,
.converter-page .feature-card p { max-width: 100%; overflow-wrap: anywhere; }
.converter-page .type-examples { width: 100%; }
.converter-page .example-container { grid-template-columns: 1fr 1fr; }
.converter-page .example-input,
.converter-page .example-output {
  min-width: 0;
  padding: 28px !important;
  overflow: hidden;
  border-radius: 22px !important;
}
.converter-page .example-text {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* SEO converter pages share the same readable product hierarchy. */
.seo-product-page > .container { width: min(1180px, 100%); max-width: 1180px; }
.seo-product-page .breadcrumb { padding: 18px 24px 0 !important; }
.seo-product-page .hero {
  width: min(1180px, calc(100% - 48px));
  min-height: 520px;
  margin: 24px auto 42px;
  padding: 0 !important;
  border: 1px solid var(--v4-line);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(16, 31, 56, .96), rgba(8, 18, 35, .9)) !important;
}
.seo-product-page .hero .container {
  width: 100%;
  max-width: 900px;
  margin: 0 !important;
  padding: 72px 64px !important;
}
.seo-product-page .hero h1 {
  max-width: 820px;
  font-size: clamp(46px, 5vw, 64px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}
.seo-product-page .hero .subtitle {
  max-width: 720px;
  font-size: 18px !important;
  line-height: 1.65;
}
.seo-product-page section.block {
  width: min(1100px, calc(100% - 48px));
  max-width: 1100px;
  margin: 12px auto !important;
  padding: 46px !important;
  overflow: hidden;
  border-radius: 26px !important;
}
.seo-product-page .steps,
.seo-product-page .features { gap: 12px !important; }
.seo-product-page .step,
.seo-product-page .feature { min-width: 0; padding: 24px !important; border-radius: 18px !important; }
.seo-product-page .step p,
.seo-product-page .feature p,
.seo-product-page .faq-item p,
.seo-product-page .intro-text { overflow-wrap: anywhere; }
.seo-product-page .final {
  width: min(1100px, calc(100% - 48px));
  margin: 24px auto 72px;
  padding: 72px 24px !important;
  border: 1px solid var(--v4-line);
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(104, 181, 255, .15), rgba(11, 23, 43, .92)) !important;
}

@media (max-width: 900px) {
  .blog-listing .blog-post,
  .blog-listing .blog-post:nth-child(n) { grid-column: 1 / -1; }
  .converter-page .types-grid,
  .converter-page .features-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 760px) {
  .blog-listing .navbar,
  .article-page.blue-ui > .header,
  .converter-page.blue-ui > .header,
  .seo-product-page.blue-ui > .header {
    top: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .blog-listing .navbar .nav-container,
  .article-page.blue-ui > .header .container,
  .converter-page.blue-ui > .header .container,
  .seo-product-page.blue-ui > .header .container,
  .article-page.blue-ui > .header .nav,
  .converter-page.blue-ui > .header .nav,
  .seo-product-page.blue-ui > .header .nav { min-height: 66px; padding-inline: 14px !important; }

  .blog-listing .page-hero {
    width: calc(100% - 16px);
    min-height: 0;
    margin: 16px auto 34px;
    padding: 42px 24px !important;
    border-radius: 24px;
  }
  .blog-listing .page-hero::after { display: none; }
  .blog-listing.marketing-body.blue-ui .hero-title {
    font-size: clamp(38px, 10.5vw, 46px) !important;
    line-height: 1.03 !important;
  }
  .blog-listing.marketing-body.blue-ui .hero-subtitle { font-size: 16px !important; }
  .blog-listing .blog-container { width: calc(100% - 16px); padding-bottom: 72px !important; }
  .blog-listing .blog-post,
  .blog-listing .blog-post:first-child {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .blog-listing .blog-post:first-child .blog-post-image { min-height: 170px; height: 170px !important; }
  .blog-listing .blog-post:first-child .blog-post-content,
  .blog-listing .blog-post-content { padding: 22px !important; }
  .blog-listing .blog-post:first-child .blog-post-title { font-size: 26px !important; }
  .blog-listing .cta-panel { padding: 36px 22px !important; }

  .article-page .article { padding: 16px 8px 72px !important; }
  .article-page .article > .container { width: 100%; }
  .article-page .article-header { padding: 34px 22px; border-radius: 24px; }
  .article-page .article-title { font-size: clamp(36px, 10.5vw, 42px) !important; line-height: 1.04 !important; }
  .article-page .article-intro { padding: 18px !important; font-size: 16px !important; }
  .article-page .article > .container > .cta-panel,
  .article-page .article > .container > .cta-box,
  .article-page .article > .container > .cta-section { padding: 22px !important; }
  .article-page .article-content { width: calc(100% - 24px); margin-top: 42px; }
  .article-page .article-content p,
  .article-page .article-content li { font-size: 16px !important; line-height: 1.72 !important; }
  .article-page .article-content h2 { margin-top: 50px !important; font-size: 27px !important; }
  .article-page .article-content h3 { font-size: 21px !important; }
  .article-page .toc,
  .article-page .code-block,
  .article-page .example-box,
  .article-page .pattern-example,
  .article-page .trend-box,
  .article-page .timeline-content,
  .article-page .method-box,
  .article-page .framework-box,
  .article-page .best-practice,
  .article-page .tip-box,
  .article-page .warning-box { padding: 18px !important; }

  .converter-page .hero {
    width: calc(100% - 16px);
    min-height: 0 !important;
    margin: 16px auto 28px;
    border-radius: 24px;
  }
  .converter-page .hero > .container {
    min-height: 0;
    padding: 48px 24px !important;
  }
  .converter-page .hero > .container::after { display: none; }
  .converter-page .hero h1 { font-size: clamp(38px, 10.5vw, 44px) !important; }
  .converter-page .hero .subtitle { font-size: 16px !important; }
  .converter-page .list-types,
  .converter-page .features,
  .converter-page .example { padding: 64px 16px !important; }
  .converter-page .types-grid,
  .converter-page .features-grid { grid-template-columns: 1fr !important; }
  .converter-page .type-card,
  .converter-page .feature-card { min-height: 0; padding: 24px !important; }
  .converter-page .example-container { grid-template-columns: 1fr; }

  .seo-product-page .hero {
    width: calc(100% - 16px);
    min-height: 0;
    margin: 16px auto 28px;
    border-radius: 24px;
  }
  .seo-product-page .hero .container { padding: 46px 24px !important; }
  .seo-product-page .hero h1 { font-size: clamp(38px, 10.5vw, 44px) !important; }
  .seo-product-page .hero .subtitle { font-size: 16px !important; }
  .seo-product-page section.block {
    width: calc(100% - 16px);
    padding: 30px 22px !important;
    border-radius: 22px !important;
  }
  .seo-product-page .steps,
  .seo-product-page .features { grid-template-columns: 1fr !important; }
  .seo-product-page .final { width: calc(100% - 16px); padding: 54px 22px !important; }

  .use-case-page.marketing-body.blue-ui .hero-title { font-size: clamp(38px, 10.5vw, 46px) !important; }
}

/* ================================================================
   2026 INFO V7 — legal contrast and balanced company/support layouts
   ================================================================ */

/* Explicit button contrast wins over generic legal link colors. */
.legal-page.blue-ui *,
.legal-page.blue-ui *::before,
.legal-page.blue-ui *::after,
.support-page.blue-ui *,
.support-page.blue-ui *::before,
.support-page.blue-ui *::after,
.about-page.blue-ui *,
.about-page.blue-ui *::before,
.about-page.blue-ui *::after { box-sizing: border-box; }

.legal-page.blue-ui .legal-content a.btn-primary,
.support-page.blue-ui a.btn-primary,
.about-page.blue-ui a.btn-primary {
  color: #07101f !important;
  background: #68b5ff !important;
  border-color: #68b5ff !important;
  -webkit-text-fill-color: #07101f !important;
}
.legal-page.blue-ui .legal-content a.btn-primary i,
.support-page.blue-ui a.btn-primary i,
.about-page.blue-ui a.btn-primary i { color: currentColor !important; }
.legal-page.blue-ui .legal-content a.btn-outline,
.support-page.blue-ui a.btn-outline,
.about-page.blue-ui a.btn-outline {
  color: #eef5ff !important;
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid rgba(161, 195, 241, .24) !important;
  -webkit-text-fill-color: #eef5ff !important;
}
.legal-page.blue-ui .legal-content a.btn-outline:hover,
.support-page.blue-ui a.btn-outline:hover,
.about-page.blue-ui a.btn-outline:hover {
  color: #07101f !important;
  background: #9ed0ff !important;
  border-color: #9ed0ff !important;
  -webkit-text-fill-color: #07101f !important;
}
.legal-page.blue-ui .btn,
.support-page.blue-ui .btn,
.about-page.blue-ui .btn {
  height: 44px;
  min-height: 44px;
  padding: 10px 16px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* Legal reading room. */
.legal-page.blue-ui > .container {
  width: min(1180px, 100%);
  max-width: 1180px !important;
  padding: 0 24px 72px !important;
}
.legal-page.blue-ui > .container > .header {
  min-height: 68px;
  margin: 14px 0 28px !important;
  padding: 0 18px !important;
  display: flex;
  align-items: center;
}
.legal-page.blue-ui > .container > .header .header-content { width: 100%; padding: 0 !important; }
.legal-page.blue-ui > .container > .header h1 { margin: 0; font-size: 20px !important; }
.legal-page .legal-content {
  width: min(920px, 100%);
  max-width: 920px !important;
  padding: clamp(38px, 6vw, 70px) !important;
  overflow: hidden;
}
.legal-page .legal-content > h1 {
  max-width: 760px;
  margin-bottom: 12px !important;
  font-size: clamp(42px, 5vw, 58px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.052em !important;
  overflow-wrap: anywhere;
}
.legal-page .last-updated { margin-bottom: 34px !important; font-size: 13px !important; }
.legal-page .legal-content section {
  padding: 30px 0 !important;
  overflow: visible;
}
.legal-page .legal-content section h2 {
  margin: 0 0 14px !important;
  font-size: 25px !important;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.legal-page .legal-content section h3 {
  margin: 24px 0 10px !important;
  font-size: 18px !important;
  line-height: 1.3;
}
.legal-page .legal-content section p,
.legal-page .legal-content section li {
  font-size: 16px !important;
  line-height: 1.75 !important;
  overflow-wrap: anywhere;
}
.legal-page .legal-content section ul,
.legal-page .legal-content section ol { padding-left: 22px !important; }
.legal-page .legal-content .cta-panel {
  margin: 32px 0 0 !important;
  padding: 36px !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(104, 181, 255, .14), rgba(11, 23, 43, .92)) !important;
  text-align: left;
}
.legal-page .legal-content .cta-panel h2 { color: var(--v4-text) !important; font-size: 28px !important; }
.legal-page .legal-content .cta-panel p { max-width: 680px; color: var(--v4-muted) !important; }
.legal-page .legal-content .cta-actions { justify-content: flex-start; }

/* Support and About use one compact public-page shell. */
.support-page.blue-ui > .header,
.about-page.blue-ui > .header {
  position: sticky !important;
  top: 0 !important;
  z-index: 120;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 0 1px !important;
  border-radius: 0 !important;
  background: rgba(7, 16, 31, .9) !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) saturate(1.15);
}
.support-page > .header .header-content,
.about-page > .header .header-content {
  width: min(1180px, 100%);
  min-height: 76px;
  margin: 0 auto;
  padding: 10px 24px !important;
}
.support-page .auth-buttons,
.about-page .auth-buttons { gap: 8px; }
.support-page .page-shell,
.about-page .page-shell {
  width: min(1180px, calc(100% - 48px));
  max-width: none !important;
  margin: 0 auto;
  padding: 28px 0 96px !important;
}
.support-page .page-hero,
.about-page .page-hero {
  width: 100%;
  min-height: 440px;
  margin: 0 0 14px !important;
  padding: 58px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--v4-line) !important;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(16, 31, 56, .96), rgba(8, 18, 35, .9)) !important;
  text-align: left !important;
}
.support-page .page-hero::after,
.about-page .page-hero::after {
  position: absolute;
  right: 44px;
  bottom: 28px;
  color: rgba(104, 181, 255, .12);
  font-size: clamp(70px, 9vw, 116px);
  font-weight: 800;
  letter-spacing: -.075em;
  pointer-events: none;
}
.support-page .page-hero::after { content: 'SUPPORT'; }
.about-page .page-hero::after { content: 'OUR STORY'; }
.support-page .page-hero > *,
.about-page .page-hero > * { position: relative; z-index: 1; }
.support-page.marketing-body.blue-ui .hero-title,
.about-page.marketing-body.blue-ui .hero-title {
  max-width: 820px;
  margin: 18px 0 22px !important;
  font-size: clamp(48px, 5vw, 64px) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}
.support-page.marketing-body.blue-ui .hero-subtitle,
.about-page.marketing-body.blue-ui .hero-subtitle {
  max-width: 680px;
  margin: 0 0 28px !important;
  font-size: 18px !important;
  line-height: 1.65;
}
.support-page .hero-actions,
.about-page .hero-actions { justify-content: flex-start !important; }

.support-page .page-shell > section,
.about-page .page-shell > section { min-width: 0; }
.support-page .page-shell > .card-grid,
.about-page .page-shell > .card-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.support-page .page-shell > .card-grid > .glass-card,
.about-page .page-shell > .card-grid > .glass-card {
  grid-column: span 4;
  min-width: 0;
  min-height: 250px;
  margin: 0 !important;
  padding: 26px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 22px !important;
}
.support-page .page-shell > .card-grid > .glass-card[style*="text-align: center"] {
  align-items: center;
  text-align: center !important;
}
.support-page .page-shell > .card-grid > .glass-card .btn,
.about-page .page-shell > .card-grid > .glass-card .btn { margin-top: auto !important; }
.support-page .page-shell > .glass-card,
.about-page .page-shell > .glass-card {
  width: 100%;
  min-height: 0;
  margin: 0 0 14px !important;
  padding: 34px !important;
  overflow: hidden;
  border-radius: 24px !important;
}
.support-page .page-shell > .glass-card > .card-grid,
.about-page .page-shell > .glass-card > .card-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 18px;
}
.about-page .page-shell > .glass-card > .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.support-page .page-shell > .glass-card > .card-grid > .glass-card,
.about-page .page-shell > .glass-card > .card-grid > .glass-card {
  grid-column: auto !important;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 22px !important;
  border-radius: 18px !important;
}
.support-page .glass-card h2,
.support-page .glass-card h3,
.about-page .glass-card h2,
.about-page .glass-card h3 { color: var(--v4-text) !important; overflow-wrap: anywhere; }
.support-page .glass-card p,
.about-page .glass-card p {
  color: var(--v4-muted) !important;
  font-size: 15px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.support-page .glass-card a:not(.btn),
.about-page .glass-card a:not(.btn) { color: var(--v4-blue) !important; overflow-wrap: anywhere; }
.about-page .use-case-icon {
  width: 50px !important;
  height: 50px !important;
  min-height: 50px;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border: 1px solid rgba(104, 181, 255, .2) !important;
  background: rgba(104, 181, 255, .09) !important;
  color: var(--v4-blue) !important;
  font-size: 19px !important;
}
.about-page .page-shell > .glass-card:last-child {
  padding: 58px 32px !important;
  text-align: center;
  background: linear-gradient(135deg, rgba(104, 181, 255, .14), rgba(11, 23, 43, .92)) !important;
}

@media (max-width: 900px) {
  .support-page .page-shell > .card-grid > .glass-card,
  .about-page .page-shell > .card-grid > .glass-card { grid-column: span 6; }
  .support-page .page-shell > .card-grid > .glass-card:last-child,
  .about-page .page-shell > .card-grid > .glass-card:last-child { grid-column: 1 / -1; }
  .about-page .page-shell > .glass-card > .card-grid { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 760px) {
  .legal-page.blue-ui > .container { padding: 0 8px 48px !important; }
  .legal-page.blue-ui > .container > .header {
    top: 8px;
    min-height: 58px;
    margin: 8px 0 16px !important;
    border-radius: 18px;
  }
  .legal-page .legal-content { padding: 34px 22px !important; border-radius: 24px !important; }
  .legal-page .legal-content > h1 { font-size: clamp(36px, 10.5vw, 42px) !important; }
  .legal-page .legal-content section { padding: 25px 0 !important; }
  .legal-page .legal-content section h2 { font-size: 22px !important; }
  .legal-page .legal-content .cta-panel { padding: 26px 20px !important; text-align: left; }
  .legal-page .legal-content .cta-actions { display: grid; grid-template-columns: 1fr; }
  .legal-page .legal-content .cta-actions .btn { width: 100%; justify-content: center; }

  .support-page.blue-ui > .header,
  .about-page.blue-ui > .header { top: 0 !important; }
  .support-page > .header .header-content,
  .about-page > .header .header-content { min-height: 66px; padding: 8px 14px !important; }
  .support-page .auth-buttons .btn:first-child,
  .about-page .auth-buttons .btn:first-child { display: none; }
  .support-page .page-shell,
  .about-page .page-shell {
    width: calc(100% - 16px);
    padding: 16px 0 64px !important;
  }
  .support-page .page-hero,
  .about-page .page-hero {
    min-height: 0;
    padding: 42px 24px !important;
    border-radius: 24px;
  }
  .support-page .page-hero::after,
  .about-page .page-hero::after { display: none; }
  .support-page.marketing-body.blue-ui .hero-title,
  .about-page.marketing-body.blue-ui .hero-title {
    font-size: clamp(38px, 10.5vw, 46px) !important;
    line-height: 1.03 !important;
  }
  .support-page.marketing-body.blue-ui .hero-subtitle,
  .about-page.marketing-body.blue-ui .hero-subtitle { font-size: 16px !important; }
  .support-page .hero-actions,
  .about-page .hero-actions { display: grid; width: 100%; grid-template-columns: 1fr; }
  .support-page .hero-actions .btn,
  .about-page .hero-actions .btn { width: 100%; justify-content: center; }
  .support-page .page-shell > .card-grid,
  .about-page .page-shell > .card-grid { grid-template-columns: 1fr !important; }
  .support-page .page-shell > .card-grid > .glass-card,
  .about-page .page-shell > .card-grid > .glass-card,
  .support-page .page-shell > .card-grid > .glass-card:last-child,
  .about-page .page-shell > .card-grid > .glass-card:last-child { grid-column: 1; min-height: 0; }
  .support-page .page-shell > .glass-card,
  .about-page .page-shell > .glass-card { padding: 26px 20px !important; }
  .support-page .page-shell > .glass-card > .card-grid,
  .about-page .page-shell > .glass-card > .card-grid { grid-template-columns: 1fr !important; }
  .about-page .page-shell > .glass-card:last-child { padding: 44px 22px !important; }
}