/* =====================================================================
   DailyFeedNow — main stylesheet
   ---------------------------------------------------------------------
   One design system for the whole site. Every page shares the same
   tokens (colour, type, spacing, radius), so a change here changes it
   everywhere. Homepage-only layout lives in front-page.css.

   Contents
    1. Tokens
    2. Reset & base
    3. Utilities & accessibility
    4. Buttons, eyebrow, breadcrumbs
    5. Header, search, topic bar
    6. Page heroes (shared)
    7. Story cards & grids (blog, category, archive)
    8. Pagination
    9. Single article
   10. Article body typography (Gutenberg content)
   11. Table of contents, share, author box
   12. Related stories
   13. Newsletter (single + shared states)
   14. Search page
   15. 404
   16. Tools directory
   17. Calculators & word counter
   18. Tool long-form content
   19. About
   20. Contact
   21. Policy / legal
   22. Advertise
   23. Footer
   24. Motion & print
   ===================================================================== */


/* =====================================================================
   1. TOKENS
   ===================================================================== */

:root {
    /* Colour */
    --dfn-ink: #0b1220;
    --dfn-text: #1f2633;
    --dfn-muted: #5b6474;
    --dfn-subtle: #8a93a3;
    --dfn-line: #e6e8ec;
    --dfn-line-strong: #d4d8df;
    --dfn-surface: #ffffff;
    --dfn-soft: #f6f7f9;
    --dfn-softer: #fafbfc;

    --dfn-brand: #e11d2e;
    --dfn-brand-ink: #b8131f;
    --dfn-brand-soft: #fdeef0;

    --dfn-success: #067647;
    --dfn-success-soft: #ecfdf3;
    --dfn-error: #b42318;
    --dfn-error-soft: #fef3f2;
    --dfn-highlight: #fff3b0;

    /* Type */
    --dfn-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --dfn-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --dfn-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Shape */
    --dfn-radius-sm: 8px;
    --dfn-radius: 12px;
    --dfn-radius-lg: 18px;
    --dfn-pill: 999px;

    --dfn-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --dfn-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
    --dfn-shadow-lg: 0 18px 40px -18px rgba(16, 24, 40, 0.25);

    /* Layout */
    --dfn-container: 1200px;
    --dfn-gutter: 20px;
    --dfn-reading: 720px;

    --dfn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* =====================================================================
   2. RESET & BASE
   ===================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 130px;
}

body {
    margin: 0;
    font-family: var(--dfn-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--dfn-text);
    background: var(--dfn-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em;
    color: var(--dfn-ink);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
    border-style: none;
}

figure {
    margin: 0;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

hr {
    height: 1px;
    margin: 32px 0;
    border: 0;
    background: var(--dfn-line);
}

::selection {
    background: var(--dfn-brand-soft);
    color: var(--dfn-ink);
}

.container {
    width: min(var(--dfn-container), calc(100% - (var(--dfn-gutter) * 2)));
    margin-inline: auto;
}


/* =====================================================================
   3. UTILITIES & ACCESSIBILITY
   ===================================================================== */

[hidden] {
    display: none !important;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 100000;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 18px;
    clip: auto;
    color: #fff;
    background: var(--dfn-ink);
    border-radius: var(--dfn-radius-sm);
    font-weight: 600;
    white-space: normal;
}

:focus-visible {
    outline: 2px solid var(--dfn-brand);
    outline-offset: 3px;
    border-radius: 4px;
}

.dfn-honeypot,
.contact-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

mark,
.search-highlight {
    padding: 0 2px;
    color: inherit;
    background: var(--dfn-highlight);
    border-radius: 3px;
}


/* =====================================================================
   4. BUTTONS, EYEBROW, BREADCRUMBS
   ===================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--dfn-pill);
    transition: background-color 0.2s var(--dfn-ease), border-color 0.2s var(--dfn-ease), color 0.2s var(--dfn-ease), transform 0.2s var(--dfn-ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    color: #fff;
    background: var(--dfn-brand);
}

.btn-primary:hover {
    background: var(--dfn-brand-ink);
}

.btn-secondary {
    color: var(--dfn-ink);
    background: var(--dfn-surface);
    border-color: var(--dfn-line-strong);
}

.btn-secondary:hover {
    border-color: var(--dfn-ink);
}

.eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--dfn-brand-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dfn-breadcrumbs {
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--dfn-muted);
}

.dfn-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dfn-breadcrumbs li {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.dfn-breadcrumbs li + li::before {
    content: "";
    width: 6px;
    height: 6px;
    margin: 0 10px;
    border-top: 1.5px solid var(--dfn-subtle);
    border-right: 1.5px solid var(--dfn-subtle);
    transform: rotate(45deg);
}

.dfn-breadcrumbs a {
    color: var(--dfn-muted);
    transition: color 0.2s;
}

.dfn-breadcrumbs a:hover {
    color: var(--dfn-brand-ink);
}

.dfn-breadcrumbs [aria-current="page"] {
    max-width: 46ch;
    overflow: hidden;
    color: var(--dfn-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =====================================================================
   5. HEADER, SEARCH, TOPIC BAR
   ===================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--dfn-line);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
}

.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

@media (max-width: 600px) {
    .admin-bar .site-header {
        top: 0;
    }
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 68px;
}

.site-branding {
    flex-shrink: 0;
}

.site-logo {
    display: inline-flex;
    align-items: baseline;
    color: var(--dfn-ink);
    font-family: var(--dfn-serif);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.site-logo span {
    color: var(--dfn-brand);
}

.header-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Search uses <details>, so it works with no JavaScript at all */
.header-search {
    position: relative;
}

.header-search > summary {
    list-style: none;
}

.header-search > summary::-webkit-details-marker {
    display: none;
}

.search-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    color: var(--dfn-text);
    font-size: 14px;
    font-weight: 500;
    background: var(--dfn-soft);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-pill);
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.search-button:hover,
.header-search[open] .search-button {
    background: var(--dfn-surface);
    border-color: var(--dfn-line-strong);
}

.header-search-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(440px, calc(100vw - 32px));
    padding: 14px;
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius);
    box-shadow: var(--dfn-shadow-lg);
    animation: dfn-pop 0.18s var(--dfn-ease);
}

