/**
 * File: assets/css/frontend/home/homepage-244.css
 * Purpose: Multi-view homepage (1.0.244, mockup v11) — one desktop
 *          template (>=80rem), one phone template (<=47.99rem, shared
 *          by Mobile and iPhone) and one tablet template
 *          (48rem-79.99rem). All three render in the DOM; media queries
 *          show exactly one. Flat HyperDAF design: no blur, no shadow,
 *          no decorative gradient. The single conic-gradient is the
 *          desktop showcase donut (a 72% hard-stop chart, exactly as
 *          the mockup file draws it), not a decorative gradient.
 * Scope: Homepage templates + homepage-scoped header variants only.
 *        The real header keeps rendering (its action-widget dialogs
 *        stay live for the AppBar Wishlist bridge); below 80rem its
 *        visible rows are collapsed on the homepage only.
 * Related PHP: src/Frontend/Home/HomeRenderer.php,
 *              src/Frontend/Home/HomeHeaderVariants.php,
 *              src/Frontend/Home/HomePresentation.php
 * Related JS: assets/js/frontend/home/homepage-244.js
 * Package: HyperDAF Pro
 */

/* ---------- Tokens + template visibility ----------
   Tokens live on body.home, NOT on .hdf-home244: the phone app bar,
   drawer and tablet header render OUTSIDE the <main
   class="hdf-home244"> wrapper (header hook, priority 20), so tokens
   defined only on that wrapper never reach them and every var() they
   use computes to transparent/inherited. body.home scopes the tokens
   to the homepage only — no other page changes. A tree grep confirms
   no --hd-* token exists anywhere else in the theme, so there is no
   collision with the design system (which uses the --hdf-* prefix). */
body.home{
    --hd-green:#79B530; --hd-green-dark:#466D1C; --hd-accent:#4F7A20; --hd-deep:#365614;
    --hd-canvas:#F6F7F9; --hd-ink:#111827; --hd-text:#1D2327; --hd-muted:#646970; --hd-focus:#2457D6;
    --hd-line:#E3E7EC; --hd-soft:#EFF4E6;
}
.hdf-home244{
    font-family:var(--hdf-typography-family-sans);
    background:#fff; color:var(--hd-text);
}
.hdf-home244 .hdf-home244-grn{ color:var(--hd-accent); }
.hdf-home244 :focus-visible,
.hdf-home244-phonebar :focus-visible,
.hdf-home244-tbheader :focus-visible{ outline:3px solid var(--hd-focus); outline-offset:2px; }
.hdf-home244-desktop,
.hdf-home244-phone,
.hdf-home244-tablet,
.hdf-home244-phonebar,
.hdf-home244-tbheader{ display:none; }

/* ---------- Real header: collapse visible rows on the homepage below 80rem ----------
   The header element itself stays in the DOM: its action-widget dialogs
   (#hdf-header-widget-wishlist etc.) must stay reachable, because the
   bottom AppBar Wishlist button opens the header's dialog through a
   programmatic click. visibility:hidden (not display:none) keeps the
   collapsed row's widgets openable; the widget itself is forced back to
   visible so an opened dialog paints. Top row + navigation row carry no
   dialogs and are display:none. */
@media (max-width:79.99rem){
    body.home #masthead .hdf-site-header__top-row{ display:none; }
    body.home #masthead .hdf-site-header__navigation-row{ display:none; }
    body.home #masthead .hdf-site-header__main-row{
        height:0; min-height:0; padding:0; border:0;
        overflow:visible; visibility:hidden;
    }
    body.home #masthead .hdf-site-header__main-row .hdf-header-action__widget{ visibility:visible; }
}

