/* HyperDAF Premium Blog Main Page — Theme-owned posts-index presentation. */
.hdf-blog-home {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    background: var(--hdf-color-page, #fff);
    color: var(--hdf-color-text, #111827);
    font-family: var(--hdf-font-body);
    overflow-x: clip;
}
.hdf-blog-home *, .hdf-blog-home *::before, .hdf-blog-home *::after { box-sizing: border-box; min-width: 0; }
.hdf-blog-home__inner { width: min(calc(100% - 48px), var(--hdf-container, 1300px)); max-width: 100%; margin-inline: auto; }
.hdf-blog-home__section { margin-top: var(--hdf-blog-main-section-gap, 20px); }
.hdf-blog-home__hero { padding-top: var(--hdf-blog-home-hero-top-gap, 16px); padding-bottom: var(--hdf-blog-home-hero-backdrop-bottom, 5px); background: var(--hdf-blog-home-hero-backdrop-bg, #F3F4F6); }
/* Blog Homepage Hero aligns to the canonical global page container instead of
 * inheriting the narrower Blog article/listing content-width setting. */
.hdf-blog-home__hero > .hdf-blog-home__inner {
    width: min(calc(100% - 48px), var(--hdf-container, 1300px));
    max-width: 100%;
}
.hdf-blog-home__hero-shell {
    display: grid;
    gap: 0;
    padding: 0;
    border: 1px solid var(--hdf-blog-home-hero-border, #E5E7EB);
    border-radius: var(--hdf-blog-home-hero-radius, 22px);
    background: var(--hdf-blog-home-hero-shell-bg, #FFFFFF);
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}
.hdf-blog-home__hero-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(282px, 326px); gap: var(--hdf-blog-home-hero-layout-gap, 8px); padding: var(--hdf-blog-home-hero-layout-padding, 10px); }
.hdf-blog-home__hero-main {
    display: grid;
    grid-template-columns: minmax(450px, 1.14fr) minmax(300px, .86fr);
    gap: var(--hdf-blog-home-hero-main-gap, 14px);
    padding: var(--hdf-blog-home-hero-main-padding, 16px);
    border: 1px solid var(--hdf-blog-home-hero-border, #E5E7EB);
    border-radius: calc(var(--hdf-blog-home-hero-radius, 22px) - 4px);
    background: radial-gradient(circle at top left, rgba(249,115,22,0.08), transparent 32%), var(--hdf-blog-home-hero-panel-bg, #FFF9F4);
}
.hdf-blog-home__hero-content { display: grid; align-content: center; gap: var(--hdf-blog-home-hero-content-gap, 10px); }
.hdf-blog-home__hero-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.10);
    color: var(--hdf-blog-home-hero-accent, #F97316);
    font-family: var(--hdf-font-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.hdf-blog-home__hero-badge .hdf-blog-icon { width: 14px; height: 14px; }
.hdf-blog-home h1, .hdf-blog-home h2, .hdf-blog-home h3 { color: var(--hdf-blog-main-title, var(--hdf-color-text)); font-family: var(--hdf-font-heading, var(--hdf-font-body)); }
.hdf-blog-home__hero h1 { margin: 0; color: var(--hdf-blog-home-hero-title, #0F172A); font-size: var(--hdf-blog-home-hero-title-size, 42px); font-weight: 800; line-height: .98; letter-spacing: -.035em; }
.hdf-blog-home__hero-line { display: block; }
.hdf-blog-home__hero-line--accent { color: var(--hdf-blog-home-hero-accent, #F97316); }
.hdf-blog-home__hero-intro { max-width: 60ch; margin: 0; color: var(--hdf-blog-home-hero-muted, #5B6472); font-size: .84rem; line-height: 1.48; }
.hdf-blog-home__hero-meta {
    display: grid;
    width: fit-content;
    max-width: 100%;
    grid-template-columns: repeat(3, max-content);
    gap: 6px;
}

.hdf-blog-home__hero-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--hdf-blog-home-hero-meta-height, 30px);
    padding: 0 8px;
    border: 1px solid var(--hdf-blog-home-hero-border, #E5E7EB);
    border-radius: 12px;
    background: rgba(255,255,255,.84);
    color: var(--hdf-blog-home-hero-muted, #5B6472);
    font-family: var(--hdf-font-ui);
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
}
.hdf-blog-home__hero-meta .hdf-blog-icon { width: 14px; height: 14px; }
.hdf-blog-home__hero-actions { display: flex; flex-wrap: nowrap; gap: 7px; align-items: center; }
.hdf-blog-home__button {
    display: inline-flex;
    min-height: var(--hdf-blog-home-hero-button-height, 38px);
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--hdf-font-ui);
    font-size: .79rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--hdf-transition), box-shadow var(--hdf-transition), border-color var(--hdf-transition), color var(--hdf-transition), background-color var(--hdf-transition);
}
.hdf-blog-home__button:hover, .hdf-blog-home__button:focus-visible { transform: translateY(-1px); outline: 0; }
.hdf-blog-home__button--primary { min-width: var(--hdf-blog-home-hero-primary-button-min-width, 132px); background: var(--hdf-color-primary, #F97316); color: var(--hdf-on-primary, #fff); box-shadow: 0 12px 18px rgba(249,115,22,.16); white-space: nowrap; }
.hdf-blog-home__button--primary:hover, .hdf-blog-home__button--primary:focus-visible { background: var(--hdf-color-primary-hover, #EA580C); color: var(--hdf-on-primary-hover, #fff); }
.hdf-blog-home__button--secondary { border-color: color-mix(in srgb, var(--hdf-color-success, #22C55E) 44%, #B7E4C7); background: #fff; color: var(--hdf-color-success, #15803D); }
.hdf-blog-home__button--secondary:hover, .hdf-blog-home__button--secondary:focus-visible { border-color: var(--hdf-color-success, #15803D); color: var(--hdf-color-success, #15803D); }
.hdf-blog-home__button--ghost { border-color: var(--hdf-blog-home-hero-border, #E5E7EB); background: #fff; color: var(--hdf-blog-home-hero-title, #0F172A); }
.hdf-blog-home__button--ghost:hover, .hdf-blog-home__button--ghost:focus-visible { border-color: var(--hdf-color-primary, #F97316); color: var(--hdf-color-primary-hover, #EA580C); }
.hdf-blog-home__hero-visual { overflow: hidden; width: min(100%, var(--hdf-blog-home-hero-visual-width, 400px)); aspect-ratio: 16 / 9; height: auto; justify-self: end; align-self: center; border-radius: calc(var(--hdf-blog-home-hero-radius, 22px) - 8px); background: #fff; min-height: 0; }
.hdf-blog-home__hero-visual-link, .hdf-blog-home__hero-visual-link img { display: block; width: 100%; height: 100%; }
.hdf-blog-home__hero-visual-link img { object-fit: cover; object-position: center; }
.hdf-blog-home__hero-visual-fallback { display: grid; width: 100%; height: 100%; min-height: inherit; place-items: center; color: var(--hdf-blog-home-hero-accent, #F97316); background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(255,255,255,.9)); }
.hdf-blog-home__hero-visual-fallback .hdf-blog-icon { width: 54px; height: 54px; }
.hdf-blog-home__hero-side { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--hdf-blog-home-hero-side-gap, 8px); align-content: stretch; }
.hdf-blog-home__hero-story-card { display: grid; grid-template-columns: var(--hdf-blog-home-hero-side-thumb-size, 96px) minmax(0, 1fr); gap: 8px; padding: 8px; border: 1px solid var(--hdf-blog-home-hero-border, #E5E7EB); border-radius: calc(var(--hdf-blog-home-hero-radius, 22px) - 6px); background: var(--hdf-blog-home-hero-story-bg, #FFFFFF); }
.hdf-blog-home__hero-story-thumb { display: block; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, rgba(249,115,22,0.12), rgba(255,255,255,.96)); aspect-ratio: 16 / 9; align-self: center; }
.hdf-blog-home__hero-story-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hdf-blog-home__hero-story-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: var(--hdf-blog-home-hero-accent, #F97316); }
.hdf-blog-home__hero-story-fallback .hdf-blog-icon { width: 32px; height: 32px; }
.hdf-blog-home__hero-story-body { display: grid; align-content: center; gap: 5px; }
.hdf-blog-home__hero-story-tag { display: inline-flex; width: fit-content; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 999px; font-family: var(--hdf-font-ui); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.hdf-blog-home__hero-story-tag--green { background: rgba(31, 166, 122, 0.10); color: #1A7F5A; }
.hdf-blog-home__hero-story-tag--orange { background: rgba(249, 115, 22, 0.10); color: #EA580C; }
.hdf-blog-home__hero-story-tag--blue { background: rgba(37, 99, 235, 0.10); color: #1D4ED8; }
.hdf-blog-home__hero-story-card h2 { margin: 0; font-size: .84rem; font-weight: 700; line-height: 1.22; }
.hdf-blog-home__hero-story-card h2 a { color: var(--hdf-blog-home-hero-title, #0F172A); text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.hdf-blog-home__hero-story-card h2 a:hover, .hdf-blog-home__hero-story-card h2 a:focus-visible { color: var(--hdf-color-primary-hover, #EA580C); }
.hdf-blog-home__hero-story-meta { color: var(--hdf-blog-home-hero-muted, #5B6472); font-family: var(--hdf-font-ui); font-size: .64rem; font-weight: 600; }
.hdf-blog-home__hero-story-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hdf-blog-home__hero-story-meta .hdf-blog-icon { width: 13px; height: 13px; }
.hdf-blog-home__hero-benefits { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hdf-blog-home-hero-border, #E5E7EB); background: var(--hdf-blog-home-hero-benefit-bg, #FFFFFF); }
.hdf-blog-home__hero-benefit { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; padding: var(--hdf-blog-home-hero-benefit-padding-y, 13px) 12px; }
.hdf-blog-home__hero-benefit + .hdf-blog-home__hero-benefit { border-inline-start: 1px solid var(--hdf-blog-home-hero-border, #E5E7EB); }
.hdf-blog-home__hero-benefit-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 999px; background: rgba(249, 115, 22, 0.10); color: var(--hdf-blog-home-hero-accent, #F97316); }
.hdf-blog-home__hero-benefit-icon .hdf-blog-icon { width: 17px; height: 17px; }
.hdf-blog-home__hero-benefit strong { display: block; color: var(--hdf-blog-home-hero-title, #0F172A); font-family: var(--hdf-font-ui); font-size: .76rem; font-weight: 700; line-height: 1.2; }
.hdf-blog-home__hero-benefit small { display: block; margin-top: 2px; color: var(--hdf-blog-home-hero-muted, #5B6472); font-size: .64rem; line-height: 1.22; }


/* Blog Main archive — starts after the complete Hero + trust strip. */
.hdf-blog-home__archive { margin-top: var(--hdf-blog-main-section-gap, 20px); padding-bottom: 36px; }
.hdf-blog-home__archive,.hdf-blog-home__archive * { text-shadow:none; }
.hdf-blog-home__archive a,.hdf-blog-home__archive button,.hdf-blog-home__archive select,.hdf-blog-home__archive .page-numbers { box-shadow:none; filter:none; backdrop-filter:none; }
.hdf-blog-home__archive-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px; }
.hdf-blog-home__archive-heading { display:grid; gap:3px; }
.hdf-blog-home__archive-heading h2 { margin:0; color:var(--hdf-blog-main-title,#111827); font-size:20px; font-weight:700; line-height:1.2; }
.hdf-blog-home__archive-heading p { margin:0; color:var(--hdf-blog-main-muted,#6B7280); font-family:var(--hdf-font-ui); font-size:11px; line-height:1.4; }
.hdf-blog-home__archive-controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; }
.hdf-blog-home__sort select { min-height:36px; padding:0 34px 0 11px; border:1px solid var(--hdf-blog-main-border,#E5E7EB); border-radius:9px; background:#fff; color:var(--hdf-blog-main-title,#111827); font-family:var(--hdf-font-ui); font-size:11px; font-weight:650; }
.hdf-blog-home__sort noscript button { min-height:36px; margin-inline-start:5px; padding:0 11px; border:1px solid var(--hdf-blog-main-border,#E5E7EB); border-radius:9px; background:#fff; color:var(--hdf-blog-main-title,#111827); }
.hdf-blog-home__filters { display:flex; flex-wrap:wrap; gap:6px; }
.hdf-blog-home__filters a,.hdf-blog-home__view-all { display:inline-flex; min-height:36px; align-items:center; justify-content:center; padding:0 11px; border:1px solid var(--hdf-blog-main-border,#E5E7EB); border-radius:9px; background:#fff; color:var(--hdf-blog-main-title,#111827); font-family:var(--hdf-font-ui); font-size:10.5px; font-weight:700; text-decoration:none; }
.hdf-blog-home__filters a:hover,.hdf-blog-home__filters a:focus-visible,.hdf-blog-home__view-all:hover,.hdf-blog-home__view-all:focus-visible { border-color:var(--hdf-color-primary,#F97316); color:var(--hdf-color-primary-hover,#EA580C); outline:0; }
.hdf-blog-home__filters a.is-active { border-color:var(--hdf-color-primary,#F97316); background:var(--hdf-color-primary,#F97316); color:var(--hdf-on-primary,#fff); }
.hdf-blog-home__view-all { border-color:color-mix(in srgb,var(--hdf-color-primary,#F97316) 55%,var(--hdf-blog-main-border,#E5E7EB)); color:var(--hdf-color-primary-hover,#EA580C); white-space:nowrap; }
.hdf-blog-home__archive-layout { display:grid; grid-template-columns:1fr; gap:18px; align-items:start; }
.hdf-blog-home__archive-layout--sidebar { grid-template-columns:minmax(0,1fr) minmax(260px,var(--hdf-blog-main-sidebar-width,300px)); }
.hdf-blog-home__archive-primary { min-width:0; }
.hdf-blog-home__post-grid { display:grid; grid-template-columns:repeat(var(--hdf-blog-main-columns,3),minmax(0,1fr)); column-gap:var(--hdf-blog-main-card-gap,0px); row-gap:var(--hdf-blog-main-card-row-gap,10px); align-items:start; overflow:visible; }
.hdf-blog-home__archive-layout > .hdf-context-sidebar { width:100%; }
.hdf-blog-home__pagination { margin-top:18px; }
.hdf-blog-home__pagination .nav-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; }
.hdf-blog-home__pagination .page-numbers { display:grid; min-width:34px; min-height:34px; place-items:center; padding:5px 9px; border:1px solid var(--hdf-blog-main-border,#E5E7EB); border-radius:8px; background:#fff; color:var(--hdf-blog-main-title,#111827); font-family:var(--hdf-font-ui); font-size:10.5px; font-weight:650; text-decoration:none; }
.hdf-blog-home__pagination .current { border-color:var(--hdf-color-primary,#F97316); background:var(--hdf-color-primary,#F97316); color:var(--hdf-on-primary,#fff); }
.hdf-blog-home__pagination a:hover,.hdf-blog-home__pagination a:focus-visible { border-color:var(--hdf-color-primary,#F97316); color:var(--hdf-color-primary-hover,#EA580C); outline:0; }
@media (max-width: 1200px) {
    .hdf-blog-home__archive-head { align-items:flex-start; flex-direction:column; }
    .hdf-blog-home__archive-controls { justify-content:flex-start; }
    .hdf-blog-home__hero-layout { grid-template-columns: 1fr; }
    .hdf-blog-home__hero-main { grid-template-columns: minmax(390px, 1fr) minmax(300px, .9fr); }
    .hdf-blog-home__hero-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hdf-blog-home__hero-story-card { grid-template-columns: 1fr; }
    .hdf-blog-home__hero-story-thumb { width: 100%; aspect-ratio: 16 / 9; }
    .hdf-blog-home__hero h1 { font-size: var(--hdf-blog-home-hero-tablet-title-size, 38px); }
    .hdf-blog-home__hero-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .hdf-blog-home__archive-layout--sidebar { grid-template-columns:1fr; }
    .hdf-blog-home__post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .hdf-blog-home__archive-layout > .hdf-context-sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
    .hdf-blog-home__inner { width: min(calc(100% - (var(--hdf-blog-main-tablet-padding-x, 18px) * 2)), var(--hdf-container, 1300px)); }
    .hdf-blog-home__hero-main { grid-template-columns: 1fr; padding: 22px; }
    .hdf-blog-home__hero-visual { justify-self: center; }
    .hdf-blog-home__hero-meta { grid-template-columns: repeat(3, minmax(0, max-content)); }
    .hdf-blog-home__hero h1 { font-size: var(--hdf-blog-home-hero-tablet-title-size, 38px); }
    .hdf-blog-home__hero-side { grid-template-columns: 1fr; }
    .hdf-blog-home__hero-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .hdf-blog-home__archive { margin-top:var(--hdf-blog-main-section-gap,20px); padding-bottom:24px; }
    .hdf-blog-home__archive-controls { width:100%; align-items:stretch; }
    .hdf-blog-home__sort,.hdf-blog-home__sort select { width:100%; }
    .hdf-blog-home__filters { width:100%; }
    .hdf-blog-home__post-grid { grid-template-columns:1fr; }
    .hdf-blog-home__archive-layout > .hdf-context-sidebar { grid-template-columns:1fr; }
    .hdf-blog-home__inner { width: min(calc(100% - (var(--hdf-blog-main-mobile-padding-x, 12px) * 2)), var(--hdf-container, 1300px)); }
    .hdf-blog-home__hero { padding-top: 10px; }
    .hdf-blog-home__hero > .hdf-blog-home__inner { width: calc(100% - (var(--hdf-blog-main-mobile-padding-x, 12px) * 2)); }
    .hdf-blog-home__hero-layout { padding: 12px; }
    .hdf-blog-home__hero-main { padding: 18px 16px; }
    .hdf-blog-home__hero h1 { font-size: var(--hdf-blog-home-hero-mobile-title-size, 30px); }
    .hdf-blog-home__hero-meta { width: 100%; grid-template-columns: 1fr; }
    .hdf-blog-home__hero-meta > span { justify-content: flex-start; }
    .hdf-blog-home__hero-actions { display: grid; grid-template-columns: 1fr; }
    .hdf-blog-home__button { width: 100%; }
    .hdf-blog-home__hero-story-card { grid-template-columns: min(112px, 34vw) minmax(0, 1fr); }
    .hdf-blog-home__hero-benefits { grid-template-columns: 1fr; }
    .hdf-blog-home__hero-benefit + .hdf-blog-home__hero-benefit { border-inline-start: 0; border-top: 1px solid var(--hdf-blog-home-hero-border, #E5E7EB); }
}


/* Step 88: preserve the approved desktop Blog Homepage Hero composition on every device.
 * Desktop (>1200px) is intentionally untouched. Tablet/mobile only scale the same horizontal
 * shell: featured copy + featured media, three-story vertical side stack, and six trust blocks. */
@media (max-width: 1200px) {
    .hdf-blog-home__hero-layout {
        grid-template-columns: minmax(0, 1fr) minmax(170px, 25%);
        gap: clamp(4px, .7vw, var(--hdf-blog-home-hero-layout-gap, 8px));
        padding: clamp(6px, .85vw, var(--hdf-blog-home-hero-layout-padding, 10px));
    }
    .hdf-blog-home__hero-main {
        grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
        gap: clamp(6px, 1vw, var(--hdf-blog-home-hero-main-gap, 14px));
        padding: clamp(8px, 1.25vw, var(--hdf-blog-home-hero-main-padding, 16px));
    }
    .hdf-blog-home__hero-content { gap: clamp(5px, .8vw, var(--hdf-blog-home-hero-content-gap, 10px)); }
    .hdf-blog-home__hero-badge {
        gap: clamp(3px, .5vw, 8px);
        padding: clamp(3px, .4vw, 5px) clamp(6px, .8vw, 11px);
        font-size: clamp(7px, .78vw, 10.5px);
    }
    .hdf-blog-home__hero-badge .hdf-blog-icon { width: clamp(9px, 1vw, 14px); height: clamp(9px, 1vw, 14px); }
    .hdf-blog-home__hero h1 { font-size: clamp(22px, 3.15vw, var(--hdf-blog-home-hero-tablet-title-size, 38px)); }
    .hdf-blog-home__hero-intro { font-size: clamp(.62rem, 1.02vw, .84rem); line-height: 1.42; }
    .hdf-blog-home__hero-meta {
        grid-template-columns: repeat(3, max-content);
        gap: clamp(3px, .45vw, 6px);
    }
    .hdf-blog-home__hero-meta > span {
        min-height: clamp(21px, 2.5vw, var(--hdf-blog-home-hero-meta-height, 30px));
        gap: clamp(3px, .55vw, 8px);
        padding-inline: clamp(4px, .6vw, 8px);
        border-radius: clamp(7px, 1vw, 12px);
        font-size: clamp(.46rem, .68vw, .62rem);
    }
    .hdf-blog-home__hero-meta .hdf-blog-icon { width: clamp(9px, 1vw, 14px); height: clamp(9px, 1vw, 14px); }
    .hdf-blog-home__hero-actions { display: flex; flex-wrap: nowrap; gap: clamp(3px, .55vw, 7px); }
    .hdf-blog-home__button {
        width: auto;
        min-height: clamp(25px, 3.1vw, var(--hdf-blog-home-hero-button-height, 38px));
        gap: clamp(3px, .55vw, 8px);
        padding-inline: clamp(6px, .9vw, 12px);
        border-radius: clamp(7px, .85vw, 10px);
        font-size: clamp(.5rem, .78vw, .79rem);
        white-space: nowrap;
    }
    .hdf-blog-home__button--primary { min-width: clamp(78px, 10.5vw, var(--hdf-blog-home-hero-primary-button-min-width, 132px)); }
    .hdf-blog-home__hero-visual { width: min(100%, var(--hdf-blog-home-hero-visual-width, 400px)); justify-self: end; }
    .hdf-blog-home__hero-side {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: clamp(4px, .65vw, var(--hdf-blog-home-hero-side-gap, 8px));
    }
    .hdf-blog-home__hero-story-card {
        grid-template-columns: clamp(52px, 7.5vw, var(--hdf-blog-home-hero-side-thumb-size, 96px)) minmax(0, 1fr);
        gap: clamp(4px, .65vw, 8px);
        padding: clamp(4px, .65vw, 8px);
    }
    .hdf-blog-home__hero-story-thumb { width: 100%; aspect-ratio: 16 / 9; }
    .hdf-blog-home__hero-story-body { gap: clamp(2px, .4vw, 5px); }
    .hdf-blog-home__hero-story-tag {
        min-height: clamp(15px, 1.9vw, 23px);
        padding-inline: clamp(4px, .65vw, 8px);
        font-size: clamp(.42rem, .62vw, .6rem);
    }
    .hdf-blog-home__hero-story-card h2 { font-size: clamp(.55rem, .8vw, .84rem); line-height: 1.18; }
    .hdf-blog-home__hero-story-meta { font-size: clamp(.45rem, .62vw, .64rem); }
    .hdf-blog-home__hero-story-meta .hdf-blog-icon { width: clamp(8px, .9vw, 13px); height: clamp(8px, .9vw, 13px); }
    .hdf-blog-home__hero-benefits { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .hdf-blog-home__hero-benefit {
        grid-template-columns: clamp(20px, 2.65vw, 32px) minmax(0, 1fr);
        gap: clamp(4px, .65vw, 8px);
        padding: clamp(7px, 1vw, var(--hdf-blog-home-hero-benefit-padding-y, 13px)) clamp(6px, .9vw, 12px);
    }
    .hdf-blog-home__hero-benefit + .hdf-blog-home__hero-benefit { border-inline-start: 1px solid var(--hdf-blog-home-hero-border, #E5E7EB); border-top: 0; }
    .hdf-blog-home__hero-benefit-icon {
        width: clamp(20px, 2.65vw, 32px);
        height: clamp(20px, 2.65vw, 32px);
    }
    .hdf-blog-home__hero-benefit-icon .hdf-blog-icon { width: clamp(10px, 1.4vw, 17px); height: clamp(10px, 1.4vw, 17px); }
    .hdf-blog-home__hero-benefit strong { font-size: clamp(.48rem, .7vw, .76rem); }
    .hdf-blog-home__hero-benefit small { font-size: clamp(.42rem, .58vw, .64rem); }
}

@media (max-width: 900px) {
    .hdf-blog-home__hero-layout { grid-template-columns: minmax(0, 1fr) minmax(145px, 26%); }
    .hdf-blog-home__hero-main { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); padding: clamp(7px, 1.4vw, 12px); }
    .hdf-blog-home__hero h1 { font-size: clamp(18px, 3.45vw, var(--hdf-blog-home-hero-tablet-title-size, 38px)); }
    .hdf-blog-home__hero-visual { justify-self: end; }
    .hdf-blog-home__hero-side { grid-template-columns: 1fr; }
    .hdf-blog-home__hero-benefits { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .hdf-blog-home__hero { padding-top: 10px; }
    .hdf-blog-home__hero > .hdf-blog-home__inner { width: calc(100% - (var(--hdf-blog-main-mobile-padding-x, 12px) * 2)); }
    .hdf-blog-home__hero-layout {
        grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr);
        gap: clamp(3px, 1vw, 5px);
        padding: clamp(4px, 1.6vw, 7px);
    }
    .hdf-blog-home__hero-main {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
        gap: clamp(4px, 1.2vw, 7px);
        padding: clamp(5px, 1.8vw, 9px);
    }
    .hdf-blog-home__hero-content { gap: clamp(3px, 1vw, 6px); }
    .hdf-blog-home__hero-badge {
        gap: 2px;
        padding: 2px 4px;
        font-size: clamp(5px, 1.7vw, 8px);
        letter-spacing: .02em;
    }
    .hdf-blog-home__hero-badge .hdf-blog-icon { width: clamp(6px, 1.9vw, 9px); height: clamp(6px, 1.9vw, 9px); }
    .hdf-blog-home__hero h1 {
        font-size: clamp(11px, 3.8vw, var(--hdf-blog-home-hero-mobile-title-size, 30px));
        line-height: 1;
        letter-spacing: -.025em;
    }
    .hdf-blog-home__hero-line { white-space: nowrap; }
    .hdf-blog-home__hero-intro {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        font-size: clamp(5.5px, 1.75vw, 9px);
        line-height: 1.25;
    }
    .hdf-blog-home__hero-meta {
        width: fit-content;
        max-width: 100%;
        grid-template-columns: repeat(3, max-content);
        gap: 2px;
    }
    .hdf-blog-home__hero-meta > span {
        min-height: clamp(14px, 4.2vw, 19px);
        gap: 2px;
        padding-inline: clamp(2px, .8vw, 3px);
        border-radius: 5px;
        font-size: clamp(4.5px, 1.35vw, 6.5px);
    }
    .hdf-blog-home__hero-meta .hdf-blog-icon { width: clamp(5px, 1.55vw, 7px); height: clamp(5px, 1.55vw, 7px); }
    .hdf-blog-home__hero-actions {
        display: flex;
        grid-template-columns: none;
        flex-wrap: nowrap;
        gap: 2px;
    }
    .hdf-blog-home__button {
        width: auto;
        min-height: clamp(16px, 5vw, 23px);
        gap: 2px;
        padding-inline: clamp(3px, 1vw, 5px);
        border-radius: 5px;
        font-size: clamp(4.5px, 1.45vw, 7px);
    }
    .hdf-blog-home__button--primary { min-width: 0; }
    .hdf-blog-home__hero-visual {
        width: 100%;
        aspect-ratio: 16 / 9;
        justify-self: end;
        border-radius: clamp(6px, 2vw, 10px);
    }
    .hdf-blog-home__hero-side {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: clamp(3px, 1vw, 5px);
    }
    .hdf-blog-home__hero-story-card {
        grid-template-columns: minmax(22px, 35%) minmax(0, 1fr);
        gap: clamp(2px, .8vw, 4px);
        padding: clamp(2px, .8vw, 4px);
        border-radius: clamp(6px, 2vw, 10px);
    }
    .hdf-blog-home__hero-story-thumb { width: 100%; border-radius: clamp(4px, 1.4vw, 7px); }
    .hdf-blog-home__hero-story-body { gap: 1px; }
    .hdf-blog-home__hero-story-tag {
        min-height: clamp(10px, 3vw, 14px);
        padding-inline: clamp(2px, .7vw, 3px);
        font-size: clamp(3.8px, 1.15vw, 5.5px);
    }
    .hdf-blog-home__hero-story-card h2 { font-size: clamp(4.7px, 1.45vw, 7px); line-height: 1.12; }
    .hdf-blog-home__hero-story-meta { font-size: clamp(3.8px, 1.15vw, 5.5px); }
    .hdf-blog-home__hero-story-meta span { gap: 2px; }
    .hdf-blog-home__hero-story-meta .hdf-blog-icon { width: clamp(4px, 1.2vw, 6px); height: clamp(4px, 1.2vw, 6px); }
    .hdf-blog-home__hero-benefits { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .hdf-blog-home__hero-benefit {
        grid-template-columns: clamp(11px, 3.4vw, 16px) minmax(0, 1fr);
        gap: clamp(2px, .7vw, 3px);
        padding: clamp(4px, 1.2vw, 6px) clamp(3px, .9vw, 5px);
    }
    .hdf-blog-home__hero-benefit + .hdf-blog-home__hero-benefit { border-inline-start: 1px solid var(--hdf-blog-home-hero-border, #E5E7EB); border-top: 0; }
    .hdf-blog-home__hero-benefit-icon {
        width: clamp(11px, 3.4vw, 16px);
        height: clamp(11px, 3.4vw, 16px);
    }
    .hdf-blog-home__hero-benefit-icon .hdf-blog-icon { width: clamp(6px, 1.8vw, 9px); height: clamp(6px, 1.8vw, 9px); }
    .hdf-blog-home__hero-benefit strong { font-size: clamp(4px, 1.25vw, 6px); line-height: 1.05; }
    .hdf-blog-home__hero-benefit small { margin-top: 1px; font-size: clamp(3.4px, 1.05vw, 5px); line-height: 1.05; }
}