@keyframes dfn-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.header-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 14px;
    background: var(--dfn-soft);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-pill);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.header-search-form:focus-within {
    background: var(--dfn-surface);
    border-color: var(--dfn-brand);
    box-shadow: 0 0 0 4px var(--dfn-brand-soft);
}

.header-search-form input {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0;
    font-size: 15px;
    background: transparent;
    border: 0;
    outline: 0;
}

.header-search-form button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--dfn-brand);
    border: 0;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.header-search-form button:hover {
    background: var(--dfn-brand-ink);
}

.header-search-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.header-search-popular-label {
    margin-right: 4px;
    color: var(--dfn-subtle);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.header-search-popular a {
    padding: 5px 12px;
    color: var(--dfn-text);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-pill);
    transition: border-color 0.2s, color 0.2s;
}

.header-search-popular a:hover {
    color: var(--dfn-brand-ink);
    border-color: var(--dfn-brand);
}

/* Topic bar (primary menu) */
.site-topics {
    border-top: 1px solid var(--dfn-line);
}

.site-topics-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 48px;
}

.site-topics-list {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    mask-image: linear-gradient(90deg, #000 92%, transparent);
}

.site-topics-list::-webkit-scrollbar {
    display: none;
}

.site-topics-list li {
    flex-shrink: 0;
}

.site-topics-list a {
    position: relative;
    display: block;
    padding: 13px 12px;
    color: var(--dfn-muted);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.2s;
}

.site-topics-list a::after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: 0;
    left: 12px;
    height: 2px;
    background: var(--dfn-brand);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transition: transform 0.2s var(--dfn-ease);
}

.site-topics-list a:hover,
.site-topics-list .current-menu-item > a,
.site-topics-list .current-menu-parent > a,
.site-topics-list .current-post-ancestor > a {
    color: var(--dfn-ink);
}

.site-topics-list .current-menu-item > a::after,
.site-topics-list .current-menu-parent > a::after,
.site-topics-list .current-post-ancestor > a::after,
.site-topics-list a:hover::after {
    transform: scaleX(1);
}

.site-topics-list li:first-child a {
    padding-left: 0;
}

.site-topics-list li:first-child a::after {
    left: 0;
}

.site-topics-tools {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    padding: 6px 14px;
    color: var(--dfn-brand-ink);
    font-size: 13px;
    font-weight: 600;
    background: var(--dfn-brand-soft);
    border-radius: var(--dfn-pill);
    transition: background-color 0.2s, color 0.2s;
}

.site-topics-tools:hover {
    color: #fff;
    background: var(--dfn-brand);
}

@media (max-width: 640px) {

    .header-inner {
        min-height: 60px;
    }

    .site-logo {
        font-size: 24px;
    }

    .search-button {
        width: 40px;
        padding: 0;
        justify-content: center;
    }

    .search-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .header-search-panel {
        position: fixed;
        top: 70px;
        right: 16px;
        left: 16px;
        width: auto;
    }

    .site-topics-tools {
        display: none;
    }
}

/* Reading progress bar (added by main.js on single posts) */
.dfn-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    width: 100%;
    height: 3px;
    background: var(--dfn-brand);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

.admin-bar .dfn-progress {
    top: 32px;
}


/* =====================================================================
   6. PAGE HEROES (shared)
   ===================================================================== */

.blog-hero,
.category-hero,
.archive-hero,
.search-hero,
.tool-page-hero,
.about-hero,
.contact-hero,
.policy-hero,
.advertise-hero {
    padding: 48px 0 44px;
    background:
        radial-gradient(1200px 300px at 0% 0%, rgba(225, 29, 46, 0.05), transparent 60%),
        var(--dfn-softer);
    border-bottom: 1px solid var(--dfn-line);
}

.blog-hero h1,
.category-hero h1,
.archive-hero h1,
.search-hero h1,
.tool-page-hero h1,
.about-hero h1,
.contact-hero h1,
.policy-hero h1,
.advertise-hero h1 {
    max-width: 22ch;
    margin: 0 0 14px;
    font-family: var(--dfn-serif);
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.blog-hero p,
.category-hero p,
.category-description,
.archive-hero p,
.archive-description,
.tool-page-hero p,
.about-hero p,
.contact-hero p,
.policy-intro,
.advertise-hero p,
.search-summary {
    max-width: 62ch;
    margin: 0;
    color: var(--dfn-muted);
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.6;
}

.category-description p,
.archive-description p {
    margin: 0;
}

.advertise-hero .btn {
    margin-top: 26px;
}

.policy-container {
    max-width: 800px;
}

.about-hero-inner,
.contact-hero-inner,
.advertise-hero-inner {
    max-width: 900px;
}


/* =====================================================================
   7. STORY CARDS & GRIDS (blog, category, archive)
   ===================================================================== */

.blog-posts,
.category-posts,
.archive-posts {
    padding: 48px 0 72px;
}

.blog-grid,
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 28px;
}

.blog-card,
.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.blog-card > a:first-child,
.category-card > a:first-child {
    display: block;
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--dfn-soft);
    border-radius: var(--dfn-radius);
    aspect-ratio: 16 / 10;
}

.blog-card-image,
.category-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--dfn-ease);
}

.blog-card:hover .blog-card-image,
.category-card:hover .category-card-image {
    transform: scale(1.035);
}

.blog-placeholder,
.category-placeholder,
.dfn-related-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--dfn-subtle);
    font-family: var(--dfn-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    background:
        linear-gradient(135deg, rgba(225, 29, 46, 0.08), transparent 55%),
        var(--dfn-soft);
}

.story-category {
    margin-bottom: 8px;
    color: var(--dfn-brand-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-card h2,
.category-card h2 {
    margin: 0 0 10px;
    font-family: var(--dfn-serif);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.015em;
}

.blog-card h2 a,
.category-card h2 a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.3s var(--dfn-ease);
}

.blog-card:hover h2 a,
.category-card:hover h2 a {
    background-size: 100% 1px;
}

.blog-excerpt,
.category-excerpt {
    margin: 0 0 14px;
    color: var(--dfn-muted);
    font-size: 15px;
    line-height: 1.6;
}

.blog-meta,
.category-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--dfn-subtle);
    font-size: 13px;
}

