:root {
        color-scheme: light;
        --bg: #f7f7fb;
        --surface: #ffffff;
        --surface-2: #f3f6fb;
        --text: #1f2937;
        --muted: #6b7280;
        --line: #e5e7eb;
        --line-strong: #d1d5db;
        --primary: #e5322d;
        --primary-dark: #c92722;
        --primary-soft: #fff1f0;
        --green: #047857;
        --red: #b91c1c;
        --amber: #b45309;
        --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.05);
        --shadow-md: 0 10px 28px rgba(31, 41, 55, 0.07);
        --shadow-lg: 0 20px 52px rgba(31, 41, 55, 0.1);
        --radius: 16px;
        --radius-sm: 10px;
        --container: min(1180px, calc(100% - 32px));
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: "Geist Sans", "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        font-size: 16px;
        font-weight: 450;
        line-height: 1.55;
        letter-spacing: 0;
        color: var(--text);
        background: var(--bg);
      }
      h1, h2, h3, h4 {
        font-family: "Geist Sans", "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        letter-spacing: 0;
        text-wrap: balance;
      }
      p { text-wrap: pretty; }
      a { color: inherit; }
      img { max-width: 100%; }
      button, input, select, textarea { font: inherit; }
      button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
        outline: 3px solid rgba(229, 50, 45, 0.24);
        outline-offset: 3px;
      }
      button { cursor: pointer; }
      button:disabled { cursor: not-allowed; opacity: 0.58; }

      .app-shell { min-height: 100vh; }
      .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 72px;
        padding: 0 max(24px, calc((100vw - 1180px) / 2));
        background: #fff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 1px 0 rgba(31, 41, 55, 0.02);
      }
      .brand-link, .footer-brand {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        color: var(--text);
        font-weight: 800;
        letter-spacing: 0;
        text-decoration: none;
      }
      .brand-link span:last-child { font-size: 1.08rem; }
      .logo-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid #ffd3cf;
        border-radius: 12px;
        color: var(--primary);
        background: #fff;
        box-shadow: var(--shadow-sm);
      }
      .desktop-nav {
        display: flex;
        align-items: center;
        gap: 26px;
      }
      .desktop-nav a, .desktop-nav button, .mobile-nav a {
        border: 0;
        background: none;
        color: #374151;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
      }
      .desktop-nav a:hover, .desktop-nav button:hover, .mobile-nav a:hover { color: var(--primary); }
      .dropdown { position: relative; }
      .dropdown button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 0;
      }
      .dropdown-menu {
        position: absolute;
        top: 42px;
        right: 0;
        display: grid;
        min-width: 230px;
        padding: 8px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--shadow-md);
      }
      .dropdown-menu a {
        padding: 12px;
        border-radius: 10px;
      }
      .dropdown-menu a:hover { background: var(--primary-soft); }
      .mobile-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--text);
        background: #fff;
      }
      .mobile-nav { display: none; }

      .home-hero, .tool-page-hero, .section {
        width: var(--container);
        margin: 0 auto;
      }
      .home-hero { padding: 80px 0 34px; }
      .tool-page-hero { padding: 46px 0 12px; }
      .section { padding: 72px 0; }
      .hero-grid, .hero-grid-premium {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
        gap: 46px;
        align-items: center;
      }
      .hero-centered {
        max-width: 880px;
        margin: 0 auto;
        text-align: center;
      }
      .home-hero h1, .page-heading h1, .article-content h1, .legal-page h1, .tool-page-hero h1 {
        margin: 12px 0 18px;
        max-width: 780px;
        font-size: clamp(2.55rem, 6vw, 5.35rem);
        font-weight: 800;
        line-height: 0.98;
        letter-spacing: 0;
      }
      .hero-centered h1,
      .hero-centered p {
        margin-left: auto;
        margin-right: auto;
      }
      .tool-page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 4.45rem); }
      .home-hero p, .tool-page-hero p, .page-heading p, .lead {
        max-width: 690px;
        color: var(--muted);
        font-size: 1.13rem;
        font-weight: 450;
        line-height: 1.7;
      }
      .eyebrow {
        display: inline-flex;
        align-items: center;
        color: var(--primary);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
      }
      .hero-actions, .preview-actions, .inline-links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
        margin-top: 28px;
      }
      .hero-centered .hero-actions {
        justify-content: center;
      }
      .primary-button, .secondary-button, .text-link {
        display: inline-flex;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 10px;
        font-size: 0.95rem;
        font-weight: 600;
        text-decoration: none;
        transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
      }
      .primary-button {
        border: 1px solid var(--primary);
        padding: 12px 18px;
        color: #fff;
        background: var(--primary);
        box-shadow: 0 10px 20px rgba(229, 50, 45, 0.14);
      }
      .primary-button:hover { background: var(--primary-dark); transform: translateY(-1px); }
      .secondary-button {
        border: 1px solid var(--line-strong);
        padding: 12px 18px;
        color: var(--text);
        background: #fff;
      }
      .secondary-button:hover { border-color: #ffd3cf; background: #fffafa; transform: translateY(-1px); }
      .text-link {
        min-height: auto;
        color: var(--primary);
        font-size: 0.95rem;
      }
      .wide { width: 100%; }
      .hero-proof {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 28px;
      }
      .centered-proof { justify-content: center; }
      .hero-proof span, .tool-meta-row span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 11px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: #374151;
        background: rgba(255, 255, 255, 0.78);
        font-size: 0.9rem;
        font-weight: 700;
      }
      .home-page .home-hero {
        padding: 70px 0 24px;
      }
      .home-page .hero-centered {
        max-width: 820px;
      }
      .home-page .home-hero h1 {
        max-width: 800px;
        margin-top: 0;
        font-size: clamp(2.75rem, 6vw, 5.15rem);
        line-height: 1;
      }
      .home-page .home-hero p {
        max-width: 680px;
        font-size: clamp(1.05rem, 2vw, 1.22rem);
      }
      .home-page .hero-actions {
        justify-content: center;
        margin-top: 26px;
      }
      .home-page .primary-button {
        min-height: 50px;
        padding-inline: 24px;
      }
      .home-tool-directory {
        padding-top: 26px;
      }
      .home-tool-header {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 18px;
      }
      .home-tool-header h2 {
        margin: 8px 0 0;
        font-size: clamp(1.7rem, 3.4vw, 2.65rem);
        line-height: 1.08;
      }
      .popular-tool-highlight {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 20px;
        padding: 22px;
        border: 1px solid rgba(229, 50, 45, 0.24);
        border-radius: 18px;
        background: linear-gradient(180deg, #ffffff, #fff7f6);
        box-shadow: var(--shadow-sm);
      }
      .popular-tool-highlight span {
        color: var(--primary);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.11em;
        text-transform: uppercase;
      }
      .popular-tool-highlight h3 {
        margin: 6px 0;
        font-size: 1.35rem;
      }
      .popular-tool-highlight p {
        max-width: 620px;
        margin: 0;
        color: var(--muted);
        line-height: 1.6;
      }
      .home-tool-grid .tool-card-link {
        min-height: 210px;
      }
      .home-tool-grid .tool-card-link .text-link {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--primary);
        background: #fff;
      }
      .home-tool-grid .tool-card-link:hover .text-link {
        border-color: rgba(229, 50, 45, 0.32);
        background: var(--primary-soft);
      }
      .home-trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .home-page .how-it-works {
        padding-top: 46px;
      }

      .tools-page {
        width: var(--container);
        margin: 0 auto;
      }
      .tools-hero {
        max-width: 780px;
        margin: 0 auto;
        padding: 76px 0 34px;
        text-align: center;
      }
      .tools-hero h1 {
        margin: 0 0 16px;
        color: var(--text);
        font-size: clamp(2.55rem, 5.3vw, 4.7rem);
        font-weight: 800;
        line-height: 1;
      }
      .tools-hero p {
        max-width: 640px;
        margin: 0 auto;
        color: var(--muted);
        font-size: 1.14rem;
        line-height: 1.7;
      }
      .tools-directory {
        padding: 18px 0 72px;
      }
      .tools-filter-row {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 0 auto 34px;
        overflow-x: auto;
        padding: 2px 0 8px;
        scrollbar-width: none;
      }
      .tools-filter-row::-webkit-scrollbar { display: none; }
      .tools-filter-row button {
        flex: 0 0 auto;
        min-height: 42px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0 18px;
        color: #374151;
        background: #fff;
        box-shadow: var(--shadow-sm);
        font-size: 0.94rem;
        font-weight: 650;
        transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
      }
      .tools-filter-row button:hover {
        border-color: rgba(229, 50, 45, 0.32);
        color: var(--primary);
      }
      .tools-filter-row button.active {
        border-color: var(--primary);
        color: #fff;
        background: var(--primary);
      }
      .tools-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
      }
      .tools-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 260px;
        padding: 34px;
        border: 1px solid var(--line);
        border-radius: 22px;
        color: var(--text);
        background: #fff;
        box-shadow: var(--shadow-sm);
        text-decoration: none;
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
      }
      .tools-card:hover {
        border-color: rgba(229, 50, 45, 0.34);
        box-shadow: 0 18px 42px rgba(31, 41, 55, 0.09);
        transform: translateY(-3px);
      }
      .tools-card-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        border-radius: 18px;
        color: var(--primary);
        background: var(--primary-soft);
      }
      .tools-card-icon.blue { color: #2563eb; background: #eff6ff; }
      .tools-card-icon.emerald { color: #059669; background: #ecfdf5; }
      .tools-card-icon.amber { color: var(--amber); background: #fffbeb; }
      .tools-card h2 {
        margin: 22px 0 10px;
        font-size: 1.28rem;
        line-height: 1.2;
      }
      .tools-card p {
        margin: 0;
        color: var(--muted);
        line-height: 1.68;
      }
      .tools-card-action {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: max-content;
        margin-top: auto;
        padding-top: 22px;
        color: var(--primary);
        font-weight: 700;
      }
      .tools-benefit-section {
        padding: 0 0 78px;
      }
      .tools-benefit-section .section-heading {
        margin-bottom: 28px;
      }
      .tools-benefit-section .section-heading p {
        max-width: 640px;
        margin: 0 auto;
        color: var(--muted);
        line-height: 1.7;
      }
      .tools-benefit-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
      }
      .tools-benefit-grid article {
        padding: 26px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        box-shadow: var(--shadow-sm);
      }
      .tools-benefit-grid svg { color: var(--primary); }
      .tools-benefit-grid h3 {
        margin: 14px 0 8px;
        font-size: 1.06rem;
      }
      .tools-benefit-grid p {
        margin: 0;
        color: var(--muted);
        line-height: 1.65;
      }

      .blog-page {
        width: var(--container);
        margin: 0 auto;
      }
      .blog-hero {
        max-width: 760px;
        margin: 0 auto;
        padding: 58px 0 34px;
        text-align: center;
      }
      .blog-hero .breadcrumbs {
        justify-content: center;
        margin-bottom: 22px;
      }
      .blog-hero h1 {
        margin: 0 0 16px;
        color: var(--text);
        font-size: clamp(2.55rem, 5.2vw, 4.65rem);
        font-weight: 800;
        line-height: 1;
      }
      .blog-hero p {
        max-width: 620px;
        margin: 0 auto;
        color: var(--muted);
        font-size: 1.14rem;
        line-height: 1.7;
      }
      .blog-featured-card {
        display: grid;
        grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1fr);
        gap: 34px;
        align-items: center;
        padding: 34px;
        border: 1px solid var(--line);
        border-radius: 24px;
        background: #fff;
        box-shadow: var(--shadow-md);
      }
      .blog-featured-visual {
        display: grid;
        place-items: center;
        min-height: 310px;
        border: 1px solid rgba(229, 50, 45, 0.18);
        border-radius: 20px;
        color: var(--primary);
        background: linear-gradient(180deg, #fff7f6, #ffffff);
        text-align: center;
        font-weight: 800;
      }
      .blog-featured-visual span { margin-top: 10px; }
      .blog-featured-content h2 {
        margin: 10px 0 12px;
        font-size: clamp(1.9rem, 3.2vw, 3rem);
        line-height: 1.08;
      }
      .blog-featured-content p {
        max-width: 620px;
        color: var(--muted);
        line-height: 1.75;
      }
      .blog-tool-cta {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 24px;
        align-items: center;
        margin: 38px 0;
        padding: 26px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: #fff;
        box-shadow: var(--shadow-sm);
      }
      .blog-tool-cta h2 {
        margin: 0 0 8px;
        font-size: clamp(1.35rem, 2.6vw, 2rem);
      }
      .blog-tool-cta p {
        margin: 0;
        color: var(--muted);
        line-height: 1.65;
      }
      .blog-tool-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
      }
      .blog-posts-section {
        padding: 22px 0 72px;
      }
      .blog-section-header {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 22px;
        margin-bottom: 24px;
      }
      .blog-section-header h2 {
        margin: 8px 0 0;
        font-size: clamp(1.7rem, 3vw, 2.45rem);
      }
      .blog-category-filter {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
      }
      .blog-category-filter::-webkit-scrollbar { display: none; }
      .blog-category-filter button {
        flex: 0 0 auto;
        min-height: 38px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0 15px;
        color: #374151;
        background: #fff;
        font-weight: 650;
      }
      .blog-category-filter button.active {
        border-color: var(--primary);
        color: #fff;
        background: var(--primary);
      }
      .blog-post-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
      }
      .blog-post-card {
        display: flex;
        flex-direction: column;
        min-height: 270px;
        padding: 26px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
        box-shadow: var(--shadow-sm);
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
      }
      .blog-post-card:hover {
        border-color: rgba(229, 50, 45, 0.32);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }
      .blog-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        color: var(--muted);
        font-size: 0.86rem;
        font-weight: 650;
      }
      .blog-post-card h3 {
        margin: 16px 0 9px;
        font-size: 1.18rem;
        line-height: 1.25;
      }
      .blog-post-card p {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        color: var(--muted);
        line-height: 1.65;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .blog-post-card .text-link {
        margin-top: auto;
        padding-top: 22px;
      }
      .blog-bottom-tools {
        padding: 0 0 78px;
      }
      .blog-tool-card-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
      }

      .article-page-pro {
        width: var(--container);
        margin: 0 auto;
      }
      .article-hero-pro {
        max-width: 900px;
        margin: 0 auto;
        padding: 48px 0 34px;
        text-align: center;
      }
      .article-hero-pro .breadcrumbs {
        justify-content: center;
        margin-bottom: 22px;
      }
      .article-category-pill {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid rgba(229, 50, 45, 0.24);
        border-radius: 999px;
        color: var(--primary);
        background: var(--primary-soft);
        font-size: 0.82rem;
        font-weight: 800;
      }
      .article-hero-pro h1 {
        max-width: 880px;
        margin: 16px auto 18px;
        color: var(--text);
        font-size: clamp(2.35rem, 5vw, 4.45rem);
        font-weight: 800;
        line-height: 1.03;
      }
      .article-hero-pro p {
        max-width: 720px;
        margin: 0 auto;
        color: var(--muted);
        font-size: 1.14rem;
        line-height: 1.72;
      }
      .article-byline {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 22px;
        color: var(--muted);
        font-size: 0.92rem;
        font-weight: 650;
      }
      .article-byline span {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
      }
      .article-layout-pro {
        display: grid;
        grid-template-columns: minmax(0, 760px) 260px;
        gap: 34px;
        justify-content: center;
        align-items: start;
        padding-bottom: 78px;
      }
      .article-content-pro {
        max-width: 760px;
        padding: 42px;
      }
      .article-content-pro section {
        margin-bottom: 44px;
      }
      .article-content-pro h2 {
        margin: 0 0 14px;
        font-size: clamp(1.55rem, 2.7vw, 2.25rem);
        line-height: 1.15;
      }
      .article-content-pro h3 {
        margin: 26px 0 10px;
        font-size: 1.22rem;
        line-height: 1.25;
      }
      .article-content-pro p {
        margin: 0 0 18px;
        color: #374151;
        font-size: 1.04rem;
        line-height: 1.88;
      }
      .article-content-pro ul,
      .article-content-pro ol {
        margin: 14px 0 22px;
        padding-left: 24px;
        color: #374151;
        line-height: 1.8;
      }
      .article-content-pro li + li { margin-top: 8px; }
      .article-sidebar-pro {
        position: sticky;
        top: 94px;
      }
      .article-toc-card {
        margin: 0;
        box-shadow: var(--shadow-sm);
      }
      .article-toc-card a {
        display: block;
        padding: 4px 0;
        color: #4b5563;
      }
      .article-toc-card a:hover { color: var(--primary); }
      .mobile-article-toc {
        display: none;
        margin-bottom: 24px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fbfbfd;
      }
      .mobile-article-toc summary {
        cursor: pointer;
        padding: 15px 16px;
        color: var(--text);
        font-weight: 750;
      }
      .mobile-article-toc a {
        display: block;
        padding: 0 16px 12px;
        color: var(--primary);
        font-weight: 650;
        text-decoration: none;
      }
      .article-tool-cta {
        display: grid;
        gap: 18px;
        padding: 24px;
        border: 1px solid rgba(229, 50, 45, 0.22);
        border-radius: 18px;
        background: #fff7f6;
      }
      .article-tool-cta h2 {
        margin-bottom: 8px;
        font-size: clamp(1.35rem, 2.3vw, 1.85rem);
      }
      .article-tool-cta p {
        margin: 0;
        color: var(--muted);
      }
      .article-tool-cta > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .article-related-tools h2,
      .article-read-next h2,
      .article-faq h2 {
        margin-bottom: 18px;
      }
      .article-tool-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .article-tool-card {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        min-height: 76px;
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--text);
        background: #fff;
        text-decoration: none;
        box-shadow: var(--shadow-sm);
      }
      .article-tool-card:hover {
        border-color: rgba(229, 50, 45, 0.32);
        box-shadow: var(--shadow-md);
      }
      .article-tool-card > svg { color: var(--primary); }
      .article-tool-card span {
        display: grid;
        gap: 2px;
        min-width: 0;
      }
      .article-tool-card strong,
      .article-tool-card small {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .article-tool-card small {
        color: var(--muted);
        font-size: 0.82rem;
      }
      .article-faq details p {
        color: var(--muted);
        font-size: 0.98rem;
        line-height: 1.7;
      }
      .article-read-next-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .conversion-mockup, .tool-card, .tool-card-link, .trust-card,
      .step-grid article, .content-band, .post-card, .featured-post, .related-box,
      .toc, .contact-form, .legal-page, .progress-card, .download-card, .bottom-tool-panel,
      .try-tool-card {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-md);
      }
      .conversion-mockup {
        overflow: hidden;
        box-shadow: var(--shadow-lg);
        transform: translateZ(0);
      }
      .mockup-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--line);
        background: #fbfdff;
      }
      .mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
      .mockup-header strong { margin-left: 8px; font-size: 0.92rem; }
      .mockup-body { display: grid; gap: 18px; padding: 22px; }
      .mock-upload {
        display: grid;
        place-items: center;
        min-height: 178px;
        border: 2px dashed #ffd3cf;
        border-radius: 16px;
        color: var(--primary);
        background:
          linear-gradient(180deg, rgba(238, 242, 255, 0.62), rgba(255, 255, 255, 0.94)),
          #f8faff;
        text-align: center;
      }
      .mock-upload span { color: var(--muted); font-size: 0.9rem; }
      .mock-flow {
        display: grid;
        grid-template-columns: 1fr 28px 1fr;
        gap: 10px;
        align-items: center;
      }
      .mock-flow div {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: #374151;
        background: #fff;
        font-weight: 750;
      }
      .mock-progress { height: 8px; overflow: hidden; border-radius: 999px; background: #eef2ff; }
      .mock-progress span { display: block; width: 72%; height: 100%; background: var(--primary); }
      .mock-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--green);
        font-weight: 600;
      }
      .mock-actions button {
        border: 0;
        border-radius: 10px;
        padding: 10px 13px;
        color: #fff;
        background: var(--primary);
      }

      .section-heading { margin-bottom: 26px; }
      .section-heading.centered { max-width: 760px; margin-inline: auto; text-align: center; }
      .section-heading h2, .content-band h2, .long-content h2, .article-content h2, .legal-page h2 {
        margin: 8px 0 10px;
        font-size: clamp(1.65rem, 3.3vw, 2.65rem);
        font-weight: 700;
        line-height: 1.08;
        letter-spacing: 0;
      }
      .section-heading p, .tool-card-link p, .trust-card p, .step-grid p, .post-card p,
      .content-band p, .long-content p, .article-content p, .legal-page p {
        color: var(--muted);
        line-height: 1.78;
      }
      .tool-grid, .trust-grid, .step-grid, .post-grid, .faq-grid {
        display: grid;
        gap: 20px;
      }
      .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .latest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tool-card-link, .trust-card, .step-grid article, .post-card {
        padding: 28px;
        min-width: 0;
      }
      .tool-card-link {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 190px;
        border-radius: 18px;
        box-shadow: var(--shadow-sm);
        color: var(--text);
        text-decoration: none;
      }
      .tool-card-link:hover, .post-card:hover, .trust-card:hover {
        border-color: rgba(229, 50, 45, 0.35);
        box-shadow: 0 16px 34px rgba(31, 41, 55, 0.09);
        transform: translateY(-3px);
      }
      .tool-card-link, .post-card, .trust-card {
        transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
      }
      .tool-card-icon, .tool-hero-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 14px;
        color: var(--primary);
        background: var(--primary-soft);
      }
      .tool-hero-icon { width: 64px; height: 64px; border-radius: 18px; }
      .tool-card-icon.blue { color: #2563eb; background: #eff6ff; }
      .tool-card-icon.emerald { color: #059669; background: #ecfdf5; }
      .tool-card-icon.amber { color: var(--amber); background: #fffbeb; }
      .tool-card-icon.slate { color: #475569; background: #f1f5f9; }
      .tool-hero-icon.blue { color: #2563eb; background: #eff6ff; }
      .tool-hero-icon.emerald { color: #059669; background: #ecfdf5; }
      .tool-hero-icon.amber { color: var(--amber); background: #fffbeb; }
      .tool-card-link h3, .trust-card h3, .step-grid h3, .post-card h2, .post-card h3 {
        margin: 16px 0 8px;
        font-size: 1.12rem;
        font-weight: 700;
      }
      .tool-card-link .text-link {
        margin-top: auto;
        align-self: flex-end;
      }
      .tool-badge {
        position: absolute;
        top: 22px;
        right: 22px;
        padding: 6px 9px;
        border-radius: 999px;
        color: var(--primary);
        background: var(--primary-soft);
        font-size: 0.74rem;
        font-weight: 700;
      }
      .tool-grid-heading {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 18px;
        margin-bottom: 26px;
      }
      .tool-grid-heading h2 {
        margin: 8px 0 0;
        font-size: clamp(1.65rem, 3.3vw, 2.65rem);
        line-height: 1.08;
      }
      .category-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
      }
      .category-tabs button {
        min-height: 38px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0 14px;
        color: #374151;
        background: #fff;
        font-weight: 600;
      }
      .category-tabs button:first-child {
        border-color: rgba(229, 50, 45, 0.32);
        color: var(--primary);
        background: var(--primary-soft);
      }
      .coming-soon { background: #fbfdff; }
      .soon-label {
        display: inline-flex;
        width: max-content;
        margin-top: auto;
        padding: 7px 10px;
        border-radius: 999px;
        color: #475569;
        background: #f1f5f9;
        font-size: 0.86rem;
        font-weight: 650;
      }
      .trust-card svg, .step-grid article > span { color: var(--primary); }
      .step-grid article > span {
        display: inline-grid;
        place-items: center;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: var(--primary-soft);
        font-weight: 700;
      }
      .homepage-content {
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: center;
      }
      .audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
      .audience-grid span {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 54px;
        padding: 0 14px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        font-weight: 650;
      }

      .tool-hero-panel {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
        padding: 28px;
      }
      .tool-hero-centered {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        padding: 8px 0 0;
        border: 0;
        background: transparent;
        box-shadow: none;
      }
      .tool-hero-centered p,
      .tool-hero-centered h1 {
        margin-left: auto;
        margin-right: auto;
      }
      .tool-hero-centered .tool-meta-row,
      .tool-hero-centered .tool-trust-strip,
      .tool-hero-centered .quick-tools {
        justify-content: center;
      }
      .tool-trust-strip {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
      }
      .tool-trust-strip span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-height: 36px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: #374151;
        background: #fff;
        box-shadow: var(--shadow-sm);
        font-size: 0.9rem;
        font-weight: 700;
      }
      .tool-trust-strip svg { color: var(--primary); }
      .tool-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
      }
      .tool-card {
        max-width: 720px;
        margin: 0 auto;
        overflow: hidden;
        border-color: #dfe3eb;
        border-radius: 22px;
        box-shadow: 0 22px 56px rgba(31, 41, 55, 0.1);
      }
      .tool-dashboard-section { padding-top: 24px; }
      .tool-dashboard-layout {
        display: block;
        max-width: 720px;
        margin: 0 auto;
      }
      .tool-main-column { min-width: 0; }
      .tool-side-panel {
        position: sticky;
        top: 92px;
        display: grid;
        gap: 14px;
        min-width: 0;
      }
      .quick-tools {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 22px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        background: #fff;
        box-shadow: var(--shadow-sm);
      }
      .bottom-tool-panel {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 22px;
        align-items: center;
        padding: 24px;
        background: linear-gradient(180deg, #ffffff, #fbfdff);
      }
      .bottom-tool-panel h2 {
        margin: 7px 0 8px;
        font-size: clamp(1.55rem, 2.8vw, 2.2rem);
        font-weight: 700;
      }
      .bottom-tool-panel p {
        margin: 0;
        color: var(--muted);
        line-height: 1.65;
      }
      .bottom-tool-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .bottom-tool-card {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        min-height: 72px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 14px;
        color: var(--text);
        background: #fff;
        text-decoration: none;
        box-shadow: var(--shadow-sm);
        transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
      }
      .bottom-tool-card:hover {
        border-color: rgba(229, 50, 45, 0.32);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
      .bottom-tool-card > svg:first-child { color: var(--primary); }
      .bottom-tool-card span {
        display: grid;
        min-width: 0;
      }
      .bottom-tool-card strong,
      .bottom-tool-card small {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .bottom-tool-card strong { font-weight: 750; }
      .bottom-tool-card small {
        color: var(--muted);
        font-size: 0.82rem;
      }
      .bottom-tool-card.muted-current {
        opacity: 0.68;
        background: #f9fafb;
      }
      .quick-tools-label {
        flex: 0 0 auto;
        color: #374151;
        font-size: 0.88rem;
        font-weight: 650;
      }
      .quick-tools-list {
        display: flex;
        gap: 8px;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .quick-tools-list::-webkit-scrollbar { display: none; }
      .quick-tool-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: #374151;
        background: #fff;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
      }
      .quick-tool-pill:hover {
        border-color: rgba(229, 50, 45, 0.32);
        color: var(--primary);
        background: var(--primary-soft);
      }
      .quick-tool-pill.active {
        border-color: var(--primary);
        color: #fff;
        background: var(--primary);
        font-weight: 700;
      }
      .sticky-tool-switcher {
        display: grid;
        gap: 10px;
        margin-top: 0;
        padding: 12px;
        border-radius: 16px;
        box-shadow: var(--shadow-sm);
      }
      .sticky-tool-switcher .quick-tools-label {
        padding: 0 4px;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
      .sticky-tool-switcher .quick-tools-list {
        display: grid;
        gap: 8px;
        overflow: visible;
      }
      .sticky-tool-switcher .quick-tool-pill {
        justify-content: flex-start;
        width: 100%;
        border-radius: 12px;
      }
      .try-tool-card {
        display: grid;
        gap: 12px;
        padding: 18px;
        box-shadow: var(--shadow-sm);
      }
      .try-tool-card h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
      }
      .try-tool-list { display: grid; gap: 8px; }
      .try-tool-row {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        min-height: 58px;
        padding: 7px;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: var(--text);
        background: #fff;
        text-decoration: none;
        font-weight: 650;
        transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
      }
      .try-tool-row:hover {
        border-color: rgba(229, 50, 45, 0.32);
        background: #fffafa;
        transform: translateY(-1px);
      }
      .try-tool-row.active {
        border-color: rgba(229, 50, 45, 0.28);
        background: var(--primary-soft);
      }
      .try-tool-row span:nth-child(2) {
        display: grid;
        gap: 2px;
        min-width: 0;
      }
      .try-tool-row strong {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 0.92rem;
      }
      .try-tool-row small {
        overflow: hidden;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 500;
        line-height: 1.25;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .try-tool-row em {
        color: var(--primary);
        font-size: 0.75rem;
        font-weight: 700;
        font-style: normal;
      }
      .try-tool-icon {
        display: inline-grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        color: var(--primary);
        background: var(--primary-soft);
      }
      .tool-security-note {
        display: flex;
        align-items: center;
        gap: 10px;
        max-width: 760px;
        margin: 14px auto 0;
        padding: 12px 14px;
        border: 1px solid rgba(229, 50, 45, 0.22);
        border-radius: 14px;
        color: #8f1f19;
        background: #fff7f6;
        font-size: 0.93rem;
        font-weight: 500;
      }
      .tool-workspace {
        display: block;
      }
      .tool-workspace > div:first-child { padding: 36px; }
      .tool-workspace h2 { margin: 0 0 8px; }
      .tool-note, .privacy-note { color: var(--muted); line-height: 1.6; }
      .upload-box {
        display: grid;
        place-items: center;
        min-height: 330px;
        margin-top: 18px;
        padding: 44px;
        border: 2px dashed var(--line-strong);
        border-radius: 18px;
        color: var(--primary);
        background: #fff;
        text-align: center;
        transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
      }
      .upload-box:hover, .upload-box.drag-active {
        border-color: var(--primary);
        background: #fffafa;
        box-shadow: inset 0 0 0 1px rgba(229, 50, 45, 0.08);
      }
      .upload-box.disabled { opacity: 0.65; }
      .upload-box input {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
      }
      .upload-box h2 { margin: 14px 0 5px; overflow-wrap: anywhere; }
      .upload-box p { color: var(--muted); }
      .upload-primary { min-width: 142px; margin-top: 8px; }
      .drop-text {
        color: var(--muted);
        font-size: 0.92rem;
        font-weight: 600;
      }
      .upload-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin-top: 4px;
      }
      .upload-meta span {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid var(--line);
        border-radius: 999px;
        color: var(--muted);
        background: #fbfbfd;
        font-size: 0.82rem;
        font-weight: 650;
      }
      .upload-security-line {
        display: flex;
        align-items: center;
        gap: 9px;
        margin: 14px 0 0;
        padding: 12px 13px;
        border: 1px solid rgba(229, 50, 45, 0.22);
        border-radius: 14px;
        color: #8f1f19;
        background: #fff7f6;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.45;
      }
      .upload-security-line svg { flex: 0 0 auto; color: var(--primary); }
      .advanced-settings {
        margin-top: 18px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fbfbfd;
      }
      .advanced-settings summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 54px;
        padding: 0 16px;
        color: var(--text);
        cursor: pointer;
        font-weight: 750;
        list-style: none;
      }
      .advanced-settings summary::-webkit-details-marker { display: none; }
      .advanced-settings summary svg {
        color: var(--muted);
        transition: transform 0.16s ease;
      }
      .advanced-settings[open] summary svg { transform: rotate(180deg); }
      .settings-body {
        display: grid;
        gap: 13px;
        padding: 0 16px 16px;
      }
      .tool-action-stack {
        display: grid;
        gap: 12px;
        margin-top: 18px;
      }
      .tool-action-stack .primary-button {
        min-height: 54px;
        font-size: 1rem;
      }
      .subtle-reset-button {
        justify-self: center;
        min-height: 34px;
        border: 0;
        padding: 0 10px;
        color: var(--muted);
        background: transparent;
        font-size: 0.9rem;
        font-weight: 650;
      }
      .subtle-reset-button:hover { color: var(--primary); }
      .settings-panel {
        display: flex;
        flex-direction: column;
        gap: 13px;
        padding: 36px 24px;
        border-left: 1px solid var(--line);
        background: #fbfbfd;
      }
      .settings-panel h3 { margin: 0 0 6px; }
      label { color: #1f2937; font-size: 0.9rem; font-weight: 600; }
      input, select, textarea {
        width: 100%;
        border: 1px solid var(--line-strong);
        border-radius: 10px;
        padding: 12px 13px;
        color: var(--text);
        background: #fff;
      }
      .status-message {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin-top: 14px;
        padding: 13px;
        border-radius: 12px;
      }
      .status-message.error { color: var(--red); background: #fef2f2; border: 1px solid #fecaca; }
      .progress-card {
        display: grid;
        gap: 12px;
        place-items: center;
        min-height: 330px;
        margin-top: 18px;
        padding: 44px;
        text-align: center;
      }
      .progress-card strong { font-size: 1.12rem; }
      .progress-card small { color: var(--muted); font-weight: 600; }
      .spinner {
        width: 48px;
        height: 48px;
        border: 4px solid #e0e7ff;
        border-top-color: var(--primary);
        border-radius: 999px;
        animation: spin 0.9s linear infinite;
      }
      @keyframes spin { to { transform: rotate(360deg); } }
      .progress-track { width: 100%; height: 9px; overflow: hidden; border-radius: 999px; background: #fee2e2; }
      .progress-track div { height: 100%; background: var(--primary); transition: width 0.2s ease; }
      .skeleton-row {
        width: 80%;
        height: 14px;
        border-radius: 999px;
        background: #f3f4f6;
        animation: pulse 1.4s ease-in-out infinite;
      }
      .skeleton-row.short { width: 56%; }
      @keyframes pulse { 50% { opacity: 0.52; } }
      .success-banner, .download-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px;
        border: 1px solid #bbf7d0;
        border-radius: 14px;
        color: var(--green);
        background: #f0fdf4;
      }
      .preview-grid, .file-list { margin-top: 18px; }
      .image-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
      .image-result-card {
        overflow: hidden;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
      }
      .image-result-card img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: contain;
        background: #f3f4f6;
      }
      .image-result-card div { display: grid; gap: 4px; padding: 12px; }
      .image-result-card span, .file-row small, .download-card span, .article-meta, .post-card span, .article-card-meta {
        color: var(--muted);
        font-size: 0.9rem;
      }
      .image-result-card button { width: calc(100% - 24px); margin: 0 12px 12px; }
      .file-list { display: grid; gap: 9px; }
      .file-row {
        display: grid;
        grid-template-columns: 48px 28px 1fr auto 36px;
        align-items: center;
        gap: 10px;
        padding: 11px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
      }
      .file-row img { width: 46px; height: 46px; object-fit: cover; border: 1px solid var(--line); border-radius: 10px; }
      .file-row strong { overflow-wrap: anywhere; }
      .file-row button {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: #fff;
      }
      .download-card { justify-content: space-between; flex-wrap: wrap; margin-top: 18px; color: var(--text); }
      .download-card > div { display: grid; }
      .download-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-left: auto;
      }
      .next-actions {
        display: grid;
        gap: 12px;
        margin-top: 18px;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fbfbfd;
      }
      .next-actions > strong {
        color: var(--text);
        font-size: 0.98rem;
        font-weight: 700;
      }
      .next-actions > div {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .next-action-card {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        color: #374151;
        background: #fff;
        font-size: 0.9rem;
        font-weight: 650;
        text-decoration: none;
        transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
      }
      .next-action-card:hover {
        border-color: rgba(229, 50, 45, 0.32);
        color: var(--primary);
        background: var(--primary-soft);
      }
      .below-converter-tools {
        display: grid;
        gap: 16px;
        max-width: 720px;
        margin: 22px auto 0;
      }
      .below-converter-tools .quick-tools {
        justify-content: center;
        margin-top: 0;
      }
      .below-converter-tools .try-tool-card {
        box-shadow: var(--shadow-sm);
      }

      .compact-trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .tool-content-cards {
        display: grid;
        gap: 24px;
      }
      .content-panel {
        display: grid;
        gap: 18px;
      }
      .content-panel h2 { margin-bottom: 2px; }
      .use-case-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }
      .use-case-grid article {
        display: grid;
        align-content: start;
        gap: 10px;
        min-height: 150px;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fbfbfd;
      }
      .use-case-grid svg { color: var(--primary); }
      .use-case-grid p { margin: 0; }
      .tip-list {
        display: grid;
        gap: 10px;
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .tip-list li {
        position: relative;
        padding: 13px 14px 13px 38px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fbfbfd;
        color: var(--text);
        line-height: 1.55;
      }
      .tip-list li::before {
        content: "";
        position: absolute;
        left: 16px;
        top: 21px;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--primary);
      }
      .mini-guide-block {
        padding-top: 16px;
        border-top: 1px solid var(--line);
      }
      .mini-guide-block h3 {
        margin: 0 0 8px;
        font-size: 1.08rem;
      }
      .accordion-faq details {
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        box-shadow: var(--shadow-sm);
      }
      .accordion-faq details + details { margin-top: 10px; }
      .accordion-faq summary {
        cursor: pointer;
        padding: 16px 18px;
        color: var(--text);
        font-weight: 700;
      }
      .accordion-faq details p {
        margin: 0;
        padding: 0 18px 18px;
      }

      .content-layout, .blog-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 30px;
        align-items: start;
      }
      .long-content, .article-content {
        max-width: 820px;
        padding: 34px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: #fff;
        box-shadow: var(--shadow-sm);
      }
      .long-content section, .article-content section { margin-bottom: 30px; }
      .article-kicker {
        margin-bottom: 18px;
        color: var(--primary);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .faq-section article, .faq-grid article {
        padding: 18px 0;
        border-bottom: 1px solid var(--line);
      }
      .faq-grid article {
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
        box-shadow: var(--shadow-sm);
      }
      .faq-section h3, .faq-grid h3 { margin: 0 0 7px; }
      .desktop-sidebar {
        position: sticky;
        top: 94px;
        display: grid;
        gap: 18px;
      }
      .related-box {
        display: grid;
        gap: 11px;
        padding: 20px;
      }
      .related-box h3 { margin: 0; }
      .related-box a { color: var(--primary); font-weight: 560; text-decoration: none; }
      .content-band {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 28px;
        padding: 34px;
      }
      .breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        margin-bottom: 22px;
        color: var(--muted);
        font-size: 0.92rem;
      }
      .breadcrumbs a { color: var(--primary); font-weight: 560; text-decoration: none; }
      .page-heading { margin-bottom: 30px; }

      .blog-page, .article-page { padding-top: 38px; }
      .featured-post {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 24px;
        align-items: center;
        padding: 34px;
        margin-bottom: 22px;
      }
      .featured-post h2 { margin: 8px 0 10px; font-size: clamp(1.75rem, 3.2vw, 2.65rem); }
      .article-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 18px 0;
      }
      .featured-visual {
        display: grid;
        place-items: center;
        min-height: 220px;
        border: 1px solid var(--line);
        border-radius: 16px;
        color: var(--primary);
        background: #fff7f6;
        text-align: center;
        font-weight: 700;
      }
      .category-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 22px 0 28px;
      }
      .category-filter button {
        min-height: 40px;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0 14px;
        color: #374151;
        background: #fff;
        font-weight: 600;
      }
      .category-filter button:first-child { color: var(--primary); background: var(--primary-soft); border-color: rgba(229, 50, 45, 0.32); }
      .post-card {
        display: grid;
        align-content: start;
        min-height: 260px;
        box-shadow: var(--shadow-sm);
      }
      .toc {
        display: grid;
        gap: 9px;
        padding: 20px;
        margin: 26px 0;
        box-shadow: none;
      }
      .toc h2 { margin: 0 0 4px; font-size: 1.15rem; }
      .toc a { color: var(--primary); font-weight: 560; text-decoration: none; }
      .author-box {
        display: flex;
        gap: 14px;
        align-items: center;
        padding: 16px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fbfdff;
      }
      .author-avatar {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        color: #fff;
        background: var(--primary);
        font-weight: 700;
      }
      .top-author-box p { margin: 3px 0 0; font-size: 0.93rem; }
      .related-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
      .related-article-card {
        display: grid;
        align-content: start;
        min-height: 120px;
        padding: 15px;
        border: 1px solid var(--line);
        border-radius: 14px;
        background: #fff;
        text-decoration: none;
      }
      .related-article-card span { color: var(--muted); margin-top: 8px; }

      .static-page {
        width: var(--container);
        margin: 0 auto;
        padding-bottom: 78px;
      }
      .static-hero {
        max-width: 760px;
        margin: 0 auto;
        padding: 54px 0 26px;
        text-align: center;
      }
      .static-hero .breadcrumbs {
        justify-content: center;
        margin-bottom: 22px;
      }
      .static-hero h1 {
        margin: 0 0 16px;
        color: var(--text);
        font-size: clamp(2.45rem, 5vw, 4.35rem);
        font-weight: 800;
        line-height: 1.02;
        letter-spacing: 0;
      }
      .static-hero p {
        max-width: 680px;
        margin: 0 auto;
        color: var(--muted);
        font-size: 1.12rem;
        line-height: 1.72;
      }
      .static-content-card {
        max-width: 760px;
        margin: 0 auto;
        padding: 42px;
        border: 1px solid var(--line);
        border-radius: 22px;
        background: #fff;
        box-shadow: var(--shadow-md);
      }
      .static-content-card section {
        padding-top: 30px;
        margin-top: 30px;
        border-top: 1px solid var(--line);
      }
      .static-content-card section:first-child {
        padding-top: 0;
        margin-top: 0;
        border-top: 0;
      }
      .static-content-card h2 {
        margin: 0 0 12px;
        color: var(--text);
        font-size: clamp(1.38rem, 2.5vw, 1.95rem);
        font-weight: 750;
        line-height: 1.18;
      }
      .static-content-card h3 {
        margin: 22px 0 8px;
        color: var(--text);
        font-size: 1.08rem;
        line-height: 1.28;
      }
      .static-content-card p {
        margin: 0 0 16px;
        color: #374151;
        font-size: 1rem;
        line-height: 1.85;
      }
      .static-content-card p:last-child {
        margin-bottom: 0;
      }
      .static-content-card a {
        color: var(--primary);
        font-weight: 650;
      }
      .policy-date {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        margin-bottom: 8px !important;
        padding: 0 12px;
        border: 1px solid rgba(229, 50, 45, 0.18);
        border-radius: 999px;
        color: var(--primary) !important;
        background: var(--primary-soft);
        font-size: 0.9rem !important;
        font-weight: 700;
        line-height: 1.2 !important;
      }
      .static-list {
        display: grid;
        gap: 10px;
        margin: 12px 0 0;
        padding-left: 22px;
        color: #374151;
        line-height: 1.75;
      }
      .static-list li::marker {
        color: var(--primary);
      }
      .static-note {
        padding: 14px 16px;
        border: 1px solid rgba(229, 50, 45, 0.18);
        border-radius: 14px;
        color: #7f1d1d !important;
        background: var(--primary-soft);
        font-weight: 650;
      }
      .static-contact-form {
        margin-top: 18px;
        padding: 26px;
        border-radius: 18px;
        background: #fbfbfd;
      }
      .static-contact-form label {
        color: var(--text);
        font-size: 0.92rem;
        font-weight: 700;
      }
      .static-contact-form input,
      .static-contact-form select,
      .static-contact-form textarea {
        min-height: 46px;
        border-radius: 12px;
        background: #fff;
      }
      .static-contact-form textarea {
        min-height: 150px;
        resize: vertical;
      }
      .static-contact-form .primary-button {
        width: max-content;
        min-height: 48px;
        margin-top: 6px;
      }

      .article-page-pro { padding-top: 0; }
      .article-content.article-content-pro {
        max-width: 760px;
        padding: 42px;
      }
      .article-content.article-content-pro section { margin-bottom: 44px; }
      .article-content.article-content-pro h2 {
        margin: 0 0 14px;
        font-size: clamp(1.55rem, 2.7vw, 2.25rem);
        line-height: 1.15;
      }
      .article-content.article-content-pro p {
        margin: 0 0 18px;
        color: #374151;
        font-size: 1.04rem;
        line-height: 1.88;
      }
      .article-content.article-content-pro .article-faq details p {
        font-size: 0.98rem;
        line-height: 1.7;
        color: var(--muted);
      }

      .legal-page {
        max-width: 860px;
        padding: 34px;
        margin-top: 38px;
      }
      .contact-form {
        display: grid;
        gap: 13px;
        padding: 22px;
        margin: 24px 0;
        box-shadow: none;
      }
      .site-footer {
        margin-top: 54px;
        padding: 46px 24px 30px;
        border-top: 1px solid var(--line);
        background: #fff;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.45fr 0.85fr 1.15fr 0.75fr 0.8fr;
        gap: 28px;
        width: min(1180px, 100%);
        margin: 0 auto;
      }
      .footer-grid h2 { margin: 0 0 12px; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em; }
      .footer-grid p { color: var(--muted); line-height: 1.7; }
      .footer-grid a {
        display: block;
        margin: 8px 0;
        color: var(--muted);
        font-weight: 500;
        text-decoration: none;
      }
      .footer-grid a:hover { color: var(--primary); }
      .footer-bottom {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        width: min(1180px, 100%);
        margin: 26px auto 0;
        padding-top: 18px;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 0.9rem;
      }

      @media (max-width: 1100px) {
        .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .blog-post-grid, .blog-tool-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      }
      @media (max-width: 920px) {
        .hero-grid, .hero-grid-premium, .tool-workspace, .tool-dashboard-layout, .content-layout, .blog-layout,
        .content-band, .homepage-content, .featured-post, .bottom-tool-panel,
        .blog-featured-card, .blog-tool-cta {
          grid-template-columns: 1fr;
        }
        .trust-grid, .post-grid, .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .home-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .tools-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .blog-tool-buttons { justify-content: flex-start; }
        .settings-panel { border-top: 1px solid var(--line); border-left: 0; }
        .tool-side-panel { position: static; }
        .tool-side-panel .sticky-tool-switcher { display: none; }
        .desktop-sidebar { display: none; }
        .article-layout-pro { grid-template-columns: 1fr; }
        .article-sidebar-pro { display: none; }
        .mobile-article-toc { display: block; }
        .compact-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .use-case-grid { grid-template-columns: 1fr; }
        .featured-visual { min-height: 160px; }
      }
      @media (max-width: 720px) {
        :root { --container: min(100% - 24px, 1180px); }
        .site-header { height: 66px; padding: 0 14px; }
        .desktop-nav { display: none; }
        .mobile-toggle { display: inline-flex; }
        .mobile-nav {
          display: grid;
          gap: 4px;
          padding: 12px 14px;
          border-bottom: 1px solid var(--line);
          background: #fff;
        }
        .mobile-nav a { padding: 12px; border-radius: 12px; text-decoration: none; }
        .home-hero { padding: 48px 0 24px; }
        .home-page .home-hero { padding: 44px 0 18px; }
        .section { padding: 40px 0; }
        .tool-page-hero { padding-top: 34px; }
        .home-hero h1, .page-heading h1, .article-content h1, .legal-page h1, .tool-page-hero h1 {
          font-size: 2.45rem;
          line-height: 1.02;
        }
        .conversion-mockup { box-shadow: var(--shadow-md); }
        .mock-flow { grid-template-columns: 1fr; }
        .mock-flow > svg { display: none; }
        .tool-grid, .trust-grid, .step-grid, .post-grid, .latest-grid, .faq-grid,
        .image-results, .related-article-grid, .audience-grid, .bottom-tool-grid,
        .compact-trust-grid, .home-trust-grid, .tools-grid, .tools-benefit-grid,
        .blog-post-grid, .blog-tool-card-grid {
          grid-template-columns: 1fr;
        }
        .blog-hero {
          padding: 42px 0 26px;
        }
        .blog-hero h1 {
          font-size: 2.55rem;
        }
        .blog-featured-card {
          padding: 22px;
        }
        .blog-featured-visual {
          min-height: 190px;
        }
        .blog-tool-cta {
          margin: 28px 0;
          padding: 22px;
        }
        .blog-tool-buttons {
          display: grid;
        }
        .blog-section-header {
          align-items: stretch;
          flex-direction: column;
        }
        .blog-category-filter {
          margin-right: -12px;
        }
        .blog-posts-section {
          padding-bottom: 46px;
        }
        .blog-bottom-tools {
          padding-bottom: 48px;
        }
        .static-page {
          padding-bottom: 48px;
        }
        .static-hero {
          padding: 42px 0 22px;
        }
        .static-hero h1 {
          font-size: 2.45rem;
        }
        .static-content-card {
          padding: 24px;
          border-radius: 18px;
        }
        .static-contact-form {
          padding: 20px;
        }
        .static-contact-form .primary-button {
          width: 100%;
        }
        .article-hero-pro {
          padding: 42px 0 24px;
        }
        .article-hero-pro h1 {
          font-size: 2.45rem;
        }
        .article-layout-pro {
          padding-bottom: 48px;
        }
        .article-content.article-content-pro {
          padding: 24px;
        }
        .article-tool-card-grid,
        .article-read-next-grid {
          grid-template-columns: 1fr;
        }
        .article-tool-cta > div:last-child {
          display: grid;
        }
        .article-tool-cta .secondary-button {
          width: 100%;
        }
        .tools-hero {
          padding: 48px 0 26px;
        }
        .tools-hero h1 {
          font-size: 2.55rem;
        }
        .tools-directory {
          padding: 12px 0 44px;
        }
        .tools-filter-row {
          justify-content: flex-start;
          margin-bottom: 24px;
          padding-left: 2px;
          padding-right: 2px;
        }
        .tools-card {
          min-height: 230px;
          padding: 26px;
        }
        .tools-benefit-section {
          padding-bottom: 48px;
        }
        .home-page .home-hero h1 {
          font-size: 2.65rem;
        }
        .popular-tool-highlight {
          align-items: stretch;
          flex-direction: column;
          padding: 20px;
        }
        .popular-tool-highlight .primary-button {
          width: 100%;
        }
        .tool-card-link { min-height: 190px; padding: 22px; }
        .tool-hero-panel { grid-template-columns: 1fr; padding: 22px; }
        .quick-tools {
          display: block;
          margin-left: -2px;
          margin-right: -2px;
          padding: 10px;
          border-radius: 16px;
        }
        .quick-tools-label {
          display: block;
          margin: 0 2px 8px;
        }
        .quick-tools-list {
          padding-bottom: 2px;
        }
        .quick-tool-pill {
          min-height: 40px;
          padding: 0 13px;
        }
        .tool-workspace > div:first-child, .settings-panel, .long-content, .article-content, .legal-page {
          padding: 22px;
        }
        .upload-box { min-height: 270px; padding: 28px; }
        .progress-card { padding: 28px; }
        .next-actions > div { display: grid; }
        .next-action-card { width: 100%; }
        .download-actions { width: 100%; margin-left: 0; }
        .download-actions .primary-button,
        .download-actions .secondary-button { width: 100%; }
        .file-row { grid-template-columns: 42px 1fr 34px; }
        .file-row span, .file-row small { display: none; }
        .download-card, .footer-bottom, .mock-actions { align-items: stretch; flex-direction: column; }
        .download-card .primary-button { width: 100%; }
        .footer-grid { grid-template-columns: 1fr; }
      }