/*
Theme Name: MyHotips Theme
Theme URI: https://myhotips.com
Author: Clare
Version: 1.2-clean-rebuild-working
Text Domain: myhotips-theme

MYHOTIPS MASTER STYLESHEET — CLEAN REBUILD WORKING FILE

Purpose:
- Rebuild the stylesheet as one ordered, non-duplicated master file.
- Keep tokens first.
- Keep homepage hero, featured rail, sticky/docked rail, focus section and Kit form separate.
- Avoid patch-style duplicate overrides.
- Preserve the current MyHotips visual direction.

Current status:
Up to Date
*/

/* =========================================================
   01. ROOT TOKENS
   ========================================================= */

:root{

  --login-bg-image: url("https://myhotips.com/wp-content/uploads/2026/04/fallback-imageLogo.png");
  --login-bg-position: center right;
  --login-bg-size: cover;

  --login-ink: var(--color-area-hub-money-text, var(--color-dark));
  --login-ink-muted: var(--color-area-hub-money-text-muted, var(--color-dark-muted));
  --login-accent: var(--color-tech-accent);
  --login-accent-muted: var(--color-tech-accent-muted);

  --login-page-overlay-a: color-mix(
    in srgb,
    var(--color-tech-soft-muted) 72%,
    var(--color-wellness-soft) 28%
  );

  --login-page-overlay-b: color-mix(
    in srgb,
    var(--color-area-hub-money-page-bg, var(--color-surface-muted)) 78%,
    var(--color-wellness-soft) 22%
  );

  --login-form-bg: color-mix(in srgb, var(--color-surface) 91%, transparent);
  --login-form-border: color-mix(
    in srgb,
    var(--border-color-light) 72%,
    var(--login-accent) 28%
  );
  --login-form-shadow: var(--shadow-lg);
  --login-form-radius: var(--radius-lg);

  --login-label-color: var(--login-ink);

  --login-input-bg: color-mix(
    in srgb,
    var(--color-surface) 86%,
    var(--color-tech-soft) 14%
  );

  --login-input-border: color-mix(
    in srgb,
    var(--border-color-light) 82%,
    var(--login-accent) 18%
  );

  --login-input-text: var(--color-text);
  --login-focus-border: var(--login-accent);

  --login-focus-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--login-accent) 24%,
    transparent
  );

  --login-control-bg: color-mix(in srgb, var(--color-dark) 10%, transparent);
  --login-control-bg-hover: color-mix(in srgb, var(--login-accent) 28%, transparent);
  --login-control-text: var(--login-ink);

  --login-warning-bg: color-mix(in srgb, var(--login-accent-muted) 26%, transparent);
  --login-warning-text: var(--login-ink);

  --login-button-bg: var(--color-dark);
  --login-button-bg-hover: var(--login-accent);
  --login-button-text: var(--color-white);
  --login-button-text-hover: var(--color-dark);
  --login-button-border: var(--color-dark);
  --login-button-border-hover: var(--login-accent);
  /* -------------------------
     BRAND PALETTES
     ------------------------- */
  --color-tech-accent: #d4af37;
  --color-tech-accent-muted: #f4dc82;
  --color-tech-soft: #e8eef7;
  --color-tech-soft-muted: #f4f7fb;

/* -------------------------
   WELLNESS / SAGE BRAND PALETTE
   Aligned to the preferred area hub greens
   ------------------------- */

--color-wellness-dark: #587760;
--color-wellness-dark-muted: #78967f;

--color-wellness-text: #4e6453;
--color-wellness-text-soft: #6b8270;
--color-wellness-black-soft: #3f5645;

--color-wellness-soft: #eef4ef;
--color-wellness-soft-muted: rgb(180, 163, 148);
--color-wellness-accent-soft: #ead9c9;

--color-wellness-accent: #c9826b;
--color-wellness-accent-hover: #ead9c9;

--color-wellness-line: rgba(88, 119, 96, 0.20);
--color-wellness-shadow: rgba(88, 119, 96, 0.12);

/* legacy compatibility aliases */
--color-wellness-neutral: var(--color-wellness-text);
--color-wellness-neutral-muted: var(--color-wellness-soft-muted);

--color-wellness-olive: var(--color-wellness-accent);
--color-wellness-olive-dark: var(--color-wellness-text);
--color-wellness-olive-soft: var(--color-wellness-accent-soft);

--color-wellness-grey-olive: var(--color-wellness-dark-muted);
--color-wellness-grey-olive-dark: var(--color-wellness-text);

--color-wellness-accent-muted: var(--color-wellness-accent-soft);

/* Wellness warm hero accent aliases */
--color-wellness-terracotta: var(--color-wellness-accent);
--color-wellness-warm-accent: var(--color-wellness-accent);

/* -------------------------
   SECTION PALETTE TOKENS
   Single source of truth for plugin/component mapping
   ------------------------- */

--color-section-money-main: var(--color-dark);
--color-section-money-accent: var(--color-tech-accent);
--color-section-money-muted: var(--color-dark-muted);
--color-section-money-dark: var(--color-dark);
--color-section-money-dark-muted: var(--color-dark-muted);
--color-section-money-soft: var(--color-tech-soft);
--color-section-money-soft-alt: var(--color-tech-soft-muted);
--color-section-money-soft-muted: var(--color-tech-soft-muted);
--color-section-money-tint: color-mix(in srgb, var(--color-tech-accent) 10%, transparent);

--color-section-wellness-main: var(--color-wellness-text);
--color-section-wellness-accent: var(--color-wellness-accent);
--color-section-wellness-muted: var(--color-wellness-text-soft);
--color-section-wellness-dark: var(--color-wellness-dark);
--color-section-wellness-dark-muted: var(--color-wellness-dark-muted);
--color-section-wellness-soft: var(--color-wellness-accent-soft);
--color-section-wellness-soft-alt: var(--color-wellness-soft);
--color-section-wellness-soft-muted: var(--color-wellness-soft-muted);
--color-section-wellness-tint: color-mix(in srgb, var(--color-wellness-accent) 14%, transparent);

--border-color-money-medium: var(--border-color-strong);
--border-color-money-light: var(--border-color-soft);

--border-color-wellness-medium: var(--color-wellness-line);
--border-color-wellness-light: color-mix(in srgb, var(--color-wellness-line) 70%, transparent);

--border-subtle-money: var(--border-width-thin) solid var(--border-color-money-light);
--border-subtle-wellness: var(--border-width-thin) solid var(--border-color-wellness-light);

--color-terracotta: var(--color-wellness-accent);
--color-terracotta-dark: color-mix(in srgb, var(--color-wellness-accent) 72%, var(--color-dark) 28%);
--color-terracotta-soft: var(--color-wellness-accent-soft);
--color-terracotta-muted: color-mix(in srgb, var(--color-wellness-accent) 58%, var(--color-white) 42%);
--color-terracotta-line: color-mix(in srgb, var(--color-wellness-accent) 24%, transparent);
--color-terracotta-shadow: color-mix(in srgb, var(--color-wellness-accent) 12%, transparent);

--color-terracotta-accent: var(--color-terracotta);
--color-terracotta-accent-muted: var(--color-terracotta-soft);

/* -------------------------
   AREA HUB COLOUR TOKENS
   Must stay inside the main :root block.
   ------------------------- */

  --color-area-hub-money-page-bg: var(--color-surface-muted);
  --color-area-hub-money-band-a: var(--color-section-money-dark, var(--color-dark));
  --color-area-hub-money-band-b: var(--color-section-money-dark-muted, var(--color-dark-muted));
  --color-area-hub-money-card-bg: var(--color-surface);
  --color-area-hub-money-panel-bg: var(--color-surface);
  --color-area-hub-money-panel-soft-bg: var(--color-section-money-soft-muted, var(--color-surface-muted));
  --color-area-hub-money-pill-bg: var(--color-section-money-soft, var(--button-blue-soft-bg));
  --color-area-hub-money-icon-bg: var(--color-section-money-soft, var(--button-blue-soft-bg));
  --color-area-hub-money-text: var(--color-section-money-dark, var(--color-dark));
  --color-area-hub-money-text-muted: var(--color-section-money-dark-muted, var(--color-dark-muted));
  --color-area-hub-money-border: var(--border-color-money-light, var(--border-color-light));

--color-area-hub-wellness-page-bg: var(--color-wellness-soft);
--color-area-hub-wellness-band-a: var(--color-wellness-dark);
--color-area-hub-wellness-band-b: var(--color-wellness-dark-muted);
--color-area-hub-wellness-card-bg: var(--color-surface);
--color-area-hub-wellness-panel-bg: var(--color-surface);
--color-area-hub-wellness-panel-soft-bg: var(--color-wellness-soft-muted);
--color-area-hub-wellness-pill-bg: var(--color-wellness-accent-soft);
--color-area-hub-wellness-icon-bg: var(--color-wellness-accent-soft);
--color-area-hub-wellness-text: var(--color-wellness-text);
--color-area-hub-wellness-text-muted: var(--color-wellness-text-soft);
--color-area-hub-wellness-border: var(--color-wellness-line);

  /* -------------------------
     CORE COLOURS
     ------------------------- */
  --color-dark: #2e3b55;
  --color-dark-muted: #677288;
  --color-neutral: #6a7788;
  --color-neutral-muted: #d7dbe3;
  --color-white: #ffffff;
  --color-black-soft: #1f2937;

  --color-success: #1f6b45;
  --color-warning: #c17b00;
  --color-warning-muted: #8a6a12;
  --color-danger: #9f1d1d;
  --color-danger-muted: #8b2f2f;

  /* -------------------------
     ACTIVE BRAND MAPPING
     ------------------------- */
  --color-accent: var(--color-tech-accent);
  --color-accent-muted: var(--color-tech-accent-muted);
  --color-soft: var(--color-tech-soft);
  --color-soft-muted: var(--color-tech-soft-muted);

  /* -------------------------
     ROLE COLOURS
     ------------------------- */
  --color-bg: var(--color-soft-muted);
  --color-surface: var(--color-white);
  --color-surface-soft: var(--color-soft);
  --color-surface-muted: var(--color-soft-muted);

  --color-text: var(--color-dark);
  --color-text-muted: var(--color-neutral);
  --color-text-soft: var(--color-neutral-muted);
  --color-heading: var(--color-dark);
  --color-link: var(--color-dark);
  --color-link-hover: var(--color-accent);

  --color-glass-light-strong: rgba(255,255,255,0.92);
  --color-glass-light: rgba(255,255,255,0.84);
  --color-glass-light-muted: rgba(255,255,255,0.72);
  --color-glass-dark: rgba(46,59,85,0.38);
  --color-glass-dark-strong: rgba(46,59,85,0.54);

  /* -------------------------
     FONT TOKENS
     ------------------------- */
  --font: Montserrat, Arial, sans-serif;
  --font-body: Montserrat, Arial, sans-serif;
  --font-display: "Playfair Display", serif;
  --font-accent: "Playfair Display", serif;

  --font-size-xxs: 8px;
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 22px;
  --font-size-4xl: 24px;

  --font-size-site-h1: clamp(28px, 4vw, 34px);
  --font-size-site-h2: clamp(24px, 3vw, 30px);
  --font-size-site-h3: clamp(20px, 2.4vw, 26px);
  --font-size-site-h4: clamp(16px, 1.8vw, 22px);

  --font-size-content-h1: clamp(28px, 3.2vw, 32px);
  --font-size-content-h2: clamp(24px, 2.6vw, 28px);
  --font-size-content-h3: clamp(20px, 2vw, 22px);
  --font-size-content-h4: clamp(16px, 1.5vw, 18px);

  --font-size-body: 12px;
  --font-size-body-mobile: 14px;
  --font-size-ui: 12px;
  --font-size-ui-sm: 10px;
  --font-size-ui-xs: 9px;
  --font-size-ui-xxs: 8px;

  --font-size-card-title: 12px;
  --font-size-card-title-lg: 14px;

  --line-height-tight: 1.1;
  --line-height-heading: 1.1;
  --line-height-body: 1.7;
  --line-height-ui: 1.4;

  /* -------------------------
     MOTION TOKENS
     ------------------------- */
  --ease-standard: ease;
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-smooth: cubic-bezier(.4,0,.2,1);

  --duration-fast: 0.18s;
  --duration-mid: 0.28s;
  --duration-slow: 0.42s;
  
  /* =========================================================
   HERO / CONTEXT HERO MICRO TOKENS
   - Used by reusable hero shell, guide pill, and small hero motion
   ========================================================= */

--letter-spacing-ui: 0.025em;
--motion-lift-xs: -1px;
--glass-blur-sm: 12px;

  /* -------------------------
     SHAPE TOKENS
     ------------------------- */
  --radius-xxs: 4px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --radius-cut-sm: 0 0 var(--radius-sm) 0;
  --radius-cut-md: 0 0 var(--radius-md) 0;
  --radius-cut-lg: 0 0 var(--radius-lg) 0;

  /* -------------------------
     BORDER TOKENS
     ------------------------- */
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  --border-width-lg: 4px;
  --border-style-standard: solid;

  --border-color-strong: rgba(46,59,85,0.18);
  --border-color: rgba(46,59,85,0.12);
  --border-color-soft: rgba(46,59,85,0.08);
  --border-color-light: rgba(106,119,136,0.22);
  --border-color-contrast: rgba(255,255,255,0.16);

  --border-thin: var(--border-width-thin) var(--border-style-standard) var(--border-color);
  --border-thin-soft: var(--border-width-thin) var(--border-style-standard) var(--border-color-soft);
  --border-thin-strong: var(--border-width-thin) var(--border-style-standard) var(--border-color-strong);
  --border-thick-accent: var(--border-width-thick) var(--border-style-standard) var(--color-accent);
  --border-none: 0;

  /* -------------------------
     SHADOW TOKENS
     ------------------------- */
  --shadow-color-soft: rgba(22,34,53,0.08);
  --shadow-color: rgba(22,34,53,0.12);
  --shadow-color-strong: rgba(11,21,34,0.18);

  --shadow-sm: 0 4px 10px var(--shadow-color-soft);
  --shadow-md: 0 10px 20px var(--shadow-color-soft);
  --shadow-lg: 0 14px 32px var(--shadow-color);
  --shadow-xl: 0 20px 48px var(--shadow-color-strong);

  /* -------------------------
     SPACING TOKENS
     ------------------------- */
  --space-none: 0;
  --space-xxs: 2px;
  --space-2xs: var(--space-xxs);
  --space-xs: 4px;
  --space-sm: 7px;
  --space-md: 10px;
  --space-lg: 13px;
  --space-xl: 16px;
  --space-2xl: 19px;

  /* -------------------------
     LAYOUT TOKENS
     ------------------------- */
  --container: 1200px;
  --sidebar-width: 320px;

  /* -------------------------
     BUTTON TOKENS
     ------------------------- */
  --button-primary-bg: linear-gradient(180deg, #dce9f7 0%, #bfd4ea 100%);
  --button-primary-bg-hover: linear-gradient(180deg, #e5effa 0%, #c9dbef 100%);
  --button-primary-text: var(--color-dark);
  --button-primary-border: #a9c4df;

  --button-navy-bg: var(--color-dark);
  --button-navy-bg-hover: var(--color-dark-muted);
  --button-navy-text: var(--color-white);
  --button-navy-border: var(--color-dark);

  --button-navy-muted-bg: #44506b;
  --button-navy-muted-bg-hover: #56627d;
  --button-navy-muted-text: var(--color-white);
  --button-navy-muted-border: #44506b;

  --button-blue-bg: #c7daee;
  --button-blue-bg-hover: #d5e4f3;
  --button-blue-text: var(--color-dark);
  --button-blue-border: #b2cbe4;

  --button-blue-soft-bg: #edf4fb;
  --button-blue-soft-bg-hover: #e3eef9;
  --button-blue-soft-text: var(--color-dark);
  --button-blue-soft-border: #cfdceb;

  --button-gold-bg: var(--color-accent);
  --button-gold-bg-hover: var(--color-accent-muted);
  --button-gold-text: var(--color-dark);
  --button-gold-border: #c8a12c;

  --button-gold-muted-bg: #f2e0af;
  --button-gold-muted-bg-hover: #f6e7bf;
  --button-gold-muted-text: var(--color-dark);
  --button-gold-muted-border: #e1c57c;

  --button-neutral-bg: #dfe5ec;
  --button-neutral-bg-hover: #e8edf3;
  --button-neutral-text: var(--color-dark);
  --button-neutral-border: #cfd8e2;

  --button-neutral-soft-bg: #f6f8fa;
  --button-neutral-soft-bg-hover: #eef2f6;
  --button-neutral-soft-text: var(--color-dark);
  --button-neutral-soft-border: #d9e0e7;

  --button-surface-bg: var(--color-white);
  --button-surface-bg-hover: #f7f9fc;
  --button-surface-text: var(--color-dark);
  --button-surface-border: #d6dee8;

  /* -------------------------
     PANEL TOKENS
     ------------------------- */
  --panel-bg: var(--color-surface);
  --panel-bg-soft: var(--color-surface-soft);
  --panel-bg-muted: var(--color-surface-muted);
  --panel-bg-glass: color-mix(in srgb, var(--color-surface) 88%, transparent);

  --panel-border: var(--border-color);
  --panel-border-soft: var(--border-color-soft);
  --panel-border-strong: var(--border-color-strong);

  --panel-shadow: var(--shadow-md);
  --panel-shadow-soft: var(--shadow-sm);
  --panel-shadow-strong: var(--shadow-lg);

  --panel-radius: var(--radius-md);
  --panel-radius-cut: var(--radius-cut-md);

  --panel-pad: var(--space-2xl);
  --panel-pad-sm: var(--space-xl);
  --panel-gap: var(--space-lg);

  --panel-title-size: var(--font-size-content-h3);
  --panel-title-margin-bottom: var(--space-md);

  --panel-text-size: var(--font-size-body);
  --panel-text-line-height: var(--line-height-body);

  --panel-footer-bg: color-mix(in srgb, var(--color-surface-muted) 86%, var(--color-surface) 14%);
  --panel-footer-border: var(--border-color-soft);
  --panel-footer-pad-y: var(--space-lg);
  --panel-footer-pad-x: var(--space-2xl);
  --panel-footer-gap: var(--space-lg);

  --panel-meta-gap: var(--space-md);
  --panel-meta-icon-size: 32px;
  --panel-meta-icon-bg: var(--color-dark);
  --panel-meta-icon-text: var(--color-white);
  --panel-meta-title-size: var(--font-size-ui-sm);
  --panel-meta-text-size: var(--font-size-ui-sm);

  --panel-action-size: 30px;
  --panel-action-icon-size: 18px;

  --panel-badge-min-height: 28px;
  --panel-badge-pad-x: var(--space-md);
  --panel-badge-bg: var(--button-blue-soft-bg);
  --panel-badge-border: var(--button-blue-soft-border);
  --panel-badge-text: var(--color-dark);

  /* -------------------------
     ARTICLE CARD TOKENS
     ------------------------- */
  --home-card-bg: var(--color-surface);
  --home-card-border: var(--border-color-light);
  --home-card-border-hover: var(--border-color-strong);
  --home-card-meta-border: var(--border-color-soft);
  --home-card-kicker: var(--color-accent);
  --home-card-meta-icon-bg: var(--color-dark);
  --home-card-meta-icon-text: var(--color-white);
  --home-card-bookmark: var(--color-text-muted);
  --home-card-placeholder-a: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --home-card-placeholder-b: color-mix(in srgb, var(--color-dark) 8%, transparent);

  --article-card-radius: var(--radius-xxs);
  --article-card-border: var(--border-thin);
  --article-card-shadow: var(--shadow-sm);
  --article-card-shadow-hover: var(--shadow-md);

  --article-card-media-ratio: 16 / 8;
  --article-card-media-fit: cover;
  --article-card-media-position: right center;

  --article-card-body-pad-y: var(--space-md);
  --article-card-body-pad-x: var(--space-md);
  --article-card-body-gap: var(--space-sm);

  --article-card-label-min-height: 20px;
  --article-card-label-pad-x: var(--space-sm);
  --article-card-label-font-size: var(--font-size-ui-xs);

  --article-card-title-font-size: var(--font-size-card-title-lg);
  --article-card-title-line-height: 1.08;
  --article-card-title-lines: 2;

  --article-card-excerpt-font-size: var(--font-size-ui);
  --article-card-excerpt-line-height: 1.35;
  --article-card-excerpt-lines: 2;

  --article-card-footer-gap: var(--space-md);
  --article-card-footer-top-pad: var(--space-sm);
  --article-card-footer-border: var(--home-card-meta-border);

  --article-card-meta-gap: var(--space-sm);
  --article-card-meta-copy-gap: var(--space-xxs);
  --article-card-meta-icon-size: 30px;
  --article-card-meta-icon-font-size: var(--font-size-ui-xs);
  --article-card-meta-title-size: 11px;
  --article-card-meta-text-size: 10px;

  --article-card-bookmark-wrap-size: 22px;
  --article-card-bookmark-icon-size: 11px;
  --article-card-bookmark-color: var(--home-card-bookmark);

  --article-card-brand-size: 30px;
  --article-card-brand-radius: var(--radius-xs);

  --article-card-ribbon-wrap-size: 82px;
  --article-card-ribbon-offset: -7px;
  --article-card-ribbon-band-width: 108px;
  --article-card-ribbon-band-top: 18px;
  --article-card-ribbon-band-right: -25px;
  --article-card-ribbon-line-height: 22px;
  --article-card-ribbon-font-size: 10px;
  --article-card-ribbon-letter-spacing: 0.08em;
  --article-card-ribbon-fold-size: var(--space-xs);
  --article-card-ribbon-shadow: 0 4px 10px rgba(0,0,0,0.18);
  --article-card-ribbon-bg: linear-gradient(180deg, var(--color-accent-muted) 0%, var(--color-accent) 100%);
  --article-card-ribbon-text: var(--color-dark);
  --article-card-ribbon-border-top: color-mix(in srgb, var(--color-accent-muted) 82%, var(--color-white) 18%);
  --article-card-ribbon-border-bottom: color-mix(in srgb, var(--color-accent) 72%, black 28%);
  --article-card-ribbon-fold-color: color-mix(in srgb, var(--color-accent) 70%, black 30%);

  --article-card-footer-gap-mobile: var(--space-sm);
  --article-card-footer-top-pad-mobile: var(--space-sm);
  --article-card-meta-gap-mobile: var(--space-sm);
  --article-card-ribbon-wrap-size-mobile: 74px;
  --article-card-ribbon-band-width-mobile: 98px;
  --article-card-ribbon-band-top-mobile: 17px;
  --article-card-ribbon-band-right-mobile: -24px;
  --article-card-ribbon-line-height-mobile: 20px;
  --article-card-ribbon-font-size-mobile: var(--font-size-ui-xs);




  /* -------------------------
     BLOG BUILDER TOKENS
     ------------------------- */
  --blog-builder-intro-margin-bottom: 24px;

  --blog-builder-keypoints-wrap-max-width: 100%;
  --blog-builder-keypoints-wrap-margin-bottom: 24px;
  --blog-builder-keypoints-max-width: 100%;
  --blog-builder-kp-list-indent: 1.15em;

  --blog-builder-section-margin-bottom: 32px;
  --blog-builder-section-heading-margin-bottom: 12px;
  --blog-builder-section-text-margin-bottom: 14px;

  --blog-builder-section-image-max-width: 320px;
  --blog-builder-section-image-max-height: 280px;
  --blog-builder-section-image-margin: 0 20px 14px 0;
  --blog-builder-section-image-border: var(--border-thick-accent);
  --blog-builder-section-image-radius: var(--radius-lg);
  --blog-builder-section-image-shadow: var(--shadow-sm);

  --blog-builder-final-word-margin-top: 28px;
  --blog-builder-final-word-pad-y: var(--space-xl);
  --blog-builder-final-word-pad-x: var(--space-xl);
  --blog-builder-final-word-border: var(--border-thin);
  --blog-builder-final-word-border-accent-width: var(--border-width-lg);
  --blog-builder-final-word-radius: var(--radius-cut-md);
  --blog-builder-final-word-shadow: var(--shadow-sm);

  --blog-builder-inline-line-height: var(--line-height-body);

  --blog-builder-kp-panel-margin-y: 20px;
  --blog-builder-kp-panel-bg: var(--color-surface);
  --blog-builder-kp-panel-border: var(--border-thin);
  --blog-builder-kp-panel-radius: var(--radius-md);
  --blog-builder-kp-panel-shadow: var(--shadow-md);

  --blog-builder-kp-title-pad-top: var(--space-xl);
  --blog-builder-kp-title-pad-right: var(--space-xl);
  --blog-builder-kp-title-pad-bottom: var(--space-lg);
  --blog-builder-kp-title-pad-left: var(--space-xl);
  --blog-builder-kp-title-border: var(--border-thin-soft);
  --blog-builder-kp-title-size: var(--font-size-content-h3);
  --blog-builder-kp-title-line-height: var(--line-height-heading);

  --blog-builder-kp-content-margin: var(--space-md);
  --blog-builder-kp-content-pad: var(--space-xl);
  --blog-builder-kp-content-bg: var(--color-surface-muted);
  --blog-builder-kp-content-border: var(--border-thin-soft);
  --blog-builder-kp-content-radius: var(--radius-sm);
  --blog-builder-kp-content-shadow: none;
  --blog-builder-kp-content-size: var(--font-size-body);
  --blog-builder-kp-content-line-height: var(--line-height-body);

  --blog-builder-kp-footer-margin-top: calc(var(--space-xs) * -1);
  --blog-builder-kp-footer-margin-side: var(--space-md);
  --blog-builder-kp-footer-margin-bottom: var(--space-md);
  --blog-builder-kp-footer-pad-y: var(--space-md);
  --blog-builder-kp-footer-pad-x: var(--space-xl);
  --blog-builder-kp-footer-bg: var(--color-surface);
  --blog-builder-kp-footer-border: var(--border-thin-soft);
  --blog-builder-kp-footer-radius: 0 0 var(--radius-sm) var(--radius-sm);

  --blog-builder-kp-list-gap: var(--space-md);
  --blog-builder-kp-item-icon-size: 18px;
  --blog-builder-kp-item-gap: var(--space-md);
  --blog-builder-kp-icon-offset-top: 0.2em;

  /* -------------------------
     SINGLE BLOG TOKENS
     ------------------------- */
  --single-blog-shell-width: min(90%, 1100px);
  --single-blog-shell-bg: var(--color-surface);
  --single-blog-shell-text: var(--color-text);
  --single-blog-shell-line-height: var(--line-height-body);

  --single-blog-body-pad: clamp(16px, 2.6vw, 28px);
  --single-blog-body-size: var(--font-size-body);
  --single-blog-body-size-mobile: var(--font-size-body-mobile);
  --single-blog-body-line-height: var(--line-height-body);
  --single-blog-body-list-indent: 1.15em;
  --single-blog-body-li-margin: 0.35em 0;

  --single-blog-heading-line-height: var(--line-height-heading);
  --single-blog-h1-size: var(--font-size-content-h1);
  --single-blog-h2-size: var(--font-size-content-h2);
  --single-blog-h3-size: var(--font-size-content-h3);
  --single-blog-h4-size: var(--font-size-content-h4);
  --single-blog-h5-size: var(--font-size-ui);

  --single-blog-title-accent: var(--color-accent);
  --single-blog-title-margin-bottom: var(--space-xl);

  --single-blog-blockquote-pad-y: 14px;
  --single-blog-blockquote-pad-x: var(--space-xl);
  --single-blog-blockquote-accent-width: var(--space-xs);
  --single-blog-blockquote-bg: var(--color-surface-soft);
  --single-blog-blockquote-text: var(--color-black-soft);
  --single-blog-blockquote-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  --single-blog-table-cell-pad-y: var(--space-md);
  --single-blog-table-cell-pad-x: 12px;
  --single-blog-table-head-bg: var(--color-surface-soft);

  --single-blog-code-bg: var(--color-dark);
  --single-blog-code-text: var(--color-white);
  --single-blog-code-border: var(--border-color-contrast);
  --single-blog-code-pad-y: 14px;
  --single-blog-code-pad-x: var(--space-xl);
  --single-blog-code-radius: var(--radius-sm);

  --single-blog-hero-meta-gap: var(--space-sm);
  --single-blog-hero-meta-margin-top: var(--space-xl);
  --single-blog-hero-meta-min-height: 30px;
  --single-blog-hero-meta-pad-y: 5px;
  --single-blog-hero-meta-pad-x: var(--space-md);
  --single-blog-hero-meta-border: var(--border-color-strong);
  --single-blog-hero-meta-radius: var(--radius-pill);
  --single-blog-hero-meta-bg: var(--color-glass-light);
  --single-blog-hero-meta-shadow: var(--shadow-sm);
  --single-blog-hero-meta-font-size: var(--font-size-ui-xs);
  --single-blog-hero-meta-blur: 3px;

  --single-blog-hero-trending-min-width: 30px;
  --single-blog-hero-trending-pad-x: 9px;

  --single-blog-rating-row-margin: 8px 0 20px;
  --single-blog-rating-row-gap: 12px;
  --single-blog-rating-pill-gap: var(--space-md);
  --single-blog-rating-pill-min-height: 42px;
  --single-blog-rating-pill-pad-y: var(--space-md);
  --single-blog-rating-pill-pad-x: var(--space-xl);
  --single-blog-rating-pill-border: var(--border-color-strong);
  --single-blog-rating-pill-radius: var(--radius-pill);
  --single-blog-rating-pill-bg: var(--color-glass-light-strong);
  --single-blog-rating-pill-shadow: var(--shadow-md);
  --single-blog-rating-pill-font-size: var(--font-size-ui);

  --single-blog-float-image-width: min(42%, 420px);
  --single-blog-float-image-max-width: 420px;
  --single-blog-float-image-margin: 0 24px 18px 0;
  --single-blog-float-image-border: var(--border-thick-accent);
  --single-blog-float-image-radius: var(--radius-lg);

  --single-blog-topper-breakout-margin: -28px -28px 24px;
  --single-blog-featured-margin-bottom: 24px;
  --single-blog-featured-border: var(--border-thin);
  --single-blog-featured-border-color: color-mix(in srgb, var(--color-dark) 14%, transparent);
  --single-blog-featured-radius: var(--radius-cut-sm);
  --single-blog-featured-shadow: var(--shadow-md);
  --single-blog-featured-bg: var(--color-surface-soft);
  --single-blog-featured-max-height: 520px;

  --single-blog-topper-height: 200px;
  --single-blog-topper-border-color: var(--border-color-soft);
  --single-blog-topper-bg: var(--color-white);

  --single-blog-topper-fade-left: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-white) 96%, transparent) 0%,
    color-mix(in srgb, var(--color-white) 82%, transparent) 14%,
    color-mix(in srgb, var(--color-white) 42%, transparent) 30%,
    color-mix(in srgb, var(--color-white) 0%, transparent) 52%
  );

  --single-blog-topper-fade-vertical: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-white) 20%, transparent) 0%,
    color-mix(in srgb, var(--color-white) 0%, transparent) 22%,
    color-mix(in srgb, var(--color-white) 0%, transparent) 78%,
    color-mix(in srgb, var(--color-white) 18%, transparent) 100%
  );

  --single-blog-topper-title-wrap-pad-y: 18px;
  --single-blog-topper-title-wrap-pad-x: 28px;
  --single-blog-topper-title-wrap-bg: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-white) 90%, transparent) 0%,
    color-mix(in srgb, var(--color-white) 72%, transparent) 34%,
    color-mix(in srgb, var(--color-white) 22%, transparent) 72%,
    color-mix(in srgb, var(--color-white) 0%, transparent) 100%
  );

  --single-blog-topper-title-max-width: 28ch;
  --single-blog-topper-title-size: clamp(18px, 2.2vw, 25px);
  --single-blog-topper-title-line-height: 1.05;

  --single-blog-page-title-margin-bottom: var(--space-xl);
  --single-blog-page-title-size: clamp(24px, 3vw, 30px);
  --single-blog-page-title-line-height: 1.12;

  --single-blog-topper-meta-gap-row: var(--space-md);
  --single-blog-topper-meta-gap-col: 12px;
  --single-blog-topper-meta-margin: -60px 0 26px -15px;
  --single-blog-topper-meta-pad: 0 28px 0 13px;

  /* -------------------------
     TABLE TOKENS
     ------------------------- */
  --table-compare-margin-y: 24px;
  --table-compare-radius: var(--radius-cut-sm);
  --table-compare-shadow: var(--shadow-lg);

  --table-compare-head-bg: var(--color-dark);
  --table-compare-head-text: var(--color-white);
  --table-compare-head-border: var(--border-color-contrast);

  --table-compare-cell-pad-y: 14px;
  --table-compare-cell-pad-x: var(--space-xl);
  --table-compare-cell-font-size: var(--font-size-lg);
  --table-compare-cell-line-height: 1.55;

  --table-compare-head-font-size: var(--font-size-lg);
  --table-compare-head-line-height: 1.3;

  --table-compare-row-alt-bg: var(--color-surface-muted);
  --table-compare-row-hover-bg: var(--color-surface-soft);

  --table-compare-first-col-width: 32%;
  --table-compare-caption-margin-bottom: var(--space-md);
  --table-compare-caption-size: var(--font-size-2xl);

  /* -------------------------
     BEST PICKS TOKENS
     ------------------------- */
  --best-picks-section-margin-y: 28px;
  --best-picks-section-max-width: 1400px;
  --best-picks-heading-margin-bottom: 18px;
  --best-picks-grid-gap: 18px;

  --best-pick-card-border-color: var(--color-accent);
  --best-pick-card-radius: var(--radius-cut-sm);
  --best-pick-card-shadow: var(--shadow-sm);

  --best-pick-media-ratio: 16 / 10;
  --best-pick-media-fit: cover;
  --best-pick-media-position: center;

  --best-pick-content-x: var(--space-xl);

  --best-pick-label-margin-top: 14px;
  --best-pick-label-margin-bottom: var(--space-md);
  --best-pick-label-pad-y: var(--space-sm);
  --best-pick-label-pad-x: var(--space-md);
  --best-pick-label-radius: var(--radius-pill);
  --best-pick-label-border-color: var(--color-accent-muted);
  --best-pick-label-bg: var(--color-surface-soft);
  --best-pick-label-text: var(--color-dark);

  --best-pick-title-margin-bottom: var(--space-sm);
  --best-pick-title-size: var(--font-size-card-title-lg);
  --best-pick-title-weight: 600;
  --best-pick-title-line-height: 1.18;

  --best-pick-copy-margin-bottom: 12px;
  --best-pick-copy-size: var(--font-size-ui-sm);
  --best-pick-copy-line-height: 1.45;
  --best-pick-copy-text: var(--color-text-muted);

  --best-pick-meta-gap: var(--space-sm);
  --best-pick-meta-margin-bottom: 12px;

  --best-pick-chip-pad-y: 5px;
  --best-pick-chip-pad-x: 9px;
  --best-pick-chip-radius: var(--radius-pill);
  --best-pick-chip-border-color: var(--border-color);
  --best-pick-chip-bg: var(--color-surface-muted);
  --best-pick-chip-text: var(--color-dark);

  --best-pick-review-margin-bottom: 12px;
  --best-pick-review-hover-border: var(--color-accent);

  --best-pick-heading-override-margin-bottom: var(--space-md);
  --best-pick-heading-override-pad-x: 14px;
  --best-pick-heading-override-size: var(--font-size-xl);

  --best-pick-copy-override-pad-x: 14px;
  --best-pick-copy-override-size: var(--font-size-md);
  --best-pick-copy-override-line-height: 1.58;

  /*transition tokens*/

  --hotips-page-wipe-speed: 460ms;
--hotips-page-wipe-ease: cubic-bezier(.77, 0, .18, 1);

--hotips-page-wipe-tint:
  linear-gradient(
    135deg,
    rgba(244, 248, 241, 0.18) 0%,
    rgba(219, 232, 213, 0.22) 34%,
    rgba(159, 181, 154, 0.26) 68%,
    rgba(111, 139, 107, 0.30) 100%
  );

--hotips-page-wipe-sheen:
  linear-gradient(
    90deg,
    rgba(255,255,255,0.00) 0%,
    rgba(255,255,255,0.18) 48%,
    rgba(255,255,255,0.00) 100%
  );

--hotips-page-wipe-blur: 14px;
--hotips-page-wipe-saturate: 118%;
}

/* =========================================================
   SECTION-THEMED SITE CHROME
   Dark floating glass header + clean themed footer
   Money / Wellness pages
   ========================================================= */

/* -------------------------
   Money theme tokens
   ------------------------- */

body.hotips-site-theme--money{
  --hotips-glass-bar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-area-hub-money-panel-soft-bg) 26%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-money-band-b) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-area-hub-money-band-a) 84%, transparent) 100%
    );

  --hotips-glass-bar-text: var(--color-surface);
  --hotips-glass-bar-border: color-mix(in srgb, var(--color-surface) 18%, transparent);
  --hotips-glass-bar-shadow: 0 14px 34px rgba(12, 26, 46, 0.24);
}

/* -------------------------
   Wellness theme tokens
   ------------------------- */

body.hotips-site-theme--wellness{
  --hotips-glass-bar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-area-hub-wellness-panel-soft-bg) 24%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-wellness-band-b) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-area-hub-wellness-band-a) 82%, black 18%) 100%
    );

  --hotips-glass-bar-text: var(--color-surface);
  --hotips-glass-bar-border: color-mix(in srgb, var(--color-surface) 18%, transparent);
  --hotips-glass-bar-shadow: 0 14px 34px rgba(40, 58, 38, 0.24);
}



/* -------------------------
   Themed brandbar glass
   Sits below fixed topbar in normal header flow
   ------------------------- */

body.hotips-site-theme--money .hotips-brandbar,
body.hotips-site-theme--wellness .hotips-brandbar{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background: var(--hotips-glass-bar-bg);
  color: var(--hotips-glass-bar-text);

  border-bottom: 1px solid var(--hotips-glass-bar-border);
  box-shadow: var(--hotips-glass-bar-shadow);

  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

/* Brandbar sheen */
body.hotips-site-theme--money .hotips-brandbar::before,
body.hotips-site-theme--wellness .hotips-brandbar::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-white) 13%, transparent) 0%,
      transparent 58%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-white) 10%, transparent) 0%,
      transparent 42%,
      color-mix(in srgb, var(--color-white) 5%, transparent) 100%
    );

  opacity: 0.72;
}

/* Keep brandbar content above sheen */
body.hotips-site-theme--money .hotips-brandbar > *,
body.hotips-site-theme--wellness .hotips-brandbar > *{
  position: relative;
  z-index: 1;
}

/* Brandbar text and menu links */
body.hotips-site-theme--money .hotips-brandbar,
body.hotips-site-theme--money .hotips-brandbar a,
body.hotips-site-theme--money .hotips-brandbar button,
body.hotips-site-theme--wellness .hotips-brandbar,
body.hotips-site-theme--wellness .hotips-brandbar a,
body.hotips-site-theme--wellness .hotips-brandbar button{
  color: var(--hotips-glass-bar-text) !important;
}

/* Remove old yellow active menu style inside themed brandbar */
body.hotips-site-theme--money .hotips-brandbar .current-menu-item > a,
body.hotips-site-theme--money .hotips-brandbar .current_page_item > a,
body.hotips-site-theme--wellness .hotips-brandbar .current-menu-item > a,
body.hotips-site-theme--wellness .hotips-brandbar .current_page_item > a{
  background: color-mix(in srgb, var(--color-white) 14%, transparent) !important;
  color: var(--color-white) !important;
  border-radius: var(--radius-pill);
  box-shadow: none !important;
}

/* -------------------------
   Footer top strip
   ------------------------- */

body.hotips-site-theme--money .hotips-footer__top,
body.hotips-site-theme--money .hotips-footer-top,
body.hotips-site-theme--money .hotips-footer__topstrip,
body.hotips-site-theme--money .hotips-footer-topstrip,
body.hotips-site-theme--money .hotips-footer-menu,
body.hotips-site-theme--money .hotips-footer-meta,
body.hotips-site-theme--wellness .hotips-footer__top,
body.hotips-site-theme--wellness .hotips-footer-top,
body.hotips-site-theme--wellness .hotips-footer__topstrip,
body.hotips-site-theme--wellness .hotips-footer-topstrip,
body.hotips-site-theme--wellness .hotips-footer-menu,
body.hotips-site-theme--wellness .hotips-footer-meta{
  background: var(--hotips-chrome-footer-top-bg);
  color: var(--hotips-chrome-footer-top-text);
}

body.hotips-site-theme--money .hotips-footer__top a,
body.hotips-site-theme--money .hotips-footer-top a,
body.hotips-site-theme--money .hotips-footer__topstrip a,
body.hotips-site-theme--money .hotips-footer-topstrip a,
body.hotips-site-theme--money .hotips-footer-menu a,
body.hotips-site-theme--money .hotips-footer-meta a,
body.hotips-site-theme--wellness .hotips-footer__top a,
body.hotips-site-theme--wellness .hotips-footer-top a,
body.hotips-site-theme--wellness .hotips-footer__topstrip a,
body.hotips-site-theme--wellness .hotips-footer-topstrip a,
body.hotips-site-theme--wellness .hotips-footer-menu a,
body.hotips-site-theme--wellness .hotips-footer-meta a{
  color: var(--hotips-chrome-footer-top-text);
}

@media (max-width: 760px){
  body.hotips-site-theme--money .hotips-brandbar,
  body.hotips-site-theme--wellness .hotips-brandbar{
    max-width: calc(100vw - 16px);
    border-radius: var(--radius-lg);
  }
}

/* -------------------------
   Footer bottom strip
   ------------------------- */

body.hotips-site-theme--money .hotips-footer,
body.hotips-site-theme--wellness .hotips-footer{
  background: var(--hotips-chrome-footer-bottom-bg);
  color: var(--hotips-chrome-footer-bottom-text);
}

body.hotips-site-theme--money .hotips-footer__bottom,
body.hotips-site-theme--money .hotips-footer-bottom,
body.hotips-site-theme--money .hotips-footer__bottomstrip,
body.hotips-site-theme--money .hotips-footer-bottomstrip,
body.hotips-site-theme--wellness .hotips-footer__bottom,
body.hotips-site-theme--wellness .hotips-footer-bottom,
body.hotips-site-theme--wellness .hotips-footer__bottomstrip,
body.hotips-site-theme--wellness .hotips-footer-bottomstrip{
  background: var(--hotips-chrome-footer-bottom-bg);
  color: var(--hotips-chrome-footer-bottom-text);
}

body.hotips-site-theme--money .hotips-footer__bottom a,
body.hotips-site-theme--money .hotips-footer-bottom a,
body.hotips-site-theme--money .hotips-footer__bottomstrip a,
body.hotips-site-theme--money .hotips-footer-bottomstrip a,
body.hotips-site-theme--wellness .hotips-footer__bottom a,
body.hotips-site-theme--wellness .hotips-footer-bottom a,
body.hotips-site-theme--wellness .hotips-footer__bottomstrip a,
body.hotips-site-theme--wellness .hotips-footer-bottomstrip a{
  color: var(--hotips-chrome-footer-bottom-text);
}

@media (max-width: 760px){
  body.hotips-site-theme--money .hotips-brandbar,
  body.hotips-site-theme--wellness .hotips-brandbar{
    max-width: calc(100vw - 16px);
    border-radius: var(--radius-lg);
  }
}

  /* -------------------------
   FOOTER TOKENS
   ------------------------- */

:root{
  --footer-max-width: 1280px;
  --footer-pad-y: clamp(34px, 4vw, 56px);
  --footer-pad-x: clamp(18px, 3vw, 32px);
  --footer-gap-col: clamp(20px, 2.4vw, 36px);
  --footer-gap-row: clamp(16px, 2vw, 24px);

  --footer-bg: var(--color-soft);
  --footer-surface: color-mix(in srgb, var(--color-surface) 88%, transparent);
  --footer-border: var(--border-color);
  --footer-heading: var(--color-heading);
  --footer-text: var(--color-text);
  --footer-muted: var(--color-text-muted);
  --footer-link: var(--color-link);
  --footer-link-hover: var(--color-link-hover);
  --footer-small: color-mix(in srgb, var(--color-text-muted) 88%, black 12%);

  --footer-heading-size: clamp(1rem, 0.98rem + 0.18vw, 1.125rem);
  --footer-text-size: 1rem;
  --footer-small-size: 0.95rem;
  --footer-line-height: 1.65;

  --site-footer-inner-pad-y: var(--space-xl);
  --site-footer-inner-pad-x: 20px;
  --site-footer-stack-gap: var(--space-md);
  --site-footer-brand-gap: 12px;
  --site-footer-heading-margin-bottom: 12px;
  --site-footer-list-gap: var(--space-md);

  --site-footer-bottom-gap: var(--space-sm);
  --site-footer-bottom-margin-top: var(--space-xl);
  --site-footer-bottom-pad-top: 12px;
  --site-footer-bottom-pad-bottom: var(--space-xl);

  --site-footer-meta-gap-row: var(--space-md);
  --site-footer-meta-gap-col: 18px;
  --site-footer-legal-gap: 6px;

  --site-footer-pill-gap: var(--space-sm);
  --site-footer-pill-min-height: 32px;
  --site-footer-pill-pad-y: 6px;
  --site-footer-pill-pad-x: 12px;
  --site-footer-pill-radius: var(--radius-pill);

  --site-footer-icon-list-gap: var(--space-md);

  --site-footer-logo-wrap-max-width: 180px;
  --site-footer-logo-wrap-height: 100px;
  --site-footer-logo-wrap-margin-bottom: var(--space-sm);
  --site-footer-logo-scale: 1.08;

  --site-footer-placeholder-min-height: 72px;
  --site-footer-placeholder-pad-top: 6px;
  --site-footer-placeholder-pad-bottom: var(--space-xxs);

  --hotips-footer-margin-top: 40px;
  --hotips-footer-topstrip-border: var(--color-dark);
  --hotips-footer-topstrip-gap: 18px;
  --hotips-footer-topstrip-min-height: 36px;
  --hotips-footer-menu-link-min-height: 36px;
  --hotips-footer-menu-link-pad-x: 18px;
  --hotips-footer-menu-link-hover-bg: var(--color-surface-soft);
  --hotips-footer-bottomstrip-min-height: 78px;
  --hotips-footer-bottomstrip-pad-y: 12px;
  --hotips-footer-logo-max-height: 58px;
}


  /* -------------------------
     KIT / CONVERTKIT FORM TOKENS
     ------------------------- */
  --kit-form-margin-y: 32px;
  --kit-form-radius: var(--radius-lg);
  --kit-form-shadow: var(--shadow-lg);

  --kit-form-column-pad: 28px;
  --kit-form-fields-gap: 14px;

  --kit-form-input-min-height: 46px;
  --kit-form-input-pad-x: 14px;
  --kit-form-input-radius: var(--radius-sm);
  --kit-form-input-focus-ring: 0 0 0 1px var(--border-color-soft);

  --kit-form-submit-min-height: 46px;
  --kit-form-submit-radius: var(--radius-sm);

  --kit-form-image-radius: var(--radius-md);

  /* -------------------------
     LEGACY BRIDGE TOKENS
     temporary aliases while older plugin/template classes remain
     ------------------------- */
  --gold: var(--color-accent);
  --gold-hover: var(--color-accent-muted);
  --navy: var(--color-dark);
  --navy-line: rgba(46,59,85,0.28);

  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --bg-colour-light: var(--color-soft);

  --blue-accent: var(--color-link);
  --blue-accent-hover: var(--color-link-hover);
  --line: var(--border-color);

  --tiny_font: var(--font-size-ui-xs);
  --small_font: var(--font-size-ui-sm);
  --medium_font: var(--font-size-ui);
  --large_font: var(--font-size-md);

  --fs-body: var(--font-size-md);
  --fs-small: var(--font-size-sm);
  --fs-post-h1: var(--font-size-content-h1);
  --fs-post-h2: var(--font-size-content-h2);
  --fs-post-h3: var(--font-size-content-h3);
  --fs-card-title: var(--font-size-card-title);
  --fs-section-title: var(--font-size-4xl);

  --site-h1: var(--font-size-site-h1);
  --site-h2: var(--font-size-site-h2);
  --site-h3: var(--font-size-site-h3);
  --site-h4: var(--font-size-site-h4);

  --card-h1: var(--font-size-card-title-lg);
  --card-h2: var(--font-size-card-title);
  --card-h3: var(--font-size-card-title);
  --card-h4: var(--font-size-ui);

  --blog-title-size: var(--font-size-content-h1);
  --blog-h2-size: var(--font-size-content-h2);
  --blog-h3-size: var(--font-size-content-h3);
  --blog-h4-size: var(--font-size-content-h4);
  --blog-body-size: var(--font-size-body);
  --blog-body-size-mobile: var(--font-size-body-mobile);
  --blog-heading-line: var(--line-height-heading);
  --blog-body-line: var(--line-height-body);

  --card-btn-bg: var(--color-dark);
  --card-btn-bg-hover: var(--color-dark-muted);
  --card-btn-text: var(--color-white);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --curve-sm: var(--radius-sm);
  --curve-lg: var(--radius-lg);
  --gold-line: var(--border-width-thick);

  
/* =========================================================
   02. BASE / GLOBALS
   ========================================================= */

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

html{
  margin: var(--space-none);
  padding: var(--space-none);
  background: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin: var(--space-none);
  padding: var(--space-none);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea{
  font-family: var(--font-body);
}

img,
picture,
svg,
video,
canvas{
  display: block;
  max-width: 100%;
}

img{
  height: auto;
}

svg{
  overflow: visible;
}

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

button{
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled{
  cursor: default;
}

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

a:hover,
a:focus{
  color: inherit;
}

:focus{
  outline: none;
}

:focus-visible{
  outline: var(--border-width-thick) var(--border-style-standard) color-mix(in srgb, var(--color-accent) 72%, var(--color-dark) 28%);
  outline-offset: var(--space-xxs);
}

::selection{
  background: color-mix(in srgb, var(--color-accent-muted) 62%, var(--color-white) 38%);
  color: var(--color-dark);
}

/* -------------------------
   ACCESSIBILITY
   ------------------------- */

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

.skip-link{
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 10000;
  transform: translateY(calc(-100% - var(--space-xl)));
  padding: var(--space-sm) var(--space-lg);
  border: var(--border-thin);
  border-color: var(--border-color-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: 1;
  box-shadow: var(--shadow-md);
}

.skip-link:focus,
.skip-link:focus-visible{
  transform: translateY(0);
}

/* -------------------------
   TYPOGRAPHY
   ------------------------- */

body h1,
body h2,
body h3,
body h4,
body h5,
body h6{
  margin-top: var(--space-none);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

body h1{ font-size: var(--font-size-site-h1); }
body h2{ font-size: var(--font-size-site-h2); }
body h3{ font-size: var(--font-size-site-h3); }
body h4{ font-size: var(--font-size-site-h4); }
body h5{ font-size: var(--font-size-ui); }
body h6{ font-size: var(--font-size-ui-sm); }

p{
  margin-top: var(--space-none);
}

strong,
b{
  font-weight: 800;
}

small{
  font-size: var(--font-size-ui-sm);
}

hr{
  height: var(--border-width-thin);
  margin: var(--space-2xl) var(--space-none);
  border: var(--border-none);
  background: var(--border-color-soft);
}

/* -------------------------
   GLOBAL CONTAINERS
   ------------------------- */

.hotips-container{
  width: min(calc(100% - var(--space-2xl)), var(--container));
  margin-inline: auto;
}

.hotips-container--wide{
  width: min(calc(100% - var(--home-shell-gutter)), var(--home-shell-max-width));
  max-width: none;
  margin-inline: auto;
}

.hotips-container--full{
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

/* -------------------------
   CONTENT LINK DEFAULTS
   ------------------------- */

.hotips-entry__content a,
.hotips-bottom-region a,
.post-single .single-body a,
.my-blog-builder a{
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thin);
  text-underline-offset: var(--space-xxs);
  transition:
    color var(--duration-fast) var(--ease-standard),
    text-decoration-color var(--duration-fast) var(--ease-standard);
}

.hotips-entry__content a:hover,
.hotips-entry__content a:focus,
.hotips-bottom-region a:hover,
.hotips-bottom-region a:focus,
.post-single .single-body a:hover,
.post-single .single-body a:focus,
.my-blog-builder a:hover,
.my-blog-builder a:focus{
  color: var(--color-link-hover);
  text-decoration-color: var(--color-accent);
}

/* -------------------------
   WORDPRESS / ELEMENTOR BASE NORMALISATION
   ------------------------- */

.wp-post-image{
  display: block;
  max-width: 100%;
  height: auto;
}

.elementor-widget,
.elementor-widget-container,
.elementor-shortcode{
  min-width: 0;
}

.elementor-widget-container > *:first-child{
  margin-top: var(--space-none);
}

.elementor-widget-container > *:last-child{
  margin-bottom: var(--space-none);
}

/* -------------------------
   REDUCED MOTION BASE SAFETY
   ------------------------- */

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   03. BUTTONS + PILLS
   ========================================================= */

:root{
  /* -------------------------
     BUTTON STRUCTURE TOKENS
     ------------------------- */
  --button-gap: var(--space-sm);
  --button-min-height: 38px;
  --button-pad-y: var(--space-sm);
  --button-pad-x: var(--space-lg);
  --button-radius: var(--radius-sm);
  --button-font-size: var(--font-size-ui-sm);
  --button-font-weight: 800;
  --button-letter-spacing: 0.03em;
  --button-shadow: var(--shadow-sm);
  --button-shadow-hover: var(--shadow-md);
  --button-hover-lift: -1px;

  --button-xs-min-height: 28px;
  --button-xs-pad-y: var(--space-xs);
  --button-xs-pad-x: var(--space-md);
  --button-xs-font-size: var(--font-size-ui-xs);

  --button-sm-min-height: 32px;
  --button-sm-pad-y: var(--space-sm);
  --button-sm-pad-x: var(--space-lg);
  --button-sm-font-size: var(--font-size-ui-sm);

  --button-lg-min-height: 44px;
  --button-lg-pad-y: var(--space-md);
  --button-lg-pad-x: var(--space-2xl);
  --button-lg-font-size: var(--font-size-ui);

  /* -------------------------
     PILL STRUCTURE TOKENS
     ------------------------- */
  --pill-min-height: 34px;
  --pill-pad-y: var(--space-sm);
  --pill-pad-x: var(--space-lg);
  --pill-radius: var(--radius-pill);
  --pill-font-size: var(--font-size-ui-sm);
  --pill-font-weight: 800;
  --pill-shadow: none;

  --pill-xs-min-height: 24px;
  --pill-xs-pad-y: var(--space-xs);
  --pill-xs-pad-x: var(--space-md);
  --pill-xs-font-size: var(--font-size-ui-xs);

  --pill-sm-min-height: 28px;
  --pill-sm-pad-y: var(--space-xs);
  --pill-sm-pad-x: var(--space-md);
  --pill-sm-font-size: var(--font-size-ui-sm);

  /* -------------------------
     BUTTON COLOUR SETS
     ------------------------- */
  --button-primary-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-soft) 72%, var(--color-white) 28%) 0%,
    color-mix(in srgb, var(--color-surface-soft) 88%, var(--color-dark) 12%) 100%
  );
  --button-primary-bg-hover: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-soft) 58%, var(--color-white) 42%) 0%,
    color-mix(in srgb, var(--color-surface-soft) 78%, var(--color-dark) 22%) 100%
  );
  --button-primary-text: var(--color-dark);
  --button-primary-border: color-mix(in srgb, var(--color-surface-soft) 74%, var(--color-dark) 26%);

  --button-navy-bg: var(--color-dark);
  --button-navy-bg-hover: var(--color-dark-muted);
  --button-navy-text: var(--color-white);
  --button-navy-border: var(--color-dark);

  --button-navy-muted-bg: var(--color-dark-muted);
  --button-navy-muted-bg-hover: color-mix(in srgb, var(--color-dark-muted) 82%, var(--color-white) 18%);
  --button-navy-muted-text: var(--color-white);
  --button-navy-muted-border: var(--color-dark-muted);

  --button-blue-bg: color-mix(in srgb, var(--color-tech-soft) 76%, var(--color-white) 24%);
  --button-blue-bg-hover: color-mix(in srgb, var(--color-tech-soft) 58%, var(--color-white) 42%);
  --button-blue-text: var(--color-dark);
  --button-blue-border: color-mix(in srgb, var(--color-tech-soft) 68%, var(--color-dark) 32%);

  --button-blue-soft-bg: color-mix(in srgb, var(--color-tech-soft-muted) 82%, var(--color-white) 18%);
  --button-blue-soft-bg-hover: color-mix(in srgb, var(--color-tech-soft-muted) 62%, var(--color-white) 38%);
  --button-blue-soft-text: var(--color-dark);
  --button-blue-soft-border: color-mix(in srgb, var(--color-tech-soft) 62%, var(--color-dark) 18%);

  --button-gold-bg: var(--color-accent);
  --button-gold-bg-hover: var(--color-accent-muted);
  --button-gold-text: var(--color-dark);
  --button-gold-border: color-mix(in srgb, var(--color-accent) 78%, var(--color-dark) 22%);

  --button-gold-muted-bg: color-mix(in srgb, var(--color-accent-muted) 78%, var(--color-white) 22%);
  --button-gold-muted-bg-hover: color-mix(in srgb, var(--color-accent-muted) 62%, var(--color-white) 38%);
  --button-gold-muted-text: var(--color-dark);
  --button-gold-muted-border: color-mix(in srgb, var(--color-accent) 44%, var(--border-color-light));

  --button-neutral-bg: color-mix(in srgb, var(--color-neutral-muted) 72%, var(--color-white) 28%);
  --button-neutral-bg-hover: color-mix(in srgb, var(--color-neutral-muted) 52%, var(--color-white) 48%);
  --button-neutral-text: var(--color-dark);
  --button-neutral-border: color-mix(in srgb, var(--color-neutral-muted) 72%, var(--color-dark) 18%);

  --button-neutral-soft-bg: color-mix(in srgb, var(--color-surface-muted) 80%, var(--color-white) 20%);
  --button-neutral-soft-bg-hover: color-mix(in srgb, var(--color-surface-muted) 58%, var(--color-white) 42%);
  --button-neutral-soft-text: var(--color-dark);
  --button-neutral-soft-border: var(--border-color-light);

  --button-surface-bg: var(--color-surface);
  --button-surface-bg-hover: var(--color-surface-muted);
  --button-surface-text: var(--color-dark);
  --button-surface-border: var(--border-color-light);

  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: color-mix(in srgb, var(--color-surface-soft) 64%, transparent);
  --button-ghost-text: var(--color-dark);
  --button-ghost-border: var(--border-color-light);
}

/* -------------------------
   SHARED BUTTON / PILL BASE
   ------------------------- */

.hotips-btn,
a.hotips-btn,
button.hotips-btn,
.my-blog-card-btn,
a.my-blog-card-btn,
.affiliate-button,
a.affiliate-button,
.hotips-pill,
a.hotips-pill,
button.hotips-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--button-gap) !important;

  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: var(--button-min-height);

  box-sizing: border-box !important;
  margin: var(--space-none) !important;
  padding: var(--button-pad-y) var(--button-pad-x) !important;

  border: var(--border-thin) !important;
  border-color: var(--button-primary-border) !important;
  border-radius: var(--button-radius) !important;
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  box-shadow: var(--button-shadow) !important;

  font-family: var(--font-body) !important;
  font-size: var(--button-font-size) !important;
  font-weight: var(--button-font-weight) !important;
  line-height: 1 !important;
  letter-spacing: var(--button-letter-spacing) !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;

  cursor: pointer;
  outline: none !important;
  transform: none !important;

  transition:
    background var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard) !important;
}

.hotips-btn:hover,
a.hotips-btn:hover,
button.hotips-btn:hover,
.my-blog-card-btn:hover,
a.my-blog-card-btn:hover,
.affiliate-button:hover,
a.affiliate-button:hover,
.hotips-pill:hover,
a.hotips-pill:hover,
button.hotips-pill:hover,
.hotips-btn:focus-visible,
a.hotips-btn:focus-visible,
button.hotips-btn:focus-visible,
.my-blog-card-btn:focus-visible,
a.my-blog-card-btn:focus-visible,
.affiliate-button:focus-visible,
a.affiliate-button:focus-visible,
.hotips-pill:focus-visible,
a.hotips-pill:focus-visible,
button.hotips-pill:focus-visible{
  background: var(--button-primary-bg-hover) !important;
  color: var(--button-primary-text) !important;
  border-color: var(--button-primary-border) !important;
  box-shadow: var(--button-shadow-hover) !important;
  text-decoration: none !important;
  transform: translateY(var(--button-hover-lift)) !important;
  outline: none !important;
}

.hotips-btn:active,
a.hotips-btn:active,
button.hotips-btn:active,
.my-blog-card-btn:active,
a.my-blog-card-btn:active,
.affiliate-button:active,
a.affiliate-button:active,
.hotips-pill:active,
a.hotips-pill:active,
button.hotips-pill:active{
  transform: translateY(0) !important;
  box-shadow: var(--button-shadow) !important;
}

.hotips-btn:disabled,
button.hotips-btn:disabled,
.hotips-pill:disabled,
button.hotips-pill:disabled,
.hotips-btn.is-disabled,
.hotips-pill.is-disabled,
.my-blog-card-btn.is-disabled,
.affiliate-button.is-disabled{
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
}

/* -------------------------
   PILL BASE
   ------------------------- */

.hotips-pill,
a.hotips-pill,
button.hotips-pill{
  min-height: var(--pill-min-height);
  padding: var(--pill-pad-y) var(--pill-pad-x) !important;
  border-radius: var(--pill-radius) !important;
  font-size: var(--pill-font-size) !important;
  font-weight: var(--pill-font-weight) !important;
  letter-spacing: 0.02em !important;
  box-shadow: var(--pill-shadow) !important;
}

/* -------------------------
   SIZES
   ------------------------- */

.hotips-btn--xs,
a.hotips-btn--xs,
button.hotips-btn--xs{
  min-height: var(--button-xs-min-height);
  padding: var(--button-xs-pad-y) var(--button-xs-pad-x) !important;
  font-size: var(--button-xs-font-size) !important;
}

.hotips-btn--sm,
a.hotips-btn--sm,
button.hotips-btn--sm{
  min-height: var(--button-sm-min-height);
  padding: var(--button-sm-pad-y) var(--button-sm-pad-x) !important;
  font-size: var(--button-sm-font-size) !important;
}

.hotips-btn--lg,
a.hotips-btn--lg,
button.hotips-btn--lg{
  min-height: var(--button-lg-min-height);
  padding: var(--button-lg-pad-y) var(--button-lg-pad-x) !important;
  font-size: var(--button-lg-font-size) !important;
}

.hotips-pill--xs,
a.hotips-pill--xs,
button.hotips-pill--xs{
  min-height: var(--pill-xs-min-height);
  padding: var(--pill-xs-pad-y) var(--pill-xs-pad-x) !important;
  font-size: var(--pill-xs-font-size) !important;
}

.hotips-pill--sm,
a.hotips-pill--sm,
button.hotips-pill--sm{
  min-height: var(--pill-sm-min-height);
  padding: var(--pill-sm-pad-y) var(--pill-sm-pad-x) !important;
  font-size: var(--pill-sm-font-size) !important;
}

/* -------------------------
   COLOUR VARIANTS
   ------------------------- */

.hotips-btn--primary,
a.hotips-btn--primary,
button.hotips-btn--primary,
.hotips-pill--primary,
a.hotips-pill--primary,
button.hotips-pill--primary{
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  border-color: var(--button-primary-border) !important;
}

.hotips-btn--primary:hover,
a.hotips-btn--primary:hover,
button.hotips-btn--primary:hover,
.hotips-pill--primary:hover,
a.hotips-pill--primary:hover,
button.hotips-pill--primary:hover,
.hotips-btn--primary:focus-visible,
a.hotips-btn--primary:focus-visible,
button.hotips-btn--primary:focus-visible,
.hotips-pill--primary:focus-visible,
a.hotips-pill--primary:focus-visible,
button.hotips-pill--primary:focus-visible{
  background: var(--button-primary-bg-hover) !important;
  color: var(--button-primary-text) !important;
  border-color: var(--button-primary-border) !important;
}

.hotips-btn--navy,
a.hotips-btn--navy,
button.hotips-btn--navy,
.hotips-pill--navy,
a.hotips-pill--navy,
button.hotips-pill--navy{
  background: var(--button-navy-bg) !important;
  color: var(--button-navy-text) !important;
  border-color: var(--button-navy-border) !important;
}

.hotips-btn--navy:hover,
a.hotips-btn--navy:hover,
button.hotips-btn--navy:hover,
.hotips-pill--navy:hover,
a.hotips-pill--navy:hover,
button.hotips-pill--navy:hover,
.hotips-btn--navy:focus-visible,
a.hotips-btn--navy:focus-visible,
button.hotips-btn--navy:focus-visible,
.hotips-pill--navy:focus-visible,
a.hotips-pill--navy:focus-visible,
button.hotips-pill--navy:focus-visible{
  background: var(--button-navy-bg-hover) !important;
  color: var(--button-navy-text) !important;
  border-color: var(--button-navy-border) !important;
}

.hotips-btn--navy-muted,
a.hotips-btn--navy-muted,
button.hotips-btn--navy-muted,
.hotips-pill--navy-muted,
a.hotips-pill--navy-muted,
button.hotips-pill--navy-muted{
  background: var(--button-navy-muted-bg) !important;
  color: var(--button-navy-muted-text) !important;
  border-color: var(--button-navy-muted-border) !important;
}

.hotips-btn--navy-muted:hover,
a.hotips-btn--navy-muted:hover,
button.hotips-btn--navy-muted:hover,
.hotips-pill--navy-muted:hover,
a.hotips-pill--navy-muted:hover,
button.hotips-pill--navy-muted:hover,
.hotips-btn--navy-muted:focus-visible,
a.hotips-btn--navy-muted:focus-visible,
button.hotips-btn--navy-muted:focus-visible,
.hotips-pill--navy-muted:focus-visible,
a.hotips-pill--navy-muted:focus-visible,
button.hotips-pill--navy-muted:focus-visible{
  background: var(--button-navy-muted-bg-hover) !important;
  color: var(--button-navy-muted-text) !important;
  border-color: var(--button-navy-muted-border) !important;
}

.hotips-btn--blue,
a.hotips-btn--blue,
button.hotips-btn--blue,
.hotips-pill--blue,
a.hotips-pill--blue,
button.hotips-pill--blue{
  background: var(--button-blue-bg) !important;
  color: var(--button-blue-text) !important;
  border-color: var(--button-blue-border) !important;
}

.hotips-btn--blue:hover,
a.hotips-btn--blue:hover,
button.hotips-btn--blue:hover,
.hotips-pill--blue:hover,
a.hotips-pill--blue:hover,
button.hotips-pill--blue:hover,
.hotips-btn--blue:focus-visible,
a.hotips-btn--blue:focus-visible,
button.hotips-btn--blue:focus-visible,
.hotips-pill--blue:focus-visible,
a.hotips-pill--blue:focus-visible,
button.hotips-pill--blue:focus-visible{
  background: var(--button-blue-bg-hover) !important;
  color: var(--button-blue-text) !important;
  border-color: var(--button-blue-border) !important;
}

.hotips-btn--blue-soft,
a.hotips-btn--blue-soft,
button.hotips-btn--blue-soft,
.hotips-pill--blue-soft,
a.hotips-pill--blue-soft,
button.hotips-pill--blue-soft{
  background: var(--button-blue-soft-bg) !important;
  color: var(--button-blue-soft-text) !important;
  border-color: var(--button-blue-soft-border) !important;
}

.hotips-btn--blue-soft:hover,
a.hotips-btn--blue-soft:hover,
button.hotips-btn--blue-soft:hover,
.hotips-pill--blue-soft:hover,
a.hotips-pill--blue-soft:hover,
button.hotips-pill--blue-soft:hover,
.hotips-btn--blue-soft:focus-visible,
a.hotips-btn--blue-soft:focus-visible,
button.hotips-btn--blue-soft:focus-visible,
.hotips-pill--blue-soft:focus-visible,
a.hotips-pill--blue-soft:focus-visible,
button.hotips-pill--blue-soft:focus-visible{
  background: var(--button-blue-soft-bg-hover) !important;
  color: var(--button-blue-soft-text) !important;
  border-color: var(--button-blue-soft-border) !important;
}

.hotips-btn--gold,
a.hotips-btn--gold,
button.hotips-btn--gold,
.hotips-pill--gold,
a.hotips-pill--gold,
button.hotips-pill--gold{
  background: var(--button-gold-bg) !important;
  color: var(--button-gold-text) !important;
  border-color: var(--button-gold-border) !important;
}

.hotips-btn--gold:hover,
a.hotips-btn--gold:hover,
button.hotips-btn--gold:hover,
.hotips-pill--gold:hover,
a.hotips-pill--gold:hover,
button.hotips-pill--gold:hover,
.hotips-btn--gold:focus-visible,
a.hotips-btn--gold:focus-visible,
button.hotips-btn--gold:focus-visible,
.hotips-pill--gold:focus-visible,
a.hotips-pill--gold:focus-visible,
button.hotips-pill--gold:focus-visible{
  background: var(--button-gold-bg-hover) !important;
  color: var(--button-gold-text) !important;
  border-color: var(--button-gold-border) !important;
}

.hotips-btn--gold-muted,
a.hotips-btn--gold-muted,
button.hotips-btn--gold-muted,
.hotips-pill--gold-muted,
a.hotips-pill--gold-muted,
button.hotips-pill--gold-muted{
  background: var(--button-gold-muted-bg) !important;
  color: var(--button-gold-muted-text) !important;
  border-color: var(--button-gold-muted-border) !important;
}

.hotips-btn--gold-muted:hover,
a.hotips-btn--gold-muted:hover,
button.hotips-btn--gold-muted:hover,
.hotips-pill--gold-muted:hover,
a.hotips-pill--gold-muted:hover,
button.hotips-pill--gold-muted:hover,
.hotips-btn--gold-muted:focus-visible,
a.hotips-btn--gold-muted:focus-visible,
button.hotips-btn--gold-muted:focus-visible,
.hotips-pill--gold-muted:focus-visible,
a.hotips-pill--gold-muted:focus-visible,
button.hotips-pill--gold-muted:focus-visible{
  background: var(--button-gold-muted-bg-hover) !important;
  color: var(--button-gold-muted-text) !important;
  border-color: var(--button-gold-muted-border) !important;
}

.hotips-btn--neutral,
a.hotips-btn--neutral,
button.hotips-btn--neutral,
.hotips-pill--neutral,
a.hotips-pill--neutral,
button.hotips-pill--neutral{
  background: var(--button-neutral-bg) !important;
  color: var(--button-neutral-text) !important;
  border-color: var(--button-neutral-border) !important;
}

.hotips-btn--neutral:hover,
a.hotips-btn--neutral:hover,
button.hotips-btn--neutral:hover,
.hotips-pill--neutral:hover,
a.hotips-pill--neutral:hover,
button.hotips-pill--neutral:hover,
.hotips-btn--neutral:focus-visible,
a.hotips-btn--neutral:focus-visible,
button.hotips-btn--neutral:focus-visible,
.hotips-pill--neutral:focus-visible,
a.hotips-pill--neutral:focus-visible,
button.hotips-pill--neutral:focus-visible{
  background: var(--button-neutral-bg-hover) !important;
  color: var(--button-neutral-text) !important;
  border-color: var(--button-neutral-border) !important;
}

.hotips-btn--neutral-soft,
a.hotips-btn--neutral-soft,
button.hotips-btn--neutral-soft,
.hotips-pill--neutral-soft,
a.hotips-pill--neutral-soft,
button.hotips-pill--neutral-soft{
  background: var(--button-neutral-soft-bg) !important;
  color: var(--button-neutral-soft-text) !important;
  border-color: var(--button-neutral-soft-border) !important;
}

.hotips-btn--neutral-soft:hover,
a.hotips-btn--neutral-soft:hover,
button.hotips-btn--neutral-soft:hover,
.hotips-pill--neutral-soft:hover,
a.hotips-pill--neutral-soft:hover,
button.hotips-pill--neutral-soft:hover,
.hotips-btn--neutral-soft:focus-visible,
a.hotips-btn--neutral-soft:focus-visible,
button.hotips-btn--neutral-soft:focus-visible,
.hotips-pill--neutral-soft:focus-visible,
a.hotips-pill--neutral-soft:focus-visible,
button.hotips-pill--neutral-soft:focus-visible{
  background: var(--button-neutral-soft-bg-hover) !important;
  color: var(--button-neutral-soft-text) !important;
  border-color: var(--button-neutral-soft-border) !important;
}

.hotips-btn--surface,
a.hotips-btn--surface,
button.hotips-btn--surface,
.hotips-pill--surface,
a.hotips-pill--surface,
button.hotips-pill--surface{
  background: var(--button-surface-bg) !important;
  color: var(--button-surface-text) !important;
  border-color: var(--button-surface-border) !important;
}

.hotips-btn--surface:hover,
a.hotips-btn--surface:hover,
button.hotips-btn--surface:hover,
.hotips-pill--surface:hover,
a.hotips-pill--surface:hover,
button.hotips-pill--surface:hover,
.hotips-btn--surface:focus-visible,
a.hotips-btn--surface:focus-visible,
button.hotips-btn--surface:focus-visible,
.hotips-pill--surface:focus-visible,
a.hotips-pill--surface:focus-visible,
button.hotips-pill--surface:focus-visible{
  background: var(--button-surface-bg-hover) !important;
  color: var(--button-surface-text) !important;
  border-color: var(--button-surface-border) !important;
}

.hotips-btn--ghost,
a.hotips-btn--ghost,
button.hotips-btn--ghost,
.hotips-pill--ghost,
a.hotips-pill--ghost,
button.hotips-pill--ghost{
  background: var(--button-ghost-bg) !important;
  color: var(--button-ghost-text) !important;
  border-color: var(--button-ghost-border) !important;
  box-shadow: none !important;
}

.hotips-btn--ghost:hover,
a.hotips-btn--ghost:hover,
button.hotips-btn--ghost:hover,
.hotips-pill--ghost:hover,
a.hotips-pill--ghost:hover,
button.hotips-pill--ghost:hover,
.hotips-btn--ghost:focus-visible,
a.hotips-btn--ghost:focus-visible,
button.hotips-btn--ghost:focus-visible,
.hotips-pill--ghost:focus-visible,
a.hotips-pill--ghost:focus-visible,
button.hotips-pill--ghost:focus-visible{
  background: var(--button-ghost-bg-hover) !important;
  color: var(--button-ghost-text) !important;
  border-color: var(--border-color-strong) !important;
  box-shadow: none !important;
}

/* -------------------------
   ICONS / ARROWS
   ------------------------- */

.hotips-btn__icon,
.hotips-pill__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}

.hotips-btn__icon svg,
.hotips-pill__icon svg{
  display: block;
  width: 1em;
  height: 1em;
}

.hotips-btn--with-arrow::after,
.my-blog-card-btn::after{
  content: "\2192";
  display: inline-block;
  margin-left: var(--space-xxs);
  font-size: 1em;
  line-height: 1;
  transform: translateX(0);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.hotips-btn--with-arrow:hover::after,
.hotips-btn--with-arrow:focus-visible::after,
.my-blog-card-btn:hover::after,
.my-blog-card-btn:focus-visible::after{
  transform: translateX(var(--space-xxs));
}

/* -------------------------
   SIMPLE BUTTON GROUPS
   ------------------------- */

.hotips-btn-group,
.hotips-pill-group{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.hotips-btn-group--center,
.hotips-pill-group--center{
  justify-content: center;
}

.hotips-btn-group--end,
.hotips-pill-group--end{
  justify-content: flex-end;
}

/* =========================================================
   04. PANELS + SURFACES
   ========================================================= */

:root{
  /* -------------------------
     PANEL TOKENS
     ------------------------- */
  --panel-bg: var(--color-surface);
  --panel-bg-soft: var(--color-surface-soft);
  --panel-bg-muted: var(--color-surface-muted);
  --panel-bg-glass: color-mix(in srgb, var(--color-surface) 88%, transparent);

  --panel-border: var(--border-color);
  --panel-border-soft: var(--border-color-soft);
  --panel-border-strong: var(--border-color-strong);

  --panel-shadow: var(--shadow-md);
  --panel-shadow-soft: var(--shadow-sm);
  --panel-shadow-strong: var(--shadow-lg);

  --panel-radius: var(--radius-md);
  --panel-radius-cut: var(--radius-cut-md);

  --panel-pad: var(--space-2xl);
  --panel-pad-sm: var(--space-xl);
  --panel-gap: var(--space-lg);

  --panel-title-size: var(--font-size-content-h3);
  --panel-title-margin-bottom: var(--space-md);

  --panel-text-size: var(--font-size-body);
  --panel-text-line-height: var(--line-height-body);

  --panel-footer-bg: color-mix(in srgb, var(--color-surface-muted) 86%, var(--color-surface) 14%);
  --panel-footer-border: var(--border-color-soft);
  --panel-footer-pad-y: var(--space-lg);
  --panel-footer-pad-x: var(--space-2xl);
  --panel-footer-gap: var(--space-lg);

  --panel-meta-gap: var(--space-md);
  --panel-meta-icon-size: 32px;
  --panel-meta-icon-bg: var(--color-dark);
  --panel-meta-icon-text: var(--color-white);
  --panel-meta-title-size: var(--font-size-ui-sm);
  --panel-meta-text-size: var(--font-size-ui-sm);

  --panel-action-size: 30px;
  --panel-action-icon-size: 18px;

  --panel-badge-min-height: 28px;
  --panel-badge-pad-x: var(--space-md);
  --panel-badge-bg: var(--button-blue-soft-bg);
  --panel-badge-border: var(--button-blue-soft-border);
  --panel-badge-text: var(--color-dark);
}

/* -------------------------
   PANEL BASE
   ------------------------- */

.hotips-panel{
  display: block;
  width: 100%;
  min-width: 0;
  margin: var(--space-none);
  padding: var(--space-none);
  box-sizing: border-box;

  background: var(--panel-bg);
  border: var(--border-thin);
  border-color: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);

  color: var(--color-text);
  font-family: var(--font-body);

  overflow: hidden;
}

/* -------------------------
   PANEL VARIANTS
   ------------------------- */

.hotips-panel--cut{
  border-radius: var(--panel-radius-cut);
}

.hotips-panel--flat{
  box-shadow: none;
}

.hotips-panel--soft{
  background: var(--panel-bg-soft);
  border-color: var(--panel-border-soft);
  box-shadow: var(--panel-shadow-soft);
}

.hotips-panel--muted{
  background: var(--panel-bg-muted);
  border-color: var(--panel-border-soft);
  box-shadow: var(--panel-shadow-soft);
}

.hotips-panel--glass{
  background: var(--panel-bg-glass);
  border-color: var(--border-color-light);
  box-shadow: var(--panel-shadow-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hotips-panel--bordered{
  background: var(--panel-bg);
  border-color: var(--panel-border-strong);
  box-shadow: none;
}

.hotips-panel--highlight{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-surface-soft) 72%, var(--color-surface) 28%),
    var(--color-surface)
  );
  border-color: color-mix(in srgb, var(--color-accent) 34%, var(--border-color-light));
  box-shadow: var(--panel-shadow);
}

/* -------------------------
   PANEL STRUCTURE
   ------------------------- */

.hotips-panel__header{
  padding: var(--panel-pad) var(--panel-pad) var(--space-none);
}

.hotips-panel__body{
  padding: var(--panel-pad);
}

.hotips-panel__footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--panel-footer-gap);
  min-width: 0;

  padding: var(--panel-footer-pad-y) var(--panel-footer-pad-x);

  background: var(--panel-footer-bg);
  border-top: var(--border-thin);
  border-color: var(--panel-footer-border);
}

.hotips-panel__footer--stack{
  flex-direction: column;
  align-items: stretch;
}

.hotips-panel__header > *:first-child,
.hotips-panel__body > *:first-child,
.hotips-panel__footer > *:first-child{
  margin-top: var(--space-none);
}

.hotips-panel__header > *:last-child,
.hotips-panel__body > *:last-child,
.hotips-panel__footer > *:last-child{
  margin-bottom: var(--space-none);
}

.hotips-panel__footer > *{
  min-width: 0;
}

/* -------------------------
   PANEL TEXT
   ------------------------- */

.hotips-panel__eyebrow{
  display: inline-flex;
  align-items: center;

  margin: var(--space-none) var(--space-none) var(--space-md);

  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hotips-panel__title{
  margin: var(--space-none) var(--space-none) var(--panel-title-margin-bottom);

  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--panel-title-size);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

.hotips-panel__text{
  margin: var(--space-none);

  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--panel-text-size);
  line-height: var(--panel-text-line-height);
}

.hotips-panel__text + .hotips-panel__text{
  margin-top: var(--space-md);
}

/* -------------------------
   PANEL META ROW
   ------------------------- */

.hotips-panel__meta{
  display: flex;
  align-items: center;
  gap: var(--panel-meta-gap);
  min-width: 0;
  flex: 1 1 auto;
}

.hotips-panel__meta-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 var(--panel-meta-icon-size);
  width: var(--panel-meta-icon-size);
  height: var(--panel-meta-icon-size);

  border-radius: var(--radius-pill);
  background: var(--panel-meta-icon-bg);
  color: var(--panel-meta-icon-text);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 800;
  line-height: 1;

  overflow: hidden;
}

.hotips-panel__meta-icon img,
.hotips-panel__meta-icon svg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotips-panel__meta-content{
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
  flex: 1 1 auto;
}

.hotips-panel__meta-title,
.hotips-panel__meta-text{
  font-family: var(--font-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotips-panel__meta-title{
  color: var(--color-heading);
  font-size: var(--panel-meta-title-size);
  font-weight: 800;
  line-height: 1.15;
}

.hotips-panel__meta-text{
  color: var(--color-text-muted);
  font-size: var(--panel-meta-text-size);
  font-weight: 500;
  line-height: 1.2;
}

/* -------------------------
   PANEL ACTION
   ------------------------- */

.hotips-panel__meta-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 var(--panel-action-size);
  width: var(--panel-action-size);
  height: var(--panel-action-size);
  min-width: var(--panel-action-size);
  min-height: var(--panel-action-size);

  padding: var(--space-none);
  margin: var(--space-none);

  border: var(--border-none);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-muted);
  box-shadow: none;

  line-height: 1;
  text-decoration: none;
  cursor: pointer;

  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.hotips-panel__meta-action svg{
  display: block;
  width: var(--panel-action-icon-size);
  height: var(--panel-action-icon-size);
}

.hotips-panel__meta-action:hover,
.hotips-panel__meta-action:focus-visible{
  background: var(--color-surface-soft);
  color: var(--color-link-hover);
  transform: translateY(-1px);
  outline: none;
}

/* -------------------------
   PANEL BADGES
   ------------------------- */

.hotips-panel__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: var(--panel-badge-min-height);
  padding: var(--space-none) var(--panel-badge-pad-x);

  border: var(--border-thin);
  border-color: var(--panel-badge-border);
  border-radius: var(--radius-pill);
  background: var(--panel-badge-bg);
  color: var(--panel-badge-text);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

/* -------------------------
   GENERIC SURFACES
   ------------------------- */

.hotips-surface{
  display: block;
  width: 100%;
  min-width: 0;

  background: var(--color-surface);
  border: var(--border-thin);
  border-color: var(--border-color-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);

  color: var(--color-text);
}

.hotips-surface--soft{
  background: var(--color-surface-soft);
}

.hotips-surface--muted{
  background: var(--color-surface-muted);
}

.hotips-surface--cut{
  border-radius: var(--radius-cut-md);
}

.hotips-surface--flat{
  box-shadow: none;
}

.hotips-surface--pad{
  padding: var(--panel-pad);
}

.hotips-surface--pad-sm{
  padding: var(--panel-pad-sm);
}

/* -------------------------
   RESPONSIVE
   ------------------------- */

@media (max-width: 767px){
  .hotips-panel__header{
    padding: var(--panel-pad-sm) var(--panel-pad-sm) var(--space-none);
  }

  .hotips-panel__body{
    padding: var(--panel-pad-sm);
  }

  .hotips-panel__footer{
    padding: var(--space-md) var(--panel-pad-sm);
  }

  .hotips-panel__title{
    font-size: var(--font-size-content-h4);
  }

  .hotips-surface--pad{
    padding: var(--panel-pad-sm);
  }
}

@media (max-width: 767px){
  .hotips-home-intro-nav__starter{
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-xl);
  }

  .hotips-home-intro-nav__starter-links{
    justify-content: flex-start;
  }

  .hotips-home-intro-nav__starter-links a{
    flex: 1 1 calc(50% - var(--space-sm));
  }
}

@media (max-width: 480px){
  .hotips-home-intro-nav__starter-links a{
    flex-basis: 100%;
  }
}

/* =========================================================
   LEGACY SHARED ARTICLE CARD — PARKED / DISABLED
   Old .hotips-article-card system kept for reference.
   New hub cards use assets/css/mht-content-cards.css and .mht-content-card.
   Disabled safely with @media not all so inner comments can remain.
   ========================================================= */

@media not all{

:root{
  /* -------------------------
     ARTICLE CARD BASE TOKENS
     ------------------------- */
  --article-card-bg: var(--color-surface);
  --article-card-bg-hover: var(--color-surface);
  --article-card-border-width: var(--border-width-thin);
  --article-card-border-style: var(--border-style-standard);
  --article-card-border-color: var(--border-color-light);
  --article-card-border-color-hover: var(--border-color-strong);
  --article-card-border: var(--article-card-border-width) var(--article-card-border-style) var(--article-card-border-color);
  --article-card-radius: var(--radius-xxs);
  --article-card-shadow: var(--shadow-sm);
  --article-card-shadow-hover: var(--shadow-md);
  --article-card-hover-lift: -1px;

  /* -------------------------
     ARTICLE CARD MEDIA TOKENS
     ------------------------- */
  --article-card-media-ratio: 16 / 8;
  --article-card-media-bg-a: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --article-card-media-bg-b: color-mix(in srgb, var(--color-dark) 8%, transparent);
  --article-card-media-fit: cover;
  --article-card-media-position: right center;
  --article-card-media-scale-hover: 1.03;

  /* -------------------------
     ARTICLE CARD BODY TOKENS
     ------------------------- */
  --article-card-body-pad-y: var(--space-md);
  --article-card-body-pad-x: var(--space-md);
  --article-card-body-gap: var(--space-sm);

  --article-card-label-min-height: 20px;
  --article-card-label-pad-x: var(--space-sm);
  --article-card-label-radius: var(--radius-pill);
  --article-card-label-bg: var(--color-surface-soft);
  --article-card-label-border: var(--border-thin-soft);
  --article-card-label-text: var(--color-accent);
  --article-card-label-font-size: var(--font-size-ui-xs);
  --article-card-label-font-weight: 800;
  --article-card-label-letter-spacing: 0.05em;

  --article-card-title-color: var(--color-heading);
  --article-card-title-color-hover: var(--color-link-hover);
  --article-card-title-font: var(--font-display);
  --article-card-title-font-size: var(--font-size-card-title-lg);
  --article-card-title-font-weight: 700;
  --article-card-title-line-height: 1.08;
  --article-card-title-letter-spacing: -0.01em;
  --article-card-title-lines: 2;

  --article-card-excerpt-color: var(--color-text-muted);
  --article-card-excerpt-font-size: var(--font-size-ui);
  --article-card-excerpt-line-height: 1.35;
  --article-card-excerpt-lines: 2;

  /* -------------------------
     ARTICLE CARD META TOKENS
     ------------------------- */
  --article-card-meta-gap: var(--space-sm);
  --article-card-meta-copy-gap: var(--space-xxs);
  --article-card-meta-top-pad: var(--space-sm);
  --article-card-meta-border: var(--border-color-soft);

  --article-card-brand-size: 30px;
  --article-card-brand-radius: var(--radius-xs);
  --article-card-brand-bg: transparent;

  --article-card-meta-author-size: 11px;
  --article-card-meta-author-color: var(--color-heading);
  --article-card-meta-author-weight: 700;

  --article-card-meta-sub-size: 10px;
  --article-card-meta-sub-color: var(--color-text-muted);
  --article-card-meta-sub-weight: 500;

  --article-card-dot-color: var(--color-text-soft);

  --article-card-action-size: 22px;
  --article-card-action-icon-size: 11px;
  --article-card-action-color: var(--color-text-muted);
  --article-card-action-color-hover: var(--color-link-hover);

  /* -------------------------
     ARTICLE CARD RIBBON TOKENS
     ------------------------- */
  --article-card-ribbon-wrap-size: 82px;
  --article-card-ribbon-offset: -7px;
  --article-card-ribbon-band-width: 108px;
  --article-card-ribbon-band-top: 18px;
  --article-card-ribbon-band-right: -25px;
  --article-card-ribbon-line-height: 22px;
  --article-card-ribbon-font-size: 10px;
  --article-card-ribbon-font-weight: 800;
  --article-card-ribbon-letter-spacing: 0.08em;
  --article-card-ribbon-fold-size: var(--space-xs);
  --article-card-ribbon-shadow: 0 4px 10px rgba(0,0,0,0.18);

  --article-card-ribbon-bg: linear-gradient(
    180deg,
    var(--color-accent-muted) 0%,
    var(--color-accent) 100%
  );
  --article-card-ribbon-text: var(--color-dark);
  --article-card-ribbon-border-top: color-mix(in srgb, var(--color-accent-muted) 82%, var(--color-white) 18%);
  --article-card-ribbon-border-bottom: color-mix(in srgb, var(--color-accent) 72%, black 28%);
  --article-card-ribbon-fold-color: color-mix(in srgb, var(--color-accent) 70%, black 30%);

  /* -------------------------
     ARTICLE CARD DOCK VARIANT TOKENS
     ------------------------- */
  --article-card-dock-min-height: 58px;
  --article-card-dock-radius: var(--radius-sm);
  --article-card-dock-pad: var(--space-xs);
  --article-card-dock-gap: var(--space-sm);
  --article-card-dock-media-size: 58px;
  --article-card-dock-title-size: var(--font-size-ui);
  --article-card-dock-title-lines: 2;

  /* -------------------------
     ARTICLE CARD MOBILE TOKENS
     ------------------------- */
  --article-card-body-pad-y-mobile: var(--space-md);
  --article-card-body-pad-x-mobile: var(--space-md);
  --article-card-meta-gap-mobile: var(--space-sm);
  --article-card-meta-top-pad-mobile: var(--space-sm);

  --article-card-ribbon-wrap-size-mobile: 74px;
  --article-card-ribbon-band-width-mobile: 98px;
  --article-card-ribbon-band-top-mobile: 17px;
  --article-card-ribbon-band-right-mobile: -24px;
  --article-card-ribbon-line-height-mobile: 20px;
  --article-card-ribbon-font-size-mobile: var(--font-size-ui-xs);
}

/* -------------------------
   ARTICLE CARD BASE
   ------------------------- */

.hotips-article-card{
  position: relative;
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
  height: 100%;

  background: var(--article-card-bg);
  border: var(--article-card-border);
  border-color: var(--article-card-border-color);
  border-radius: var(--article-card-radius);
  box-shadow: var(--article-card-shadow);

  color: var(--color-text);
  font-family: var(--font-body);

  overflow: hidden;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.hotips-article-card:hover,
.hotips-article-card:focus-within{
  background: var(--article-card-bg-hover);
  border-color: var(--article-card-border-color-hover);
  box-shadow: var(--article-card-shadow-hover);
  transform: translateY(var(--article-card-hover-lift));
}

.hotips-article-card__link{
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.hotips-article-card__link:hover,
.hotips-article-card__link:focus{
  color: inherit;
  text-decoration: none;
}

/* -------------------------
   ARTICLE CARD MEDIA
   ------------------------- */

.hotips-article-card__media{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--article-card-media-ratio);
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--article-card-media-bg-a),
    var(--article-card-media-bg-b)
  );
  isolation: isolate;
}

.hotips-article-card__media img,
.hotips-article-card__media .wp-post-image{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: var(--article-card-media-fit);
  object-position: var(--article-card-media-position);

  border: var(--border-none);
  border-radius: 0;

  transform: none;
  transition: transform var(--duration-mid) var(--ease-soft);
}

.hotips-article-card__link:hover .hotips-article-card__media img,
.hotips-article-card__link:focus-visible .hotips-article-card__media img,
.hotips-article-card:hover .hotips-article-card__media img{
  transform: scale(var(--article-card-media-scale-hover));
}

/* -------------------------
   ARTICLE CARD BODY
   ------------------------- */

.hotips-article-card__body{
  display: flex;
  flex-direction: column;
  gap: var(--article-card-body-gap);

  min-width: 0;
  flex: 1 1 auto;

  padding: var(--article-card-body-pad-y) var(--article-card-body-pad-x);
}

.hotips-article-card__label{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;

  min-height: var(--article-card-label-min-height);
  max-width: 100%;

  margin: var(--space-none);
  padding: var(--space-none) var(--article-card-label-pad-x);

  background: var(--article-card-label-bg);
  border: var(--article-card-label-border);
  border-radius: var(--article-card-label-radius);

  color: var(--article-card-label-text);
  font-family: var(--font-body);
  font-size: var(--article-card-label-font-size);
  font-weight: var(--article-card-label-font-weight);
  line-height: 1;
  letter-spacing: var(--article-card-label-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
}

.hotips-article-card__title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--article-card-title-lines);

  margin: var(--space-none);

  overflow: hidden;

  color: var(--article-card-title-color);
  font-family: var(--article-card-title-font);
  font-size: var(--article-card-title-font-size);
  font-weight: var(--article-card-title-font-weight);
  line-height: var(--article-card-title-line-height);
  letter-spacing: var(--article-card-title-letter-spacing);
}

.hotips-article-card__title a,
.hotips-article-card__title-link{
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
}

.hotips-article-card__title a:hover,
.hotips-article-card__title a:focus,
.hotips-article-card__title-link:hover,
.hotips-article-card__title-link:focus,
.hotips-article-card__link:hover .hotips-article-card__title,
.hotips-article-card__link:focus-visible .hotips-article-card__title{
  color: var(--article-card-title-color-hover);
  text-decoration: none;
}

.hotips-article-card__excerpt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--article-card-excerpt-lines);

  margin: var(--space-none);

  overflow: hidden;

  color: var(--article-card-excerpt-color);
  font-family: var(--font-body);
  font-size: var(--article-card-excerpt-font-size);
  font-weight: 500;
  line-height: var(--article-card-excerpt-line-height);
}

.hotips-area-landing .hotips-content-card--context-area-landing .hotips-content-card__body{
  min-height: 0;
}

.hotips-area-landing .hotips-content-card--context-area-landing .hotips-content-card__link{
  outline: 1px solid color-mix(
    in srgb,
    var(--color-white) 42%,
    transparent
  );
  outline-offset: -2px;
}

.hotips-area-landing .hotips-content-card--context-area-landing .hotips-content-card__label{
  min-height: 10px;
}

/* -------------------------
   ARTICLE CARD META / FOOTER
   ------------------------- */

.hotips-article-card__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--article-card-meta-gap);

  min-width: 0;
  margin-top: auto;
  padding-top: var(--article-card-meta-top-pad);

  border-top: var(--border-width-thin) var(--border-style-standard) var(--article-card-meta-border);
}

.hotips-article-card__meta-left{
  display: flex;
  align-items: center;
  gap: var(--article-card-meta-gap);

  min-width: 0;
  flex: 1 1 auto;
}

.hotips-article-card__meta-avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 var(--article-card-brand-size);
  width: var(--article-card-brand-size);
  height: var(--article-card-brand-size);
  min-width: var(--article-card-brand-size);
  min-height: var(--article-card-brand-size);

  padding: var(--space-none);
  margin: var(--space-none);

  background: var(--article-card-brand-bg);
  border: var(--border-none);
  border-radius: var(--article-card-brand-radius);
  box-shadow: none;

  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 800;
  line-height: 1;

  overflow: hidden;
}

.hotips-article-card__meta-avatar img,
.hotips-article-card__meta-avatar svg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: var(--article-card-brand-radius);
}

.hotips-article-card__meta-copy{
  display: flex;
  flex-direction: column;
  gap: var(--article-card-meta-copy-gap);

  min-width: 0;
  flex: 1 1 auto;
}

.hotips-article-card__meta-author,
.hotips-article-card__meta-sub{
  display: block;
  margin: var(--space-none);

  font-family: var(--font-body);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hotips-article-card__meta-author{
  color: var(--article-card-meta-author-color);
  font-size: var(--article-card-meta-author-size);
  font-weight: var(--article-card-meta-author-weight);
}

.hotips-article-card__meta-sub{
  color: var(--article-card-meta-sub-color);
  font-size: var(--article-card-meta-sub-size);
  font-weight: var(--article-card-meta-sub-weight);
}

.hotips-article-card__dot{
  display: inline-block;
  margin: var(--space-none) var(--space-xs);
  color: var(--article-card-dot-color);
}

.hotips-article-card__meta-save,
.hotips-article-card .hotips-panel__meta-action{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 var(--article-card-action-size);
  width: var(--article-card-action-size);
  height: var(--article-card-action-size);
  min-width: var(--article-card-action-size);
  min-height: var(--article-card-action-size);

  padding: var(--space-none);
  margin: var(--space-none);

  background: transparent;
  border: var(--border-none);
  border-radius: var(--radius-pill);
  box-shadow: none;

  color: var(--article-card-action-color);
  line-height: 1;
  text-decoration: none;

  cursor: pointer;

  transition:
    color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.hotips-article-card__meta-save:hover,
.hotips-article-card__meta-save:focus-visible,
.hotips-article-card .hotips-panel__meta-action:hover,
.hotips-article-card .hotips-panel__meta-action:focus-visible{
  color: var(--article-card-action-color-hover);
  background: color-mix(in srgb, var(--color-surface-soft) 70%, transparent);
  transform: translateY(var(--article-card-hover-lift));
  outline: none;
}

.hotips-article-card__meta-save svg,
.hotips-article-card .hotips-panel__meta-action svg{
  display: block;
  width: var(--article-card-action-icon-size);
  height: var(--article-card-action-icon-size);
  min-width: var(--article-card-action-icon-size);
  min-height: var(--article-card-action-icon-size);
}

/* -------------------------
   ARTICLE CARD HIGHLIGHT VARIANT
   ------------------------- */

.hotips-article-card--highlight{
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--article-card-border-color));
}

.hotips-article-card--highlight .hotips-article-card__label{
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-accent) 26%, var(--border-color-soft));
  color: var(--color-accent);
}

/* -------------------------
   ARTICLE CARD DOCK VARIANT
   For future sticky / docked feature rail.
   Not used for sidebar cards.
   ------------------------- */

.hotips-article-card--dock{
  min-height: var(--article-card-dock-min-height);
  border-radius: var(--article-card-dock-radius);
}

.hotips-article-card--dock .hotips-article-card__link{
  display: grid;
  grid-template-columns: var(--article-card-dock-media-size) minmax(0, 1fr);
  align-items: center;
  gap: var(--article-card-dock-gap);

  min-height: var(--article-card-dock-min-height);
  padding: var(--article-card-dock-pad);
}

.hotips-article-card--dock .hotips-article-card__media{
  width: var(--article-card-dock-media-size);
  height: var(--article-card-dock-media-size);
  aspect-ratio: auto;
  border-radius: var(--radius-xxs);
}

.hotips-article-card--dock .hotips-article-card__body{
  gap: var(--space-xs);
  padding: var(--space-none);
}

.hotips-article-card--dock .hotips-article-card__title{
  font-size: var(--article-card-dock-title-size);
  font-weight: var(--article-card-dock-title-weight);
  line-height: 1.12;
  -webkit-line-clamp: var(--article-card-dock-title-lines);
}

.hotips-article-card--dock .hotips-article-card__label,
.hotips-article-card--dock .hotips-article-card__excerpt,
.hotips-article-card--dock .hotips-article-card__meta{
  display: none;
}

/* -------------------------
   ARTICLE CARD CORNER RIBBON
   ------------------------- */

.hotips-article-card__corner-ribbon{
  position: absolute;
  top: var(--article-card-ribbon-offset);
  right: var(--article-card-ribbon-offset);
  z-index: 20;

  width: var(--article-card-ribbon-wrap-size);
  height: var(--article-card-ribbon-wrap-size);

  overflow: hidden;
  pointer-events: none;

  background: transparent !important;
  border: var(--border-none) !important;
  box-shadow: none !important;
}

.hotips-article-card__corner-ribbon > span{
  position: absolute;
  top: var(--article-card-ribbon-band-top);
  right: var(--article-card-ribbon-band-right);

  display: block;
  width: var(--article-card-ribbon-band-width);

  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);

  background: var(--article-card-ribbon-bg);
  color: var(--article-card-ribbon-text);

  border-top: var(--border-width-thin) var(--border-style-standard) var(--article-card-ribbon-border-top);
  border-bottom: var(--border-width-thin) var(--border-style-standard) var(--article-card-ribbon-border-bottom);
  box-shadow: var(--article-card-ribbon-shadow);

  font-family: var(--font-body);
  font-size: var(--article-card-ribbon-font-size);
  font-weight: var(--article-card-ribbon-font-weight);
  line-height: var(--article-card-ribbon-line-height);
  letter-spacing: var(--article-card-ribbon-letter-spacing);
  text-align: center;
  text-transform: uppercase;
}

.hotips-article-card__corner-ribbon > span::before,
.hotips-article-card__corner-ribbon > span::after{
  content: "";
  position: absolute;
  top: 100%;
  z-index: -1;

  border-top: var(--article-card-ribbon-fold-size) solid var(--article-card-ribbon-fold-color);
  border-bottom: var(--article-card-ribbon-fold-size) solid transparent;
}

.hotips-article-card__corner-ribbon > span::before{
  left: 0;
  border-left: var(--article-card-ribbon-fold-size) solid var(--article-card-ribbon-fold-color);
  border-right: var(--article-card-ribbon-fold-size) solid transparent;
}

.hotips-article-card__corner-ribbon > span::after{
  right: 0;
  border-right: var(--article-card-ribbon-fold-size) solid var(--article-card-ribbon-fold-color);
  border-left: var(--article-card-ribbon-fold-size) solid transparent;
}

/* -------------------------
   ARTICLE CARD RESPONSIVE
   ------------------------- */

@media (max-width: 767px){
  .hotips-article-card{
    --article-card-body-pad-y: var(--article-card-body-pad-y-mobile);
    --article-card-body-pad-x: var(--article-card-body-pad-x-mobile);
    --article-card-meta-gap: var(--article-card-meta-gap-mobile);
    --article-card-meta-top-pad: var(--article-card-meta-top-pad-mobile);

    --article-card-ribbon-wrap-size: var(--article-card-ribbon-wrap-size-mobile);
    --article-card-ribbon-band-width: var(--article-card-ribbon-band-width-mobile);
    --article-card-ribbon-band-top: var(--article-card-ribbon-band-top-mobile);
    --article-card-ribbon-band-right: var(--article-card-ribbon-band-right-mobile);
    --article-card-ribbon-line-height: var(--article-card-ribbon-line-height-mobile);
    --article-card-ribbon-font-size: var(--article-card-ribbon-font-size-mobile);
  }
}
}


/* =========================================================
   06. HERO
   ========================================================= */

:root{
  /* -------------------------
     STANDARD HERO TOKENS
     ------------------------- */
  --hero-margin-top: var(--space-md);
  --hero-margin-bottom: var(--space-xl);

  --hero-height: 330px;
  --hero-height-tablet: 300px;
  --hero-height-mobile: 220px;

  --hero-panel-width: 40%;
  --hero-media-width: 60%;

  --hero-bg: var(--color-surface);
  --hero-border-color: var(--border-color-strong);
  --hero-border: var(--border-width-thin) var(--border-style-standard) var(--hero-border-color);
  --hero-radius: var(--radius-cut-lg);
  --hero-shadow: var(--shadow-lg);

  --hero-panel-bg: var(--color-surface-soft);
  --hero-panel-gloss: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-white) 24%, transparent) 0%,
    transparent 100%
  );

  --hero-panel-slice-width: 140px;
  --hero-panel-slice-offset: -95px;
  --hero-panel-slice-skew: -16deg;
  --hero-panel-slice-shadow: 14px 0 22px color-mix(in srgb, var(--color-white) 10%, transparent);

  --hero-content-max-width: 600px;
  --hero-content-pad-top: 40px;
  --hero-content-pad-right: 68px;
  --hero-content-pad-bottom: 28px;
  --hero-content-pad-left: 28px;

  --hero-title-size: clamp(18px, 2.8vw, 28px);
  --hero-title-line-height: 1.08;
  --hero-title-letter-spacing: 0.005em;

  --hero-excerpt-max-width: 36ch;
  --hero-excerpt-margin-top: var(--space-xl);
  --hero-excerpt-size: clamp(var(--font-size-ui), 1.08vw, var(--font-size-md));
  --hero-excerpt-line-height: 1.4;
  --hero-excerpt-weight: 500;

  --hero-media-bg: color-mix(in srgb, var(--color-surface-soft) 42%, var(--color-surface) 58%);
  --hero-media-gloss: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-white) 6%, transparent),
    transparent 30%
  );

  --hero-media-fade-left: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-surface-soft) 68%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-soft) 12%, transparent) 12%,
    transparent 22%
  );

  --hero-media-fade-right: linear-gradient(
    to left,
    transparent 58%,
    color-mix(in srgb, var(--color-white) 6%, transparent) 100%
  );

  --hero-image-fit: contain;
  --hero-image-position: right center;

  --hero-logo-margin-bottom: var(--space-2xl);
  --hero-logo-max-width: 720px;
  --hero-logo-max-height: 180px;

  /* -------------------------
     STANDARD HERO TABLET TOKENS
     ------------------------- */
  --hero-panel-width-tablet: 36%;
  --hero-media-width-tablet: 64%;
  --hero-panel-slice-width-tablet: 110px;
  --hero-panel-slice-offset-tablet: -72px;
  --hero-content-max-width-tablet: 500px;
  --hero-content-pad-top-tablet: 30px;
  --hero-content-pad-right-tablet: 54px;
  --hero-content-pad-bottom-tablet: 24px;
  --hero-content-pad-left-tablet: 24px;
  --hero-title-size-tablet: clamp(24px, 3vw, 34px);
  --hero-title-line-height-tablet: 1.1;
  --hero-excerpt-max-width-tablet: 32ch;
  --hero-excerpt-line-height-tablet: 1.55;

  /* -------------------------
     STANDARD HERO MOBILE TOKENS
     ------------------------- */
  --hero-margin-top-mobile: var(--space-sm);
  --hero-margin-bottom-mobile: var(--space-xl);
  --hero-content-pad-top-mobile: 22px;
  --hero-content-pad-right-mobile: var(--space-xl);
  --hero-content-pad-bottom-mobile: 18px;
  --hero-content-pad-left-mobile: var(--space-xl);
  --hero-title-size-mobile: clamp(26px, 8vw, 38px);
  --hero-title-line-height-mobile: 1.06;
  --hero-excerpt-size-mobile: var(--font-size-md);
  --hero-excerpt-line-height-mobile: 1.58;
}

/* -------------------------
   STANDARD HERO SHELL
   ------------------------- */

.hotips-hero{
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: var(--hero-margin-top) var(--space-none) var(--hero-margin-bottom);
  padding: var(--space-none);
  box-sizing: border-box;
}

.hotips-hero__inner{
  display: grid;
  grid-template-columns:
    minmax(0, var(--hero-panel-width))
    minmax(0, var(--hero-media-width));
  align-items: stretch;

  min-height: var(--hero-height);
  max-height: var(--hero-height);

  overflow: hidden;
  isolation: isolate;

  background: var(--hero-bg);
  border: var(--hero-border);
  border-radius: var(--hero-radius);
  box-shadow: var(--hero-shadow);
}

/* -------------------------
   STANDARD HERO PANEL
   ------------------------- */

.hotips-hero__panel{
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  min-width: 0;
  min-height: var(--hero-height);
  max-height: var(--hero-height);

  background:
    var(--hero-panel-gloss),
    var(--hero-panel-bg);

  overflow: visible;
  clip-path: none;
}

.hotips-hero__panel::after{
  content: "";
  position: absolute;
  top: var(--space-none);
  right: var(--hero-panel-slice-offset);
  z-index: 3;

  width: var(--hero-panel-slice-width);
  height: 100%;

  background: var(--hero-panel-bg);
  box-shadow: var(--hero-panel-slice-shadow);

  transform: skewX(var(--hero-panel-slice-skew));
  transform-origin: top right;

  pointer-events: none;
}

.hotips-hero__content{
  position: relative;
  z-index: 4;

  width: 100%;
  max-width: var(--hero-content-max-width);
  min-width: 0;

  padding:
    var(--hero-content-pad-top)
    var(--hero-content-pad-right)
    var(--hero-content-pad-bottom)
    var(--hero-content-pad-left);

  box-sizing: border-box;
}

.hotips-hero__title{
  margin: var(--space-none);
  padding: var(--space-none);

  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--hero-title-size);
  font-weight: 700;
  line-height: var(--hero-title-line-height);
  letter-spacing: var(--hero-title-letter-spacing);

  text-wrap: balance;
}

.hotips-hero__excerpt{
  max-width: var(--hero-excerpt-max-width);
  margin: var(--hero-excerpt-margin-top) var(--space-none) var(--space-none);

  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--hero-excerpt-size);
  font-weight: var(--hero-excerpt-weight);
  line-height: var(--hero-excerpt-line-height);
}

.hotips-hero__excerpt > *:first-child{
  margin-top: var(--space-none);
}

.hotips-hero__excerpt > *:last-child{
  margin-bottom: var(--space-none);
}
/* -------------------------
   STANDARD HERO MEDIA
   ------------------------- */

.hotips-hero__media{
  position: relative;
  z-index: 1;

  display: flex;
  align-items: stretch;
  justify-content: flex-end;

  min-width: 0;
  min-height: var(--hero-height);
  max-height: var(--hero-height);
  height: 100%;

  margin-left: var(--space-none);

  background:
    var(--hero-media-gloss),
    var(--hero-media-bg);

  overflow: hidden;
}

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 5%,
    rgba(0,0,0,0.72) 14%,
    rgba(0,0,0,1) 24%,
    rgba(0,0,0,1) 100%
  );

  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.18) 5%,
    rgba(0,0,0,0.72) 14%,
    rgba(0,0,0,1) 24%,
    rgba(0,0,0,1) 100%
  );

  -webkit-mask-mode: alpha;
  mask-mode: alpha;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.hotips-hero__media > *{
  flex: 0 0 auto;
}

.hotips-hero__image,
.hotips-hero__image--fallback{
  display: block;
  width: auto;
  height: 100%;
  min-height: var(--hero-height);
  max-height: var(--hero-height);
  max-width: none;

  margin-left: auto;

  object-fit: var(--hero-image-fit);
  object-position: var(--hero-image-position);

  border: var(--border-none);
  border-radius: 0;

  transform: none;
}

.hotips-hero__image--fallback{
  width: 100%;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-dark) 8%, transparent),
      color-mix(in srgb, var(--color-accent) 8%, transparent)
    ),
    var(--color-surface-soft);
}

.hotips-hero__media::before,
.hotips-hero__media::after{
  content: "";
  position: absolute;
  inset: var(--space-none);
  z-index: 2;
  pointer-events: none;
}

.hotips-hero__media::before{
  background: none;
}

.hotips-hero__media::after{
  background: none;
}

/* -------------------------
   STANDARD HERO LOGO OPTION
   ------------------------- */

.hotips-hero__logo{
  max-width: var(--hero-logo-max-width);
  margin: var(--space-none) var(--space-none) var(--hero-logo-margin-bottom);
}

.hotips-hero__logo .custom-logo-link{
  display: inline-block;
  line-height: 0;
}

.hotips-hero__logo img{
  display: block;
  width: auto;
  max-width: 100%;
  max-height: var(--hero-logo-max-height);
  height: auto;
}

/* -------------------------
   STANDARD HERO RESPONSIVE
   ------------------------- */

@media (max-width: 1024px){
  .hotips-hero__inner{
    grid-template-columns:
      minmax(0, var(--hero-panel-width-tablet))
      minmax(0, var(--hero-media-width-tablet));

    min-height: var(--hero-height-tablet);
    max-height: var(--hero-height-tablet);
  }

  .hotips-hero__panel,
  .hotips-hero__media,
  .hotips-hero__image,
  .hotips-hero__image--fallback{
    min-height: var(--hero-height-tablet);
    max-height: var(--hero-height-tablet);
  }

  .hotips-hero__panel::after{
    right: var(--hero-panel-slice-offset-tablet);
    width: var(--hero-panel-slice-width-tablet);
  }

  .hotips-hero__content{
    max-width: var(--hero-content-max-width-tablet);
    padding:
      var(--hero-content-pad-top-tablet)
      var(--hero-content-pad-right-tablet)
      var(--hero-content-pad-bottom-tablet)
      var(--hero-content-pad-left-tablet);
  }

  .hotips-hero__title{
    font-size: var(--hero-title-size-tablet);
    line-height: var(--hero-title-line-height-tablet);
  }

  .hotips-hero__excerpt{
    max-width: var(--hero-excerpt-max-width-tablet);
    line-height: var(--hero-excerpt-line-height-tablet);
  }
}

@media (max-width: 767px){
  .hotips-hero{
    margin: var(--hero-margin-top-mobile) var(--space-none) var(--hero-margin-bottom-mobile);
  }

  .hotips-hero__inner{
    grid-template-columns: 1fr;
    min-height: auto;
    max-height: none;
    border-radius: var(--hero-radius);
  }

  .hotips-hero__panel{
    order: 1;
    min-height: auto;
    max-height: none;
  }

  .hotips-hero__panel::after{
    display: none;
  }

  .hotips-hero__content{
    max-width: 100%;
    padding:
      var(--hero-content-pad-top-mobile)
      var(--hero-content-pad-right-mobile)
      var(--hero-content-pad-bottom-mobile)
      var(--hero-content-pad-left-mobile);
  }

  .hotips-hero__title{
    font-size: var(--hero-title-size-mobile);
    line-height: var(--hero-title-line-height-mobile);
  }

  .hotips-hero__excerpt{
    max-width: 100%;
    margin-top: var(--space-md);
    font-size: var(--hero-excerpt-size-mobile);
    line-height: var(--hero-excerpt-line-height-mobile);
  }

  .hotips-hero__media{
    order: 2;
    min-height: var(--hero-height-mobile);
    max-height: var(--hero-height-mobile);
    height: var(--hero-height-mobile);
    margin-left: var(--space-none);
  }

  .hotips-hero__image,
  .hotips-hero__image--fallback{
    width: 100%;
    min-height: var(--hero-height-mobile);
    max-height: var(--hero-height-mobile);
    height: var(--hero-height-mobile);
    object-fit: cover;
  }
}

/* =========================================================
   07. PAGE LAYOUT
   ========================================================= */

:root{
  /* -------------------------
     PAGE SHELL TOKENS
     ------------------------- */
  --page-shell-pad-top: var(--space-none);
  --page-shell-pad-bottom: 24px;

  --layout-gap: var(--space-xl);
  --layout-sidebar-gap: var(--space-lg);
  --layout-sidebar-width: var(--sidebar-width);

  --entry-bg: var(--color-surface);
  --entry-border: var(--border-thin);
  --entry-border-color: var(--border-color);
  --entry-radius: var(--radius-cut-sm);
  --entry-shadow: var(--card-shadow);
  --entry-content-pad: var(--space-md);

  --entry-list-indent: 1.25rem;

  --entry-table-cell-pad-y: var(--space-md);
  --entry-table-cell-pad-x: var(--space-lg);
  --entry-table-border: var(--border-thin);
  --entry-table-border-color: var(--border-color);

  --bottom-region-pad-bottom: 42px;
  --bottom-region-bg: var(--color-surface);
  --bottom-region-border: var(--border-width-thin) dashed var(--border-color);
  --bottom-region-radius: var(--radius-cut-sm);
  --bottom-region-pad-y: 24px;
  --bottom-region-pad-x: 28px;
  --bottom-region-text: var(--color-text-muted);

  /* -------------------------
     PAGE LAYOUT MOBILE TOKENS
     ------------------------- */
  --page-shell-pad-bottom-mobile: var(--space-xl);
  --entry-content-pad-mobile: var(--space-none);
  --bottom-region-pad-y-mobile: 18px;
  --bottom-region-pad-x-mobile: 20px;
}

/* -------------------------
   PAGE SHELL
   ------------------------- */

.hotips-page-shell{
  width: 100%;
  min-width: 0;
  padding:
    var(--page-shell-pad-top)
    var(--space-none)
    var(--page-shell-pad-bottom);
}

/* -------------------------
   MAIN LAYOUT GRID
   ------------------------- */

.hotips-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-gap);
  align-items: start;
  width: 100%;
  min-width: 0;
}

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

.hotips-layout--has-sidebar{
  grid-template-columns: minmax(0, 1fr) var(--layout-sidebar-width);
  gap: var(--layout-sidebar-gap);
}

.hotips-primary,
.hotips-layout__main,
.hotips-layout__content{
  width: 100%;
  min-width: 0;
}

.hotips-primary--full,
.hotips-entry--full{
  width: 100%;
  max-width: 100%;
}

/* -------------------------
   ENTRY SURFACE
   ------------------------- */

.hotips-entry{
  width: 100%;
  min-width: 0;

  background: var(--entry-bg);
  border: var(--entry-border);
  border-color: var(--entry-border-color);
  border-radius: var(--entry-radius);
  box-shadow: var(--entry-shadow);

  color: var(--color-text);
  font-family: var(--font-body);

  overflow: hidden;
}

.hotips-entry--plain{
  background: transparent;
  border: var(--border-none);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.hotips-entry__content{
  width: 100%;
  min-width: 0;
  padding: var(--entry-content-pad);
}

.hotips-entry__content > *:first-child{
  margin-top: var(--space-none);
}

.hotips-entry__content > *:last-child{
  margin-bottom: var(--space-none);
}

/* -------------------------
   ENTRY TEXT NORMALISATION
   ------------------------- */

.hotips-entry__content p,
.hotips-entry__content li{
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: var(--line-height-body);
}

.hotips-entry__content ul,
.hotips-entry__content ol{
  padding-left: var(--entry-list-indent);
}

.hotips-entry__content img,
.hotips-entry__content iframe,
.hotips-entry__content video,
.hotips-entry__content embed,
.hotips-entry__content object{
  max-width: 100%;
}

.hotips-entry__content iframe,
.hotips-entry__content video,
.hotips-entry__content embed,
.hotips-entry__content object{
  display: block;
}

/* -------------------------
   ENTRY LINKS
   ------------------------- */

.hotips-entry__content a,
.hotips-bottom-region a{
  color: var(--color-link);
  text-decoration: none;
  text-underline-offset: var(--space-xxs);
  transition:
    color var(--duration-fast) var(--ease-standard),
    text-decoration-color var(--duration-fast) var(--ease-standard);
}

.hotips-entry__content a:hover,
.hotips-entry__content a:focus,
.hotips-bottom-region a:hover,
.hotips-bottom-region a:focus{
  color: var(--color-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

/* -------------------------
   ENTRY TABLES
   ------------------------- */

.hotips-entry__content table{
  width: 100%;
  border-collapse: collapse;
}

.hotips-entry__content th,
.hotips-entry__content td{
  padding: var(--entry-table-cell-pad-y) var(--entry-table-cell-pad-x);
  border: var(--entry-table-border);
  border-color: var(--entry-table-border-color);
  text-align: left;
  vertical-align: top;
}

.hotips-entry__content th{
  color: var(--color-heading);
  font-weight: 700;
}


/* =========================================================
   SINGLE BLOG — MATCH GLOBAL CONTEXT HERO WIDTH
   - Article + sidebar width now follows the reusable hero shell
   - Hero remains the source of truth
   - Sidebar stays fixed; article column takes the remaining space
   ========================================================= */

.hotips-page-shell--single-blog{
  --single-blog-page-gutter: var(
    --mht-context-shell-page-pad,
    clamp(10px, 1.4vw, 20px)
  );

  --single-blog-container-width: var(
    --mht-context-shell-width,
    min(
      calc(100vw - (var(--single-blog-page-gutter) * 2)),
      1440px
    )
  );

  --single-blog-sidebar-width: 310px;
  --single-blog-sidebar-gap: var(--space-lg, 13px);

  --single-blog-main-width: calc(
    var(--single-blog-container-width)
    - var(--single-blog-sidebar-gap)
    - var(--single-blog-sidebar-width)
  );

  --single-blog-entry-pad-y: 16px;
  --single-blog-entry-pad-x: 18px;

  --layout-sidebar-width: var(--single-blog-sidebar-width);
  --layout-sidebar-gap: var(--single-blog-sidebar-gap);

  --entry-content-pad:
    var(--single-blog-entry-pad-y)
    var(--single-blog-entry-pad-x);

  padding-top: var(--space-sm);
margin-top: 0;

  overflow: visible;
}

/* Container matches the reusable context hero shell */
.hotips-page-shell--single-blog .hotips-container{
  width: var(--single-blog-container-width) !important;
  max-width: var(--single-blog-container-width) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

/* Exact article + sidebar grid */
.hotips-page-shell--single-blog .hotips-layout--has-sidebar{
  display: grid !important;

  grid-template-columns:
    minmax(0, var(--single-blog-main-width))
    minmax(0, var(--single-blog-sidebar-width)) !important;

  column-gap: var(--single-blog-sidebar-gap) !important;
  row-gap: var(--layout-gap, 28px) !important;

  align-items: start !important;
  justify-content: stretch !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Main column containment */
.hotips-page-shell--single-blog .hotips-primary,
.hotips-page-shell--single-blog .hotips-single-blog-main,
.hotips-page-shell--single-blog .hotips-entry,
.hotips-page-shell--single-blog .hotips-entry__content,
.hotips-page-shell--single-blog .hotips-single-blog-content,
.hotips-page-shell--single-blog .hotips-single-blog-body{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Keep article content from physically spilling into sidebar */
.hotips-page-shell--single-blog .hotips-entry--single-blog{
  overflow: hidden !important;
}

/* Sidebar column containment */
.hotips-page-shell--single-blog .hotips-layout--has-sidebar > aside,
.hotips-page-shell--single-blog .hotips-sidebar,
.hotips-page-shell--single-blog .hotips-blog-sidebar{
  width: 100% !important;
  max-width: var(--single-blog-sidebar-width) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Sidebar children must fit their column */
.hotips-page-shell--single-blog .hotips-sidebar *,
.hotips-page-shell--single-blog .hotips-blog-sidebar *{
  max-width: 100%;
  box-sizing: border-box;
}

/* Narrow laptop: keep two columns, but let article absorb less width */
@media (max-width: 1160px){
  .hotips-page-shell--single-blog{
    --single-blog-sidebar-width: 285px;
    --single-blog-sidebar-gap: var(--space-md, 10px);
    --single-blog-entry-pad-x: 14px;
  }
}

/* Small tablet / narrow laptop: still two columns */
@media (max-width: 1040px){
  .hotips-page-shell--single-blog{
    --single-blog-sidebar-width: 265px;
    --single-blog-sidebar-gap: var(--space-sm, 7px);
    --single-blog-entry-pad-x: 12px;
  }
}

/* Collapse later */
@media (max-width: 940px){
  .hotips-page-shell--single-blog{
    --single-blog-sidebar-width: 100%;
    --single-blog-sidebar-gap: 24px;
    --single-blog-main-width: 100%;
  }

  .hotips-page-shell--single-blog .hotips-layout--has-sidebar{
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .hotips-page-shell--single-blog .hotips-layout--has-sidebar > aside,
  .hotips-page-shell--single-blog .hotips-sidebar,
  .hotips-page-shell--single-blog .hotips-blog-sidebar{
    max-width: 100% !important;
  }
}

/* Mobile */
@media (max-width: 767px){
  .hotips-page-shell--single-blog{
    --single-blog-page-gutter: 12px;
    --single-blog-entry-pad-y: 12px;
    --single-blog-entry-pad-x: 12px;
  }
}

/* -------------------------
   BOTTOM REGION
   ------------------------- */

.hotips-bottom-region{
  width: 100%;
  min-width: 0;
  padding:
    var(--space-none)
    var(--space-none)
    var(--bottom-region-pad-bottom);
}

.hotips-bottom-region__inner{
  width: 100%;
  min-width: 0;
  padding: var(--bottom-region-pad-y) var(--bottom-region-pad-x);

  background: var(--bottom-region-bg);
  border: var(--bottom-region-border);
  border-radius: var(--bottom-region-radius);
}

.hotips-bottom-region__inner > *:first-child{
  margin-top: var(--space-none);
}

.hotips-bottom-region__inner > *:last-child{
  margin-bottom: var(--space-none);
}

.hotips-bottom-region__placeholder{
  margin: var(--space-none);
  color: var(--bottom-region-text);
  font-family: var(--font-body);
  font-size: var(--font-size-ui);
  line-height: var(--line-height-body);
}

/* =========================================================
   BOTTOM DISCOVERY — DISCLAIMER NOTE
   - sits under the carousel rail
   - styled like an indented/highlight reading note
   ========================================================= */

.hotips-bottom-discovery__disclaimer{
  position: relative;
  z-index: 1;

  max-width: 760px;
  margin: var(--space-md) var(--space-none) var(--space-none);
  padding: var(--space-md) var(--space-lg);

  border-left: var(--border-width-lg) var(--border-style-standard) var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-muted) 58%, transparent) 100%
    );

  color: var(--color-text-muted);

  font-family: var(--font-body);
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);

  box-shadow: var(--shadow-sm);
}

.hotips-bottom-discovery__disclaimer strong{
  color: var(--color-heading);
  font-weight: 850;
}

.hotips-bottom-discovery__disclaimer span{
  display: inline;
}

/* -------------------------
   PAGE LAYOUT RESPONSIVE
   ------------------------- */

@media (max-width: 980px){
  .hotips-layout--has-sidebar{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px){
  .hotips-page-shell{
    padding-bottom: var(--page-shell-pad-bottom-mobile);
  }

  .hotips-entry__content{
    padding: var(--entry-content-pad-mobile);
  }

  .hotips-bottom-region__inner{
    padding: var(--bottom-region-pad-y-mobile) var(--bottom-region-pad-x-mobile);
  }
}

/* =========================================================
   09. BLOG ATTACHED MODULES + DISCLOSURE
   ========================================================= */

:root{
  /* -------------------------
     BLOG ATTACHED MODULE TOKENS
     ------------------------- */
  --attached-module-margin-bottom: var(--space-2xl);
  --attached-module-title-margin-bottom: var(--space-md);
  --attached-module-title-size: var(--blog-h3-size);

  /* -------------------------
     DISCLOSURE NOTE TOKENS
     ------------------------- */
  --disclosure-note-bg: var(--color-surface);
  --disclosure-note-border: var(--border-thin);
  --disclosure-note-border-color: var(--border-color-strong);
  --disclosure-note-accent-width: var(--border-width-lg);
  --disclosure-note-accent-color: var(--color-dark);
  --disclosure-note-radius: var(--radius-cut-md);
  --disclosure-note-shadow: var(--shadow-sm);
  --disclosure-note-pad: var(--space-xl);

  --disclosure-note-title-size: var(--font-size-content-h3);
  --disclosure-note-title-margin-bottom: var(--space-md);

  --disclosure-note-content-size: var(--font-size-ui-sm);
  --disclosure-note-content-line-height: var(--blog-body-line);
  --disclosure-note-paragraph-margin-bottom: var(--space-md);
}

/* -------------------------
   ATTACHED MODULE WRAPPER
   ------------------------- */

.my-blog-builder__attached-module{
  width: 100%;
  min-width: 0;
  margin:
    var(--space-none)
    var(--space-none)
    var(--attached-module-margin-bottom);
}

.my-blog-builder__attached-module-title{
  margin:
    var(--space-none)
    var(--space-none)
    var(--attached-module-title-margin-bottom);

  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--attached-module-title-size);
  font-weight: 700;
  line-height: var(--blog-heading-line);
}

.my-blog-builder__attached-module-content{
  width: 100%;
  min-width: 0;
}

.my-blog-builder__attached-module-content > *:first-child{
  margin-top: var(--space-none);
}

.my-blog-builder__attached-module-content > *:last-child{
  margin-bottom: var(--space-none);
}

.my-blog-builder__attached-module--shortcode_block,
.my-blog-builder__attached-module--reusable_keypoints,
.my-blog-builder__attached-module--affiliate-banner,
.my-blog-builder__attached-module--disclosure-note{
  width: 100%;
  max-width: 100%;
}

/* =========================================================
   SINGLE BLOG TEMPLATE WIDTH FIX
   - adjust the actual variables used by the layout system
   ========================================================= */

.hotips-page-shell--single-blog{
  --layout-sidebar-width: clamp(250px, 20vw, 310px);
  --layout-sidebar-gap: clamp(18px, 2.2vw, 32px);
  --entry-content-pad: clamp(14px, 1.6vw, 24px);
}

/* KeyPoints needs shadows/panels/pseudo-elements not to be clipped */
.hotips-page-shell--single-blog .hotips-entry--single-blog{
  overflow: visible;
}

/* Keep the topper image clipped if it relies on rounded corners */
.hotips-page-shell--single-blog .hotips-single-blog-featured-image{
  overflow: hidden;
}

/* =========================================================
   SINGLE BLOG — ATTACHED MODULE TOP GAP
   ========================================================= */

.hotips-page-shell--single-blog .my-blog-builder__attached-module:first-child{
  margin-top: var(--space-none) !important;
  padding-top: var(--space-none) !important;
}

.hotips-page-shell--single-blog .my-blog-builder__attached-module-content > *:first-child{
  margin-top: var(--space-none) !important;
}

/* -------------------------
   DISCLOSURE NOTE
   ------------------------- */

.my-blog-builder__attached-module--disclosure-note{
  margin:
    var(--space-none)
    var(--space-none)
    var(--attached-module-margin-bottom);
}

.my-blog-builder__disclosure-note{
  width: 100%;
  min-width: 0;
  margin: var(--space-none);
  padding: var(--disclosure-note-pad);

  background: var(--disclosure-note-bg);
  border: var(--disclosure-note-border);
  border-color: var(--disclosure-note-border-color);
  border-left: var(--disclosure-note-accent-width) solid var(--disclosure-note-accent-color);
  border-radius: var(--disclosure-note-radius);
  box-shadow: var(--disclosure-note-shadow);

  color: var(--color-text);
  font-family: var(--font-body);
}

.my-blog-builder__disclosure-note-title{
  margin:
    var(--space-none)
    var(--space-none)
    var(--disclosure-note-title-margin-bottom);

  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--disclosure-note-title-size);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

.my-blog-builder__disclosure-note-content{
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--disclosure-note-content-size);
  line-height: var(--disclosure-note-content-line-height);
}

.my-blog-builder__disclosure-note-content p{
  margin:
    var(--space-none)
    var(--space-none)
    var(--disclosure-note-paragraph-margin-bottom);
}

.my-blog-builder__disclosure-note-content p:last-child{
  margin-bottom: var(--space-none);
}

.my-blog-builder__disclosure-note-content ul,
.my-blog-builder__disclosure-note-content ol{
  margin:
    var(--space-none)
    var(--space-none)
    var(--disclosure-note-paragraph-margin-bottom);
  padding-left: 1.25em;
}

.my-blog-builder__disclosure-note-content li{
  margin:
    var(--space-none)
    var(--space-none)
    var(--space-xs);
}

.my-blog-builder__disclosure-note-content a{
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: var(--space-xxs);
}

.my-blog-builder__disclosure-note-content a:hover,
.my-blog-builder__disclosure-note-content a:focus{
  color: var(--color-link-hover);
}

/* -------------------------
   ATTACHED MODULE RESPONSIVE
   ------------------------- */

@media (max-width: 767px){
  .my-blog-builder__disclosure-note{
    padding: var(--space-xl);
    border-radius: var(--radius-md);
  }

  .my-blog-builder__disclosure-note-content{
    font-size: var(--font-size-body-mobile);
    line-height: var(--line-height-body);
  }
}

/* =========================================================
   10. BLOG FILTERS
   ========================================================= */

:root{
  /* -------------------------
     BLOG FILTER BAR TOKENS
     ------------------------- */
  --blog-filter-bar-gap: var(--space-lg);

  --blog-filter-area-grid-gap: var(--space-sm);
  --blog-filter-area-columns: 6;
  --blog-filter-area-columns-tablet: 3;
  --blog-filter-area-columns-mobile: 2;

  --blog-filter-button-min-height: 40px;
  --blog-filter-button-pad-y: var(--space-sm);
  --blog-filter-button-pad-x: var(--space-sm);
  --blog-filter-button-radius: var(--radius-sm);
  --blog-filter-button-bg: linear-gradient(
    180deg,
    var(--button-blue-soft-bg),
    color-mix(in srgb, var(--button-blue-soft-border) 28%, var(--color-white) 72%)
  );
  --blog-filter-button-bg-hover: linear-gradient(
    180deg,
    var(--button-blue-soft-bg-hover),
    color-mix(in srgb, var(--button-blue-soft-border) 34%, var(--color-white) 66%)
  );
  --blog-filter-button-bg-active: linear-gradient(
    180deg,
    var(--color-white),
    var(--button-surface-bg-hover)
  );
  --blog-filter-button-border: var(--button-blue-soft-border);
  --blog-filter-button-border-hover: var(--border-color-strong);
  --blog-filter-button-border-active: var(--color-accent);
  --blog-filter-button-text: var(--color-dark);
  --blog-filter-button-shadow: var(--shadow-sm);
  --blog-filter-button-shadow-hover: var(--shadow-md);
  --blog-filter-button-font-size: var(--font-size-sm);

  --blog-filter-icon-size: 16px;
  --blog-filter-icon-size-mobile: 30px;

  --blog-filter-sort-gap: var(--space-lg);
  --blog-filter-sort-font-size: var(--font-size-ui-sm);
  --blog-filter-sort-font-size-mobile: var(--font-size-md);

  --blog-active-filters-margin-top: var(--space-xxs);
  --blog-active-filters-margin-bottom: var(--space-sm);
  --blog-active-filters-pad-y: var(--space-sm);
  --blog-active-filters-pad-x: var(--space-lg);
  --blog-active-filters-radius: var(--radius-xs);
  --blog-active-filters-bg: var(--button-neutral-soft-bg);
  --blog-active-filters-border: var(--border-color);
  --blog-active-filters-accent-width: 3px;
  --blog-active-filters-size: var(--font-size-ui-sm);

  --blog-filter-dropdown-max-width: 286px;
  --blog-filter-dropdown-min-height: 42px;
  --blog-filter-dropdown-pad-y: var(--space-sm);
  --blog-filter-dropdown-pad-right: 36px;
  --blog-filter-dropdown-pad-left: var(--space-lg);
  --blog-filter-dropdown-radius: var(--radius-sm);
  --blog-filter-dropdown-bg: var(--color-white);
  --blog-filter-dropdown-border: var(--border-color);
  --blog-filter-dropdown-border-hover: var(--color-accent-muted);
  --blog-filter-dropdown-size: var(--font-size-ui-sm);

  --blog-filter-select-arrow-color: rgba(46,59,85,0.65);
  --blog-filter-select-arrow-size: 6px;
  --blog-filter-select-arrow-right-a: 18px;
  --blog-filter-select-arrow-right-b: 12px;
}

/* -------------------------
   FILTER BAR STRUCTURE
   ------------------------- */

.blog-filter-bar{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--blog-filter-bar-gap);
  width: 100%;
  min-width: 0;
}

.blog-filter-links{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: 100%;
  min-width: 0;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;

  list-style: none;
}

/* -------------------------
   AREA FILTER BUTTON GRID
   ------------------------- */

.blog-filter-links--areas{
  display: grid !important;
  grid-template-columns: repeat(var(--blog-filter-area-columns), minmax(0, 1fr));
  gap: var(--blog-filter-area-grid-gap) !important;

  width: 100%;
  min-width: 0;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;
}

.blog-filter-links--areas .blog-filter-button{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-sm) !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: var(--blog-filter-button-min-height);
  padding: var(--blog-filter-button-pad-y) var(--blog-filter-button-pad-x) !important;
  box-sizing: border-box;

  background: var(--blog-filter-button-bg) !important;
  border: var(--border-thin) !important;
  border-color: var(--blog-filter-button-border) !important;
  border-radius: var(--blog-filter-button-radius) !important;
  box-shadow:
    var(--blog-filter-button-shadow),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 65%, transparent) !important;

  color: var(--blog-filter-button-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--blog-filter-button-font-size) !important;
  font-weight: 700 !important;
  line-height: var(--line-height-tight) !important;
  text-align: center;
  text-decoration: none !important;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard) !important;
}

.blog-filter-links--areas .blog-filter-button:hover,
.blog-filter-links--areas .blog-filter-button:focus-visible{
  background: var(--blog-filter-button-bg-hover) !important;
  border-color: var(--blog-filter-button-border-hover) !important;
  color: var(--blog-filter-button-text) !important;
  box-shadow:
    var(--blog-filter-button-shadow-hover),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 72%, transparent) !important;
  transform: translateY(-1px);
  outline: none;
}

.blog-filter-links--areas .blog-filter-button.is-active,
.blog-filter-links--areas .blog-filter-button[aria-current="page"]{
  background: var(--blog-filter-button-bg-active) !important;
  border-color: var(--blog-filter-button-border-active) !important;
  color: var(--blog-filter-button-text) !important;
  box-shadow:
    var(--blog-filter-button-shadow-hover),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 82%, transparent) !important;
}

.blog-filter-links--areas .blog-filter-button::before{
  content: "" !important;
  display: none !important;
}

.blog-filter-links--areas .blog-filter-button__icon{
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 var(--blog-filter-icon-size);
  width: var(--blog-filter-icon-size) !important;
  height: var(--blog-filter-icon-size) !important;
}

.blog-filter-links--areas .blog-filter-button__icon img{
  display: block;
  width: var(--blog-filter-icon-size) !important;
  height: var(--blog-filter-icon-size) !important;
  max-width: none !important;
  object-fit: contain;
}

.blog-filter-links--areas .blog-filter-button__text{
  display: block;
  flex: 1 1 auto;

  width: 100%;
  min-width: 0;
  max-width: 100%;

  text-align: center;
  line-height: var(--line-height-tight);
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* -------------------------
   SORT LINKS
   ------------------------- */

.blog-filter-links--sort{
  gap: var(--blog-filter-sort-gap) !important;
  width: auto;
}

.blog-filter-links--sort .blog-filter-sort{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: var(--space-xs) var(--space-none) !important;
  margin: var(--space-none) !important;

  background: transparent !important;
  border: var(--border-none) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: var(--color-dark) !important;
  font-family: var(--font-body) !important;
  font-size: var(--blog-filter-sort-font-size) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;

  transition:
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.blog-filter-links--sort .blog-filter-sort:hover,
.blog-filter-links--sort .blog-filter-sort:focus-visible,
.blog-filter-links--sort .blog-filter-sort.is-active,
.blog-filter-links--sort .blog-filter-sort[aria-current="page"]{
  background: transparent !important;
  border: var(--border-none) !important;
  box-shadow: none !important;
  color: var(--color-accent) !important;
  transform: none !important;
  outline: none;
}

.blog-filter-links--sort .blog-filter-sort.is-active,
.blog-filter-links--sort .blog-filter-sort[aria-current="page"]{
  font-weight: 700 !important;
}

/* -------------------------
   ACTIVE FILTER SUMMARY
   ------------------------- */

.blog-active-filters{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  width: auto;
  max-width: 100%;
  margin:
    var(--blog-active-filters-margin-top)
    var(--space-none)
    var(--blog-active-filters-margin-bottom);
  padding: var(--blog-active-filters-pad-y) var(--blog-active-filters-pad-x);

  background: var(--blog-active-filters-bg);
  border: var(--border-thin);
  border-color: var(--blog-active-filters-border) !important;
  border-left: var(--blog-active-filters-accent-width) solid var(--color-accent);
  border-radius: var(--blog-active-filters-radius);
  box-shadow: none;

  color: var(--color-dark);
  font-family: var(--font-body) !important;
  font-size: var(--blog-active-filters-size);
  font-weight: 500;
  line-height: 1.35;
}

/* -------------------------
   MOBILE / DROPDOWN FILTER
   ------------------------- */

.blog-filter-dropdown{
  width: 100%;
  max-width: var(--blog-filter-dropdown-max-width);
  margin-top: var(--space-xxs);
}

.blog-filter-dropdown select{
  width: 100%;
  min-height: var(--blog-filter-dropdown-min-height);
  padding:
    var(--blog-filter-dropdown-pad-y)
    var(--blog-filter-dropdown-pad-right)
    var(--blog-filter-dropdown-pad-y)
    var(--blog-filter-dropdown-pad-left);

  background-color: var(--blog-filter-dropdown-bg);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-surface-muted) 98%, transparent),
      color-mix(in srgb, var(--color-surface-soft) 72%, transparent)
    ),
    linear-gradient(
      45deg,
      transparent 50%,
      var(--blog-filter-select-arrow-color) 50%
    ),
    linear-gradient(
      135deg,
      var(--blog-filter-select-arrow-color) 50%,
      transparent 50%
    );
  background-position:
    0 0,
    calc(100% - var(--blog-filter-select-arrow-right-a)) calc(50% - 3px),
    calc(100% - var(--blog-filter-select-arrow-right-b)) calc(50% - 3px);
  background-size:
    100% 100%,
    var(--blog-filter-select-arrow-size) var(--blog-filter-select-arrow-size),
    var(--blog-filter-select-arrow-size) var(--blog-filter-select-arrow-size);
  background-repeat: no-repeat;

  border: var(--border-thin);
  border-color: var(--blog-filter-dropdown-border) !important;
  border-radius: var(--blog-filter-dropdown-radius);
  box-shadow: none;

  color: var(--color-dark);
  font-family: var(--font-body) !important;
  font-size: var(--blog-filter-dropdown-size);
  font-weight: 700;
  line-height: 1.2;

  cursor: pointer;
  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.blog-filter-dropdown select:hover,
.blog-filter-dropdown select:focus{
  border-color: var(--blog-filter-dropdown-border-hover) !important;
}

/* -------------------------
   BLOG FILTER RESPONSIVE
   ------------------------- */

@media (max-width: 1024px){
  .blog-filter-links--areas{
    grid-template-columns: repeat(var(--blog-filter-area-columns-tablet), minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .blog-filter-bar{
    gap: var(--space-md);
  }

  .blog-filter-links--areas{
    grid-template-columns: repeat(var(--blog-filter-area-columns-mobile), minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md) !important;
  }

  .blog-filter-links--areas .blog-filter-button{
    min-height: 38px;
    padding: var(--space-sm) var(--space-sm) !important;
    font-size: var(--font-size-md) !important;
  }

  .blog-filter-links--areas .blog-filter-button__icon,
  .blog-filter-links--areas .blog-filter-button__icon img{
    width: var(--blog-filter-icon-size-mobile) !important;
    height: var(--blog-filter-icon-size-mobile) !important;
    flex-basis: var(--blog-filter-icon-size-mobile);
  }

  .blog-filter-links--sort{
    gap: var(--space-md) var(--space-lg) !important;
  }

  .blog-filter-links--sort .blog-filter-sort{
    font-size: var(--blog-filter-sort-font-size-mobile) !important;
  }

  .blog-active-filters{
    margin:
      var(--space-none)
      var(--space-none)
      var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-ui-sm);
  }

  .blog-filter-dropdown{
    max-width: 100%;
    margin-top: var(--space-none);
  }

  .blog-filter-dropdown select{
    min-height: 40px;
    font-size: var(--font-size-md);
  }
}

/* =========================================================
   11. BLOG LOOPER + PAGINATION
   ========================================================= */

:root{
  /* -------------------------
     BLOG LOOPER TOKENS
     ------------------------- */
  --blog-looper-grid-gap: 30px;
  --blog-looper-columns-mobile: 1;
  --blog-looper-columns-tablet: 2;
  --blog-looper-columns-desktop: 3;

  --blog-looper-empty-pad: var(--space-2xl);
  --blog-looper-empty-radius: var(--radius-sm);
  --blog-looper-empty-bg: var(--color-surface);
  --blog-looper-empty-border: var(--border-color-light);
  --blog-looper-empty-shadow: var(--shadow-sm);

  /* -------------------------
     PAGINATION TOKENS
     ------------------------- */
  --pagination-gap: var(--space-sm);
  --pagination-margin-top: 28px;

  --pagination-item-min-size: 42px;
  --pagination-item-pad-y: var(--space-sm);
  --pagination-item-pad-x: var(--space-lg);
  --pagination-item-radius: var(--radius-pill);

  --pagination-item-bg: var(--color-surface);
  --pagination-item-bg-hover: var(--color-surface-soft);
  --pagination-item-border: var(--border-color-light);
  --pagination-item-border-hover: var(--color-accent);

  --pagination-item-text: var(--color-dark);
  --pagination-item-text-hover: var(--color-accent);

  --pagination-current-bg: var(--color-dark);
  --pagination-current-border: var(--color-dark);
  --pagination-current-text: var(--color-white);

  --pagination-font-size: var(--font-size-md);
  --pagination-font-weight: 700;
}

/* -------------------------
   BLOG LOOPER STRUCTURE
   ------------------------- */

.hotips-blog-looper{
  display: block;
  width: 100%;
  min-width: 0;
}

.hotips-blog-looper__grid{
  display: grid;
  grid-template-columns: repeat(var(--blog-looper-columns-mobile), minmax(0, 1fr));
  gap: var(--blog-looper-grid-gap);
  align-items: stretch;

  width: 100%;
  min-width: 0;
  margin: var(--space-none);
  padding: var(--space-none);
}

.hotips-blog-looper__grid > *,
.hotips-blog-looper__item{
  min-width: 0;
}

.hotips-blog-looper__item{
  display: flex;
  height: 100%;
}

.hotips-blog-looper__item > .hotips-article-card{
  width: 100%;
  height: 100%;
}

/* Elementor loop compatibility */
.post-grid .elementor-loop-container{
  align-items: stretch !important;
}

.post-grid .elementor-loop-container > *,
.hotips-blog-looper .elementor-loop-container > *{
  min-width: 0;
}

/* -------------------------
   BLOG LOOPER EMPTY STATE
   ------------------------- */

.hotips-blog-looper__empty{
  width: 100%;
  margin: var(--space-none);
  padding: var(--blog-looper-empty-pad);

  background: var(--blog-looper-empty-bg);
  border: var(--border-thin);
  border-color: var(--blog-looper-empty-border);
  border-radius: var(--blog-looper-empty-radius);
  box-shadow: var(--blog-looper-empty-shadow);

  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
}

.hotips-blog-looper__empty > *:first-child{
  margin-top: var(--space-none);
}

.hotips-blog-looper__empty > *:last-child{
  margin-bottom: var(--space-none);
}

/* -------------------------
   PAGINATION
   ------------------------- */

.hotips-pagination,
.hotips-home-pagination,
.hotips-blog-looper--content-grid .hotips-blog-looper__pagination,
.hotips-blog-looper__pagination{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--pagination-gap);

  width: 100%;
  min-width: 0;
  margin: var(--pagination-margin-top) var(--space-none) var(--space-none);
  padding: var(--space-none);

  font-family: var(--font-body);
}

.hotips-pagination .page-numbers,
.hotips-home-pagination .page-numbers,
.hotips-blog-looper--content-grid .page-numbers,
.hotips-blog-looper__pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: var(--pagination-item-min-size);
  min-height: var(--pagination-item-min-size);
  padding: var(--pagination-item-pad-y) var(--pagination-item-pad-x);
  box-sizing: border-box;

  background: var(--pagination-item-bg);
  border: var(--border-thin);
  border-color: var(--pagination-item-border);
  border-radius: var(--pagination-item-radius);
  box-shadow: none;

  color: var(--pagination-item-text);
  font-family: var(--font-body);
  font-size: var(--pagination-font-size);
  font-weight: var(--pagination-font-weight);
  line-height: 1;
  text-decoration: none;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.hotips-pagination a.page-numbers:hover,
.hotips-pagination a.page-numbers:focus-visible,
.hotips-home-pagination a.page-numbers:hover,
.hotips-home-pagination a.page-numbers:focus-visible,
.hotips-blog-looper--content-grid a.page-numbers:hover,
.hotips-blog-looper--content-grid a.page-numbers:focus-visible,
.hotips-blog-looper__pagination a.page-numbers:hover,
.hotips-blog-looper__pagination a.page-numbers:focus-visible{
  background: var(--pagination-item-bg-hover);
  border-color: var(--pagination-item-border-hover);
  color: var(--pagination-item-text-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  outline: none;
}

.hotips-pagination .page-numbers.current,
.hotips-home-pagination .page-numbers.current,
.hotips-blog-looper--content-grid .page-numbers.current,
.hotips-blog-looper__pagination .page-numbers.current{
  background: var(--pagination-current-bg);
  border-color: var(--pagination-current-border);
  color: var(--pagination-current-text);
}

.hotips-pagination .page-numbers.dots,
.hotips-home-pagination .page-numbers.dots,
.hotips-blog-looper--content-grid .page-numbers.dots,
.hotips-blog-looper__pagination .page-numbers.dots{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* -------------------------
   BLOG LOOPER RESPONSIVE
   ------------------------- */

@media (min-width: 768px){
  .hotips-blog-looper__grid{
    grid-template-columns: repeat(var(--blog-looper-columns-tablet), minmax(0, 1fr));
  }
}

@media (min-width: 900px){
  .hotips-blog-looper__grid{
    grid-template-columns: repeat(var(--blog-looper-columns-desktop), minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  .hotips-blog-looper__grid{
    grid-template-columns: 1fr;
  }

  .hotips-pagination,
  .hotips-home-pagination,
  .hotips-blog-looper--content-grid .hotips-blog-looper__pagination,
  .hotips-blog-looper__pagination{
    gap: var(--space-xs);
  }

  .hotips-pagination .page-numbers,
  .hotips-home-pagination .page-numbers,
  .hotips-blog-looper--content-grid .page-numbers,
  .hotips-blog-looper__pagination .page-numbers{
    min-width: 38px;
    min-height: 38px;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
  }
}
/* =========================================================
   AREA HUB SYSTEM — SINGLE SOURCE OF TRUTH
   - Clean token-driven Money / Wellness hub
   - No top card carousel
   - Compact dashboard-style hero
   - Area tabs + two-row blog cards + right content menu
   - Cornerstone article inside the same coloured glass shell
   ========================================================= */

/* Safety: hide old hub layout systems if still rendered */
.hotips-area-hub-network,
.hotips-area-hub-titlebar,
.hotips-area-hub-content-guide,
.hotips-content-area-guide,
.hotips-area-hub-unified{
  display: none !important;
}

/* =========================================================
   01. HUB AREA TOKENS
   ========================================================= */

.hotips-area-hub{
  --hub-area-page-bg: var(--color-area-hub-money-page-bg, var(--color-surface-muted));

  --hub-area-dark: var(--color-area-hub-money-band-a, var(--color-dark));
  --hub-area-mid: var(--color-area-hub-money-band-b, var(--color-dark-muted));
  --hub-area-soft: var(--color-area-hub-money-panel-soft-bg, var(--color-tech-soft-muted));
  --hub-area-card-bg: var(--color-area-hub-money-card-bg, var(--color-surface));

  --hub-area-accent: var(--color-tech-accent, #d4af37);
  --hub-area-text: var(--color-area-hub-money-text, var(--color-dark));
  --hub-area-text-muted: var(--color-area-hub-money-text-muted, var(--color-dark-muted));
  --hub-area-border: var(--color-area-hub-money-border, var(--border-color-light));

  --hub-area-panel-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hub-area-dark) 86%, rgba(255,255,255,0.12)) 0%,
      color-mix(in srgb, var(--hub-area-mid) 72%, rgba(255,255,255,0.14)) 54%,
      color-mix(in srgb, var(--hub-area-dark) 90%, rgba(255,255,255,0.08)) 100%
    );

  --hub-area-tab-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hub-area-dark) 12%, var(--color-white) 88%) 0%,
      color-mix(in srgb, var(--hub-area-mid) 10%, var(--color-white) 90%) 100%
    );

  --hub-area-tab-bg-current:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hub-area-mid) 78%, var(--color-white) 10%) 0%,
      color-mix(in srgb, var(--hub-area-dark) 90%, var(--color-white) 6%) 100%
    );

  background: var(--hub-area-page-bg);
}

.hotips-area-hub--wellness{
  --hub-area-page-bg: var(--color-area-hub-wellness-page-bg, var(--color-wellness-soft));

  --hub-area-dark: var(--color-area-hub-wellness-band-a, var(--color-wellness-dark));
  --hub-area-mid: var(--color-area-hub-wellness-band-b, var(--color-wellness-dark-muted));
  --hub-area-soft: var(--color-area-hub-wellness-panel-soft-bg, var(--color-wellness-soft-muted));
  --hub-area-card-bg: var(--color-area-hub-wellness-card-bg, var(--color-surface));

  --hub-area-accent: var(--color-wellness-accent, var(--color-wellness-dark));
  --hub-area-text: var(--color-area-hub-wellness-text, var(--color-wellness-text));
  --hub-area-text-muted: var(--color-area-hub-wellness-text-muted, var(--color-wellness-text-soft));
  --hub-area-border: var(--color-area-hub-wellness-border, var(--color-wellness-line));

  --hub-area-panel-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hub-area-dark) 82%, rgba(255,255,255,0.16)) 0%,
      color-mix(in srgb, var(--hub-area-mid) 66%, rgba(255,255,255,0.18)) 54%,
      color-mix(in srgb, var(--hub-area-dark) 86%, rgba(255,255,255,0.10)) 100%
    );

  --hub-area-tab-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hub-area-dark) 16%, var(--color-white) 84%) 0%,
      color-mix(in srgb, var(--hub-area-mid) 14%, var(--color-white) 86%) 100%
    );

  --hub-area-tab-bg-current:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hub-area-mid) 76%, var(--color-white) 10%) 0%,
      color-mix(in srgb, var(--hub-area-dark) 88%, var(--color-white) 6%) 100%
    );
}

/* =========================================================
   AREA BLOG LANDING — STYLE.CSS BRIDGE + PAGE LAYOUT
   - Broad Money / Wellness blog hub shell
   - Uses global context shell asset for the outer glass wrapper
   - Keeps area landing hero, menu, filters, and posts alignment here
   - Do not style .mht-content-card internals here
   ========================================================= */


/* -------------------------
   01. Area landing tokens
   ------------------------- */

.hotips-area-landing{
  --area-landing-bg: var(--color-surface-muted);
  --area-landing-band-a: var(--color-dark);
  --area-landing-band-b: var(--color-dark-muted);
  --area-landing-soft: var(--color-surface-muted);
  --area-landing-panel: color-mix(in srgb, var(--color-white) 74%, transparent);
  --area-landing-panel-strong: color-mix(in srgb, var(--color-white) 88%, transparent);
  --area-landing-border: color-mix(in srgb, var(--color-dark) 14%, transparent);
  --area-landing-text: var(--color-dark);
  --area-landing-text-soft: var(--color-dark-muted);
  --area-landing-invert: var(--color-white);

  --area-landing-card-bg: var(--color-white);
  --area-landing-card-border: var(--border-color-light);
  --area-landing-card-shadow: 0 10px 24px rgba(22, 34, 53, 0.08);

  /* Bridge into global context shell asset */
  --area-landing-page-pad: var(
    --mht-context-shell-page-pad,
    clamp(14px, 2vw, 26px)
  );

  --area-landing-shell-pad: var(
    --mht-context-shell-pad,
    var(--space-sm)
  );

  --area-landing-shell-width: var(
    --mht-context-shell-width,
    min(100%, 1320px)
  );

  --mht-context-shell-image: var(--hotips-area-landing-image);
  --mht-context-shell-image-position: 100% 34%;
  --mht-context-shell-image-opacity: 0.44;
  --mht-context-shell-image-scale: 1.5;

  --mht-context-shell-band-a: var(--area-landing-band-a);
  --mht-context-shell-band-b: var(--area-landing-band-b);
  --mht-context-shell-border: var(--area-landing-border);

  --area-landing-sticky-top: calc(
    var(--topbar-height, 34px) +
    var(--space-sm, 7px)
  );

  position: relative;
  isolation: isolate;
  overflow: visible;

  padding-block: clamp(14px, 2vw, 26px) clamp(26px, 4vw, 52px);

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--area-landing-bg) 92%, var(--color-white) 8%) 0%,
      color-mix(in srgb, var(--area-landing-bg) 82%, var(--color-white) 18%) 100%
    );

  color: var(--area-landing-text);
}

.hotips-area-landing--money{
  --area-landing-bg: var(--color-area-hub-money-page-bg);
  --area-landing-band-a: var(--color-area-hub-money-band-a);
  --area-landing-band-b: var(--color-area-hub-money-band-b);
  --area-landing-soft: var(--color-area-hub-money-panel-soft-bg);
  --area-landing-border: var(--color-area-hub-money-border);
  --area-landing-text: var(--color-area-hub-money-text);
  --area-landing-text-soft: var(--color-area-hub-money-text-muted);
}

.hotips-area-landing--wellness{
  --area-landing-bg: var(--color-area-hub-wellness-page-bg);
  --area-landing-band-a: var(--color-area-hub-wellness-band-a);
  --area-landing-band-b: var(--color-area-hub-wellness-band-b);
  --area-landing-soft: var(--color-area-hub-wellness-panel-soft-bg);
  --area-landing-border: var(--color-area-hub-wellness-border);
  --area-landing-text: var(--color-area-hub-wellness-text);
  --area-landing-text-soft: var(--color-area-hub-wellness-text-muted);
}

body.admin-bar .hotips-area-landing{
  --area-landing-sticky-top: calc(
    var(--topbar-height, 34px) +
    var(--topbar-admin-offset, 32px) +
    var(--space-sm, 7px)
  );
}


/* -------------------------
   02. Area landing outer layout
   ------------------------- */

.hotips-area-landing > .hotips-container{
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding-inline: var(--area-landing-page-pad);
  overflow: visible;
}

.hotips-area-landing__sticky-head{
  position: relative;
  z-index: 2;
  overflow: visible;
}

.hotips-area-landing__sticky-head .hotips-area-landing__hero{
  margin: 0 0 clamp(2px, 0.22vw, 2px);
}

.hotips-area-landing__sticky-head .hotips-area-landing__content-menu{
  margin: 0 var(--space-sm) clamp(2px, 0.22vw, 2px);
}

.hotips-area-landing__sticky-head .hotips-area-landing__filters{
  margin: 0 var(--space-sm);
}

.hotips-area-landing__hero-copy,
.hotips-area-landing__hero-image,
.hotips-area-landing__filters,
.hotips-area-landing__filter-track{
  min-width: 0;
}

.hotips-area-landing__posts{
  box-sizing: border-box;

  width: var(--area-landing-shell-width);
  max-width: var(--area-landing-shell-width);

  margin-left: auto;
  margin-right: auto;

  scroll-margin-top: calc(
    var(--area-landing-sticky-top) +
    180px
  );
}


/* -------------------------
   03. Hero: title left, image right
   - Wrapper shell comes from .mht-context-shell asset
   - This block only styles the inner hero content
   ------------------------- */

.hotips-area-landing__hero{
  position: relative;
  isolation: isolate;
  overflow: visible;

  display: grid;
  grid-template-columns: minmax(210px, 0.20fr) minmax(0, 0.80fr);
  align-items: stretch;
  gap: var(--space-lg);

  min-height: clamp(190px, 15vw, 245px);
  padding: var(--space-sm);

  border: 0;
  border-radius: 0;

  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hotips-area-landing__hero::before,
.hotips-area-landing__hero::after{
  display: none;
}

.hotips-area-landing__hero-copy,
.hotips-area-landing__hero-image{
  position: relative;
  z-index: 1;
  min-width: 0;
}

.hotips-area-landing__hero-copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-xs);

  max-width: 32ch;
}

.hotips-area-landing__eyebrow{
  display: inline-flex;
  align-items: center;

  min-height: calc(var(--space-xl) + var(--space-xs));
  margin: var(--space-none) var(--space-none) var(--space-xxs);
  padding: var(--space-none) var(--space-sm);

  border-radius: var(--radius-pill);
  border: var(--border-width-thin) var(--border-style-standard) color-mix(
    in srgb,
    var(--color-white) 22%,
    transparent
  );

  background: color-mix(in srgb, var(--color-white) 7%, transparent);
  color: color-mix(in srgb, var(--color-white) 88%, var(--area-landing-soft) 12%);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  letter-spacing: var(--article-card-ribbon-letter-spacing, 0.08em);
  line-height: var(--line-height-ui);
  text-transform: uppercase;
}

.hotips-area-landing__title{
  max-width: 13ch;
  margin: var(--space-none);

  display: -webkit-box;
  overflow: hidden;

  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--font-size-site-h2);
  font-weight: 750;
  line-height: var(--line-height-heading);
  letter-spacing: -0.035em;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hotips-area-landing__intro{
  max-width: 31ch;
  margin: var(--space-none);

  display: -webkit-box;
  overflow: hidden;

  color: color-mix(in srgb, var(--color-white) 88%, var(--area-landing-soft) 12%);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 450;
  line-height: var(--line-height-ui);

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hotips-area-landing__guide-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.hotips-area-landing__guide-pill{
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);

  min-height: calc(var(--space-2xl) + var(--space-sm));
  padding: var(--space-none) var(--space-md);

  border-radius: var(--radius-pill);
  border: var(--border-width-thin) var(--border-style-standard) color-mix(
    in srgb,
    var(--color-white) 20%,
    transparent
  );

  background: color-mix(in srgb, var(--color-white) 8%, transparent);
  color: var(--color-white);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 850;
  line-height: var(--line-height-ui);
  text-decoration: none;

  backdrop-filter: blur(var(--space-sm));
  -webkit-backdrop-filter: blur(var(--space-sm));
}

.hotips-area-landing__guide-pill:hover,
.hotips-area-landing__guide-pill:focus-visible{
  background: color-mix(in srgb, var(--color-white) 15%, transparent);
  color: var(--color-white);
  outline: none;
}


/* -------------------------
   04. Hero image panel
   - actual context hero image
   - image fades to transparent on the left
   ------------------------- */

.hotips-area-landing__hero-image{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  justify-self: stretch;
  align-self: center;

  width: 100%;
  height: clamp(180px, 16vw, 250px);
  min-height: 0;
  max-height: 250px;

  margin-right: var(--space-none);

  border-radius: var(--radius-md);
  border: var(--border-width-thin) var(--border-style-standard) color-mix(
    in srgb,
    var(--color-white) 20%,
    transparent
  );

  /*
    Keep the panel itself transparent.
    The actual image is now on ::before.
  */
  background: transparent;

  box-shadow:
    var(--shadow-md),
    inset 0 var(--border-width-thin) 0 color-mix(in srgb, var(--color-white) 18%, transparent);
}

/* Actual visible image layer */
.hotips-area-landing__hero-image::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  border-radius: inherit;
  pointer-events: none;

  background-image: var(--hotips-area-landing-image);
  background-size: auto 101%;
  background-position: 100% center;
  background-repeat: no-repeat;

  /*
    True transparency fade.
    Left edge is transparent, then the image becomes fully visible.
  */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.08) 6%,
    rgba(0,0,0,0.42) 15%,
    rgba(0,0,0,0.78) 24%,
    rgba(0,0,0,1) 34%,
    rgba(0,0,0,1) 100%
  );

  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.08) 6%,
    rgba(0,0,0,0.42) 15%,
    rgba(0,0,0,0.78) 24%,
    rgba(0,0,0,1) 34%,
    rgba(0,0,0,1) 100%
  );

  -webkit-mask-mode: alpha;
  mask-mode: alpha;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Very light panel sheen only */
.hotips-area-landing__hero-image::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--area-landing-band-a) 2%, transparent) 0%,
      transparent 24%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-white) 7%, transparent) 0%,
      transparent 48%,
      color-mix(in srgb, var(--area-landing-band-a) 5%, transparent) 100%
    );
}


/* -------------------------
   05. Responsive
   ------------------------- */

@media (max-width: 1180px){
  .hotips-area-landing__hero{
    grid-template-columns: minmax(210px, 0.24fr) minmax(0, 0.76fr);
  }

  .hotips-area-landing__title{
    max-width: 12ch;
  }

  .hotips-area-landing__intro{
    max-width: 30ch;
  }
}

@media (max-width: 980px){
  .hotips-area-landing__sticky-head{
    position: relative;
    top: auto;
  }

  .hotips-area-landing__sticky-head .hotips-area-landing__content-menu,
  .hotips-area-landing__sticky-head .hotips-area-landing__filters{
    margin-inline: var(--space-none);
  }

  .hotips-area-landing__hero{
    grid-template-columns: 1fr;
    min-height: 0;
    gap: var(--space-md);
    padding: var(--space-sm);
  }

  .hotips-area-landing__hero-copy{
    max-width: none;
  }

  .hotips-area-landing__title{
    max-width: 14ch;
    font-size: var(--font-size-site-h2);
  }

  .hotips-area-landing__intro{
    max-width: 42ch;
  }

  .hotips-area-landing__hero-image{
    justify-self: stretch;

    width: 100%;
    height: clamp(150px, 28vw, 205px);
    min-height: 0;
    max-height: 205px;

    margin-right: var(--space-none);

    border-radius: var(--radius-md);
    border-right: var(--border-width-thin) var(--border-style-standard) color-mix(
      in srgb,
      var(--color-white) 20%,
      transparent
    );
  }
}

@media (max-width: 782px){
  body.admin-bar .hotips-area-landing{
    --area-landing-sticky-top: calc(
      var(--topbar-height-mobile, 32px) +
      46px +
      var(--space-sm, 7px)
    );
  }
}

@media (max-width: 620px){
  .hotips-area-landing__hero{
    padding: var(--space-sm);
  }

  .hotips-area-landing__title{
    max-width: 13ch;
  }

  .hotips-area-landing__intro{
    max-width: 36ch;
    font-size: var(--font-size-ui);
  }

  .hotips-area-landing__hero-image{
    height: clamp(135px, 34vw, 175px);
    max-height: 175px;
  }
}

/* -------------------------
   03. Filter rail
   - Slim wrapper
   - Original pill colours retained
   ------------------------- */

.hotips-area-landing__filters{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);

  margin: 0;
  padding: var(--space-xs) var(--space-sm);

  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--area-landing-border) 38%, rgba(255,255,255,0.20));

  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  box-shadow: none;
}

.hotips-area-landing__filters-head{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  min-height: 30px;
  padding: 0 12px;

  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--area-landing-band-a) 10%, var(--color-white) 90%);
  color: var(--area-landing-text);

  white-space: nowrap;
}

.hotips-area-landing__filter-track{
  display: flex;
  align-items: center;
  gap: var(--space-sm);

  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;

  padding: 0;

  scrollbar-width: none;
}

.hotips-area-landing__filter-track::-webkit-scrollbar{
  display: none;
}

.hotips-area-landing__filter{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  min-height: 30px;
  padding: 0 13px;

  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color-light);

  background: var(--color-white);
  color: var(--area-landing-text);

  text-decoration: none;
  white-space: nowrap;
}

.hotips-area-landing__filter:hover,
.hotips-area-landing__filter:focus-visible,
.hotips-area-landing__filter.is-active{
  border-color: color-mix(in srgb, var(--area-landing-band-a) 44%, var(--border-color-light) 56%);
  background: var(--area-landing-band-a);
  color: var(--color-white);
  outline: none;
}

/* -------------------------
   04. Posts panel
   ------------------------- */

.hotips-area-landing__posts{
  padding: var(--space-lg);

  border-radius: var(--radius-lg);
  border: var(--border-width-thin) var(--border-style-standard) color-mix(
    in srgb,
    var(--area-landing-border) 58%,
    color-mix(in srgb, var(--color-white) 36%, transparent)
  );

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 88%, transparent) 0%,
      color-mix(in srgb, var(--area-landing-soft) 26%, var(--color-white) 74%) 100%
    );

  box-shadow: var(--shadow-lg);
}

.hotips-area-landing__posts-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);

  margin: var(--space-none) var(--space-none) var(--space-lg);
  padding: var(--space-none) var(--space-none) var(--space-md);
  border-bottom: var(--border-width-thin) var(--border-style-standard) color-mix(
    in srgb,
    var(--area-landing-border) 60%,
    transparent
  );
}

.hotips-area-landing__posts-kicker{
  margin: var(--space-none) var(--space-none) var(--space-xs);

  color: var(--area-landing-text-soft);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  letter-spacing: var(--article-card-ribbon-letter-spacing);
  line-height: var(--line-height-ui);
  text-transform: uppercase;
}

.hotips-area-landing__posts-title{
  margin: var(--space-none);

  color: var(--area-landing-text);
  font-family: var(--font-heading, var(--font-display, var(--font-accent)));
  font-size: var(--font-size-site-h2);
  font-weight: 800;
  line-height: var(--line-height-heading);
  letter-spacing: -0.035em;
}

.hotips-area-landing__posts-count{
  margin: var(--space-none);

  color: var(--area-landing-text-soft);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: var(--line-height-ui);
}

/* -------------------------
   05. Area landing card grid
   Wrapper/grid only.
   Actual card styling lives in assets/css/mht-content-cards.css.
   ------------------------- */

.hotips-area-landing__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xl);
}

/* 3 cards sooner while the fake sidebar is present */
@media (max-width: 1380px){
  .hotips-area-landing__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

/* 2 cards on narrower tablet widths */
@media (max-width: 820px){
  .hotips-area-landing__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }
}

/* 1 card on mobile */
@media (max-width: 520px){
  .hotips-area-landing__grid{
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* -------------------------
   06. Pagination / empty
   ------------------------- */

.hotips-area-landing__pagination{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.hotips-area-landing__pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: calc(var(--space-2xl) + var(--space-xl));
  min-height: calc(var(--space-2xl) + var(--space-xl));
  padding: var(--space-none) var(--space-md);

  border-radius: var(--radius-pill);
  border: var(--border-width-thin) var(--border-style-standard) color-mix(
    in srgb,
    var(--area-landing-border) 68%,
    transparent
  );

  background: color-mix(in srgb, var(--color-white) 82%, transparent);
  color: var(--area-landing-text);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: var(--line-height-ui);
  text-decoration: none;
}

.hotips-area-landing__pagination .page-numbers.current,
.hotips-area-landing__pagination .page-numbers:hover,
.hotips-area-landing__pagination .page-numbers:focus-visible{
  background: var(--area-landing-band-a);
  border-color: var(--area-landing-band-a);
  color: var(--color-white);
  outline: none;
}

.hotips-area-landing__empty{
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-white) 78%, transparent);
  color: var(--area-landing-text-soft);
  font-family: var(--font-body);
  font-size: var(--font-size-ui);
  font-weight: 700;
  line-height: var(--line-height-ui);
}

/* -------------------------
   07. Responsive
   Area landing layout only.
   Do not style .mht-content-card internals here.
   Do not control hero image sizing here.
   ------------------------- */

@media (max-width: 1180px){
  .hotips-area-landing__posts-head{
    align-items: flex-start;
  }
}

@media (max-width: 980px){
  .hotips-area-landing__filters{
    grid-template-columns: 1fr;
  }

  .hotips-area-landing__posts-layout{
    grid-template-columns: 1fr;
  }

  .hotips-area-landing__section-sidebar{
    position: static;
    top: auto;
  }
}

@media (max-width: 720px){
  .hotips-area-landing{
    padding-block: var(--space-lg) calc(var(--space-2xl) + var(--space-xl));
  }

  .hotips-area-landing__posts-head{
    display: grid;
    gap: var(--space-sm);
  }
}


/* =========================================================
   LEGACY GLOBAL CONTENT CARD SYSTEM — PARKED
   Old .hotips-content-card system.
   Do not use for new area landing cards.
   ========================================================= */

.hotips-content-card{
  --content-card-radius: var(--radius-md);
  --content-card-height: 190px;
  --content-card-media-height: 60px;

  --content-card-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-dark) 74%, rgba(255,255,255,0.24)) 0%,
      color-mix(in srgb, var(--color-dark-muted) 58%, rgba(255,255,255,0.28)) 48%,
      color-mix(in srgb, var(--color-dark) 82%, rgba(255,255,255,0.16)) 100%
    );

  --content-card-border: color-mix(in srgb, var(--color-white) 48%, transparent);
  --content-card-border-soft: color-mix(in srgb, var(--color-white) 24%, transparent);

  --content-card-label: color-mix(in srgb, var(--color-white) 74%, var(--color-tech-accent) 26%);
  --content-card-title: var(--color-white);
  --content-card-text: color-mix(in srgb, var(--color-white) 76%, transparent);
  --content-card-meta: color-mix(in srgb, var(--color-white) 70%, transparent);

  --content-card-shadow:
    0 12px 26px rgba(22,34,53,0.10),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 58%, transparent);

  min-width: 0;
  height: 100%;
}

.hotips-content-card--area-money{
  --content-card-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-money-band-a, var(--color-dark)) 76%, rgba(255,255,255,0.24)) 0%,
      color-mix(in srgb, var(--color-area-hub-money-band-b, var(--color-dark-muted)) 58%, rgba(255,255,255,0.28)) 48%,
      color-mix(in srgb, var(--color-area-hub-money-band-a, var(--color-dark)) 84%, rgba(255,255,255,0.16)) 100%
    );

  --content-card-border:
    color-mix(in srgb, var(--color-area-hub-money-band-a, var(--color-dark)) 46%, rgba(255,255,255,0.54));

  --content-card-border-soft:
    color-mix(in srgb, var(--color-area-hub-money-band-b, var(--color-dark-muted)) 36%, rgba(255,255,255,0.44));

  --content-card-label:
    color-mix(in srgb, var(--color-white) 70%, var(--color-tech-accent, #d4af37) 30%);

  --content-card-title: var(--color-white);
  --content-card-text: color-mix(in srgb, var(--color-white) 78%, transparent);
  --content-card-meta: color-mix(in srgb, var(--color-white) 70%, transparent);
}

.hotips-content-card--area-wellness{
  --content-card-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 76%, rgba(255,255,255,0.24)) 0%,
      color-mix(in srgb, var(--color-area-hub-wellness-band-b, var(--color-wellness-dark-muted)) 58%, rgba(255,255,255,0.28)) 48%,
      color-mix(in srgb, var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 84%, rgba(255,255,255,0.16)) 100%
    );

  --content-card-border:
    color-mix(in srgb, var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 46%, rgba(255,255,255,0.54));

  --content-card-border-soft:
    color-mix(in srgb, var(--color-area-hub-wellness-band-b, var(--color-wellness-dark-muted)) 36%, rgba(255,255,255,0.44));

  --content-card-label:
    color-mix(in srgb, var(--color-white) 78%, var(--color-area-hub-wellness-band-b, var(--color-wellness-dark-muted)) 22%);

  --content-card-title: var(--color-white);
  --content-card-text: color-mix(in srgb, var(--color-white) 78%, transparent);
  --content-card-meta: color-mix(in srgb, var(--color-white) 70%, transparent);
}

.hotips-content-card--area-neutral{
  --content-card-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-dark) 66%, rgba(255,255,255,0.30)) 0%,
      color-mix(in srgb, var(--color-dark-muted) 52%, rgba(255,255,255,0.32)) 100%
    );

  --content-card-border: color-mix(in srgb, var(--color-dark) 32%, rgba(255,255,255,0.58));
  --content-card-label: var(--color-tech-accent);
  --content-card-title: var(--color-white);
  --content-card-text: color-mix(in srgb, var(--color-white) 76%, transparent);
  --content-card-meta: color-mix(in srgb, var(--color-white) 70%, transparent);
}

.hotips-content-card__link{
  position: relative;
  display: grid;
  grid-template-rows: var(--content-card-media-height) minmax(0, 1fr);

  width: 100%;
  height: var(--content-card-height);
  min-height: var(--content-card-height);
  max-height: var(--content-card-height);

  margin: 0;
  padding: 0;

  border-radius: var(--content-card-radius);
  border: 1px solid var(--content-card-border);

  background: var(--content-card-bg);
  color: var(--content-card-title);

  box-shadow: var(--content-card-shadow);
  overflow: hidden;
  text-decoration: none;

  transform: translateZ(0);

  transition:
    transform var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-content-card__link::after{
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 5;
  pointer-events: none;

  border-radius: calc(var(--content-card-radius) - 2px);
  border: 1px solid color-mix(in srgb, var(--color-white) 28%, transparent);
}

.hotips-content-card__link:hover,
.hotips-content-card__link:focus-visible{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--content-card-border) 70%, var(--color-white) 30%);

  box-shadow:
    0 14px 28px rgba(22,34,53,0.14),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 68%, transparent);

  outline: none;
}

.hotips-content-card__media{
  position: relative;
  z-index: 1;

  display: block;
  width: 100%;
  height: var(--content-card-media-height);
  min-height: var(--content-card-media-height);
  max-height: var(--content-card-media-height);

  margin: 0;
  padding: 0;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 84%, transparent) 0%,
      color-mix(in srgb, var(--content-card-border) 18%, var(--color-white) 82%) 100%
    );

  border-radius: 0;
  overflow: hidden;
}

.hotips-content-card__media::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 2;

  background:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--content-card-bg) 70%, transparent) 100%
    );

  pointer-events: none;
}

.hotips-content-card__media img,
.hotips-content-card__image{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;

  object-fit: cover;
  object-position: center;

  opacity: 1;
  visibility: visible;

  transition: transform var(--duration-mid) var(--ease-soft);
}

.hotips-content-card__link:hover .hotips-content-card__media img,
.hotips-content-card__link:focus-visible .hotips-content-card__media img{
  transform: scale(1.025);
}

.hotips-content-card__image--fallback{
  object-fit: contain;
  object-position: center;
  padding: 4px;
  opacity: 0.82;
  transform: none !important;
}

.hotips-content-card__body{
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  gap: 2px;

  min-width: 0;
  min-height: 0;

  padding: 9px 11px 7px;

  background: transparent;
  overflow: hidden;
}

.hotips-content-card__label{
  display: block;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  color: var(--content-card-label);
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.065em;
  text-transform: uppercase;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotips-content-card__title{
  display: -webkit-box;
  margin: 0;

  color: var(--content-card-title);
  font-family: var(--font-display);
  font-size: clamp(12px, 0.78vw, 14px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;

  overflow: hidden;
  text-overflow: ellipsis;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.hotips-content-card__excerpt{
  display: -webkit-box;
  margin: 0;

  color: var(--content-card-text);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.18;

  overflow: hidden;
  text-overflow: ellipsis;

  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.hotips-content-card__rating-wrap{
  display: flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  margin: 1px 0 0;
  padding: 0;

  border: 0;
  background: transparent;

  --blog-star-size: 8px;
  --blog-star-active: var(--color-tech-accent);
  --blog-star-empty: color-mix(in srgb, var(--content-card-border) 62%, var(--color-white) 38%);
  --blog-meta-pill-gap: 4px;
  --blog-meta-pill-strong: var(--content-card-title);
  --blog-meta-pill-muted: var(--content-card-meta);
  --blog-meta-pill-font-size: 7.5px;
}

.hotips-content-card__rating-wrap .my-blog-rating-display{
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;

  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: var(--content-card-meta) !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
}

.hotips-content-card__rating-wrap .my-blog-rating-display__pill,
.hotips-content-card__rating-wrap .my-blog-rating-display__pill--new{
  display: inline !important;

  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: var(--content-card-label) !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.hotips-content-card__rating-wrap .my-blog-rating-display__stars{
  display: inline-flex !important;
  align-items: center !important;
  gap: 1px !important;
  line-height: 1 !important;
}

.hotips-content-card__rating-wrap .my-blog-rating-display__star{
  font-size: 8px !important;
  line-height: 1 !important;
}

.hotips-content-card__meta{
  display: flex;
  align-items: center;
  gap: 5px;

  margin-top: auto;
  padding-top: 5px;

  border-top: 1px solid color-mix(in srgb, var(--content-card-border-soft) 78%, transparent);
}

.hotips-content-card__avatar{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  padding: 2px;

  border-radius: 7px;
  overflow: hidden;

  background: color-mix(in srgb, var(--color-white) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--content-card-border) 74%, transparent);
  color: var(--content-card-label);

  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}

.hotips-content-card__avatar img{
  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;
}

.hotips-content-card__meta-copy{
  display: flex;
  flex-direction: column;
  gap: 2px;

  min-width: 0;
}

.hotips-content-card__meta-copy strong{
  display: block;

  color: var(--content-card-title);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.05;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotips-content-card__meta-copy small{
  display: block;

  color: var(--content-card-meta);
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 500;
  line-height: 1.1;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotips-content-card--context-area-landing.hotips-content-card--grid{
  --content-card-height: 190px;
  --content-card-media-height: 60px;
}

/* =========================================================
   AREA LANDING POSTS WRAPPER AND CARD GRID
   - Outer posts section is only the width/spacing controller
   - Posts main becomes the card wrapper
   - Fake sidebar stays isolated in its own sticky wrapper
   ========================================================= */

.hotips-content-card--context-area-landing.hotips-content-card--grid{
  --content-card-height: 190px;
  --content-card-media-height: 60px;
}

/* Outer section: no shared glass wrapper */
.hotips-area-landing__posts{
  position: relative;
  isolation: isolate;
  overflow: visible;

  box-sizing: border-box;
  width: var(--area-landing-shell-width);
  max-width: var(--area-landing-shell-width);

  margin: clamp(12px, 1.6vw, 20px) auto 0;
  padding: 0;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  scroll-margin-top: calc(
    var(--topbar-height, 34px) +
    var(--space-xl, 16px)
  );
}

.hotips-area-landing__posts::before,
.hotips-area-landing__posts::after{
  display: none;
}

/* Posts + sidebar layout */
.hotips-area-landing__posts-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 200px);
  align-items: start;
  gap: clamp(12px, 1.4vw, 18px);

  overflow: visible;
}

/* Main card wrapper only */
.hotips-area-landing__posts-main{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-width: 0;
  padding: clamp(12px, 1.6vw, 18px);

  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--area-landing-border) 58%, rgba(255,255,255,0.36));

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--area-landing-band-a) 22%, rgba(255,255,255,0.40)) 0%,
      color-mix(in srgb, var(--area-landing-band-b) 16%, rgba(255,255,255,0.48)) 52%,
      color-mix(in srgb, var(--area-landing-soft) 34%, rgba(255,255,255,0.66)) 100%
    );

  box-shadow:
    0 14px 30px rgba(22,34,53,0.08),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 62%, transparent);

  backdrop-filter: blur(14px) saturate(124%);
  -webkit-backdrop-filter: blur(14px) saturate(124%);
}

.hotips-area-landing__posts-main::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image: var(--hotips-area-landing-image);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;

  opacity: 0.08;
  filter: saturate(96%) contrast(0.96);
}

.hotips-area-landing__posts-main::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-white) 24%, transparent) 0%,
      transparent 42%,
      color-mix(in srgb, var(--area-landing-band-a) 10%, transparent) 100%
    );
}

.hotips-area-landing__posts-main > *{
  position: relative;
  z-index: 1;
}

/* Move heading style with the card wrapper */
.hotips-area-landing__posts-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;

  margin: 0 0 12px;
  padding: 0 0 10px;

  border-bottom: 1px solid color-mix(in srgb, var(--area-landing-border) 50%, rgba(255,255,255,0.34));
}

.hotips-area-landing__posts-kicker{
  margin: 0 0 4px;

  color: color-mix(in srgb, var(--area-landing-text-soft) 82%, var(--color-white) 18%);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hotips-area-landing__posts-title{
  margin: 0;

  color: var(--area-landing-text);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.hotips-area-landing__posts-count{
  flex: 0 0 auto;

  margin: 0;
  padding: 6px 10px;

  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--area-landing-border) 46%, rgba(255,255,255,0.46));

  background: color-mix(in srgb, var(--color-white) 42%, transparent);
  color: var(--area-landing-text-soft);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: 1;
}

.hotips-area-landing__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 12px);
}

@media (max-width: 1180px){
  .hotips-area-landing__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  .hotips-area-landing__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px){
  .hotips-area-landing__posts-layout{
    grid-template-columns: 1fr;
  }

  .hotips-area-landing__section-sidebar{
    position: static;
    top: auto;
    justify-self: stretch;
    max-width: none;
  }
}

@media (max-width: 720px){
  .hotips-area-landing__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .hotips-area-landing__grid{
    grid-template-columns: 1fr;
  }

  .hotips-content-card--context-area-landing .hotips-content-card__link{
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto;

    height: auto;
    min-height: 122px;
    max-height: none;
  }
}



/* =========================================================
   MYHOTIPS SITE SEARCH MODULE
   Shortcodes:
   [mht_site_search]
   [mht_site_search_results]
   ========================================================= */

.mht-site-search-results {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	padding: clamp(28px, 5vw, 64px) 0;
	color: var(--color-dark, #2e3b55);
}

.mht-site-search-results__head {
	margin-bottom: clamp(18px, 3vw, 30px);
}

.mht-site-search-results__title {
	margin: 0;
	font-family: var(--font-display, "Playfair Display", serif);
	font-size: clamp(2.1rem, 4vw, 4rem);
	line-height: 1.02;
	color: var(--color-dark, #2e3b55);
}

.mht-site-search-results__count {
	margin: 14px 0 0;
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--color-text-soft, #68758b);
}

/* =========================================================
   SEARCH FORM
   ========================================================= */

.mht-site-search {
	margin: 0 0 clamp(22px, 3vw, 34px);
}

.mht-site-search__inner {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.36fr) minmax(130px, 0.28fr) auto;
	gap: 10px;
	align-items: center;
	padding: 10px;
	border-radius: var(--radius-md, 22px);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(244, 247, 251, 0.76));
	border: 1px solid rgba(46, 59, 85, 0.14);
	box-shadow: var(--shadow-sm, 0 12px 30px rgba(22, 34, 53, 0.08));
}

.mht-site-search__field,
.mht-site-search__select {
	width: 100%;
	min-height: 46px;
	border: 1px solid rgba(46, 59, 85, 0.16);
	border-radius: var(--radius-xs, 12px);
	padding: 0 14px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--color-dark, #2e3b55);
	font-family: var(--font-body, Montserrat, Arial, sans-serif);
	font-size: 0.94rem;
	font-weight: 650;
	box-shadow: none;
	outline: none;
}

.mht-site-search__field::placeholder {
	color: rgba(46, 59, 85, 0.5);
	font-weight: 600;
}

.mht-site-search__field:focus,
.mht-site-search__select:focus {
	border-color: var(--color-tech-accent, #d4af37);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
	background: #ffffff;
}

.mht-site-search__select {
	cursor: pointer;
}

.mht-site-search__submit {
	min-height: 46px;
	border: 0;
	border-radius: var(--radius-xs, 12px);
	padding: 0 20px;
	background: var(--color-dark, #2e3b55);
	color: #ffffff;
	font-family: var(--font-body, Montserrat, Arial, sans-serif);
	font-size: 0.9rem;
	font-weight: 900;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition:
		transform var(--duration-fast, 180ms) var(--ease-standard, ease),
		background var(--duration-fast, 180ms) var(--ease-standard, ease),
		color var(--duration-fast, 180ms) var(--ease-standard, ease);
}

.mht-site-search__submit:hover,
.mht-site-search__submit:focus {
	transform: translateY(-1px);
	background: var(--color-tech-accent, #d4af37);
	color: var(--color-dark, #2e3b55);
}

/* 404 variant can sit inside a dark hero */
.mht-site-search--404 .mht-site-search__inner {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow: none;
	backdrop-filter: blur(14px);
}

/* =========================================================
   RESULTS GRID
   - Handles reusable .mht-content-card cards from Blog Items
   - Also handles fallback .mht-site-search-card cards for pages/guides
   ========================================================= */

.mht-site-search-results__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
	align-items: stretch;
}

/* Keep existing MyHotips content cards compact inside search results */
.mht-site-search-results__grid .mht-content-card {
	width: 100%;
	height: 100%;
	min-width: 0;
}

.mht-site-search-results__grid .mht-content-card__media,
.mht-site-search-results__grid .mht-content-card__image-wrap {
	min-height: 0;
}

.mht-site-search-results__grid .mht-content-card__title {
	font-size: clamp(0.5rem, 1vw, 1.1rem);
	line-height: 1.2;
}

/* =========================================================
   FALLBACK RESULT CARD
   - Used for hotips_content and pages if they do not use mht-content-card
   ========================================================= */

.mht-site-search-card {
	height: 100%;
	border-radius: var(--radius-sm, 18px);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid rgba(46, 59, 85, 0.14);
	box-shadow: var(--shadow-sm, 0 12px 30px rgba(22, 34, 53, 0.08));
	transition:
		transform var(--duration-fast, 180ms) var(--ease-standard, ease),
		box-shadow var(--duration-fast, 180ms) var(--ease-standard, ease),
		border-color var(--duration-fast, 180ms) var(--ease-standard, ease);
}

.mht-site-search-card:hover {
	transform: translateY(-3px);
	border-color: rgba(212, 175, 55, 0.44);
	box-shadow: var(--shadow-md, 0 18px 44px rgba(22, 34, 53, 0.12));
}

.mht-site-search-card__link {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.mht-site-search-card__media {
	aspect-ratio: 16 / 8;
	background: rgba(46, 59, 85, 0.08);
	overflow: hidden;
}

.mht-site-search-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-mid, 260ms) var(--ease-standard, ease);
}

.mht-site-search-card:hover .mht-site-search-card__image {
	transform: scale(1.035);
}

.mht-site-search-card__body {
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 18px;
}

.mht-site-search-card__label {
	justify-self: start;
	padding: 5px 9px;
	border-radius: 999px;
	background: rgba(212, 175, 55, 0.16);
	color: var(--color-dark, #2e3b55);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mht-site-search-card__title {
	margin: 0;
	font-family: var(--font-display, "Playfair Display", serif);
	font-size: clamp(1.18rem, 1.7vw, 1.55rem);
	line-height: 1.12;
	color: var(--color-dark, #2e3b55);
}

.mht-site-search-card__excerpt {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.58;
	color: var(--color-text-soft, #68758b);
}

/* =========================================================
   EMPTY + PAGINATION
   ========================================================= */

.mht-site-search-results__empty {
	padding: 24px;
	border-radius: var(--radius-sm, 18px);
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(46, 59, 85, 0.12);
	color: var(--color-text-soft, #68758b);
	font-weight: 650;
}

.mht-site-search-results__pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: clamp(26px, 4vw, 46px);
}

.mht-site-search-results__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	border: 1px solid rgba(46, 59, 85, 0.14);
	color: var(--color-dark, #2e3b55);
	text-decoration: none;
	font-weight: 850;
}

.mht-site-search-results__pagination .page-numbers.current {
	background: var(--color-dark, #2e3b55);
	color: #ffffff;
	border-color: var(--color-dark, #2e3b55);
}

.mht-site-search-results__pagination a.page-numbers:hover {
	background: var(--color-tech-accent, #d4af37);
	color: var(--color-dark, #2e3b55);
	border-color: var(--color-tech-accent, #d4af37);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
	.mht-site-search-results__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mht-site-search__inner {
		grid-template-columns: minmax(0, 1fr) minmax(140px, 0.4fr) auto;
	}

	.mht-site-search__inner .mht-site-search__select:nth-of-type(2) {
		grid-column: span 1;
	}
}

@media (max-width: 760px) {
	.mht-site-search-results {
		width: min(100% - 24px, 1180px);
		padding-top: 28px;
	}

	.mht-site-search__inner {
		grid-template-columns: 1fr;
		padding: 10px;
	}

	.mht-site-search__submit {
		width: 100%;
	}

	.mht-site-search-results__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}


/* =========================================================
   12. LEGACY BLOG LOOP CARDS
   ========================================================= */

:root{
  /* -------------------------
     LEGACY ELEMENTOR LOOP CARD TOKENS
     ------------------------- */
  --legacy-loop-card-bg: linear-gradient(
    180deg,
    var(--color-white),
    color-mix(in srgb, var(--color-surface-muted) 42%, var(--color-white) 58%)
  );
  --legacy-loop-card-border: color-mix(in srgb, var(--color-dark) 10%, transparent);
  --legacy-loop-card-border-hover: var(--border-color-strong);
  --legacy-loop-card-radius: var(--radius-md);
  --legacy-loop-card-shadow: var(--shadow-sm);
  --legacy-loop-card-shadow-hover: var(--shadow-md);

  --legacy-loop-card-content-pad-y: 12px;
  --legacy-loop-card-content-pad-x: 14px;
  --legacy-loop-card-content-gap: var(--space-sm);

  --legacy-loop-card-media-height: 82px;
  --legacy-loop-card-media-margin-bottom: var(--space-md);
  --legacy-loop-card-media-bg: var(--color-surface-soft);
  --legacy-loop-card-media-border: var(--border-color-soft);
  --legacy-loop-card-media-fit: cover;
  --legacy-loop-card-media-position: right center;

  --legacy-loop-card-title-size: var(--font-size-card-title);
  --legacy-loop-card-title-size-tablet: var(--font-size-md);
  --legacy-loop-card-title-line-height: 1.16;
  --legacy-loop-card-title-lines: 2;

  --legacy-loop-card-excerpt-size: var(--font-size-md);
  --legacy-loop-card-excerpt-line-height: 1.5;
  --legacy-loop-card-excerpt-lines: 3;

  --legacy-loop-card-bottom-gap: var(--space-sm);
  --legacy-loop-card-bottom-pad-top: var(--space-sm);

  --legacy-loop-card-meta-gap: var(--space-md);
  --legacy-loop-card-meta-min-height: 30px;
  --legacy-loop-card-trending-min-height: 28px;

  --legacy-loop-card-button-min-height: 32px;
  --legacy-loop-card-button-pad-y: var(--space-sm);
  --legacy-loop-card-button-pad-x: 12px;
}

/* -------------------------
   ELEMENTOR CARD SHELL
   ------------------------- */

.post-card.card1.card--h{
  position: relative;

  display: flex !important;
  flex-direction: column !important;

  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  padding: var(--space-none) !important;
  margin: var(--space-none) !important;
  gap: var(--space-none) !important;
  box-sizing: border-box;

  overflow: visible !important;

  background: var(--legacy-loop-card-bg);
  border: var(--border-thin) !important;
  border-color: var(--legacy-loop-card-border) !important;
  border-radius: var(--legacy-loop-card-radius) !important;
  box-shadow: var(--legacy-loop-card-shadow);

  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body-mobile);
  line-height: var(--line-height-ui);

  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.post-card.card1.card--h:hover,
.post-card.card1.card--h:focus-within{
  border-color: var(--legacy-loop-card-border-hover) !important;
  box-shadow: var(--legacy-loop-card-shadow-hover);
  transform: translateY(-1px);
}

.post-card.card1.card--h,
.post-card.card1.card--h *,
.post-card.card1.card--h *::before,
.post-card.card1.card--h *::after{
  box-sizing: border-box;
}

/* -------------------------
   ELEMENTOR RESET INSIDE CARD
   ------------------------- */

.post-card.card1.card--h .elementor-element,
.post-card.card1.card--h .elementor-widget,
.post-card.card1.card--h .elementor-widget-container,
.post-card.card1.card--h .e-con,
.post-card.card1.card--h .e-child{
  min-width: 0;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;
}

.post-card.card1.card--h .elementor-widget{
  margin-bottom: var(--space-none) !important;
}

.post-card.card1.card--h .e-con,
.post-card.card1.card--h .e-child{
  gap: var(--space-none) !important;
}

/* -------------------------
   CARD CONTENT REGION
   ------------------------- */

.post-card.card1.card--h .card-inner,
.post-card.card1.card--h .card1__content,
.post-card.card1.card--h .card--h__text{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;

  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: var(--legacy-loop-card-content-pad-y) var(--legacy-loop-card-content-pad-x) !important;
  gap: var(--legacy-loop-card-content-gap) !important;
  box-sizing: border-box;

  color: inherit;
  font: inherit;
}

.post-card.card1.card--h .card--h__text > .elementor-widget,
.post-card.card1.card--h .card--h__text > .elementor-element{
  width: 100%;
}

/* -------------------------
   CARD MEDIA
   ------------------------- */

.post-card.card1.card--h .card--h__img,
.post-card.card1.card--h .card-avatar{
  order: 0;
  flex: 0 0 auto;

  display: block !important;
  align-self: stretch;

  width: calc(100% + (var(--legacy-loop-card-content-pad-x) * 2)) !important;
  min-width: calc(100% + (var(--legacy-loop-card-content-pad-x) * 2)) !important;
  max-width: calc(100% + (var(--legacy-loop-card-content-pad-x) * 2)) !important;
  height: var(--legacy-loop-card-media-height);

  margin:
    calc(var(--legacy-loop-card-content-pad-y) * -1)
    calc(var(--legacy-loop-card-content-pad-x) * -1)
    var(--legacy-loop-card-media-margin-bottom) !important;
  padding: var(--space-none) !important;

  overflow: hidden;
  background: var(--legacy-loop-card-media-bg);
  border-bottom: var(--border-thin);
  border-color: var(--legacy-loop-card-media-border);
  border-radius: 0 !important;
  text-decoration: none;
}

.post-card.card1.card--h .card--h__img img,
.post-card.card1.card--h .card-avatar img,
.post-card.card1.card--h .card--h__img .wp-post-image,
.post-card.card1.card--h .card-avatar .wp-post-image{
  display: block !important;

  width: 100% !important;
  height: var(--legacy-loop-card-media-height) !important;
  max-width: none !important;

  margin: var(--space-none) !important;

  aspect-ratio: auto !important;
  object-fit: var(--legacy-loop-card-media-fit) !important;
  object-position: var(--legacy-loop-card-media-position) !important;

  border: var(--border-none) !important;
  border-radius: 0 !important;

  transition: transform var(--duration-mid) var(--ease-soft);
}

.post-card.card1.card--h:hover .card--h__img img,
.post-card.card1.card--h:hover .card-avatar img,
.post-card.card1.card--h:focus-within .card--h__img img,
.post-card.card1.card--h:focus-within .card-avatar img{
  transform: scale(1.03);
}

/* -------------------------
   CARD TITLE
   ------------------------- */

.post-card.card1.card--h .card-title,
.post-card.card1.card--h .card-title .elementor-widget-container,
.post-card.card1.card--h h3.card-title{
  width: 100%;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;
}

.post-card.card1.card--h .card-title,
.post-card.card1.card--h h3.card-title,
.post-card.card1.card--h .card-title .elementor-heading-title{
  min-height: calc(var(--legacy-loop-card-title-line-height) * 1em * var(--legacy-loop-card-title-lines)) !important;
  max-height: calc(var(--legacy-loop-card-title-line-height) * 1em * var(--legacy-loop-card-title-lines)) !important;

  overflow: hidden !important;

  color: var(--color-heading) !important;
  font-family: var(--font-display) !important;
  font-size: var(--legacy-loop-card-title-size) !important;
  font-weight: 700 !important;
  line-height: var(--legacy-loop-card-title-line-height) !important;
}

.post-card.card1.card--h .card-title a,
.post-card.card1.card--h h3.card-title a,
.post-card.card1.card--h .card-title .elementor-heading-title a{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: var(--legacy-loop-card-title-lines) !important;

  margin: var(--space-none) !important;
  padding: var(--space-none) !important;

  overflow: hidden !important;

  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
}

.post-card.card1.card--h .card-title a:hover,
.post-card.card1.card--h .card-title a:focus,
.post-card.card1.card--h h3.card-title a:hover,
.post-card.card1.card--h h3.card-title a:focus{
  color: var(--color-link-hover) !important;
}

/* -------------------------
   CARD EXCERPT
   ------------------------- */

.post-card.card1.card--h .card-excerpt,
.post-card.card1.card--h .card-excerpt .elementor-widget-container,
.post-card.card1.card--h .elementor-widget-post-excerpt,
.post-card.card1.card--h .elementor-widget-theme-post-excerpt,
.post-card.card1.card--h .elementor-post__excerpt,
.post-card.card1.card--h .post-excerpt{
  width: 100%;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;

  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--legacy-loop-card-excerpt-size) !important;
  font-weight: 400 !important;
  line-height: var(--legacy-loop-card-excerpt-line-height) !important;
}

.post-card.card1.card--h .card-excerpt,
.post-card.card1.card--h .elementor-post__excerpt,
.post-card.card1.card--h .post-excerpt{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: var(--legacy-loop-card-excerpt-lines) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* -------------------------
   CARD BOTTOM / META ROWS
   ------------------------- */

.post-card.card1.card--h .card--h__bottom{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  width: 100%;
  margin-top: auto !important;
  padding-top: var(--legacy-loop-card-bottom-pad-top) !important;
  gap: var(--legacy-loop-card-bottom-gap) !important;
  box-sizing: border-box;
}

.post-card.card1.card--h .post-meta-row,
.post-card.card1.card--h .card-trending-row{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: var(--legacy-loop-card-meta-gap) !important;

  width: 100% !important;
  min-width: 0 !important;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;
}

.post-card.card1.card--h .post-meta-row{
  min-height: var(--legacy-loop-card-meta-min-height);
}

.post-card.card1.card--h .card-trending-row{
  align-items: flex-start !important;
  min-height: var(--legacy-loop-card-trending-min-height);
}

.post-card.card1.card--h .post-meta-row > .elementor-element,
.post-card.card1.card--h .post-meta-row > .elementor-widget,
.post-card.card1.card--h .card-trending-row > .elementor-element,
.post-card.card1.card--h .card-trending-row > .elementor-widget{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;
}

.post-card.card1.card--h .card-trending-row:empty{
  display: block !important;
}

.post-card.card1.card--h .post-meta-row--bottom{
  min-height: auto !important;
}

.post-card.card1.card--h .my-blog-card-btn-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: var(--space-sm);
}

.post-card.card1.card--h .my-blog-card-btn,
.post-card.card1.card--h a.my-blog-card-btn{
  min-height: var(--legacy-loop-card-button-min-height);
  padding: var(--legacy-loop-card-button-pad-y) var(--legacy-loop-card-button-pad-x) !important;
  font-size: var(--font-size-ui-sm) !important;
}

/* =========================================================
   13. BLOG RIBBONS
   ========================================================= */

:root{
  /* -------------------------
     BLOG RIBBON TOKENS
     ------------------------- */
  --blog-ribbon-wrap-size: var(--article-card-ribbon-wrap-size);
  --blog-ribbon-offset: var(--article-card-ribbon-offset);

  --blog-ribbon-band-width: var(--article-card-ribbon-band-width);
  --blog-ribbon-band-top: var(--article-card-ribbon-band-top);
  --blog-ribbon-band-right: var(--article-card-ribbon-band-right);

  --blog-ribbon-line-height: var(--article-card-ribbon-line-height);
  --blog-ribbon-letter-spacing: var(--article-card-ribbon-letter-spacing);
  --blog-ribbon-fold-size: var(--article-card-ribbon-fold-size);
  --blog-ribbon-shadow: var(--article-card-ribbon-shadow);

  --blog-ribbon-new-bg: var(--article-card-ribbon-bg);
  --blog-ribbon-new-text: var(--article-card-ribbon-text);
  --blog-ribbon-new-size: var(--article-card-ribbon-font-size);
  --blog-ribbon-new-weight: 700;
  --blog-ribbon-new-border-top: var(--article-card-ribbon-border-top);
  --blog-ribbon-new-border-bottom: var(--article-card-ribbon-border-bottom);
  --blog-ribbon-new-fold: var(--article-card-ribbon-fold-color);

  --blog-ribbon-trending-bg: linear-gradient(
    180deg,
    var(--color-dark-muted) 0%,
    var(--color-dark) 100%
  );
  --blog-ribbon-trending-text: var(--color-accent);
  --blog-ribbon-trending-size: var(--font-size-sm);
  --blog-ribbon-trending-weight: 800;
  --blog-ribbon-trending-border-top: var(--color-dark-muted);
  --blog-ribbon-trending-border-bottom: var(--color-dark);
  --blog-ribbon-trending-fold: var(--color-dark);

  --blog-ribbon-wrap-size-mobile: var(--article-card-ribbon-wrap-size-mobile);
  --blog-ribbon-band-width-mobile: var(--article-card-ribbon-band-width-mobile);
  --blog-ribbon-band-top-mobile: var(--article-card-ribbon-band-top-mobile);
  --blog-ribbon-band-right-mobile: var(--article-card-ribbon-band-right-mobile);
  --blog-ribbon-line-height-mobile: var(--article-card-ribbon-line-height-mobile);
  --blog-ribbon-size-mobile: var(--article-card-ribbon-font-size-mobile);
}

/* -------------------------
   RIBBON BASE
   ------------------------- */

.my-blog-new-ribbon,
.my-blog-trending-ribbon{
  position: absolute;
  top: var(--blog-ribbon-offset);
  right: var(--blog-ribbon-offset);
  z-index: 20;

  width: var(--blog-ribbon-wrap-size);
  height: var(--blog-ribbon-wrap-size);

  overflow: hidden;
  pointer-events: none;

  background: transparent !important;
  border: var(--border-none) !important;
  box-shadow: none !important;
}

.my-blog-new-ribbon{
  --ribbon-bg: var(--blog-ribbon-new-bg);
  --ribbon-text: var(--blog-ribbon-new-text);
  --ribbon-font-size: var(--blog-ribbon-new-size);
  --ribbon-font-weight: var(--blog-ribbon-new-weight);
  --ribbon-border-top: var(--blog-ribbon-new-border-top);
  --ribbon-border-bottom: var(--blog-ribbon-new-border-bottom);
  --ribbon-fold-color: var(--blog-ribbon-new-fold);
}

.my-blog-trending-ribbon{
  --ribbon-bg: var(--blog-ribbon-trending-bg);
  --ribbon-text: var(--blog-ribbon-trending-text);
  --ribbon-font-size: var(--blog-ribbon-trending-size);
  --ribbon-font-weight: var(--blog-ribbon-trending-weight);
  --ribbon-border-top: var(--blog-ribbon-trending-border-top);
  --ribbon-border-bottom: var(--blog-ribbon-trending-border-bottom);
  --ribbon-fold-color: var(--blog-ribbon-trending-fold);
}

.my-blog-new-ribbon span,
.my-blog-trending-ribbon span{
  position: absolute;
  top: var(--blog-ribbon-band-top);
  right: var(--blog-ribbon-band-right);

  display: block;
  width: var(--blog-ribbon-band-width);

  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);

  background: var(--ribbon-bg);
  color: var(--ribbon-text);

  border-top: var(--border-width-thin) var(--border-style-standard) var(--ribbon-border-top);
  border-bottom: var(--border-width-thin) var(--border-style-standard) var(--ribbon-border-bottom);
  box-shadow: var(--blog-ribbon-shadow);

  font-family: var(--font-body);
  font-size: var(--ribbon-font-size);
  font-weight: var(--ribbon-font-weight);
  line-height: var(--blog-ribbon-line-height);
  letter-spacing: var(--blog-ribbon-letter-spacing);
  text-align: center;
  text-transform: uppercase;
}

.my-blog-new-ribbon span::before,
.my-blog-new-ribbon span::after,
.my-blog-trending-ribbon span::before,
.my-blog-trending-ribbon span::after{
  content: "";
  position: absolute;
  top: 100%;
  z-index: -1;
}

.my-blog-new-ribbon span::before,
.my-blog-trending-ribbon span::before{
  left: 0;
  border-left: var(--blog-ribbon-fold-size) solid var(--ribbon-fold-color);
  border-right: var(--blog-ribbon-fold-size) solid transparent;
  border-top: var(--blog-ribbon-fold-size) solid var(--ribbon-fold-color);
  border-bottom: var(--blog-ribbon-fold-size) solid transparent;
}

.my-blog-new-ribbon span::after,
.my-blog-trending-ribbon span::after{
  right: 0;
  border-right: var(--blog-ribbon-fold-size) solid var(--ribbon-fold-color);
  border-left: var(--blog-ribbon-fold-size) solid transparent;
  border-top: var(--blog-ribbon-fold-size) solid var(--ribbon-fold-color);
  border-bottom: var(--blog-ribbon-fold-size) solid transparent;
}


/* =========================================================
   14. BLOG META / RATING / AUTHOR / VIEWS
   ========================================================= */

:root{
  /* -------------------------
     BLOG META ROW TOKENS
     ------------------------- */
  --blog-meta-row-gap: var(--space-md);
  --blog-meta-row-margin-bottom: var(--space-md);
  --blog-meta-row-views-offset: calc(var(--space-xxs) * -1);

  --blog-rate-row-gap: var(--space-sm);

  /* -------------------------
     BLOG META PILL TOKENS
     ------------------------- */
  --blog-meta-pill-gap: var(--space-sm);
  --blog-meta-pill-min-height: 32px;
  --blog-meta-pill-pad-y: 3px;
  --blog-meta-pill-pad-x: var(--space-md);
  --blog-meta-pill-radius: var(--radius-sm);

  --blog-meta-pill-bg: linear-gradient(
    180deg,
    var(--button-blue-soft-bg),
    var(--button-blue-soft-bg-hover)
  );
  --blog-meta-pill-bg-hover: linear-gradient(
    180deg,
    var(--button-blue-soft-bg-hover),
    var(--color-surface-soft)
  );
  --blog-meta-pill-text: var(--color-dark);
  --blog-meta-pill-border: var(--button-blue-soft-border);
  --blog-meta-pill-border-hover: var(--border-color-strong);
  --blog-meta-pill-shadow: var(--shadow-sm);
  --blog-meta-pill-shadow-hover: var(--shadow-md);

  --blog-meta-pill-muted: var(--color-text-muted);
  --blog-meta-pill-strong: var(--color-dark);

  --blog-meta-pill-font-size: var(--font-size-ui-sm);
  --blog-meta-pill-font-weight: 700;

  --blog-star-size: var(--font-size-sm);
  --blog-star-empty: color-mix(in srgb, var(--color-text-soft) 88%, var(--color-dark) 12%);
  --blog-star-active: var(--color-accent);

  /* -------------------------
     INLINE STATUS PILL TOKENS
     ------------------------- */
  --blog-status-pill-min-height: var(--article-card-label-min-height);
  --blog-status-pill-pad-x: var(--article-card-label-pad-x);
  --blog-status-pill-bg: var(--button-blue-soft-bg);
  --blog-status-pill-border: var(--button-blue-soft-border);
  --blog-status-pill-text: var(--color-dark);
  --blog-status-pill-size: var(--font-size-ui-xs);
  --blog-status-pill-letter-spacing: 0.05em;

  /* -------------------------
     TRENDING BADGE TOKENS
     ------------------------- */
  --blog-trending-badge-pad-y: var(--space-sm);
  --blog-trending-badge-pad-x: var(--space-md);
  --blog-trending-badge-color: var(--color-accent);
  --blog-trending-badge-size: var(--font-size-lg);
}

/* -------------------------
   ELEMENTOR SHORTCODE WRAPPER RESETS
   ------------------------- */

.post-meta-row.elementor-widget-shortcode,
.post-meta-row.elementor-widget-shortcode > .elementor-widget-container,
.post-meta-row.elementor-widget-shortcode .elementor-shortcode,
.post-card__author-pill,
.post-card__author-pill .elementor-widget-container,
.post-card__author-pill .elementor-shortcode{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  margin: var(--space-none) !important;
  padding: var(--space-none) !important;

  background: transparent !important;
  border: var(--border-none) !important;
  box-shadow: none !important;

  color: var(--color-dark) !important;
  font-family: var(--font-body) !important;
  line-height: 1.2;
}

.post-meta-row.elementor-widget-shortcode{
  display: inline-flex !important;
  align-items: center !important;
}

/* -------------------------
   META ROWS
   ------------------------- */

.post-meta-row,
.post-meta-row--views{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--blog-meta-row-gap);

  width: 100%;
  min-width: 0;
  margin: var(--space-none) var(--space-none) var(--blog-meta-row-margin-bottom);
  padding: var(--space-none);

  font-family: var(--font-body);
}

.post-meta-row--views{
  margin-top: var(--blog-meta-row-views-offset);
}

.rate-post-row{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: var(--blog-rate-row-gap) !important;

  width: 100% !important;
  min-width: 0 !important;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;
}

.rate-post-row > .elementor-element,
.rate-post-row > .elementor-widget,
.rate-post-row > *{
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;
  white-space: nowrap !important;
}

/* -------------------------
   SHARED META PILL BASE
   ------------------------- */

.my-blog-rate-post,
.my-blog-rating-display,
.my-blog-author-pill,
.post-view-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: var(--blog-meta-pill-gap);

  width: auto;
  max-width: 100%;
  min-height: var(--blog-meta-pill-min-height);

  margin: var(--space-none);
  padding: var(--blog-meta-pill-pad-y) var(--blog-meta-pill-pad-x);
  box-sizing: border-box;

  background: var(--blog-meta-pill-bg);
  border: var(--border-thin);
  border-color: var(--blog-meta-pill-border);
  border-radius: var(--blog-meta-pill-radius);
  box-shadow: var(--blog-meta-pill-shadow);

  color: var(--blog-meta-pill-text);
  font-family: var(--font-body);
  font-size: var(--blog-meta-pill-font-size);
  font-weight: var(--blog-meta-pill-font-weight);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.my-blog-rate-post:hover,
.my-blog-rate-post:focus-within,
.my-blog-rating-display:hover,
.my-blog-author-pill:hover,
.my-blog-author-pill:focus-within,
.post-view-count:hover{
  background: var(--blog-meta-pill-bg-hover);
  border-color: var(--blog-meta-pill-border-hover);
  color: var(--blog-meta-pill-text);
  box-shadow: var(--blog-meta-pill-shadow-hover);
  transform: translateY(-1px);
}

/* -------------------------
   META TEXT PARTS
   ------------------------- */

.my-blog-rate-post__label,
.my-blog-author-pill__name,
.my-blog-rating-display__average,
.my-blog-rate-post__average{
  margin: var(--space-none);
  color: var(--blog-meta-pill-strong);
  font-size: var(--blog-meta-pill-font-size);
  font-weight: 800;
  line-height: 1;
}

.my-blog-author-pill__label,
.my-blog-rate-post__note,
.my-blog-rate-post__status,
.my-blog-rating-display__count,
.my-blog-rating-display__thanks,
.my-blog-rate-post__count{
  color: var(--blog-meta-pill-muted);
  font-size: var(--blog-meta-pill-font-size);
  font-weight: 600;
  line-height: 1;
}

.my-blog-rating-display__text{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--blog-meta-pill-gap);

  width: auto;
  max-width: 100%;

  color: var(--blog-meta-pill-strong);
  font-size: var(--blog-meta-pill-font-size);
  line-height: 1;
}

/* -------------------------
   STARS
   ------------------------- */

.my-blog-rate-post__stars,
.my-blog-rating-display__stars{
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);

  width: auto;
  max-width: 100%;
  line-height: 1;
}

.my-blog-rate-post__star,
.my-blog-rating-display__star{
  position: relative;
  display: inline-block;

  margin: var(--space-none);
  padding: var(--space-none);

  background: transparent;
  border: var(--border-none);
  box-shadow: none;

  font-size: var(--blog-star-size);
  line-height: 1;
}

.my-blog-rate-post__star{
  color: var(--blog-star-empty);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transform: none;

  transition:
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.my-blog-rate-post__star:hover,
.my-blog-rate-post__star:focus-visible{
  background: transparent;
  color: var(--blog-star-active);
  box-shadow: none;
  transform: translateY(-1px);
  outline: none;
}

.my-blog-rate-post.is-submitting .my-blog-rate-post__star{
  opacity: 0.55;
  pointer-events: none;
}

.my-blog-rating-display__star.is-full{
  color: var(--blog-star-active);
}

.my-blog-rating-display__star.is-empty,
.my-blog-rating-display__star.is-half{
  color: var(--blog-star-empty);
}

.my-blog-rating-display__star.is-half::after{
  content: "\2605";
  position: absolute;
  inset: 0 auto 0 0;

  width: 50%;
  overflow: hidden;

  color: var(--blog-star-active);
}

/* -------------------------
   INLINE NEW / STATUS TEXT
   - No inner pill
   - Prevents double-pill styling when rating display already has a wrapper pill
   ------------------------- */

.my-blog-rating-display__pill,
.my-blog-rating-display__pill--new{
  display: inline !important;

  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: inherit !important;
  font-family: var(--font-body) !important;
  font-size: inherit !important;
  font-weight: 900 !important;
  line-height: inherit !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}


/* -------------------------
   TRENDING BADGES / VIEW COUNT
   ------------------------- */

.my-blog-trending-badge,
.hotips-trending-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  margin: var(--space-none);
  padding: var(--blog-trending-badge-pad-y) var(--blog-trending-badge-pad-x);

  color: var(--blog-trending-badge-color);
  font-family: var(--font-body);
  font-size: var(--blog-trending-badge-size);
  font-weight: 800;
  line-height: 1;
}

.post-card.card1.card--h .hotips-trending-badge,
.post-card.card1.card--h .my-blog-trending-badge{
  padding: var(--blog-trending-badge-pad-y) var(--blog-trending-badge-pad-x);
  color: var(--blog-trending-badge-color);
  font-size: var(--blog-trending-badge-size);
  line-height: 1;
}

.post-view-count{
  color: var(--blog-meta-pill-text);
}

/* -------------------------
   BLOG META RESPONSIVE
   ------------------------- */

@media (max-width: 1024px){
  .post-card.card1.card--h .card-title,
  .post-card.card1.card--h h3.card-title{
    font-size: var(--legacy-loop-card-title-size-tablet) !important;
  }
}

@media (max-width: 767px){
  .my-blog-new-ribbon,
  .my-blog-trending-ribbon{
    top: calc(var(--space-sm) * -1);
    right: calc(var(--space-sm) * -1);
    width: var(--blog-ribbon-wrap-size-mobile);
    height: var(--blog-ribbon-wrap-size-mobile);
  }

  .my-blog-new-ribbon span,
  .my-blog-trending-ribbon span{
    top: var(--blog-ribbon-band-top-mobile);
    right: var(--blog-ribbon-band-right-mobile);
    width: var(--blog-ribbon-band-width-mobile);
    line-height: var(--blog-ribbon-line-height-mobile);
    font-size: var(--blog-ribbon-size-mobile);
  }

  .my-blog-rate-post,
  .my-blog-rating-display,
  .my-blog-author-pill,
  .post-view-count{
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-ui-sm);
  }

  .my-blog-rate-post__label,
  .my-blog-rate-post__note,
  .my-blog-rate-post__status,
  .my-blog-rating-display__text,
  .my-blog-rating-display__thanks,
  .my-blog-author-pill__label,
  .my-blog-author-pill__name,
  .post-view-count,
  .my-blog-trending-badge,
  .hotips-trending-badge,
  .my-blog-rate-post__star,
  .my-blog-rating-display__star{
    font-size: var(--font-size-ui-sm);
  }

  .my-blog-trending-badge,
  .hotips-trending-badge{
    padding: var(--space-sm) var(--space-md);
  }
}
/* =========================================================
   15. SINGLE BLOG LAYOUT + HERO EXTENSIONS
   ========================================================= */

:root{
  /* -------------------------
     SINGLE BLOG SHELL
     ------------------------- */
  --single-blog-shell-width: min(90%, 1100px);
  --single-blog-shell-bg: var(--color-surface);
  --single-blog-shell-text: var(--color-text);
  --single-blog-shell-line-height: var(--line-height-body);

  --single-blog-body-pad: clamp(var(--space-xl), 2.6vw, 28px);
  --single-blog-body-size: var(--font-size-body);
  --single-blog-body-size-mobile: var(--font-size-body-mobile);
  --single-blog-body-line-height: var(--line-height-body);

  --single-blog-body-list-indent: 1.15em;
  --single-blog-body-li-margin: 0.35em 0;

  /* -------------------------
     SINGLE BLOG HEADINGS
     ------------------------- */
  --single-blog-heading-line-height: var(--line-height-heading);
  --single-blog-heading-margin-bottom: 0.6em;

  --single-blog-h1-size: var(--font-size-content-h1);
  --single-blog-h2-size: var(--font-size-content-h2);
  --single-blog-h3-size: var(--font-size-content-h3);
  --single-blog-h4-size: var(--font-size-content-h4);
  --single-blog-h5-size: var(--font-size-ui);

  --single-blog-title-accent: var(--color-accent);
  --single-blog-title-margin-bottom: var(--space-xl);

  /* -------------------------
     SINGLE BLOG QUOTES / TABLES / CODE
     ------------------------- */
  --single-blog-blockquote-pad-y: 14px;
  --single-blog-blockquote-pad-x: var(--space-xl);
  --single-blog-blockquote-accent-width: var(--space-xs);
  --single-blog-blockquote-bg: var(--color-surface-soft);
  --single-blog-blockquote-text: var(--color-black-soft);
  --single-blog-blockquote-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  --single-blog-table-radius: var(--radius-sm);
  --single-blog-table-cell-pad-y: var(--space-md);
  --single-blog-table-cell-pad-x: 12px;
  --single-blog-table-head-bg: var(--color-surface-soft);

  --single-blog-code-bg: var(--color-dark);
  --single-blog-code-text: var(--color-white);
  --single-blog-code-border: var(--border-color-contrast);
  --single-blog-code-pad-y: 14px;
  --single-blog-code-pad-x: var(--space-xl);
  --single-blog-code-radius: var(--radius-sm);

  /* -------------------------
     BLOG HERO META
     ------------------------- */
  --single-blog-hero-meta-gap: var(--space-sm);
  --single-blog-hero-meta-margin-top: var(--space-xl);
  --single-blog-hero-meta-min-height: 30px;
  --single-blog-hero-meta-pad-y: 5px;
  --single-blog-hero-meta-pad-x: var(--space-md);
  --single-blog-hero-meta-border: var(--border-color-strong);
  --single-blog-hero-meta-radius: var(--radius-pill);
  --single-blog-hero-meta-bg: var(--color-glass-light);
  --single-blog-hero-meta-shadow: var(--shadow-sm);
  --single-blog-hero-meta-font-size: var(--font-size-ui-xs);
  --single-blog-hero-meta-blur: 3px;

  --single-blog-hero-trending-min-width: 30px;
  --single-blog-hero-trending-pad-x: 9px;

  /* -------------------------
     BLOG RATING ROW
     ------------------------- */
  --single-blog-rating-row-margin: var(--space-sm) 0 var(--space-2xl);
  --single-blog-rating-row-gap: 12px;

  --single-blog-rating-pill-gap: var(--space-md);
  --single-blog-rating-pill-min-height: 42px;
  --single-blog-rating-pill-pad-y: var(--space-md);
  --single-blog-rating-pill-pad-x: var(--space-xl);
  --single-blog-rating-pill-border: var(--border-color-strong);
  --single-blog-rating-pill-radius: var(--radius-pill);
  --single-blog-rating-pill-bg: var(--color-glass-light-strong);
  --single-blog-rating-pill-shadow: var(--shadow-md);
  --single-blog-rating-pill-font-size: var(--font-size-ui);
}

/* -------------------------
   ELEMENTOR / SINGLE BLOG SHELL
   ------------------------- */

.elementor-theme-builder-content-area{
  background: var(--color-bg);
}

.post-single,
.elementor-theme-builder-content-area .post-single{
  color: var(--single-blog-shell-text);
  font-family: var(--font-body);
  line-height: var(--single-blog-shell-line-height);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.post-single{
  width: var(--single-blog-shell-width);
  margin: var(--space-none) auto;
  background: var(--single-blog-shell-bg) !important;
  overflow: hidden;
}

.post-single::after{
  content: "";
  display: block;
  clear: both;
}

.post-single .single-body{
  display: block !important;
  padding: var(--single-blog-body-pad);
}

/* -------------------------
   SINGLE BLOG BODY TYPOGRAPHY
   ------------------------- */

.post-single .single-body,
.post-single .single-body p,
.post-single .single-body li{
  color: var(--single-blog-shell-text);
  font-family: var(--font-body);
  font-size: var(--single-blog-body-size);
  line-height: var(--single-blog-body-line-height);
}

.post-single .single-body p{
  margin: var(--space-none) var(--space-none) var(--space-xl);
}

.post-single .single-body p:last-child{
  margin-bottom: var(--space-none);
}

.post-single .single-body ul,
.post-single .single-body ol{
  padding-left: var(--single-blog-body-list-indent);
}

.post-single .single-body li{
  margin: var(--single-blog-body-li-margin);
}

.post-single .single-body h1,
.post-single .single-body h2,
.post-single .single-body h3,
.post-single .single-body h4,
.post-single .single-body h5,
.post-single .single-body h6{
  margin: var(--space-none) var(--space-none) var(--single-blog-heading-margin-bottom);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--single-blog-heading-line-height);
}

.post-single .single-body h1{ font-size: var(--single-blog-h1-size); }
.post-single .single-body h2{ font-size: var(--single-blog-h2-size); }
.post-single .single-body h3{ font-size: var(--single-blog-h3-size); }
.post-single .single-body h4{ font-size: var(--single-blog-h4-size); }
.post-single .single-body h5,
.post-single .single-body h6{ font-size: var(--single-blog-h5-size); }

/* -------------------------
   LEGACY ELEMENTOR BLOG TITLE
   ------------------------- */

.post-single .BlogTit h1,
.post-single .BlogTit .elementor-heading-title,
.post-single .elementor-widget-theme-post-title.BlogTit h1,
.post-single .elementor-widget-theme-post-title.BlogTit .elementor-heading-title{
  margin: var(--space-none) var(--space-none) var(--single-blog-title-margin-bottom) !important;
  color: var(--single-blog-title-accent) !important;
  font-family: var(--font-display) !important;
  font-size: var(--single-blog-h1-size) !important;
  font-weight: 700 !important;
  line-height: var(--single-blog-heading-line-height) !important;
}

/* -------------------------
   BLOCKQUOTE / TABLE / CODE
   ------------------------- */

.post-single .single-body blockquote{
  margin: var(--space-xl) var(--space-none);
  padding: var(--single-blog-blockquote-pad-y) var(--single-blog-blockquote-pad-x);
  border-left: var(--single-blog-blockquote-accent-width) solid var(--color-accent);
  border-radius: var(--single-blog-blockquote-radius);
  background: var(--single-blog-blockquote-bg);
  color: var(--single-blog-blockquote-text);
}

.post-single .single-body blockquote > *:first-child{
  margin-top: var(--space-none);
}

.post-single .single-body blockquote > *:last-child{
  margin-bottom: var(--space-none);
}

.post-single .single-body table{
  width: 100%;
  border-collapse: collapse;
  border: var(--border-thin);
  border-radius: var(--single-blog-table-radius);
  overflow: hidden;
}

.post-single .single-body th,
.post-single .single-body td{
  padding: var(--single-blog-table-cell-pad-y) var(--single-blog-table-cell-pad-x);
  border-bottom: var(--border-thin);
  vertical-align: top;
}

.post-single .single-body th{
  background: var(--single-blog-table-head-bg);
  color: var(--color-dark);
  text-align: left;
}

.post-single .single-body pre{
  overflow: auto;
  padding: var(--single-blog-code-pad-y) var(--single-blog-code-pad-x);
  border: var(--border-width-thin) var(--border-style-standard) var(--single-blog-code-border);
  border-radius: var(--single-blog-code-radius);
  background: var(--single-blog-code-bg);
  color: var(--single-blog-code-text);
}

.post-single .single-body code{
  font-family: var(--font-body);
}

/* -------------------------
   BLOG HERO META
   ------------------------- */

.hotips-hero--blog .hotips-hero-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--single-blog-hero-meta-gap);
  margin-top: var(--single-blog-hero-meta-margin-top);
}

.hotips-hero--blog .hotips-hero-meta > *{
  margin: var(--space-none);
}

.hotips-hero--blog .my-blog-author-pill,
.hotips-hero--blog .post-view-count,
.hotips-hero--blog .hotips-trending-badge,
.hotips-hero--blog .my-blog-rating-display,
.hotips-hero--blog .my-blog-rate-post,
.hotips-hero-meta__item{
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);

  min-height: var(--single-blog-hero-meta-min-height);
  padding: var(--single-blog-hero-meta-pad-y) var(--single-blog-hero-meta-pad-x);

  border: var(--border-width-thin) var(--border-style-standard) var(--single-blog-hero-meta-border);
  border-radius: var(--single-blog-hero-meta-radius);
  background: var(--single-blog-hero-meta-bg);
  box-shadow: var(--single-blog-hero-meta-shadow);

  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: var(--single-blog-hero-meta-font-size);
  line-height: 1.15;

  backdrop-filter: blur(var(--single-blog-hero-meta-blur));
  -webkit-backdrop-filter: blur(var(--single-blog-hero-meta-blur));
}

.hotips-hero--blog .hotips-trending-badge{
  justify-content: center;
  min-width: var(--single-blog-hero-trending-min-width);
  padding-inline: var(--single-blog-hero-trending-pad-x);
  background: var(--color-dark);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.hotips-hero-meta__label,
.hotips-hero--blog .my-blog-author-pill__label{
  color: var(--color-text-muted);
  font-weight: 500;
}

.hotips-hero-meta__value,
.hotips-hero--blog .my-blog-author-pill__name{
  color: var(--color-dark);
  font-weight: 700;
}

.hotips-hero-meta__item--views .post-view-count{
  min-height: 0;
  padding: var(--space-none);
  border: var(--border-none);
  background: transparent;
  box-shadow: none;
  font-size: inherit;
  line-height: inherit;
}

/* -------------------------
   BLOG HERO RATING ROW
   ------------------------- */

.hotips-blog-hero-rating-row{
  margin: var(--single-blog-rating-row-margin);
}

.hotips-blog-hero-rating-row__inner{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--single-blog-rating-row-gap);
  min-height: 0;
}

.hotips-blog-hero-rating-row .my-blog-rating-display,
.hotips-blog-hero-rating-row .my-blog-rate-post,
.hotips-blog-hero-rating-row .post-view-count{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--single-blog-rating-pill-gap);

  min-height: var(--single-blog-rating-pill-min-height);
  padding: var(--single-blog-rating-pill-pad-y) var(--single-blog-rating-pill-pad-x);

  border: var(--border-width-thin) var(--border-style-standard) var(--single-blog-rating-pill-border);
  border-radius: var(--single-blog-rating-pill-radius);
  background: var(--single-blog-rating-pill-bg);
  box-shadow: var(--single-blog-rating-pill-shadow);

  color: var(--color-dark);
  font-size: var(--single-blog-rating-pill-font-size);
  line-height: 1.2;
}

.hotips-blog-hero-rating-row .post-view-count{
  font-weight: 600;
  white-space: nowrap;
}

/* =========================================================
   16. SINGLE BLOG FEATURED IMAGE / TOPPER
   ========================================================= */

:root{
  /* -------------------------
     FLOAT FEATURED IMAGE
     ------------------------- */
  --single-blog-float-image-width: min(42%, 420px);
  --single-blog-float-image-max-width: 420px;
  --single-blog-float-image-margin: 0 24px 18px 0;
  --single-blog-float-image-border: var(--border-thick-accent);
  --single-blog-float-image-radius: var(--radius-lg);

  /* -------------------------
     STANDARD FEATURED IMAGE
     ------------------------- */
  --single-blog-featured-margin-bottom: 24px;
  --single-blog-featured-border: var(--border-thin);
  --single-blog-featured-border-color: color-mix(in srgb, var(--color-dark) 14%, transparent);
  --single-blog-featured-radius: var(--radius-cut-sm);
  --single-blog-featured-shadow: var(--shadow-md);
  --single-blog-featured-bg: var(--color-surface-soft);
  --single-blog-featured-max-height: 520px;

  /* -------------------------
     TOPPER IMAGE
     ------------------------- */
  --single-blog-topper-breakout-margin: -28px -28px 24px;
  --single-blog-topper-height: 200px;
  --single-blog-topper-border-color: var(--border-color-soft);
  --single-blog-topper-bg: var(--color-white);

  --single-blog-topper-fade-left: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-white) 96%, transparent) 0%,
    color-mix(in srgb, var(--color-white) 82%, transparent) 14%,
    color-mix(in srgb, var(--color-white) 42%, transparent) 30%,
    color-mix(in srgb, var(--color-white) 0%, transparent) 52%
  );

  --single-blog-topper-fade-vertical: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-white) 20%, transparent) 0%,
    color-mix(in srgb, var(--color-white) 0%, transparent) 22%,
    color-mix(in srgb, var(--color-white) 0%, transparent) 78%,
    color-mix(in srgb, var(--color-white) 18%, transparent) 100%
  );

  --single-blog-topper-title-wrap-pad-y: 18px;
  --single-blog-topper-title-wrap-pad-x: 28px;
  --single-blog-topper-title-wrap-bg: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-white) 90%, transparent) 0%,
    color-mix(in srgb, var(--color-white) 72%, transparent) 34%,
    color-mix(in srgb, var(--color-white) 22%, transparent) 72%,
    color-mix(in srgb, var(--color-white) 0%, transparent) 100%
  );

  --single-blog-topper-title-max-width: 28ch;
  --single-blog-topper-title-size: clamp(18px, 2.2vw, 25px);
  --single-blog-topper-title-line-height: 1.05;

  --single-blog-page-title-margin-bottom: var(--space-xl);
  --single-blog-page-title-size: clamp(24px, 3vw, 30px);
  --single-blog-page-title-line-height: 1.12;

  --single-blog-topper-meta-gap-row: var(--space-md);
  --single-blog-topper-meta-gap-col: 12px;
  --single-blog-topper-meta-margin: -60px 0 26px -15px;
  --single-blog-topper-meta-pad: 0 28px 0 13px;
}

/* -------------------------
   LEGACY FLOAT IMAGE
   ------------------------- */

.post-single .BlogImageL{
  float: left !important;
  width: var(--single-blog-float-image-width) !important;
  max-width: var(--single-blog-float-image-max-width) !important;
  margin: var(--single-blog-float-image-margin) !important;
  padding: var(--space-none) !important;
}

.post-single .BlogImageL .elementor-widget-container,
.post-single .BlogImageL .elementor-image{
  width: 100% !important;
  max-width: 100% !important;
  margin: var(--space-none) !important;
  padding: var(--space-none) !important;
}

.post-single .BlogImageL img,
.post-single .BlogImageL .wp-post-image{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: var(--space-none) !important;
  box-sizing: border-box !important;

  border: var(--single-blog-float-image-border) !important;
  border-radius: var(--single-blog-float-image-radius) !important;
}

/* -------------------------
   STANDARD FEATURED IMAGE
   ------------------------- */

.hotips-entry--single-blog .hotips-entry__content{
  position: relative;
}

.hotips-single-blog-featured-image{
  width: 100%;
  margin: var(--space-none) var(--space-none) var(--single-blog-featured-margin-bottom);

  overflow: hidden;
  background: var(--single-blog-featured-bg);

  border: var(--single-blog-featured-border);
  border-color: var(--single-blog-featured-border-color);
  border-radius: var(--single-blog-featured-radius);
  box-shadow: var(--single-blog-featured-shadow);
}

.hotips-single-blog-featured-image img{
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--single-blog-featured-max-height);
  object-fit: cover;
  object-position: center center;
}

/* -------------------------
   TOPPER FEATURED IMAGE
   ------------------------- */

.hotips-entry--single-blog .hotips-single-blog-featured-image--topper{
  position: relative;
  z-index: 2;
  width: auto;
  margin: var(--single-blog-topper-breakout-margin);
}

.hotips-single-blog-featured-image--topper{
  position: relative;
  width: 100%;
  height: var(--single-blog-topper-height);
  overflow: hidden;

  background: var(--single-blog-topper-bg);
  border-top: var(--border-width-thin) var(--border-style-standard) var(--single-blog-topper-border-color);
  border-bottom: var(--border-width-thin) var(--border-style-standard) var(--single-blog-topper-border-color);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
}

.hotips-single-blog-featured-image--topper img{
  display: block;
  width: 100%;
  height: var(--single-blog-topper-height);
  object-fit: cover;
  object-position: center center;
  background: var(--single-blog-topper-bg);
}

.hotips-single-blog-featured-image--topper::before,
.hotips-single-blog-featured-image--topper::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotips-single-blog-featured-image--topper::before{
  background: var(--single-blog-topper-fade-left);
}

.hotips-single-blog-featured-image--topper::after{
  background: var(--single-blog-topper-fade-vertical);
}

/* -------------------------
   TOPPER TITLE + PAGE TITLE
   ------------------------- */

.hotips-single-blog-topper-title-wrap{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: auto;
  z-index: 3;

  padding: var(--single-blog-topper-title-wrap-pad-y) var(--single-blog-topper-title-wrap-pad-x);
  background: var(--single-blog-topper-title-wrap-bg);
  pointer-events: none;
}

.hotips-single-blog-topper-title,
.hotips-single-blog-title{
  margin: var(--space-none);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

.hotips-single-blog-topper-title{
  max-width: var(--single-blog-topper-title-max-width);
  font-size: var(--single-blog-topper-title-size);
  line-height: var(--single-blog-topper-title-line-height);
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.hotips-single-blog-header{
  width: 100%;
  margin: var(--space-none) var(--space-none) var(--single-blog-page-title-margin-bottom);
}

.hotips-single-blog-title{
  font-size: var(--single-blog-page-title-size);
  line-height: var(--single-blog-page-title-line-height);
}

/* -------------------------
   TOPPER META
   ------------------------- */

.hotips-single-blog-topper-meta{
  position: relative;
  z-index: 4;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--single-blog-topper-meta-gap-row) var(--single-blog-topper-meta-gap-col);

  margin: var(--single-blog-topper-meta-margin);
  padding: var(--single-blog-topper-meta-pad);
}

.hotips-single-blog-topper-meta > *{
  margin: var(--space-none);
}

/* =========================================================
   16A. SINGLE BLOG AREA THEME OVERRIDES
   - taxonomy-driven single blog shell theming
   - uses PHP classes from:
     has-content-area
     content-area-parent-money
     content-area-parent-wellness
     content-area-child-...
   - keeps layout structure the same
   ========================================================= */

/* -------------------------
   PARENT AREA TOKENS
   ------------------------- */

.hotips-page-shell--single-blog.content-area-parent-money{
  --single-blog-area-accent: var(--color-tech-accent);
  --single-blog-area-accent-muted: var(--color-tech-accent-muted);
  --single-blog-area-soft: var(--color-tech-soft);
  --single-blog-area-soft-muted: var(--color-tech-soft-muted);
  --single-blog-area-ink: var(--color-dark);
  --single-blog-area-ink-muted: var(--color-dark-muted);
  --single-blog-area-line: color-mix(in srgb, var(--color-tech-accent) 18%, var(--border-color-light));
  --single-blog-area-shell-bg: color-mix(in srgb, var(--color-surface) 90%, var(--color-tech-soft-muted) 10%);
  --single-blog-area-panel-bg: color-mix(in srgb, var(--color-surface) 94%, var(--color-tech-soft) 6%);
  --single-blog-area-topper-tint: color-mix(in srgb, var(--color-tech-soft) 28%, transparent);
}

.hotips-page-shell--single-blog.content-area-parent-wellness{
  --single-blog-area-accent: var(--color-wellness-olive);
  --single-blog-area-accent-muted: var(--color-wellness-soft);
  --single-blog-area-soft: var(--color-wellness-soft);
  --single-blog-area-soft-muted: color-mix(in srgb, var(--color-wellness-soft) 72%, var(--color-white) 28%);
  --single-blog-area-ink: var(--color-wellness-black-soft);
  --single-blog-area-ink-muted: color-mix(in srgb, var(--color-wellness-black-soft) 72%, var(--color-wellness-olive) 28%);
  --single-blog-area-line: color-mix(in srgb, var(--color-wellness-olive) 22%, var(--color-wellness-line));
  --single-blog-area-shell-bg: color-mix(in srgb, var(--color-surface) 88%, var(--color-wellness-soft) 12%);
  --single-blog-area-panel-bg: color-mix(in srgb, var(--color-surface) 92%, var(--color-wellness-soft) 8%);
  --single-blog-area-topper-tint: color-mix(in srgb, var(--color-wellness-soft) 34%, transparent);
}

/* fallback if no parent class exists */
.hotips-page-shell--single-blog{
  --single-blog-area-accent: var(--color-accent);
  --single-blog-area-accent-muted: var(--color-surface-soft);
  --single-blog-area-soft: var(--color-surface-soft);
  --single-blog-area-soft-muted: var(--color-surface-muted);
  --single-blog-area-ink: var(--color-heading);
  --single-blog-area-ink-muted: var(--color-text-muted);
  --single-blog-area-line: var(--border-color-light);
  --single-blog-area-shell-bg: var(--color-surface);
  --single-blog-area-panel-bg: var(--color-surface);
  --single-blog-area-topper-tint: transparent;
}

/* -------------------------
   SINGLE BLOG SHELL
   ------------------------- */

.hotips-page-shell--single-blog{
  background: transparent;
}

.hotips-page-shell--single-blog .hotips-primary{
  min-width: 0;
}

.hotips-page-shell--single-blog .hotips-entry--single-blog{
  background: var(--single-blog-area-shell-bg);
  border-color: var(--single-blog-area-line);
}

/* -------------------------
   MAIN CONTENT PANEL
   ------------------------- */

.hotips-page-shell--single-blog .hotips-single-blog-content{
  background: var(--single-blog-area-panel-bg);
  color: var(--single-blog-area-ink);
}

.hotips-page-shell--single-blog .hotips-single-blog-body,
.hotips-page-shell--single-blog .hotips-single-blog-body p,
.hotips-page-shell--single-blog .hotips-single-blog-body li{
  color: var(--single-blog-area-ink);
}

.hotips-page-shell--single-blog .hotips-single-blog-body a,
.hotips-page-shell--single-blog .my-blog-builder a{
  color: var(--single-blog-area-ink);
  text-decoration-color: color-mix(in srgb, var(--single-blog-area-accent) 42%, transparent);
}

.hotips-page-shell--single-blog .hotips-single-blog-body a:hover,
.hotips-page-shell--single-blog .hotips-single-blog-body a:focus,
.hotips-page-shell--single-blog .my-blog-builder a:hover,
.hotips-page-shell--single-blog .my-blog-builder a:focus{
  color: var(--single-blog-area-accent);
  text-decoration-color: var(--single-blog-area-accent);
}

/* -------------------------
   HEADINGS
   ------------------------- */

.hotips-page-shell--single-blog .hotips-single-blog-title,
.hotips-page-shell--single-blog .hotips-single-blog-topper-title,
.hotips-page-shell--single-blog .hotips-single-blog-body h1,
.hotips-page-shell--single-blog .hotips-single-blog-body h2,
.hotips-page-shell--single-blog .hotips-single-blog-body h3,
.hotips-page-shell--single-blog .hotips-single-blog-body h4,
.hotips-page-shell--single-blog .hotips-single-blog-body h5,
.hotips-page-shell--single-blog .hotips-single-blog-body h6,
.hotips-page-shell--single-blog .my-blog-builder__section-text h2,
.hotips-page-shell--single-blog .my-blog-builder__final-word h3{
  color: var(--single-blog-area-ink);
}

.hotips-page-shell--single-blog .my-blog-builder__section-text h2{
  color: var(--single-blog-area-accent);
}

/* -------------------------
   TOPPER IMAGE + TITLE WASH
   ------------------------- */

.hotips-page-shell--single-blog .hotips-single-blog-featured-image--topper{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--single-blog-area-topper-tint) 100%, transparent) 0%,
      transparent 52%
    ),
    var(--single-blog-topper-bg);
  border-top-color: var(--single-blog-area-line);
  border-bottom-color: var(--single-blog-area-line);
}

.hotips-page-shell--single-blog .hotips-single-blog-featured-image--topper::before{
  background:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 96%, transparent) 0%,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 84%, transparent) 14%,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 42%, transparent) 30%,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 0%, transparent) 52%
    );
}

.hotips-page-shell--single-blog .hotips-single-blog-featured-image--topper::after{
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 18%, transparent) 0%,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 0%, transparent) 22%,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 0%, transparent) 78%,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 16%, transparent) 100%
    );
}

.hotips-page-shell--single-blog .hotips-single-blog-topper-title-wrap{
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 92%, transparent) 0%,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 76%, transparent) 34%,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 20%, transparent) 72%,
      color-mix(in srgb, var(--single-blog-area-panel-bg) 0%, transparent) 100%
    );
}

/* -------------------------
   TOPPER META PILLS
   ------------------------- */

.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-author-pill,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .post-view-count,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rating-display,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rate-post{
  background: color-mix(in srgb, var(--single-blog-area-soft-muted) 88%, var(--color-white) 12%) !important;
  border-color: var(--single-blog-area-line) !important;
  color: var(--single-blog-area-ink) !important;
}

.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-author-pill__label,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rating-display__count,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rate-post__note,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rate-post__status{
  color: var(--single-blog-area-ink-muted) !important;
}

.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-author-pill__name,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rating-display__average,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rate-post__average{
  color: var(--single-blog-area-ink) !important;
}

.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rating-display__star.is-full,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rate-post__star:hover,
.hotips-page-shell--single-blog .hotips-single-blog-topper-meta .my-blog-rate-post__star:focus-visible{
  color: var(--single-blog-area-accent) !important;
}

/* -------------------------
   BLOCKQUOTE / TABLE / CODE
   ------------------------- */

.hotips-page-shell--single-blog .hotips-single-blog-body blockquote,
.hotips-page-shell--single-blog .post-single .single-body blockquote{
  border-left-color: var(--single-blog-area-accent);
  background: color-mix(in srgb, var(--single-blog-area-soft) 72%, var(--color-white) 28%);
  color: var(--single-blog-area-ink);
}

.hotips-page-shell--single-blog .hotips-single-blog-body table th,
.hotips-page-shell--single-blog .post-single .single-body table th{
  background: color-mix(in srgb, var(--single-blog-area-soft) 74%, var(--color-white) 26%);
  color: var(--single-blog-area-ink);
}

.hotips-page-shell--single-blog .hotips-single-blog-body table,
.hotips-page-shell--single-blog .hotips-single-blog-body th,
.hotips-page-shell--single-blog .hotips-single-blog-body td{
  border-color: var(--single-blog-area-line);
}

.hotips-page-shell--single-blog .hotips-single-blog-body pre,
.hotips-page-shell--single-blog .post-single .single-body pre{
  border-color: color-mix(in srgb, var(--single-blog-area-accent) 24%, var(--single-blog-code-border));
}

/* -------------------------
   BUILDER PANELS / FINAL WORD
   ------------------------- */

.hotips-page-shell--single-blog .my-blog-builder__final-word{
  border-left-color: var(--single-blog-area-accent);
  border-color: var(--single-blog-area-line);
  background: color-mix(in srgb, var(--single-blog-area-soft-muted) 68%, var(--color-white) 32%);
}

.hotips-page-shell--single-blog .my-blog-builder__key-points-wrap .hotips-kp-panel{
  border-color: var(--single-blog-area-line);
  background: color-mix(in srgb, var(--single-blog-area-panel-bg) 94%, var(--color-white) 6%);
}

.hotips-page-shell--single-blog .my-blog-builder__key-points-wrap .hotips-kp-panel__title{
  border-bottom-color: color-mix(in srgb, var(--single-blog-area-line) 72%, transparent);
  color: var(--single-blog-area-ink) !important;
}

.hotips-page-shell--single-blog .my-blog-builder__key-points-wrap .hotips-kp-panel__content{
  background: color-mix(in srgb, var(--single-blog-area-soft-muted) 72%, var(--color-white) 28%) !important;
  border-color: color-mix(in srgb, var(--single-blog-area-line) 72%, transparent) !important;
}

.hotips-page-shell--single-blog .my-blog-builder__key-points-icon,
.hotips-page-shell--single-blog .my-blog-builder__key-points-icon--tick,
.hotips-page-shell--single-blog .my-blog-builder__key-points-icon--green-tick,
.hotips-page-shell--single-blog .my-blog-builder__key-points-icon--star{
  color: var(--single-blog-area-accent);
}


/* -------------------------
   OPTIONAL CHILD ACCENTS
   - keep very light
   ------------------------- */

.hotips-page-shell--single-blog.content-area-child-funnels-automation{
  --single-blog-area-accent: color-mix(in srgb, var(--color-tech-accent) 72%, var(--color-dark) 28%);
}

.hotips-page-shell--single-blog.content-area-child-email-growth{
  --single-blog-area-accent: color-mix(in srgb, var(--color-tech-accent-muted) 52%, var(--color-dark) 48%);
}

.hotips-page-shell--single-blog.content-area-child-balanced-living{
  --single-blog-area-accent: color-mix(in srgb, var(--color-wellness-olive) 72%, var(--color-wellness-black-soft) 28%);
}

.hotips-page-shell--single-blog.content-area-child-digital-calm{
  --single-blog-area-accent: color-mix(in srgb, var(--color-wellness-grey-olive-dark) 70%, var(--color-wellness-olive) 30%);
}

/* =========================================================
   17. BLOG BUILDER + KEYPOINTS STATIC
   ========================================================= */

:root{
  /* -------------------------
     BLOG BUILDER BODY
     ------------------------- */
  --blog-builder-intro-margin-bottom: var(--space-2xl);
  --blog-builder-inline-line-height: var(--line-height-body);

  --blog-builder-section-margin-bottom: 32px;
  --blog-builder-section-heading-margin-bottom: var(--space-md);
  --blog-builder-section-text-margin-bottom: var(--space-xl);

  --blog-builder-section-image-max-width: 320px;
  --blog-builder-section-image-max-height: 260px;
  --blog-builder-section-image-margin: 0 22px 16px 0;
  --blog-builder-section-image-border: var(--border-thick-accent);
  --blog-builder-section-image-radius: var(--radius-lg);
  --blog-builder-section-image-shadow: var(--shadow-sm);

  --blog-builder-final-word-margin-top: 30px;
  --blog-builder-final-word-pad-y: 18px;
  --blog-builder-final-word-pad-x: 18px;
  --blog-builder-final-word-border: var(--border-thin);
  --blog-builder-final-word-border-accent-width: var(--border-width-lg);
  --blog-builder-final-word-radius: var(--radius-cut-md);
  --blog-builder-final-word-shadow: var(--shadow-sm);

  /* -------------------------
     KEYPOINTS WRAP
     ------------------------- */
  --blog-builder-keypoints-wrap-max-width: 100%;
  --blog-builder-keypoints-wrap-margin-bottom: 24px;
  --blog-builder-keypoints-max-width: 100%;
  --blog-builder-kp-list-indent: 1.15em;
  --blog-builder-kp-list-gap: var(--space-md);

  /* -------------------------
     STATIC KEYPOINTS PANEL
     ------------------------- */
  --blog-builder-kp-panel-margin-y: var(--space-xl);
  --blog-builder-kp-panel-bg: var(--color-surface);
  --blog-builder-kp-panel-border: var(--border-thin);
  --blog-builder-kp-panel-radius: var(--radius-md);
  --blog-builder-kp-panel-shadow: var(--shadow-sm);

  --blog-builder-kp-title-pad-top: var(--space-xl);
  --blog-builder-kp-title-pad-right: var(--space-xl);
  --blog-builder-kp-title-pad-bottom: var(--space-lg);
  --blog-builder-kp-title-pad-left: var(--space-xl);
  --blog-builder-kp-title-border: var(--border-thin-soft);
  --blog-builder-kp-title-size: var(--font-size-content-h3);
  --blog-builder-kp-title-line-height: var(--line-height-heading);

  --blog-builder-kp-content-margin: 12px;
  --blog-builder-kp-content-pad: 14px;
  --blog-builder-kp-content-bg: var(--color-surface-muted);
  --blog-builder-kp-content-border: var(--border-thin-soft);
  --blog-builder-kp-content-radius: var(--radius-sm);
  --blog-builder-kp-content-shadow: none;
  --blog-builder-kp-content-size: var(--font-size-body);
  --blog-builder-kp-content-line-height: var(--line-height-body);

  --blog-builder-kp-footer-margin-top: -2px;
  --blog-builder-kp-footer-margin-side: 12px;
  --blog-builder-kp-footer-margin-bottom: 12px;
  --blog-builder-kp-footer-pad-y: 12px;
  --blog-builder-kp-footer-pad-x: 14px;
  --blog-builder-kp-footer-bg: var(--color-surface-soft);
  --blog-builder-kp-footer-border: var(--border-thin-soft);
  --blog-builder-kp-footer-radius: 0 0 var(--radius-sm) var(--radius-sm);

  /* -------------------------
     KEYPOINT ITEMS
     ------------------------- */
  --blog-builder-kp-item-icon-size: 18px;
  --blog-builder-kp-item-gap: var(--space-md);
  --blog-builder-kp-icon-offset-top: 0.15em;
}

/* -------------------------
   BUILDER WRAP
   ------------------------- */

.my-blog-builder{
  width: 100%;
  max-width: 100%;
}

.my-blog-builder__intro{
  margin: var(--space-none) var(--space-none) var(--blog-builder-intro-margin-bottom);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

/* -------------------------
   KEYPOINTS WRAPPER
   ------------------------- */

.my-blog-builder__key-points-wrap{
  display: block;
  width: 100%;
  max-width: var(--blog-builder-keypoints-wrap-max-width);
  margin: var(--space-none) var(--space-none) var(--blog-builder-keypoints-wrap-margin-bottom) auto;
  padding: var(--space-none);
}

.my-blog-builder__key-points{
  width: 100%;
  max-width: var(--blog-builder-keypoints-max-width);
  margin-left: auto;
}

.my-blog-builder__key-points ul{
  margin: var(--space-none);
  padding-left: var(--blog-builder-kp-list-indent);
}

.my-blog-builder__key-points li{
  margin: var(--space-none) var(--space-none) var(--space-sm);
}

.my-blog-builder__key-points li:last-child{
  margin-bottom: var(--space-none);
}

/* -------------------------
   BUILDER SECTIONS
   ------------------------- */

.post-single .my-blog-builder__section{
  display: block;
  margin: var(--space-none) var(--space-none) var(--blog-builder-section-margin-bottom);
  padding: var(--space-none);
}

.post-single .my-blog-builder__section::after{
  content: "";
  display: block;
  clear: both;
}

.post-single .my-blog-builder__section-text h2{
  margin: var(--space-none) var(--space-none) var(--blog-builder-section-heading-margin-bottom);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--font-size-content-h2);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

.post-single .my-blog-builder__section-text p{
  margin: var(--space-none) var(--space-none) var(--blog-builder-section-text-margin-bottom);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-align: left;
}

.post-single .my-blog-builder__section-image{
  float: left;
  width: auto;
  max-width: var(--blog-builder-section-image-max-width);
  margin: var(--blog-builder-section-image-margin);
}

.post-single .my-blog-builder__section-image img{
  display: block;
  width: auto;
  max-width: var(--blog-builder-section-image-max-width);
  height: auto;
  max-height: var(--blog-builder-section-image-max-height);

  border: var(--blog-builder-section-image-border);
  border-radius: var(--blog-builder-section-image-radius);
  box-shadow: var(--blog-builder-section-image-shadow);
}

.post-single .my-blog-builder__section.no-image .my-blog-builder__section-image{
  display: none;
}

/* -------------------------
   FINAL WORD
   ------------------------- */

.my-blog-builder__final-word{
  margin: var(--blog-builder-final-word-margin-top) var(--space-none) var(--space-none);
  padding: var(--blog-builder-final-word-pad-y) var(--blog-builder-final-word-pad-x);

  background: var(--color-surface);
  border: var(--blog-builder-final-word-border);
  border-left: var(--blog-builder-final-word-border-accent-width) solid var(--color-dark);
  border-radius: var(--blog-builder-final-word-radius);
  box-shadow: var(--blog-builder-final-word-shadow);
}

.my-blog-builder__final-word h3{
  margin: var(--space-none) var(--space-none) var(--space-lg);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--font-size-content-h3);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

.my-blog-builder__final-word p{
  margin: var(--space-none) var(--space-none) var(--space-lg);
  color: var(--color-text);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.my-blog-builder__final-word p:last-child{
  margin-bottom: var(--space-none);
}

/* -------------------------
   INLINE LINE HEIGHT SAFETY
   ------------------------- */

.post-single .my-blog-builder__section-text,
.post-single .my-blog-builder__section-text p,
.post-single .my-blog-builder__section-text li,
.post-single .my-blog-builder__section-text span,
.post-single .my-blog-builder__section-text a,
.post-single .my-blog-builder__section-text strong,
.post-single .my-blog-builder__section-text em{
  line-height: var(--blog-builder-inline-line-height) !important;
}

/* -------------------------
   STATIC KEYPOINTS PANEL
   ------------------------- */

.my-blog-builder__key-points-wrap .hotips-kp-panel{
  position: relative;
  display: block;

  width: 100%;
  margin: var(--blog-builder-kp-panel-margin-y) var(--space-none);
  padding: var(--space-none);
  box-sizing: border-box;

  overflow: hidden;

  background: var(--blog-builder-kp-panel-bg);
  border: var(--blog-builder-kp-panel-border);
  border-radius: var(--blog-builder-kp-panel-radius) !important;
  box-shadow: var(--blog-builder-kp-panel-shadow);
}

.my-blog-builder__key-points-wrap .hotips-kp-panel__title{
  margin: var(--space-none) !important;
  padding:
    var(--blog-builder-kp-title-pad-top)
    var(--blog-builder-kp-title-pad-right)
    var(--blog-builder-kp-title-pad-bottom)
    var(--blog-builder-kp-title-pad-left) !important;

  background: transparent !important;
  border-bottom: var(--blog-builder-kp-title-border);

  color: var(--color-heading) !important;
  font-family: var(--font-display) !important;
  font-size: var(--blog-builder-kp-title-size) !important;
  font-weight: 700 !important;
  line-height: var(--blog-builder-kp-title-line-height) !important;
}

.my-blog-builder__key-points-wrap .hotips-kp-panel__content{
  margin: var(--blog-builder-kp-content-margin) !important;
  padding: var(--blog-builder-kp-content-pad) !important;

  background: var(--blog-builder-kp-content-bg) !important;
  border: var(--blog-builder-kp-content-border);
  border-radius: var(--blog-builder-kp-content-radius) !important;
  box-shadow: var(--blog-builder-kp-content-shadow);

  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.my-blog-builder__key-points-wrap .hotips-kp-panel__content p,
.my-blog-builder__key-points-wrap .hotips-kp-panel__content li{
  margin: var(--space-none) var(--space-none) var(--space-sm);
  color: var(--color-text) !important;
  font-size: var(--blog-builder-kp-content-size) !important;
  line-height: var(--blog-builder-kp-content-line-height) !important;
}

.my-blog-builder__key-points-wrap .hotips-kp-panel__content ul,
.my-blog-builder__key-points-wrap .hotips-kp-panel__content ol{
  margin: var(--space-none);
  padding-left: var(--blog-builder-kp-list-indent);
}

.my-blog-builder__key-points-wrap .hotips-kp-panel__content li:last-child,
.my-blog-builder__key-points-wrap .hotips-kp-panel__content p:last-child{
  margin-bottom: var(--space-none);
}

.my-blog-builder__key-points-wrap .hotips-kp-panel__footer,
.my-blog-builder__key-points-wrap .hotips-kp-panel__content-footer,
.my-blog-builder__key-points-wrap .hotips-kp-panel .panel-footer{
  margin:
    var(--blog-builder-kp-footer-margin-top)
    var(--blog-builder-kp-footer-margin-side)
    var(--blog-builder-kp-footer-margin-bottom) !important;
  padding:
    var(--blog-builder-kp-footer-pad-y)
    var(--blog-builder-kp-footer-pad-x) !important;

  background: var(--blog-builder-kp-footer-bg) !important;
  border: var(--blog-builder-kp-footer-border);
  border-top: 0 !important;
  border-radius: var(--blog-builder-kp-footer-radius) !important;
}

/* -------------------------
   BUILDER KEYPOINT ITEMS
   ------------------------- */

.my-blog-builder__key-points-list{
  display: flex;
  flex-direction: column;
  gap: var(--blog-builder-kp-list-gap);
}

.my-blog-builder__key-points-item{
  display: grid;
  grid-template-columns: var(--blog-builder-kp-item-icon-size) minmax(0, 1fr);
  column-gap: var(--blog-builder-kp-item-gap);
  align-items: start;
}

.my-blog-builder__key-points-item.no-icon{
  grid-template-columns: 1fr;
}

.my-blog-builder__key-points-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--blog-builder-kp-item-icon-size);
  height: var(--blog-builder-kp-item-icon-size);
  margin-top: var(--blog-builder-kp-icon-offset-top);

  color: var(--color-accent);
  line-height: 1;
}

.my-blog-builder__key-points-icon svg{
  display: block;
  width: var(--blog-builder-kp-item-icon-size);
  height: var(--blog-builder-kp-item-icon-size);
  fill: currentColor;
}

.my-blog-builder__key-points-icon--tick,
.my-blog-builder__key-points-icon--green-tick,
.my-blog-builder__key-points-icon--star{
  color: var(--color-accent);
}

.my-blog-builder__key-points-icon--warning{
  color: var(--color-warning);
}

.my-blog-builder__key-points-icon--bullet,
.my-blog-builder__key-points-icon--info{
  color: var(--color-dark);
}

.my-blog-builder__key-points-icon--cross{
  color: var(--color-danger);
}

.my-blog-builder__key-points-text{
  min-width: 0;
  color: var(--color-text);
  line-height: var(--blog-builder-inline-line-height);
}

/* =========================================================
   18. TABLES
   ========================================================= */

:root{
  /* -------------------------
     COMPARE TABLE TOKENS
     ------------------------- */
  --table-compare-margin-y: 24px;
  --table-compare-radius: var(--radius-cut-sm);
  --table-compare-shadow: var(--shadow-lg);

  --table-compare-head-bg: var(--color-dark);
  --table-compare-head-text: var(--color-white);
  --table-compare-head-border: var(--border-color-contrast);

  --table-compare-cell-pad-y: 14px;
  --table-compare-cell-pad-x: var(--space-xl);
  --table-compare-cell-font-size: var(--font-size-lg);
  --table-compare-cell-line-height: 1.55;

  --table-compare-head-font-size: var(--font-size-lg);
  --table-compare-head-line-height: 1.3;

  --table-compare-row-alt-bg: var(--color-surface-muted);
  --table-compare-row-hover-bg: var(--color-surface-soft);

  --table-compare-first-col-width: 32%;
  --table-compare-caption-margin-bottom: var(--space-md);
  --table-compare-caption-size: var(--font-size-2xl);

  --table-compare-link-underline-offset: var(--space-xxs);
}

/* -------------------------
   COMPARE / SCORE TABLE
   ------------------------- */

.table-compare-score{
  width: 100%;
  margin: var(--table-compare-margin-y) var(--space-none);
  border-collapse: separate;
  border-spacing: var(--space-none);
  overflow: hidden;

  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--table-compare-radius);
  box-shadow: var(--table-compare-shadow);

  color: var(--color-text);
  font-family: var(--font-body);
}

.table-compare-score caption{
  caption-side: top;
  margin-bottom: var(--table-compare-caption-margin-bottom);
  text-align: left;

  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--table-compare-caption-size);
  font-weight: 700;
  line-height: 1.2;
}

.table-compare-score thead th{
  padding: var(--table-compare-cell-pad-y) var(--table-compare-cell-pad-x);
  vertical-align: middle;
  text-align: left;

  background: var(--table-compare-head-bg);
  color: var(--table-compare-head-text);
  border-right: var(--border-width-thin) var(--border-style-standard) var(--table-compare-head-border);

  font-family: var(--font-body);
  font-size: var(--table-compare-head-font-size);
  font-weight: 700;
  line-height: var(--table-compare-head-line-height);
}

.table-compare-score thead th:last-child{
  border-right: 0;
}

.table-compare-score tbody td{
  padding: var(--table-compare-cell-pad-y) var(--table-compare-cell-pad-x);
  vertical-align: middle;

  background: var(--color-surface);
  border-top: var(--border-thin);
  border-right: var(--border-thin);

  font-size: var(--table-compare-cell-font-size);
  line-height: var(--table-compare-cell-line-height);
}

.table-compare-score tbody td:last-child{
  border-right: 0;
}

.table-compare-score tbody tr:nth-child(even) td{
  background: var(--table-compare-row-alt-bg);
}

.table-compare-score tbody tr:hover td{
  background: var(--table-compare-row-hover-bg);
}

.table-compare-score th:first-child{
  width: var(--table-compare-first-col-width);
}

.table-compare-score td strong,
.table-compare-score th strong{
  color: var(--color-dark);
}

.table-compare-score a{
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: var(--table-compare-link-underline-offset);
}

.table-compare-score a:hover,
.table-compare-score a:focus{
  color: var(--color-link-hover);
}

.table-compare-score .is-best,
.table-compare-score .score-best{
  position: relative;
  color: var(--color-dark);
  font-weight: 700;
}

.table-compare-score .is-best::before,
.table-compare-score .score-best::before{
  content: "\2605";
  display: inline-block;
  margin-right: var(--space-xs);
  color: var(--color-accent);
  font-size: 0.9em;
  line-height: 1;
}

.table-compare-score .score{
  color: var(--color-dark);
  font-weight: 700;
}

.table-compare-score .score--high{
  color: var(--color-success);
}

.table-compare-score .score--mid{
  color: var(--color-warning-muted);
}

.table-compare-score .score--low{
  color: var(--color-danger-muted);
}

/* -------------------------
   LOCAL RESPONSIVE SAFETY
   ------------------------- */

@media (max-width: 767px){
  .post-single .single-body,
  .post-single .single-body p,
  .post-single .single-body li{
    font-size: var(--single-blog-body-size-mobile);
    line-height: var(--line-height-body);
  }

  .post-single .BlogImageL,
  .post-single .my-blog-builder__section-image{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--space-none) var(--space-none) var(--space-xl) !important;
  }

  .post-single .my-blog-builder__section-image img{
    width: 100%;
    max-width: 100%;
    max-height: none;
  }

  .hotips-entry--single-blog .hotips-single-blog-featured-image--topper{
    margin: -20px -20px 18px;
  }

  .hotips-single-blog-featured-image{
    margin-bottom: 18px;
  }

  .hotips-single-blog-featured-image img{
    max-height: 300px;
  }

  .hotips-single-blog-featured-image--topper,
  .hotips-single-blog-featured-image--topper img{
    height: 138px;
  }

  .hotips-single-blog-topper-title{
    max-width: 72%;
    font-size: clamp(15px, 4.2vw, 20px);
    line-height: 1.05;
  }

  .hotips-single-blog-header{
    margin: var(--space-none) var(--space-none) var(--space-xl);
  }

  .hotips-single-blog-title{
    font-size: clamp(24px, 6vw, 28px);
    line-height: 1.12;
  }

  .hotips-single-blog-topper-meta{
    margin: -14px var(--space-none) 20px;
    padding: var(--space-none) 20px;
    gap: var(--space-sm) var(--space-md);
  }

  .my-blog-builder__intro{
    font-size: var(--font-size-body-mobile);
    line-height: var(--line-height-body);
  }

  .post-single .my-blog-builder__section{
    margin-bottom: 32px;
  }

  .post-single .my-blog-builder__section-text h2{
    font-size: clamp(21px, 5.5vw, 25px);
    line-height: 1.14;
  }

  .post-single .my-blog-builder__section-text p{
    font-size: var(--font-size-body-mobile);
    line-height: var(--line-height-body);
  }

  .my-blog-builder__key-points-wrap,
  .my-blog-builder__key-points{
    width: 100%;
    max-width: 100%;
  }

  .my-blog-builder__key-points-wrap{
    margin: var(--space-none) var(--space-none) 24px;
  }

  .my-blog-builder__key-points-wrap .hotips-kp-panel{
    border-radius: var(--radius-md) !important;
  }

  .my-blog-builder__key-points-wrap .hotips-kp-panel__title{
    padding: 16px 18px 14px !important;
  }

  .my-blog-builder__key-points-wrap .hotips-kp-panel__content{
    margin: 12px !important;
    padding: 14px !important;
    border-radius: var(--radius-sm) !important;
  }

  .my-blog-builder__key-points-wrap .hotips-kp-panel__footer,
  .my-blog-builder__key-points-wrap .hotips-kp-panel__content-footer,
  .my-blog-builder__key-points-wrap .hotips-kp-panel .panel-footer{
    margin: -2px 12px 12px !important;
    padding: 12px 14px !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  }

  .table-compare-score{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-cut-sm);
  }

  .table-compare-score thead th,
  .table-compare-score tbody td{
    padding: 12px 14px;
    font-size: var(--font-size-md);
  }

  .table-compare-score th:first-child{
    width: auto;
    min-width: 160px;
  }

  .table-compare-score td,
  .table-compare-score th{
    white-space: nowrap;
  }
}

/* =========================================================
   19. BEST PICKS
   ========================================================= */

:root{
  /* -------------------------
     BEST PICKS TOKENS
     ------------------------- */
  --best-picks-section-margin-y: 28px;
  --best-picks-section-max-width: var(--home-shell-max-width, 1400px);

  --best-picks-heading-margin-bottom: 18px;
  --best-picks-grid-gap: 18px;

  --best-pick-card-bg: var(--color-surface);
  --best-pick-card-border-color: color-mix(in srgb, var(--color-accent) 78%, var(--border-color-light));
  --best-pick-card-border-hover: var(--color-accent);
  --best-pick-card-radius: var(--radius-cut-sm);
  --best-pick-card-shadow: var(--shadow-sm);
  --best-pick-card-shadow-hover: var(--shadow-md);

  --best-pick-media-ratio: 16 / 10;
  --best-pick-media-fit: cover;
  --best-pick-media-position: center;

  --best-pick-content-x: var(--space-xl);

  --best-pick-label-margin-top: 14px;
  --best-pick-label-margin-bottom: var(--space-md);
  --best-pick-label-pad-y: var(--space-sm);
  --best-pick-label-pad-x: var(--space-md);
  --best-pick-label-radius: var(--radius-pill);
  --best-pick-label-border-color: color-mix(in srgb, var(--color-accent) 52%, var(--border-color-light));
  --best-pick-label-bg: color-mix(in srgb, var(--color-accent-muted) 34%, var(--color-surface) 66%);
  --best-pick-label-text: var(--color-dark);

  --best-pick-title-margin-bottom: var(--space-sm);
  --best-pick-title-size: var(--font-size-card-title-lg);
  --best-pick-title-weight: 700;
  --best-pick-title-line-height: 1.18;

  --best-pick-copy-margin-bottom: 12px;
  --best-pick-copy-size: var(--font-size-ui-sm);
  --best-pick-copy-line-height: 1.45;
  --best-pick-copy-text: var(--color-text-muted);

  --best-pick-meta-gap: var(--space-sm);
  --best-pick-meta-margin-bottom: 12px;

  --best-pick-chip-pad-y: 5px;
  --best-pick-chip-pad-x: 9px;
  --best-pick-chip-radius: var(--radius-pill);
  --best-pick-chip-border-color: var(--border-color);
  --best-pick-chip-bg: var(--color-surface-muted);
  --best-pick-chip-text: var(--color-dark);

  --best-pick-review-margin-bottom: 12px;
  --best-pick-review-hover-border: var(--color-accent);

  --best-pick-button-margin-top: auto;
  --best-pick-button-margin-bottom: var(--space-xl);

  --best-pick-heading-override-margin-bottom: var(--space-md);
  --best-pick-heading-override-pad-x: 14px;
  --best-pick-heading-override-size: var(--font-size-xl);

  --best-pick-copy-override-pad-x: 14px;
  --best-pick-copy-override-size: var(--font-size-md);
  --best-pick-copy-override-line-height: 1.58;
}

.best-picks-section{
  width: 100%;
  max-width: var(--best-picks-section-max-width);
  margin: var(--best-picks-section-margin-y) auto;
}

.best-picks-heading{
  margin: var(--space-none) var(--space-none) var(--best-picks-heading-margin-bottom);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--font-size-site-h3);
  font-weight: 700;
  line-height: var(--line-height-heading);
  text-align: center;
}

.best-picks-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--best-picks-grid-gap);
  align-items: stretch;
}

.best-pick-card{
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;

  overflow: hidden;
  background: var(--best-pick-card-bg);
  border: var(--border-thin);
  border-color: var(--best-pick-card-border-color);
  border-radius: var(--best-pick-card-radius);
  box-shadow: var(--best-pick-card-shadow);

  color: var(--color-text);
  font-family: var(--font-body);

  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.best-pick-card:hover,
.best-pick-card:focus-within{
  border-color: var(--best-pick-card-border-hover);
  box-shadow: var(--best-pick-card-shadow-hover);
  transform: translateY(-1px);
}

.best-pick-image-link{
  display: block;
  width: 100%;
  line-height: 0;
  text-decoration: none;
  overflow: hidden;
}

.best-pick-image{
  display: block;
  width: 100%;
  aspect-ratio: var(--best-pick-media-ratio);
  object-fit: var(--best-pick-media-fit);
  object-position: var(--best-pick-media-position);
  background: var(--color-surface-soft);
  transition: transform var(--duration-mid) var(--ease-soft);
}

.best-pick-image-link:hover .best-pick-image,
.best-pick-image-link:focus .best-pick-image{
  transform: scale(1.03);
}

.best-pick-label,
.best-pick-title,
.best-pick-copy,
.best-pick-meta,
.best-pick-review-link,
.best-pick-button{
  margin-left: var(--best-pick-content-x);
  margin-right: var(--best-pick-content-x);
}

.best-pick-label{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;

  margin-top: var(--best-pick-label-margin-top);
  margin-bottom: var(--best-pick-label-margin-bottom);
  padding: var(--best-pick-label-pad-y) var(--best-pick-label-pad-x);

  border: var(--border-thin);
  border-color: var(--best-pick-label-border-color);
  border-radius: var(--best-pick-label-radius);
  background: var(--best-pick-label-bg);
  color: var(--best-pick-label-text);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.best-pick-title{
  margin-top: var(--space-none);
  margin-bottom: var(--best-pick-title-margin-bottom);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--best-pick-title-size);
  font-weight: var(--best-pick-title-weight);
  line-height: var(--best-pick-title-line-height);
}

.best-pick-title,
.best-pick-title a{
  overflow-wrap: break-word;
  word-break: normal;
}

.best-pick-title a{
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
}

.best-pick-title a:hover,
.best-pick-title a:focus{
  color: var(--color-link-hover);
}

.best-pick-copy{
  margin-top: var(--space-none);
  margin-bottom: var(--best-pick-copy-margin-bottom);
  color: var(--best-pick-copy-text);
  font-family: var(--font-body);
  font-size: var(--best-pick-copy-size);
  line-height: var(--best-pick-copy-line-height);
}

.best-pick-meta{
  display: flex;
  flex-wrap: wrap;
  gap: var(--best-pick-meta-gap);
  margin-bottom: var(--best-pick-meta-margin-bottom);
}

.best-pick-chip,
.best-pick-review-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: var(--best-pick-chip-pad-y) var(--best-pick-chip-pad-x);

  border: var(--border-thin);
  border-color: var(--best-pick-chip-border-color);
  border-radius: var(--best-pick-chip-radius);
  background: var(--best-pick-chip-bg);
  color: var(--best-pick-chip-text);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 600;
  line-height: 1;
}

.best-pick-review-link{
  align-self: flex-start;
  margin-bottom: var(--best-pick-review-margin-bottom);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.best-pick-review-link:hover,
.best-pick-review-link:focus{
  color: var(--color-dark);
  text-decoration: none;
  border-color: var(--best-pick-review-hover-border);
}

.best-pick-button{
  margin-top: var(--best-pick-button-margin-top);
  margin-bottom: var(--best-pick-button-margin-bottom);
}

.best-pick-button a,
a.best-pick-button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px;
  padding: var(--space-sm) var(--space-lg) !important;

  border: var(--border-thin) !important;
  border-color: var(--button-primary-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  box-shadow: var(--shadow-sm) !important;

  font-family: var(--font-body) !important;
  font-size: var(--font-size-ui-sm) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard) !important;
}

.best-pick-button a:hover,
.best-pick-button a:focus-visible,
a.best-pick-button:hover,
a.best-pick-button:focus-visible{
  background: var(--button-primary-bg-hover) !important;
  border-color: var(--button-primary-border) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
  outline: none;
}

h3.best-pick-title,
.best-pick-title,
.elementor-heading-title.best-pick-title{
  margin: var(--space-none) var(--space-none) var(--best-pick-heading-override-margin-bottom) !important;
  padding: var(--space-none) var(--best-pick-heading-override-pad-x) !important;
  font-size: var(--best-pick-heading-override-size) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.best-pick-copy,
.best-pick-copy p,
.best-pick-copy .elementor-widget-container{
  margin: var(--space-none) !important;
  padding: var(--space-none) var(--best-pick-copy-override-pad-x) !important;
  color: var(--color-dark) !important;
  font-size: var(--best-pick-copy-override-size) !important;
  font-weight: 400 !important;
  line-height: var(--best-pick-copy-override-line-height) !important;
}

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

@media (max-width: 767px){
  .best-picks-grid{
    grid-template-columns: 1fr;
  }

  .best-picks-heading{
    font-size: var(--font-size-xl);
  }
}

/* =========================================================
   SINGLE BLOG ARTICLE NAVIGATION
   Single source of truth
   - Bottom row: full article navigation
   - Top row: compact right-aligned button cluster
   - Area-aware Money / Wellness
   - Caught-up card uses the opposite recommended area
   ========================================================= */

/* ---------------------------------------------------------
   01. Base nav tokens + layout
   --------------------------------------------------------- */

.hotips-article-nav{
  --hotips-article-nav-accent: var(--color-tech-accent);
  --hotips-article-nav-area: var(--color-dark);
  --hotips-article-nav-area-card: color-mix(in srgb, var(--color-dark) 10%, var(--color-white) 90%);
  --hotips-article-nav-area-card-hover: color-mix(in srgb, var(--color-dark) 16%, var(--color-white) 84%);
  --hotips-article-nav-border: color-mix(in srgb, var(--color-dark) 22%, transparent);
  --hotips-article-nav-text: var(--color-dark);
  --hotips-article-nav-text-soft: var(--color-dark-muted);
  --hotips-article-nav-invert: var(--color-white);

  --hotips-article-nav-font-family: var(--font-body);
  --hotips-article-nav-ui-line-height: var(--line-height-ui);
  --hotips-article-nav-eyebrow-size: var(--font-size-ui-xs);
  --hotips-article-nav-title-size: var(--font-size-md);
  --hotips-article-nav-suggestion-size: var(--font-size-ui-sm);
  --hotips-article-nav-back-size: var(--font-size-ui-sm);
  --hotips-article-nav-arrow-font-size: var(--font-size-lg);

  --hotips-article-nav-eyebrow-weight: 900;
  --hotips-article-nav-title-weight: 850;
  --hotips-article-nav-suggestion-weight: 750;
  --hotips-article-nav-back-weight: 900;

  --hotips-article-nav-eyebrow-spacing: 0.09em;
  --hotips-article-nav-back-spacing: 0.08em;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);

  width: 100%;
  margin: var(--space-xl) 0;
}

/* Money context */
body.hotips-site-theme--money .hotips-article-nav,
body.my-blog-context-money .hotips-article-nav,
body[class*="money"] .hotips-article-nav,
.hotips-page-shell[class*="money"] .hotips-article-nav,
.hotips-entry--single-blog[class*="money"] .hotips-article-nav{
  --hotips-article-nav-accent: var(--color-tech-accent);
  --hotips-article-nav-area: var(--color-dark);
  --hotips-article-nav-area-card: color-mix(in srgb, var(--color-dark) 10%, var(--color-white) 90%);
  --hotips-article-nav-area-card-hover: color-mix(in srgb, var(--color-dark) 16%, var(--color-white) 84%);
  --hotips-article-nav-border: color-mix(in srgb, var(--color-dark) 24%, transparent);
  --hotips-article-nav-text: var(--color-dark);
  --hotips-article-nav-text-soft: var(--color-dark-muted);
}

/* Wellness context */
body.hotips-site-theme--wellness .hotips-article-nav,
body.my-blog-context-wellness .hotips-article-nav,
body[class*="wellness"] .hotips-article-nav,
.hotips-page-shell[class*="wellness"] .hotips-article-nav,
.hotips-entry--single-blog[class*="wellness"] .hotips-article-nav{
  --hotips-article-nav-accent: var(--color-wellness-accent);
  --hotips-article-nav-area: var(--color-wellness-dark);
  --hotips-article-nav-area-card: color-mix(in srgb, var(--color-wellness-dark) 11%, var(--color-white) 89%);
  --hotips-article-nav-area-card-hover: color-mix(in srgb, var(--color-wellness-dark) 17%, var(--color-white) 83%);
  --hotips-article-nav-border: color-mix(in srgb, var(--color-wellness-dark) 25%, transparent);
  --hotips-article-nav-text: var(--color-wellness-dark);
  --hotips-article-nav-text-soft: var(--color-wellness-text-soft);
}

.hotips-article-nav__slot{
  min-width: 0;
}

.hotips-article-nav__slot--previous,
.hotips-article-nav__slot--next{
  text-align: left;
}

.hotips-article-nav__card,
.hotips-article-nav__back{
  text-decoration: none;
}

/* ---------------------------------------------------------
   02. Standard previous / next cards
   --------------------------------------------------------- */

.hotips-article-nav__card{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;

  min-width: 0;
  min-height: 50px;
  height: 100%;
  padding: 8px 42px 8px 14px;

  border: var(--border-width-thin) var(--border-style-standard) var(--hotips-article-nav-border);
  border-radius: var(--radius-md);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 32%, transparent) 0%,
      transparent 58%
    ),
    var(--hotips-article-nav-area-card);

  color: var(--hotips-article-nav-text);
  box-shadow: var(--shadow-sm);

  transition:
    background var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft);
}

.hotips-article-nav__card::before{
  display: none;
}

.hotips-article-nav__card::after{
  content: "\203A";
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;
  transform: translateY(-50%);

  border-radius: var(--radius-pill);
  background: var(--hotips-article-nav-accent);
  color: var(--hotips-article-nav-area);

  font-family: var(--hotips-article-nav-font-family);
  font-size: var(--hotips-article-nav-arrow-font-size);
  font-weight: 900;
  line-height: 1;

  box-shadow: 0 4px 10px color-mix(in srgb, var(--hotips-article-nav-accent) 28%, transparent);
}

.hotips-article-nav__card--previous{
  padding: 8px 14px 8px 42px;
}

.hotips-article-nav__card--previous::after{
  content: "\2039";
  right: auto;
  left: 12px;
}

/* ---------------------------------------------------------
   03. Text
   --------------------------------------------------------- */

.hotips-article-nav__eyebrow,
.hotips-article-nav__title,
.hotips-article-nav__suggestion{
  position: relative;
  z-index: 2;
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  font-family: var(--hotips-article-nav-font-family);
  line-height: var(--hotips-article-nav-ui-line-height);
}

.hotips-article-nav__eyebrow{
  color: var(--hotips-article-nav-accent);
  font-size: var(--hotips-article-nav-eyebrow-size);
  font-weight: var(--hotips-article-nav-eyebrow-weight);
  letter-spacing: var(--hotips-article-nav-eyebrow-spacing);
  text-transform: uppercase;
}

.hotips-article-nav__title{
  color: var(--hotips-article-nav-text);
  font-size: var(--hotips-article-nav-title-size);
  font-weight: var(--hotips-article-nav-title-weight);
  line-height: var(--line-height-tight);
}

.hotips-article-nav__suggestion{
  color: var(--hotips-article-nav-text-soft);
  font-size: var(--hotips-article-nav-suggestion-size);
  font-weight: var(--hotips-article-nav-suggestion-weight);
}

/* ---------------------------------------------------------
   04. Hover states
   --------------------------------------------------------- */

.hotips-article-nav__card:hover,
.hotips-article-nav__card:focus-visible{
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--hotips-article-nav-accent) 13%, transparent) 0%,
      transparent 64%
    ),
    var(--hotips-article-nav-area-card-hover);

  border-color: color-mix(in srgb, var(--hotips-article-nav-accent) 55%, var(--hotips-article-nav-border));
  color: var(--hotips-article-nav-text);
  transform: translateY(var(--motion-lift-xs, -1px));
  box-shadow: var(--shadow-md);
  outline: none;
}

/* ---------------------------------------------------------
   05. Back to section pill
   --------------------------------------------------------- */

.hotips-article-nav__back{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;

  min-width: 0;
  width: auto;
  max-width: max-content;
  min-height: 28px;
  padding: 0 var(--space-sm);

  border: var(--border-width-thin) var(--border-style-standard) color-mix(
    in srgb,
    var(--hotips-article-nav-accent) 44%,
    var(--hotips-article-nav-border)
  );

  border-radius: var(--radius-pill);

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-white) 88%, transparent),
      color-mix(in srgb, var(--hotips-article-nav-area) 10%, var(--color-white) 88%)
    );

  color: var(--hotips-article-nav-text);

  font-family: var(--hotips-article-nav-font-family);
  font-size: var(--hotips-article-nav-back-size);
  font-weight: var(--hotips-article-nav-back-weight);
  line-height: 1;
  letter-spacing: var(--hotips-article-nav-back-spacing);
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow: var(--shadow-sm);

  transition:
    background var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft);
}

.hotips-article-nav__back::after{
  content: "\21A9";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 15px;
  height: 15px;
  margin-left: var(--space-xs);

  border-radius: var(--radius-pill);
  background: var(--hotips-article-nav-area);
  color: var(--hotips-article-nav-invert);

  font-family: var(--hotips-article-nav-font-family);
  font-size: var(--font-size-ui-sm);
  font-weight: 900;
  line-height: 1;
}

.hotips-article-nav__back:hover,
.hotips-article-nav__back:focus-visible{
  background: color-mix(in srgb, var(--hotips-article-nav-area) 13%, var(--color-white) 87%);
  border-color: color-mix(in srgb, var(--hotips-article-nav-accent) 62%, var(--hotips-article-nav-border));
  color: var(--hotips-article-nav-text);
  transform: translateY(var(--motion-lift-xs, -1px));
  box-shadow: var(--shadow-md);
  outline: none;
}

/* ---------------------------------------------------------
   06. Empty previous state
   --------------------------------------------------------- */

.hotips-article-nav__card--empty{
  opacity: 0.72;
  pointer-events: none;
}

.hotips-article-nav__card--empty::after{
  content: "\2022";
  background: color-mix(in srgb, var(--hotips-article-nav-area) 18%, transparent);
  color: var(--hotips-article-nav-area);
  box-shadow: none;
}

/* ---------------------------------------------------------
   07. Caught-up cross-article card
   --------------------------------------------------------- */

.hotips-article-nav__card--caught-up{
  --hotips-article-nav-caught-area: var(--hotips-article-nav-area);
  --hotips-article-nav-caught-accent: var(--hotips-article-nav-accent);
  --hotips-article-nav-caught-text: var(--hotips-article-nav-invert);

  min-height: 54px;
  padding: 7px 42px 7px 14px;

  border-color: color-mix(in srgb, var(--hotips-article-nav-caught-area) 54%, transparent);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 10%, transparent) 0%,
      transparent 58%
    ),
    var(--hotips-article-nav-caught-area);

  color: var(--hotips-article-nav-caught-text);
}

.hotips-article-nav__card--caught-up.hotips-article-nav__card--opposite-money{
  --hotips-article-nav-caught-area: var(--color-dark);
  --hotips-article-nav-caught-accent: var(--color-tech-accent);
  --hotips-article-nav-caught-text: var(--color-white);
}

.hotips-article-nav__card--caught-up.hotips-article-nav__card--opposite-wellness{
  --hotips-article-nav-caught-area: var(--color-wellness-dark);
  --hotips-article-nav-caught-accent: var(--color-wellness-accent);
  --hotips-article-nav-caught-text: var(--color-white);
}

.hotips-article-nav__card--caught-up .hotips-article-nav__eyebrow,
.hotips-article-nav__card--caught-up .hotips-article-nav__title,
.hotips-article-nav__card--caught-up .hotips-article-nav__suggestion{
  color: var(--hotips-article-nav-caught-text);
}

.hotips-article-nav__card--caught-up .hotips-article-nav__eyebrow{
  opacity: 0.88;
}

.hotips-article-nav__card--caught-up .hotips-article-nav__title{
  font-family: var(--hotips-article-nav-font-family);
  font-size: var(--font-size-ui-sm);
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hotips-article-nav__card--caught-up .hotips-article-nav__suggestion{
  opacity: 0.82;
  font-size: var(--font-size-ui-xs);
}

.hotips-article-nav__card--caught-up::after{
  content: "\2197";
  background: var(--hotips-article-nav-caught-accent);
  color: var(--hotips-article-nav-caught-area);
}

/* ---------------------------------------------------------
   08. Placement wrappers
   --------------------------------------------------------- */

.hotips-article-nav-slot{
  width: 100%;
}

/* Bottom nav stays full-width and normal */
.hotips-article-nav-slot--bottom{
  clear: both;
  display: block;
  margin: var(--space-2xl) 0 0;
}

/* Top nav row: full-width wrapper above the article */
.hotips-article-nav-slot--top{
  clear: both;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  width: 100%;
  max-width: 100%;

  margin: 14px 0 30px;
  padding: 3px 0;

  overflow: visible;
  box-sizing: border-box;
}

/* Top nav cluster: contained right-side button group */
.hotips-article-nav-slot--top .hotips-article-nav{
  --hotips-article-nav-eyebrow-size: var(--font-size-ui-xxs);
  --hotips-article-nav-title-size: var(--font-size-ui-sm);
  --hotips-article-nav-suggestion-size: var(--font-size-ui-xs);
  --hotips-article-nav-back-size: var(--font-size-ui-xxs);
  --hotips-article-nav-arrow-font-size: var(--font-size-md);

  display: grid;
  grid-template-columns:
    minmax(0, 160px)
    max-content
    minmax(0, 160px);

  align-items: center;
  justify-content: end;
  gap: 7px;

  width: min(100%, 500px);
  max-width: 100%;
  margin: 0;

  overflow: visible;
  box-sizing: border-box;
}

/* Top nav slots must not force overflow */
.hotips-article-nav-slot--top .hotips-article-nav__slot{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Top cards: compact identity buttons */
.hotips-article-nav-slot--top .hotips-article-nav__card{
  width: 100%;
  min-width: 0;
  max-width: 100%;

  min-height: 28px;
  padding-top: 3px;
  padding-bottom: 3px;

  overflow: hidden;
  border-radius: var(--radius-pill);
  box-sizing: border-box;
}

/* Previous card: space for left arrow */
.hotips-article-nav-slot--top .hotips-article-nav__card--previous{
  padding-left: 26px;
  padding-right: 8px;
}

/* Next / caught-up card: space for right arrow */
.hotips-article-nav-slot--top .hotips-article-nav__card--next,
.hotips-article-nav-slot--top .hotips-article-nav__card--caught-up{
  padding-left: 8px;
  padding-right: 26px;
}

/* Top arrows: small and inside the button */
.hotips-article-nav-slot--top .hotips-article-nav__card::after{
  width: 17px;
  height: 17px;
  right: 6px;
  z-index: 3;
  box-shadow: none;
}

.hotips-article-nav-slot--top .hotips-article-nav__card--previous::after{
  left: 6px;
  right: auto;
}

/* Top caught-up card: compact cross-area cue */
.hotips-article-nav-slot--top .hotips-article-nav__card--caught-up{
  min-height: 28px;
}

.hotips-article-nav-slot--top .hotips-article-nav__card--caught-up .hotips-article-nav__eyebrow{
  display: none;
}

.hotips-article-nav-slot--top .hotips-article-nav__card--caught-up .hotips-article-nav__title{
  font-size: var(--font-size-ui-xxs);
  line-height: 1;
}

.hotips-article-nav-slot--top .hotips-article-nav__card--caught-up .hotips-article-nav__suggestion{
  margin-top: 1px;
}

/* Compact centre Back to section button */
.hotips-article-nav-slot--top .hotips-article-nav__back{
  min-width: 0;
  width: auto;
  max-width: max-content;

  min-height: 22px;
  padding: 0 7px;

  justify-self: center;
  box-sizing: border-box;
}

.hotips-article-nav-slot--top .hotips-article-nav__back::after{
  width: 12px;
  height: 12px;
  margin-left: 4px;
}

/* Top row hover: no lift, no clipping fight */
.hotips-article-nav-slot--top .hotips-article-nav__card:hover,
.hotips-article-nav-slot--top .hotips-article-nav__card:focus-visible,
.hotips-article-nav-slot--top .hotips-article-nav__back:hover,
.hotips-article-nav-slot--top .hotips-article-nav__back:focus-visible{
  transform: none;
}

.hotips-article-nav-slot--top .hotips-article-nav__card:hover,
.hotips-article-nav-slot--top .hotips-article-nav__card:focus-visible{
  box-shadow: var(--shadow-sm);
}

/* Keep row safe by hiding previous first */
@media (max-width: 980px){
  .hotips-article-nav-slot--top .hotips-article-nav{
    width: min(100%, 320px);
    grid-template-columns:
      max-content
      minmax(0, 180px);
  }

  .hotips-article-nav-slot--top .hotips-article-nav__slot--previous{
    display: none;
  }
}

/* Mobile: stack cleanly */
@media (max-width: 760px){
  .hotips-article-nav,
  .hotips-article-nav-slot--top .hotips-article-nav{
    --hotips-article-nav-eyebrow-size: var(--font-size-ui-xs);
    --hotips-article-nav-title-size: var(--font-size-ui);
    --hotips-article-nav-suggestion-size: var(--font-size-ui-sm);
    --hotips-article-nav-back-size: var(--font-size-ui-xs);

    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    width: 100%;
  }

  .hotips-article-nav-slot--top{
    justify-content: stretch;
    margin: var(--space-lg) 0 var(--space-xl);
    min-height: 0;
  }

  .hotips-article-nav-slot--top .hotips-article-nav__slot--previous{
    display: none;
  }

  .hotips-article-nav__slot,
  .hotips-article-nav-slot--top .hotips-article-nav__slot,
  .hotips-article-nav-slot--top .hotips-article-nav__slot--next{
    width: 100%;
    max-width: 100%;
  }

  .hotips-article-nav__back,
  .hotips-article-nav-slot--top .hotips-article-nav__back{
    width: 100%;
    max-width: none;
  }
}

/* Hard separation between top nav and article body */
.hotips-article-nav-slot--top + .hotips-single-blog-body{
  clear: both;
  margin-top: 0;
}

/* Remove old beside-rating wrapper behaviour if markup still contains it */
.hotips-article-top-controls{
  display: block;
  margin: 0;
}

/* =========================================================
   ARTICLE RATING ROW COPY STATE
   - No copy before vote
   - "Thanks for voting" eyebrow after vote
   ========================================================= */

.mht-article-rating-row__copy[hidden]{
  display: none !important;
}

.mht-article-rating-row.is-open .mht-article-rating-row__copy{
  display: none;
}

.mht-article-rating-row.is-voted .mht-article-rating-row__copy{
  display: flex;
}

.mht-article-rating-row.is-voted .mht-article-rating-row__kicker{
  display: inline-flex;
  align-items: center;

  color: var(--color-tech-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mht-article-rating-row--wellness.is-voted .mht-article-rating-row__kicker{
  color: var(--color-wellness-accent);
}

/* =========================================================
   20. FOOTER
   ========================================================= */

:root{
  /* -------------------------
     FOOTER TOKENS
     ------------------------- */
  --footer-max-width: 1280px;
  --footer-pad-y: clamp(34px, 4vw, 56px);
  --footer-pad-x: clamp(18px, 3vw, 32px);
  --footer-gap-col: clamp(20px, 2.4vw, 36px);
  --footer-gap-row: clamp(16px, 2vw, 24px);

  --footer-bg: var(--color-soft);
  --footer-surface: color-mix(in srgb, var(--color-surface) 88%, transparent);
  --footer-border: var(--border-color);
  --footer-heading: var(--color-heading);
  --footer-text: var(--color-text);
  --footer-muted: var(--color-text-muted);
  --footer-link: var(--color-link);
  --footer-link-hover: var(--color-link-hover);
  --footer-small: color-mix(in srgb, var(--color-text-muted) 88%, black 12%);

  --footer-heading-size: clamp(1rem, 0.98rem + 0.18vw, 1.125rem);
  --footer-text-size: 1rem;
  --footer-small-size: 0.95rem;
  --footer-line-height: 1.65;

  --site-footer-inner-pad-y: var(--space-xl);
  --site-footer-inner-pad-x: 20px;

  --site-footer-stack-gap: var(--space-md);
  --site-footer-brand-gap: 12px;
  --site-footer-heading-margin-bottom: 12px;
  --site-footer-list-gap: var(--space-md);

  --site-footer-bottom-gap: var(--space-sm);
  --site-footer-bottom-margin-top: var(--space-xl);
  --site-footer-bottom-pad-top: 12px;
  --site-footer-bottom-pad-bottom: var(--space-xl);

  --site-footer-meta-gap-row: var(--space-md);
  --site-footer-meta-gap-col: 18px;
  --site-footer-legal-gap: 6px;

  --site-footer-pill-gap: var(--space-sm);
  --site-footer-pill-min-height: 32px;
  --site-footer-pill-pad-y: 6px;
  --site-footer-pill-pad-x: 12px;
  --site-footer-pill-radius: var(--radius-pill);

  --site-footer-icon-list-gap: var(--space-md);

  --site-footer-logo-wrap-max-width: 180px;
  --site-footer-logo-wrap-height: 100px;
  --site-footer-logo-wrap-margin-bottom: var(--space-sm);
  --site-footer-logo-scale: 1.08;

  --site-footer-placeholder-min-height: 72px;
  --site-footer-placeholder-pad-top: 6px;
  --site-footer-placeholder-pad-bottom: var(--space-xxs);

  /* -------------------------
     THEME STRIP FOOTER TOKENS
     ------------------------- */
  --hotips-footer-margin-top: 40px;

  --hotips-footer-topstrip-border: var(--color-dark);
  --hotips-footer-topstrip-gap: 18px;
  --hotips-footer-topstrip-min-height: 36px;

  --hotips-footer-menu-link-min-height: 36px;
  --hotips-footer-menu-link-pad-x: 18px;
  --hotips-footer-menu-link-hover-bg: var(--color-surface-soft);

  --hotips-footer-bottomstrip-min-height: 78px;
  --hotips-footer-bottomstrip-pad-y: 12px;
  --hotips-footer-logo-max-height: 58px;
}

/* -------------------------
   STANDARD FOOTER
   ------------------------- */

.site-footer{
  position: relative;
  width: 100%;
  margin: var(--space-none);
  padding: var(--space-none);
  overflow: hidden;
  box-sizing: border-box;

  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: var(--border-thin);
  border-color: var(--footer-border);

  font-family: var(--font-body);
  font-size: var(--footer-small-size);
}

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

.site-footer__inner{
  width: 100%;
  max-width: var(--footer-max-width);
  margin: var(--space-none) auto;
  padding: var(--site-footer-inner-pad-y) var(--site-footer-inner-pad-x);
}

.site-footer__main{
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(160px, 1fr));
  gap: var(--footer-gap-row) var(--footer-gap-col);
  align-items: start;
  max-width: 100%;
  padding: var(--space-none);
}

.site-footer__col{
  min-width: 0;
}

.site-footer__brand,
.site-footer__social,
.site-footer__signup,
.site-footer__contact{
  display: flex;
  flex-direction: column;
  gap: var(--site-footer-stack-gap);
}

.site-footer__brand{
  gap: var(--site-footer-brand-gap);
}

.site-footer__logo{
  margin: var(--space-none);
  color: var(--footer-heading);
  font-family: var(--font-display);
  font-size: var(--footer-heading-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.site-footer__tagline{
  margin: var(--space-none);
  color: var(--footer-muted);
  font-family: var(--font-accent);
  font-size: var(--footer-text-size);
  line-height: 1.45;
}

.site-footer__text{
  margin: var(--space-none);
  max-width: 34ch;
  color: var(--footer-text);
  font-family: var(--font-body);
  font-size: var(--footer-text-size);
  line-height: var(--footer-line-height);
}

.site-footer__heading{
  margin: var(--space-none) var(--space-none) var(--site-footer-heading-margin-bottom);
  color: var(--footer-heading);
  font-family: var(--font-display);
  font-size: var(--footer-heading-size);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.site-footer__nav{
  width: 100%;
}

.site-footer__list{
  margin: var(--space-none);
  padding: var(--space-none);
  list-style: none;
}

.site-footer__list li{
  margin: var(--space-none);
  padding: var(--space-none);
}

.site-footer__list li + li{
  margin-top: var(--site-footer-list-gap);
}

.site-footer a{
  color: var(--footer-link);
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard),
    text-decoration-color var(--duration-fast) var(--ease-standard);
}

.site-footer a:hover,
.site-footer a:focus-visible{
  color: var(--footer-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.site-footer__list a,
.site-footer__legal a,
.site-footer__meta a{
  font-family: var(--font-body);
  font-size: var(--footer-text-size);
  font-weight: 500;
  line-height: 1.55;
}

.site-footer__note{
  margin: var(--space-none);
  color: var(--footer-muted);
  font-family: var(--font-body);
  font-size: var(--footer-small-size);
  line-height: 1.6;
}

.site-footer__bottom{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap;

  gap: var(--site-footer-bottom-gap) !important;
  margin-top: var(--site-footer-bottom-margin-top) !important;
  padding-top: var(--site-footer-bottom-pad-top) !important;
  padding-bottom: var(--site-footer-bottom-pad-bottom);

  border-top: var(--border-thin);
  border-color: var(--footer-border);

  text-align: center !important;
  font-size: var(--footer-small-size);
}

.site-footer__bottom > *,
.site-footer__bottom > .e-con,
.site-footer__bottom > .elementor-element{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 100% !important;
  margin: var(--space-none) !important;
  text-align: center !important;
}

.site-footer__meta,
.site-footer__legal{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--site-footer-meta-gap-row) var(--site-footer-meta-gap-col);
  min-width: 0;
}

.site-footer__legal{
  width: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--site-footer-legal-gap) !important;
  text-align: center !important;
}

.site-footer__copyright,
.site-footer__smallprint{
  width: 100% !important;
  margin: var(--space-none);
  color: var(--footer-small);
  font-family: var(--font-body);
  font-size: var(--footer-small-size);
  line-height: 1.55;
  text-align: center !important;
}

.site-footer__legal a,
.site-footer__meta a{
  color: var(--footer-small);
  font-size: var(--footer-small-size);
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible,
.site-footer__meta a:hover,
.site-footer__meta a:focus-visible{
  color: var(--footer-link-hover);
}

.site-footer__pill{
  display: inline-flex;
  align-items: center;
  gap: var(--site-footer-pill-gap);

  min-height: var(--site-footer-pill-min-height);
  padding: var(--site-footer-pill-pad-y) var(--site-footer-pill-pad-x);

  border: var(--border-thin);
  border-color: var(--footer-border);
  border-radius: var(--site-footer-pill-radius);
  background: var(--footer-surface);
  color: var(--footer-muted);

  font-family: var(--font-body);
  font-size: var(--footer-small-size);
  line-height: 1;
}

.site-footer .elementor-widget,
.site-footer .elementor-widget-container,
.site-footer .elementor-heading-title,
.site-footer p,
.site-footer ul{
  margin-bottom: var(--space-none);
}

.site-footer .elementor-icon-list-items{
  gap: var(--space-none);
}

.site-footer .elementor-icon-list-item + .elementor-icon-list-item{
  margin-top: var(--site-footer-icon-list-gap);
}

.site-footer .elementor-icon-list-text{
  color: var(--footer-text);
  font-family: var(--font-body);
  font-size: var(--footer-text-size);
  line-height: 1.55;
}

.site-footer__logo-wrap{
  width: 100%;
  max-width: var(--site-footer-logo-wrap-max-width);
  height: var(--site-footer-logo-wrap-height);
  overflow: hidden;
  margin: var(--space-none) auto var(--site-footer-logo-wrap-margin-bottom);
}

.site-footer__logo-wrap img{
  display: block;
  width: auto;
  height: 100%;
  transform: scale(var(--site-footer-logo-scale));
  transform-origin: center;
}

.site-footer__main--placeholder{
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: var(--site-footer-placeholder-min-height);
  padding: var(--site-footer-placeholder-pad-top) var(--space-none) var(--site-footer-placeholder-pad-bottom);
}

.site-footer__placeholder-note{
  margin: var(--space-none);
  color: var(--footer-muted);
  font-family: var(--font-body);
  font-size: var(--footer-small-size);
  line-height: 1.5;
  text-align: center;
}

.site-footer__bottom .elementor-widget-container,
.site-footer__bottom p,
.site-footer__bottom div,
.site-footer__bottom span{
  text-align: center !important;
}

/* -------------------------
   THEME STRIP FOOTER
   ------------------------- */

.hotips-footer{
  position: relative;
  width: 100%;
  margin-top: var(--hotips-footer-margin-top);
}

.hotips-footer__topstrip{
  width: 100%;
  background: var(--color-soft);
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
  border-color: var(--hotips-footer-topstrip-border);
}

.hotips-footer__topstrip-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--hotips-footer-topstrip-gap);
  min-height: var(--hotips-footer-topstrip-min-height);
  padding: var(--space-none);
}

.hotips-footer__menu{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
}

.hotips-footer__menu-list{
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-none);

  margin: var(--space-none);
  padding: var(--space-none);
  list-style: none;
}

.hotips-footer__menu-list li{
  display: flex;
  align-items: stretch;
  margin: var(--space-none);
  padding: var(--space-none);
  border-left: var(--border-thin);
  border-color: var(--color-dark);
}

.hotips-footer__menu-list li:first-child{
  border-left: 0;
}

.hotips-footer__menu-list a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: var(--hotips-footer-menu-link-min-height);
  padding: var(--space-none) var(--hotips-footer-menu-link-pad-x);
  margin: var(--space-none);

  background: transparent;
  color: var(--color-dark);

  font-family: var(--font-body);
  font-size: var(--footer-small-size);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.hotips-footer__menu-list a:hover,
.hotips-footer__menu-list a:focus,
.hotips-footer__menu-list .current-menu-item > a,
.hotips-footer__menu-list .current_page_item > a,
.hotips-footer__menu-list .current-menu-ancestor > a,
.hotips-footer__menu-list .current_page_ancestor > a{
  background: var(--hotips-footer-menu-link-hover-bg);
  color: var(--color-dark);
}

.hotips-footer__meta{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.hotips-footer__copyright{
  margin: var(--space-none);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: var(--footer-small-size);
  line-height: 1.3;
}

.hotips-footer__bottomstrip{
  width: 100%;
  background: var(--color-dark);
  border-bottom: var(--border-thin);
  border-color: var(--color-dark);
}

.hotips-footer__bottomstrip-inner{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--hotips-footer-bottomstrip-min-height);
  padding: var(--hotips-footer-bottomstrip-pad-y) var(--space-none);
}

.hotips-footer__branding{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.hotips-footer__logo-link{
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
  line-height: 1;
}

.hotips-footer__logo-image{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--hotips-footer-logo-max-height);
  object-fit: contain;
}

@media (max-width: 1024px){
  .site-footer__main{
    grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(160px, 1fr));
  }

  .site-footer__brand{
    grid-column: 1 / -1;
    max-width: 100%;
  }

  .site-footer__text{
    max-width: 56ch;
  }
}

@media (max-width: 900px){
  .hotips-footer{
    margin-top: 28px;
  }

  .hotips-footer__topstrip-inner{
    justify-content: center;
    min-height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .hotips-footer__menu,
  .hotips-footer__menu-list{
    justify-content: center;
    width: 100%;
  }

  .hotips-footer__menu-list a{
    min-height: 34px;
    padding: var(--space-none) 12px;
    font-size: var(--font-size-sm);
  }

  .hotips-footer__meta{
    justify-content: center;
    width: 100%;
  }

  .hotips-footer__copyright{
    text-align: center;
  }

  .hotips-footer__bottomstrip-inner{
    min-height: 68px;
    padding: 10px var(--space-none);
  }

  .hotips-footer__logo-image{
    max-height: 48px;
  }
}

@media (max-width: 767px){
  .site-footer__inner{
    padding: clamp(28px, 7vw, 40px) 18px 22px;
  }

  .site-footer__main{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .site-footer__heading{
    margin-bottom: var(--space-md);
  }

  .site-footer__list li + li{
    margin-top: var(--space-sm);
  }

  .site-footer__bottom{
    gap: 12px !important;
    margin-top: 24px !important;
    padding-top: var(--space-xl) !important;
  }

  .site-footer__meta,
  .site-footer__legal{
    width: 100%;
    gap: 8px 14px;
  }

  .site-footer__copyright,
  .site-footer__smallprint{
    width: 100%;
  }
}

/* =========================================================
   21. UTILITIES / BACK TO TOP
   ========================================================= */

:root{
  /* -------------------------
     BACK TO TOP TOKENS
     ------------------------- */
  --back-to-top-offset: 22px;
  --back-to-top-offset-mobile: var(--space-xl);
  --back-to-top-size: 48px;
  --back-to-top-size-mobile: 44px;
  --back-to-top-z: 9999;

  --back-to-top-bg: var(--color-dark);
  --back-to-top-bg-hover: var(--color-accent);
  --back-to-top-text: var(--color-white);
  --back-to-top-text-hover: var(--color-dark);
  --back-to-top-border: var(--border-thick-accent);
  --back-to-top-border-hover: var(--color-dark);
  --back-to-top-radius: var(--radius-pill);
  --back-to-top-shadow: var(--shadow-lg);
  --back-to-top-shadow-hover: var(--shadow-xl);
}

body .back-to-top,
body a.back-to-top,
body button.back-to-top{
  all: unset;
  position: fixed;
  right: var(--back-to-top-offset);
  bottom: var(--back-to-top-offset);
  z-index: var(--back-to-top-z);

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;

  width: var(--back-to-top-size);
  height: var(--back-to-top-size);
  min-width: var(--back-to-top-size) !important;
  min-height: var(--back-to-top-size) !important;

  margin: var(--space-none) !important;
  padding: var(--space-none) !important;

  background: var(--back-to-top-bg) !important;
  color: var(--back-to-top-text) !important;
  border: var(--back-to-top-border) !important;
  border-radius: var(--back-to-top-radius) !important;
  box-shadow: var(--back-to-top-shadow) !important;

  line-height: 1 !important;
  text-decoration: none !important;
  transform: none !important;
  cursor: pointer;

  transition:
    background-color var(--duration-mid) var(--ease-standard),
    color var(--duration-mid) var(--ease-standard),
    border-color var(--duration-mid) var(--ease-standard),
    box-shadow var(--duration-mid) var(--ease-standard),
    transform var(--duration-mid) var(--ease-standard) !important;
}

body .back-to-top:hover,
body a.back-to-top:hover,
body button.back-to-top:hover,
body .back-to-top:focus-visible,
body a.back-to-top:focus-visible,
body button.back-to-top:focus-visible{
  background: var(--back-to-top-bg-hover) !important;
  color: var(--back-to-top-text-hover) !important;
  border-color: var(--back-to-top-border-hover) !important;
  box-shadow: var(--back-to-top-shadow-hover) !important;
  transform: translateY(-2px) !important;
  outline: none !important;
}

@media (max-width: 767px){
  body .back-to-top,
  body a.back-to-top,
  body button.back-to-top{
    right: var(--back-to-top-offset-mobile);
    bottom: var(--back-to-top-offset-mobile);
    width: var(--back-to-top-size-mobile);
    height: var(--back-to-top-size-mobile);
    min-width: var(--back-to-top-size-mobile) !important;
    min-height: var(--back-to-top-size-mobile) !important;
  }
}

/* =========================================================
   22. HOMEPAGE SYSTEM TOKENS
   ========================================================= */

/* =========================================================
   BRANDBAR / HUB DEFAULT TOKENS
   Topbar tokens now live in assets/css/navigation/mht-sticky-topbar.css.
   ========================================================= */

:root{
  /* -------------------------
     BRANDBAR TOKENS
     ------------------------- */
  --hotips-brandbar-bg: var(--color-surface);
  --hotips-brandbar-border: var(--border-color);
  --hotips-brandbar-text: var(--color-heading);
  --hotips-brandbar-text-soft: var(--color-text-muted);

  /* -------------------------
     AREA HUB SYSTEM TOKENS
     New hub components should use these, not hard-coded colours.
     These map back to existing global palette/tokens.
     ------------------------- */
  --mht-hub-page-bg: var(--color-surface-muted);
  --mht-hub-surface: var(--color-surface);
  --mht-hub-surface-soft: var(--color-surface-soft);
  --mht-hub-text: var(--color-heading);
  --mht-hub-text-muted: var(--color-text-muted);

  --mht-hub-accent: var(--color-accent);
  --mht-hub-accent-soft: var(--color-soft);
  --mht-hub-border: var(--border-color-light);

  --mht-hub-radius: var(--radius-lg);
  --mht-hub-radius-sm: var(--radius-sm);
  --mht-hub-shadow: var(--shadow-lg);
  --mht-hub-shadow-soft: var(--shadow-md);

  --mht-hub-shell-width: var(--home-shell-max-width, var(--container));
  --mht-hub-shell-gutter: var(--home-shell-gutter, clamp(18px, 3vw, 44px));

  --mht-hub-hero-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-dark-muted) 84%, transparent) 0%,
      color-mix(in srgb, var(--color-dark) 94%, black 6%) 100%
    );

  --mht-hub-hero-text: var(--color-white);
  --mht-hub-hero-text-muted: color-mix(in srgb, var(--color-white) 82%, transparent);
  --mht-hub-hero-pad-y: clamp(38px, 6vw, 76px);
  --mht-hub-hero-pad-x: clamp(18px, 3.4vw, 44px);
  --mht-hub-hero-radius: var(--radius-lg);
  --mht-hub-hero-shadow: var(--shadow-lg);

  --mht-hub-filter-gap: var(--space-md);
  --mht-hub-filter-radius: var(--radius-pill);
  --mht-hub-filter-pad-y: var(--space-sm);
  --mht-hub-filter-pad-x: var(--space-xl);

  --mht-hub-card-gap: var(--space-xl);
}

/* =========================================================
   MONEY CONTEXT TOKENS
   ========================================================= */

body.tax-my_blog_content_area.term-money-growth,
body.tax-my_blog_content_area.term-email-growth,
body.tax-my_blog_content_area.term-funnels-automation,
body.tax-my_blog_content_area.term-sell-online,
body.tax-my_blog_content_area.term-website-growth,
body.tax-my_blog_content_area.term-creator-tools,
body.tax-my_blog_content_area.term-creator-gear,
body.term-money-growth,
body.term-email-growth,
body.term-funnels-automation,
body.term-sell-online,
body.term-website-growth,
body.term-creator-tools,
body.term-creator-gear,
body.hotips-site-theme--money,
.hotips-area-hub--money,
.hotips-section-money{
  --hotips-brandbar-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-area-hub-money-panel-soft-bg) 72%, white 28%) 0%,
      color-mix(in srgb, var(--color-area-hub-money-page-bg) 82%, white 18%) 100%
    );

  --hotips-brandbar-border: var(--color-area-hub-money-border);
  --hotips-brandbar-text: var(--color-area-hub-money-text);
  --hotips-brandbar-text-soft: var(--color-area-hub-money-text-muted);

  --mht-hub-page-bg: var(--color-area-hub-money-page-bg);
  --mht-hub-surface: var(--color-area-hub-money-card-bg);
  --mht-hub-surface-soft: var(--color-area-hub-money-panel-soft-bg);
  --mht-hub-text: var(--color-area-hub-money-text);
  --mht-hub-text-muted: var(--color-area-hub-money-text-muted);
  --mht-hub-accent: var(--color-tech-accent);
  --mht-hub-accent-soft: var(--color-tech-soft);
  --mht-hub-border: var(--color-area-hub-money-border);

  --mht-hub-hero-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-money-band-b) 82%, transparent) 0%,
      color-mix(in srgb, var(--color-area-hub-money-band-a) 94%, black 6%) 100%
    );

  --mht-hub-hero-text: var(--color-white);
  --mht-hub-hero-text-muted: color-mix(in srgb, var(--color-white) 82%, transparent);
}

/* =========================================================
   WELLNESS CONTEXT TOKENS
   ========================================================= */

body.tax-my_blog_content_area.term-wellness,
body.tax-my_blog_content_area.term-balanced-living,
body.tax-my_blog_content_area.term-healthy-home-work,
body.tax-my_blog_content_area.term-digital-calm,
body.tax-my_blog_content_area.term-gentle-productivity,
body.tax-my_blog_content_area.term-everyday-energy,
body.tax-my_blog_content_area.term-lighter-systems,
body.term-wellness,
body.term-balanced-living,
body.term-healthy-home-work,
body.term-digital-calm,
body.term-gentle-productivity,
body.term-everyday-energy,
body.term-lighter-systems,
body.hotips-site-theme--wellness,
.hotips-area-hub--wellness,
.hotips-section-wellness{
  --hotips-brandbar-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-area-hub-wellness-panel-soft-bg) 76%, white 24%) 0%,
      color-mix(in srgb, var(--color-area-hub-wellness-page-bg) 84%, white 16%) 100%
    );

  --hotips-brandbar-border: var(--color-area-hub-wellness-border);
  --hotips-brandbar-text: var(--color-area-hub-wellness-text);
  --hotips-brandbar-text-soft: var(--color-area-hub-wellness-text-muted);

  --mht-hub-page-bg: var(--color-area-hub-wellness-page-bg);
  --mht-hub-surface: var(--color-area-hub-wellness-card-bg);
  --mht-hub-surface-soft: var(--color-area-hub-wellness-panel-soft-bg);
  --mht-hub-text: var(--color-area-hub-wellness-text);
  --mht-hub-text-muted: var(--color-area-hub-wellness-text-muted);
  --mht-hub-accent: var(--color-wellness-accent);
  --mht-hub-accent-soft: var(--color-wellness-accent-soft);
  --mht-hub-border: var(--color-area-hub-wellness-border);

  --mht-hub-hero-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-wellness-band-b) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-area-hub-wellness-band-a) 88%, var(--color-dark) 12%) 100%
    );

  --mht-hub-hero-text: var(--color-white);
  --mht-hub-hero-text-muted: color-mix(in srgb, var(--color-white) 82%, transparent);
}

/* =========================================================
   HOMEPAGE / TRANSITION / DOCKED RAIL TOKENS
   ========================================================= */

:root{

  /* -------------------------
     HOME SHARED WIDTHS
     ------------------------- */
  --home-shell-max-width: 1520px;
  --home-shell-gutter: clamp(18px, 3vw, 44px);

  /* -------------------------
     HOME HERO
     ------------------------- */
  --hotips-home-hero-image: none;

  --home-hero-inner-pad-top: clamp(72px, 8vh, 104px);
  --home-hero-inner-pad-bottom: clamp(82px, 9vh, 118px);

  --home-hero-panel-max-width: 620px;
  --home-hero-panel-pad: clamp(22px, 3.2vw, 32px);
  --home-hero-panel-radius: var(--radius-lg);
  --home-hero-panel-shadow: var(--shadow-xl);

  --home-hero-eyebrow-margin-bottom: 12px;
  --home-hero-text-max-width: 560px;
  --home-hero-text-margin-top: 18px;
  --home-hero-text-line-height: 1.42;

  --home-hero-actions-gap: 12px;
  --home-hero-actions-margin-top: 22px;

  --home-hero-button-gap: var(--space-sm);
  --home-hero-button-min-height: 44px;
  --home-hero-button-pad-y: 8px;
  --home-hero-button-pad-x: var(--space-xl);
  --home-hero-button-radius: var(--radius-sm);

  --home-hero-scrollcue-bottom: clamp(115px, 14vh, 155px);
  --home-hero-scrollcue-gap: var(--space-xs);
  --home-hero-scrollcue-width: 38px;
  --home-hero-scrollcue-height: 58px;
  --home-hero-scrollcue-pad-top: var(--space-sm);
  --home-hero-scrollcue-radius: var(--radius-pill);
  --home-hero-scrollcue-line-width: var(--space-xxs);
  --home-hero-scrollcue-line-height: 26px;
  --home-hero-scrollcue-dot-size: 6px;
  --home-hero-scrollcue-arrow-offset: var(--space-xs);
  --home-hero-scrollcue-arrow-size: var(--font-size-md);
  --home-hero-scrollcue-arrow-color: var(--color-glass-light-strong);

  --home-hero-preview-bottom: -18px;
  --home-hero-preview-max-width: 1480px;
  --home-hero-preview-track-gap: var(--space-xl);
  --home-hero-preview-card-gap: var(--space-xl);
  --home-hero-preview-card-min-height: 108px;
  --home-hero-preview-card-pad-y: var(--space-xl);
  --home-hero-preview-card-pad-x: 18px;
  --home-hero-preview-card-radius: var(--radius-md);
  --home-hero-preview-icon-size: 52px;
  --home-hero-preview-icon-radius: var(--radius-sm);
  --home-hero-preview-copy-gap: 6px;

  /* -------------------------
     MAIN FEATURED ARTICLE RAIL
     Full-size rail before the docked rail appears.
     ------------------------- */
  --home-featured-pad-top: var(--space-2xl);
  --home-featured-pad-bottom: var(--space-2xl);

  --home-featured-container-max-width: var(--home-shell-max-width);
  --home-featured-container-gutter: var(--home-shell-gutter);

  --home-featured-shell-pad-y: var(--space-2xl);
  --home-featured-shell-pad-x: var(--space-2xl);
  --home-featured-shell-radius: var(--radius-md);
  --home-featured-shell-shadow: var(--shadow-lg);

  --home-featured-head-gap: var(--space-2xl);
  --home-featured-head-margin-bottom: var(--space-xl);
  --home-featured-intro-max-width: 760px;
  --home-featured-eyebrow-margin-bottom: var(--space-md);
  --home-featured-text-margin-top: var(--space-md);

  --home-featured-nav-gap: var(--space-md);
  --home-featured-navbutton-size: 42px;
  --home-featured-navbutton-radius: var(--radius-pill);

  --home-featured-item-min-width: 250px;
  --home-featured-item-max-width: 290px;
  --home-featured-item-gap: var(--space-lg);
  --home-featured-viewport-pad-y: var(--space-sm);

  --home-featured-footer-margin-top: var(--space-xl);
  --home-featured-viewall-min-height: 42px;
  --home-featured-viewall-pad-x: var(--space-2xl);
  --home-featured-viewall-radius: var(--radius-pill);

  --home-featured-empty-pad: var(--space-2xl);

  /* -------------------------
     FEATURED SCROLL CUE
     The small vertical pill below featured rail.
     ------------------------- */
  --home-featured-scrollcue-wrap-offset: var(--space-sm);
  --home-featured-scrollcue-wrap-pad-bottom: var(--space-xl);
  --home-featured-scrollcue-z: 30;

  --home-featured-scrollcue-width: 46px;
  --home-featured-scrollcue-height: 70px;
  --home-featured-scrollcue-bg: color-mix(in srgb, var(--color-surface) 88%, transparent);
  --home-featured-scrollcue-bg-hover: var(--color-surface);
  --home-featured-scrollcue-border: var(--border-color-light);
  --home-featured-scrollcue-border-hover: var(--border-color-strong);
  --home-featured-scrollcue-blur: 10px;

  --home-featured-scrollcue-line-width: var(--space-xxs);
  --home-featured-scrollcue-line-height: 34px;
  --home-featured-scrollcue-dot-size: 7px;
  --home-featured-scrollcue-dot-travel: 22px;

    /* -------------------------
   /* -------------------------
   HOME FEATURED TRANSITION
   Keep ALL transition tokens here only.
   Section 24 uses these values but does not redefine them.
   ------------------------- */

--home-transition-sticky-top: var(--topbar-height);

/* Longer stage = featured rail has time to arrive, sit, then fade */
--home-transition-stage-min-height: 380svh;

/* Push Choose Your Focus down so carousel sticks for longer */
--home-transition-intro-delay-space: 115svh;

--home-transition-sticky-z: 12;
--home-transition-sticky-z-complete: 5;
--home-transition-content-z: 8;

--home-transition-active-shadow: var(--shadow-xl);

/* JS writes these live while scrolling */
--home-featured-out-opacity: 1;
--home-featured-out-y: 0px;
--home-featured-out-scale: 1;

--home-featured-shrink-lift: 74px;
--home-featured-shrink-scale-loss: 0.12;
--home-featured-shrink-final-scale: 0.88;
--home-featured-shrink-origin: top center;

--home-transition-complete-opacity: 0;

--home-transition-stage-bg: linear-gradient(
  180deg,
  var(--color-surface-muted) 0%,
  var(--color-surface) 42%,
  var(--color-surface-muted) 100%
);

/* -------------------------
   HOME TRANSITION BACKGROUND IMAGES
   Two-image sticky scroll transition.
   ------------------------- */

--home-transition-bg-z: 2;

--home-transition-bg-image-1: var(--hotips-home-hero-image);
--home-transition-bg-image-2: none;

--home-transition-bg-height: calc(100svh - var(--home-transition-sticky-top));
--home-transition-bg-size: cover;
--home-transition-bg-position: center center;
--home-transition-bg-repeat: no-repeat;

--home-transition-bg-scale-start: 1.16;
--home-transition-bg-scale-loss: 0.16;

  /* -------------------------
     DOCKED / STICKY FEATURE RAIL
     Separate future docked rail.
     This appears when transition becomes active, not only at complete.
     ------------------------- */
  --home-docked-rail-top: calc(var(--topbar-height) + var(--space-sm));
  --home-docked-rail-z: 80;
  --home-docked-rail-max-width: var(--home-shell-max-width);

    --home-docked-rail-reveal-delay: 0.58s;
  --home-docked-rail-reveal-duration: 1.18s;

  --home-docked-rail-pad-y: var(--space-sm);
  --home-docked-rail-pad-x: var(--space-sm);
  --home-docked-rail-gap: var(--space-lg);
  --home-docked-rail-radius: var(--radius-md);

  --home-docked-rail-bg: color-mix(in srgb, var(--color-surface) 94%, transparent);
  --home-docked-rail-border: var(--border-color-light);
  --home-docked-rail-shadow: var(--shadow-lg);
  --home-docked-rail-blur: 14px;

  --home-docked-label-min-width: 240px;
  --home-docked-label-gap: var(--space-md);
  --home-docked-label-pad-x: var(--space-lg);
  --home-docked-label-icon-size: 34px;
  --home-docked-label-icon-color: var(--color-accent);
  --home-docked-label-title-size: var(--font-size-md);
  --home-docked-label-text-size: var(--font-size-ui-md);

  --home-docked-track-gap: var(--space-md);
  --home-docked-card-min-width: 248px;
  --home-docked-card-max-width: 300px;

  --home-docked-nav-size: 40px;
  --home-docked-nav-gap: var(--space-sm);

  /* -------------------------
     ARTICLE CARD DOCK VARIANT
     Used by .hotips-article-card--dock.
     ------------------------- */
  --article-card-dock-min-height: 58px;
  --article-card-dock-pad: var(--space-xs);
  --article-card-dock-gap: var(--space-sm);
  --article-card-dock-media-size: 58px;
  --article-card-dock-title-size: calc(var(--font-size-ui) + 2px);
--article-card-dock-title-weight: 400;
--article-card-dock-title-lines: 2;
--article-card-dock-radius: var(--radius-sm);

--home-docked-card-label-size: var(--font-size-ui);
--home-docked-card-label-weight: 800;

  /* -------------------------
     CHOOSE YOUR FOCUS SECTION
     ------------------------- */
  --home-intro-nav-pad-y: clamp(42px, 6vw, 76px);
  --home-intro-nav-shell-pad-y: clamp(28px, 4vw, 52px);
  --home-intro-nav-shell-pad-x: clamp(18px, 3.4vw, 44px);
  --home-intro-nav-shell-radius: var(--radius-lg);
  --home-intro-nav-shell-shadow: none;

  --home-intro-nav-intro-max-width: 760px;
  --home-intro-nav-intro-margin-bottom: clamp(28px, 4vw, 46px);

  --home-intro-nav-reveal-y: calc(var(--space-2xl) * 1.5);
  --home-intro-nav-reveal-duration: 1.05s;

  --home-intro-nav-grid-gap: clamp(18px, 2.4vw, 28px);

  --home-focus-card-pad: clamp(18px, 2.2vw, 28px);
  --home-focus-card-radius: var(--radius-lg);
  --home-focus-card-shadow: var(--shadow-md);
  --home-focus-card-gap: var(--space-xl);

  --home-focus-head-gap: var(--space-xl);
  --home-focus-icon-size: 66px;
  --home-focus-icon-radius: var(--radius-pill);

  --home-focus-tabs-gap: var(--space-md);
  --home-focus-tab-min-height: 34px;
  --home-focus-tab-pad-x: var(--space-xl);

  --home-focus-feature-gap: var(--space-xl);
  --home-focus-feature-radius: var(--radius-sm);
  --home-focus-feature-media-min-height: 230px;
  --home-focus-feature-pad: var(--space-2xl);

  --home-focus-mini-grid-gap: var(--space-sm);
  --home-focus-mini-card-pad: var(--space-md);
  --home-focus-mini-icon-size: 36px;

  --home-focus-cta-min-height: 48px;
  --home-focus-cta-radius: var(--radius-sm);

  --home-starter-margin-top: clamp(22px, 3vw, 34px);
  --home-starter-pad-y: var(--space-xl);
  --home-starter-pad-x: clamp(16px, 2.6vw, 28px);
  --home-starter-radius: var(--radius-md);
  --home-starter-gap: var(--space-xl);
  /* Choose focus anchor offset */
--home-choose-focus-anchor-offset: calc(
  var(--topbar-height) +
  var(--home-docked-nav-size) +
  var(--home-docked-rail-pad-y) +
  var(--home-docked-rail-pad-y) +
  var(--space-2xl)
);

  /* -------------------------
   HOME FOCUS BRAND MAPPING
   Uses existing global palette + button tokens.
   ------------------------- */

/* Money / Growth */
--home-focus-money-accent: var(--color-tech-accent);
--home-focus-money-accent-muted: var(--color-tech-accent-muted);
--home-focus-money-soft: var(--color-tech-soft-muted);
--home-focus-money-soft-strong: var(--color-tech-soft);
--home-focus-money-ink: var(--color-dark);

--home-focus-money-button-bg: var(--button-navy-bg);
--home-focus-money-button-bg-hover: var(--button-navy-bg-hover);
--home-focus-money-button-text: var(--button-navy-text);
--home-focus-money-button-border: var(--button-navy-border);

/* Wellness / Life */
--home-focus-wellness-accent: var(--color-wellness-olive);
--home-focus-wellness-accent-muted: var(--color-wellness-olive-soft);
--home-focus-wellness-soft: var(--color-wellness-soft);
--home-focus-wellness-soft-strong: var(--color-wellness-grey-olive);
--home-focus-wellness-ink: var(--color-wellness-black-soft);

--home-focus-wellness-button-bg: var(--color-wellness-olive-dark);
--home-focus-wellness-button-bg-hover: var(--color-wellness-olive);
--home-focus-wellness-button-text: var(--color-white);
--home-focus-wellness-button-border: var(--color-wellness-olive-dark);

--home-focus-wellness-button-bg: color-mix(
  in srgb,
  var(--color-wellness-accent) 72%,
  var(--color-dark) 28%
);
--home-focus-wellness-button-bg-hover: color-mix(
  in srgb,
  var(--color-wellness-accent) 84%,
  var(--color-dark) 16%
);
--home-focus-wellness-button-text: var(--color-white);
--home-focus-wellness-button-border: color-mix(
  in srgb,
  var(--color-wellness-accent) 74%,
  var(--color-dark) 26%
);
}

/* NOW selectors are allowed again */

.hotips-home-transition{
  --home-transition-bg-overlay: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-surface-muted) 58%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-muted) 24%, transparent) 42%,
    color-mix(in srgb, var(--color-surface-muted) 12%, transparent) 100%
  );

  --home-transition-bg-overlay-opacity: 1;
  --home-transition-bg-wash-opacity: 0.42;
}

/* =========================================================
   PAGE TRANSITIONS
   Vue-inspired full-page transition for WordPress
   ========================================================= */

:root{
  --hotips-page-enter-duration: 620ms;
  --hotips-page-exit-duration: 430ms;
  --hotips-page-enter-ease: cubic-bezier(0.1, 0.7, 0.6, 0.9);
  --hotips-page-shell-ease: cubic-bezier(0.4, 0.1, 0.7, 0.95);

  --hotips-page-enter-x: 34px;
  --hotips-page-enter-y: 10px;
  --hotips-page-exit-x: -22px;
  --hotips-page-exit-y: -4px;
}

/* Topbar component moved to assets/css/navigation/mht-sticky-topbar.css. */

/* =========================================================
   SECTION-THEMED SITE CHROME
   Works from the real single-blog wrapper classes
   ========================================================= */

/* -------------------------
   Money pages
   ------------------------- */

body:has(.hotips-page-shell--single-blog.content-area-parent-money){
  --hotips-glass-bar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-section-money-soft) 26%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-section-money-main) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-section-money-dark) 84%, transparent) 100%
    );

  --hotips-glass-bar-text: var(--color-surface);
  --hotips-glass-bar-border: color-mix(in srgb, var(--color-surface) 18%, transparent);
  --hotips-glass-bar-shadow: 0 14px 34px rgba(12, 26, 46, 0.24);
}

/* -------------------------
   Wellness pages
   ------------------------- */

body:has(.hotips-page-shell--single-blog.content-area-parent-wellness){
  --hotips-glass-bar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-section-wellness-soft) 24%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-section-wellness-main) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-section-wellness-main) 82%, black 18%) 100%
    );

  --hotips-glass-bar-text: var(--color-surface);
  --hotips-glass-bar-border: color-mix(in srgb, var(--color-surface) 18%, transparent);
  --hotips-glass-bar-shadow: 0 14px 34px rgba(40, 58, 38, 0.24);
}

/* -------------------------
   Header spacing
   ------------------------- */

body:has(.hotips-page-shell--single-blog.content-area-parent-money) .hotips-header,
body:has(.hotips-page-shell--single-blog.content-area-parent-wellness) .hotips-header{
  background: transparent;
}

/* =========================================================
   SECTION-THEMED SITE CHROME
   Works from the real single-blog wrapper classes
   ========================================================= */

/* -------------------------
   Money pages
   ------------------------- */

body:has(.hotips-page-shell--single-blog.content-area-parent-money){
  --hotips-glass-bar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-section-money-soft) 26%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-section-money-main) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-section-money-dark) 84%, transparent) 100%
    );

  --hotips-glass-bar-text: var(--color-surface);
  --hotips-glass-bar-border: color-mix(in srgb, var(--color-surface) 18%, transparent);
  --hotips-glass-bar-shadow: 0 14px 34px rgba(12, 26, 46, 0.24);
}

/* -------------------------
   Wellness pages
   ------------------------- */

body:has(.hotips-page-shell--single-blog.content-area-parent-wellness){
  --hotips-glass-bar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-section-wellness-soft) 24%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-section-wellness-main) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-section-wellness-main) 82%, black 18%) 100%
    );

  --hotips-glass-bar-text: var(--color-surface);
  --hotips-glass-bar-border: color-mix(in srgb, var(--color-surface) 18%, transparent);
  --hotips-glass-bar-shadow: 0 14px 34px rgba(40, 58, 38, 0.24);
}

/* -------------------------
   Header spacing
   ------------------------- */

body:has(.hotips-page-shell--single-blog.content-area-parent-money) .hotips-header,
body:has(.hotips-page-shell--single-blog.content-area-parent-wellness) .hotips-header{
  background: transparent;
}

body.hotips-site-theme--money,
body:has(.hotips-page-shell--single-blog.content-area-parent-money){
  --hotips-glass-bar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-section-money-soft) 26%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-section-money-main) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-section-money-dark) 84%, transparent) 100%
    );

  --hotips-glass-bar-text: var(--color-surface);
  --hotips-glass-bar-border: color-mix(in srgb, var(--color-surface) 18%, transparent);
  --hotips-glass-bar-shadow: 0 14px 34px rgba(12, 26, 46, 0.24);
}

body.hotips-site-theme--wellness,
body:has(.hotips-page-shell--single-blog.content-area-parent-wellness){
  --hotips-glass-bar-bg:
    radial-gradient(
      circle at 78% 18%,
      color-mix(in srgb, var(--color-section-wellness-soft) 24%, transparent) 0%,
      transparent 34%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-section-wellness-main) 70%, transparent) 0%,
      color-mix(in srgb, var(--color-section-wellness-main) 82%, black 18%) 100%
    );

  --hotips-glass-bar-text: var(--color-surface);
  --hotips-glass-bar-border: color-mix(in srgb, var(--color-surface) 18%, transparent);
  --hotips-glass-bar-shadow: 0 14px 34px rgba(40, 58, 38, 0.24);
}

/* =========================================================
   24. HOME HERO / FEATURED / DOCKED / FOCUS
   ========================================================= */

/* -------------------------
   FRONT PAGE FULL-WIDTH RESET
   ------------------------- */

.hotips-front-page--no-sidebar .hotips-layout--full{
  display: block;
}

.hotips-front-page--no-sidebar .hotips-primary--full,
.hotips-front-page--no-sidebar .hotips-entry--front-page{
  width: 100%;
  max-width: 100%;
}

/* -------------------------
   TEMPORARY VISUAL DELETE
   Proper PHP cleanup can remove these later.
   ------------------------- */

.hotips-brandbar,
.hotips-home-hero__preview,
.hotips-home-hero-preview,
.hotips-home-hero__preview-track,
.hotips-home-hero-preview-track,
.hotips-home-hero__preview-card,
.hotips-home-hero-preview-card,
.hotips-home-hero-cards,
.hotips-home-hero__cards{
  display: none !important;
}

/* =========================================================
   24a. HOME HERO
   ========================================================= */

.hotips-home-hero{
  --hotips-hero-progress: 0;

  position: relative;
  min-height: calc(100svh - var(--topbar-height));
  overflow: hidden;
  isolation: isolate;
  background: var(--color-surface-soft);
}

.hotips-home-hero__media,
.hotips-home-hero__shade,
.hotips-home-hero__fade{
  position: absolute;
  inset: var(--space-none);
}

.hotips-home-hero__media{
  background-image: var(--hotips-home-hero-image);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  opacity: 1;
  transform: scale(calc(1.08 - (var(--hotips-hero-progress) * 0.08)));

  animation: hotipsHomeHeroImageLand 1.15s var(--ease-soft) both;

  transition:
    transform var(--duration-fast) linear,
    opacity var(--duration-mid) var(--ease-standard);

  will-change: transform, opacity;
}

@keyframes hotipsHomeHeroImageLand{
  0%{
    opacity: 0;
    transform: scale(1.14);
  }

  100%{
    opacity: 1;
    transform: scale(1.08);
  }
}

.hotips-home-hero__shade{
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-dark) 38%, transparent) 0%,
    color-mix(in srgb, var(--color-dark) 26%, transparent) 28%,
    color-mix(in srgb, var(--color-dark) 12%, transparent) 58%,
    color-mix(in srgb, var(--color-dark) 4%, transparent) 100%
  );
}

.hotips-home-hero__fade{
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--color-bg) 0%, transparent) 58%,
    color-mix(in srgb, var(--color-bg) 18%, transparent) 70%,
    color-mix(in srgb, var(--color-bg) 58%, transparent) 84%,
    var(--color-bg) 100%
  );
  pointer-events: none;
}

.hotips-home-hero__inner{
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;

  min-height: calc(100svh - var(--topbar-height));
  box-sizing: border-box;

  padding-top: var(--home-hero-inner-pad-top);
  padding-bottom: var(--home-hero-inner-pad-bottom);
}

/* Topbar-aware home hero sizing */
.admin-bar .hotips-home-hero,
.admin-bar .hotips-home-hero__inner{
  min-height: calc(100svh - var(--topbar-height) - var(--topbar-admin-offset));
}

@media (max-width: 900px){
  .hotips-home-hero,
  .hotips-home-hero__inner{
    min-height: calc(100svh - var(--topbar-height-mobile));
  }
}

@media (max-width: 782px){
  .admin-bar .hotips-home-hero,
  .admin-bar .hotips-home-hero__inner{
    min-height: calc(100svh - var(--topbar-height-mobile) - 46px);
  }
}

.hotips-home-hero__panel{
  position: relative;

  width: min(520px, 100%);
  padding: clamp(18px, 2.4vw, 28px);

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--color-white) 26%, transparent);
  border-radius: var(--radius-lg);

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-white) 18%, transparent) 0%,
      color-mix(in srgb, var(--color-white) 6%, transparent) 100%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-dark) 54%, transparent) 0%,
      color-mix(in srgb, var(--color-dark-muted) 38%, transparent) 54%,
      color-mix(in srgb, var(--color-dark) 34%, transparent) 100%
    );

  box-shadow:
    0 18px 46px color-mix(in srgb, var(--color-dark) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 20%, transparent);

  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);

  overflow: hidden;

  transform: translateY(calc(var(--hotips-hero-progress) * -22px));
  opacity: calc(1 - (var(--hotips-hero-progress) * 0.18));

  transition:
    transform var(--duration-mid) linear,
    opacity var(--duration-mid) linear,
    background-color var(--duration-mid) var(--ease-standard),
    border-color var(--duration-mid) var(--ease-standard),
    box-shadow var(--duration-mid) var(--ease-standard);
}

.hotips-home-hero__panel::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 18%, transparent) 0%,
      color-mix(in srgb, var(--color-white) 5%, transparent) 34%,
      transparent 68%
    );
}

.hotips-home-hero__panel > *{
  position: relative;
  z-index: 2;
}

.hotips-home-hero__eyebrow{
  margin: var(--space-none) var(--space-none) var(--home-hero-eyebrow-margin-bottom);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: clamp(var(--font-size-sm), 0.9vw, var(--font-size-md));
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hotips-home-hero__title{
  margin: var(--space-none);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: clamp(22px, 3.1vw, 44px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hotips-home-hero__text{
  max-width: 46ch;
  margin: 14px var(--space-none) var(--space-none);

  color: color-mix(in srgb, var(--color-white) 86%, transparent);
  font-family: var(--font-body);
  font-size: clamp(var(--font-size-sm), 1vw, var(--font-size-lg));
  line-height: 1.45;
}

.hotips-home-hero__actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--home-hero-actions-gap);
  margin-top: var(--home-hero-actions-margin-top);
}

.hotips-home-hero__button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--home-hero-button-gap);

  min-height: var(--home-hero-button-min-height);
  padding: var(--home-hero-button-pad-y) var(--home-hero-button-pad-x);

  border-radius: var(--home-hero-button-radius);

  color: inherit;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.hotips-home-hero__button:hover,
.hotips-home-hero__button:focus-visible{
  transform: translateY(-1px);
  text-decoration: none;
  outline: none;
}

.hotips-home-hero__button--solid{
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: var(--border-thin);
  border-color: var(--button-primary-border);
  box-shadow: var(--shadow-sm);
}

.hotips-home-hero__button--solid:hover,
.hotips-home-hero__button--solid:focus-visible{
  background: var(--button-primary-bg-hover);
  color: var(--button-primary-text);
  border-color: var(--button-primary-border);
  box-shadow: var(--shadow-md);
}

.hotips-home-hero__button--ghost{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-dark-muted) 96%, transparent),
    color-mix(in srgb, var(--color-dark) 98%, transparent)
  );
  color: var(--color-white);
  border: var(--border-thin);
  border-color: var(--border-color-contrast);
  box-shadow: var(--shadow-md);
}

.hotips-home-hero__button--ghost:hover,
.hotips-home-hero__button--ghost:focus-visible{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-dark-muted) 100%, transparent),
    color-mix(in srgb, var(--color-dark) 100%, transparent)
  );
  color: var(--color-white);
  border-color: color-mix(in srgb, var(--color-accent) 42%, var(--border-color-contrast));
  box-shadow: var(--shadow-lg);
}

/* -------------------------
   HOME HERO SCROLL CUE
   ------------------------- */

.hotips-home-hero__scrollcue{
  position: absolute;
  left: 50%;
  bottom: var(--home-hero-scrollcue-bottom);
  z-index: 10;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--home-hero-scrollcue-gap);

  width: var(--home-hero-scrollcue-width);
  height: var(--home-hero-scrollcue-height);
  padding: var(--home-hero-scrollcue-pad-top) var(--space-none) var(--space-none);

  border: var(--border-thin);
  border-color: var(--border-color-contrast);
  border-radius: var(--home-hero-scrollcue-radius);

  background: var(--color-glass-dark);
  box-shadow: var(--shadow-lg);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;

  transform: translateX(-50%) translateY(calc(var(--hotips-hero-progress) * 8px));
  opacity: calc(1 - (var(--hotips-hero-progress) * 0.95));

  transition:
    opacity var(--duration-mid) linear,
    transform var(--duration-mid) linear,
    background-color var(--duration-mid) var(--ease-standard),
    border-color var(--duration-mid) var(--ease-standard);
}

.hotips-home-hero__scrollcue:hover,
.hotips-home-hero__scrollcue:focus-visible{
  background: var(--color-glass-dark-strong);
  border-color: color-mix(in srgb, var(--color-white) 82%, transparent);
  outline: none;
}

.hotips-home-hero__scrollcue-line{
  display: block;
  width: var(--home-hero-scrollcue-line-width);
  height: var(--home-hero-scrollcue-line-height);
  border-radius: var(--radius-pill);
  background: var(--color-glass-light-strong);
}

.hotips-home-hero__scrollcue-dot{
  display: block;
  width: var(--home-hero-scrollcue-dot-size);
  height: var(--home-hero-scrollcue-dot-size);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  animation: hotipsHomeHeroScrollCueDot 1.6s var(--ease-soft) infinite;
}

.hotips-home-hero__scrollcue::after{
  content: "\2193";
  display: block;
  margin-top: var(--home-hero-scrollcue-arrow-offset);
  color: var(--home-hero-scrollcue-arrow-color);
  font-family: var(--font-body);
  font-size: var(--home-hero-scrollcue-arrow-size);
  font-weight: 800;
  line-height: 1;
  animation: hotipsHomeHeroScrollCueArrow 1.6s var(--ease-soft) infinite;
}

@keyframes hotipsHomeHeroScrollCueDot{
  0%{ transform: translateY(0); opacity: 1; }
  50%{ transform: translateY(10px); opacity: 0.35; }
  100%{ transform: translateY(0); opacity: 1; }
}

@keyframes hotipsHomeHeroScrollCueArrow{
  0%{ transform: translateY(0); opacity: 0.95; }
  50%{ transform: translateY(6px); opacity: 0.42; }
  100%{ transform: translateY(0); opacity: 0.95; }
}

/* =========================================================
   24b. HOME TRANSITION STAGE
   - keeps the transition stage alive
   - keeps background image layers non-blocking
   - keeps featured carousel visible until past/complete
   - supports docked rail trigger states
   ========================================================= */

.hotips-home-transition{
  --home-transition-progress: 0;
  --home-transition-visual-progress: clamp(
    0,
    calc(var(--home-transition-progress) * var(--home-transition-visual-speed)),
    1
  );

  position: relative;
  min-height: var(--home-transition-stage-min-height);

  background: var(--home-transition-stage-bg);
  overflow: visible;
  isolation: isolate;
}

/* =========================================================
   24b. FEATURED CAROUSEL EXIT MOTION
   Zooms and fades the full featured carousel away
   once the docked rail stage begins.
   ========================================================= */

.hotips-home-transition .hotips-home-featured{
  transform-origin: top center;
  will-change: opacity, transform;
}

/* Main exit: big carousel gently lifts, shrinks and fades */
.hotips-home-transition.is-docked .hotips-home-featured{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(calc(var(--home-featured-shrink-lift) * -1))
    scale(var(--home-featured-shrink-final-scale));

  transition:
    opacity 0.9s var(--ease-soft),
    transform 0.9s var(--ease-soft),
    visibility 0s linear 0.9s;
}

/* Fully gone after the focus section starts taking over */
.hotips-home-transition.is-past-featured .hotips-home-featured,
.hotips-home-transition.is-complete .hotips-home-featured{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(calc(var(--home-featured-shrink-lift) * -1))
    scale(var(--home-featured-shrink-final-scale));
}

/* Keep the inner shell stable while parent handles the exit motion */
.hotips-home-transition.is-docked .hotips-home-featured__shell,
.hotips-home-transition.is-past-featured .hotips-home-featured__shell,
.hotips-home-transition.is-complete .hotips-home-featured__shell{
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* -------------------------
   BACKGROUND LAYER
   Reveals behind the two-side Choose Your Focus section.
   ------------------------- */

.hotips-home-transition__bg{
  position: sticky;
  top: var(--home-transition-sticky-top);
  z-index: var(--home-transition-bg-z);

  display: block;
  width: 100%;
  height: var(--home-transition-bg-height);
  margin-bottom: calc(var(--home-transition-bg-height) * -1);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;

  transition:
    opacity 0.9s var(--ease-soft),
    visibility 0s linear 0.9s;
}


.admin-bar .hotips-home-transition__bg{
  top: calc(var(--home-transition-sticky-top) + var(--topbar-admin-offset));
}

/* Show the background once the scroll transition reaches the docked/focus stage */
.hotips-home-transition.is-docked .hotips-home-transition__bg,
.hotips-home-transition.is-past-featured .hotips-home-transition__bg,
.hotips-home-transition.is-complete .hotips-home-transition__bg{
  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.9s var(--ease-soft),
    visibility 0s linear 0s;
}

/* Image layers */
.hotips-home-transition__bg-layer{
  position: absolute;
  inset: 0;
  z-index: 1;

  display: block;
  width: 100%;
  height: 100%;

  opacity: 0;
  visibility: visible;
  pointer-events: none;

  background-size: var(--home-transition-bg-size);
  background-position: var(--home-transition-bg-position);
  background-repeat: var(--home-transition-bg-repeat);

  transform: scale(
    calc(
      var(--home-transition-bg-scale-start) -
      (var(--home-transition-visual-progress) * var(--home-transition-bg-scale-loss))
    )
  );

  transition:
    opacity 0.9s var(--ease-soft),
    transform var(--duration-fast) linear;

  will-change: opacity, transform;
}

.hotips-home-transition__bg-layer--1{
  z-index: 1;
  background-image: var(--home-transition-bg-image-1);
}

.hotips-home-transition__bg-layer--2{
  z-index: 2;
  background-image: var(--home-transition-bg-image-2);
}

/* First background appears as featured rail docks */
.hotips-home-transition.is-docked .hotips-home-transition__bg-layer--1{
  opacity: 1;
}

/* First background fades out later */
.hotips-home-transition.is-past-featured .hotips-home-transition__bg-layer--1,
.hotips-home-transition.is-complete .hotips-home-transition__bg-layer--1{
  opacity: 0;
}

/* Second background appears closer to the two-side feature section */
.hotips-home-transition.is-past-featured .hotips-home-transition__bg-layer--2,
.hotips-home-transition.is-complete .hotips-home-transition__bg-layer--2{
  opacity: 1;
}

/* Overlay wash so the cards/text stay readable */
.hotips-home-transition__bg::before,
.hotips-home-transition__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hotips-home-transition__bg::before{
  background: var(--home-transition-bg-overlay);
  opacity: var(--home-transition-bg-overlay-opacity);
}

.hotips-home-transition__bg::after{
  background: color-mix(in srgb, var(--color-surface-muted) 100%, transparent);
  opacity: var(--home-transition-bg-wash-opacity);
}

/* -------------------------
   STICKY FEATURED HOLDER
   ------------------------- */

.hotips-home-transition__sticky{
  position: sticky;
  top: var(--home-transition-sticky-top);
  z-index: var(--home-transition-sticky-z);

  display: block;
  width: 100%;
  min-width: 0;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.admin-bar .hotips-home-transition__sticky{
  top: calc(var(--home-transition-sticky-top) + var(--topbar-admin-offset));
}

.hotips-home-transition.is-complete .hotips-home-transition__sticky,
.hotips-home-transition.is-past-featured .hotips-home-transition__sticky{
  z-index: var(--home-transition-sticky-z-complete);
}

/* -------------------------
   MAIN FEATURED CAROUSEL TRANSITION
   Final cleaned version:
   - carousel fades/slides in when transition activates
   - sticks while user scrolls
   - zooms/fades out gradually using JS progress variables
   ------------------------- */

.hotips-home-transition .hotips-home-featured{
  position: relative;
  z-index: 6;

  display: block;
  width: 100%;

  opacity: var(--home-featured-out-opacity);
  visibility: visible;
  pointer-events: auto;

  transform:
    translateY(var(--home-featured-out-y))
    scale(var(--home-featured-out-scale));

  transform-origin: var(--home-featured-shrink-origin);

  transition:
    opacity 0.14s linear,
    transform 0.14s linear;

  will-change: opacity, transform;
}

/* Default: carousel shell waits hidden until the transition starts */
.hotips-home-transition .hotips-home-featured__shell{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(42px) scale(0.985);

  transition:
    opacity 0.92s var(--ease-soft),
    transform 0.92s var(--ease-soft),
    visibility 0s linear 0.92s,
    box-shadow var(--duration-mid) var(--ease-standard);

  will-change: opacity, transform;
}

/* When the transition starts, carousel arrives */
.hotips-home-transition.is-active .hotips-home-featured__shell,
.hotips-home-transition .hotips-home-featured__shell.is-visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(0) scale(1);

  transition:
    opacity 0.92s var(--ease-soft),
    transform 0.92s var(--ease-soft),
    visibility 0s linear 0s,
    box-shadow var(--duration-mid) var(--ease-standard);
}

.hotips-home-transition.is-active .hotips-home-featured__shell,
.hotips-home-transition .hotips-home-featured__shell.is-visible{
  box-shadow: var(--home-transition-active-shadow);
}

/* Once almost gone, stop it catching clicks */
.hotips-home-transition.is-past-featured .hotips-home-featured,
.hotips-home-transition.is-complete .hotips-home-featured{
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .hotips-home-transition .hotips-home-featured{
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .hotips-home-transition .hotips-home-featured__shell{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
}

/* -------------------------
   IMAGE VISIBILITY SAFETY
   ------------------------- */

.hotips-home-featured .hotips-article-card__media,
.hotips-home-docked-featured .hotips-article-card__media{
  display: block;
  visibility: visible;
  opacity: 1;
}

.hotips-home-featured .hotips-article-card__media img,
.hotips-home-featured .hotips-article-card__media .wp-post-image,
.hotips-home-docked-featured .hotips-article-card__media img,
.hotips-home-docked-featured .hotips-article-card__media .wp-post-image{
  display: block;
  visibility: visible;
  opacity: 1;

  width: 100%;
  height: 100%;
  max-width: none;

  object-fit: cover;
  object-position: right center;
}

/* -------------------------
   REDUCED MOTION
   ------------------------- */

@media (prefers-reduced-motion: reduce){
  .hotips-home-transition .hotips-home-featured{
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* =========================================================
   24c. DOCKED / STICKY FEATURE RAIL
   ========================================================= */

.hotips-home-docked-featured{
  position: sticky;
  top: var(--home-docked-rail-top);
  z-index: var(--home-docked-rail-z);

  display: block;
  width: min(calc(100% - var(--home-shell-gutter)), var(--home-docked-rail-max-width));
  margin: var(--space-md) auto var(--space-none);

  overflow: visible;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);

  transition:
    opacity var(--home-docked-rail-reveal-duration) var(--ease-soft),
    transform var(--home-docked-rail-reveal-duration) var(--ease-soft),
    visibility 0s linear var(--home-docked-rail-reveal-duration);

  will-change: opacity, transform;
}

.admin-bar .hotips-home-docked-featured{
  top: calc(var(--home-docked-rail-top) + var(--topbar-admin-offset));
}

/* IMPORTANT:
   Docked rail reveal states.
   The rail exists in PHP, so this controls when it becomes visible.
*/

.hotips-home-transition.is-docked .hotips-home-docked-featured,
.hotips-home-transition.is-past-featured .hotips-home-docked-featured,
.hotips-home-transition.is-complete .hotips-home-docked-featured,
.hotips-home-docked-featured.is-visible{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;

  transition:
    opacity var(--home-docked-rail-reveal-duration) var(--ease-soft) var(--home-docked-rail-reveal-delay),
    transform var(--home-docked-rail-reveal-duration) var(--ease-soft) var(--home-docked-rail-reveal-delay),
    visibility 0s linear 0s !important;
}

.hotips-home-docked-featured__inner{
  display: grid;
  grid-template-columns: minmax(190px, var(--home-docked-label-min-width)) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--home-docked-rail-gap);

  width: 100%;
  min-width: 0;
  padding: var(--home-docked-rail-pad-y) var(--home-docked-rail-pad-x);

  background: var(--home-docked-rail-bg);
  border: var(--border-thin);
  border-color: var(--home-docked-rail-border);
  border-radius: var(--home-docked-rail-radius);
  box-shadow: var(--home-docked-rail-shadow);

  backdrop-filter: blur(var(--home-docked-rail-blur));
  -webkit-backdrop-filter: blur(var(--home-docked-rail-blur));

  overflow: hidden;
}

.hotips-home-docked-featured__label{
  display: flex;
  align-items: center;
  gap: var(--home-docked-label-gap);
  min-width: 0;
  padding: var(--space-none) var(--home-docked-label-pad-x);

  border-right: var(--border-thin);
  border-color: var(--border-color-soft);
}

.hotips-home-docked-featured__label-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 var(--home-docked-label-icon-size);
  width: var(--home-docked-label-icon-size);
  height: var(--home-docked-label-icon-size);

  color: var(--home-docked-label-icon-color);
  font-size: var(--font-size-3xl);
  line-height: 1;
}

.hotips-home-docked-featured__label-copy{
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}

.hotips-home-docked-featured__label-copy strong{
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: var(--home-docked-label-title-size);
  font-weight: 800;
  line-height: 1.15;
}

.hotips-home-docked-featured__label-copy span{
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--home-docked-label-text-size);
  font-weight: 500;
  line-height: 1.25;
}

.hotips-home-docked-featured__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--home-docked-card-min-width), var(--home-docked-card-max-width));
  gap: var(--home-docked-track-gap);

  min-width: 0;
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hotips-home-docked-featured__track::-webkit-scrollbar{
  display: none;
}

.hotips-home-docked-featured__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--home-docked-nav-gap);
  min-width: 0;
}

.hotips-home-docked-featured__navbutton{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--home-docked-nav-size);
  height: var(--home-docked-nav-size);
  min-width: var(--home-docked-nav-size);
  min-height: var(--home-docked-nav-size);

  padding: var(--space-none);
  margin: var(--space-none);

  border: var(--border-thin);
  border-color: var(--border-color-light);
  border-radius: var(--radius-pill);

  background: var(--color-surface);
  color: var(--color-heading);
  box-shadow: var(--shadow-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-xl);
  line-height: 1;

  cursor: pointer;

  transition:
    transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-docked-featured__navbutton:hover,
.hotips-home-docked-featured__navbutton:focus-visible{
  transform: translateY(-1px);
  background: var(--color-surface-soft);
  border-color: var(--border-color-strong);
  color: var(--color-link-hover);
  box-shadow: var(--shadow-md);
  outline: none;
}

/* -------------------------
   DOCKED ARTICLE CARDS
   ------------------------- */

   /* =========================================================
   DOCKED ARTICLE CARD AREA TOKENS
   - Makes docked cards colour themselves from Money / Wellness class
   - Works for PHP-rendered and Ajax-loaded cards if classes are present
   ========================================================= */

.hotips-home-docked-featured .hotips-article-card--dock{
  --dock-card-bg: color-mix(
    in srgb,
    var(--color-area-hub-money-band-a, var(--color-dark)) 88%,
    transparent
  );

  --dock-card-bg-b: color-mix(
    in srgb,
    var(--color-area-hub-money-band-b, var(--color-dark)) 74%,
    transparent
  );

  --dock-card-border: color-mix(
    in srgb,
    var(--color-white) 18%,
    transparent
  );

  --dock-card-accent: var(--color-tech-accent);
  --dock-card-title: var(--color-white);
  --dock-card-label: var(--color-tech-accent);
  --dock-card-media-bg: color-mix(
    in srgb,
    var(--color-area-hub-money-band-a, var(--color-dark)) 70%,
    var(--color-white) 8%
  );
}

.hotips-home-docked-featured .hotips-article-card--dock.hotips-article-card--area-wellness{
  --dock-card-bg: color-mix(
    in srgb,
    var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 88%,
    transparent
  );

  --dock-card-bg-b: color-mix(
    in srgb,
    var(--color-area-hub-wellness-band-b, var(--color-wellness-dark)) 74%,
    transparent
  );

  --dock-card-border: color-mix(
    in srgb,
    var(--color-wellness-line, rgba(88,119,96,0.22)) 54%,
    var(--color-white) 16%
  );

  --dock-card-accent: var(--color-wellness-accent);
  --dock-card-label: var(--color-wellness-accent);
  --dock-card-media-bg: color-mix(
    in srgb,
    var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 70%,
    var(--color-white) 8%
  );
}

.hotips-home-docked-featured .hotips-article-card--dock.hotips-article-card--area-money{
  --dock-card-bg: color-mix(
    in srgb,
    var(--color-area-hub-money-band-a, var(--color-dark)) 88%,
    transparent
  );

  --dock-card-bg-b: color-mix(
    in srgb,
    var(--color-area-hub-money-band-b, var(--color-dark)) 74%,
    transparent
  );

  --dock-card-border: color-mix(
    in srgb,
    var(--color-tech-accent) 28%,
    var(--color-white) 12%
  );

  --dock-card-accent: var(--color-tech-accent);
  --dock-card-label: var(--color-tech-accent);
  --dock-card-media-bg: color-mix(
    in srgb,
    var(--color-area-hub-money-band-a, var(--color-dark)) 70%,
    var(--color-white) 8%
  );
}

.hotips-home-docked-featured .hotips-article-card--dock{
  height: 100%;
  min-height: var(--article-card-dock-min-height);

  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;

  transform: none;
  overflow: hidden;
}

.hotips-home-docked-featured .hotips-article-card--dock:hover,
.hotips-home-docked-featured .hotips-article-card--dock:focus-within{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.hotips-home-docked-featured .hotips-article-card--dock:hover .hotips-article-card__link,
.hotips-home-docked-featured .hotips-article-card--dock:focus-within .hotips-article-card__link{
  border-color: color-mix(
    in srgb,
    var(--dock-card-accent) 58%,
    var(--color-white) 16%
  );

  transform: translateY(var(--motion-lift-xs, -1px));
  box-shadow: var(--shadow-md);
}

.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__link{
  display: grid;
  grid-template-columns: var(--article-card-dock-media-size) minmax(0, 1fr);
  align-items: center;
  gap: var(--article-card-dock-gap);

  min-height: var(--article-card-dock-min-height);
  padding: var(--article-card-dock-pad);

  border: var(--border-thin);
  border-color: var(--dock-card-border);
  border-radius: var(--radius-sm);

  background:
    radial-gradient(
      circle at 88% 8%,
      color-mix(in srgb, var(--color-white) 12%, transparent) 0%,
      transparent 36%
    ),
    linear-gradient(
      135deg,
      var(--dock-card-bg) 0%,
      var(--dock-card-bg-b) 100%
    );

  color: var(--dock-card-title);
  text-decoration: none;

  transition:
    transform var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    background var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-fast) var(--ease-soft);
}

.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__media{
  position: relative;
  display: block;

  width: var(--article-card-dock-media-size);
  height: var(--article-card-dock-media-size);
  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: var(--radius-xs);

  background: var(--dock-card-media-bg);
  box-shadow: var(--shadow-sm);
}

.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__media img,
.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__media .wp-post-image{
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: cover !important;
  object-position: right center !important;

  border-radius: inherit;
}

.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__image{
  object-position: right center;
}

.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  align-self: stretch;
  height: 100%;
  min-width: 0;

  gap: var(--space-xxs);
  padding: var(--space-none);

  text-align: left;
  transform: translateY(2px);
}

.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__label,
.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__title{
  width: 100%;
  text-align: left;
}

.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__label{
  display: inline-flex;
  min-height: auto;
  padding: var(--space-none);

  border: var(--border-none);
  border-radius: 0;
  background: transparent;

  color: var(--dock-card-label);
  font-size: var(--home-docked-card-label-size);
  font-weight: var(--home-docked-card-label-weight);
  line-height: 1;
  letter-spacing: 0.08em;
}

.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__title{
  display: -webkit-box;
  width: 100%;

  min-height: 2.24em;
  max-height: 2.24em;
  margin-top: 2px;

  overflow: hidden;

  color: var(--dock-card-title);

  font-family: var(--font-display);
  font-size: var(--article-card-dock-title-size);
  font-weight: var(--article-card-dock-title-weight);
  line-height: 1.12;
  text-align: left;

  -webkit-line-clamp: var(--article-card-dock-title-lines);
  -webkit-box-orient: vertical;
}

.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__excerpt,
.hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__meta{
  display: none;
}
/* =========================================================
   24d. MAIN FEATURED ARTICLE RAIL
   ========================================================= */

.hotips-home-featured{
  position: relative;
  z-index: 6;
  margin-top: var(--space-none);
  padding: var(--home-featured-pad-top) var(--space-none) var(--home-featured-pad-bottom);
  background: transparent;
}

.hotips-home-featured > .hotips-container{
  width: min(calc(100% - var(--home-featured-container-gutter)), var(--home-featured-container-max-width));
  max-width: none;
}

.hotips-home-featured__shell{
  position: relative;

  padding: var(--home-featured-shell-pad-y) var(--home-featured-shell-pad-x);

  border: var(--border-thin);
  border-color: var(--border-color-light);
  border-radius: var(--home-featured-shell-radius);

  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  box-shadow: var(--home-featured-shell-shadow);

  overflow: hidden;

  opacity: 0;
  transform: translateY(var(--space-2xl)) scale(0.988);

  transition:
    opacity 0.92s var(--ease-soft),
    transform 0.92s var(--ease-soft),
    box-shadow var(--duration-mid) var(--ease-standard);
}

.hotips-home-featured__shell.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hotips-home-featured__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--home-featured-head-gap);
  margin-bottom: var(--home-featured-head-margin-bottom);
}

.hotips-home-featured__intro{
  max-width: var(--home-featured-intro-max-width);
}

.hotips-home-featured__eyebrow{
  margin: var(--space-none) var(--space-none) var(--home-featured-eyebrow-margin-bottom);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hotips-home-featured__title{
  margin: var(--space-none);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--font-size-site-h2);
  line-height: var(--line-height-heading);
  letter-spacing: -0.02em;
}

.hotips-home-featured__text{
  margin: var(--home-featured-text-margin-top) var(--space-none) var(--space-none);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}

.hotips-home-featured__nav{
  display: flex;
  gap: var(--home-featured-nav-gap);
}

.hotips-home-featured__navbutton{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--home-featured-navbutton-size);
  height: var(--home-featured-navbutton-size);

  border: var(--border-thin);
  border-color: var(--border-color-light);
  border-radius: var(--home-featured-navbutton-radius);

  background: var(--color-surface-soft);
  color: var(--color-heading);
  box-shadow: var(--shadow-sm);

  font-size: var(--font-size-lg);
  cursor: pointer;

  transition:
    transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard);
}

.hotips-home-featured__navbutton:hover,
.hotips-home-featured__navbutton:focus-visible{
  transform: translateY(-1px);
  background: var(--color-surface);
  border-color: var(--border-color-strong);
  color: var(--color-link-hover);
  box-shadow: var(--shadow-md);
  outline: none;
}

.hotips-home-featured__navbutton.is-disabled,
.hotips-home-featured__navbutton:disabled{
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.hotips-home-featured__viewport{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--home-featured-item-min-width), var(--home-featured-item-max-width));
  gap: var(--home-featured-item-gap);

  overflow-x: auto;
  overflow-y: hidden;

  padding-top: var(--home-featured-viewport-pad-y);
  padding-bottom: var(--home-featured-viewport-pad-y);

  scroll-snap-type: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.hotips-home-featured__viewport::-webkit-scrollbar{
  display: none;
}

.hotips-home-featured__item{
  min-width: 0;
  height: 100%;
}

.hotips-home-featured__item > .hotips-article-card{
  height: 100%;
}

.hotips-home-featured__footer{
  display: flex;
  justify-content: center;
  margin-top: var(--home-featured-footer-margin-top);
}

.hotips-home-featured__viewall{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: var(--home-featured-viewall-min-height);
  padding: var(--space-none) var(--home-featured-viewall-pad-x);

  border: var(--border-thin);
  border-color: var(--border-color-light);
  border-radius: var(--home-featured-viewall-radius);

  background: var(--color-surface-soft);
  color: var(--color-heading);
  box-shadow: var(--shadow-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;

  transition:
    transform var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-featured__viewall:hover,
.hotips-home-featured__viewall:focus-visible{
  transform: translateY(-1px);
  background: var(--color-surface);
  border-color: var(--border-color-strong);
  color: var(--color-link-hover);
  box-shadow: var(--shadow-md);
  outline: none;
}

.hotips-home-featured__empty{
  padding: var(--home-featured-empty-pad);
  border: var(--border-thin);
  border-color: var(--border-color-light);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-body);
}

/* -------------------------
   FEATURED SCROLL CUE
   ------------------------- */

.hotips-home-featured__scrollcue-wrap{
  position: relative;
  z-index: var(--home-featured-scrollcue-z);

  display: flex;
  align-items: center;
  justify-content: center;

  width: min(calc(100% - var(--home-featured-container-gutter)), var(--home-featured-container-max-width));
  max-width: none;

  margin: var(--home-featured-scrollcue-wrap-offset) auto 0;
  padding-bottom: var(--home-featured-scrollcue-wrap-pad-bottom);

  pointer-events: none;
}

.hotips-home-featured__scrollcue{
  all: unset;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--home-featured-scrollcue-width);
  height: var(--home-featured-scrollcue-height);
  min-width: var(--home-featured-scrollcue-width);
  min-height: var(--home-featured-scrollcue-height);

  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--space-md) var(--space-none);

  border: var(--border-thin);
  border-color: var(--home-featured-scrollcue-border);
  border-radius: var(--radius-pill);

  background: var(--home-featured-scrollcue-bg);
  box-shadow: var(--shadow-md);

  backdrop-filter: blur(var(--home-featured-scrollcue-blur));
  -webkit-backdrop-filter: blur(var(--home-featured-scrollcue-blur));

  cursor: pointer;
  pointer-events: auto;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.hotips-home-featured__scrollcue:hover,
.hotips-home-featured__scrollcue:focus-visible{
  background: var(--home-featured-scrollcue-bg-hover);
  border-color: var(--home-featured-scrollcue-border-hover);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
  outline: none;
}

.hotips-home-featured__scrollcue-line{
  position: relative;
  display: block;
  width: var(--home-featured-scrollcue-line-width);
  height: var(--home-featured-scrollcue-line-height);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-dark) 62%, transparent);
  overflow: hidden;
}

.hotips-home-featured__scrollcue-dot{
  position: absolute;
  top: 0;
  left: 50%;

  display: block;
  width: var(--home-featured-scrollcue-dot-size);
  height: var(--home-featured-scrollcue-dot-size);

  border-radius: var(--radius-pill);
  background: var(--color-accent);

  transform: translateX(-50%);
  animation: hotipsFeaturedScrollCueDot 1.55s var(--ease-soft) infinite;
}

@keyframes hotipsFeaturedScrollCueDot{
  0%{
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  55%{
    transform: translateX(-50%) translateY(var(--home-featured-scrollcue-dot-travel));
    opacity: 0.35;
  }

  100%{
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

/* DEBUG / STABLE: keep carousel scroll cue visible */
.hotips-home-featured__scrollcue-wrap,
.hotips-home-transition .hotips-home-featured__scrollcue-wrap{
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: none !important;
}

.hotips-home-featured__scrollcue,
.hotips-home-transition .hotips-home-featured__scrollcue{
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =========================================================
   HOME FEATURED FINAL TUNING
   ========================================================= */

/* Remove the View All Articles button under carousel */
.hotips-home-featured__footer{
  display: none !important;
}

/* Tighter featured title */
.hotips-home-featured__title{
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 0.96;
  letter-spacing: -0.035em;
}

/* Keep carousel visible until the later dock point */
.hotips-home-transition .hotips-home-featured{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;

  transition:
    opacity 1.45s var(--ease-soft),
    transform 1.45s var(--ease-soft),
    visibility 0s linear 1.45s;
}

.hotips-home-transition.is-docked .hotips-home-featured,
.hotips-home-transition.is-past-featured .hotips-home-featured,
.hotips-home-transition.is-complete .hotips-home-featured{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(calc(var(--home-featured-shrink-lift) * -1))
    scale(var(--home-featured-shrink-final-scale));

  transform-origin: var(--home-featured-shrink-origin);
}

/* Make second background image fully visible by the time carousel leaves */
.hotips-home-transition.is-docked .hotips-home-transition__bg-layer--1,
.hotips-home-transition.is-past-featured .hotips-home-transition__bg-layer--1,
.hotips-home-transition.is-complete .hotips-home-transition__bg-layer--1{
  opacity: 0;
}

.hotips-home-transition.is-docked .hotips-home-transition__bg-layer--2,
.hotips-home-transition.is-past-featured .hotips-home-transition__bg-layer--2,
.hotips-home-transition.is-complete .hotips-home-transition__bg-layer--2{
  opacity: 1;
}

/* Remove the heavy fade wash once second image is active */
.hotips-home-transition.is-docked .hotips-home-transition__bg::after,
.hotips-home-transition.is-past-featured .hotips-home-transition__bg::after,
.hotips-home-transition.is-complete .hotips-home-transition__bg::after{
  opacity: 0;
}

/* Keep only a very soft readability overlay */
.hotips-home-transition.is-docked .hotips-home-transition__bg::before,
.hotips-home-transition.is-past-featured .hotips-home-transition__bg::before,
.hotips-home-transition.is-complete .hotips-home-transition__bg::before{
  opacity: 0.22;
}

/* =========================================================
   CHOOSE YOUR FOCUS FINAL COMPACT VERSION
   ========================================================= */

/* Remove old top tab rows and dropdown menus */
.hotips-home-intro-nav__tabs,
.hotips-home-intro-nav__cta-menu{
  display: none !important;
}

/* Smaller section heading */
.hotips-home-intro-nav__title{
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.035em;
}

/* Smaller panel titles */
.hotips-home-intro-nav__card-title{
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.hotips-home-intro-nav__card-text{
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

/* Smaller feature intro block inside each panel */
.hotips-home-intro-nav__feature--intro{
  grid-template-columns: minmax(150px, 0.78fr) minmax(0, 1.22fr);
  gap: var(--space-lg);
}

.hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-media{
  min-height: 160px;
  background:
    radial-gradient(
      circle at 70% 26%,
      color-mix(in srgb, var(--focus-accent-muted) 58%, transparent) 0%,
      transparent 44%
    ),
    color-mix(in srgb, var(--color-white) 74%, var(--focus-soft) 26%);
}

.hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-media img{
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: contain;
  object-position: center;
  padding: var(--space-xl);
}

.hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-copy{
  padding: var(--space-xl);
}

.hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-title{
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.08;
}

.hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-text{
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

/* Six small category tabs */
.hotips-home-intro-nav__quick-tabs{
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);

  width: 100%;
  min-width: 0;
}

.hotips-home-intro-nav__quick-tab{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);

  min-width: 0;
  min-height: 58px;
  padding: var(--space-sm);

  border: var(--border-thin);
  border-color: var(--focus-border);
  border-radius: var(--radius-sm);

  background: color-mix(in srgb, var(--color-white) 78%, var(--focus-soft) 22%);
  color: var(--focus-ink);

  text-decoration: none;
  box-shadow: none;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__quick-tab:hover,
.hotips-home-intro-nav__quick-tab:focus-visible{
  transform: translateY(-1px);
  background: var(--color-white);
  border-color: var(--focus-accent);
  color: var(--focus-ink);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.hotips-home-intro-nav__quick-tab-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border-radius: var(--radius-pill);
  background: var(--focus-button-bg);
  color: var(--focus-button-text);

  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 900;
  line-height: 1;

  overflow: hidden;
}

.hotips-home-intro-nav__quick-tab-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotips-home-intro-nav__quick-tab-copy{
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}

.hotips-home-intro-nav__quick-tab-copy strong{
  display: block;
  color: var(--focus-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 900;
  line-height: 1.12;
}

.hotips-home-intro-nav__quick-tab-copy small{
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xxs);
  font-weight: 500;
  line-height: 1.25;
}

@media (max-width: 900px){
  .hotips-home-intro-nav__title{
    font-size: clamp(25px, 6vw, 36px);
  }

  .hotips-home-intro-nav__card-title{
    font-size: clamp(22px, 5vw, 30px);
  }

  .hotips-home-intro-nav__feature--intro{
    grid-template-columns: 1fr;
  }

  .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px){
  .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   24e. CHOOSE YOUR FOCUS SECTION
   ========================================================= */

   

.hotips-home-intro-nav{
  position: relative;
  z-index: var(--home-transition-content-z);

  scroll-margin-top: var(--home-choose-focus-anchor-offset);

  padding: var(--home-intro-nav-pad-y) var(--space-none);

  background:
    radial-gradient(
      circle at 16% 12%,
      color-mix(in srgb, var(--color-dark) 80%, transparent) 0%,
      transparent 80%
    ),
    radial-gradient(
      circle at 84% 24%,
      color-mix(in srgb, var(--color-wellness-dark) 80%, transparent) 0%,
      transparent 80%
    ),
    var(--color-area-hub-wellness-panel-bg);
}

.hotips-home-transition .hotips-home-intro-nav{
  margin-top: var(--home-transition-intro-delay-space);
  background: transparent;
}

/* -------------------------
   CHOOSE YOUR FOCUS VISIBILITY
   Keep the two-sides balance section visible even if JS reveal fails.
   ------------------------- */

.hotips-home-intro-nav.js-hotips-reveal{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--home-intro-nav-reveal-duration) var(--ease-soft),
    transform var(--home-intro-nav-reveal-duration) var(--ease-soft);
}

.hotips-home-intro-nav.js-hotips-reveal.is-visible{
  opacity: 1;
  visibility: visible;
  transform: none;
}

.hotips-home-intro-nav > .hotips-container{
  width: min(calc(100% - var(--home-shell-gutter)), var(--home-shell-max-width));
  max-width: none;
}

.hotips-home-intro-nav__shell{
  padding: var(--home-intro-nav-shell-pad-y) var(--home-intro-nav-shell-pad-x);
  border: var(--border-none);
  border-radius: var(--home-intro-nav-shell-radius);
  background: transparent;
  box-shadow: var(--home-intro-nav-shell-shadow);
}

.hotips-home-intro-nav__intro{
  max-width: var(--home-intro-nav-intro-max-width);
  margin: var(--space-none) auto var(--home-intro-nav-intro-margin-bottom);
  text-align: center;
}

.hotips-home-intro-nav__eyebrow{
  margin: var(--space-none) var(--space-none) var(--space-md);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hotips-home-intro-nav__title{
  margin: var(--space-none);
  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: clamp(24px, 3.4vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.hotips-home-intro-nav__text{
  max-width: 62ch;
  margin: var(--space-lg) auto var(--space-none);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: clamp(var(--font-size-md), 1.05vw, var(--font-size-lg));
  line-height: 1.45;
}

.hotips-home-intro-nav__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--home-intro-nav-grid-gap);
  align-items: stretch;
}

.hotips-home-intro-nav__card{
  min-width: 0;
}

.hotips-home-intro-nav__card--money{
  --focus-accent: var(--home-focus-money-accent);
  --focus-accent-muted: var(--home-focus-money-accent-muted);
  --focus-soft: var(--home-focus-money-soft);
  --focus-soft-strong: var(--home-focus-money-soft-strong);
  --focus-ink: var(--home-focus-money-ink);

  --focus-border: color-mix(
    in srgb,
    var(--home-focus-money-accent) 80%,
    transparent
  );

  --focus-card-bg: linear-gradient(
    135deg,
    color-mix(in srgb, var(--home-focus-money-soft) 76%, transparent) 0%,
    color-mix(in srgb, var(--color-white) 84%, transparent) 52%,
    color-mix(in srgb, var(--home-focus-money-soft) 64%, transparent) 100%
  );

  --focus-line-art-opacity: 0.24;

  --focus-line-art-bg:
    linear-gradient(
      135deg,
      transparent 0 42%,
      color-mix(in srgb, var(--home-focus-money-accent) 24%, transparent) 42% 44%,
      transparent 44% 100%
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--home-focus-money-accent) 10%, transparent) 0 1px,
      transparent 1px 18px
    );

  --focus-button-bg: var(--home-focus-money-button-bg);
  --focus-button-bg-hover: var(--home-focus-money-button-bg-hover);
  --focus-button-border: var(--home-focus-money-button-border);
  --focus-button-text: var(--home-focus-money-button-text);
}

.hotips-home-intro-nav__card--wellness{
  /* Dedicated Choose Your Focus wellness card colours.
     Do not use --color-wellness-accent here. */

  --focus-accent: var(--color-wellness-grey-olive-dark);
  --focus-accent-muted: var(--color-wellness-grey-olive);

  --focus-soft: color-mix(
    in srgb,
    var(--color-wellness-grey-olive) 28%,
    var(--color-white) 72%
  );

  --focus-soft-strong: color-mix(
    in srgb,
    var(--color-wellness-grey-olive) 42%,
    var(--color-white) 58%
  );

  --focus-ink: var(--color-wellness-black-soft);

  --focus-border: color-mix(
    in srgb,
    var(--color-wellness-grey-olive-dark) 24%,
    transparent
  );

  --focus-card-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 88%, var(--color-wellness-grey-olive) 12%) 0%,
      color-mix(in srgb, var(--color-white) 94%, var(--color-wellness-grey-olive) 6%) 48%,
      color-mix(in srgb, var(--color-white) 82%, var(--color-wellness-grey-olive) 18%) 100%
    );

  --focus-line-art-opacity: 0.18;

  --focus-line-art-bg:
    linear-gradient(
      135deg,
      transparent 0 42%,
      color-mix(in srgb, var(--color-wellness-grey-olive-dark) 18%, transparent) 42% 44%,
      transparent 44% 100%
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-wellness-grey-olive-dark) 8%, transparent) 0 1px,
      transparent 1px 18px
    );

  --focus-button-bg: color-mix(
    in srgb,
    var(--color-wellness-grey-olive-dark) 76%,
    var(--color-dark) 24%
  );

  --focus-button-bg-hover: color-mix(
    in srgb,
    var(--color-wellness-grey-olive-dark) 88%,
    var(--color-dark) 12%
  );

  --focus-button-border: color-mix(
    in srgb,
    var(--color-wellness-grey-olive-dark) 52%,
    var(--border-color-light) 48%
  );

  --focus-button-text: var(--color-white);
}

.hotips-home-intro-nav__card-inner{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.4vw, 18px);
  min-height: 100%;

  padding: clamp(14px, 1.8vw, 22px);

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--focus-border) 72%, transparent);
  border-radius: var(--home-focus-card-radius);

  background: var(
    --focus-card-bg,
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--focus-soft) 94%, var(--color-white) 6%) 0%,
      color-mix(in srgb, var(--color-white) 96%, var(--focus-soft) 4%) 100%
    )
  );

  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
  overflow: hidden;

  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hotips-home-intro-nav__card-inner::after{
  content: "";
  position: absolute;
  top: var(--space-2xl);
  right: calc(var(--space-xl) * -1);
  width: 38%;
  height: 32%;
  pointer-events: none;
  opacity: var(--focus-line-art-opacity, 0.26);

  background: var(
    --focus-line-art-bg,
    linear-gradient(
      135deg,
      transparent 0 42%,
      color-mix(in srgb, var(--focus-accent) 34%, transparent) 42% 44%,
      transparent 44% 100%
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--focus-accent) 14%, transparent) 0 1px,
      transparent 1px 18px
    )
  );

  border-radius: var(--radius-lg);
  transform: rotate(-10deg);
}

/* -------------------------
   FOCUS CARD HEADER
   ------------------------- */

.hotips-home-intro-nav__card-head{
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: clamp(42px, 4.2vw, 56px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}

.hotips-home-intro-nav__card-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--home-focus-icon-size);
  height: var(--home-focus-icon-size);

  padding: 5px;

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--focus-accent) 42%, var(--color-white) 58%);
  border-radius: var(--home-focus-icon-radius);

  background: color-mix(in srgb, var(--color-white) 78%, var(--focus-soft) 22%);
  color: var(--focus-accent);

  box-shadow:
    0 5px 12px color-mix(in srgb, var(--focus-accent) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 72%, transparent);

  font-family: var(--font-body);
  font-size: var(--font-size-3xl);
  font-weight: 800;
  line-height: 1;

  overflow: hidden;
}

.hotips-home-intro-nav__card-icon img{
  display: block;

  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;

  object-fit: contain;
  object-position: center;

  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hotips-home-intro-nav__card-icon img{
  display: block;
  width: 72%;
  height: 72%;
  object-fit: contain;
  object-position: center;
}

.hotips-home-intro-nav__card-heading{
  min-width: 0;
}

.hotips-home-intro-nav__card-kicker{
  margin: var(--space-none) var(--space-none) var(--space-xs);
  color: var(--focus-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xxs);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hotips-home-intro-nav__card-title{
  margin: var(--space-none);
  color: var(--focus-ink);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hotips-home-intro-nav__card-text{
  margin: var(--space-xs) var(--space-none) var(--space-none);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  line-height: 1.35;
}

/* -------------------------
   OLD TOP TABS
   keep supported, but compact
   ------------------------- */

.hotips-home-intro-nav__tabs{
  position: relative;
  z-index: 2;

  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.hotips-home-intro-nav__tabs a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;
  padding: var(--space-none) var(--space-md);

  border: var(--border-thin);
  border-color: var(--focus-border);
  border-radius: var(--radius-pill);

  background: color-mix(in srgb, var(--color-white) 72%, var(--focus-soft) 28%);
  color: var(--focus-ink);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;

  box-shadow: none;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__tabs a:first-child,
.hotips-home-intro-nav__tabs a:hover,
.hotips-home-intro-nav__tabs a:focus-visible{
  background: var(--focus-button-bg);
  border-color: var(--focus-button-bg);
  color: var(--focus-button-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  outline: none;
}

/* =========================================================
   RESTORE: CHOOSE FOCUS INTRO + STARTER STRIP
   Paste after the focus card replacement block.
   ========================================================= */

/* -------------------------
   Compact intro header
   ------------------------- */

.hotips-home-intro-nav__intro{
  position: relative;
  z-index: 4;

  width: min(100%, 640px);
  margin: var(--space-none) auto clamp(18px, 2.4vw, 28px);
  padding: clamp(14px, 2vw, 20px) clamp(18px, 2.8vw, 30px);

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  border-radius: var(--radius-lg);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 88%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-soft) 78%, transparent) 100%
    );

  box-shadow: 0 12px 30px rgba(22,34,53,0.10);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  text-align: center;
}

.hotips-home-intro-nav__eyebrow{
  margin: var(--space-none) var(--space-none) var(--space-sm);

  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hotips-home-intro-nav__title{
  margin: var(--space-none);

  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;

  text-wrap: balance;
}

.hotips-home-intro-nav__text{
  max-width: 48ch;
  margin: var(--space-sm) auto var(--space-none);

  color: var(--color-dark-muted);
  font-family: var(--font-body);
  font-size: clamp(var(--font-size-sm), 0.95vw, var(--font-size-md));
  font-weight: 500;
  line-height: 1.35;
}


/* -------------------------
   Starter strip
   ------------------------- */

.hotips-home-intro-nav__starter{
  position: relative;
  z-index: 4;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 22px);

  width: 100%;
  min-width: 0;
  margin: clamp(18px, 2.5vw, 28px) var(--space-none) var(--space-none);
  padding: clamp(12px, 1.8vw, 18px) clamp(14px, 2.4vw, 24px);

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--color-dark) 12%, transparent);
  border-radius: var(--radius-md);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 86%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-muted) 74%, transparent) 100%
    );

  box-shadow: 0 10px 24px rgba(22,34,53,0.08);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hotips-home-intro-nav__starter-copy{
  display: flex;
  align-items: center;
  gap: var(--space-md);

  min-width: 0;
  color: var(--color-text);
}

.hotips-home-intro-nav__starter-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34px;
  width: 34px;
  height: 34px;

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--border-color-light));
  border-radius: var(--radius-pill);

  background: color-mix(in srgb, var(--color-accent-muted) 30%, var(--color-white) 70%);
  color: var(--color-dark);

  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 900;
  line-height: 1;
}

.hotips-home-intro-nav__starter-copy span:last-child{
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}

.hotips-home-intro-nav__starter-copy strong{
  display: block;

  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.08;
}

.hotips-home-intro-nav__starter-copy small{
  display: block;

  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 500;
  line-height: 1.25;
}

.hotips-home-intro-nav__starter-links{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);

  min-width: 0;
}

.hotips-home-intro-nav__starter-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  min-height: 32px;
  padding: var(--space-none) var(--space-md);

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--color-dark) 10%, transparent);
  border-radius: var(--radius-pill);

  background: color-mix(in srgb, var(--color-white) 88%, transparent);
  color: var(--color-dark);

  box-shadow: none;

  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__starter-links a:hover,
.hotips-home-intro-nav__starter-links a:focus-visible{
  transform: translateY(-1px);

  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--border-color-light));
  color: var(--color-link-hover);
  box-shadow: var(--shadow-sm);

  text-decoration: none;
  outline: none;
}

.hotips-home-intro-nav__starter-links a span{
  color: var(--color-accent);
  font-size: 1.1em;
  line-height: 1;
}


/* -------------------------
   Mobile compacting
   ------------------------- */

@media (max-width: 767px){
  .hotips-home-intro-nav__intro{
    width: 100%;
    margin-bottom: var(--space-xl);
    padding: var(--space-xl);
    border-radius: var(--radius-md);
  }

  .hotips-home-intro-nav__title{
    font-size: clamp(27px, 8vw, 36px);
  }

  .hotips-home-intro-nav__text{
    font-size: var(--font-size-sm);
  }

  .hotips-home-intro-nav__starter{
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-xl);
  }

  .hotips-home-intro-nav__starter-links{
    justify-content: flex-start;
  }

  .hotips-home-intro-nav__starter-links a{
    flex: 1 1 calc(50% - var(--space-sm));
  }
}

@media (max-width: 480px){
  .hotips-home-intro-nav__starter-links a{
    flex-basis: 100%;
  }
}

/* -------------------------
   INTRO IMAGE PANEL
   ------------------------- */

.hotips-home-intro-nav__feature{
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(12px, 1.6vw, 18px);

  overflow: hidden;

  border: var(--border-thin);
  border-color: var(--focus-border);
  border-radius: var(--home-focus-feature-radius);

  background: var(
    --focus-feature-bg,
    color-mix(in srgb, var(--color-white) 82%, var(--focus-soft) 18%)
  );
}

.hotips-home-intro-nav__feature-media{
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: clamp(130px, 13vw, 190px);

  overflow: hidden;

  background: var(--focus-feature-media-bg, var(--focus-soft-strong));
  text-decoration: none;
}

.hotips-home-intro-nav__feature-media img{
  width: 100%;
  height: 100%;
  min-height: clamp(130px, 13vw, 190px);

  object-fit: cover;
  object-position: center;

  transition: transform var(--duration-mid) var(--ease-soft);
}

.hotips-home-intro-nav__feature:hover .hotips-home-intro-nav__feature-media img{
  transform: scale(1.03);
}

.hotips-home-intro-nav__feature-copy{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
  min-width: 0;
  padding: clamp(12px, 1.5vw, 18px);
}

.hotips-home-intro-nav__feature-eyebrow{
  margin: var(--space-none);
  color: var(--focus-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xxs);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hotips-home-intro-nav__feature-title{
  margin: var(--space-none);
  color: var(--focus-ink);
  font-family: var(--font-display);
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.08;
}

.hotips-home-intro-nav__feature-title a{
  color: inherit;
  text-decoration: none;
}

.hotips-home-intro-nav__feature-title a:hover,
.hotips-home-intro-nav__feature-title a:focus{
  color: var(--focus-accent);
}

.hotips-home-intro-nav__feature-text{
  margin: var(--space-none);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  line-height: 1.42;
}

.hotips-home-intro-nav__feature-link{
  align-self: flex-start;
  margin-top: var(--space-xs);
  color: var(--focus-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: var(--space-xxs);
}

.hotips-home-intro-nav__feature-link:hover,
.hotips-home-intro-nav__feature-link:focus{
  color: var(--focus-accent);
}

/* -------------------------
   OLD MINI GRID
   keep supported
   ------------------------- */

.hotips-home-intro-nav__mini-grid{
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
}

.hotips-home-intro-nav__mini-grid a{
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-sm);
  row-gap: var(--space-xxs);
  align-items: center;

  min-width: 0;
  padding: var(--space-sm);

  border: var(--border-thin);
  border-color: var(--border-color-soft);
  border-radius: var(--radius-sm);

  background: color-mix(in srgb, var(--color-white) 76%, var(--focus-soft) 24%);
  color: var(--focus-ink);
  text-decoration: none;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__mini-grid a:hover,
.hotips-home-intro-nav__mini-grid a:focus-visible{
  transform: translateY(-1px);
  background: var(--color-white);
  border-color: var(--focus-border);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.hotips-home-intro-nav__mini-grid span,
.hotips-home-intro-nav__quick-tab-icon{
  grid-row: 1 / 3;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--home-focus-mini-icon-size);
  height: var(--home-focus-mini-icon-size);
  min-width: var(--home-focus-mini-icon-size);

  border: var(--border-width-thin) var(--border-style-standard)
    color-mix(in srgb, var(--focus-accent) 28%, transparent);

  border-radius: var(--radius-pill);

  background: color-mix(in srgb, var(--color-white) 84%, var(--focus-soft) 16%);
  color: var(--focus-accent);

  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 800;
  line-height: 1;

  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-white) 74%, transparent);
}

/* -------------------------
   NEW SIX QUICK TABS
   used by the replacement PHP cards
   ------------------------- */

.hotips-home-intro-nav__quick-tabs{
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.hotips-home-intro-nav__quick-tab{
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);

  min-width: 0;
  min-height: 54px;
  padding: var(--space-sm);

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--focus-border) 72%, var(--border-color-soft) 28%);
  border-radius: var(--radius-sm);

  background: color-mix(in srgb, var(--color-white) 78%, var(--focus-soft) 22%);
  color: var(--focus-ink);
  box-shadow: none;

  text-decoration: none;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__quick-tab:hover,
.hotips-home-intro-nav__quick-tab:focus-visible{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--color-white) 92%, var(--focus-soft) 8%);
  border-color: var(--focus-border);
  color: var(--focus-ink);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.hotips-home-intro-nav__quick-tab-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 30px;

  border: var(--border-thin);
  border-color: var(--focus-border);
  border-radius: var(--radius-pill);

  background: color-mix(in srgb, var(--color-white) 84%, var(--focus-soft) 16%);
  color: var(--focus-accent);

  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 900;
  line-height: 1;
}

.hotips-home-intro-nav__quick-tab-copy{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hotips-home-intro-nav__quick-tab-copy strong{
  display: block;
  color: var(--focus-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  line-height: 1.12;
}

.hotips-home-intro-nav__quick-tab-copy small{
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xxs);
  font-weight: 500;
  line-height: 1.22;
}

/* -------------------------
   RESPONSIVE FOCUS CARDS
   ------------------------- */

@media (max-width: 900px){
  .hotips-home-intro-nav__feature{
    grid-template-columns: 1fr;
  }

  .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hotips-home-intro-nav__mini-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px){
  .hotips-home-intro-nav__card-head{
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .hotips-home-intro-nav__card-icon{
    width: 40px;
    height: 40px;
  }

  .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: 1fr;
  }

  .hotips-home-intro-nav__mini-grid{
    grid-template-columns: 1fr;
  }
}

/* -------------------------
   FOCUS CTA DROPDOWN MENU
   Desktop: hover/focus opens.
   Mobile: JS click opens.
   ------------------------- */

.hotips-home-intro-nav__cta-menu{
  position: relative;
  z-index: 20;
  width: 100%;
  min-width: 0;
}

.hotips-home-intro-nav__cta{
  appearance: none;
  -webkit-appearance: none;

  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);

  width: 100%;
  min-height: var(--home-focus-cta-min-height);
  padding: var(--space-sm) var(--space-xl);

  border: var(--border-thin);
  border-color: var(--focus-button-border);
  border-radius: var(--home-focus-cta-radius);

  background: var(--focus-button-bg);
  color: var(--focus-button-text);
  box-shadow: var(--shadow-sm);

  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__cta:hover,
.hotips-home-intro-nav__cta:focus-visible,
.hotips-home-intro-nav__cta-menu.is-open .hotips-home-intro-nav__cta{
  background: var(--focus-button-bg-hover);
  border-color: var(--focus-button-border);
  color: var(--focus-button-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  outline: none;
}

.hotips-home-intro-nav__cta-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translateX(0) rotate(0deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__cta-menu:hover .hotips-home-intro-nav__cta-arrow,
.hotips-home-intro-nav__cta-menu:focus-within .hotips-home-intro-nav__cta-arrow,
.hotips-home-intro-nav__cta-menu.is-open .hotips-home-intro-nav__cta-arrow{
  transform: translateX(var(--space-xxs)) rotate(90deg);
}

/* dropdown panel */

.hotips-home-intro-nav__cta-dropdown{
  position: absolute;
  left: var(--space-none);
  right: var(--space-none);
  top: calc(100% + var(--space-sm));
  z-index: 30;

  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);

  width: 100%;
  min-width: 0;
  padding: var(--space-md);

  background: color-mix(in srgb, var(--color-white) 96%, var(--focus-soft) 4%);
  border: var(--border-thin);
  border-color: var(--focus-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(calc(var(--space-sm) * -1));
  transform-origin: top center;

  transition:
    opacity var(--duration-mid) var(--ease-soft),
    transform var(--duration-mid) var(--ease-soft),
    visibility 0s linear var(--duration-mid);
}

.hotips-home-intro-nav__cta-menu:hover .hotips-home-intro-nav__cta-dropdown,
.hotips-home-intro-nav__cta-menu:focus-within .hotips-home-intro-nav__cta-dropdown,
.hotips-home-intro-nav__cta-menu.is-open .hotips-home-intro-nav__cta-dropdown{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);

  transition:
    opacity var(--duration-mid) var(--ease-soft),
    transform var(--duration-mid) var(--ease-soft),
    visibility 0s linear 0s;
}

/* dropdown links */

.hotips-home-intro-nav__cta-dropdown a{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xxs);

  min-width: 0;
  padding: var(--space-md);

  background: color-mix(in srgb, var(--color-white) 82%, var(--focus-soft) 18%);
  border: var(--border-thin);
  border-color: var(--border-color-soft);
  border-radius: var(--radius-sm);

  color: var(--focus-ink);
  text-decoration: none;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__cta-dropdown a:hover,
.hotips-home-intro-nav__cta-dropdown a:focus-visible{
  background: var(--color-white);
  border-color: var(--focus-border);
  color: var(--focus-accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.hotips-home-intro-nav__cta-dropdown strong{
  display: block;
  min-width: 0;

  color: inherit;
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 900;
  line-height: 1.18;
}

.hotips-home-intro-nav__cta-dropdown small{
  display: block;
  min-width: 0;

  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 500;
  line-height: 1.35;
}

/* desktop: allow a slightly wider, prettier dropdown */
@media (min-width: 901px){
  .hotips-home-intro-nav__cta-dropdown{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hotips-home-intro-nav__cta-dropdown a:first-child{
    grid-column: 1 / -1;
  }
}

/* mobile/tablet: dropdown opens as normal page flow */
@media (max-width: 900px){
  .hotips-home-intro-nav__cta-dropdown{
    position: static;
    top: auto;
    left: auto;
    right: auto;

    max-height: 0;
    margin-top: var(--space-none);
    padding-top: var(--space-none);
    padding-bottom: var(--space-none);

    overflow: hidden;

    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: none;

    border-color: transparent;
    box-shadow: none;

    transition:
      max-height var(--duration-slow) var(--ease-soft),
      margin-top var(--duration-fast) var(--ease-standard),
      padding-top var(--duration-fast) var(--ease-standard),
      padding-bottom var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard),
      box-shadow var(--duration-fast) var(--ease-standard);
  }

  .hotips-home-intro-nav__cta-menu:hover .hotips-home-intro-nav__cta-dropdown,
  .hotips-home-intro-nav__cta-menu:focus-within .hotips-home-intro-nav__cta-dropdown{
    max-height: 0;
    margin-top: var(--space-none);
    padding-top: var(--space-none);
    padding-bottom: var(--space-none);
    pointer-events: none;
    border-color: transparent;
    box-shadow: none;
  }

  .hotips-home-intro-nav__cta-menu.is-open .hotips-home-intro-nav__cta-dropdown{
    max-height: 520px;
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);

    pointer-events: auto;
    border-color: var(--focus-border);
    box-shadow: var(--shadow-md);
  }
}
/* -------------------------
   CHOOSE YOUR FOCUS STARTER STRIP
   "Not sure where to start?"
   ------------------------- */

.hotips-home-intro-nav__starter{
  position: relative;
  z-index: 4;

  grid-column: 1 / -1;
  justify-self: stretch;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--home-starter-gap);

  width: 100%;
  min-width: 0;
  max-width: none;

  margin: var(--home-starter-margin-top) 0 0;
  padding: var(--home-starter-pad-y) var(--home-starter-pad-x);

  border: var(--border-thin);
  border-color: var(--border-color-light);
  border-radius: var(--home-starter-radius);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-surface) 92%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-muted) 88%, transparent) 100%
    );

  box-shadow: var(--shadow-sm);
}

.hotips-home-intro-nav__starter-copy{
  display: flex;
  align-items: center;
  gap: var(--space-md);

  min-width: 0;
  color: var(--color-text);
}

.hotips-home-intro-nav__starter-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34px;
  width: 34px;
  height: 34px;

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--color-accent) 38%, var(--border-color-light));
  border-radius: var(--radius-pill);

  background: color-mix(in srgb, var(--color-accent-muted) 28%, var(--color-surface) 72%);
  color: var(--color-dark);

  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 900;
  line-height: 1;
}

.hotips-home-intro-nav__starter-copy span:last-child{
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}

.hotips-home-intro-nav__starter-copy strong{
  display: block;

  color: var(--color-heading);
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

.hotips-home-intro-nav__starter-copy small{
  display: block;

  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 500;
  line-height: 1.35;
}

.hotips-home-intro-nav__starter-links{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);

  min-width: 0;
}

.hotips-home-intro-nav__starter-links a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  min-height: 32px;
  padding: 0 var(--space-md);

  border: var(--border-thin);
  border-color: var(--border-color-soft);
  border-radius: var(--radius-pill);

  background: var(--color-surface);
  color: var(--color-dark);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;

  box-shadow: none;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__starter-links a:hover,
.hotips-home-intro-nav__starter-links a:focus-visible{
  transform: translateY(-1px);

  background: var(--color-surface-soft);
  border-color: var(--border-color-strong);
  color: var(--color-link-hover);
  box-shadow: var(--shadow-sm);

  text-decoration: none;
  outline: none;
}

.hotips-home-intro-nav__starter-links a span{
  color: var(--color-accent);
  font-size: 1.1em;
  line-height: 1;
}

@media (max-width: 767px){
  .hotips-home-intro-nav__starter{
    flex-direction: column;
    align-items: stretch;
  }

  .hotips-home-intro-nav__starter-links{
    justify-content: flex-start;
  }

  .hotips-home-intro-nav__starter-links a{
    flex: 1 1 calc(50% - var(--space-sm));
  }
}

@media (max-width: 480px){
  .hotips-home-intro-nav__starter-links a{
    flex-basis: 100%;
  }
}
/* -------------------------
   FOCUS CTA DROPDOWN DESKTOP VISIBILITY FIX
   Safer version without :has().
   ------------------------- */

.hotips-home-transition,
.hotips-home-intro-nav,
.hotips-home-intro-nav__shell,
.hotips-home-intro-nav__grid,
.hotips-home-intro-nav__card,
.hotips-home-intro-nav__card-inner,
.hotips-home-intro-nav__cta-menu{
  overflow: visible;
}

.hotips-home-intro-nav__card{
  position: relative;
  z-index: 1;
}

.hotips-home-intro-nav__card:hover,
.hotips-home-intro-nav__card:focus-within{
  z-index: 80;
}

.hotips-home-intro-nav__cta-menu{
  position: relative;
  z-index: 90;
}

.hotips-home-intro-nav__cta-dropdown{
  z-index: 100;
}
/* =========================================================
   25. KIT / CONVERTKIT FORM
   ========================================================= */

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form{
  width: 100% !important;
  max-width: 100% !important;
  margin: var(--kit-form-margin-y) var(--space-none) !important;
  overflow: hidden !important;

  background: var(--color-surface) !important;
  border: var(--border-thin) !important;
  border-color: var(--border-color-light) !important;
  border-radius: var(--kit-form-radius) !important;
  box-shadow: var(--kit-form-shadow) !important;

  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-background{
  background: linear-gradient(
    180deg,
    var(--color-surface-soft) 0%,
    var(--color-surface-muted) 100%
  ) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-column{
  padding: var(--kit-form-column-pad) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form h1,
.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form h2,
.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form h3{
  color: var(--color-heading) !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  line-height: var(--line-height-heading) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form p,
.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form li{
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-fields{
  display: flex !important;
  flex-direction: column !important;
  gap: var(--kit-form-fields-gap) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-input{
  width: 100% !important;
  min-height: var(--kit-form-input-min-height) !important;
  padding: var(--space-none) var(--kit-form-input-pad-x) !important;

  background: var(--color-white) !important;
  border: var(--border-thin) !important;
  border-color: var(--border-color-light) !important;
  border-radius: var(--kit-form-input-radius) !important;
  box-shadow: none !important;

  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-md) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-input:focus{
  border-color: var(--border-color-strong) !important;
  outline: none !important;
  box-shadow: var(--kit-form-input-focus-ring) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-submit{
  width: 100% !important;
  min-height: var(--kit-form-submit-min-height) !important;

  background: var(--button-primary-bg) !important;
  border: var(--border-thin) !important;
  border-color: var(--button-primary-border) !important;
  border-radius: var(--kit-form-submit-radius) !important;
  box-shadow: var(--shadow-sm) !important;

  color: var(--button-primary-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-md) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;

  cursor: pointer !important;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-submit:hover,
.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-submit:focus{
  background: var(--button-primary-bg-hover) !important;
  border-color: var(--button-primary-border) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-submit span{
  color: inherit !important;
  font-family: inherit !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form .formkit-guarantee{
  color: var(--color-text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: var(--font-size-sm) !important;
}

.hotips-single-blog-content
.my-blog-builder__attached-module--shortcode_block
form.seva-form.formkit-form img{
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--kit-form-image-radius) !important;
}

@media (max-width: 767px){
  .hotips-single-blog-content
  .my-blog-builder__attached-module--shortcode_block
  form.seva-form.formkit-form{
    border-radius: var(--radius-md) !important;
  }

  .hotips-single-blog-content
  .my-blog-builder__attached-module--shortcode_block
  form.seva-form.formkit-form .formkit-column{
    padding: 24px !important;
  }
}

/* =========================================================
   26. RESPONSIVE
   ========================================================= */

   /* =========================================================
   24g. TABLET / MOBILE HOMEPAGE COMPACTING
   - stacks Money / Wellness earlier
   - tightens docked sticky feature rail
   ========================================================= */

/* -------------------------
   TABLET: stack focus cards and tighten sticky rail
   ------------------------- */

@media (max-width: 1180px){
  .hotips-home-intro-nav__grid{
    grid-template-columns: 1fr;
  }

  .hotips-home-docked-featured{
    width: min(calc(100% - 24px), var(--home-docked-rail-max-width));
  }

  .hotips-home-docked-featured__inner{
    grid-template-columns: minmax(130px, 170px) minmax(0, 1fr) auto;
    gap: var(--space-sm);
    padding: var(--space-xs);
  }

  .hotips-home-docked-featured__label{
    gap: var(--space-sm);
    padding: var(--space-none) var(--space-sm);
  }

  .hotips-home-docked-featured__label-icon{
    flex-basis: 26px;
    width: 26px;
    height: 26px;
    font-size: var(--font-size-xl);
  }

  .hotips-home-docked-featured__label-copy strong{
    font-size: var(--font-size-ui-sm);
    line-height: 1.05;
  }

  .hotips-home-docked-featured__label-copy span{
    display: none;
  }

  .hotips-home-docked-featured__track{
    grid-auto-columns: minmax(210px, 250px);
    gap: var(--space-sm);
  }

  .hotips-home-docked-featured__nav{
    gap: var(--space-xs);
  }

  .hotips-home-docked-featured__navbutton{
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: var(--font-size-md);
  }

  .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__link{
    grid-template-columns: 48px minmax(0, 1fr);
    min-height: 50px;
    padding: var(--space-xs);
  }

  .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__media{
    width: 48px;
    height: 48px;
  }

  .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__title{
    font-size: var(--font-size-ui-xs);
    line-height: 1.12;
  }
}


/* -------------------------
   SMALL TABLET / LARGE MOBILE
   Make sticky rail one compact row instead of a tall block
   ------------------------- */

@media (max-width: 900px){
  .hotips-home-docked-featured{
    position: sticky;
    top: calc(var(--topbar-height-mobile) + var(--space-sm));
    z-index: var(--home-docked-rail-z);

    width: calc(100% - 18px);
    margin-top: var(--space-sm);
  }

  .admin-bar .hotips-home-docked-featured{
    top: calc(var(--topbar-height-mobile) + 46px + var(--space-sm));
  }

  .hotips-home-docked-featured__inner{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xs);
    padding: var(--space-xs);
  }

  .hotips-home-docked-featured__label{
    grid-column: 1 / -1;
    min-height: 28px;
    padding: var(--space-none) var(--space-xs) var(--space-xs);
    border-right: 0;
    border-bottom: var(--border-thin);
    border-color: var(--border-color-soft);
  }

  .hotips-home-docked-featured__label-icon{
    display: none;
  }

  .hotips-home-docked-featured__label-copy strong{
    font-size: var(--font-size-ui-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .hotips-home-docked-featured__label-copy span{
    display: none;
  }

  .hotips-home-docked-featured__track{
    grid-auto-columns: minmax(205px, 72vw);
  }

  .hotips-home-docked-featured__navbutton{
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: var(--font-size-md);
  }
}

/* -------------------------
   MOBILE: hide nav buttons and keep latest rail slim
   ------------------------- */

@media (max-width: 767px){
  .hotips-home-docked-featured__inner{
    grid-template-columns: 1fr;
    padding: var(--space-xs);
  }

  .hotips-home-docked-featured__label{
    min-height: 24px;
    padding: var(--space-none) var(--space-xs) var(--space-xs);
  }

  .hotips-home-docked-featured__label-copy strong{
    font-size: var(--font-size-ui-xxs);
  }

  .hotips-home-docked-featured__track{
    grid-auto-columns: minmax(190px, 82vw);
    gap: var(--space-xs);
  }

  .hotips-home-docked-featured__nav{
    display: none;
  }

  .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__link{
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 46px;
    gap: var(--space-xs);
    padding: var(--space-xs);
  }

  .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__media{
    width: 42px;
    height: 42px;
  }

  .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__label{
    display: none;
  }
}

/* -------------------------
   BLOG LOOP GRID
   ------------------------- */

@media (min-width: 768px){
  .hotips-blog-looper__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px){
  .hotips-blog-looper__grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* -------------------------
   TABLET / SMALL DESKTOP
   ------------------------- */

@media (max-width: 1024px){

  .site-footer__main{
    grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(160px, 1fr));
  }

  .site-footer__brand{
    grid-column: 1 / -1;
    max-width: 100%;
  }

  .site-footer__text{
    max-width: 56ch;
  }

  .post-single .my-blog-builder__section-text h2{
    font-size: var(--font-size-content-h2);
  }

  .post-card.card1.card--h .card-title,
  .post-card.card1.card--h h3.card-title{
    font-size: var(--font-size-md) !important;
  }

  .hotips-single-blog-body{
    padding: var(--space-none) 24px 24px;
  }

  .hotips-single-blog-header{
    margin: var(--space-none) var(--space-none) 18px;
  }

  .hotips-single-blog-title{
    font-size: clamp(30px, 4.6vw, 40px);
    line-height: 1.08;
  }
}


/* -------------------------
   MEDIUM MOBILE / TABLET
   ------------------------- */

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

  .hotips-brandbar__inner{
    min-height: 76px;
    padding: 12px var(--space-none);
  }

  .hotips-brandbar__site-name{
    font-size: var(--font-size-4xl);
  }

  .hotips-header .custom-logo{
    max-height: 54px;
  }

  .hotips-home-grid__inner{
    gap: 20px;
  }

  .hotips-footer{
    margin-top: 28px;
  }

  .hotips-footer__topstrip-inner{
    justify-content: center;
    min-height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .hotips-footer__menu,
  .hotips-footer__menu-list{
    justify-content: center;
    width: 100%;
  }

  .hotips-footer__menu-list a{
    min-height: 34px;
    padding: var(--space-none) 12px;
    font-size: var(--font-size-sm);
  }

  .hotips-footer__meta{
    justify-content: center;
    width: 100%;
  }

  .hotips-footer__copyright{
    text-align: center;
  }

  .hotips-footer__bottomstrip-inner{
    min-height: 68px;
    padding: 10px var(--space-none);
  }

  .hotips-footer__logo-image{
    max-height: 48px;
  }
}

/* -------------------------
   PROMO IMAGE DISCLAIMER
   ------------------------- */

body .hotips-promo-wrap p.hotips-promo-image-disclaimer {
  font-size: 8px !important;
  line-height: 1.2 !important;
  padding: 2px 6px 3px !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* -------------------------
   AFFILIATE BANNER LEGACY GRID
   keep until new affiliate plugin CSS fully replaces it
   ------------------------- */

@media (min-width: 768px) and (max-width: 1024px){
  .affiliate-banners-shell{
    width: 100% !important;
    max-width: 100% !important;
  }

  .affiliate-banners-shell .affiliate-banners-wrap{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .affiliate-banners-shell .affiliate-banners-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .affiliate-banners-shell .affiliate-banner-item{
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  .affiliate-banners-shell .affiliate-banner-link,
  .affiliate-banners-shell .affiliate-banner-img{
    width: 100% !important;
    height: 100% !important;
  }

  .affiliate-banners-shell .affiliate-banner-img{
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

@media (max-width: 900px){
  :root{
    --home-choose-focus-anchor-offset: calc(
      var(--topbar-height-mobile) +
      var(--space-2xl)
    );
  }
}

/* -------------------------
   NARROW TABLET
   ------------------------- */

@media (max-width: 860px){
  .hotips-home-featured{
    padding-top: 42px;
    padding-bottom: 48px;
  }

  .hotips-home-featured > .hotips-container{
    width: calc(100% - 16px);
  }

  .hotips-home-featured__shell{
    padding: 18px var(--space-xl);
    border-radius: var(--radius-sm);
  }

  .hotips-home-featured__head{
    flex-direction: column;
    align-items: flex-start;
  }

  .hotips-home-featured__viewport{
    grid-auto-columns: minmax(250px, 82vw);
    gap: 12px;
  }
}

/* -------------------------
   MOBILE
   ------------------------- */

@media (max-width: 767px){
  .hotips-panel__body{
    padding: var(--space-xl);
  }

  .hotips-panel__header{
    padding: var(--space-xl) var(--space-xl) var(--space-none);
  }

  .hotips-panel__footer{
    padding: 12px var(--space-xl);
  }

  .hotips-panel__title{
    font-size: var(--font-size-content-h4);
  }

  .hotips-panel__meta{
    gap: var(--space-md);
  }

  .hotips-panel__meta-icon{
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .hotips-article-card{
    --article-card-footer-gap: var(--article-card-footer-gap-mobile);
    --article-card-footer-top-pad: var(--article-card-footer-top-pad-mobile);
    --article-card-meta-gap: var(--article-card-meta-gap-mobile);
    --article-card-ribbon-wrap-size: var(--article-card-ribbon-wrap-size-mobile);
    --article-card-ribbon-band-width: var(--article-card-ribbon-band-width-mobile);
    --article-card-ribbon-band-top: var(--article-card-ribbon-band-top-mobile);
    --article-card-ribbon-band-right: var(--article-card-ribbon-band-right-mobile);
    --article-card-ribbon-line-height: var(--article-card-ribbon-line-height-mobile);
    --article-card-ribbon-font-size: var(--article-card-ribbon-font-size-mobile);
  }

  .hotips-article-card__body{
    padding: var(--space-md);
  }

  .hotips-article-card__footer .hotips-panel__footer{
    padding: 8px var(--space-md);
  }

  .my-blog-new-ribbon,
  .my-blog-trending-ribbon{
    top: var(--article-card-ribbon-offset-mobile, -6px);
    right: var(--article-card-ribbon-offset-mobile, -6px);
    width: var(--article-card-ribbon-wrap-size-mobile);
    height: var(--article-card-ribbon-wrap-size-mobile);
  }

  .my-blog-new-ribbon span,
  .my-blog-trending-ribbon span{
    top: var(--article-card-ribbon-band-top-mobile);
    right: var(--article-card-ribbon-band-right-mobile);
    width: var(--article-card-ribbon-band-width-mobile);
    line-height: var(--article-card-ribbon-line-height-mobile);
    font-size: var(--article-card-ribbon-font-size-mobile);
  }

  .hotips-entry--single-blog .hotips-single-blog-featured-image--topper{
    margin: -20px -20px 18px;
  }

  .hotips-single-blog-featured-image{
    margin-bottom: 18px;
  }

  .hotips-single-blog-featured-image img{
    max-height: 300px;
  }

  .hotips-single-blog-featured-image--topper,
  .hotips-single-blog-featured-image--topper img{
    height: 138px;
  }

  .hotips-single-blog-featured-image--topper{
    margin-bottom: 18px;
  }

  .hotips-single-blog-topper-title{
    max-width: 72%;
    font-size: clamp(15px, 4.2vw, 20px);
    line-height: 1.05;
  }

  .hotips-single-blog-topper-meta{
    margin: -14px var(--space-none) 20px;
    padding: var(--space-none) 20px;
    gap: 8px var(--space-md);
  }

  .hotips-single-blog-body{
    padding: var(--space-none) 18px 22px;
  }

  .hotips-single-blog-header{
    margin: var(--space-none) var(--space-none) var(--space-xl);
  }

  .hotips-single-blog-title{
    font-size: clamp(24px, 6vw, 28px);
    line-height: 1.12;
  }

  .post-single .single-body,
  .post-single .single-body p,
  .post-single .single-body li{
    font-size: var(--font-size-body-mobile);
    line-height: 1.7;
  }

  .post-single .single-body h1{
    font-size: clamp(24px, 6vw, 30px);
  }

  .post-single .single-body h2{
    font-size: clamp(21px, 5.5vw, 25px);
  }

  .post-single .single-body h3{
    font-size: clamp(18px, 4.8vw, 21px);
  }

  .post-single .single-body h4{
    font-size: clamp(16px, 4.2vw, 18px);
  }

  .post-single .single-body h5,
  .post-single .single-body h6{
    font-size: var(--font-size-ui);
  }

  .post-single .BlogTit h1,
  .post-single .BlogTit .elementor-heading-title,
  .post-single .elementor-widget-theme-post-title.BlogTit h1,
  .post-single .elementor-widget-theme-post-title.BlogTit .elementor-heading-title{
    font-size: clamp(24px, 6vw, 30px) !important;
    line-height: 1.12 !important;
  }

  .post-single .BlogImageL{
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: var(--space-none) var(--space-none) 18px !important;
  }

  .my-blog-builder__intro{
    font-size: var(--font-size-body-mobile);
    line-height: 1.7;
  }

  .my-blog-builder__key-points-wrap,
  .my-blog-builder__key-points{
    width: 100%;
    max-width: 100%;
  }

  .my-blog-builder__key-points-wrap{
    margin: var(--space-none) var(--space-none) 24px;
    padding: var(--space-none);
  }

  .my-blog-builder__key-points li{
    line-height: 1.45;
  }

  .post-single .my-blog-builder__section{
    margin-bottom: 32px;
  }

  .post-single .my-blog-builder__section-image{
    float: none;
    max-width: 100%;
    margin: var(--space-none) var(--space-none) 18px;
  }

  .post-single .my-blog-builder__section-image img{
    max-width: 100%;
    max-height: none;
  }

  .post-single .my-blog-builder__section-text h2{
    font-size: clamp(21px, 5.5vw, 25px);
    line-height: 1.14;
  }

  .post-single .my-blog-builder__section-text p{
    font-size: var(--font-size-body-mobile);
    line-height: 1.7;
    text-align: left;
  }

  .my-blog-builder__final-word{
    margin-top: 30px;
    padding: 18px;
  }

  .my-blog-builder__final-word h3{
    font-size: clamp(18px, 4.8vw, 21px);
    line-height: 1.14;
  }

  .my-blog-builder__final-word p{
    font-size: var(--font-size-body-mobile);
    line-height: 1.7;
  }

  .my-blog-rate-post,
  .my-blog-rating-display{
    font-size: var(--font-size-ui-sm);
    padding: 7px var(--space-md);
  }

  .my-blog-rate-post__label,
  .my-blog-rate-post__note,
  .my-blog-rate-post__status,
  .my-blog-rating-display__text,
  .my-blog-rating-display__thanks,
  .post-view-count,
  .my-blog-trending-badge,
  .my-blog-rate-post__star,
  .my-blog-rating-display__star{
    font-size: var(--font-size-ui-sm);
  }

  .my-blog-trending-badge{
    padding: 7px var(--space-md);
  }

  .hotips-entry__content{
    padding: var(--space-none);
  }

  .hotips-bottom-region__inner{
    padding: 18px 20px;
  }

  .my-blog-builder__key-points-wrap .hotips-kp-panel{
    border-radius: var(--radius-md) !important;
  }

  .my-blog-builder__key-points-wrap .hotips-kp-panel__title{
    padding: 16px 18px 14px !important;
  }

  .my-blog-builder__key-points-wrap .hotips-kp-panel__content{
    margin: 12px !important;
    padding: 14px !important;
    border-radius: var(--radius-sm) !important;
  }

  .my-blog-builder__key-points-wrap .hotips-kp-panel__footer,
  .my-blog-builder__key-points-wrap .hotips-kp-panel__content-footer,
  .my-blog-builder__key-points-wrap .hotips-kp-panel .panel-footer{
    margin: -2px 12px 12px !important;
    padding: 12px 14px !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  }

  .blog-filter-bar{
    gap: var(--space-md);
  }

  .blog-filter-links--areas{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px var(--space-md) !important;
  }

  .blog-filter-links--areas .blog-filter-button{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 38px;
    padding: 6px 8px !important;
    font-size: var(--font-size-md) !important;
  }

  .blog-filter-links--areas .blog-filter-button__icon,
  .blog-filter-links--areas .blog-filter-button__icon img{
    width: 30px !important;
    height: 30px !important;
  }

  .blog-filter-links--sort{
    gap: var(--space-md) 14px !important;
  }

  .blog-filter-links--sort .blog-filter-sort{
    font-size: var(--font-size-md) !important;
  }

  .blog-active-filters{
    margin: var(--space-none) var(--space-none) var(--space-xs);
    padding: 7px var(--space-md);
    font-size: var(--font-size-ui-sm);
    line-height: 1.35;
  }

  .blog-filter-dropdown{
    max-width: 100%;
    margin-top: var(--space-none);
  }

  .blog-filter-dropdown select{
    min-height: 40px;
    font-size: var(--font-size-md);
  }

  .table-compare-score{
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-cut-sm);
  }

  .table-compare-score thead th,
  .table-compare-score tbody td{
    padding: 12px 14px;
    font-size: var(--font-size-md);
  }

  .table-compare-score th:first-child{
    width: auto;
    min-width: 160px;
  }

  .table-compare-score td,
  .table-compare-score th{
    white-space: nowrap;
  }

  .site-footer__inner{
    padding: clamp(28px, 7vw, 40px) 18px 22px;
  }

  .site-footer__main{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .site-footer__heading{
    margin-bottom: var(--space-md);
  }

  .site-footer__list li + li{
    margin-top: 8px;
  }

  .site-footer__bottom{
    gap: 12px;
    margin-top: 24px;
    padding-top: var(--space-xl);
  }

  .site-footer__meta,
  .site-footer__legal{
    width: 100%;
    gap: 8px 14px;
  }

  .site-footer__copyright,
  .site-footer__smallprint{
    width: 100%;
  }

  .best-picks-grid{
    grid-template-columns: 1fr;
  }

  .best-picks-heading{
    font-size: var(--font-size-xl);
  }

  body .back-to-top,
  body a.back-to-top,
  body button.back-to-top{
    right: var(--space-xl);
    bottom: var(--space-xl);
    width: 44px;
    height: 44px;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .hotips-blog-hero-rating-row{
    margin: 8px var(--space-none) var(--space-xl);
  }

  .hotips-blog-hero-rating-row .my-blog-rating-display,
  .hotips-blog-hero-rating-row .my-blog-rate-post{
    width: 100%;
    border-radius: var(--radius-lg);
  }

  .affiliate-banners-shell{
    width: 100% !important;
    max-width: 100% !important;
  }

  .affiliate-banners-shell .affiliate-banners-wrap{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .affiliate-banners-shell .affiliate-banners-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .affiliate-banners-shell .affiliate-banner-item{
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  .affiliate-banners-shell .affiliate-banner-link,
  .affiliate-banners-shell .affiliate-banner-img{
    width: 100% !important;
    height: 100% !important;
  }

  .affiliate-banners-shell .affiliate-banner-img{
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
}

/* -------------------------
   SMALL MOBILE
   ------------------------- */

@media (max-width: 640px){
  .hotips-home-featured{
    padding-top: 28px;
    padding-bottom: 46px;
  }

  .hotips-home-featured__title{
    font-size: clamp(22px, 7vw, 28px);
  }

  .hotips-home-featured__text{
    font-size: var(--font-size-ui);
  }

  .hotips-home-featured__navbutton{
    width: 38px;
    height: 38px;
    font-size: var(--font-size-md);
  }

  .hotips-home-featured__viewall{
    min-height: 40px;
    padding: var(--space-none) var(--space-xl);
    font-size: var(--font-size-ui);
  }
}
/* =========================================================
   FEATURED CAROUSEL EXIT — STICK, THEN SLOW ZOOM/FADE
   ========================================================= */

.hotips-home-transition .hotips-home-featured{
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transform-origin: var(--home-featured-shrink-origin);
  will-change: opacity, transform;
}

/* Keep shell stable; parent does the exit motion */
.hotips-home-transition .hotips-home-featured__shell,
.hotips-home-transition.is-active .hotips-home-featured__shell,
.hotips-home-featured__shell.is-visible{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Delayed, gradual exit */
.hotips-home-transition.is-docked .hotips-home-featured{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(calc(var(--home-featured-shrink-lift) * -1))
    scale(var(--home-featured-shrink-final-scale));

  transition:
    opacity 1.65s var(--ease-soft),
    transform 1.65s var(--ease-soft),
    visibility 0s linear 1.65s;
}

.hotips-home-transition.is-past-featured .hotips-home-featured,
.hotips-home-transition.is-complete .hotips-home-featured{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(calc(var(--home-featured-shrink-lift) * -1))
    scale(var(--home-featured-shrink-final-scale));
}

/* =========================================================
   HOME INTRO NAV - COMPACT INTRO
   ========================================================= */

.hotips-home-intro-nav__intro{
  max-width: 620px;
  margin: 0 auto 22px;
  text-align: center;
}

.hotips-home-intro-nav__eyebrow{
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hotips-home-intro-nav__title{
  margin: 0;
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  line-height: 1.1;
}

.hotips-home-intro-nav__text{
  margin: 8px auto 0;
  max-width: 560px;
  font-size: 0.98rem;
  line-height: 1.45;
}

/* =========================================================
   QUICK TABS - 6 SMALL TABS
   ========================================================= */

.hotips-home-intro-nav__quick-tabs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.hotips-home-intro-nav__quick-tab{
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 14px 16px;
  border: 1px solid var(--border-color, rgba(0,0,0,0.08));
  border-radius: 16px;
  background: var(--color-surface);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.hotips-home-intro-nav__quick-tab:hover,
.hotips-home-intro-nav__quick-tab:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  text-decoration: none;
}

.hotips-home-intro-nav__quick-tab-copy{
  display: block;
}

.hotips-home-intro-nav__quick-tab-copy strong{
  display: block;
  margin: 0 0 4px;
  font-size: 0.98rem;
  line-height: 1.15;
}

.hotips-home-intro-nav__quick-tab-copy small{
  display: block;
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

/* =========================================================
   CARD TITLE CLEANUP
   ========================================================= */

.hotips-home-intro-nav__card-kicker{
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hotips-home-intro-nav__card-title{
  margin: 0;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  line-height: 1.15;
}

.hotips-home-intro-nav__card-text{
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* =========================================================
   FEATURE INTRO BOX INSIDE EACH SIDE
   ========================================================= */

.hotips-home-intro-nav__feature-title{
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
}

.hotips-home-intro-nav__feature-text{
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px){
  .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .hotips-home-intro-nav__intro{
    margin-bottom: 18px;
  }

  .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: 1fr;
  }

  .hotips-home-intro-nav__quick-tab{
    min-height: 78px;
    padding: 12px 14px;
  }
}

/* =========================================================
   FINAL HOMEPAGE TRANSITION + COMPACT FOCUS FIXES
   ========================================================= */

/* Remove old category-button row if any old markup remains */
#hotips-home-choose-focus .hotips-home-intro-nav__tabs{
  display: none !important;
}

/* Remove carousel footer/view-all as a safety fallback */
.hotips-home-featured__footer{
  display: none !important;
}

/* Let JS control the feature carousel fade/zoom-out */
.hotips-home-transition .hotips-home-featured{
  display: block !important;
  opacity: var(--home-featured-out-opacity, 1) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform:
    translateY(var(--home-featured-out-y, 0px))
    scale(var(--home-featured-out-scale, 1)) !important;
  transform-origin: top center !important;
  transition:
    opacity 0.18s linear,
    transform 0.18s linear !important;
}

.hotips-home-transition .hotips-home-featured.is-hidden-by-scroll{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep the shell stable while the parent rail fades */
.hotips-home-transition .hotips-home-featured__shell,
.hotips-home-transition.is-active .hotips-home-featured__shell,
.hotips-home-featured__shell.is-visible{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Tighter featured article title spacing */
.hotips-home-featured__title{
  line-height: 0.96 !important;
}

.hotips-home-featured .hotips-article-card__title{
  line-height: 1.02 !important;
}

.hotips-home-featured .hotips-article-card__body{
  gap: var(--space-xs);
}

/* Background image should become clear once carousel has gone */
.hotips-home-transition{
  --home-transition-bg-overlay: linear-gradient(
    90deg,
    color-mix(in srgb, var(--color-surface-muted) 82%, transparent) 0%,
    color-mix(in srgb, var(--color-surface-muted) 48%, transparent) 42%,
    color-mix(in srgb, var(--color-surface-muted) 72%, transparent) 100%
  );

  --home-transition-bg-overlay-opacity: 1;
  --home-transition-bg-wash-opacity: 0.82;
}

.hotips-home-transition.is-past-featured,
.hotips-home-transition.is-complete{
  --home-transition-bg-overlay-opacity: 0.16;
  --home-transition-bg-wash-opacity: 0;
}

.hotips-home-transition.is-past-featured .hotips-home-transition__bg-layer--2,
.hotips-home-transition.is-complete .hotips-home-transition__bg-layer--2{
  opacity: 1 !important;
}

/* Compact the whole Choose Your Focus section */
#hotips-home-choose-focus{
  padding-top: clamp(26px, 3.6vw, 46px);
  padding-bottom: clamp(32px, 4vw, 54px);
}

#hotips-home-choose-focus .hotips-home-intro-nav__shell{
  padding-top: clamp(18px, 2.4vw, 30px);
  padding-bottom: clamp(18px, 2.4vw, 30px);
}

#hotips-home-choose-focus .hotips-home-intro-nav__intro{
  margin-bottom: clamp(16px, 2.2vw, 26px);
}

#hotips-home-choose-focus .hotips-home-intro-nav__eyebrow{
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-ui-xs);
  letter-spacing: 0.14em;
}

#hotips-home-choose-focus .hotips-home-intro-nav__title{
  font-size: clamp(26px, 3vw, 40px);
  line-height: 0.96;
}

#hotips-home-choose-focus .hotips-home-intro-nav__text{
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

/* Compact panel headers */
#hotips-home-choose-focus .hotips-home-intro-nav__card-inner{
  gap: var(--space-md);
  padding: clamp(14px, 1.6vw, 20px);
}

#hotips-home-choose-focus .hotips-home-intro-nav__card-head{
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-md);
}

#hotips-home-choose-focus .hotips-home-intro-nav__card-icon{
  width: 48px;
  height: 48px;
}

#hotips-home-choose-focus .hotips-home-intro-nav__card-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#hotips-home-choose-focus .hotips-home-intro-nav__card-kicker{
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-ui-xxs);
}

#hotips-home-choose-focus .hotips-home-intro-nav__card-title{
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
}

#hotips-home-choose-focus .hotips-home-intro-nav__card-text{
  margin-top: var(--space-xs);
  font-size: var(--font-size-ui-sm);
  line-height: 1.28;
}

/* Smaller intro feature panel inside each side */
#hotips-home-choose-focus .hotips-home-intro-nav__feature--intro{
  grid-template-columns: minmax(120px, 0.75fr) minmax(0, 1fr);
  gap: var(--space-md);
}

#hotips-home-choose-focus .hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-media,
#hotips-home-choose-focus .hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-media img{
  min-height: 132px;
}

#hotips-home-choose-focus .hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-copy{
  padding: var(--space-lg);
}

#hotips-home-choose-focus .hotips-home-intro-nav__feature-title{
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.05;
}

#hotips-home-choose-focus .hotips-home-intro-nav__feature-text{
  font-size: var(--font-size-ui-sm);
  line-height: 1.38;
}

/* New six-tab cards */
#hotips-home-choose-focus .hotips-home-intro-nav__quick-tabs{
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);

  width: 100%;
  min-width: 0;
}

#hotips-home-choose-focus .hotips-home-intro-nav__quick-tab{
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm);

  min-width: 0;
  min-height: 70px;
  padding: var(--space-sm);

  border: var(--border-thin);
  border-color: var(--border-color-soft);
  border-radius: var(--radius-sm);

  background: color-mix(in srgb, var(--color-white) 82%, var(--focus-soft) 18%);
  color: var(--focus-ink);
  text-decoration: none;
  box-shadow: none;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

#hotips-home-choose-focus .hotips-home-intro-nav__quick-tab:hover,
#hotips-home-choose-focus .hotips-home-intro-nav__quick-tab:focus-visible{
  transform: translateY(-1px);
  background: var(--color-white);
  border-color: var(--focus-border);
  color: var(--focus-accent);
  box-shadow: var(--shadow-sm);
  outline: none;
}

#hotips-home-choose-focus .hotips-home-intro-nav__quick-tab-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--focus-accent) 42%, var(--border-color-light));
  border-radius: var(--radius-pill);

  background: var(--color-white);
  color: var(--focus-accent);

  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 900;
  line-height: 1;
}

#hotips-home-choose-focus .hotips-home-intro-nav__quick-tab-copy{
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}

#hotips-home-choose-focus .hotips-home-intro-nav__quick-tab-copy strong{
  color: var(--focus-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-sm);
  font-weight: 900;
  line-height: 1.08;
}

#hotips-home-choose-focus .hotips-home-intro-nav__quick-tab-copy small{
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 500;
  line-height: 1.22;
}

/* Responsive tab layout */
@media (max-width: 900px){
  #hotips-home-choose-focus .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #hotips-home-choose-focus .hotips-home-intro-nav__feature--intro{
    grid-template-columns: 1fr;
  }

  #hotips-home-choose-focus .hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-media,
  #hotips-home-choose-focus .hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-media img{
    min-height: 150px;
  }
}

@media (max-width: 520px){
  #hotips-home-choose-focus .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HOME CHOOSE FOCUS — COMPACT PASS
   Makes the logo cards, intro panels, and six tabs smaller.
   ========================================================= */

.hotips-home-intro-nav{
  --home-intro-nav-pad-y: clamp(28px, 4vw, 48px);
  --home-intro-nav-shell-pad-y: clamp(18px, 2.4vw, 28px);
  --home-intro-nav-shell-pad-x: clamp(14px, 2.2vw, 26px);

  --home-intro-nav-intro-margin-bottom: clamp(18px, 2.6vw, 28px);

  --home-focus-card-pad: clamp(14px, 1.6vw, 20px);
  --home-focus-card-gap: 14px;

  --home-focus-head-gap: 12px;
  --home-focus-icon-size: 46px;

  --home-focus-feature-gap: 12px;
  --home-focus-feature-media-min-height: 132px;
  --home-focus-feature-pad: 14px;

  --home-focus-mini-grid-gap: 8px;
}

/* -------------------------
   Compact section header
   ------------------------- */

.hotips-home-intro-nav__eyebrow{
  margin-bottom: 6px;
  font-size: 9px;
  letter-spacing: 0.14em;
}

.hotips-home-intro-nav__title{
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hotips-home-intro-nav__text{
  max-width: 48ch;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
}

/* -------------------------
   Compact main cards
   ------------------------- */

.hotips-home-intro-nav__card-inner{
  gap: var(--home-focus-card-gap);
  padding: var(--home-focus-card-pad);
}

.hotips-home-intro-nav__card-head{
  grid-template-columns: var(--home-focus-icon-size) minmax(0, 1fr);
  gap: var(--home-focus-head-gap);
}

.hotips-home-intro-nav__card-icon{
  width: var(--home-focus-icon-size);
  height: var(--home-focus-icon-size);
  font-size: 18px;
  box-shadow: var(--shadow-sm);
}

.hotips-home-intro-nav__card-icon img{
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.hotips-home-intro-nav__card-kicker{
  margin-bottom: 3px;
  font-size: 8px;
  letter-spacing: 0.11em;
}

.hotips-home-intro-nav__card-title{
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.hotips-home-intro-nav__card-text{
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.3;
}

/* -------------------------
   Compact intro/image feature card
   ------------------------- */

.hotips-home-intro-nav__feature--intro{
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--home-focus-feature-gap);
}

.hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-media{
  min-height: var(--home-focus-feature-media-min-height);
}

.hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-media img{
  min-height: var(--home-focus-feature-media-min-height);
  object-fit: contain;
  padding: 18px;
}

.hotips-home-intro-nav__feature-copy{
  padding: var(--home-focus-feature-pad);
  gap: 6px;
}

.hotips-home-intro-nav__feature-eyebrow{
  font-size: 8px;
  letter-spacing: 0.1em;
}

.hotips-home-intro-nav__feature-title{
  font-size: clamp(16px, 1.25vw, 20px);
  line-height: 1.08;
}

.hotips-home-intro-nav__feature-text{
  font-size: 11px;
  line-height: 1.42;
}

/* -------------------------
   Six compact tabs
   ------------------------- */

.hotips-home-intro-nav__quick-tabs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.hotips-home-intro-nav__quick-tab{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;

  min-width: 0;
  min-height: 66px;
  padding: 9px 10px;

  border: var(--border-thin);
  border-color: var(--border-color-soft);
  border-radius: var(--radius-sm);

  background: color-mix(in srgb, var(--color-white) 82%, var(--focus-soft) 18%);
  color: var(--focus-ink);
  text-decoration: none;

  box-shadow: none;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__quick-tab:hover,
.hotips-home-intro-nav__quick-tab:focus-visible{
  background: var(--color-white);
  border-color: var(--focus-border);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.hotips-home-intro-nav__quick-tab-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--focus-accent) 36%, var(--border-color-light));
  border-radius: var(--radius-pill);

  background: var(--color-white);
  color: var(--focus-accent);

  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.hotips-home-intro-nav__quick-tab-copy{
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.hotips-home-intro-nav__quick-tab-copy strong{
  display: block;
  color: var(--focus-ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.12;
}

.hotips-home-intro-nav__quick-tab-copy small{
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.2;
}

/* -------------------------
   Tablet
   ------------------------- */

@media (max-width: 1180px){
  .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hotips-home-intro-nav__quick-tab{
    min-height: 62px;
  }
}

/* -------------------------
   Mobile
   ------------------------- */

@media (max-width: 767px){
  .hotips-home-intro-nav{
    --home-focus-feature-media-min-height: 112px;
  }

  .hotips-home-intro-nav__title{
    font-size: clamp(24px, 7vw, 32px);
  }

  .hotips-home-intro-nav__card-title{
    font-size: clamp(21px, 6vw, 28px);
  }

  .hotips-home-intro-nav__feature--intro{
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .hotips-home-intro-nav__feature--intro .hotips-home-intro-nav__feature-media img{
    padding: 14px;
  }

  .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .hotips-home-intro-nav__quick-tab{
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: 58px;
    padding: 8px;
  }

  .hotips-home-intro-nav__quick-tab-icon{
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .hotips-home-intro-nav__quick-tab-copy strong{
    font-size: 10px;
  }

  .hotips-home-intro-nav__quick-tab-copy small{
    font-size: 8px;
  }
}

/* =========================================================
   HOME SCROLL CUES — MATCH HERO STYLE
   Only two vertical scroll buttons:
   1. Hero scroll cue
   2. Featured carousel scroll cue
   ========================================================= */

/* Shared scroll cue shape/style */
.hotips-home-hero__scrollcue,
.hotips-home-featured__scrollcue{
  all: unset;

  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--home-hero-scrollcue-gap);

  width: var(--home-hero-scrollcue-width);
  height: var(--home-hero-scrollcue-height);
  min-width: var(--home-hero-scrollcue-width);
  min-height: var(--home-hero-scrollcue-height);

  box-sizing: border-box;
  padding: var(--home-hero-scrollcue-pad-top) var(--space-none) var(--space-none);

  border: var(--border-thin);
  border-color: var(--border-color-contrast);
  border-radius: var(--home-hero-scrollcue-radius);

  background: var(--color-glass-dark);
  box-shadow: var(--shadow-lg);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  cursor: pointer;

  transition:
    opacity var(--duration-mid) linear,
    transform var(--duration-mid) linear,
    background-color var(--duration-mid) var(--ease-standard),
    border-color var(--duration-mid) var(--ease-standard);
}

.hotips-home-hero__scrollcue:hover,
.hotips-home-hero__scrollcue:focus-visible,
.hotips-home-featured__scrollcue:hover,
.hotips-home-featured__scrollcue:focus-visible{
  background: var(--color-glass-dark-strong);
  border-color: color-mix(in srgb, var(--color-white) 82%, transparent);
  outline: none;
}

/* Shared inner line */
.hotips-home-hero__scrollcue-line,
.hotips-home-featured__scrollcue-line{
  position: relative;
  display: block;
  width: var(--home-hero-scrollcue-line-width);
  height: var(--home-hero-scrollcue-line-height);
  border-radius: var(--radius-pill);
  background: var(--color-glass-light-strong);
  overflow: visible;
}

/* Shared moving dot */
.hotips-home-hero__scrollcue-dot,
.hotips-home-featured__scrollcue-dot{
  display: block;
  width: var(--home-hero-scrollcue-dot-size);
  height: var(--home-hero-scrollcue-dot-size);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  animation: hotipsHomeHeroScrollCueDot 1.6s var(--ease-soft) infinite;
}

/* Shared arrow */
.hotips-home-hero__scrollcue::after,
.hotips-home-featured__scrollcue::after{
  content: "\2193";
  display: block;
  margin-top: var(--home-hero-scrollcue-arrow-offset);
  color: var(--home-hero-scrollcue-arrow-color);
  font-family: var(--font-body);
  font-size: var(--home-hero-scrollcue-arrow-size);
  font-weight: 800;
  line-height: 1;
  animation: hotipsHomeHeroScrollCueArrow 1.6s var(--ease-soft) infinite;
}

/* Featured cue wrapper keeps it centred */
.hotips-home-featured__scrollcue-wrap{
  display: flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hotips-home-featured__scrollcue{
  pointer-events: auto !important;
}


/* =========================================================
   HOME CHOOSE FOCUS INTRO — STRONGER READABILITY PANEL
   ========================================================= */

.hotips-home-intro-nav__intro{
  position: relative;
  z-index: 5;

  width: min(100%, 680px);
  margin: 0 auto 24px;
  padding: 18px 24px 20px;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 92%, transparent) 0%,
      color-mix(in srgb, var(--color-surface-muted) 86%, transparent) 100%
    );

  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--color-accent) 32%, var(--border-color-light));
  border-radius: var(--radius-md);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 82%, transparent);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  text-align: center;
}

.hotips-home-intro-nav__eyebrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin: 0 0 8px;
  padding: 5px 12px;

  background: color-mix(in srgb, var(--color-accent) 18%, var(--color-white) 82%);
  border: var(--border-thin);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--border-color-light));
  border-radius: var(--radius-pill);

  color: color-mix(in srgb, var(--color-accent) 82%, var(--color-dark) 18%);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hotips-home-intro-nav__title{
  margin: 0;

  color: var(--color-dark);
  font-size: clamp(28px, 3.1vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.035em;

  text-shadow: 0 1px 0 color-mix(in srgb, var(--color-white) 72%, transparent);
}

.hotips-home-intro-nav__text{
  max-width: 48ch;
  margin: 8px auto 0;

  color: color-mix(in srgb, var(--color-dark) 78%, var(--color-neutral) 22%);
  font-size: var(--font-size-md);
  font-weight: 600;
  line-height: 1.35;
}

/* Slightly tighten the gap below the intro */
.hotips-home-intro-nav__shell{
  padding-top: clamp(22px, 3vw, 34px);
}

/* Mobile */
@media (max-width: 767px){
  .hotips-home-intro-nav__intro{
    width: 100%;
    margin-bottom: 18px;
    padding: 16px 18px 18px;
    border-radius: var(--radius-sm);
  }

  .hotips-home-intro-nav__title{
    font-size: clamp(26px, 8vw, 34px);
  }

  .hotips-home-intro-nav__text{
    font-size: var(--font-size-sm);
  }
}

/* =========================================================
   FIX: PROTECT HOMEPAGE SCROLL / CAROUSEL BUTTONS
   Restores carousel arrows and keeps scroll cues independent
   from global/page-transition resets.
   ========================================================= */

/* -------------------------
   HERO + FEATURED VERTICAL SCROLL CUES
   ------------------------- */

.hotips-home-hero__scrollcue,
.hotips-home-featured__scrollcue{
  position: relative !important;

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--home-hero-scrollcue-gap) !important;

  width: var(--home-hero-scrollcue-width) !important;
  height: var(--home-hero-scrollcue-height) !important;
  min-width: var(--home-hero-scrollcue-width) !important;
  min-height: var(--home-hero-scrollcue-height) !important;

  box-sizing: border-box !important;
  margin: 0 !important;
  padding: var(--home-hero-scrollcue-pad-top) var(--space-none) var(--space-none) !important;

  border: var(--border-thin) !important;
  border-color: var(--border-color-contrast) !important;
  border-radius: var(--home-hero-scrollcue-radius) !important;

  background: var(--color-glass-dark) !important;
  color: var(--color-white) !important;
  box-shadow: var(--shadow-lg) !important;

  font-family: var(--font-body) !important;
  line-height: 1 !important;
  text-decoration: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  cursor: pointer !important;

  transition:
    background-color var(--duration-mid) var(--ease-standard),
    border-color var(--duration-mid) var(--ease-standard),
    box-shadow var(--duration-mid) var(--ease-standard),
    transform var(--duration-mid) var(--ease-standard),
    opacity var(--duration-mid) linear !important;
}

.hotips-home-hero__scrollcue{
  position: absolute !important;
  left: 50% !important;
  bottom: var(--home-hero-scrollcue-bottom) !important;
  z-index: 10 !important;
  transform: translateX(-50%) translateY(calc(var(--hotips-hero-progress, 0) * 8px)) !important;
  opacity: calc(1 - (var(--hotips-hero-progress, 0) * 0.95)) !important;
}

.hotips-home-featured__scrollcue-wrap{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;

  pointer-events: none !important;
}

.hotips-home-featured__scrollcue{
  pointer-events: auto !important;
}

.hotips-home-hero__scrollcue:hover,
.hotips-home-hero__scrollcue:focus-visible,
.hotips-home-featured__scrollcue:hover,
.hotips-home-featured__scrollcue:focus-visible{
  background: var(--color-glass-dark-strong) !important;
  border-color: color-mix(in srgb, var(--color-white) 82%, transparent) !important;
  box-shadow: var(--shadow-xl) !important;
  outline: none !important;
}

.hotips-home-hero__scrollcue-line,
.hotips-home-featured__scrollcue-line{
  position: relative !important;
  display: block !important;

  width: var(--home-hero-scrollcue-line-width) !important;
  height: var(--home-hero-scrollcue-line-height) !important;

  border-radius: var(--radius-pill) !important;
  background: var(--color-glass-light-strong) !important;

  overflow: visible !important;
}

.hotips-home-hero__scrollcue-dot,
.hotips-home-featured__scrollcue-dot{
  display: block !important;

  width: var(--home-hero-scrollcue-dot-size) !important;
  height: var(--home-hero-scrollcue-dot-size) !important;

  border-radius: var(--radius-pill) !important;
  background: var(--color-accent) !important;

  animation: hotipsHomeHeroScrollCueDot 1.6s var(--ease-soft) infinite !important;
}

.hotips-home-hero__scrollcue::after,
.hotips-home-featured__scrollcue::after{
  content: "\2193" !important;
  display: block !important;

  margin-top: var(--home-hero-scrollcue-arrow-offset) !important;

  color: var(--home-hero-scrollcue-arrow-color) !important;
  font-family: var(--font-body) !important;
  font-size: var(--home-hero-scrollcue-arrow-size) !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  animation: hotipsHomeHeroScrollCueArrow 1.6s var(--ease-soft) infinite !important;
}


/* -------------------------
   FEATURED CAROUSEL ARROW BUTTONS
   These are NOT vertical scroll cues.
   Do not use all: unset or all: revert-layer here.
   ------------------------- */

.hotips-home-featured__navbutton,
.hotips-home-docked-featured__navbutton{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;

  border: var(--border-thin) !important;
  border-color: var(--border-color-light) !important;
  border-radius: var(--radius-pill) !important;

  background: var(--color-surface) !important;
  color: var(--color-heading) !important;
  box-shadow: var(--shadow-sm) !important;

  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;

  cursor: pointer !important;

  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    opacity var(--duration-fast) var(--ease-standard) !important;
}

.hotips-home-featured__navbutton{
  width: var(--home-featured-navbutton-size) !important;
  height: var(--home-featured-navbutton-size) !important;
  min-width: var(--home-featured-navbutton-size) !important;
  min-height: var(--home-featured-navbutton-size) !important;
  font-size: var(--font-size-lg) !important;
}

.hotips-home-docked-featured__navbutton{
  width: var(--home-docked-nav-size) !important;
  height: var(--home-docked-nav-size) !important;
  min-width: var(--home-docked-nav-size) !important;
  min-height: var(--home-docked-nav-size) !important;
  font-size: var(--font-size-xl) !important;
}

.hotips-home-featured__navbutton:hover,
.hotips-home-featured__navbutton:focus-visible,
.hotips-home-docked-featured__navbutton:hover,
.hotips-home-docked-featured__navbutton:focus-visible{
  background: var(--color-surface-soft) !important;
  border-color: var(--border-color-strong) !important;
  color: var(--color-link-hover) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.hotips-home-featured__navbutton:disabled,
.hotips-home-featured__navbutton.is-disabled,
.hotips-home-docked-featured__navbutton:disabled,
.hotips-home-docked-featured__navbutton.is-disabled{
  opacity: 0.38 !important;
  pointer-events: none !important;
  cursor: default !important;
  transform: none !important;
  box-shadow: none !important;
}


/* -------------------------
   PAGE TRANSITION SAFETY
   Do not let page transition blur/reset these controls.
   ------------------------- */

body.hotips-page-transition-ready .hotips-home-hero__scrollcue,
body.hotips-page-transition-ready .hotips-home-featured__scrollcue,
body.hotips-page-transition-ready .hotips-home-featured__navbutton,
body.hotips-page-transition-ready .hotips-home-docked-featured__navbutton{
  filter: none !important;
  will-change: auto !important;
}

/* =========================================================
   PAGE TRANSITION — GLASSY WELLNESS WIPE
   Replace the current page transition block with this
   ========================================================= */

/* Keep header/footer stable */
body.hotips-page-transition-ready .hotips-header,
body.hotips-page-transition-ready .hotips-brandbar,
body.hotips-page-transition-ready .hotips-footer,
body.hotips-page-transition-ready .back-to-top{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

/* Main page shell gets only a tiny movement */
body.hotips-page-transition-ready .hotips-home-hero,
body.hotips-page-transition-ready .hotips-home-transition,
body.hotips-page-transition-ready .hotips-page-shell,
body.hotips-page-transition-ready .hotips-content-shell,
body.hotips-page-transition-ready main,
body.hotips-page-transition-ready .site-main{
  transition:
    opacity 260ms ease,
    transform 260ms ease !important;
}

body.hotips-page-transition-ready.hotips-page-is-leaving .hotips-home-hero,
body.hotips-page-transition-ready.hotips-page-is-leaving .hotips-home-transition,
body.hotips-page-transition-ready.hotips-page-is-leaving .hotips-page-shell,
body.hotips-page-transition-ready.hotips-page-is-leaving .hotips-content-shell,
body.hotips-page-transition-ready.hotips-page-is-leaving main,
body.hotips-page-transition-ready.hotips-page-is-leaving .site-main{
  opacity: 0.98 !important;
  transform: translateY(-2px) scale(0.9985) !important;
}

/* Overlay shell */
.hotips-page-transition-overlay{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  display: block !important;

  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
}

/* Main glass wipe */
.hotips-page-transition-overlay::before{
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -25%;
  right: -25%;

  background: var(--hotips-page-wipe-tint);
  backdrop-filter: blur(var(--hotips-page-wipe-blur)) saturate(var(--hotips-page-wipe-saturate));
  -webkit-backdrop-filter: blur(var(--hotips-page-wipe-blur)) saturate(var(--hotips-page-wipe-saturate));

  box-shadow:
    0 0 28px rgba(79, 95, 47, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.18);

  opacity: 0.92;
  transform: translateX(-125%) skewX(-12deg);
  transform-origin: left center;

  transition:
    transform var(--hotips-page-wipe-speed) var(--hotips-page-wipe-ease),
    opacity 320ms ease;

  will-change: transform, opacity;
}

/* Soft highlight / sheen */
.hotips-page-transition-overlay::after{
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -25%;
  right: -25%;

  background: var(--hotips-page-wipe-sheen);
  backdrop-filter: blur(calc(var(--hotips-page-wipe-blur) * 0.65));
  -webkit-backdrop-filter: blur(calc(var(--hotips-page-wipe-blur) * 0.65));

  opacity: 0.70;
  transform: translateX(-135%) skewX(-12deg);
  transform-origin: left center;

  transition:
    transform calc(var(--hotips-page-wipe-speed) + 120ms) var(--hotips-page-wipe-ease),
    opacity 360ms ease;

  will-change: transform, opacity;
}

/* Exit page: wipe sweeps in */
body.hotips-page-is-leaving .hotips-page-transition-overlay::before{
  transform: translateX(0) skewX(-12deg);
  opacity: 0.95;
}

body.hotips-page-is-leaving .hotips-page-transition-overlay::after{
  transform: translateX(0) skewX(-12deg);
  opacity: 0.78;
}

/* New internal page starts covered */
html.hotips-page-from-internal-early .hotips-page-transition-overlay::before,
body.hotips-page-from-internal .hotips-page-transition-overlay::before{
  transform: translateX(0) skewX(-12deg);
  opacity: 0.95;
}

html.hotips-page-from-internal-early .hotips-page-transition-overlay::after,
body.hotips-page-from-internal .hotips-page-transition-overlay::after{
  transform: translateX(0) skewX(-12deg);
  opacity: 0.78;
}

/* Entering page: wipe slides away and gently fades */
body.hotips-page-has-entered .hotips-page-transition-overlay::before{
  transform: translateX(125%) skewX(-12deg);
  opacity: 0;
  transition:
    transform 620ms var(--hotips-page-wipe-ease),
    opacity 420ms ease;
}

body.hotips-page-has-entered .hotips-page-transition-overlay::after{
  transform: translateX(140%) skewX(-12deg);
  opacity: 0;
  transition:
    transform 720ms var(--hotips-page-wipe-ease),
    opacity 460ms ease;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hotips-page-transition-overlay{
    display: none !important;
  }

  body.hotips-page-transition-ready .hotips-home-hero,
  body.hotips-page-transition-ready .hotips-home-transition,
  body.hotips-page-transition-ready .hotips-page-shell,
  body.hotips-page-transition-ready .hotips-content-shell,
  body.hotips-page-transition-ready main,
  body.hotips-page-transition-ready .site-main{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   02. MONEY TAXONOMY MAPPING
   Adjust selectors if your exact body classes differ.
   ========================================================= */

body.tax-my_blog_content_area.term-money-growth,
body.tax-my_blog_content_area.term-email-growth,
body.tax-my_blog_content_area.term-funnels-automation,
body.tax-my_blog_content_area.term-sell-online,
body.tax-my_blog_content_area.term-website-growth,
body.tax-my_blog_content_area.term-creator-tools,
body.tax-my_blog_content_area.term-creator-gear,
body.tax-my_blog_content_area-money-growth,
body.term-money-growth,
body.term-email-growth,
body.term-funnels-automation,
body.term-sell-online,
body.term-website-growth,
body.term-creator-tools,
body.term-creator-gear,
.hotips-area-hub--money,
.hotips-section-money{
  --hotips-brandbar-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-area-hub-money-panel-soft-bg) 72%, white 28%) 0%,
      color-mix(in srgb, var(--color-area-hub-money-page-bg) 82%, white 18%) 100%
    );

  --hotips-brandbar-border: var(--color-area-hub-money-border);
  --hotips-brandbar-text: var(--color-area-hub-money-text);
  --hotips-brandbar-text-soft: var(--color-area-hub-money-text-muted);
}

/* =========================================================
   03. WELLNESS TAXONOMY MAPPING
   ========================================================= */

body.tax-my_blog_content_area.term-wellness,
body.tax-my_blog_content_area.term-balanced-living,
body.tax-my_blog_content_area.term-healthy-home-work,
body.tax-my_blog_content_area.term-digital-calm,
body.tax-my_blog_content_area.term-gentle-productivity,
body.tax-my_blog_content_area.term-everyday-energy,
body.tax-my_blog_content_area.term-lighter-systems,
body.term-wellness,
body.term-balanced-living,
body.term-healthy-home-work,
body.term-digital-calm,
body.term-gentle-productivity,
body.term-everyday-energy,
body.term-lighter-systems,
.hotips-area-hub--wellness,
.hotips-section-wellness{
  --hotips-brandbar-bg:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-area-hub-wellness-panel-soft-bg) 76%, white 24%) 0%,
      color-mix(in srgb, var(--color-area-hub-wellness-page-bg) 84%, white 16%) 100%
    );

  --hotips-brandbar-border: var(--color-area-hub-wellness-border);
  --hotips-brandbar-text: var(--color-area-hub-wellness-text);
  --hotips-brandbar-text-soft: var(--color-area-hub-wellness-text-muted);
}

/* Apply the remaining brandbar tokens. */
.hotips-header .hotips-brandbar{
  background: var(--hotips-brandbar-bg);
  border-bottom: 1px solid var(--hotips-brandbar-border);
  color: var(--hotips-brandbar-text);
}

.hotips-header .hotips-brandbar,
.hotips-header .hotips-brandbar a{
  color: var(--hotips-brandbar-text);
}

.hotips-header .hotips-brandbar .menu-item > a:hover,
.hotips-header .hotips-brandbar .menu-item > a:focus,
.hotips-header .hotips-brandbar a:hover,
.hotips-header .hotips-brandbar a:focus{
  color: var(--hotips-brandbar-text-soft);
}


body.hotips-site-theme--money .hotips-brandbar .current-menu-item > a,
body.hotips-site-theme--money .hotips-brandbar .current_page_item > a,
body.hotips-site-theme--wellness .hotips-brandbar .current-menu-item > a,
body.hotips-site-theme--wellness .hotips-brandbar .current_page_item > a{
  background: color-mix(in srgb, var(--color-white) 18%, transparent) !important;
  color: var(--color-white) !important;
}






/* =========================================================
   MYHOTIPS HOME + BOTTOM REGION SYSTEM
   Single point of truth
   - Homepage hub-start background
   - Hero scroll cue
   - Docked/sticky feature rail cards
   - Bottom discovery carousel
   - Visible scrollbar
   - No drag-scroll styling
   ========================================================= */


/* =========================================================
   01. SHARED TOKENS
   ========================================================= */

:root{
  /* Homepage hub background */
  --hotips-home-hub-bg-size: 100% auto;
  --hotips-home-hub-bg-position: top center;
  --hotips-home-hub-bg-repeat: repeat-y;

  --hotips-home-hub-blend-top: rgba(255,255,255,0.98);
  --hotips-home-hub-blend-soft: rgba(255,255,255,0.76);
  --hotips-home-hub-blend-mid: rgba(255,255,255,0.18);
  --hotips-home-hub-blend-clear: rgba(255,255,255,0);

  /* Hero scroll cue */
  --hotips-hero-cue-width: 44px;
  --hotips-hero-cue-height: 68px;
  --hotips-hero-cue-bottom: clamp(60px, 8vh, 110px);
  --hotips-hero-cue-line-width: 3px;
  --hotips-hero-cue-line-height: 34px;
  --hotips-hero-cue-dot-size: 8px;

  /* Docked rail */
  --hotips-dock-money-deep: var(--color-area-hub-money-band-a, var(--color-dark));
  --hotips-dock-money-mid: var(--color-area-hub-money-band-b, var(--color-dark-muted));
  --hotips-dock-money-text: var(--color-area-hub-money-text, var(--color-dark));

  --hotips-dock-wellness-deep: var(--color-area-hub-wellness-band-a, var(--color-wellness-olive-dark));
  --hotips-dock-wellness-mid: var(--color-area-hub-wellness-band-b, var(--color-wellness-olive));
  --hotips-dock-wellness-text: var(--color-area-hub-wellness-text, var(--color-wellness-black-soft));

  /* Bottom discovery */
  --hotips-bottom-discovery-pad-top: clamp(16px, 2vw, 26px);
  --hotips-bottom-discovery-pad-bottom: clamp(24px, 3vw, 38px);
  --hotips-bottom-discovery-card-width-min: 220px;
  --hotips-bottom-discovery-card-width-max: 252px;
  --hotips-bottom-discovery-card-height: 220px;
  --hotips-bottom-discovery-media-height: 78px;
}


/* =========================================================
   02. HOME HUB BACKGROUND
   ========================================================= */

.hotips-home-transition--hub-start{
  position: relative;
  isolation: isolate;
  margin-bottom: 0 !important;
  padding-bottom: clamp(8px, 1.4vw, 18px) !important;
  background: var(--color-white, #ffffff) !important;
}

.hotips-home-transition--hub-start .hotips-home-intro-nav{
  margin-bottom: 0 !important;
  padding-bottom: clamp(10px, 1.6vw, 20px) !important;
}

/* Background holder behind homepage hub content */
.hotips-home-transition--hub-start .hotips-home-transition__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;

  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  margin-bottom: 0 !important;

  opacity: 1 !important;
  visibility: visible !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Background layers */
.hotips-home-transition--hub-start .hotips-home-transition__bg-layer{
  background-size: var(--hotips-home-hub-bg-size) !important;
  background-position: var(--hotips-home-hub-bg-position) !important;
  background-repeat: var(--hotips-home-hub-bg-repeat) !important;

  transform: none !important;
  visibility: visible !important;
  pointer-events: none !important;
}

/* Hide BG1 */
.hotips-home-transition--hub-start .hotips-home-transition__bg-layer--1{
  opacity: 0 !important;
}

/* BG2 is the only visible homepage hub background */
.hotips-home-transition--hub-start .hotips-home-transition__bg-layer--2,
.hotips-home-transition--hub-start.is-active .hotips-home-transition__bg-layer--2,
.hotips-home-transition--hub-start.is-docked .hotips-home-transition__bg-layer--2,
.hotips-home-transition--hub-start.is-past-featured .hotips-home-transition__bg-layer--2,
.hotips-home-transition--hub-start.is-complete .hotips-home-transition__bg-layer--2{
  opacity: 1 !important;
}

/* Remove old pseudo washes */
.hotips-home-transition--hub-start::before,
.hotips-home-transition--hub-start .hotips-home-transition__bg::after{
  background: transparent !important;
  opacity: 0 !important;
}

/* Soft top/bottom blend only on the background holder */
.hotips-home-transition--hub-start .hotips-home-transition__bg::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;

  display: block !important;
  pointer-events: none !important;
  opacity: 1 !important;

  background:
    linear-gradient(
      180deg,
      var(--hotips-home-hub-blend-top) 0%,
      var(--hotips-home-hub-blend-soft) 7%,
      var(--hotips-home-hub-blend-mid) 18%,
      var(--hotips-home-hub-blend-clear) 32%,
      var(--hotips-home-hub-blend-clear) 68%,
      rgba(255,255,255,0.22) 82%,
      var(--hotips-home-hub-blend-soft) 93%,
      var(--hotips-home-hub-blend-top) 100%
    ) !important;
}

/* Keep hub content above the decorative background */
.hotips-home-transition--hub-start > *:not(.hotips-home-transition__bg){
  position: relative;
  z-index: 1;
}

/* =========================================================
   HOME HUB STORY / GUIDE LINK
   - Adds "Read the guide first" link under Choose your focus
   ========================================================= */

.hotips-home-intro-nav__story{
  margin: var(--space-sm) 0 0;
}

.hotips-home-intro-nav__story-link,
.hotips-home-intro-nav__story-link:visited{
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);

  width: fit-content;
  max-width: 100%;

  padding: var(--space-xs) var(--space-sm);

  border-radius: var(--radius-sm);
  border: 1px solid color-mix(
    in srgb,
    var(--color-tech-accent) 42%,
    rgba(255,255,255,0.36)
  );

  background: color-mix(
    in srgb,
    var(--color-white) 18%,
    transparent
  );

  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  text-decoration: none;

  box-shadow:
    0 10px 22px rgba(22,34,53,0.16);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.hotips-home-intro-nav__story-link strong{
  font-weight: 850;
}

.hotips-home-intro-nav__story-link span{
  color: color-mix(
    in srgb,
    var(--color-white) 76%,
    transparent
  );
}

.hotips-home-intro-nav__story-link em{
  font-style: normal;
  font-size: 1.15em;
  line-height: 1;
}

.hotips-home-intro-nav__story-link:hover,
.hotips-home-intro-nav__story-link:focus-visible{
  background: color-mix(
    in srgb,
    var(--color-tech-accent) 22%,
    var(--color-white) 12%
  );

  border-color: color-mix(
    in srgb,
    var(--color-tech-accent) 72%,
    var(--color-white) 18%
  );

  color: var(--color-white);
  text-decoration: none;
  transform: translateY(var(--motion-lift-xs, -1px));
}

@media (max-width: 720px){
  .hotips-home-intro-nav__story-link{
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
  }

  .hotips-home-intro-nav__story-link span{
    display: block;
  }
}

/* =========================================================
   HOME HUB STORY LINK - LIGHT SURFACE FIX
   - Fixes white text on pale homepage hub background
   ========================================================= */

.hotips-home-intro-nav__story-link,
.hotips-home-intro-nav__story-link:visited{
  background: color-mix(
    in srgb,
    var(--color-white) 82%,
    transparent
  );

  color: var(--color-dark);

  border-color: color-mix(
    in srgb,
    var(--color-tech-accent) 62%,
    rgba(46,59,85,0.16)
  );

  box-shadow:
    0 10px 22px rgba(22,34,53,0.10),
    inset 0 1px 0 rgba(255,255,255,0.68);
}

.hotips-home-intro-nav__story-link strong{
  color: var(--color-dark);
}

.hotips-home-intro-nav__story-link span{
  color: var(--color-dark-muted);
}

.hotips-home-intro-nav__story-link em{
  color: var(--color-tech-accent);
}

.hotips-home-intro-nav__story-link:hover,
.hotips-home-intro-nav__story-link:focus-visible{
  background: color-mix(
    in srgb,
    var(--color-tech-accent) 14%,
    var(--color-white) 86%
  );

  border-color: color-mix(
    in srgb,
    var(--color-tech-accent) 76%,
    rgba(46,59,85,0.14)
  );

  color: var(--color-dark);
}

.hotips-home-intro-nav__story-link:hover strong,
.hotips-home-intro-nav__story-link:focus-visible strong{
  color: var(--color-dark);
}

.hotips-home-intro-nav__story-link:hover span,
.hotips-home-intro-nav__story-link:focus-visible span{
  color: var(--color-dark-muted);
}

/* =========================================================
   03. HERO SCROLL CUE
   Scoped only to the homepage hero scroll button
   ========================================================= */

section.hotips-home-hero > button.hotips-home-hero__scrollcue{
  position: absolute !important;
  left: 50% !important;
  bottom: var(--hotips-hero-cue-bottom) !important;
  z-index: 40 !important;

  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;

  width: var(--hotips-hero-cue-width) !important;
  height: var(--hotips-hero-cue-height) !important;
  min-width: var(--hotips-hero-cue-width) !important;
  min-height: var(--hotips-hero-cue-height) !important;

  margin: 0 !important;
  padding: 10px 0 0 !important;

  border: var(--border-thin) !important;
  border-color: color-mix(in srgb, var(--color-white) 28%, transparent) !important;
  border-radius: var(--radius-pill, 999px) !important;

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-dark) 74%, transparent) 0%,
      color-mix(in srgb, var(--color-dark-muted, var(--color-dark)) 66%, transparent) 100%
    ) !important;

  color: var(--color-white) !important;

  box-shadow:
    0 14px 34px rgba(12, 26, 46, 0.22),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 24%, transparent),
    inset 0 -1px 0 rgba(0,0,0,0.16) !important;

  backdrop-filter: blur(14px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(132%) !important;

  opacity: 0.88 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transform: translateX(-50%) !important;
  cursor: pointer !important;

  transition:
    opacity 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease !important;
}

section.hotips-home-hero > button.hotips-home-hero__scrollcue:hover,
section.hotips-home-hero > button.hotips-home-hero__scrollcue:focus-visible{
  opacity: 1 !important;
  border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-white) 28%) !important;

  box-shadow:
    0 18px 42px rgba(12, 26, 46, 0.28),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 34%, transparent),
    inset 0 -1px 0 rgba(0,0,0,0.18) !important;

  transform: translateX(-50%) translateY(-2px) !important;
  outline: none !important;
}

section.hotips-home-hero > button.hotips-home-hero__scrollcue .hotips-home-hero__scrollcue-line{
  position: relative !important;
  display: block !important;

  width: var(--hotips-hero-cue-line-width) !important;
  height: var(--hotips-hero-cue-line-height) !important;

  margin: 0 auto !important;

  border-radius: var(--radius-pill, 999px) !important;
  background: color-mix(in srgb, var(--color-white) 58%, transparent) !important;

  box-shadow:
    0 0 10px rgba(255,255,255,0.22),
    inset 0 0 4px rgba(255,255,255,0.30) !important;

  overflow: visible !important;
  opacity: 0.86 !important;

  animation: hotipsHeroCueLineClean 1.45s ease-in-out infinite !important;
}

/* Disable old dot */
section.hotips-home-hero > button.hotips-home-hero__scrollcue .hotips-home-hero__scrollcue-dot{
  display: none !important;
}

/* Moving bead */
section.hotips-home-hero > button.hotips-home-hero__scrollcue .hotips-home-hero__scrollcue-line::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;

  width: var(--hotips-hero-cue-dot-size) !important;
  height: var(--hotips-hero-cue-dot-size) !important;

  border-radius: var(--radius-pill, 999px) !important;

  background:
    radial-gradient(
      circle,
      rgba(255,245,190,1) 0%,
      rgba(212,175,55,1) 58%,
      rgba(174,132,20,0.9) 100%
    ) !important;

  box-shadow:
    0 0 0 4px rgba(212,175,55,0.14),
    0 0 14px rgba(212,175,55,0.48) !important;

  transform: translateX(-50%) translateY(0) scale(1) !important;
  animation: hotipsHeroCueDotClean 1.45s ease-in-out infinite !important;

  pointer-events: none !important;
}

section.hotips-home-hero > button.hotips-home-hero__scrollcue::after{
  content: "\2193" !important;
  display: block !important;

  margin-top: 4px !important;

  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  text-shadow: 0 1px 8px rgba(0,0,0,0.32) !important;
  animation: hotipsHeroCueArrowClean 1.45s ease-in-out infinite !important;
}

@keyframes hotipsHeroCueDotClean{
  0%{
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }

  55%{
    transform: translateX(-50%) translateY(25px) scale(0.82);
    opacity: 0.42;
  }

  100%{
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes hotipsHeroCueArrowClean{
  0%{
    transform: translateY(0);
    opacity: 0.92;
  }

  55%{
    transform: translateY(5px);
    opacity: 0.48;
  }

  100%{
    transform: translateY(0);
    opacity: 0.92;
  }
}

@keyframes hotipsHeroCueLineClean{
  0%{ opacity: 0.9; }
  55%{ opacity: 0.58; }
  100%{ opacity: 0.9; }
}


/* =========================================================
   04. DOCKED / STICKY FEATURE RAIL
   ========================================================= */

.hotips-home-transition--hub-start .hotips-home-docked-featured__inner{
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 68%, transparent) 0%,
      color-mix(in srgb, var(--color-white) 46%, transparent) 52%,
      color-mix(in srgb, var(--color-surface-soft, var(--color-white)) 28%, transparent) 100%
    ) !important;

  border-color: color-mix(in srgb, var(--color-white) 52%, transparent) !important;

  box-shadow:
    0 14px 34px rgba(22,34,53,0.10),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 78%, transparent) !important;

  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

/* Smooth JS/autoscroll safety, but no drag-scroll behaviour */
.hotips-home-transition--hub-start .hotips-home-docked-featured__track{
  scroll-behavior: auto !important;
  will-change: scroll-position;
}

/* Dock card shell */
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--dock{
  border-radius: 14px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Dock card clickable surface */
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--dock
.hotips-article-card__link{
  position: relative !important;

  border-left: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;

  background: var(--dock-area-bg, rgba(255,255,255,0.72)) !important;
  border: 1px solid var(--dock-area-border, rgba(25,35,55,0.08)) !important;

  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 82%, transparent),
    inset 0 -1px 0 rgba(22,34,53,0.04),
    0 5px 14px rgba(22,34,53,0.06) !important;

  backdrop-filter: blur(10px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(132%) !important;
}

/* Remove old dock stripe pseudo effects */
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--dock
.hotips-article-card__link::before,
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--dock
.hotips-article-card__link::after{
  display: none !important;
  content: none !important;
}

/* =========================================================
   DOCKED RAIL CARD AREA COLOURS
   - Matches bottom discovery card colour direction
   - Money = glassy navy
   - Wellness = glassy dark wellness green
   - Wrapper stays separate
   ========================================================= */

/* Money dock card — glassy navy */
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--area-money{
  --dock-area-bg:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--color-area-hub-money-band-a, var(--color-dark)) 74%,
        rgba(255,255,255,0.26)
      ) 0%,
      color-mix(
        in srgb,
        var(--color-area-hub-money-band-b, var(--color-dark-muted)) 58%,
        rgba(255,255,255,0.30)
      ) 48%,
      color-mix(
        in srgb,
        var(--color-area-hub-money-band-a, var(--color-dark)) 82%,
        rgba(255,255,255,0.18)
      ) 100%
    );

  --dock-area-border:
    color-mix(
      in srgb,
      var(--color-area-hub-money-band-a, var(--color-dark)) 52%,
      rgba(255,255,255,0.48)
    );

  --dock-area-label:
    color-mix(
      in srgb,
      var(--color-tech-accent, #d4af37) 82%,
      var(--color-white) 18%
    );

  --dock-area-title: var(--color-white);

  --dock-area-text:
    color-mix(
      in srgb,
      var(--color-white) 78%,
      var(--color-area-hub-money-band-b, var(--color-dark-muted)) 22%
    );
}

/* Wellness dock card — glassy dark wellness green */
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--area-wellness{
  --dock-area-bg:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 76%,
        rgba(255,255,255,0.24)
      ) 0%,
      color-mix(
        in srgb,
        var(--color-area-hub-wellness-band-b, var(--color-wellness-dark-muted)) 60%,
        rgba(255,255,255,0.30)
      ) 48%,
      color-mix(
        in srgb,
        var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 84%,
        rgba(255,255,255,0.16)
      ) 100%
    );

  --dock-area-border:
    color-mix(
      in srgb,
      var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 54%,
      rgba(255,255,255,0.46)
    );

  --dock-area-label:
    color-mix(
      in srgb,
      var(--color-wellness-accent-soft, var(--color-wellness-soft)) 72%,
      var(--color-white) 28%
    );

  --dock-area-title: var(--color-white);

  --dock-area-text:
    color-mix(
      in srgb,
      var(--color-white) 78%,
      var(--color-area-hub-wellness-band-b, var(--color-wellness-dark-muted)) 22%
    );
}

/* Neutral dock card — smoky glass fallback */
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--area-neutral{
  --dock-area-bg:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.86) 0%,
      rgba(244,246,249,0.78) 48%,
      rgba(255,255,255,0.72) 100%
    );

  --dock-area-border: rgba(255,255,255,0.72);
  --dock-area-label: var(--color-dark-muted);
  --dock-area-title: var(--color-heading);
  --dock-area-text: var(--color-text-muted);
}
/* Dock thumbnails */
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--dock
.hotips-article-card__media{
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.48) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.62),
    0 3px 9px rgba(22,34,53,0.08) !important;
}

.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--dock
.hotips-article-card__media img,
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--dock
.hotips-article-card__image,
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--dock
.wp-post-image{
  border-radius: 10px !important;
}

.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--area-money
.hotips-article-card__label,
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--area-wellness
.hotips-article-card__label{
  color: var(--dock-area-label) !important;
}

.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--area-money
.hotips-article-card__title,
.hotips-home-transition--hub-start
.hotips-home-docked-featured
.hotips-article-card--area-wellness
.hotips-article-card__title{
  color: var(--dock-area-title) !important;
}

/* =========================================================
   05. BOTTOM REGION DISCOVERY CAROUSEL
   - Dual-area neutral smoky glass shell
   - Background image stays visible
   - No money-blue wrapper
   ========================================================= */

.hotips-bottom-discovery.hotips-area-hub-featured{
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;

  margin-top: 0 !important;
  padding-top: var(--hotips-bottom-discovery-pad-top) !important;
  padding-bottom: var(--hotips-bottom-discovery-pad-bottom) !important;

  /*
    Keep the outer bottom-region shell transparent.
    The ghost image fade should reveal the page/background behind it,
    not an opaque white section fill.
  */
  background: transparent !important;

  /* No outer rule/border here — lets the ghost image fade into transparency. */
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

/* Background image — soft bleed layer behind the rounded rail shell */
.hotips-bottom-discovery.hotips-area-hub-featured::before{
  content: "" !important;
  position: absolute !important;

  /*
    Bleed the ghost image beyond the section so the fade can dissolve
    outside the visible shell instead of ending on the section edge.
  */
  inset: -90px 0 -140px 0 !important;

  z-index: 0 !important;
  pointer-events: none !important;

  background-image: var(--hotips-bottom-discovery-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  opacity: 0.58 !important;
  transform: none !important;
  filter: blur(0.35px) saturate(104%) contrast(1.03) !important;
  mix-blend-mode: normal !important;

  /*
    Very long, shallow fade.
    Top and bottom both dissolve gradually; no hard step at the section edge.
  */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.08) 12%,
    rgba(0,0,0,0.28) 24%,
    rgba(0,0,0,0.58) 36%,
    rgba(0,0,0,0.84) 46%,
    rgba(0,0,0,1) 54%,
    rgba(0,0,0,0.84) 64%,
    rgba(0,0,0,0.58) 74%,
    rgba(0,0,0,0.28) 86%,
    rgba(0,0,0,0.08) 94%,
    rgba(0,0,0,0) 100%
  );

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.08) 12%,
    rgba(0,0,0,0.28) 24%,
    rgba(0,0,0,0.58) 36%,
    rgba(0,0,0,0.84) 46%,
    rgba(0,0,0,1) 54%,
    rgba(0,0,0,0.84) 64%,
    rgba(0,0,0,0.58) 74%,
    rgba(0,0,0,0.28) 86%,
    rgba(0,0,0,0.08) 94%,
    rgba(0,0,0,0) 100%
  );

  -webkit-mask-mode: alpha;
  mask-mode: alpha;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/*
  Soft wash layer. It also bleeds beyond the section so it does not
  create its own top or bottom horizontal edge.
*/
.hotips-bottom-discovery.hotips-area-hub-featured::after{
  content: "" !important;
  position: absolute !important;
  inset: -90px 0 -140px 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 18% 28%,
      rgba(255,255,255,0.10) 0%,
      transparent 46%
    ),
    radial-gradient(
      circle at 84% 42%,
      rgba(220,226,235,0.05) 0%,
      transparent 50%
    ) !important;

  opacity: 0.42 !important;

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.12) 18%,
    rgba(0,0,0,0.72) 42%,
    rgba(0,0,0,0.72) 58%,
    rgba(0,0,0,0.12) 82%,
    rgba(0,0,0,0) 100%
  );

  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.12) 18%,
    rgba(0,0,0,0.72) 42%,
    rgba(0,0,0,0.72) 58%,
    rgba(0,0,0,0.12) 82%,
    rgba(0,0,0,0) 100%
  );

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}



/* Bottom discovery edge safety — no hard divider lines on the fading outer shell. */
.hotips-bottom-discovery.hotips-area-hub-featured,
.hotips-bottom-discovery.hotips-area-hub-featured::before,
.hotips-bottom-discovery.hotips-area-hub-featured::after{
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
}

.hotips-bottom-discovery.hotips-area-hub-featured > *{
  position: relative !important;
  z-index: 1 !important;
}

.hotips-bottom-discovery > .hotips-container{
  width: min(
    calc(100% - var(--home-shell-gutter, clamp(18px, 3vw, 44px))),
    var(--home-shell-max-width, 1520px)
  );
  max-width: none;
}

/* Rail wrapper — proper rounded glass shell over the faded ghost image */
.hotips-bottom-discovery__rail,
.hotips-bottom-discovery .hotips-area-hub-featured__rail{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(10px, 1.2vw, 14px) !important;

  padding: clamp(14px, 1.8vw, 22px) !important;

  /* Match the rounded shell language used by the context/hero shells. */
  border-radius: var(--mht-context-shell-radius, calc(var(--radius-lg) + 8px)) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;

  /*
    The rail is the actual glass card/shell.
    The ghost image belongs behind it on the outer bottom-discovery layer.
    Do not fade this rail background to transparent at the bottom, otherwise
    the bottom corners visually collapse and no longer match the top radius.
  */
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.38) 0%,
      rgba(255,255,255,0.25) 48%,
      rgba(255,255,255,0.20) 100%
    ) !important;

  box-shadow:
    0 14px 34px rgba(22,34,53,0.075),
    inset 0 1px 0 rgba(255,255,255,0.44),
    inset 0 -1px 0 rgba(255,255,255,0.16) !important;

  backdrop-filter: blur(10px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%) !important;

  /* Keep card hover/shadow from being clipped while preserving the rounded shell. */
  overflow: visible !important;
}

/* Bottom discovery lower-edge cleanup: keep disclaimer soft without removing the rail's bottom radius/border. */
.hotips-bottom-discovery__disclaimer{
  border-bottom: 0 !important;
  box-shadow:
    0 10px 22px rgba(22,34,53,0.055) !important;
}

/* Header/title inside rail */
.hotips-bottom-discovery__rail .hotips-bottom-discovery__head,
.hotips-bottom-discovery .hotips-area-hub-featured__rail .hotips-area-hub-featured__head,
.hotips-bottom-discovery__head,
.hotips-bottom-discovery .hotips-area-hub-featured__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 34px);

  margin: 0 !important;
  padding: 0 0 clamp(10px, 1.2vw, 14px) !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.hotips-bottom-discovery .hotips-area-hub-featured__eyebrow{
  margin: 0 0 5px !important;

  color: color-mix(
    in srgb,
    var(--color-dark) 72%,
    var(--color-white) 28%
  ) !important;

  font-family: var(--font-body) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

.hotips-bottom-discovery .hotips-area-hub-featured__title{
  margin: 0 !important;

  color: var(--color-dark) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(24px, 2.1vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
}

.hotips-bottom-discovery .hotips-area-hub-featured__text{
  max-width: 58ch !important;
  margin: 6px 0 0 !important;

  color: color-mix(
    in srgb,
    var(--color-dark-muted) 86%,
    var(--color-white) 14%
  ) !important;

  font-family: var(--font-body) !important;
  font-size: var(--font-size-ui-sm, 13px) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

/* Horizontal carousel viewport — scrollbar kept visible */
.hotips-bottom-discovery__viewport,
.hotips-bottom-discovery .hotips-area-hub-featured__viewport{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(
    var(--hotips-bottom-discovery-card-width-min),
    var(--hotips-bottom-discovery-card-width-max)
  ) !important;
  grid-auto-rows: auto !important;
  gap: clamp(8px, 1vw, 12px) !important;

  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;

  padding: 0 2px 12px !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;

  scroll-behavior: smooth !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: thin !important;
  scrollbar-color:
    rgba(46,59,85,0.34)
    rgba(255,255,255,0.24) !important;

  cursor: auto !important;
}

/* No drag-scroll visual state */
.hotips-bottom-discovery__viewport.is-dragging,
.hotips-bottom-discovery .hotips-area-hub-featured__viewport.is-dragging{
  cursor: auto !important;
  scroll-behavior: smooth !important;
}

.hotips-bottom-discovery__viewport.is-dragging a,
.hotips-bottom-discovery .hotips-area-hub-featured__viewport.is-dragging a{
  pointer-events: auto !important;
}

/* Chrome / Edge / Safari scrollbar */
.hotips-bottom-discovery__viewport::-webkit-scrollbar,
.hotips-bottom-discovery .hotips-area-hub-featured__viewport::-webkit-scrollbar{
  display: block !important;
  height: 8px !important;
}

.hotips-bottom-discovery__viewport::-webkit-scrollbar-track,
.hotips-bottom-discovery .hotips-area-hub-featured__viewport::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.24) !important;
  border-radius: var(--radius-pill, 999px) !important;
}

.hotips-bottom-discovery__viewport::-webkit-scrollbar-thumb,
.hotips-bottom-discovery .hotips-area-hub-featured__viewport::-webkit-scrollbar-thumb{
  background:
    linear-gradient(
      90deg,
      rgba(46,59,85,0.28),
      rgba(46,59,85,0.42)
    ) !important;

  border-radius: var(--radius-pill, 999px) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}

.hotips-bottom-discovery__viewport::-webkit-scrollbar-thumb:hover,
.hotips-bottom-discovery .hotips-area-hub-featured__viewport::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      90deg,
      rgba(46,59,85,0.38),
      rgba(46,59,85,0.54)
    ) !important;
}

.hotips-bottom-discovery__item,
.hotips-bottom-discovery .hotips-area-hub-featured__item{
  min-width: 0;
  height: auto !important;
}
/* =========================================================
   HOME FOCUS SCROLL TARGET
   - Lower landing point for hero and small scroll buttons
   - Keeps #hotips-hub-start separate for topbar bypass
   ========================================================= */

.hotips-home-transition--hub-start .hotips-home-focus-anchor{
  display: block;
  width: 1px;
  height: 0;
  overflow: hidden;
  pointer-events: none;

  scroll-margin-top: calc(var(--hotips-home-docked-top, 32px) + 82px);
}

/* =========================================================
   HOME HUB START — BIG FEATURE PANELS AS HUB BUTTONS
   - Large logo panels act as the main Money / Wellness buttons
   ========================================================= */

.hotips-home-intro-nav__feature--button{
  color: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;

  transition:
    transform var(--duration-fast, 0.18s) var(--ease-standard, ease),
    border-color var(--duration-fast, 0.18s) var(--ease-standard, ease),
    box-shadow var(--duration-fast, 0.18s) var(--ease-standard, ease),
    background var(--duration-fast, 0.18s) var(--ease-standard, ease) !important;
}

/* Money feature button */
.hotips-home-intro-nav__card--money .hotips-home-intro-nav__feature--button{
  border-color: color-mix(
    in srgb,
    var(--color-area-hub-money-band-a, var(--color-dark)) 24%,
    transparent
  ) !important;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-money-band-a, var(--color-dark)) 9%, var(--color-surface) 91%) 0%,
      color-mix(in srgb, var(--color-tech-soft-muted, var(--color-surface-muted)) 84%, var(--color-surface) 16%) 100%
    ) !important;
}

/* Wellness feature button */
.hotips-home-intro-nav__card--wellness .hotips-home-intro-nav__feature--button{
  border-color: color-mix(
    in srgb,
    var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 26%,
    transparent
  ) !important;

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 10%, var(--color-surface) 90%) 0%,
      color-mix(in srgb, var(--color-wellness-soft, var(--color-surface-muted)) 86%, var(--color-surface) 14%) 100%
    ) !important;
}

.hotips-home-intro-nav__feature--button:hover,
.hotips-home-intro-nav__feature--button:focus-visible{
  transform: translateY(-2px) !important;
  outline: none !important;

  box-shadow:
    0 18px 38px rgba(22, 34, 53, 0.14),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 86%, transparent) !important;
}

.hotips-home-intro-nav__card--money .hotips-home-intro-nav__feature--button:hover,
.hotips-home-intro-nav__card--money .hotips-home-intro-nav__feature--button:focus-visible{
  border-color: color-mix(
    in srgb,
    var(--color-tech-accent, #d4af37) 58%,
    var(--color-area-hub-money-band-a, var(--color-dark)) 42%
  ) !important;
}

.hotips-home-intro-nav__card--wellness .hotips-home-intro-nav__feature--button:hover,
.hotips-home-intro-nav__card--wellness .hotips-home-intro-nav__feature--button:focus-visible{
  border-color: color-mix(
    in srgb,
    var(--color-wellness-accent, #587760) 60%,
    var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 40%
  ) !important;
}

.hotips-home-intro-nav__feature-cta{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  width: fit-content !important;
  margin-top: clamp(10px, 1.2vw, 14px) !important;
  padding: 8px 13px !important;

  border-radius: var(--radius-pill) !important;

  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.hotips-home-intro-nav__card--money .hotips-home-intro-nav__feature-cta{
  background: var(--color-area-hub-money-band-a, var(--color-dark)) !important;
  color: var(--color-white) !important;
}

.hotips-home-intro-nav__card--wellness .hotips-home-intro-nav__feature-cta{
  background: var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) !important;
  color: var(--color-white) !important;
}
/* =========================================================
   06. BOTTOM DISCOVERY CARDS
   ========================================================= */

.hotips-bottom-discovery .hotips-article-card--bottom-region,
.hotips-bottom-discovery .hotips-article-card--hub-article{
  height: var(--hotips-bottom-discovery-card-height) !important;
  min-height: var(--hotips-bottom-discovery-card-height) !important;
  max-height: var(--hotips-bottom-discovery-card-height) !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hotips-bottom-discovery .hotips-article-card__link{
  display: grid !important;
  grid-template-rows: var(--hotips-bottom-discovery-media-height) minmax(0, 1fr) !important;

  height: var(--hotips-bottom-discovery-card-height) !important;
  min-height: var(--hotips-bottom-discovery-card-height) !important;
  max-height: var(--hotips-bottom-discovery-card-height) !important;

  padding: 0 !important;

  border: var(--border-thin) !important;
  border-color: var(--bottom-card-border, var(--border-color-light)) !important;
  border-radius: var(--radius-md) !important;

  background: var(--bottom-card-bg, var(--color-surface)) !important;

  box-shadow:
    0 12px 28px rgba(22, 34, 53, 0.09),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 72%, transparent) !important;

  overflow: hidden !important;
  text-decoration: none !important;

  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.hotips-bottom-discovery .hotips-article-card__link:hover,
.hotips-bottom-discovery .hotips-article-card__link:focus-visible{
  transform: translateY(-2px);
  box-shadow:
    0 18px 36px rgba(22, 34, 53, 0.14),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 82%, transparent) !important;
  outline: none;
}

/* =========================================================
   BOTTOM DISCOVERY CARD AREA COLOURS
   - Cards are obvious Money / Wellness again
   - Wrapper can stay neutral smoky glass
   - Uses Money dark + Wellness dark tokens
   ========================================================= */

/* Money bottom card — glassy navy */
.hotips-bottom-discovery .hotips-article-card--area-money{
  --bottom-card-bg:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--color-area-hub-money-band-a, var(--color-dark)) 74%,
        rgba(255,255,255,0.26)
      ) 0%,
      color-mix(
        in srgb,
        var(--color-area-hub-money-band-b, var(--color-dark-muted)) 58%,
        rgba(255,255,255,0.30)
      ) 48%,
      color-mix(
        in srgb,
        var(--color-area-hub-money-band-a, var(--color-dark)) 82%,
        rgba(255,255,255,0.18)
      ) 100%
    );

  --bottom-card-border:
  color-mix(
    in srgb,
    var(--color-white) 72%,
    rgba(46,59,85,0.28) 28%
  );

  --bottom-card-label:
    color-mix(
      in srgb,
      var(--color-tech-accent, #d4af37) 82%,
      var(--color-white) 18%
    );

  --bottom-card-title: var(--color-white);

  --bottom-card-text:
    color-mix(
      in srgb,
      var(--color-white) 78%,
      var(--color-area-hub-money-band-b, var(--color-dark-muted)) 22%
    );
}

/* Wellness bottom card — glassy dark wellness green */
.hotips-bottom-discovery .hotips-article-card--area-wellness{
  --bottom-card-bg:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 76%,
        rgba(255,255,255,0.24)
      ) 0%,
      color-mix(
        in srgb,
        var(--color-area-hub-wellness-band-b, var(--color-wellness-dark-muted)) 60%,
        rgba(255,255,255,0.30)
      ) 48%,
      color-mix(
        in srgb,
        var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) 84%,
        rgba(255,255,255,0.16)
      ) 100%
    );

  --bottom-card-border:
  color-mix(
    in srgb,
    var(--color-white) 74%,
    rgba(88,119,96,0.26) 26%
  );

  --bottom-card-label:
    color-mix(
      in srgb,
      var(--color-wellness-accent-soft, var(--color-wellness-soft)) 72%,
      var(--color-white) 28%
    );

  --bottom-card-title: var(--color-white);

  --bottom-card-text:
    color-mix(
      in srgb,
      var(--color-white) 78%,
      var(--color-area-hub-wellness-band-b, var(--color-wellness-dark-muted)) 22%
    );
}

/* Neutral bottom card — smoky glass fallback */
.hotips-bottom-discovery .hotips-article-card--area-neutral{
  --bottom-card-bg:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.86) 0%,
      rgba(244,246,249,0.78) 48%,
      rgba(255,255,255,0.72) 100%
    );

  --bottom-card-border: rgba(255,255,255,0.72);
  --bottom-card-label: var(--color-dark-muted);
  --bottom-card-title: var(--color-heading);
  --bottom-card-text: var(--color-text-muted);
}

.hotips-bottom-discovery .hotips-article-card__media img{
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center !important;

  opacity: 1 !important;
  visibility: visible !important;
}

.hotips-bottom-discovery .hotips-area-hub-placeholder{
  display: grid;
  place-items: center;

  width: 100%;
  height: 100%;

  color: color-mix(in srgb, var(--bottom-card-label, var(--color-accent)) 42%, transparent);
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
}

/* Body */
.hotips-bottom-discovery .hotips-article-card__body{
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;

  min-width: 0 !important;
  min-height: 0 !important;

  padding: 8px 10px !important;

  background: transparent !important;
  overflow: hidden !important;
}

.hotips-bottom-discovery .hotips-article-card__label{
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  color: var(--bottom-card-label) !important;
  font-family: var(--font-body) !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

.hotips-bottom-discovery .hotips-article-card__title{
  display: -webkit-box !important;

  margin: 0 !important;

  color: var(--bottom-card-title) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(14px, 0.95vw, 16px) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.hotips-bottom-discovery .hotips-article-card__excerpt{
  display: -webkit-box !important;

  margin: 0 !important;

  color: var(--bottom-card-text) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;

  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
}

/* Meta */
.hotips-bottom-discovery .hotips-article-card__meta{
  display: flex !important;
  align-items: center !important;

  margin-top: auto !important;
  padding-top: 6px !important;

  border-top: var(--border-thin) !important;
  border-color: color-mix(in srgb, var(--bottom-card-border) 70%, transparent) !important;
}

.hotips-bottom-discovery .hotips-article-card__meta-left{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.hotips-bottom-discovery .hotips-article-card__meta-avatar{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 24px !important;
  width: 24px !important;
  height: 24px !important;
  padding: 3px !important;

  border: var(--border-thin) !important;
  border-color: color-mix(in srgb, var(--bottom-card-border) 82%, transparent) !important;
  border-radius: 8px !important;

  background: color-mix(in srgb, var(--color-white) 62%, transparent) !important;
  color: var(--bottom-card-label) !important;

  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.hotips-bottom-discovery .hotips-article-card__meta-copy{
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.hotips-bottom-discovery .hotips-article-card__meta-author{
  color: var(--bottom-card-title) !important;
  font-family: var(--font-body) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
}

.hotips-bottom-discovery .hotips-article-card__meta-sub{
  color: var(--bottom-card-text) !important;
  font-family: var(--font-body) !important;
  font-size: 8px !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
}


/* =========================================================
   BOTTOM DISCOVERY — COMPACT CARD + HOVER-SAFE TRUTH
   - Smaller cards
   - Shorter discovery wrapper
   - Hover/shadow no longer clipped
   - Keeps Money / Wellness card colours from Section 06
   ========================================================= */

.hotips-bottom-discovery.hotips-area-hub-featured{
  --hotips-bottom-discovery-card-width-min: 176px;
  --hotips-bottom-discovery-card-width-max: 198px;
  --hotips-bottom-discovery-card-height: 188px;
  --hotips-bottom-discovery-media-height: 58px;

  padding-top: clamp(14px, 1.8vw, 22px) !important;
  padding-bottom: clamp(18px, 2.4vw, 30px) !important;
}

/* Compact the glass rail wrapper */
.hotips-bottom-discovery__rail,
.hotips-bottom-discovery .hotips-area-hub-featured__rail{
  gap: clamp(7px, 0.9vw, 10px) !important;
  padding: clamp(10px, 1.2vw, 14px) !important;

  /* Needed so hover lift/shadow is not clipped */
  overflow: visible !important;
}

/* Tighten the heading area */
.hotips-bottom-discovery__rail .hotips-bottom-discovery__head,
.hotips-bottom-discovery .hotips-area-hub-featured__rail .hotips-area-hub-featured__head,
.hotips-bottom-discovery__head,
.hotips-bottom-discovery .hotips-area-hub-featured__head{
  padding-bottom: clamp(7px, 0.8vw, 10px) !important;
}

.hotips-bottom-discovery .hotips-area-hub-featured__title{
  font-size: clamp(22px, 1.8vw, 30px) !important;
}

.hotips-bottom-discovery .hotips-area-hub-featured__text{
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* Viewport: horizontal scroll remains, vertical hover room allowed */
.hotips-bottom-discovery__viewport,
.hotips-bottom-discovery .hotips-area-hub-featured__viewport{
  gap: clamp(7px, 0.8vw, 10px) !important;

  padding-top: 5px !important;
  padding-right: 2px !important;
  padding-bottom: 9px !important;
  padding-left: 2px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Card body: smaller and tighter */
.hotips-bottom-discovery .hotips-article-card__body{
  gap: 2px !important;
  padding: 10px 12px 7px !important;
}

.hotips-bottom-discovery .hotips-article-card__label{
  font-size: 7px !important;
  letter-spacing: 0.065em !important;
}

.hotips-bottom-discovery .hotips-article-card__title{
  font-size: clamp(12px, 0.78vw, 14px) !important;
  line-height: 1.03 !important;
  -webkit-line-clamp: 2 !important;
}

.hotips-bottom-discovery .hotips-article-card__excerpt{
  font-size: 9.5px !important;
  line-height: 1.18 !important;
  -webkit-line-clamp: 1 !important;
}

/* Smaller footer/meta row */
.hotips-bottom-discovery .hotips-article-card__meta{
  padding-top: 4px !important;
}

.hotips-bottom-discovery .hotips-article-card__meta-left{
  gap: 4px !important;
}

.hotips-bottom-discovery .hotips-article-card__meta-avatar{
  flex-basis: 20px !important;
  width: 20px !important;
  height: 20px !important;
  padding: 2px !important;
  border-radius: 7px !important;
  font-size: 9px !important;
}

.hotips-bottom-discovery .hotips-article-card__meta-author{
  font-size: 8px !important;
}

.hotips-bottom-discovery .hotips-article-card__meta-sub{
  font-size: 7px !important;
}

/* Softer hover so the card does not hit the rail edge */
.hotips-bottom-discovery .hotips-article-card__link:hover,
.hotips-bottom-discovery .hotips-article-card__link:focus-visible{
  transform: translateY(-1px) !important;

  box-shadow:
    0 12px 24px rgba(22, 34, 53, 0.13),
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 82%, transparent) !important;

  outline: none !important;
}

/* Mobile compact sizing */
@media (max-width: 767px){
  .hotips-bottom-discovery.hotips-area-hub-featured{
    --hotips-bottom-discovery-card-width-min: 172px;
    --hotips-bottom-discovery-card-width-max: 70vw;
    --hotips-bottom-discovery-card-height: 182px;
    --hotips-bottom-discovery-media-height: 54px;

    padding-top: 14px !important;
    padding-bottom: 24px !important;
  }
}

/* Mobile: keep compact but not cramped */
@media (max-width: 767px){
  .hotips-bottom-discovery{
    --hotips-bottom-discovery-card-width-min: 190px;
    --hotips-bottom-discovery-card-width-max: 72vw;
    --hotips-bottom-discovery-card-height: 206px;
    --hotips-bottom-discovery-media-height: 68px;
  }
}

/* =========================================================
   07. REMOVE DRAG-SCROLL BEHAVIOUR CLASSES FROM CSS
   This neutralises old drag styles if JS still adds classes.
   ========================================================= */

.hotips-area-hub-network__track,
.hotips-area-hub-featured__viewport,
.hotips-bottom-discovery__viewport{
  cursor: auto !important;
}

.hotips-area-hub-network__track.is-dragging,
.hotips-area-hub-featured__viewport.is-dragging,
.hotips-bottom-discovery__viewport.is-dragging{
  cursor: auto !important;
  scroll-behavior: smooth !important;
}

.hotips-area-hub-network__track.is-dragging a,
.hotips-area-hub-featured__viewport.is-dragging a,
.hotips-bottom-discovery__viewport.is-dragging a{
  pointer-events: auto !important;
}


/* =========================================================
   08. MOBILE
   ========================================================= */

@media (max-width: 767px){
  :root{
    --hotips-bottom-discovery-card-width-min: 210px;
    --hotips-bottom-discovery-card-width-max: 76vw;
    --hotips-bottom-discovery-card-height: 214px;
    --hotips-bottom-discovery-media-height: 74px;
  }

  .hotips-bottom-discovery.hotips-area-hub-featured{
    padding-top: 18px !important;
    padding-bottom: 34px !important;
  }

  .hotips-bottom-discovery__rail,
  .hotips-bottom-discovery .hotips-area-hub-featured__rail{
    padding: 14px !important;
    border-radius: var(--radius-md) !important;
  }

  .hotips-bottom-discovery__head,
  .hotips-bottom-discovery .hotips-area-hub-featured__head{
    display: block;
  }

  .hotips-bottom-discovery .hotips-area-hub-featured__title{
    font-size: clamp(24px, 7vw, 32px) !important;
  }

  .hotips-bottom-discovery .hotips-area-hub-featured__text{
    font-size: var(--font-size-ui-sm, 13px) !important;
  }
}


/* =========================================================
   09. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  section.hotips-home-hero > button.hotips-home-hero__scrollcue,
  section.hotips-home-hero > button.hotips-home-hero__scrollcue::after,
  section.hotips-home-hero > button.hotips-home-hero__scrollcue .hotips-home-hero__scrollcue-line,
  section.hotips-home-hero > button.hotips-home-hero__scrollcue .hotips-home-hero__scrollcue-line::after{
    animation: none !important;
  }

  .hotips-bottom-discovery__viewport,
  .hotips-bottom-discovery .hotips-area-hub-featured__viewport{
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   HOME HUB START — LAYOUT TRUTH
   - Second background, docked rail, and focus section begin together
   - Rail visible when hub-start enters view
   - Focus section pulled directly under rail
   ========================================================= */

.hotips-home-transition--hub-start{
  position: relative;
  isolation: isolate;

  /* Important: sticky children need overflow visible */
  overflow: visible !important;

  --hotips-home-docked-top: 32px;
  --hotips-home-docked-z: 80;

  min-height: 0 !important;
  padding-block: 0 clamp(20px, 3.2vw, 44px) !important;

  background: var(--color-surface-muted);
}

body.admin-bar .hotips-home-transition--hub-start{
  --hotips-home-docked-top: 64px;
}

@media (max-width: 782px){
  body.admin-bar .hotips-home-transition--hub-start{
    --hotips-home-docked-top: 46px;
  }
}

.hotips-home-transition--hub-start .hotips-home-transition__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hotips-home-transition--hub-start .hotips-home-transition__bg-layer{
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;

  pointer-events: none;
}

.hotips-home-transition--hub-start .hotips-home-transition__bg-layer--1{
  background-image: var(--home-transition-bg-image-1);
  opacity: 0.16;
}

.hotips-home-transition--hub-start .hotips-home-transition__bg-layer--2{
  background-image: var(--home-transition-bg-image-2);
  opacity: calc(0.14 + (var(--home-transition-progress, 0) * 0.22));
}

.hotips-home-transition--hub-start::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-surface) 94%, transparent) 0%,
      color-mix(in srgb, var(--color-surface) 84%, transparent) 42%,
      color-mix(in srgb, var(--color-surface) 66%, transparent) 100%
    );

  pointer-events: none;
}

.hotips-home-transition--hub-start > .hotips-home-hub-anchor,
.hotips-home-transition--hub-start > .hotips-home-docked-featured,
.hotips-home-transition--hub-start > .hotips-home-hub-scrollcue-wrap,
.hotips-home-transition--hub-start > .hotips-home-intro-nav{
  position: relative;
  z-index: 2;
}

/* Anchor before the rail: topbar/home links land at the start of the hub */
.hotips-home-transition--hub-start > .hotips-home-hub-anchor{
  display: block;
  width: 1px;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  scroll-margin-top: calc(var(--hotips-home-docked-top) + 8px);
}

/* Docked rail: visible immediately as hub-start enters */
.hotips-home-transition--hub-start .hotips-home-docked-featured{
  position: -webkit-sticky !important;
  position: sticky !important;

  top: var(--hotips-home-docked-top) !important;
  z-index: var(--hotips-home-docked-z) !important;

  display: block !important;

  margin: 0 !important;
  padding-block: 6px !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;

  animation: hotipsDockedRailIn 280ms var(--ease-soft, ease) both;
}

/* Do not let older hidden states win */
.hotips-home-transition--hub-start .hotips-home-docked-featured.is-visible,
.hotips-home-transition--hub-start.is-active .hotips-home-docked-featured{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

.hotips-home-transition--hub-start .hotips-home-docked-featured__inner{
  width: min(100% - 24px, var(--container, 1200px)) !important;
  margin-inline: auto !important;
}

/* Scroll cue should be tiny, not a spacer */
.hotips-home-transition--hub-start .hotips-home-hub-scrollcue-wrap{
  display: grid !important;
  place-items: center !important;

  height: 10px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  pointer-events: none !important;
}

.hotips-home-transition--hub-start .hotips-home-hub-scrollcue{
  pointer-events: auto !important;
}

/* Focus section starts with the second bg / rail area */
.hotips-home-transition--hub-start .hotips-home-intro-nav{
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: clamp(26px, 4vw, 54px) !important;
}

/* Kill inherited vertical offset on the focus shell */
.hotips-home-transition--hub-start .hotips-home-intro-nav__shell{
  margin-top: 0 !important;
}

/* Make the heading panel sit tight to the rail */
.hotips-home-transition--hub-start .hotips-home-intro-nav__intro{
  margin-top: 0 !important;
  margin-bottom: clamp(8px, 1.2vw, 14px) !important;
  padding-top: clamp(8px, 1.2vw, 14px) !important;
}

@keyframes hotipsDockedRailIn{
  from{
    opacity: 0;
    transform: translateY(-8px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 782px){
  .hotips-home-transition--hub-start .hotips-home-docked-featured{
    padding-block: 4px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__inner{
    width: min(100% - 16px, var(--container, 1200px)) !important;
  }

  .hotips-home-transition--hub-start .hotips-home-hub-scrollcue-wrap{
    height: 6px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__intro{
    padding-top: 8px !important;
  }
}

/* =========================================================
   AREA LANDING CONTENT MENU + FAKE SECTION SIDEBAR
   - Restored base section
   - Content menu keeps original white/card styling
   - Fake sidebar base stays simple so the later glass shell can style it
   ========================================================= */

.hotips-area-landing__content-menu,
.hotips-area-landing__section-sidebar{
  --mht-area-side-accent: var(--color-tech-accent);
  --mht-area-side-ink: var(--color-area-hub-money-text);
  --mht-area-side-bg: color-mix(in srgb, var(--color-surface) 86%, transparent);
  --mht-area-side-panel: color-mix(in srgb, var(--color-white) 84%, transparent);
  --mht-area-side-border: var(--border-color-light);
}

.hotips-area-landing__content-menu--wellness,
.hotips-area-landing__section-sidebar--wellness{
  --mht-area-side-accent: var(--color-wellness-accent);
  --mht-area-side-ink: var(--color-area-hub-wellness-text);
}

.hotips-area-landing__content-menu{
  display: grid;
  grid-template-columns: minmax(180px, 0.26fr) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;

  margin: 0 0 var(--space-sm);
  padding: var(--space-xs);

  border: var(--border-width-thin) var(--border-style-standard) var(--mht-area-side-border);
  border-radius: var(--radius-sm);

  background: var(--mht-area-side-bg);
  box-shadow: var(--shadow-sm);
}

.hotips-area-landing__content-menu-kicker,
.hotips-area-landing__section-sidebar-kicker{
  margin: 0 0 var(--space-xs);
  color: var(--mht-area-side-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 850;
  letter-spacing: var(--article-card-ribbon-letter-spacing);
  line-height: var(--line-height-ui);
  text-transform: uppercase;
}

.hotips-area-landing__content-menu-title,
.hotips-area-landing__section-sidebar-title{
  margin: 0;
  color: var(--mht-area-side-ink);
  font-family: var(--font-heading, var(--font-display, var(--font-accent)));
  font-size: var(--font-size-xl);
  font-weight: 850;
  line-height: var(--line-height-heading);
}

.hotips-area-landing__content-menu-links{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.hotips-area-landing__content-menu-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);

  min-width: 0;
  min-height: 15px;

  padding: var(--space-xs) var(--space-sm);

  border: var(--border-width-thin) var(--border-style-standard) var(--border-color-light);
  border-radius: var(--radius-sm);

  background: var(--mht-area-side-panel);
  color: var(--mht-area-side-ink);
  text-decoration: none;
}

.hotips-area-landing__content-menu-link strong{
  display: block;
  color: inherit;
  font-size: var(--font-size-ui);
  font-weight: 850;
  line-height: var(--line-height-ui);
}

.hotips-area-landing__content-menu-link small{
  display: block;
  margin-top: var(--space-none);
  color: var(--color-text-muted);
}

.hotips-area-landing__content-menu-link > span:last-child{
  flex: 0 0 auto;
  color: var(--mht-area-side-accent);
  font-size: var(--font-size-lg);
  font-weight: 850;
  line-height: 1;
}

.hotips-area-landing__content-menu-link:hover,
.hotips-area-landing__content-menu-link:focus-visible{
  border-color: color-mix(in srgb, var(--mht-area-side-accent) 44%, var(--border-color-light) 56%);
  background: color-mix(in srgb, var(--mht-area-side-accent) 8%, var(--color-white) 92%);
  color: var(--mht-area-side-ink);
  text-decoration: none;
  outline: none;
}

.hotips-area-landing__posts-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 240px);
  align-items: start;
  gap: clamp(12px, 1.4vw, 18px);
}

.hotips-area-landing__posts-main{
  min-width: 0;
}

.hotips-area-landing__section-sidebar{
  position: static;
  top: auto;

  align-self: start;
  justify-self: end;

  display: block;
  width: 100%;
  max-width: 240px;
  min-width: 0;
  height: auto;
  z-index: 2;
}

/* Fake sidebar is no longer sticky, so admin-bar offset is not needed. */

.hotips-area-landing__section-sidebar-card{
  padding: var(--space-md);

  border: var(--border-width-thin) var(--border-style-standard) var(--mht-area-side-border);
  border-radius: var(--radius-sm);

  background: var(--mht-area-side-bg);
  box-shadow: var(--shadow-sm);
}

.hotips-area-landing__section-sidebar-links,
.hotips-area-landing__section-sidebar-posts{
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.hotips-area-landing__section-sidebar-links a,
.hotips-area-landing__section-sidebar-post{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);

  padding: var(--space-sm) 0;

  border-top: var(--border-width-thin) var(--border-style-standard) var(--border-color-soft);

  color: var(--mht-area-side-ink);
  font-size: var(--font-size-ui-sm);
  font-weight: 800;
  line-height: var(--line-height-ui);
  text-decoration: none;
}

.hotips-area-landing__section-sidebar-links a:first-child,
.hotips-area-landing__section-sidebar-post:first-child{
  border-top: 0;
  padding-top: 0;
}

.hotips-area-landing__section-sidebar-links a span:last-child,
.hotips-area-landing__section-sidebar-post span:last-child{
  color: var(--mht-area-side-accent);
  font-size: var(--font-size-lg);
  line-height: 1;
}

.hotips-area-landing__section-sidebar-links a:hover,
.hotips-area-landing__section-sidebar-post:hover,
.hotips-area-landing__section-sidebar-links a:focus-visible,
.hotips-area-landing__section-sidebar-post:focus-visible{
  color: var(--mht-area-side-accent);
}

@media (max-width: 980px){
  .hotips-area-landing__content-menu{
    grid-template-columns: 1fr;
  }

  .hotips-area-landing__content-menu-links{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   AREA LANDING FAKE SIDEBAR — GLASS SHELL + AREA SWITCHER
   Adds Explore Money / Explore Wellness icons to fake sidebar.
   ========================================================= */

.hotips-area-landing__section-sidebar{
  --mht-sidebar-shell-bg: color-mix(
    in srgb,
    var(--color-area-hub-money-band-a) 42%,
    transparent
  );
  --mht-sidebar-shell-bg-strong: color-mix(
    in srgb,
    var(--color-area-hub-money-band-a) 56%,
    transparent
  );
  --mht-sidebar-shell-border: color-mix(
    in srgb,
    var(--color-white) 22%,
    transparent
  );
  --mht-sidebar-shell-text: var(--color-white);
  --mht-sidebar-shell-text-soft: color-mix(
    in srgb,
    var(--color-white) 72%,
    transparent
  );
  --mht-sidebar-shell-accent: var(--color-tech-accent);
  --mht-sidebar-card-bg: color-mix(
    in srgb,
    var(--color-white) 82%,
    transparent
  );
  --mht-sidebar-card-border: color-mix(
    in srgb,
    var(--color-white) 36%,
    transparent
  );
}

.hotips-area-landing__section-sidebar--wellness{
  --mht-sidebar-shell-bg: color-mix(
    in srgb,
    var(--color-area-hub-wellness-band-a) 42%,
    transparent
  );
  --mht-sidebar-shell-bg-strong: color-mix(
    in srgb,
    var(--color-area-hub-wellness-band-a) 56%,
    transparent
  );
  --mht-sidebar-shell-accent: var(--color-wellness-accent);
}

.hotips-area-landing__section-sidebar-shell{
  position: relative;
  isolation: isolate;
  overflow: visible;

  display: grid;
  gap: var(--space-md);

  padding: var(--space-lg);

  border: var(--border-width-thin) var(--border-style-standard) var(--mht-sidebar-shell-border);
  border-radius: var(--radius-lg);

  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-white) 12%, transparent),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      var(--mht-sidebar-shell-bg),
      var(--mht-sidebar-shell-bg-strong)
    );

  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);

  color: var(--mht-sidebar-shell-text);
}


.hotips-area-landing__section-sidebar-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hotips-area-landing-image);
  background-size: cover;
  background-position: var(--article-card-media-position, right center);
  background-repeat: no-repeat;
  opacity: 0.16;
  filter: saturate(0.95) contrast(1.02);
  pointer-events: none;
}

.hotips-area-landing__section-sidebar-shell::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(
      circle at 74% 0%,
      color-mix(in srgb, var(--color-white) 16%, transparent) 0%,
      transparent 38%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-white) 8%, transparent),
      transparent 46%
    );
  pointer-events: none;
}

.hotips-area-landing__section-sidebar-shell > *{
  position: relative;
  z-index: 2;
}

.hotips-area-landing__area-switcher{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.hotips-area-landing__area-switcher-item{
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  min-width: 0;
  color: var(--mht-sidebar-shell-text);
  text-align: center;
  text-decoration: none;
}

.hotips-area-landing__area-switcher-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(74px, 7vw, 104px);
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--border-width-thin) var(--border-style-standard) color-mix(
    in srgb,
    var(--color-white) 44%,
    transparent
  );
  border-radius: var(--radius-sm);
  background: color-mix(
    in srgb,
    var(--color-white) 12%,
    transparent
  );
  box-shadow: var(--shadow-sm);
}

.hotips-area-landing__area-switcher-icon img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotips-area-landing__area-switcher-label{
  display: block;
  color: var(--mht-sidebar-shell-text);
  font-family: var(--font-heading, var(--font-display, var(--font-accent)));
  font-size: var(--font-size-lg);
  font-weight: 850;
  line-height: var(--line-height-heading);
  text-transform: uppercase;
}

.hotips-area-landing__area-switcher-item:hover .hotips-area-landing__area-switcher-icon,
.hotips-area-landing__area-switcher-item:focus-visible .hotips-area-landing__area-switcher-icon,
.hotips-area-landing__area-switcher-item.is-active .hotips-area-landing__area-switcher-icon{
  border-color: color-mix(
    in srgb,
    var(--mht-sidebar-shell-accent) 58%,
    var(--color-white) 22%
  );
}

.hotips-area-landing__area-switcher-item:hover .hotips-area-landing__area-switcher-label,
.hotips-area-landing__area-switcher-item:focus-visible .hotips-area-landing__area-switcher-label,
.hotips-area-landing__area-switcher-item.is-active .hotips-area-landing__area-switcher-label{
  color: var(--color-white);
}

.hotips-area-landing__section-sidebar-card{
  border-color: var(--mht-sidebar-card-border);
  background: var(--mht-sidebar-card-bg);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
}

.hotips-area-landing__section-sidebar-card + .hotips-area-landing__section-sidebar-card{
  margin-top: var(--space-md);
}

.hotips-area-landing__section-sidebar-kicker{
  color: color-mix(
    in srgb,
    var(--mht-area-side-ink) 82%,
    var(--mht-area-side-accent) 18%
  );
  text-shadow: none;
}

.hotips-area-landing__section-sidebar-title{
  color: var(--mht-area-side-ink);
  text-shadow: none;
}

.hotips-area-landing__section-sidebar-links a,
.hotips-area-landing__section-sidebar-post{
  color: var(--color-area-hub-money-text);
}

.hotips-area-landing__section-sidebar--wellness .hotips-area-landing__section-sidebar-links a,
.hotips-area-landing__section-sidebar--wellness .hotips-area-landing__section-sidebar-post{
  color: var(--color-area-hub-wellness-text);
}

@media (max-width: 980px){
  .hotips-area-landing__area-switcher-icon{
    width: 82px;
  }
}

@media (max-width: 520px){
  .hotips-area-landing__area-switcher{
    gap: var(--space-sm);
  }

  .hotips-area-landing__area-switcher-label{
    font-size: var(--font-size-md);
  }
}

/* =========================================================
   AREA LANDING FAKE SIDEBAR — TRENDING FIRE LINKS
   Uses colourable SVG mask instead of emoji so Money/Wellness can differ.
   ========================================================= */

.hotips-area-landing__section-sidebar--money{
  --mht-trending-fire-color: var(--color-area-hub-money-band-b);
}

.hotips-area-landing__section-sidebar--wellness{
  --mht-trending-fire-color: var(--color-area-hub-wellness-band-a);
}

.hotips-area-landing__section-sidebar-card--trending .hotips-area-landing__section-sidebar-post span:first-child{
  display: inline-grid;
  grid-template-columns: var(--font-size-ui-sm) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-xs);
  min-width: 0;
}

.hotips-area-landing__section-sidebar-card--trending .hotips-area-landing__section-sidebar-post span:first-child::before{
  content: "";
  display: block;
  width: var(--font-size-ui-sm);
  height: var(--font-size-ui-sm);
  margin-top: 0.18em;
  background: var(--mht-trending-fire-color, var(--mht-area-side-accent));

  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.2 22C7.7 22 4 18.4 4 14c0-2.5 1.2-4.8 3.1-6.3.4-.3.9 0 .9.5.1 1 .6 1.9 1.4 2.5-.2-3 1.2-6 3.8-8.4.4-.3.9-.1 1 .4.4 2.6 1.8 4.1 3.1 5.4 1.5 1.6 2.7 3.2 2.7 5.9 0 4.4-3.5 8-7.8 8z'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12.2 22C7.7 22 4 18.4 4 14c0-2.5 1.2-4.8 3.1-6.3.4-.3.9 0 .9.5.1 1 .6 1.9 1.4 2.5-.2-3 1.2-6 3.8-8.4.4-.3.9-.1 1 .4.4 2.6 1.8 4.1 3.1 5.4 1.5 1.6 2.7 3.2 2.7 5.9 0 4.4-3.5 8-7.8 8z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.hotips-area-landing__section-sidebar-card--trending .hotips-area-landing__section-sidebar-post:hover span:first-child::before,
.hotips-area-landing__section-sidebar-card--trending .hotips-area-landing__section-sidebar-post:focus-visible span:first-child::before{
  background: var(--mht-area-side-accent);
}

/* Article type active state inside fake sidebar */
.hotips-area-landing__section-sidebar-links a.is-active,
.hotips-area-landing__section-sidebar-links a[aria-current="page"]{
  color: var(--mht-sidebar-shell-accent, var(--mht-area-side-accent));
  font-weight: 900;
}

.hotips-area-landing__section-sidebar-links a.is-active span:first-child,
.hotips-area-landing__section-sidebar-links a[aria-current="page"] span:first-child{
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-thick);
  text-underline-offset: var(--space-xs);
}

/* Count badge inside fake sidebar article-type links */
.hotips-area-landing__sidebar-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  min-height: 18px;
  margin-left: var(--space-xs);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  background: color-mix(
    in srgb,
    var(--mht-sidebar-shell-accent, var(--mht-area-side-accent)) 16%,
    var(--color-white) 84%
  );
  color: var(--mht-sidebar-shell-accent, var(--mht-area-side-accent));
  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}

/* =========================================================
   MOBILE VIEWPORT + AREA LANDING STACK AUTHORITY
   Keep this after the desktop pseudo-sidebar declarations.
   ========================================================= */
@media (max-width:760px){
  .hotips-area-landing,
  .hotips-area-landing > .hotips-container,
  .hotips-area-landing__sticky-head,
  .hotips-area-landing__hero,
  .hotips-area-landing__content-menu,
  .hotips-area-landing__filters,
  .hotips-area-landing__posts,
  .hotips-area-landing__posts-layout,
  .hotips-area-landing__posts-main,
  .hotips-area-landing__section-sidebar,
  .hotips-area-landing__section-sidebar-shell{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .hotips-area-landing,
  .hotips-area-landing > .hotips-container{
    overflow-x:hidden;
  }

  @supports (overflow:clip){
    .hotips-area-landing,
    .hotips-area-landing > .hotips-container{
      overflow-x:clip;
    }
  }

  .hotips-area-landing > .hotips-container{
    padding-inline:clamp(8px, 2.5vw, 14px);
  }

  .hotips-area-landing__posts-layout{
    grid-template-columns:minmax(0, 1fr);
    gap:var(--space-lg);
  }

  .hotips-area-landing__posts-main,
  .hotips-area-landing__section-sidebar{
    grid-column:1;
    justify-self:stretch;
  }

  .hotips-area-landing__section-sidebar{
    max-width:none;
  }

  .hotips-area-landing__section-sidebar-shell{
    overflow:hidden;
    padding:clamp(12px, 3vw, 18px);
  }

  .hotips-area-landing__filters{
    grid-template-columns:minmax(0, 1fr);
    overflow:hidden;
  }

  .hotips-area-landing__filter-track{
    width:100%;
    max-width:100%;
    min-width:0;
    overscroll-behavior-x:contain;
  }

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

  /*
   * Keep the article controls in one compact row above the article.
   * Link copy remains in the DOM for screen readers; hover/focus tooltips
   * provide the short labels on pointer and keyboard devices.
   */
  .hotips-article-nav-slot--top{
    justify-content:flex-end;
    margin:var(--space-md) 0 var(--space-lg);
    overflow:visible;
  }

  .hotips-article-nav-slot--top .hotips-article-nav{
    display:grid;
    grid-template-columns:repeat(3, 36px);
    justify-content:end;
    gap:8px;
    width:auto;
    max-width:100%;
    margin:0;
    overflow:visible;
  }

  .hotips-article-nav-slot--top .hotips-article-nav__slot,
  .hotips-article-nav-slot--top .hotips-article-nav__slot--previous,
  .hotips-article-nav-slot--top .hotips-article-nav__slot--next{
    display:block;
    width:36px;
    min-width:36px;
    max-width:36px;
    overflow:visible;
  }

  .hotips-article-nav-slot--top .hotips-article-nav__card,
  .hotips-article-nav-slot--top .hotips-article-nav__back{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    min-width:36px;
    max-width:36px;
    height:36px;
    min-height:36px;
    padding:0;
    border-radius:var(--radius-pill);
    overflow:visible;
    box-sizing:border-box;
  }

  .hotips-article-nav-slot--top .hotips-article-nav__eyebrow,
  .hotips-article-nav-slot--top .hotips-article-nav__title,
  .hotips-article-nav-slot--top .hotips-article-nav__suggestion{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }

  .hotips-article-nav-slot--top .hotips-article-nav__card::after,
  .hotips-article-nav-slot--top .hotips-article-nav__card--previous::after{
    top:50%;
    right:auto;
    left:50%;
    width:22px;
    height:22px;
    transform:translate(-50%, -50%);
  }

  .hotips-article-nav-slot--top .hotips-article-nav__back{
    font-size:0;
    letter-spacing:0;
  }

  .hotips-article-nav-slot--top .hotips-article-nav__back::after{
    width:22px;
    height:22px;
    margin:0;
    font-size:var(--font-size-ui-sm);
  }

  .hotips-article-nav-slot--top .hotips-article-nav__card::before,
  .hotips-article-nav-slot--top .hotips-article-nav__back::before{
    position:absolute;
    right:0;
    bottom:calc(100% + 7px);
    z-index:8;
    display:block;
    width:max-content;
    max-width:min(180px, 75vw);
    padding:5px 8px;
    border-radius:var(--radius-xs);
    background:var(--hotips-article-nav-area);
    color:var(--hotips-article-nav-invert);
    font-family:var(--hotips-article-nav-font-family);
    font-size:var(--font-size-ui-xs);
    font-weight:800;
    line-height:1.2;
    letter-spacing:0;
    text-transform:none;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(3px);
    transition:opacity var(--duration-fast) var(--ease-soft),
      transform var(--duration-fast) var(--ease-soft),
      visibility var(--duration-fast) var(--ease-soft);
    box-shadow:var(--shadow-sm);
  }

  .hotips-article-nav-slot--top .hotips-article-nav__card--previous::before{
    content:"Previous article";
    right:auto;
    left:0;
  }

  .hotips-article-nav-slot--top .hotips-article-nav__back::before{
    content:"Back to articles";
    right:50%;
    transform:translate(50%, 3px);
  }

  .hotips-article-nav-slot--top .hotips-article-nav__card--next::before{
    content:"Next article";
  }

  .hotips-article-nav-slot--top .hotips-article-nav__card--caught-up::before{
    content:"More articles";
  }

  .hotips-article-nav-slot--top .hotips-article-nav__card:hover::before,
  .hotips-article-nav-slot--top .hotips-article-nav__card:focus-visible::before,
  .hotips-article-nav-slot--top .hotips-article-nav__back:hover::before,
  .hotips-article-nav-slot--top .hotips-article-nav__back:focus-visible::before{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }

  .hotips-article-nav-slot--top .hotips-article-nav__back:hover::before,
  .hotips-article-nav-slot--top .hotips-article-nav__back:focus-visible::before{
    transform:translate(50%, 0);
  }
}

@media (max-width:520px){
  .hotips-area-landing__posts-main{
    padding:10px;
  }

  .hotips-area-landing__content-menu-links{
    grid-template-columns:minmax(0, 1fr);
  }

  .hotips-area-landing__area-switcher-icon{
    width:clamp(56px, 18vw, 72px);
  }
}

/* Mobile-only area-menu elements stay absent on desktop. */
.hotips-area-landing__content-menu-title-mobile,
.hotips-area-landing__content-menu-copy-mobile,
.hotips-area-landing__content-menu-count,
.hotips-area-landing__content-menu-link-icon,
.hotips-area-landing__filter-dropdown{
  display:none;
}

/* =========================================================
   FINAL MOBILE AREA-HUB WIDTH + MENU AUTHORITY
   - CSS-owned responsive sizing
   - Compact two-shortcut content menu
   - One accessible tap-to-open topic menu; desktop topic pills stay unchanged
   ========================================================= */
@media (max-width:760px){
  .hotips-area-landing{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }

  @supports (overflow:clip){
    .hotips-area-landing{
      overflow-x:clip !important;
    }
  }

  .hotips-area-landing > .hotips-container{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-inline:auto !important;
    padding-inline:12px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  .hotips-area-landing__sticky-head,
  .hotips-area-landing__hero,
  .hotips-area-landing__content-menu,
  .hotips-area-landing__filters,
  .hotips-area-landing__posts,
  .hotips-area-landing__posts-layout,
  .hotips-area-landing__posts-main,
  .hotips-area-landing__section-sidebar,
  .hotips-area-landing__section-sidebar-shell,
  .hotips-area-landing__grid,
  .hotips-area-landing .hotips-content-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .hotips-area-landing__sticky-head .hotips-area-landing__content-menu,
  .hotips-area-landing__sticky-head .hotips-area-landing__filters{
    margin-inline:0 !important;
  }

  .hotips-area-landing__hero,
  .hotips-area-landing__content-menu,
  .hotips-area-landing__content-menu-links,
  .hotips-area-landing__filters,
  .hotips-area-landing__posts-layout,
  .hotips-area-landing__grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .hotips-area-landing__hero-image,
  .hotips-area-landing__hero-image img,
  .hotips-area-landing .hotips-content-card img{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .hotips-area-landing__content-menu{
    display:block !important;
    margin:0 0 9px !important;
    padding:12px !important;
    border-radius:16px !important;
  }

  .hotips-area-landing__content-menu-head{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:12px !important;
    min-width:0 !important;
    padding:0 2px 10px !important;
  }

  .hotips-area-landing__content-menu-head > div{
    min-width:0 !important;
  }

  .hotips-area-landing__content-menu-kicker{
    margin-bottom:3px !important;
    font-size:10px !important;
    letter-spacing:.1em !important;
  }

  .hotips-area-landing__content-menu-title{
    font-size:clamp(20px, 5.4vw, 24px) !important;
    line-height:1.05 !important;
  }

  .hotips-area-landing__content-menu-title-desktop,
  .hotips-area-landing__content-menu-copy-desktop{
    display:none !important;
  }

  .hotips-area-landing__content-menu-title-mobile,
  .hotips-area-landing__content-menu-copy-mobile,
  .hotips-area-landing__content-menu-count,
  .hotips-area-landing__content-menu-link-icon{
    display:block !important;
  }

  .hotips-area-landing__content-menu-count{
    flex:0 0 auto !important;
    color:var(--color-text-muted) !important;
    font-family:var(--font-body) !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  .hotips-area-landing__content-menu-links{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:7px !important;
    width:100% !important;
    min-width:0 !important;
  }

  .hotips-area-landing__content-menu-link{
    display:grid !important;
    grid-template-columns:22px minmax(0, 1fr) 12px !important;
    align-items:center !important;
    gap:6px !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:58px !important;
    padding:8px !important;
    border-radius:12px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .hotips-area-landing__content-menu-link-icon{
    width:20px !important;
    height:20px !important;
    background:var(--mht-area-side-accent) !important;
    -webkit-mask-position:center !important;
    mask-position:center !important;
    -webkit-mask-repeat:no-repeat !important;
    mask-repeat:no-repeat !important;
    -webkit-mask-size:contain !important;
    mask-size:contain !important;
  }

  .hotips-area-landing__content-menu-link--guide .hotips-area-landing__content-menu-link-icon{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h5.5A2.5 2.5 0 0 1 12 5.5V21a3 3 0 0 0-3-3H4V3Zm16 0h-5.5A2.5 2.5 0 0 0 12 5.5V21a3 3 0 0 1 3-3h5V3Z'/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h5.5A2.5 2.5 0 0 1 12 5.5V21a3 3 0 0 0-3-3H4V3Zm16 0h-5.5A2.5 2.5 0 0 0 12 5.5V21a3 3 0 0 1 3-3h5V3Z'/%3E%3C/svg%3E") !important;
  }

  .hotips-area-landing__content-menu-link--latest .hotips-area-landing__content-menu-link-icon{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h11a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2Zm13 5v10a1 1 0 0 0 2 0V8h-2ZM7 7v4h7V7H7Zm0 7v2h7v-2H7Zm0 4v1h7v-1H7Z'/%3E%3C/svg%3E") !important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 3h11a2 2 0 0 1 2 2v1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a3 3 0 0 1-3-3V5a2 2 0 0 1 2-2Zm13 5v10a1 1 0 0 0 2 0V8h-2ZM7 7v4h7V7H7Zm0 7v2h7v-2H7Zm0 4v1h7v-1H7Z'/%3E%3C/svg%3E") !important;
  }

  .hotips-area-landing__content-menu-link > span:nth-child(2){
    min-width:0 !important;
  }

  .hotips-area-landing__content-menu-link strong,
  .hotips-area-landing__content-menu-link small{
    display:block !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .hotips-area-landing__content-menu-link strong{
    font-size:11px !important;
    line-height:1.25 !important;
  }

  .hotips-area-landing__content-menu-link small{
    margin-top:2px !important;
    font-size:10px !important;
    line-height:1.2 !important;
  }

  .hotips-area-landing__content-menu-link .hotips-area-landing__content-menu-copy-desktop{
    display:none !important;
  }

  .hotips-area-landing__content-menu-link .hotips-area-landing__content-menu-copy-mobile{
    display:block !important;
  }

  .hotips-area-landing__content-menu-link > span:last-child{
    font-size:18px !important;
  }

  .hotips-area-landing__filters--desktop{
    display:none !important;
  }

  .hotips-area-landing__filter-dropdown{
    --mht-mobile-filter-bg:var(--color-area-hub-money-band-a, var(--color-dark));
    --mht-mobile-filter-accent:var(--color-tech-accent);
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin:0 0 var(--space-md) !important;
    padding:0 !important;
    border:1px solid color-mix(in srgb, var(--color-white) 22%, transparent) !important;
    border-radius:13px !important;
    background:var(--mht-mobile-filter-bg) !important;
    color:var(--color-white) !important;
    box-shadow:var(--shadow-sm) !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .hotips-area-landing__filter-dropdown--wellness{
    --mht-mobile-filter-bg:var(--color-area-hub-wellness-band-a, var(--color-wellness-dark));
    --mht-mobile-filter-accent:var(--color-wellness-accent);
  }

  .hotips-area-landing__filter-dropdown-summary{
    display:grid !important;
    grid-template-columns:auto minmax(0, 1fr) 16px !important;
    align-items:center !important;
    gap:9px !important;
    min-height:50px !important;
    margin:0 !important;
    padding:9px 12px !important;
    color:inherit !important;
    font-family:var(--font-body) !important;
    font-size:11px !important;
    font-weight:850 !important;
    line-height:1.2 !important;
    list-style:none !important;
    box-sizing:border-box !important;
  }

  .hotips-area-landing__filter-dropdown-summary::-webkit-details-marker{
    display:none !important;
  }

  .hotips-area-landing__filter-dropdown-summary > span:first-child{
    white-space:nowrap !important;
  }

  .hotips-area-landing__filter-dropdown-summary strong{
    min-width:0 !important;
    overflow:hidden !important;
    color:color-mix(in srgb, var(--color-white) 86%, transparent) !important;
    font-size:11px !important;
    font-weight:650 !important;
    text-align:right !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .hotips-area-landing__filter-dropdown-summary i{
    display:block !important;
    width:10px !important;
    height:10px !important;
    margin:0 !important;
    border-right:2px solid var(--mht-mobile-filter-accent) !important;
    border-bottom:2px solid var(--mht-mobile-filter-accent) !important;
    transform:translateY(-2px) rotate(45deg) !important;
    transition:transform var(--duration-fast) var(--ease-soft) !important;
  }

  .hotips-area-landing__filter-dropdown[open] .hotips-area-landing__filter-dropdown-summary i{
    transform:translateY(3px) rotate(225deg) !important;
  }

  .hotips-area-landing__filter-dropdown-menu{
    display:grid !important;
    gap:0 !important;
    margin:0 !important;
    padding:6px !important;
    border-top:1px solid color-mix(in srgb, var(--color-white) 18%, transparent) !important;
    background:color-mix(in srgb, var(--mht-mobile-filter-bg) 88%, var(--color-white) 12%) !important;
  }

  .hotips-area-landing__filter-dropdown-option{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    min-height:42px !important;
    margin:0 !important;
    padding:9px 10px !important;
    border:0 !important;
    border-bottom:1px solid color-mix(in srgb, var(--color-white) 14%, transparent) !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--color-white) !important;
    font-family:var(--font-body) !important;
    font-size:12px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    text-align:left !important;
    text-decoration:none !important;
    box-sizing:border-box !important;
  }

  .hotips-area-landing__filter-dropdown-option:last-child{
    border-bottom:0 !important;
  }

  .hotips-area-landing__filter-dropdown-option > span:first-child{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .hotips-area-landing__filter-dropdown-option > span:last-child{
    flex:0 0 auto !important;
    color:var(--mht-mobile-filter-accent) !important;
    font-size:18px !important;
    line-height:1 !important;
  }

  .hotips-area-landing__filter-dropdown-option.is-active,
  .hotips-area-landing__filter-dropdown-option[aria-current="page"]{
    border-radius:8px !important;
    background:var(--color-surface) !important;
    color:var(--color-heading) !important;
    font-weight:850 !important;
  }

  .hotips-area-landing__posts{
    padding:12px !important;
  }

  .hotips-area-landing__section-sidebar{
    grid-column:1 !important;
    justify-self:stretch !important;
  }
}

@media (max-width:380px){
  .hotips-area-landing > .hotips-container{
    padding-inline:9px !important;
  }

  .hotips-area-landing__content-menu-link{
    grid-template-columns:20px minmax(0, 1fr) !important;
  }

  .hotips-area-landing__content-menu-link > span:last-child{
    display:none !important;
  }

  .hotips-area-landing__filter-dropdown-summary{
    grid-template-columns:minmax(0, 1fr) 16px !important;
  }

  .hotips-area-landing__filter-dropdown-summary > span:first-child{
    display:none !important;
  }
}

/* =========================================================
   KEYPOINTS LINKS INSIDE BLOG BUILDER
   - Protect component link colours from global article link defaults
   - Uses Keypoints active section tokens
   ========================================================= */

.my-blog-builder .hotips-keypoints a{
  color: var(--kp-link-color) !important;
  text-decoration: none !important;
  background-image:
    linear-gradient(
      transparent 58%,
      var(--kp-link-highlight) 58%,
      var(--kp-link-highlight) 100%
    ) !important;
  box-shadow: inset 0 -1px 0 var(--kp-link-underline) !important;
}

.my-blog-builder .hotips-keypoints a:hover,
.my-blog-builder .hotips-keypoints a:focus,
.my-blog-builder .hotips-keypoints a:focus-visible{
  color: var(--kp-link-color-hover) !important;
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  background-image:
    linear-gradient(
      transparent 42%,
      var(--kp-link-highlight-hover) 42%,
      var(--kp-link-highlight-hover) 100%
    ) !important;
  box-shadow:
    inset 0 -2px 0 var(--kp-link-underline),
    0 0 0 3px var(--kp-link-focus-ring) !important;
  outline: none !important;
}

/* =========================================================
   404 CUSTOM SEARCH FORM
   ========================================================= */

.mht-404-search {
	max-width: 720px;
	margin-top: 28px;
}

.mht-404-search-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr) auto;
	gap: 10px;
	padding: 8px;
	border-radius: var(--radius-sm, 16px);
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.mht-404-search-form__field,
.mht-404-search-form__select {
	width: 100%;
	min-height: 44px;
	border: 0;
	border-radius: 12px;
	padding: 0 14px;
	background: rgba(255, 255, 255, 0.96);
	color: var(--color-dark, #081c2d);
	font: inherit;
}

.mht-404-search-form__select {
	cursor: pointer;
}

.mht-404-search-form__submit {
	min-height: 44px;
	border: 0;
	border-radius: 12px;
	padding: 0 18px;
	font-weight: 800;
	cursor: pointer;
	background: var(--color-tech-accent, #d4af37);
	color: var(--color-dark, #081c2d);
}

.mht-404-search-form__submit:hover {
	background: #f0cd63;
}

@media (max-width: 760px) {
	.mht-404-search-form {
		grid-template-columns: 1fr;
	}

	.mht-404-search-form__submit {
		width: 100%;
	}
}
/* =========================================================
   MYHOTIPS SITE SEARCH HERO SHELL — TOKENISED VERSION
   File suggestion: assets/css/mht-site-search.css

   Purpose:
   - Gives [mht_site_search_results] a contained hero-style shell.
   - Uses the current search page featured image as an internal ghost image.
   - Uses MyHotips brand tokens for colour, spacing, radii, shadows and type.
   - Keeps the search title smaller than the first oversized pass.
   - Prevents the search form from breaking outside the wrapper.
   ========================================================= */

/* =========================================================
   00. SEARCH PAGE RESET WHEN MODULE IS USED AS THE PAGE HERO
   ========================================================= */

body.mht-has-site-search-results .hotips-content-single__header{
  display: none !important;
}

body.mht-has-site-search-results .hotips-content-single,
body.mht-has-site-search-results .hotips-content-single__body,
body.mht-has-site-search-results .entry-content{
  overflow: visible;
}

body.mht-has-site-search-results .hotips-content-single{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: var(--border-none) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.mht-has-site-search-results .hotips-content-single__body{
  padding-top: var(--space-none) !important;
}

/* =========================================================
   01. SEARCH RESULTS WRAPPER TOKENS
   ========================================================= */

.mht-site-search-results{
  --mht-search-page-pad: var(--mht-context-shell-page-pad, var(--space-lg));

  --mht-search-shell-width: var(
    --mht-context-shell-width,
    min(
      calc(100vw - (var(--mht-search-page-pad) * 2)),
      1440px
    )
  );

  --mht-search-shell-pad: clamp(var(--space-lg), 2vw, var(--panel-pad));
  --mht-search-shell-radius: var(--mht-context-shell-radius, calc(var(--radius-lg) + var(--space-sm)));

  --mht-search-band-a: var(--color-area-hub-money-band-a);
  --mht-search-band-b: var(--color-area-hub-money-band-b);
  --mht-search-border: var(--color-area-hub-money-border);
  --mht-search-accent: var(--color-tech-accent);

  --mht-search-text-invert: var(--color-white);
  --mht-search-text-soft: color-mix(in srgb, var(--color-white) 78%, transparent);
  --mht-search-surface: var(--color-surface);
  --mht-search-surface-muted: var(--color-surface-muted);
  --mht-search-input-text: var(--color-dark);
  --mht-search-input-placeholder: color-mix(in srgb, var(--color-dark-muted) 78%, transparent);

  --mht-search-hero-image: none;
  --mht-search-hero-image-opacity: 0.42;
  --mht-search-hero-image-position: 100% 38%;
  --mht-search-hero-image-scale: 1.04;

  --mht-search-title-size: clamp(var(--font-size-content-h1), 3.2vw, 3.25rem);
  --mht-search-title-line-height: var(--line-height-heading);
  --mht-search-title-letter-spacing: -0.035em;

  --mht-search-form-control-height: var(--kit-form-input-min-height, 46px);
  --mht-search-form-gap: var(--space-sm);

  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-top: var(--space-lg);
  overflow: visible;
}

/* =========================================================
   02. HERO SHELL
   ========================================================= */

.mht-site-search-hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;

  box-sizing: border-box;
  width: 100%;
  max-width: min(100%, var(--mht-search-shell-width));

  margin: var(--space-none) auto var(--space-xl);
  padding: var(--mht-search-shell-pad);

  border-radius: var(--mht-search-shell-radius);
  border: var(--border-width-thin) var(--border-style-standard) color-mix(
    in srgb,
    var(--mht-search-border) 54%,
    var(--color-white) 32%
  );

  background:
    linear-gradient(
      135deg,
      var(--mht-search-band-a) 0%,
      color-mix(
        in srgb,
        var(--mht-search-band-b) 76%,
        var(--mht-search-band-a) 24%
      ) 54%,
      color-mix(
        in srgb,
        var(--mht-search-band-a) 88%,
        var(--mht-search-band-b) 12%
      ) 100%
    );

  box-shadow: var(--shadow-lg), inset 0 var(--border-width-thin) 0 color-mix(in srgb, var(--color-white) 20%, transparent);

  backdrop-filter: blur(var(--glass-blur-sm)) saturate(122%);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(122%);
}

.mht-site-search-hero--wellness{
  --mht-search-band-a: var(--color-area-hub-wellness-band-a);
  --mht-search-band-b: var(--color-area-hub-wellness-band-b);
  --mht-search-border: var(--color-area-hub-wellness-border);
  --mht-search-accent: var(--color-wellness-accent);
}

.mht-site-search-hero--money,
.mht-site-search-hero--neutral{
  --mht-search-band-a: var(--color-area-hub-money-band-a);
  --mht-search-band-b: var(--color-area-hub-money-band-b);
  --mht-search-border: var(--color-area-hub-money-border);
  --mht-search-accent: var(--color-tech-accent);
}

.mht-site-search-hero::before,
.mht-site-search-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Internal contained ghost image. */
.mht-site-search-hero::before{
  z-index: 0;

  background-image: var(--mht-search-hero-image);
  background-size: cover;
  background-position: var(--mht-search-hero-image-position);
  background-repeat: no-repeat;

  opacity: var(--mht-search-hero-image-opacity);

  filter:
    saturate(114%)
    contrast(1.08)
    brightness(0.98);

  transform: scale(var(--mht-search-hero-image-scale));
  transform-origin: right center;

  mask-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-black-soft) 14%, transparent) 0%,
      color-mix(in srgb, var(--color-black-soft) 14%, transparent) 18%,
      var(--color-black-soft) 46%,
      var(--color-black-soft) 100%
    );

  -webkit-mask-image:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--color-black-soft) 14%, transparent) 0%,
      color-mix(in srgb, var(--color-black-soft) 14%, transparent) 18%,
      var(--color-black-soft) 46%,
      var(--color-black-soft) 100%
    );
}

/* Wash layer above the ghost image. */
.mht-site-search-hero::after{
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--mht-search-band-a) 84%, transparent) 0%,
      color-mix(in srgb, var(--mht-search-band-a) 74%, transparent) 24%,
      color-mix(in srgb, var(--mht-search-band-b) 34%, transparent) 58%,
      color-mix(in srgb, var(--mht-search-band-a) 16%, transparent) 100%
    ),
    radial-gradient(
      circle at 82% 18%,
      color-mix(in srgb, var(--mht-search-accent) 18%, transparent) 0%,
      transparent 26%
    ),
    radial-gradient(
      circle at 12% 18%,
      color-mix(in srgb, var(--color-white) 10%, transparent) 0%,
      transparent 18%
    );
}

.mht-site-search-hero > *{
  position: relative;
  z-index: 2;
}

/* =========================================================
   03. HERO COPY
   ========================================================= */

.mht-site-search-hero__copy{
  width: 100%;
  max-width: 760px;
  min-width: 0;
}

.mht-site-search-hero__eyebrow{
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;

  margin: var(--space-none) var(--space-none) var(--space-xs);
  padding: var(--space-xxs) var(--space-sm);

  border-radius: var(--radius-pill);
  border: var(--border-width-thin) var(--border-style-standard) color-mix(in srgb, var(--color-white) 30%, transparent);

  background: color-mix(in srgb, var(--color-white) 14%, transparent);
  color: var(--mht-search-text-invert);

  font-family: var(--font-body);
  font-size: var(--font-size-ui-xs);
  font-weight: 900;
  line-height: var(--line-height-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;

  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
}

.mht-site-search-hero__title,
.mht-site-search-results__title.mht-site-search-hero__title{
  margin: var(--space-none);

  color: var(--mht-search-text-invert);

  font-family: var(--font-display);
  font-size: var(--mht-search-title-size);
  font-weight: 700;
  line-height: var(--mht-search-title-line-height);
  letter-spacing: var(--mht-search-title-letter-spacing);
}

.mht-site-search-hero__intro,
.mht-site-search-results__count.mht-site-search-hero__intro{
  width: 100%;
  max-width: 640px;
  margin: var(--space-sm) var(--space-none) var(--space-none);

  color: var(--mht-search-text-soft);

  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 750;
  line-height: var(--line-height-ui);
}

/* =========================================================
   04. FORM PANEL + FORM ELEMENTS
   ========================================================= */

.mht-site-search-hero__form{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  margin-top: var(--space-lg);
  padding: var(--space-sm);

  border-radius: var(--panel-radius);
  border: var(--border-width-thin) var(--border-style-standard) color-mix(in srgb, var(--color-white) 30%, transparent);

  background: color-mix(in srgb, var(--color-white) 18%, transparent);

  box-shadow: var(--shadow-md), inset 0 var(--border-width-thin) 0 color-mix(in srgb, var(--color-white) 22%, transparent);

  overflow: hidden;

  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
}

.mht-site-search-hero .mht-site-search{
  width: 100%;
  max-width: 100%;
  margin: var(--space-none);
}

.mht-site-search-hero .mht-site-search__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--mht-search-form-gap);

  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.mht-site-search-hero .mht-site-search__field,
.mht-site-search-hero .mht-site-search__select{
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--mht-search-form-control-height);

  padding: var(--space-none) var(--space-md);

  border-radius: var(--radius-sm);
  border: var(--border-width-thin) var(--border-style-standard) color-mix(in srgb, var(--color-white) 54%, transparent);

  background: color-mix(in srgb, var(--mht-search-surface) 92%, transparent);
  color: var(--mht-search-input-text);

  font-family: var(--font-body);
  font-size: var(--font-size-ui);
  font-weight: 750;
  line-height: var(--line-height-ui);

  outline: none;
  box-shadow: none;
}

.mht-site-search-hero .mht-site-search__field{
  flex: 1 1 420px;
}

.mht-site-search-hero .mht-site-search__select{
  flex: 1 1 170px;
  max-width: 260px;
}

.mht-site-search-hero .mht-site-search__field::placeholder{
  color: var(--mht-search-input-placeholder);
}

.mht-site-search-hero .mht-site-search__field:focus,
.mht-site-search-hero .mht-site-search__select:focus{
  border-color: color-mix(in srgb, var(--mht-search-accent) 78%, var(--color-white) 22%);
  box-shadow: var(--login-focus-shadow, 0 0 0 3px color-mix(in srgb, var(--mht-search-accent) 22%, transparent));
}

.mht-site-search-hero .mht-site-search__submit{
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  min-width: 116px;
  min-height: var(--mht-search-form-control-height);
  padding: var(--space-none) var(--space-lg);

  border: var(--border-width-thin) var(--border-style-standard) color-mix(in srgb, var(--mht-search-accent) 42%, transparent);
  border-radius: var(--radius-sm);

  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--button-navy-bg) 90%, var(--mht-search-accent) 10%) 0%,
      var(--button-navy-bg) 100%
    );

  color: var(--button-navy-text);

  font-family: var(--font-body);
  font-size: var(--font-size-ui);
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  box-shadow: var(--shadow-sm);

  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard);
}

.mht-site-search-hero .mht-site-search__submit:hover,
.mht-site-search-hero .mht-site-search__submit:focus-visible{
  border-color: color-mix(in srgb, var(--mht-search-accent) 76%, var(--color-white) 12%);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--button-navy-bg-hover) 82%, var(--mht-search-accent) 18%) 0%,
      var(--button-navy-bg-hover) 100%
    );
  transform: translateY(var(--motion-lift-xs));
}

/* =========================================================
   05. RESULTS BELOW HERO
   ========================================================= */

.mht-site-search-results__grid,
.mht-site-search-results__empty,
.mht-site-search-results__pagination{
  width: 100%;
  max-width: min(100%, var(--mht-search-shell-width));
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* =========================================================
   06. RESPONSIVE
   ========================================================= */

@media (max-width: 1180px){
  .mht-site-search-hero .mht-site-search__field{
    flex-basis: 100%;
  }

  .mht-site-search-hero .mht-site-search__select{
    flex: 1 1 calc(50% - var(--mht-search-form-gap));
    max-width: none;
  }

  .mht-site-search-hero .mht-site-search__submit{
    flex: 1 1 160px;
  }
}

@media (max-width: 720px){
  .mht-site-search-results{
    padding-top: var(--space-md);
  }

  .mht-site-search-hero{
    padding: var(--space-md);
    border-radius: var(--radius-lg);
  }

  .mht-site-search-hero__title,
  .mht-site-search-results__title.mht-site-search-hero__title{
    font-size: var(--font-size-site-h1);
    letter-spacing: -0.025em;
  }

  .mht-site-search-hero__intro,
  .mht-site-search-results__count.mht-site-search-hero__intro{
    font-size: var(--font-size-body-mobile);
  }

  .mht-site-search-hero .mht-site-search__field,
  .mht-site-search-hero .mht-site-search__select,
  .mht-site-search-hero .mht-site-search__submit{
    flex: 1 1 100%;
    max-width: none;
    width: 100%;
  }
}

/* =========================================================
   ARTICLE NAVIGATION VECTOR FIX
   - Real markup icons, no CSS generated unicode content.
   - Avoids encoded glyphs showing as \203A / \21A9.
   ========================================================= */

.hotips-article-nav__card::after,
.hotips-article-nav__card--previous::after,
.hotips-article-nav__back::after{
  content: none !important;
  display: none !important;
}

.hotips-article-nav__vector,
.hotips-article-nav__back-vector{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--hotips-article-nav-accent);
  color: var(--hotips-article-nav-area);

  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  line-height: 1;

  box-shadow: 0 4px 10px color-mix(in srgb, var(--hotips-article-nav-accent) 28%, transparent);
}

.hotips-article-nav__vector{
  position: absolute;
  top: 50%;
  z-index: 3;

  width: 24px;
  height: 24px;
  transform: translateY(-50%);

  font-size: var(--hotips-article-nav-arrow-font-size);
}

.hotips-article-nav__vector--previous{
  left: 12px;
}

.hotips-article-nav__vector--next{
  right: 12px;
}

.hotips-article-nav__back-text{
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hotips-article-nav__back-vector{
  width: 15px;
  height: 15px;
  margin-left: var(--space-xs);

  background: var(--hotips-article-nav-area);
  color: var(--hotips-article-nav-invert);

  font-size: var(--font-size-ui-sm);
}

/* =========================================================
   ARTICLE NAV SVG ICON FIX
   - Uses real inline SVG icons instead of generated unicode arrows
   - Prevents encoding issues such as \203A / \21A9 showing in the UI
   ========================================================= */

.hotips-article-nav__card::after,
.hotips-article-nav__back::after,
.hotips-article-nav__card--previous::after,
.hotips-article-nav__card--empty::after,
.hotips-article-nav__card--caught-up::after{
  content: none !important;
  display: none !important;
}

.hotips-article-nav__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  border-radius: var(--radius-pill);
  background: var(--hotips-article-nav-accent);
  color: var(--hotips-article-nav-area);

  line-height: 1;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--hotips-article-nav-accent) 28%, transparent);
}

.hotips-article-nav__icon svg{
  display: block;
  width: 62%;
  height: 62%;

  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hotips-article-nav__vector{
  position: absolute;
  top: 50%;
  z-index: 4;

  width: 24px;
  height: 24px;
  transform: translateY(-50%);
}

.hotips-article-nav__vector--previous{
  left: 12px;
}

.hotips-article-nav__vector--next{
  right: 12px;
}

.hotips-article-nav__back{
  gap: var(--space-xs);
}

.hotips-article-nav__back-vector{
  position: static;
  width: 15px;
  height: 15px;
  margin-left: 0;

  background: var(--hotips-article-nav-area);
  color: var(--hotips-article-nav-invert);
  box-shadow: none;
}

.hotips-article-nav__back-vector svg{
  width: 68%;
  height: 68%;
  stroke-width: 2.8;
}

.hotips-article-nav__card--caught-up .hotips-article-nav__icon{
  background: var(--hotips-article-nav-caught-accent);
  color: var(--hotips-article-nav-caught-area);
}

.hotips-article-nav__card--empty .hotips-article-nav__icon{
  display: none;
}

.hotips-article-nav-slot--top .hotips-article-nav__vector{
  width: 17px;
  height: 17px;
  box-shadow: none;
}

.hotips-article-nav-slot--top .hotips-article-nav__vector--previous{
  left: 6px;
}

.hotips-article-nav-slot--top .hotips-article-nav__vector--next{
  right: 6px;
}

.hotips-article-nav-slot--top .hotips-article-nav__back-vector{
  width: 12px;
  height: 12px;
}



/* =========================================================
   ARTICLE NAVIGATION SVG ICON HARD OVERRIDE V4
   - Do not generate arrow/vector characters with CSS.
   - Icons are now real inline SVG from article-navigation.php.
   ========================================================= */

.hotips-article-nav--svg-icons .hotips-article-nav__card::before,
.hotips-article-nav--svg-icons .hotips-article-nav__card::after,
.hotips-article-nav--svg-icons .hotips-article-nav__back::before,
.hotips-article-nav--svg-icons .hotips-article-nav__back::after,
.hotips-article-nav--svg-icons .hotips-article-nav__card--previous::after,
.hotips-article-nav--svg-icons .hotips-article-nav__card--next::after,
.hotips-article-nav--svg-icons .hotips-article-nav__card--empty::after,
.hotips-article-nav--svg-icons .hotips-article-nav__card--caught-up::after{
  content: none !important;
  display: none !important;
}

.hotips-article-nav--svg-icons .hotips-article-nav__icon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border-radius: var(--radius-pill) !important;
  background: var(--hotips-article-nav-accent) !important;
  color: var(--hotips-article-nav-area) !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.hotips-article-nav--svg-icons .hotips-article-nav__icon svg{
  display: block !important;
  width: 62% !important;
  height: 62% !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.hotips-article-nav--svg-icons .hotips-article-nav__vector{
  position: absolute !important;
  top: 50% !important;
  z-index: 5 !important;
  width: 24px !important;
  height: 24px !important;
  transform: translateY(-50%) !important;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--hotips-article-nav-accent) 28%, transparent) !important;
}

.hotips-article-nav--svg-icons .hotips-article-nav__vector--previous{
  left: 12px !important;
  right: auto !important;
}

.hotips-article-nav--svg-icons .hotips-article-nav__vector--next{
  right: 12px !important;
  left: auto !important;
}

.hotips-article-nav--svg-icons .hotips-article-nav__back{
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-xs) !important;
}

.hotips-article-nav--svg-icons .hotips-article-nav__back-vector{
  position: static !important;
  width: 15px !important;
  height: 15px !important;
  margin-left: 0 !important;
  background: var(--hotips-article-nav-area) !important;
  color: var(--hotips-article-nav-invert) !important;
  box-shadow: none !important;
}

.hotips-article-nav-slot--top .hotips-article-nav--svg-icons .hotips-article-nav__vector{
  width: 17px !important;
  height: 17px !important;
  box-shadow: none !important;
}

.hotips-article-nav-slot--top .hotips-article-nav--svg-icons .hotips-article-nav__vector--previous{
  left: 6px !important;
}

.hotips-article-nav-slot--top .hotips-article-nav--svg-icons .hotips-article-nav__vector--next{
  right: 6px !important;
}

.hotips-article-nav-slot--top .hotips-article-nav--svg-icons .hotips-article-nav__back-vector{
  width: 12px !important;
  height: 12px !important;
}

/* =========================================================
   MOBILE HOMEPAGE HUB — CANONICAL FINAL LAYOUT
   One contained rail card, one active hub and compact navigation.
   Desktop retains the existing two-card presentation.
   ========================================================= */

.hotips-home-intro-nav__mobile-switch,
.hotips-home-intro-nav__mobile-hub-link{
  display: none;
}

@media (max-width: 767px){
  .hotips-home-transition--hub-start,
  .hotips-home-transition--hub-start .hotips-home-intro-nav,
  .hotips-home-transition--hub-start .hotips-container,
  .hotips-home-transition--hub-start .hotips-home-intro-nav__shell,
  .hotips-home-transition--hub-start .hotips-home-intro-nav__intro,
  .hotips-home-transition--hub-start .hotips-home-intro-nav__mobile-switch,
  .hotips-home-transition--hub-start .hotips-home-intro-nav__grid,
  .hotips-home-transition--hub-start .hotips-home-intro-nav__card,
  .hotips-home-transition--hub-start .hotips-home-intro-nav__card-inner,
  .hotips-home-transition--hub-start .hotips-home-intro-nav__quick-tabs,
  .hotips-home-transition--hub-start .hotips-home-docked-featured,
  .hotips-home-transition--hub-start .hotips-home-docked-featured__inner,
  .hotips-home-transition--hub-start .hotips-home-docked-featured__track{
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .hotips-home-transition--hub-start{
    width: 100% !important;
    overflow-x: hidden !important;
  }

  @supports (overflow: clip){
    .hotips-home-transition--hub-start{
      overflow-x: clip !important;
    }
  }

  /* Mobile landing: one normal-flow journey with no scroll-linked staging. */
  html.hotips-home-mobile-static .hotips-home-hero,
  html.hotips-home-mobile-static .hotips-home-hero__inner{
    min-height: clamp(420px, 62svh, 520px) !important;
    height: auto !important;
  }

  html.hotips-home-mobile-static .hotips-home-hero__inner{
    align-items: center !important;
    padding: 28px 12px 82px !important;
  }

  html.hotips-home-mobile-static .hotips-home-hero__media{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  html.hotips-home-mobile-static .hotips-home-hero__panel{
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 520px !important;
    margin-inline: auto !important;
    padding: 18px !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.hotips-home-mobile-static .hotips-home-hero__title{
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1 !important;
  }

  html.hotips-home-mobile-static .hotips-home-hero__text{
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  /* One simple down control; remove the animated mouse-like cue on phones. */
  html.hotips-home-mobile-static section.hotips-home-hero > button.hotips-home-hero__scrollcue{
    bottom: 18px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }

  html.hotips-home-mobile-static section.hotips-home-hero > button.hotips-home-hero__scrollcue .hotips-home-hero__scrollcue-line,
  html.hotips-home-mobile-static section.hotips-home-hero > button.hotips-home-hero__scrollcue .hotips-home-hero__scrollcue-dot{
    display: none !important;
  }

  html.hotips-home-mobile-static section.hotips-home-hero > button.hotips-home-hero__scrollcue::after{
    content: "\2193" !important;
    margin: 0 !important;
    font-size: 18px !important;
    animation: none !important;
    transform: none !important;
  }

  html.hotips-home-mobile-static .hotips-home-transition--hub-start,
  html.hotips-home-mobile-static .hotips-home-transition--hub-start.is-active,
  html.hotips-home-mobile-static .hotips-home-transition--hub-start.is-docked,
  html.hotips-home-mobile-static .hotips-home-transition--hub-start.is-complete{
    --home-transition-progress: 0 !important;
    min-height: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.hotips-home-mobile-static .hotips-home-transition--hub-start .hotips-home-transition__bg,
  html.hotips-home-mobile-static .hotips-home-transition--hub-start .hotips-home-transition__bg-layer,
  html.hotips-home-mobile-static .hotips-home-transition--hub-start .hotips-home-intro-nav,
  html.hotips-home-mobile-static .hotips-home-transition--hub-start .js-hotips-reveal{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }

  /* The second cue between the upper rail and focus switch is redundant. */
  html.hotips-home-mobile-static .hotips-home-hub-scrollcue-wrap{
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-container{
    width: 100% !important;
    margin-inline: auto !important;
    padding-inline: 12px !important;
  }

  /* Latest rail: one readable card contained inside the same page gutter. */
  .hotips-home-transition--hub-start .hotips-home-docked-featured{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    transform: none !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__inner{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "rail-label rail-label"
      "rail-track rail-nav" !important;
    align-items: center !important;
    gap: 7px !important;
    width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-inline: auto !important;
    padding: 9px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__label{
    grid-area: rail-label !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 2px 2px !important;
    border: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__label-copy strong{
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__label-copy span,
  .hotips-home-transition--hub-start .hotips-home-docked-featured__label-icon{
    display: none !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__track{
    grid-area: rail-track !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 100% !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__track::-webkit-scrollbar{
    display: none !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured .hotips-article-card--dock{
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__link{
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 6px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__media{
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__body{
    min-width: 0 !important;
    height: auto !important;
    transform: none !important;
    padding: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__label{
    display: block !important;
    margin: 0 0 3px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured .hotips-article-card--dock .hotips-article-card__title{
    display: -webkit-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    min-height: 0 !important;
    max-height: none !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__nav{
    grid-area: rail-nav !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 30px !important;
    min-width: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__navbutton{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    font-size: 19px !important;
  }

  /* Compact focus heading and guide link. */
  .hotips-home-transition--hub-start .hotips-home-intro-nav{
    width: 100% !important;
    padding: 0 0 28px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__shell{
    width: 100% !important;
    margin: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__intro{
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 8px 0 10px !important;
    padding: 14px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    text-align: left !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__eyebrow{
    margin: 0 0 4px !important;
    font-size: 10px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__title{
    margin: 0 !important;
    font-size: clamp(28px, 8vw, 34px) !important;
    line-height: 1.05 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__text{
    margin: 7px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__story{
    margin: 10px 0 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__story-link{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__story-link strong{
    flex: 0 1 auto !important;
    font-size: 11px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__story-link span{
    display: none !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__story-link em{
    position: static !important;
    flex: 0 0 auto !important;
    transform: none !important;
  }

  /* Mobile area switch: show one hub at a time instead of a very long stack. */
  .hotips-home-intro-nav__mobile-switch{
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    padding: 5px !important;
    border-radius: 15px !important;
    background: color-mix(in srgb, var(--color-surface-muted) 84%, var(--color-dark) 16%) !important;
  }

  .hotips-home-intro-nav__mobile-switch-button{
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--color-text-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
  }

  .hotips-home-intro-nav__mobile-switch-button.is-active{
    background: var(--color-surface) !important;
    color: var(--color-heading) !important;
    box-shadow: 0 4px 14px rgba(22,34,53,0.10) !important;
  }

  .hotips-home-intro-nav__mobile-switch-icon{
    box-sizing: border-box !important;
    display: block !important;
    flex: 0 0 27px !important;
    width: 27px !important;
    height: 27px !important;
    max-width: 27px !important;
    margin: 0 !important;
    padding: 2px !important;
    border: 1px solid rgba(255,255,255,0.76) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.72) !important;
    object-fit: contain !important;
    box-shadow: 0 2px 7px rgba(22,34,53,0.16) !important;
  }

  .hotips-home-intro-nav__mobile-switch-button[data-hotips-home-area-button="money"].is-active .hotips-home-intro-nav__mobile-switch-icon{
    border-color: color-mix(in srgb, var(--color-tech-accent) 52%, white 48%) !important;
  }

  .hotips-home-intro-nav__mobile-switch-button[data-hotips-home-area-button="wellness"].is-active .hotips-home-intro-nav__mobile-switch-icon{
    border-color: color-mix(in srgb, var(--color-wellness-accent) 52%, white 48%) !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__grid{
    display: block !important;
    width: 100% !important;
  }

  .hotips-home-mobile-switch-ready .hotips-home-transition--hub-start .hotips-home-intro-nav__card[data-hotips-home-area-panel]{
    display: none !important;
  }

  .hotips-home-mobile-switch-ready .hotips-home-transition--hub-start .hotips-home-intro-nav__card[data-hotips-home-area-panel].is-mobile-active{
    display: block !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__card{
    box-sizing: border-box !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__card-inner{
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__card-head{
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__card-icon{
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__card-icon img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__card-heading{
    min-width: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__card-kicker{
    margin: 0 0 3px !important;
    font-size: 9px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__card-title{
    margin: 0 !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(22px, 6.5vw, 28px) !important;
    line-height: 1.06 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__card-text{
    margin: 6px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* The large repeated logo panel is decorative duplication on mobile. */
  .hotips-home-transition--hub-start .hotips-home-intro-nav__feature--intro{
    display: none !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__quick-tabs{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 13px 0 0 !important;
    padding: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__quick-tab{
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 62px !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__quick-tab-icon{
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    font-size: 15px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__quick-tab-copy{
    min-width: 0 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__quick-tab-copy strong{
    display: block !important;
    overflow-wrap: anywhere !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__quick-tab-copy small{
    display: none !important;
  }

  .hotips-home-intro-nav__mobile-hub-link{
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 12px 0 0 !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    color: var(--color-white) !important;
    font-family: var(--font-body) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  .hotips-home-intro-nav__card--money .hotips-home-intro-nav__mobile-hub-link{
    background: var(--color-area-hub-money-band-a, var(--color-dark)) !important;
  }

  .hotips-home-intro-nav__card--wellness .hotips-home-intro-nav__mobile-hub-link{
    background: var(--color-area-hub-wellness-band-a, var(--color-wellness-dark)) !important;
  }
}

@media (max-width: 350px){
  .hotips-home-transition--hub-start .hotips-container{
    padding-inline: 9px !important;
  }

  .hotips-home-transition--hub-start .hotips-home-docked-featured__inner{
    width: calc(100% - 18px) !important;
  }

  .hotips-home-transition--hub-start .hotips-home-intro-nav__quick-tabs{
    grid-template-columns: minmax(0, 1fr) !important;
  }
}