@media (max-width: 1000px) {
    .blog-grid,
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .blog-grid,
    .category-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .blog-card h2,
    .category-card h2 {
        font-size: 22px;
    }
}


/* =====================================================================
   8. PAGINATION (the_posts_pagination output)
   ===================================================================== */

.blog-pagination,
.category-pagination,
.search-pagination {
    margin-top: 56px;
}

.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.page-numbers {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    color: var(--dfn-text);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-pill);
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

a.page-numbers:hover {
    color: var(--dfn-brand-ink);
    border-color: var(--dfn-brand);
}

.page-numbers.current {
    color: #fff;
    background: var(--dfn-ink);
    border-color: var(--dfn-ink);
}

.page-numbers.dots {
    border-color: transparent;
}

.navigation.pagination .screen-reader-text {
    position: absolute;
}


/* =====================================================================
   9. SINGLE ARTICLE
   ===================================================================== */

.dfn-single {
    padding: 36px 0 0;
}

.dfn-article {
    max-width: 880px;
    margin: 0 auto;
}

.dfn-article-header {
    max-width: var(--dfn-reading);
    margin: 0 auto 32px;
}

.dfn-article-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.dfn-article-category {
    padding: 5px 12px;
    color: var(--dfn-brand-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--dfn-brand-soft);
    border-radius: var(--dfn-pill);
    transition: background-color 0.2s, color 0.2s;
}

.dfn-article-category:hover {
    color: #fff;
    background: var(--dfn-brand);
}

.dfn-article-label {
    color: var(--dfn-subtle);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dfn-article-title {
    margin: 0 0 18px;
    font-family: var(--dfn-serif);
    font-size: clamp(34px, 5.2vw, 52px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.dfn-article-dek {
    margin: 0 0 26px;
    color: var(--dfn-muted);
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.55;
    text-wrap: pretty;
}

.dfn-article-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--dfn-line);
}

.dfn-article-avatar {
    flex-shrink: 0;
}

.dfn-article-avatar img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--dfn-line);
}

.dfn-article-byline-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dfn-article-author {
    color: var(--dfn-muted);
    font-size: 15px;
}

.dfn-article-author a {
    color: var(--dfn-ink);
    font-weight: 600;
}

.dfn-article-author a:hover {
    color: var(--dfn-brand-ink);
}

.dfn-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    color: var(--dfn-subtle);
    font-size: 14px;
}

.dfn-article-thumb {
    margin: 0 0 40px;
}

.dfn-article-thumb img {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--dfn-radius-lg);
    background: var(--dfn-soft);
}

.dfn-article-caption {
    max-width: var(--dfn-reading);
    margin: 10px auto 0;
    color: var(--dfn-subtle);
    font-size: 13px;
    line-height: 1.5;
}

.dfn-article-footer {
    display: flex;
    flex-direction: column;
    gap: 22px;
    max-width: var(--dfn-reading);
    margin: 48px auto 0;
    padding-top: 28px;
    border-top: 1px solid var(--dfn-line);
}

.dfn-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dfn-article-tag {
    padding: 6px 14px;
    color: var(--dfn-text);
    font-size: 13px;
    font-weight: 500;
    background: var(--dfn-soft);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-pill);
    transition: border-color 0.2s, color 0.2s;
}

.dfn-article-tag::before {
    content: "#";
    margin-right: 2px;
    color: var(--dfn-subtle);
}

.dfn-article-tag:hover {
    color: var(--dfn-brand-ink);
    border-color: var(--dfn-brand);
}

.dfn-article-email {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    color: var(--dfn-brand-ink);
    font-weight: 600;
}

.dfn-article-email span {
    transition: transform 0.2s var(--dfn-ease);
}

.dfn-article-email:hover span {
    transform: translateX(4px);
}

.dfn-page-links {
    display: flex;
    gap: 8px;
    margin: 32px 0;
    font-weight: 600;
}


/* =====================================================================
   10. ARTICLE BODY TYPOGRAPHY (Gutenberg content)
   ---------------------------------------------------------------------
   Also applied to the long-form content on tool, about and policy
   pages so every page reads the same way.
   ===================================================================== */

.dfn-article-body {
    max-width: var(--dfn-reading);
    margin: 0 auto;
    color: var(--dfn-text);
    font-size: 18px;
    line-height: 1.75;
    overflow-wrap: break-word;
}

.dfn-article-body > * {
    margin-top: 0;
    margin-bottom: 1.4em;
}

.dfn-article-body h2,
.dfn-article-body h3,
.dfn-article-body h4 {
    scroll-margin-top: 130px;
    text-wrap: balance;
}

.dfn-article-body h2 {
    margin-top: 2em;
    margin-bottom: 0.6em;
    font-size: clamp(25px, 3vw, 30px);
    line-height: 1.25;
}

.dfn-article-body h3 {
    margin-top: 1.7em;
    margin-bottom: 0.5em;
    font-size: clamp(20px, 2.4vw, 23px);
    line-height: 1.3;
}

.dfn-article-body h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 19px;
}