/* ---------- DESKTOP (>=80rem) ---------- */
@media (min-width:80rem){
    /* ---------- Real header on the homepage at desktop (1.0.245) ----------
       Mockup desktop header: the main-bar icon row is bell / wishlist /
       cart ONLY — no Shop, no Blog button (Blog stays as a nav-row text
       link). The three removed buttons stay in the DOM (display:none on
       their wrappers, so no markup is deleted — the compare system
       itself is untouched and keeps working site-wide; it is only not
       shown in this row). The remaining buttons take the mockup's
       geometry: 46px square, 10px radius, flat 1.5px border (the 1.0.238
       re-open's 44.4px raised 2-tone treatment is superseded here — the
       mockup wins for visuals on the homepage). The live hover (green
       fill + white icon) is kept: the mockup defines no hover state for
       its icon buttons. The logo and the search bar are the real
       components, unchanged. */
    body.home #masthead .hdf-header-action--compare,
    body.home #masthead .hdf-header-action--shop,
    body.home #masthead .hdf-header-action--blog{ display:none; }
    body.home #masthead .hdf-header-action__button{
        min-width:46px; min-height:46px; width:46px; height:46px;
        border-radius:10px; border:1.5px solid var(--hd-line);
    }
    body.home #masthead .hdf-header-action__button .hdf-icon,
    body.home #masthead .hdf-header-action__button .hdf-engine-icon{ width:20px; height:20px; }
    .hdf-home244-desktop{ display:block; }
    .hdf-home244-hero-frame{ background:#fff; padding:30px; border-top:1px solid var(--hd-line); }
    .hdf-home244-hero{
        background:var(--hd-canvas); border:1px solid var(--hd-line); border-radius:6px;
        padding:52px 28px 46px; position:relative; overflow:hidden;
    }
    .hdf-home244-hero::before{
        content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px;
        border-radius:50%; border:64px solid #E7F0D8;
    }
    .hdf-home244-hero::after{
        content:""; position:absolute; left:-90px; bottom:-150px; width:280px; height:280px;
        border-radius:50%; border:44px solid #EDF1F5;
    }
    .hdf-home244-hero-grid{
        position:relative; z-index:2; display:grid;
        /* 1.0.245 (item A): the showcase is exactly 50px wider than in
           1.0.244 at every desktop width. The 1.0.244 track pair
           (1.28fr / .72fr) makes the showcase 0.36 x (container - 36px
           gap) = 0.36C - 12.96px, an affine function of the container
           width C — so no pure fr pair adds a constant 50px at every
           width (a plain fr change is off by ~2.5px at one end; a
           fixed-px track is off by ~22px at 1280px). The showcase track
           is therefore minmax(0, calc(36% + 37.04px)): 36% of C plus
           37.04px = 50px - 0.36 x 36px, i.e. exactly (0.36C - 12.96px)
           + 50px. The copy column takes the rest as 1fr. The extra
           50px also gives the showcase foot ~50px more room, so the
           three chips (349.8px incl. gaps) fit the tags area in one
           row at every desktop width — verified in the browser fixture
           (1280/1440/1920), no flex-wrap change needed. */
        grid-template-columns:minmax(0,1fr) minmax(0,calc(36% + 37.04px)); gap:36px; align-items:center;
        max-width:1224px; margin:0 auto;
    }
    .hdf-home244-hero-grid > *{ min-width:0; }
    .hdf-home244-eyebrow{
        display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800;
        letter-spacing:.14em; color:var(--hd-accent); text-transform:uppercase; margin:0 0 16px;
    }
    .hdf-home244-eyebrow::before{ content:""; width:26px; height:3px; background:var(--hd-green); border-radius:2px; }
    .hdf-home244-hero-title{
        font-size:39px; line-height:1.16; letter-spacing:-.025em; font-weight:800;
        color:var(--hd-ink); margin:0 0 18px; overflow-wrap:break-word;
    }
    .hdf-home244-hero-title .hdf-home244-hline{ display:block; white-space:nowrap; }
    .hdf-home244-sub{ font-size:16.5px; line-height:1.62; color:#3D454E; margin:0 0 26px; max-width:640px; }
    .hdf-home244-cta-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
    .hdf-home244-btn-primary{
        background:var(--hd-green-dark); color:#fff; border:0; border-radius:12px;
        font-weight:700; font-size:15.5px; padding:14px 26px; display:inline-flex;
        align-items:center; gap:9px; min-height:52px; text-decoration:none;
    }
    .hdf-home244-btn-primary svg{ width:17px; height:17px; }
    .hdf-home244-btn-primary:hover{ background:var(--hd-deep); color:#fff; }
    .hdf-home244-btn-ghost{
        background:#fff; color:var(--hd-ink); border:1.5px solid #CBD2DA; border-radius:12px;
        font-weight:600; font-size:15.5px; padding:14px 22px; display:inline-flex;
        align-items:center; gap:9px; min-height:52px; text-decoration:none;
    }
    .hdf-home244-btn-ghost svg{ width:17px; height:17px; color:var(--hd-accent); }
    .hdf-home244-btn-ghost:hover{ border-color:var(--hd-accent); color:var(--hd-ink); }
    .hdf-home244-micro{ font-size:13px; color:var(--hd-muted); margin:14px 0 0; display:flex; align-items:center; gap:7px; }
    .hdf-home244-micro svg{ width:15px; height:15px; color:var(--hd-accent); flex:none; }
    .hdf-home244-trust{
        position:relative; z-index:2; max-width:1224px; margin:40px auto 0; background:#fff;
        border:1px solid var(--hd-line); border-radius:14px; display:grid; grid-template-columns:repeat(4,1fr);
    }
    .hdf-home244-trust > div{ padding:16px 20px; display:flex; gap:12px; align-items:center; }
    .hdf-home244-trust > div + div{ border-left:1px solid var(--hd-line); }
    .hdf-home244-trust svg{ width:24px; height:24px; color:var(--hd-accent); flex:none; }
    .hdf-home244-trust b{ display:block; font-size:14.5px; color:var(--hd-ink); line-height:1.25; }
    .hdf-home244-trust small{ font-size:12.5px; color:var(--hd-muted); }

    /* Desktop showcase — the ONLY panel on the right. */
    .hdf-home244-showcase{ min-height:0; position:relative; }
    .hdf-home244-sc{ background:#fff; border:1.5px solid var(--hd-line); border-radius:18px; overflow:hidden; }
    .hdf-home244-sc-bar{
        display:flex; align-items:center; gap:9px; padding:14px 18px;
        border-bottom:1px solid var(--hd-line); font-size:14px; font-weight:700; color:var(--hd-ink);
    }
    .hdf-home244-sc-bar svg{ width:18px; height:18px; color:var(--hd-accent); }
    .hdf-home244-sc-dots{ margin-left:auto; display:flex; gap:5px; }
    .hdf-home244-sc-dots i{ width:8px; height:8px; border-radius:50%; background:#D3D9DF; display:block; }
    .hdf-home244-sc-hero{ padding:26px 24px 20px; background:var(--hd-canvas); border-bottom:1px solid var(--hd-line); }
    .hdf-home244-sc-hero b{ font-size:32px; line-height:1.16; letter-spacing:-.02em; color:var(--hd-ink); display:block; }
    .hdf-home244-sc-bar-green{ height:8px; border-radius:4px; background:var(--hd-green); width:46%; margin:16px 0 9px; }
    .hdf-home244-sc-bar-grey{ height:8px; border-radius:4px; background:#E1E6EB; width:72%; }
    .hdf-home244-sc-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 18px 6px; }
    .hdf-home244-sc-tiles > div{ border:1.5px solid var(--hd-line); border-radius:12px; padding:13px 12px; display:flex; flex-direction:column; gap:7px; }
    .hdf-home244-sc-tiles svg{ width:20px; height:20px; color:var(--hd-accent); }
    .hdf-home244-sc-tiles b{ font-size:13.5px; color:var(--hd-ink); line-height:1.25; }
    .hdf-home244-sc-tiles small{ font-size:11.5px; color:var(--hd-muted); }
    .hdf-home244-sc-foot{ display:flex; align-items:center; gap:14px; padding:12px 18px 18px; }
    .hdf-home244-sc-tags{ display:flex; gap:8px; flex-wrap:wrap; flex:1; }
    .hdf-home244-sc-tags > span{
        font-size:12px; font-weight:700; color:var(--hd-deep); background:var(--hd-soft);
        border-radius:999px; padding:6px 12px; display:inline-flex; align-items:center; gap:6px;
    }
    .hdf-home244-sc-tags svg{ width:13px; height:13px; color:var(--hd-accent); }
    /* 72% donut: a hard-stop chart (mockup file), not a decorative gradient. */
    .hdf-home244-donut{
        width:46px; height:46px; border-radius:50%;
        background:conic-gradient(var(--hd-green) 0 72%, #E4E9DC 72% 100%);
        display:flex; align-items:center; justify-content:center; flex:none;
    }
    .hdf-home244-donut i{ width:27px; height:27px; border-radius:50%; background:#fff; display:block; }

    .hdf-home244-catstrip{ background:#fff; border-top:1px solid var(--hd-line); padding:20px 28px 24px; }
    .hdf-home244-inner{ max-width:1224px; margin:0 auto; }
    .hdf-home244-catstrip h3{ font-size:16px; margin:0 0 12px; color:var(--hd-ink); }
    .hdf-home244-catgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
    .hdf-home244-catgrid a{
        border:1.5px solid var(--hd-line); border-radius:12px; padding:14px 12px; text-decoration:none;
        color:var(--hd-ink); display:flex; flex-direction:column; gap:8px; font-weight:600; font-size:13.5px;
    }
    .hdf-home244-catgrid a svg{ width:20px; height:20px; color:var(--hd-accent); }
    .hdf-home244-catgrid a small{ color:var(--hd-muted); font-weight:500; font-size:12px; }

    .hdf-home244-mpband{ background:var(--hd-deep); color:#fff; padding:22px 28px; }
    .hdf-home244-mpband-in{ max-width:1224px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
    .hdf-home244-mpband-in > div{ display:flex; align-items:center; gap:13px; }
    .hdf-home244-mpband-in > div > b{ font-size:30px; font-weight:800; color:#B9D18F; line-height:1; flex:none; }
    .hdf-home244-mpband-in span{ font-size:13.5px; line-height:1.4; color:#EAF3DF; }
    .hdf-home244-mpband-in span b{ font-size:13.5px; color:#fff; display:block; line-height:1.3; }

    .hdf-home244-sec{ background:#fff; padding:38px 28px 42px; border-top:1px solid var(--hd-line); }
    .hdf-home244-sec--alt{ background:var(--hd-canvas); }
    .hdf-home244-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:20px; flex-wrap:wrap; }
    .hdf-home244-head h3{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--hd-ink); margin:0 0 5px; }
    .hdf-home244-head p{ margin:0; font-size:14.5px; color:var(--hd-muted); line-height:1.55; max-width:560px; }
    .hdf-home244-link{
        font-size:14px; font-weight:700; color:var(--hd-accent); text-decoration:none;
        display:inline-flex; align-items:center; gap:7px; white-space:nowrap; min-height:44px;
    }
    .hdf-home244-link svg{ width:16px; height:16px; }
    .hdf-home244-prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
    .hdf-home244-prod{ border:1.5px solid var(--hd-line); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
    .hdf-home244-pviz{ height:118px; background:var(--hd-soft); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--hd-line); }
    .hdf-home244-pviz svg{ width:46px; height:46px; color:var(--hd-accent); }
    .hdf-home244-pviz--dark{ background:#2E3B22; }
    .hdf-home244-pviz--dark svg{ color:#B9D18F; }
    /* 1.0.245 (item B): real banner images in the card visual. A
       screenshot fills the visual (cover); an icon sits inside it
       (contain, padded) so it never crops. Without a banner the card
       keeps the 46px icon visual above. */
    .hdf-home244-pviz__img{ display:block; width:100%; height:100%; object-fit:cover; }
    .hdf-home244-pviz__img--icon{ object-fit:contain; padding:18px; }
    /* 1.0.245 (item B): Image Converter's own full-width row below the
       grid — a horizontal card, banner left (~320px) and body right, so
       the row reads as a deliberate featured-tool row. The visual
       stretches to the card height (min 118px, the grid visual height)
       and its bottom border becomes the right border. */
    .hdf-home244-prod-row{ margin-top:16px; }
    .hdf-home244-prod--wide{ flex-direction:row; align-items:stretch; }
    .hdf-home244-prod--wide .hdf-home244-pviz--wide{
        flex:0 0 320px; width:320px; height:auto; min-height:118px;
        border-bottom:0; border-right:1px solid var(--hd-line);
    }
    .hdf-home244-prod--wide .hdf-home244-pbody{ justify-content:center; }
    .hdf-home244-pbody{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
    .hdf-home244-ptype{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--hd-accent); }
    .hdf-home244-prod h4{ font-size:17px; font-weight:700; color:var(--hd-ink); margin:0; }
    .hdf-home244-prod p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--hd-muted); flex:1; }
    .hdf-home244-plink{
        margin-top:8px; font-size:13.5px; font-weight:700; color:var(--hd-deep); text-decoration:none;
        display:inline-flex; align-items:center; gap:7px; min-height:36px;
    }
    .hdf-home244-plink svg{ width:15px; height:15px; color:var(--hd-accent); }

    .hdf-home244-col-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .hdf-home244-coltile{ background:#fff; border:1.5px solid var(--hd-line); border-radius:14px; padding:20px 18px; display:flex; flex-direction:column; gap:8px; }
    .hdf-home244-coltile svg{ width:26px; height:26px; color:var(--hd-accent); }
    .hdf-home244-coltile b{ font-size:16.5px; color:var(--hd-ink); }
    .hdf-home244-coltile p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--hd-muted); flex:1; }
    .hdf-home244-coltile a{ font-size:13.5px; font-weight:700; color:var(--hd-accent); text-decoration:none; min-height:36px; display:inline-flex; align-items:center; gap:6px; }
    .hdf-home244-coltile a svg{ width:15px; height:15px; }

    .hdf-home244-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
    .hdf-home244-step{ display:flex; gap:13px; align-items:flex-start; }
    .hdf-home244-sn{
        background:var(--hd-accent); color:#fff; font-weight:800; font-size:15px; width:34px; height:34px;
        border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;
    }
    .hdf-home244-step b{ display:block; font-size:15px; color:var(--hd-ink); margin-bottom:4px; }
    .hdf-home244-step p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--hd-muted); }

    .hdf-home244-res-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
    .hdf-home244-res-grid a{
        background:#fff; border:1.5px solid var(--hd-line); border-radius:12px; padding:16px;
        text-decoration:none; display:flex; gap:12px; align-items:center; min-height:44px;
    }
    .hdf-home244-res-grid svg{ width:22px; height:22px; color:var(--hd-accent); flex:none; }
    .hdf-home244-res-grid b{ display:block; font-size:14.5px; color:var(--hd-ink); }
    .hdf-home244-res-grid small{ font-size:12.5px; color:var(--hd-muted); }

    /* 1.0.246: "Latest articles" row — the 3 newest posts, in the
       "Learn & grow" section above the category tiles. Same flat
       card language as the featured grid (1.5px border, 14px radius,
       118px visual); titles wrap, never clip, so the exact post title
       always shows in full. */
    .hdf-home244-latest-title{ font-size:16px; font-weight:700; color:var(--hd-ink); margin:0 0 12px; }
    .hdf-home244-latest-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
    .hdf-home244-latest{ border:1.5px solid var(--hd-line); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; min-width:0; }
    .hdf-home244-latest-viz{ height:118px; background:var(--hd-soft); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--hd-line); }
    .hdf-home244-latest-viz svg{ width:46px; height:46px; color:var(--hd-accent); }
    .hdf-home244-latest-viz img{ display:block; width:100%; height:100%; object-fit:cover; }
    .hdf-home244-latest-body{ padding:14px 18px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
    .hdf-home244-latest-body time{ font-size:12.5px; color:var(--hd-muted); }
    .hdf-home244-latest-body h4{ font-size:16.5px; font-weight:700; color:var(--hd-ink); margin:0; line-height:1.35; overflow-wrap:break-word; }
    .hdf-home244-latest-body h4 a{ color:inherit; text-decoration:none; }
    .hdf-home244-latest-body h4 a:hover{ color:var(--hd-accent); }

    .hdf-home244-finalcta{ background:var(--hd-canvas); border-top:1px solid var(--hd-line); padding:44px 28px 48px; text-align:center; }
    .hdf-home244-finalcta h3{ font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--hd-ink); margin:0 0 8px; }
    .hdf-home244-finalcta p{ margin:0 auto 22px; font-size:15px; line-height:1.6; color:var(--hd-muted); max-width:520px; }
    .hdf-home244-finalcta .hdf-home244-cta-row{ justify-content:center; }
}

/* ---------- PHONE (<=47.99rem) — app bar, search, chips, hero, sections, drawer ---------- */
@media (max-width:47.99rem){
    .hdf-home244-phone{ display:block; }
    .hdf-home244-phonebar{ display:block; background:#fff; color:var(--hd-text); }
    .hdf-home244-appbar{ display:flex; align-items:center; gap:4px; padding:8px 8px 4px 8px; min-height:64px; }
    .hdf-home244-menubtn{
        width:48px; height:48px; min-height:48px; flex:none; border:0; background:transparent;
        border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--hd-ink); padding:0; margin-right:2px;
    }
    .hdf-home244-menubtn svg{ width:24px; height:24px; }
    .hdf-home244-menubtn:active{ background:#EDF2DF; }
    .hdf-home244-brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--hd-ink); text-decoration:none; flex:none; }
    .hdf-home244-brand em{ font-style:normal; color:var(--hd-accent); }
    .hdf-home244-brand__logo{ display:block; width:auto; max-width:132px; height:auto; max-height:27px; object-fit:contain; }
    .hdf-home244-brand__name{ white-space:nowrap; }
    .hdf-home244-appbar__sp{ flex:1; }
    .hdf-home244-icobtn{
        width:48px; height:48px; min-height:48px; border:0; background:transparent; border-radius:50%;
        display:flex; align-items:center; justify-content:center; color:var(--hd-ink); padding:0; text-decoration:none; flex:none;
    }
    .hdf-home244-icobtn svg{ width:23px; height:23px; }

    .hdf-home244-search{
        margin:4px 16px 0; height:56px; border-radius:999px; background:#EDF2DF;
        display:flex; align-items:center; gap:12px; padding:0 18px; color:#7A8288; font-size:14.5px;
    }
    .hdf-home244-search__icon{ display:flex; flex:none; color:var(--hd-deep); }
    .hdf-home244-search__icon svg{ width:20px; height:20px; }
    .hdf-home244-search__input{
        flex:1; min-width:0; border:0; outline:0; background:transparent; font:inherit;
        font-size:14.5px; color:var(--hd-text); padding:0;
    }
    .hdf-home244-search__input::placeholder{ color:#7A8288; }
    .hdf-home244-search__tune{ margin-left:auto; color:var(--hd-muted); display:flex; flex:none; text-decoration:none; }
    .hdf-home244-search__tune svg{ width:20px; height:20px; }

    .hdf-home244-chips{ display:flex; gap:5px; padding:12px 10px 2px; flex-wrap:nowrap; align-items:center; }
    .hdf-home244-chip{
        flex:0 1 auto; min-width:0; height:32px; padding:0 9px; border:1px solid #B9C0AC; border-radius:999px;
        display:inline-flex; align-items:center; justify-content:center; gap:4px; font-size:11.5px;
        letter-spacing:-.01em; font-weight:500; color:var(--hd-text); text-decoration:none; background:#fff; white-space:nowrap;
    }
    .hdf-home244-chip svg{ width:12px; height:12px; flex:none; }
    .hdf-home244-chip--on{ background:var(--hd-green); border-color:var(--hd-green); color:#fff; font-weight:600; }
    .hdf-home244-chip--see-more{ flex:none; background:#fff; border-color:var(--hd-accent); color:var(--hd-deep); font-weight:700; font-size:12px; padding:0 10px; font-family:inherit; cursor:pointer; }
    .hdf-home244-chip--see-more svg{ width:13px; height:13px; color:var(--hd-accent); }

    .hdf-home244-ph-hero{ margin-top:14px; width:100%; background:#F1F5E7; border-top:1px solid #DFE5D2; border-bottom:1px solid #DFE5D2; padding:14px 16px; }
    .hdf-home244-ph-kick{ font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--hd-accent); margin:0 0 8px; }
    .hdf-home244-ph-row{ display:flex; gap:12px; align-items:center; }
    .hdf-home244-ph-text{ flex:1; min-width:0; }
    .hdf-home244-ph-title{ font-size:19px; line-height:1.26; font-weight:700; letter-spacing:-.01em; color:var(--hd-ink); margin:0; }
    .hdf-home244-ph-sub{ font-size:12.5px; line-height:1.45; color:#3D454E; margin:6px 0 0; }
    .hdf-home244-ph-viz{ width:104px; flex:none; background:#fff; border:1px solid #DFE5D2; border-radius:10px; padding:9px 10px; }
    .hdf-home244-ph-viz-dots{ display:flex; gap:4px; margin-bottom:7px; }
    .hdf-home244-ph-viz-dots i{ width:6px; height:6px; border-radius:50%; background:#D3D9DF; display:block; }
    .hdf-home244-ph-viz-lbl{ font-size:8.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--hd-accent); margin:0 0 3px; }
    .hdf-home244-ph-viz b{ font-size:12px; line-height:1.3; color:var(--hd-ink); display:block; }
    .hdf-home244-ph-viz-bar{ height:5px; border-radius:3px; background:var(--hd-green); width:54%; margin:8px 0 5px; }
    .hdf-home244-ph-viz-bar2{ height:5px; border-radius:3px; background:#E4E9DC; width:80%; margin:0; }
    .hdf-home244-ph-viz-tags{ font-size:9.5px; color:var(--hd-muted); margin:8px 0 0; line-height:1.4; }
    .hdf-home244-ph-btns{ display:flex; gap:8px; margin-top:12px; }
    .hdf-home244-ph-btn-p{
        flex:1; height:40px; min-height:40px; border:0; border-radius:999px; background:var(--hd-green-dark);
        color:#fff; font-weight:600; font-size:13px; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none;
    }
    .hdf-home244-ph-btn-p svg{ width:14px; height:14px; }
    .hdf-home244-ph-btn-o{
        flex:1; height:40px; min-height:40px; border:1px solid var(--hd-accent); border-radius:999px;
        background:transparent; color:var(--hd-deep); font-weight:600; font-size:13px;
        display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
    }

    .hdf-home244-ph-sec{ padding:24px 16px 0; }
    .hdf-home244-ph-sec-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
    .hdf-home244-ph-sec-head h3{ font-size:16px; font-weight:600; color:var(--hd-ink); margin:0; }
    .hdf-home244-ph-sec-head a{ font-size:13.5px; font-weight:600; color:var(--hd-accent); text-decoration:none; }
    .hdf-home244-ph-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .hdf-home244-ph-card{ background:#F7F8F3; border-radius:12px; overflow:hidden; text-decoration:none; display:block; }
    .hdf-home244-ph-pv{ height:82px; background:var(--hd-soft); display:flex; align-items:center; justify-content:center; }
    .hdf-home244-ph-pv svg{ width:34px; height:34px; color:var(--hd-accent); }
    .hdf-home244-ph-cb{ padding:12px 14px 14px; display:block; }
    .hdf-home244-ph-cb b{ display:block; font-size:14.5px; font-weight:600; color:var(--hd-ink); line-height:1.3; }
    .hdf-home244-ph-cb small{ font-size:12px; color:var(--hd-muted); }
    .hdf-home244-ph-list{ display:flex; flex-direction:column; gap:8px; }
    .hdf-home244-ph-item{ display:flex; align-items:center; gap:12px; background:#F7F8F3; border-radius:12px; padding:10px 12px; min-height:64px; }
    .hdf-home244-ph-tile{ width:40px; height:40px; flex:none; border-radius:10px; background:var(--hd-soft); display:flex; align-items:center; justify-content:center; }
    .hdf-home244-ph-tile svg{ width:21px; height:21px; color:var(--hd-accent); }
    .hdf-home244-ph-tx{ flex:1; min-width:0; }
    .hdf-home244-ph-tx b{ display:block; font-size:14px; font-weight:600; color:var(--hd-ink); line-height:1.25; }
    .hdf-home244-ph-tx small{ display:block; font-size:12px; color:var(--hd-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
    .hdf-home244-ph-act{ flex:none; font-size:13px; font-weight:700; color:var(--hd-deep); background:#EAF3DF; border-radius:999px; padding:8px 14px; text-decoration:none; }

    /* 1.0.246: "Latest articles" rows — same list language as the
       phone tool rows; the title is the link and wraps in full (no
       clamp, no ellipsis on the title), the thumb is a 40px cover
       crop of the real featured image. min-width:0 + break-word keep
       a long title inside the 320px row with no horizontal overflow. */
    .hdf-home244-ph-tx b a{ color:inherit; text-decoration:none; overflow-wrap:break-word; }
    .hdf-home244-ph-tile--thumb{ overflow:hidden; padding:0; }
    .hdf-home244-ph-tile--thumb img{ display:block; width:100%; height:100%; object-fit:cover; }

    /* Offcanvas drawer — fixed to the viewport (the mockup positions it
       inside the device frame; on the real site the frame does not exist).
       z-index 900 is the theme token scale's modal level
       (overlay 800 = bottom AppBar, modal 900, toast 1000): the drawer
       is a modal overlay, so it must paint above the AppBar — at 800
       both layers tied and the later-in-DOM AppBar covered the drawer
       footer. It stays below toasts. */
    .hdf-home244-oc{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:900; visibility:hidden; pointer-events:none; }
    .hdf-home244-oc-scrim{ position:absolute; inset:0; background:rgba(17,24,39,.46); opacity:0; transition:opacity .26s ease; }
    .hdf-home244-oc-panel{
        position:absolute; top:0; bottom:0; left:0; width:308px; max-width:86%; background:#fff;
        border-right:1px solid var(--hd-line); border-radius:0 18px 18px 0; transform:translateX(-104%);
        transition:transform .3s cubic-bezier(.2,.8,.25,1); display:flex; flex-direction:column; overflow:hidden;
    }
    [data-hdf-home244-phone].hdf-home244-drawer-open .hdf-home244-oc{ visibility:visible; pointer-events:auto; }
    [data-hdf-home244-phone].hdf-home244-drawer-open .hdf-home244-oc-scrim{ opacity:1; }
    [data-hdf-home244-phone].hdf-home244-drawer-open .hdf-home244-oc-panel{ transform:translateX(0); }
    .hdf-home244-oc-head{ display:flex; align-items:center; gap:9px; padding:18px 10px 14px 20px; border-bottom:1px solid var(--hd-line); }
    .hdf-home244-oc-head .hdf-home244-brand{ font-size:19px; }
    .hdf-home244-oc-head .hdf-home244-brand__logo{ max-height:26px; }
    .hdf-home244-oc-head__sp{ flex:1; }
    .hdf-home244-oc-close{
        width:44px; height:44px; min-height:44px; border:0; background:transparent; border-radius:50%;
        display:flex; align-items:center; justify-content:center; color:var(--hd-ink); padding:0; flex:none;
    }
    .hdf-home244-oc-close svg{ width:22px; height:22px; }
    .hdf-home244-oc-body{ flex:1; overflow-y:auto; padding:8px 12px 16px; }
    .hdf-home244-oc-label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hd-muted); margin:16px 8px 6px; }
    .hdf-home244-oc-label:first-child{ margin-top:8px; }
    .hdf-home244-oc-item{
        display:flex; align-items:center; gap:13px; min-height:48px; padding:6px 10px;
        border-radius:999px; text-decoration:none; color:var(--hd-text); font-size:14.5px; font-weight:500;
    }
    .hdf-home244-oc-item svg{ width:22px; height:22px; flex:none; color:#5B6472; }
    .hdf-home244-oc-item .hdf-home244-oc-chev{ width:17px; height:17px; margin-left:auto; color:#9AA1AB; }
    .hdf-home244-oc-item--on{ background:#EAF3DF; color:var(--hd-deep); font-weight:700; }
    .hdf-home244-oc-item--on svg{ color:var(--hd-accent); }
    .hdf-home244-oc-div{ height:1px; background:var(--hd-line); margin:14px 8px 2px; }
    .hdf-home244-oc-foot{ border-top:1px solid var(--hd-line); padding:14px 20px 18px; }
    .hdf-home244-oc-cta{
        width:100%; height:46px; min-height:46px; border:0; border-radius:999px; background:var(--hd-green-dark);
        color:#fff; font-weight:600; font-size:14.5px; display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
    }
    .hdf-home244-oc-cta svg{ width:16px; height:16px; }
    .hdf-home244-oc-foot p{ margin:9px 0 0; font-size:11.5px; color:var(--hd-muted); text-align:center; }
}

/* ---------- TABLET (48rem-79.99rem) — header, hero, chips, grids, full-width sections ---------- */
@media (min-width:48rem) and (max-width:79.99rem){
    .hdf-home244-tablet{ display:block; }
    .hdf-home244-tbheader{ display:block; background:#fff; border-bottom:1px solid var(--hd-line); color:var(--hd-text); }
    .hdf-home244-tb-top{ display:flex; align-items:center; gap:20px; padding:14px 24px 2px; }
    .hdf-home244-tb-top .hdf-home244-brand{ font-size:23px; }
    .hdf-home244-tb-top .hdf-home244-brand__logo{ max-height:34px; max-width:150px; }
    .hdf-home244-tbheader .hdf-home244-search{
        flex:1; max-width:560px; margin:0 auto; height:52px; border-radius:999px; background:#EDF2DF;
        display:flex; align-items:center; gap:12px; padding:0 18px; color:#7A8288; font-size:14.5px;
    }
    .hdf-home244-tb-icons{ display:flex; gap:4px; flex:none; margin-left:auto; }
    .hdf-home244-tb-nav{ display:flex; align-items:center; gap:4px; padding:4px 24px 12px; flex-wrap:wrap; }
    .hdf-home244-tb-nav-item{
        display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 16px;
        border-radius:999px; font-size:14.5px; font-weight:500; color:var(--hd-text); text-decoration:none;
        border:0; background:transparent; font-family:inherit; cursor:pointer;
    }
    .hdf-home244-tb-nav-item svg{ width:20px; height:20px; color:#5B6472; flex:none; }
    .hdf-home244-tb-nav-item--on{ background:var(--hd-soft); color:var(--hd-deep); font-weight:700; }
    .hdf-home244-tb-nav-item--on svg{ color:var(--hd-accent); }

    .hdf-home244-tb-body{ padding:22px 24px 30px; background:#FDFEFB; }
    .hdf-home244-tb-hero{
        display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:26px; align-items:center;
        background:#F1F5E7; border-radius:16px; padding:24px 26px;
    }
    .hdf-home244-tb-kick{ font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--hd-accent); margin:0 0 12px; }
    .hdf-home244-tb-title{ font-size:31px; line-height:1.24; font-weight:700; letter-spacing:-.015em; color:var(--hd-ink); margin:0 0 12px; }
    .hdf-home244-tb-sub{ font-size:15px; line-height:1.55; color:#3D454E; margin:0; }
    .hdf-home244-tb-btns{ display:flex; gap:10px; margin-top:20px; }
    .hdf-home244-tb-btn-p{
        height:48px; padding:0 26px; border:0; border-radius:999px; background:var(--hd-green-dark);
        color:#fff; font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px; min-height:48px; text-decoration:none;
    }
    .hdf-home244-tb-btn-p svg{ width:17px; height:17px; }
    .hdf-home244-tb-btn-o{
        height:48px; padding:0 24px; border:1px solid var(--hd-accent); border-radius:999px; background:transparent;
        color:var(--hd-deep); font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:8px; min-height:48px; text-decoration:none;
    }
    .hdf-home244-tb-btn-o svg{ width:17px; height:17px; }
    .hdf-home244-tb-show{ background:#fff; border:1px solid #DFE5D2; border-radius:16px; padding:20px; }
    .hdf-home244-tb-show-lbl{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--hd-accent); margin:0 0 5px; }
    .hdf-home244-tb-show-ttl{ font-size:22px; font-weight:800; letter-spacing:-.015em; color:var(--hd-ink); margin:0; }
    .hdf-home244-tb-show-bar{ height:6px; border-radius:3px; background:var(--hd-green); width:44%; margin:13px 0 6px; }
    .hdf-home244-tb-show-bar2{ height:6px; border-radius:3px; background:#E4E9DC; width:70%; }
    .hdf-home244-tb-suite{ border-top:1px solid var(--hd-line); margin-top:14px; padding-top:12px; }
    .hdf-home244-tb-suite p{ font-size:12.5px; font-weight:700; color:var(--hd-ink); margin:0 0 8px; }
    .hdf-home244-tb-suite ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:7px 12px; }
    .hdf-home244-tb-suite li{ font-size:13px; color:#3D454E; display:flex; align-items:center; gap:6px; }
    .hdf-home244-tb-suite li svg{ width:13px; height:13px; color:var(--hd-accent); flex:none; }
    .hdf-home244-tb-duo{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
    .hdf-home244-tb-duo > div{ background:var(--hd-canvas); border:1px solid var(--hd-line); border-radius:8px; padding:10px 12px; }
    .hdf-home244-tb-duo small{ display:block; font-size:10.5px; color:var(--hd-muted); }
    .hdf-home244-tb-duo b{ font-size:13.5px; color:var(--hd-ink); }

    .hdf-home244-tb-chips{ display:flex; gap:8px; padding:18px 2px 0; overflow:hidden; }
    .hdf-home244-tb-chip{
        flex:none; height:36px; padding:0 18px; border:1px solid #B9C0AC; border-radius:999px;
        display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500;
        color:var(--hd-text); text-decoration:none; background:#fff;
    }
    .hdf-home244-tb-chip svg{ width:14px; height:14px; }
    .hdf-home244-tb-chip--on{ background:var(--hd-green); border-color:var(--hd-green); color:#fff; font-weight:600; }

    .hdf-home244-tb-sec-head{ display:flex; align-items:center; justify-content:space-between; margin:24px 0 12px; }
    .hdf-home244-tb-sec-head h3{ font-size:18px; font-weight:600; color:var(--hd-ink); margin:0; }
    .hdf-home244-tb-sec-head a{ font-size:14px; font-weight:600; color:var(--hd-accent); text-decoration:none; }
    .hdf-home244-tb-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
    .hdf-home244-tb-card{ background:#F7F8F3; border-radius:12px; overflow:hidden; text-decoration:none; display:block; }
    .hdf-home244-tb-pv{ height:88px; background:var(--hd-soft); display:flex; align-items:center; justify-content:center; }
    .hdf-home244-tb-pv svg{ width:36px; height:36px; color:var(--hd-accent); }
    .hdf-home244-tb-pv--dark{ background:#2E3B22; }
    .hdf-home244-tb-pv--dark svg{ color:#B9D18F; }
    .hdf-home244-tb-cb{ padding:12px 14px 14px; display:block; }
    .hdf-home244-tb-cb b{ display:block; font-size:15px; font-weight:600; color:var(--hd-ink); line-height:1.3; }
    .hdf-home244-tb-cb small{ font-size:12.5px; color:var(--hd-muted); }

    .hdf-home244-tb-xgrid{ display:grid; gap:14px; }
    /* minmax(0,1fr): a bare 1fr track lets a grid item's automatic
       minimum size (the long nowrap small text) force the column wider
       than the grid — measured 1028px scrollWidth at 768px. The 0
       minimum lets the track hold its share; the item + text rules
       below keep the content inside it. */
    .hdf-home244-tb-xgrid--2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .hdf-home244-tb-xgrid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
    .hdf-home244-tb-item{ display:flex; gap:12px; align-items:center; background:#F7F8F3; border-radius:12px; padding:14px 16px; min-width:0; }
    .hdf-home244-tb-tile{ width:34px; height:34px; border-radius:9px; background:var(--hd-soft); display:flex; align-items:center; justify-content:center; flex:none; }
    .hdf-home244-tb-tile svg{ width:18px; height:18px; color:var(--hd-accent); }
    .hdf-home244-tb-tx{ flex:1; min-width:0; }
    .hdf-home244-tb-tx b{ display:block; font-size:14.5px; font-weight:600; color:var(--hd-ink); line-height:1.3; }
    .hdf-home244-tb-tx small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; font-size:12.5px; line-height:1.45; color:var(--hd-muted); margin-top:2px; }
    .hdf-home244-tb-act{ flex:none; background:var(--hd-soft); border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:700; color:var(--hd-deep); text-decoration:none; }

    /* 1.0.246: "Latest articles" grid — same card language as the
       tablet featured grid (88px visual, 12px radius); titles wrap
       in full, never clip. */
    .hdf-home244-tb-latest-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .hdf-home244-tb-latest{ background:#F7F8F3; border-radius:12px; overflow:hidden; display:block; min-width:0; }
    .hdf-home244-tb-latest-viz{ height:88px; background:var(--hd-soft); display:flex; align-items:center; justify-content:center; }
    .hdf-home244-tb-latest-viz svg{ width:36px; height:36px; color:var(--hd-accent); }
    .hdf-home244-tb-latest-viz img{ display:block; width:100%; height:100%; object-fit:cover; }
    .hdf-home244-tb-latest-cb{ padding:12px 14px 14px; display:block; }
    .hdf-home244-tb-latest-cb b{ display:block; font-size:15px; font-weight:600; color:var(--hd-ink); line-height:1.3; overflow-wrap:break-word; }
    .hdf-home244-tb-latest-cb b a{ color:inherit; text-decoration:none; }
    .hdf-home244-tb-latest-cb small{ font-size:12.5px; color:var(--hd-muted); }
}

@media (prefers-reduced-motion: reduce){
    .hdf-home244-oc-panel, .hdf-home244-oc-scrim{ transition:none; }
}