.dfn-article-body a,
.tool-content-inner a,
.about-content-inner a,
.policy-content a,
.advertise-content a,
.tool-related-guide a {
    color: var(--dfn-brand-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(184, 19, 31, 0.35);
    transition: text-decoration-color 0.2s;
}

.dfn-article-body a:hover,
.tool-content-inner a:hover,
.about-content-inner a:hover,
.policy-content a:hover,
.advertise-content a:hover,
.tool-related-guide a:hover {
    text-decoration-color: currentColor;
}

.dfn-article-body strong {
    color: var(--dfn-ink);
    font-weight: 650;
}

.dfn-article-body ul,
.dfn-article-body ol {
    padding-left: 1.4em;
}

.dfn-article-body li {
    margin-bottom: 0.5em;
    padding-left: 0.2em;
}

.dfn-article-body li::marker {
    color: var(--dfn-brand);
}

.dfn-article-body ol li::marker {
    font-weight: 600;
}

.dfn-article-body blockquote,
.dfn-article-body .wp-block-quote {
    margin-left: 0;
    margin-right: 0;
    padding: 4px 0 4px 24px;
    color: var(--dfn-ink);
    font-family: var(--dfn-serif);
    font-size: 1.2em;
    line-height: 1.5;
    border-left: 3px solid var(--dfn-brand);
}

.dfn-article-body blockquote p:last-child {
    margin-bottom: 0;
}

.dfn-article-body blockquote cite,
.dfn-article-body .wp-block-quote cite {
    display: block;
    margin-top: 10px;
    color: var(--dfn-muted);
    font-family: var(--dfn-sans);
    font-size: 14px;
    font-style: normal;
}

.dfn-article-body .wp-block-pullquote {
    padding: 28px 0;
    text-align: center;
    border-top: 2px solid var(--dfn-ink);
    border-bottom: 2px solid var(--dfn-ink);
}

.dfn-article-body .wp-block-pullquote blockquote {
    padding: 0;
    border: 0;
}

.dfn-article-body img {
    border-radius: var(--dfn-radius);
}

.dfn-article-body figure {
    margin-left: 0;
    margin-right: 0;
}

.dfn-article-body figcaption,
.dfn-article-body .wp-caption-text,
.dfn-article-body .wp-element-caption {
    margin-top: 10px;
    color: var(--dfn-subtle);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.dfn-article-body .wp-caption {
    max-width: 100%;
}

.alignleft {
    float: left;
    margin: 0.3em 1.6em 1em 0;
}

.alignright {
    float: right;
    margin: 0.3em 0 1em 1.6em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.dfn-article-body .alignwide {
    width: min(1040px, calc(100vw - 40px));
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.dfn-article-body .alignfull {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 0;
}

.dfn-article-body .alignfull img {
    border-radius: 0;
}

.dfn-article-body table {
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
    border-collapse: collapse;
}

.dfn-article-body .wp-block-table {
    overflow-x: auto;
}

.dfn-article-body .wp-block-table table,
.dfn-article-body .wp-block-table thead,
.dfn-article-body .wp-block-table tfoot {
    border: 0;
}

.dfn-article-body th,
.dfn-article-body td,
.dfn-article-body .wp-block-table th,
.dfn-article-body .wp-block-table td {
    border: 0;
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--dfn-line);
}

.dfn-article-body thead th {
    color: var(--dfn-ink);
    font-weight: 600;
    background: var(--dfn-soft);
    border-bottom: 1px solid var(--dfn-line-strong);
}

.dfn-article-body .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: var(--dfn-softer);
}

.dfn-article-body code {
    padding: 0.15em 0.4em;
    font-family: var(--dfn-mono);
    font-size: 0.86em;
    background: var(--dfn-soft);
    border: 1px solid var(--dfn-line);
    border-radius: 6px;
}

.dfn-article-body pre {
    padding: 20px;
    overflow-x: auto;
    color: #e6e8ec;
    font-size: 14px;
    line-height: 1.6;
    background: var(--dfn-ink);
    border-radius: var(--dfn-radius);
}

.dfn-article-body pre code {
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
}

.dfn-article-body hr,
.dfn-article-body .wp-block-separator {
    width: 80px;
    height: 2px;
    margin: 3em auto;
    background: var(--dfn-line-strong);
    border: 0;
}

.dfn-article-body .wp-block-button__link,
.dfn-article-body .wp-element-button {
    display: inline-block;
    padding: 13px 24px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background: var(--dfn-brand);
    border-radius: var(--dfn-pill);
}

.dfn-article-body .wp-block-button__link:hover {
    background: var(--dfn-brand-ink);
}

.dfn-article-body .wp-block-embed,
.dfn-article-body iframe {
    max-width: 100%;
}

.dfn-article-body .wp-block-embed__wrapper iframe {
    width: 100%;
}

/* Ad slots injected into content keep their own size, just never overflow */
.dfn-article-body ins,
.dfn-article-body [id^="ezoic-pub-ad"],
.dfn-article-body .adsbygoogle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.dfn-article-body::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 640px) {

    .dfn-article-body {
        font-size: 17px;
        line-height: 1.7;
    }

    .alignleft,
    .alignright {
        float: none;
        margin: 0 0 1.4em;
    }
}


/* =====================================================================
   11. TABLE OF CONTENTS, SHARE, AUTHOR BOX
   ===================================================================== */

.dfn-toc {
    margin: 0 0 2.2em;
    padding: 20px 24px;
    font-size: 15px;
    line-height: 1.5;
    background: var(--dfn-softer);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius);
}

.dfn-toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--dfn-ink);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
}

.dfn-toc summary::-webkit-details-marker {
    display: none;
}

.dfn-toc summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid var(--dfn-muted);
    border-bottom: 2px solid var(--dfn-muted);
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.2s var(--dfn-ease);
}

.dfn-toc[open] summary::after {
    transform: rotate(-135deg) translateY(-1px);
}

.dfn-toc ol {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: dfn-toc;
}

.dfn-toc li {
    position: relative;
    margin: 0;
    padding: 6px 0 6px 30px;
    counter-increment: dfn-toc;
}

.dfn-toc li::before {
    content: counter(dfn-toc, decimal-leading-zero);
    position: absolute;
    top: 7px;
    left: 0;
    color: var(--dfn-subtle);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dfn-article-body .dfn-toc a {
    color: var(--dfn-text);
    text-decoration: none;
}

.dfn-article-body .dfn-toc a:hover {
    color: var(--dfn-brand-ink);
}

.dfn-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dfn-share-label {
    margin-right: 6px;
    color: var(--dfn-subtle);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dfn-share-link {
    padding: 7px 14px;
    color: var(--dfn-text);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-pill);
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.dfn-share-link:hover {
    color: #fff;
    background: var(--dfn-ink);
    border-color: var(--dfn-ink);
}

.author-box {
    display: flex;
    gap: 20px;
    max-width: var(--dfn-reading);
    margin: 40px auto 0;
    padding: 24px;
    background: var(--dfn-softer);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius);
}

.author-avatar {
    flex-shrink: 0;
}

.author-avatar img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.author-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: var(--dfn-subtle);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.author-name {
    margin: 0 0 8px;
    font-size: 19px;
}

.author-name a:hover {
    color: var(--dfn-brand-ink);
}

.author-bio {
    margin: 0;
    color: var(--dfn-muted);
    font-size: 15px;
    line-height: 1.6;
}

@media (max-width: 520px) {
    .author-box {
        flex-direction: column;
        gap: 14px;
    }
}


/* =====================================================================
   12. RELATED STORIES
   ===================================================================== */

.dfn-related {
    margin-top: 72px;
    padding: 64px 0;
    background: var(--dfn-softer);
    border-top: 1px solid var(--dfn-line);
}

.dfn-related-heading {
    margin-bottom: 32px;
}

.dfn-related-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--dfn-brand-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dfn-related-heading h2 {
    margin: 0;
    font-family: var(--dfn-serif);
    font-size: clamp(28px, 3.4vw, 36px);
    font-weight: 600;
}

.dfn-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.dfn-related-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius);
    transition: box-shadow 0.25s var(--dfn-ease), transform 0.25s var(--dfn-ease);
}

.dfn-related-card:hover {
    box-shadow: var(--dfn-shadow-lg);
    transform: translateY(-2px);
}

.dfn-related-image-link {
    display: block;
    overflow: hidden;
    background: var(--dfn-soft);
    aspect-ratio: 16 / 10;
}

.dfn-related-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dfn-related-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 18px 20px 20px;
}

.dfn-related-category {
    margin-bottom: 8px;
    color: var(--dfn-brand-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dfn-related-content h3 {
    margin: 0 0 12px;
    font-family: var(--dfn-serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.dfn-related-content h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.dfn-related-card {
    position: relative;
}

.dfn-related-meta {
    margin-top: auto;
    color: var(--dfn-subtle);
    font-size: 13px;
}

@media (max-width: 900px) {
    .dfn-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .dfn-related-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =====================================================================
   13. NEWSLETTER (single + shared states)
   ===================================================================== */

.dfn-single-newsletter {
    padding: 64px 0 80px;
}

.dfn-related + .dfn-single-newsletter {
    padding-top: 0;
    background: var(--dfn-softer);
}

.newsletter-box {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: 40px;
    padding: 44px 48px;
    color: #fff;
    background:
        radial-gradient(600px 240px at 100% 0%, rgba(225, 29, 46, 0.35), transparent 60%),
        var(--dfn-ink);
    border-radius: var(--dfn-radius-lg);
}

.newsletter-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #ff8a94;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.newsletter-content h2 {
    margin: 0 0 10px;
    color: #fff;
    font-family: var(--dfn-serif);
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 600;
    line-height: 1.12;
}

.newsletter-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
}

.newsletter-form {
    display: flex;
    gap: 8px;
}

.newsletter-form input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    font-size: 15px;
    color: var(--dfn-ink);
    background: #fff;
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-pill);
    outline: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.newsletter-form input[type="email"]:focus {
    border-color: var(--dfn-brand);
    box-shadow: 0 0 0 4px rgba(225, 29, 46, 0.18);
}

.newsletter-form button {
    flex-shrink: 0;
    height: 50px;
    padding: 0 24px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background: var(--dfn-brand);
    border: 0;
    border-radius: var(--dfn-pill);
    transition: background-color 0.2s;
}

.newsletter-form button:hover {
    background: var(--dfn-brand-ink);
}

.newsletter-form button:disabled {
    opacity: 0.7;
    cursor: progress;
}

.newsletter-note {
    margin: 10px 0 0 18px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.newsletter-message {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 500;
}

.newsletter-message:empty {
    display: none;
}

.newsletter-message.is-success {
    color: var(--dfn-success);
}

.newsletter-message.is-error {
    color: var(--dfn-error);
}

.newsletter-box .newsletter-message.is-success {
    color: #75e0a7;
}

.newsletter-box .newsletter-message.is-error {
    color: #fda29b;
}

@media (max-width: 820px) {

    .newsletter-box {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        padding: 32px 24px;
    }
}

@media (max-width: 460px) {

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form button {
        width: 100%;
    }
}


/* =====================================================================
   14. SEARCH PAGE
   ===================================================================== */

.search-page-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 640px;
    margin-top: 26px;
    padding: 6px 6px 6px 48px;
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line-strong);
    border-radius: var(--dfn-pill);
    box-shadow: var(--dfn-shadow);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-page-form:focus-within {
    border-color: var(--dfn-brand);
    box-shadow: 0 0 0 4px var(--dfn-brand-soft);
}

.search-page-icon {
    position: absolute;
    left: 18px;
    color: var(--dfn-subtle);
}

.search-page-form input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0;
    font-size: 16px;
    background: transparent;
    border: 0;
    outline: 0;
}

.search-page-form .btn {
    min-height: 44px;
}

.search-results {
    padding: 40px 0 80px;
}

.search-list {
    max-width: 860px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-item {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid var(--dfn-line);
}

.search-item:first-child {
    padding-top: 0;
}

.search-item-thumb {
    display: block;
    overflow: hidden;
    background: var(--dfn-soft);
    border-radius: var(--dfn-radius-sm);
    aspect-ratio: 4 / 3;
}

.search-item-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-item-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--dfn-subtle);
    font-family: var(--dfn-serif);
    font-size: 26px;
    font-weight: 600;
}

.search-item-tags {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.search-tag {
    color: var(--dfn-brand-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.search-tag-tool {
    padding: 2px 8px;
    color: var(--dfn-ink);
    background: var(--dfn-soft);
    border-radius: var(--dfn-pill);
}

.search-item-title {
    margin: 0 0 6px;
    font-family: var(--dfn-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

.search-item-title a:hover {
    color: var(--dfn-brand-ink);
}

.search-item-excerpt {
    margin: 0 0 8px;
    color: var(--dfn-muted);
    font-size: 15px;
    line-height: 1.6;
}

.search-item-meta {
    display: flex;
    gap: 8px;
    color: var(--dfn-subtle);
    font-size: 13px;
}

.search-empty {
    max-width: 680px;
}

.search-empty-icon {
    margin-bottom: 12px;
    font-size: 34px;
}

.search-empty h2 {
    font-family: var(--dfn-serif);
    font-size: 30px;
    font-weight: 600;
}

.search-empty > p {
    color: var(--dfn-muted);
}

.search-empty-block {
    margin-top: 32px;
}

.search-empty-block h3 {
    margin-bottom: 12px;
    color: var(--dfn-subtle);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-chip {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-pill);
    transition: border-color 0.2s, color 0.2s;
}

.search-chip:hover {
    color: var(--dfn-brand-ink);
    border-color: var(--dfn-brand);
}

.search-empty-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-empty-list li {
    border-bottom: 1px solid var(--dfn-line);
}

.search-empty-list a {
    display: block;
    padding: 12px 0;
    font-weight: 500;
}

.search-empty-list a:hover {
    color: var(--dfn-brand-ink);
}

.search-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 32px;
}

@media (max-width: 600px) {

    .search-item {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 16px;
    }

    .search-item-title {
        font-size: 18px;
    }

    .search-item-excerpt {
        display: none;
    }

    .search-page-form {
        padding-left: 44px;
    }

    .search-page-form .btn {
        padding: 0 16px;
    }
}


/* =====================================================================
   15. 404
   ===================================================================== */

.error-page {
    padding: 96px 0 112px;
    background:
        radial-gradient(800px 300px at 50% 0%, rgba(225, 29, 46, 0.06), transparent 70%),
        var(--dfn-surface);
}

.error-page-inner {
    max-width: 640px;
    text-align: center;
}

.error-code {
    display: block;
    margin-bottom: 8px;
    color: var(--dfn-brand);
    font-family: var(--dfn-serif);
    font-size: clamp(80px, 14vw, 132px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.error-page h1 {
    font-family: var(--dfn-serif);
    font-size: clamp(30px, 4.4vw, 42px);
    font-weight: 600;
}

.error-page p {
    color: var(--dfn-muted);
    font-size: 17px;
}

.error-search {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin: 28px auto;
    padding: 5px;
    border: 1px solid var(--dfn-line-strong);
    border-radius: var(--dfn-pill);
}

.error-search:focus-within {
    border-color: var(--dfn-brand);
    box-shadow: 0 0 0 4px var(--dfn-brand-soft);
}

.error-search input {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    font-size: 15px;
    background: transparent;
    border: 0;
    outline: 0;
}

.error-search button {
    height: 42px;
    padding: 0 20px;
    color: #fff;
    font-weight: 600;
    background: var(--dfn-ink);
    border: 0;
    border-radius: var(--dfn-pill);
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}


/* =====================================================================
   16. TOOLS DIRECTORY
   ===================================================================== */

.tools-directory {
    padding: 48px 0 80px;
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.tool-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius);
    transition: border-color 0.25s, box-shadow 0.25s var(--dfn-ease), transform 0.25s var(--dfn-ease);
}

.tool-card:hover {
    border-color: var(--dfn-line-strong);
    box-shadow: var(--dfn-shadow-lg);
    transform: translateY(-3px);
}

.tool-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    color: var(--dfn-brand-ink);
    font-size: 24px;
    font-weight: 700;
    background: var(--dfn-brand-soft);
    border-radius: 14px;
}

.tool-card h2 {
    margin: 0 0 8px;
    font-size: 20px;
}

.tool-card p {
    margin: 0 0 20px;
    color: var(--dfn-muted);
    font-size: 15px;
}

.tool-link {
    margin-top: auto;
    color: var(--dfn-brand-ink);
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 960px) {
    .tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .tools-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =====================================================================
   17. CALCULATORS & WORD COUNTER
   ===================================================================== */

.tool-back-link {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--dfn-muted);
    font-size: 14px;
    font-weight: 500;
}

.calculator-section {
    padding: 44px 0 24px;
}

.calculator-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.calculator-card,
.word-counter-card,
.contact-form-card {
    padding: 32px;
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius-lg);
    box-shadow: var(--dfn-shadow);
}

.calculator-card > h2 {
    margin: 0 0 18px;
    font-size: 19px;
}

.calculator-divider {
    margin: 32px 0;
}

.calculator-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--dfn-soft);
    border-radius: var(--dfn-pill);
}

.bmi-unit-button {
    height: 40px;
    color: var(--dfn-muted);
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border: 0;
    border-radius: var(--dfn-pill);
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.bmi-unit-button.active {
    color: var(--dfn-ink);
    background: var(--dfn-surface);
    box-shadow: var(--dfn-shadow);
}

.form-group {
    margin-bottom: 18px;
}

.form-group label,
.word-counter-card > label {
    display: block;
    margin-bottom: 8px;
    color: var(--dfn-ink);
    font-size: 14px;
    font-weight: 600;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.calculator-input,
.input-with-unit input,
.calculator-card input[type="number"],
.calculator-card input[type="date"],
.calculator-card input[type="text"],
.calculator-card select,
.contact-form-card input,
.contact-form-card select,
.contact-textarea,
.word-counter-card textarea {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
    color: var(--dfn-ink);
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line-strong);
    border-radius: var(--dfn-radius-sm);
    outline: 0;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.calculator-card select,
.contact-form-card select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235b6474' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.contact-textarea,
.word-counter-card textarea {
    height: auto;
    min-height: 160px;
    padding: 14px 16px;
    line-height: 1.6;
    resize: vertical;
}

.word-counter-card textarea {
    min-height: 260px;
}

.calculator-input:focus,
.input-with-unit input:focus,
.calculator-card input:focus,
.calculator-card select:focus,
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-textarea:focus,
.word-counter-card textarea:focus {
    border-color: var(--dfn-brand);
    box-shadow: 0 0 0 4px var(--dfn-brand-soft);
}

.input-with-unit {
    position: relative;
}

.input-with-unit input {
    padding-right: 60px;
}

.input-with-unit span {
    position: absolute;
    top: 50%;
    right: 16px;
    color: var(--dfn-subtle);
    font-size: 14px;
    font-weight: 500;
    transform: translateY(-50%);
    pointer-events: none;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.calculator-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin-top: 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    background: var(--dfn-brand);
    border: 0;
    border-radius: var(--dfn-pill);
    transition: background-color 0.2s, transform 0.15s;
}

.calculator-button:hover {
    background: var(--dfn-brand-ink);
}

.calculator-button:active {
    transform: translateY(1px);
}

.calculator-button:disabled {
    opacity: 0.7;
    cursor: progress;
}

.calculator-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    margin-top: 10px;
    color: var(--dfn-muted);
    font-size: 15px;
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-pill);
    transition: border-color 0.2s, color 0.2s;
}

.calculator-reset:hover {
    color: var(--dfn-ink);
    border-color: var(--dfn-line-strong);
}

.calculator-error {
    margin: 14px 0 0;
    padding: 10px 14px;
    color: var(--dfn-error);
    font-size: 14px;
    font-weight: 500;
    background: var(--dfn-error-soft);
    border-radius: var(--dfn-radius-sm);
}

.calculator-error:empty {
    display: none;
}

.calculator-result {
    margin-top: 22px;
    padding: 24px;
    text-align: center;
    background:
        radial-gradient(400px 140px at 50% 0%, rgba(225, 29, 46, 0.08), transparent 70%),
        var(--dfn-softer);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius);
    animation: dfn-pop 0.25s var(--dfn-ease);
}

.result-label {
    display: block;
    margin-bottom: 4px;
    color: var(--dfn-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calculator-result > strong {
    display: block;
    color: var(--dfn-ink);
    font-family: var(--dfn-serif);
    font-size: clamp(40px, 6vw, 54px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.result-category {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 14px;
    color: var(--dfn-brand-ink);
    font-size: 14px;
    font-weight: 700;
    background: var(--dfn-brand-soft);
    border-radius: var(--dfn-pill);
}

.result-category:empty {
    display: none;
}

.calculator-result p {
    margin: 12px 0 0;
    color: var(--dfn-muted);
    font-size: 15px;
}

.compound-summary,
.discount-summary,
.age-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.age-result-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    margin-top: 0;
}

.compound-summary > div,
.discount-summary > div,
.age-result-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 12px;
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius-sm);
}

.compound-summary span,
.discount-summary span,
.age-result-grid span {
    color: var(--dfn-muted);
    font-size: 13px;
}

.compound-summary strong,
.discount-summary strong,
.age-result-grid strong {
    color: var(--dfn-ink);
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.age-result-grid strong {
    font-family: var(--dfn-serif);
    font-size: 30px;
    line-height: 1.1;
}

.age-extra-info {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    text-align: left;
}

.age-extra-info p {
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 8px 0;
    font-size: 15px;
    border-bottom: 1px dashed var(--dfn-line);
}

.age-extra-info p:last-child {
    border-bottom: 0;
}

.calculator-info {
    position: sticky;
    top: 140px;
    padding: 28px;
    background: var(--dfn-softer);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius-lg);
}

.calculator-info h2 {
    margin: 0 0 16px;
    font-size: 19px;
}

.calculator-info p,
.calculator-info li {
    color: var(--dfn-muted);
    font-size: 15px;
}

.calculator-info ul,
.calculator-info ol {
    padding-left: 1.2em;
}

.bmi-table {
    display: grid;
    gap: 0;
    margin-bottom: 20px;
    overflow: hidden;
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius-sm);
}

.bmi-table > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    font-size: 15px;
    border-bottom: 1px solid var(--dfn-line);
}

.bmi-table > div:last-child {
    border-bottom: 0;
}

.bmi-table span {
    color: var(--dfn-muted);
}

.bmi-table strong {
    color: var(--dfn-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.calculator-note {
    padding: 16px 18px;
    background: #fffaeb;
    border: 1px solid #fde7a8;
    border-radius: var(--dfn-radius-sm);
}

.calculator-note strong {
    display: block;
    margin-bottom: 4px;
    color: #93370d;
    font-size: 14px;
}

.calculator-note p {
    margin: 0;
    color: #7a4a12;
    font-size: 14px;
    line-height: 1.55;
}

.formula-box {
    margin: 0 0 1.6em;
    padding: 18px 22px;
    color: var(--dfn-ink);
    font-family: var(--dfn-mono);
    font-size: 15px;
    line-height: 1.6;
    overflow-x: auto;
    background: var(--dfn-soft);
    border-left: 3px solid var(--dfn-brand);
    border-radius: 0 var(--dfn-radius-sm) var(--dfn-radius-sm) 0;
}

/* Word counter */
.word-counter-card {
    max-width: 960px;
    margin: 0 auto;
}

.word-counter-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.word-counter-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 12px;
    text-align: center;
    background: var(--dfn-softer);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius-sm);
}

.word-counter-stats strong {
    color: var(--dfn-ink);
    font-family: var(--dfn-serif);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.word-counter-stats span {
    color: var(--dfn-muted);
    font-size: 12px;
    line-height: 1.3;
}

.word-counter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.word-counter-clear {
    width: auto;
    padding: 0 22px;
}

@media (max-width: 960px) {

    .calculator-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .calculator-info {
        position: static;
    }

    .word-counter-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {

    .calculator-card,
    .word-counter-card,
    .contact-form-card,
    .calculator-info {
        padding: 22px 18px;
    }

    .form-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .word-counter-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =====================================================================
   18. TOOL LONG-FORM CONTENT
   ===================================================================== */

.tool-content {
    padding: 48px 0 88px;
}

.tool-content-inner,
.about-content-inner,
.policy-content .policy-container,
.advertise-container {
    font-size: 17px;
    line-height: 1.75;
}

.tool-content-inner {
    max-width: var(--dfn-reading);
}

.tool-content-inner h2,
.about-content-inner h2,
.policy-content h2,
.advertise-container > h2 {
    margin: 2em 0 0.6em;
    font-size: clamp(23px, 2.8vw, 28px);
    line-height: 1.25;
}

.tool-content-inner h2:first-child,
.about-content-inner h2:first-child,
.advertise-container > h2:first-child {
    margin-top: 0;
}

.tool-content-inner h3,
.policy-content h3 {
    margin: 1.6em 0 0.5em;
    font-size: 20px;
}

.tool-content-inner p,
.tool-content-inner li,
.about-content-inner p,
.policy-content p,
.policy-content li {
    color: var(--dfn-text);
}

.tool-content-inner ul,
.tool-content-inner ol,
.policy-content ul,
.policy-content ol {
    padding-left: 1.4em;
}

.tool-content-inner li,
.policy-content li {
    margin-bottom: 0.4em;
}

.tool-related-guide {
    width: min(var(--dfn-reading), calc(100% - 40px));
    margin: 0 auto 40px;
    padding: 20px 24px;
    background: var(--dfn-brand-soft);
    border-radius: var(--dfn-radius);
}

.tool-related-guide strong {
    display: block;
    margin-bottom: 4px;
    color: var(--dfn-ink);
}

.tool-related-guide p {
    margin: 0;
    color: var(--dfn-text);
}


/* =====================================================================
   19. ABOUT
   ===================================================================== */

.about-content {
    padding: 56px 0 88px;
}

.about-content-inner {
    max-width: 880px;
}

.about-content-inner > p {
    max-width: var(--dfn-reading);
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 8px;
}

.about-card {
    padding: 24px;
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius);
    transition: border-color 0.2s, box-shadow 0.25s var(--dfn-ease);
}

.about-card:hover {
    border-color: var(--dfn-line-strong);
    box-shadow: var(--dfn-shadow-lg);
}

.about-card > span {
    display: block;
    width: 28px;
    height: 4px;
    margin-bottom: 18px;
    background: var(--dfn-brand);
    border-radius: 4px;
}

.about-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

.about-card p {
    margin: 0;
    color: var(--dfn-muted);
    font-size: 15px;
    line-height: 1.6;
}

.about-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 56px;
    padding: 32px 36px;
    color: #fff;
    background: var(--dfn-ink);
    border-radius: var(--dfn-radius-lg);
}

.about-cta h2 {
    margin: 0 0 6px !important;
    color: #fff;
}

.about-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72) !important;
}

@media (max-width: 860px) {
    .about-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {

    .about-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .about-cta {
        padding: 26px 22px;
    }
}


/* =====================================================================
   20. CONTACT
   ===================================================================== */

.contact-section {
    padding: 48px 0 88px;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: start;
    gap: 40px;
}

.contact-info h2 {
    margin-bottom: 18px;
    font-size: 24px;
}

.contact-info-card {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--dfn-line);
}

.contact-info-card:last-child {
    border-bottom: 0;
}

.contact-info-card > span {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 20px;
    background: var(--dfn-soft);
    border-radius: 12px;
}

.contact-info-card strong {
    display: block;
    margin-bottom: 2px;
    color: var(--dfn-ink);
}

.contact-info-card p {
    margin: 0;
    color: var(--dfn-muted);
    font-size: 15px;
}

.contact-info-card a {
    color: var(--dfn-brand-ink);
    font-weight: 600;
}

.contact-response {
    margin: 14px 0 0;
    font-size: 14px;
    font-weight: 500;
}

.contact-response:empty {
    display: none;
}

.contact-response.success {
    padding: 12px 14px;
    color: var(--dfn-success);
    background: var(--dfn-success-soft);
    border-radius: var(--dfn-radius-sm);
}

.contact-response.error {
    padding: 12px 14px;
    color: var(--dfn-error);
    background: var(--dfn-error-soft);
    border-radius: var(--dfn-radius-sm);
}

@media (max-width: 860px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =====================================================================
   21. POLICY / LEGAL
   ===================================================================== */

.policy-content {
    padding: 48px 0 88px;
}

.policy-content h2 {
    padding-top: 0.4em;
}

.policy-contact-box {
    margin-top: 48px;
    padding: 28px 30px;
    background: var(--dfn-softer);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius-lg);
}

.policy-contact-box h2 {
    margin-top: 0 !important;
    padding-top: 0;
}

.policy-contact-box .btn {
    margin-top: 6px;
    text-decoration: none;
}

.policy-content .policy-contact-box .btn,
.advertise-content .btn {
    color: #fff;
    text-decoration: none;
}

.policy-email,
.advertise-email {
    font-weight: 600;
}

.policy-updated {
    margin-top: 32px;
    color: var(--dfn-subtle) !important;
    font-size: 14px;
}


/* =====================================================================
   22. ADVERTISE
   ===================================================================== */

.advertise-content {
    padding: 56px 0 88px;
}

.advertise-container {
    max-width: 1000px;
}

.advertise-container > p {
    max-width: var(--dfn-reading);
}

.advertise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 24px 0 8px;
}

.advertise-card {
    padding: 24px;
    background: var(--dfn-surface);
    border: 1px solid var(--dfn-line);
    border-radius: var(--dfn-radius);
    transition: border-color 0.2s, box-shadow 0.25s var(--dfn-ease);
}

.advertise-card:hover {
    border-color: var(--dfn-line-strong);
    box-shadow: var(--dfn-shadow-lg);
}

.advertise-card > span {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    font-size: 20px;
    background: var(--dfn-soft);
    border-radius: 12px;
}

.advertise-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
}

.advertise-card p {
    margin: 0;
    color: var(--dfn-muted);
    font-size: 15px;
    line-height: 1.6;
}

.advertise-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 56px;
    padding: 32px 36px;
    color: #fff;
    background: var(--dfn-ink);
    border-radius: var(--dfn-radius-lg);
}

.advertise-cta h2 {
    margin: 0 0 6px !important;
    color: #fff;
}

.advertise-cta p {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
}

.advertise-cta a:not(.btn) {
    color: #fff;
}

@media (max-width: 860px) {
    .advertise-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .advertise-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* =====================================================================
   23. FOOTER
   ===================================================================== */

.site-footer {
    padding: 64px 0 0;
    color: rgba(255, 255, 255, 0.72);
    background: var(--dfn-ink);
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
    padding-bottom: 48px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 12px;
    color: #fff;
    font-family: var(--dfn-serif);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.footer-logo span {
    color: #ff5a68;
}

.footer-tagline {
    margin: 0 0 16px;
    font-size: 15px;
}

.footer-email {
    display: inline-block;
    margin-bottom: 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: border-color 0.2s;
}

.footer-email:hover {
    border-color: #fff;
}

.footer-social {
    display: flex;
    gap: 10px;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--dfn-pill);
    transition: background-color 0.2s, border-color 0.2s;
}

.footer-social a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-column h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-column a {
    font-size: 15px;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: #fff;
}

.footer-bottom {
    padding: 22px 0 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

.site-footer :focus-visible {
    outline-color: #fff;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 20px;
    }
}


/* =====================================================================
   24. MOTION & PRINT
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {

    .site-header,
    .site-footer,
    .dfn-related,
    .dfn-single-newsletter,
    .dfn-share,
    .dfn-article-email,
    .dfn-progress,
    .dfn-breadcrumbs {
        display: none !important;
    }

    body {
        color: #000;
        font-size: 12pt;
    }

    .dfn-article-body a::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
    }
}