/* ============================================================
   Indie Campers Help Center — Zendesk theme
   Variables driven by theme settings (Curlybars).
   ============================================================ */
:root{
  --orange: #ff5b00;
  --orange-dark: #ab4804;
  --orange-soft: #ffefe4;
  --cream: #f9f7f3;
  --cream-light: #f5f5f4;
  --cream-bg: #f9f7f3;
  --ink: #292524;
  --ink-soft: #44403c;
  --muted: #57534e;
  --muted-light: #a8a29e;
  --line: #e7e5e4;
  --line-soft: #f5f5f4;
  --bg: #fafaf9;
  --white: #FFFFFF;
  --topnav-bg: {{settings.topnav_bg}};
  --topnav-text: {{settings.topnav_text}};
  --topnav-text-hover: {{settings.topnav_text_hover}};
  --card-bg: {{settings.card_bg}};
  --card-border: {{settings.card_border}};
  --card-title: {{settings.card_title_color}};
  --card-text: {{settings.card_text_color}};
  --section-heading: {{settings.section_heading_color}};
  --section-subtitle: {{settings.section_subtitle_color}};
  --videos-bg: {{settings.videos_section_bg}};
  --videos-card-bg: {{settings.videos_card_bg}};
  --promo-qa-bg: {{settings.promo_quick_answer_bg}};
  --promo-qa-text: {{settings.promo_quick_answer_text}};
  --contact-bg: {{settings.contact_section_bg}};
  --contact-icon-bg: {{settings.contact_icon_bg}};
  --footer-bg: {{settings.footer_bg}};
  --footer-text: {{settings.footer_text}};
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow: 0 10px 15px -3px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.10);
  --orange-hover: #da5e02;
  --orange-active: #ab4804;
  --accent: #08a9d2;
  --accent-dark: #0791b3;
  --success: #21a873;
  --error: #f00038;
  --warning: #fdf58b;
  --warning-text: #704413;
  --info: #d5f466;
  --shadow-xs: 0 1px 1px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10);
}

/* ============ BASE RESET ============ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#FFFFFF;color:var(--ink);font-family:var(--body-font, 'Figtree', 'DM Sans', system-ui, sans-serif);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:visible}
body{display:flex;flex-direction:column;min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}

/* ============ TOP NAVIGATION ============ */
header.topnav,
.topnav{
  background-color:#FFFFFF !important;
  background-color:var(--topnav-bg,#FFFFFF) !important;
  border-bottom:1px solid rgba(0,0,0,.08);
  position:sticky;
  top:0;
  z-index:1000;
  width:100%
}
.topnav-inner{
  max-width:none;width:100%;margin:0;min-height:48px;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;gap:32px
}
header.topnav.is-fixed,
.topnav.is-fixed{
  position:fixed !important;left:0 !important;right:0 !important;top:0 !important;
  background-color:#FFFFFF !important;
  background-color:var(--topnav-bg,#FFFFFF) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.12)
}
body.has-fixed-nav{padding-top:64px}

.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.topnav .logo{max-height:48px}
.topnav .logo img{height:40px !important;max-height:48px !important;width:auto !important;max-width:220px !important;display:block !important;object-fit:contain}
.logo-mark{width:36px;height:36px;border-radius:50%;background:var(--orange);display:grid;place-items:center;position:relative}
.logo-mark::after{content:'';width:14px;height:14px;border-radius:50%;background:#0F0F0F}
.logo-text{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-weight:700;font-size:24px;color:var(--orange);letter-spacing:-.5px;line-height:.95;text-transform:uppercase}
.logo-text small{display:block;font-size:12px;font-weight:700;color:var(--orange);letter-spacing:2px;margin-top:2px;text-transform:uppercase}

.topnav-right{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;flex:1;justify-content:flex-end}
.topnav-links{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden}
.topnav-links a{font-size:14px;font-weight:500;color:var(--topnav-text);padding:9px 14px;border-radius:8px;transition:all .15s;white-space:nowrap}
.topnav-links a:hover{color:var(--topnav-text-hover);background:rgba(127,127,127,.12)}
.topnav-links a.topnav-link-cta{background:var(--orange,#ff5b00);color:#FFFFFF !important;padding:9px 22px;border-radius:6px;font-weight:600;margin-left:8px;transition:all .15s}
.topnav-links a.topnav-link-cta:hover{background:var(--orange-dark,#ab4804);color:#FFFFFF !important;transform:translateY(-1px)}
.topnav-deals{font-size:14px;font-weight:500;color:var(--topnav-text);padding:9px 14px;border-radius:8px;transition:all .15s;white-space:nowrap;flex-shrink:0;background:transparent;margin:0;text-decoration:none;display:inline-block}
.topnav-deals:hover{color:var(--topnav-text-hover);background:rgba(127,127,127,.12)}

/* Sign-in button (kept for safety; not in default header) */
a.topnav-signin,
.topnav-signin{
  display:inline-flex !important;align-items:center;justify-content:center;
  font-size:14px;font-weight:500;
  color:var(--orange, #ff5b00) !important;
  padding:9px 28px;border:1.5px solid var(--orange, #ff5b00);
  border-radius:999px;transition:all .15s;white-space:nowrap;flex-shrink:0;
  background-color:transparent !important;text-decoration:none !important;
  min-width:90px;text-align:center;visibility:visible !important
}
a.topnav-signin:hover,
.topnav-signin:hover{background-color:transparent !important;color:#000000 !important;border:1.5px solid #000000 !important}

/* User dropdown (signed in) */
.user-dropdown{position:relative;flex-shrink:0}
.user-dropdown-toggle{display:flex;align-items:center;gap:8px;background:transparent;border:0;color:var(--topnav-text);font-family:inherit;font-size:14px;font-weight:500;padding:6px 10px 6px 6px;border-radius:999px;cursor:pointer;transition:background .15s}
.user-dropdown-toggle:hover{background:rgba(127,127,127,.12);color:var(--topnav-text-hover)}
.user-avatar-circle{width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;overflow:hidden;flex-shrink:0;font-weight:700;font-size:14px}
.user-avatar-circle img{width:100%;height:100%;object-fit:cover;display:block}
.user-dropdown-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-dropdown-chev{transition:transform .2s;opacity:.8}
.user-dropdown.open .user-dropdown-chev{transform:rotate(180deg)}
.user-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:200}
.user-dropdown.open .user-dropdown-menu{display:block}
.user-dropdown-menu a{display:block;padding:9px 14px;color:var(--ink);font-size:14px;border-radius:8px;transition:background .15s;text-decoration:none}
.user-dropdown-menu a:hover{background:var(--cream-light);color:var(--orange)}
.user-dropdown-sep{height:1px;background:var(--line-soft);margin:4px 0}
.user-dropdown:focus-within .user-dropdown-menu{display:block}

/* Language selector */
.lang-dropdown{position:relative;flex-shrink:0}
.lang-dropdown-toggle{display:flex;align-items:center;gap:6px;background:transparent;border:0;color:var(--topnav-text);font-family:inherit;font-size:14px;font-weight:500;padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .15s;white-space:nowrap}
.lang-dropdown-toggle:hover{background:rgba(127,127,127,.12);color:var(--topnav-text-hover)}
.lang-dropdown-chev{transition:transform .2s;opacity:.7}
.lang-dropdown.open .lang-dropdown-chev{transform:rotate(180deg)}
.lang-dropdown-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;max-height:340px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:200}
.lang-dropdown.open .lang-dropdown-menu{display:block}
.lang-dropdown-menu a{display:block;padding:8px 14px;color:var(--ink);font-size:14px;border-radius:8px;transition:background .15s;text-decoration:none;white-space:nowrap}
.lang-dropdown-menu a:hover{background:var(--cream-light);color:var(--orange)}
.lang-dropdown:focus-within:not(.open) .lang-dropdown-menu{display:none}

/* Hamburger + mobile menu */
.hamburger{display:none;width:40px;height:40px;border-radius:8px;align-items:center;justify-content:center;color:var(--topnav-text);cursor:pointer;transition:background .15s;background:transparent;border:0;padding:0}
.hamburger:hover{background:rgba(127,127,127,.12)}
.hamburger-lines{display:flex;flex-direction:column;gap:5px}
.hamburger-lines span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px}

.mobile-menu{position:fixed;inset:0;z-index:200;display:flex;justify-content:flex-end;pointer-events:none}
.mobile-menu.open{pointer-events:auto}
.mobile-menu-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s}
.mobile-menu.open .mobile-menu-backdrop{opacity:1}
.mobile-menu-panel{position:relative;width:min(86vw,340px);background:var(--topnav-bg);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);box-shadow:-10px 0 40px rgba(0,0,0,.4)}
.mobile-menu.open .mobile-menu-panel{transform:translateX(0)}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid rgba(0,0,0,.08)}
.mobile-menu-head .lbl{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-weight:700;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted,#57534e)}
.mobile-menu-close{color:var(--topnav-text,#292524);font-size:18px;width:36px;height:36px;border-radius:8px;display:grid;place-items:center;cursor:pointer;background:transparent;border:0}
.mobile-menu-close:hover{background:rgba(0,0,0,.06)}
.mobile-menu-body{padding:8px 0;overflow-y:auto;flex:1}
.mobile-menu-panel .ml-link{color:#000;font-size:16px;font-weight:500;padding:14px 22px;display:block;border-bottom:1px solid rgba(0,0,0,.06);transition:background .15s}
.mobile-menu-panel .ml-link:hover{background:rgba(0,0,0,.04);color:#000}
body.menu-open{overflow:hidden}

/* ============ TOPNAV HAMBURGER → CATEGORY DROPDOWN (like the language menu) ============ */
.ic-menu-dd{position:relative;flex-shrink:0}
.topnav-menu-btn{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:6px;border:1px solid rgb(231,229,228);padding:0;
  background:transparent;color:var(--topnav-text,#292524);cursor:pointer;
  transition:background .15s,color .15s;
}
.topnav-menu-btn:hover{background:rgb(245,245,244)}
/* The SVG must not capture clicks, so the event target is always the button */
.topnav-menu-btn svg{width:16px;height:16px;stroke-width:1.4px;pointer-events:none}

/* Dropdown panel — positioned under the button, opens on .open (set by JS) */
.ic-menu-dd-panel{
  position:fixed;top:0;right:0;bottom:0;
  width:320px;height:100%;
  display:flex;flex-direction:column;gap:12px;
  background:rgb(250,250,249);border:0;border-radius:0;
  box-shadow:rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px;
  padding:8px 12px;overflow-y:auto;z-index:1001;
  transform:translateX(100%);visibility:hidden;
  transition:transform .28s cubic-bezier(.4,0,.2,1), visibility .28s linear;
}
.ic-menu-dd.open .ic-menu-dd-panel{transform:translateX(0);visibility:visible}
/* Side panel backdrop overlay */
.side-panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease, visibility .28s linear;z-index:1000}
.ic-menu-dd.open .side-panel-overlay{opacity:1;visibility:visible;pointer-events:auto}
/* Side panel close (X) button */
.side-panel__close{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:rgb(41,37,36);cursor:pointer;transition:background .15s ease}
.side-panel__close:hover{background:rgb(243,244,246)}
.ic-menu-dd-label{padding-right:40px}
.ic-menu-dd-label{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted,#57534e);
  padding:10px 14px 6px;
}
.ic-menu-list{display:block}
/* Category accordion row */
.ic-menu-cat-btn{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  padding:12px 14px;background:transparent;border:0;cursor:pointer;font-family:inherit;text-align:left;
  color:var(--ink,#292524);font-size:16px;font-weight:500;border-radius:8px;
  transition:background .15s,color .15s;
}
.ic-menu-cat-btn:hover{background:rgb(243,244,246);color:rgb(41,37,36)}
.ic-menu-cat-btn svg{flex-shrink:0;color:var(--ink,#292524);transition:transform .2s}
.ic-menu-cat.is-open > .ic-menu-cat-btn{color:var(--orange,#ff5b00)}
.ic-menu-cat.is-open > .ic-menu-cat-btn svg{transform:rotate(90deg)}
/* Expanded sections (level 2) */
.ic-menu-sections{display:flex;flex-direction:column;padding:2px 0 8px 16px}
.ic-menu-sections[hidden]{display:none}   /* respect the hidden attribute (collapse) */
.ic-menu-section{
  display:block;padding:9px 14px;text-decoration:none;border-radius:8px;
  color:var(--muted,#57534e);font-size:14px;font-weight:500;
  transition:background .15s,color .15s;
}
.ic-menu-section:hover{background:rgb(243,244,246);color:rgb(41,37,36)}
.ic-menu-loading{padding:10px 14px;font-size:14px;color:var(--muted,#57534e)}
/* Legacy single-level item (kept for safety) */
.ic-menu-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;text-decoration:none;color:var(--ink,#292524);
  font-size:16px;font-weight:500;border-radius:8px;
  transition:background .15s,color .15s;
}
.ic-menu-item:hover{background:rgb(243,244,246);color:rgb(41,37,36)}
.ic-menu-item svg{flex-shrink:0;color:var(--orange,#ff5b00)}
.ic-menu-empty{padding:18px 14px;font-size:14px;color:var(--muted,#57534e)}
/* Mobile: keep the dropdown on-screen, a touch wider */
@media (max-width:560px){
  .ic-menu-dd-panel{width:min(86vw,320px);right:0;max-height:none}
}
/* ============ END TOPNAV HAMBURGER ============ */

/* ============ HERO ============ */
.hero{position:relative;min-height:480px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:56px 0;overflow:hidden;background:#2a2a1a}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-inner{position:relative;z-index:2;max-width:780px;width:100%;margin:0 auto;padding:0 28px;text-align:center}
.hero h1{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-weight:700;font-size:36px;color:var(--hero-title-color,#fff);letter-spacing:-1px;line-height:1.15;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero h1 .greet{display:block;font-size:20px;font-weight:500;opacity:.92;margin-bottom:4px;letter-spacing:.5px;color:var(--hero-greet-color,inherit)}
.hero h1 .greet .name{font-weight:700;color:var(--hero-name-color,#FFD89A)}

.search-wrap{margin:22px auto 0;max-width:560px;position:relative}
.search-bar{display:flex;align-items:center;background:var(--white);border-radius:12px;padding:12px;box-shadow:0 8px 30px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15)}
.search-bar svg{width:18px;height:18px;color:var(--muted-light,#a8a29e);flex-shrink:0}
.search-bar input{flex:1;border:0;outline:0;font-family:inherit;font-size:16px;color:var(--ink);padding:12px 14px;background:transparent;font-weight:400}
.search-bar input::placeholder{color:var(--muted-light,#a8a29e) !important;opacity:1 !important;font-weight:400 !important;letter-spacing:.1px}
.search-btn{background:var(--orange,#ff5b00);color:#fff;padding:11px 22px;border-radius:6px;font-weight:600;font-size:14px;transition:all .15s;border:1px solid rgba(89,66,53,0.2);cursor:pointer}
.search-btn:hover{background:var(--orange-dark)}

.popular{
  /* Break out of .hero-inner's 780px max-width using negative margins to span
     the full viewport, then center the content with justify-content:center.
     Guarantees perfect viewport-center alignment in all languages. */
  margin-top:16px;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw;max-width:100vw;
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:8px;padding:0 24px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.popular::-webkit-scrollbar{display:none}
.popular .lbl,
.popular a{flex-shrink:0;white-space:nowrap}
.popular .lbl{
  margin:0;
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--hero-popular-color,#fff);opacity:.75;
}
.popular .sep{display:inline-block;color:var(--hero-popular-color,#fff);opacity:.5;font-weight:400}
.popular a{
  display:inline-flex;align-items:center;
  font-size:14px;font-weight:500;
  color:var(--hero-popular-color,#fff);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
  transition:color .15s;
}
.popular a:hover,.popular a:active{color:#ff5b00}

/* ============ CONTAINERS ============ */
.section{max-width:1180px;margin:0 auto;padding:56px 28px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px; padding-bottom:20px}
.section-head h2{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-weight:700;font-size:30px;color:var(--section-heading,var(--ink))}
.section-head .sub{font-size:16px;font-weight:400;color:#57534e}
.section-head.center{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:6px}

/* ============ OTHER AREAS (3 category cards) ============ */
/* Structure mirrors .videos-section: <section> > .section > .section-head + grid */
.other-areas-section{position:relative;background:#FFFFFF}
/* Desktop-only: larger bottom spacing for the Other areas section */
@media (min-width: 901px) {
  .other-areas-section { padding-bottom: 54px; }
}
.other-areas-grid{
  /* Flex (not grid) so that when a card is hidden (display:none — category not
     found in Zendesk), the remaining cards re-flow and stay CENTERED instead
     of staying anchored to the left columns of a 3-col grid. */
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:16px;
}
.other-area-card{
  flex:0 1 calc((100% - 32px) / 3);    /* base width = 1/3 when 3 visible */
  min-width:220px;
}
.other-area-card{
  display:flex;flex-direction:column;
  background:#FFFFFF;border:1px solid #e7e5e4;
  border-radius:12px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .2s, box-shadow .2s;
}
.other-area-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,0.10));
}
/* Centered heading + tertiary subtitle */
.other-areas-section .section-head .sub{color:#57534e}
.other-area-img{
  width:100%;aspect-ratio:16/9;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--orange-soft,#ffefe4);
}
.other-area-info{padding:16px 18px 20px}
.other-area-info h3{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:16px;font-weight:700;color:var(--qg-card-title,var(--ink,#292524));
  margin:0 0 5px;line-height:1.25;
}
.other-area-info p{
  font-size:14px;color:var(--qg-card-text,var(--muted,#57534e));margin:0;
  line-height:1.45;
}
@media (max-width:900px){
  .other-areas-grid{gap:14px}
  .other-area-card{flex:0 1 calc((100% - 14px) / 2);min-width:0;max-width:340px}
}
@media (max-width:560px){
  /* No extra side padding on the outer section — the inner .section gives the
     page gutter (>=16px), so cards span the viewport with a clean margin. */
  .other-areas-section{padding:18px 0 32px}
  /* Stack cards in a single column with a spacing-6 gap; full-width cards. */
  .other-areas-grid{flex-direction:column;gap:16px;flex-wrap:nowrap}
  /* flex:0 0 auto + width:100% → card sizes to its CONTENT (grows when the
     description is filled in by the async fetch); overflow:visible so a late-added
     line can never be clipped. (flex:1 1 100% locked the height → clipped text.) */
  .other-area-card{
    flex:0 0 auto;width:100%;max-width:none;
    flex-direction:row;overflow:hidden;
  }
  
  
  
  /* Horizontal layout: fixed-width image on the left*/
  .other-area-img{width:120px;flex:0 0 120px;max-width:none;align-self:stretch;border-radius:12px 0 0 12px}
  .other-area-info{flex:1 1 auto;min-width:0;align-self:stretch;padding:16px 18px 20px}
  .other-area-info h3{font-size:16px;margin-bottom:5px}
  /* Never clip the Zendesk description on phones — show it in full, wrap long words */
  .other-area-info p{font-size:14px;line-height:1.45;display:block;overflow:visible;-webkit-line-clamp:none;overflow-wrap:anywhere}
}

  /* Mobile: match the video-card layout (see .videos-grid @max-width:480px).
     Single column, full-width cards, 16px gap. Height stays flexible (no fixed
     height) so async-loaded Zendesk descriptions are never clipped. */
  @media (max-width: 480px) {
    .other-areas-grid { flex-direction: column; gap: 16px; flex-wrap: nowrap; }
    .other-areas-grid > .other-area-card { flex: 0 0 auto; width: 100%; max-width: none; }
  }

/* ============ END OTHER AREAS ============ */

/* ============ BROWSE BY CATEGORY (Hertz-style) ============ */
.bbc-section{position:relative;padding:8px 20px 40px;background:#FFFFFF}
.bbc-overline{font-size:16px;font-weight:400;color:#57534e;margin:0 0 4px}
/* Contained card panel that visually separates this section from "Other areas" */
.bbc-section .section{
  background:#FFFFFF;
  border:1px solid var(--cat-card-border,#e7e5e4);
  border-radius:18px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0, 0, 0,.05);
}
.bbc-layout{
  margin-top:18px;
  display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:start;
}
/* LEFT: category list */
.bbc-cats{display:flex;flex-direction:column;gap:2px}
.bbc-cat{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  padding:12px 14px;border:0;border-left:3px solid transparent;border-radius:8px;
  background:transparent;cursor:pointer;font-family:inherit;
  color:var(--ink,#292524);transition:background .15s,color .15s,border-color .15s;
}
.bbc-cat-icon{
  flex-shrink:0;width:34px;height:34px;border-radius:8px;
  display:grid;place-items:center;
  background:#f5f5f4;color:#292524;
  transition:background .15s,color .15s;
}
.bbc-cat-icon svg{width:18px;height:18px;display:block;stroke-width:1.5px}
.bbc-cat-name{flex:1;font-size:16px;font-weight:600;line-height:1.3}
.bbc-cat-chev{flex-shrink:0;opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s;color:var(--orange,#ff5b00)}
/* Icon turns orange/white when selected — and the same on hover */
.bbc-cat.is-active .bbc-cat-icon,
.bbc-cat:hover .bbc-cat-icon{background:#ffffff;color:#ff5b00; border:1px rgba(89,66,53,0.2) inset; }
.bbc-cat:hover{background:#f5f5f4;border-left-color:transparent}   /* grey-100 hover */
.bbc-cat.is-active{
  background:#f5f5f4;                                              /* grey-100 selected */
  border-left-color:transparent;
  color:var(--ink,#292524);
}
/* Hover wins over the selected state → grey-50 when hovering any item, incl. the active one */
.bbc-cat.is-active:hover{background:#fafaf9}
.bbc-cat.is-active .bbc-cat-chev,
.bbc-cat:hover .bbc-cat-chev{opacity:1;transform:translateX(0)}
/* RIGHT: category header + section cards grid */
.bbc-panel{
  display:flex;flex-direction:column;gap:24px;min-height:120px;
}
.bbc-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  border-bottom:1px solid #e7e5e4;padding-bottom:24px;
}
.bbc-panel-head-text{min-width:0;flex:1}
.bbc-panel-title{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--ink,#292524);font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:20px;font-weight:700;line-height:1.2;transition:color .15s;
}
.bbc-panel-title:hover{color:var(--orange,#ff5b00)}
.bbc-panel-title svg{flex-shrink:0;color:#57534e;transition:color .15s}
.bbc-panel-title:hover svg{color:var(--orange,#ff5b00)}
.bbc-panel-desc{
  margin:8px 0 0;font-size:14px;line-height:1.5;
  color:var(--muted,#57534e);max-width:680px;
}
.bbc-panel-count{flex-shrink:0;font-size:14px;font-weight:600;color:var(--orange,#ff5b00);white-space:nowrap;padding-top:4px}
.bbc-panel-sections{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.bbc-panel-foot{display:flex;justify-content:flex-end;margin-top:4px}
.bbc-see-all{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;color:var(--orange,#ff5b00);
  text-decoration:none;transition:color .15s;
}
.bbc-see-all:hover{color:var(--orange-hover,#da5e02)}
.bbc-see-all svg{width:18px;height:18px}
.bbc-panel .bbc-loading{display:grid;place-items:center;font-size:14px;color:var(--muted,#57534e);padding:30px 12px}
.bbc-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 22px;background:#FFFFFF;
  border:1px solid #e7e5e4;border-radius:12px;
  text-decoration:none;color:var(--ink,#292524);
  box-shadow:var(--shadow-xs,0 1px 1px 0 rgba(0,0,0,0.05));
  transition:transform .18s,box-shadow .18s;
}
.bbc-card:hover,
.bbc-card:active{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,0.10));
}
.bbc-card-name{font-size:16px;font-weight:600;line-height:1.35}
.bbc-card svg{flex-shrink:0;color:#1c1917;transition:color .15s}   /* grey-900 arrow */
.bbc-card:hover svg,
.bbc-card:active svg{color:#ff5b00}   /* primary-500 on hover (arrow only) */
.bbc-loading{
  grid-column:1/-1;display:grid;place-items:center;
  font-size:14px;color:var(--muted,#57534e);padding:30px 12px;
}
/* Inline accordion panels (created by JS) — hidden by default; shown only on
   mobile when expanded. On desktop they never show (the side #bbc-panel is used). */
.bbc-cat-panel{display:none}

@media (max-width:900px){
  .bbc-section{padding:20px}                                        /* 20px all around on mobile */
  .bbc-section .section{padding:12px 12px 0;border-radius:18px;overflow:visible}  /* mobile: no bottom padding */
  .bbc-layout{display:block;margin-top:14px}
  /* Vertical accordion list — desktop-like buttons, NO grey separators */
  .bbc-cats{flex-direction:column;gap:4px}
  .bbc-cat{
    width:100%;border-left:0;border-bottom:0;border-radius:8px;
    padding:12px 14px;background:transparent;color:var(--ink,#292524);
  }
  .bbc-cat-icon{display:grid}                 /* keep icons (Hertz has them) */
  .bbc-cat-name{font-size:16px}
  /* chevron always visible; points right (>) when closed, rotates down when open */
  .bbc-cat-chev{display:block;opacity:1;transform:none;color:var(--muted,#57534e)}
  .bbc-cat.is-open .bbc-cat-chev{transform:rotate(90deg)}
  /* open = active fill grey-200, ink text (matches desktop is-active) */
  .bbc-cat.is-open{background:#f5f5f4;color:var(--ink,#292524)}
  .bbc-cat.is-open .bbc-cat-icon{background:var(--orange,#ff5b00);color:#fff}
  /* neutralise desktop's is-active styling on mobile (only is-open matters here) */
  .bbc-cat.is-active:not(.is-open){background:transparent;color:var(--ink,#292524)}
  .bbc-cat.is-active:not(.is-open) .bbc-cat-icon{background:#f5f5f4;color:#292524}
  /* side panel hidden on mobile; sections render inline in the accordion panels */
  #bbc-panel{display:none}
  .bbc-cat-panel:not([hidden]){
    display:flex;flex-direction:column;gap:16px;
    padding:16px;                          /* 16px all around on mobile */
  }
  .bbc-card{padding:14px 16px}
}
@media (max-width:560px){
  .bbc-cat-panel:not([hidden]){padding:16px}
}
/* ============ END BROWSE BY CATEGORY ============ */

/* ============ HOMEPAGE BLOCKS CAROUSEL ============ */
.blocks-section{position:relative}
.blocks-section .section-head h2{color:var(--qg-heading,#292524)}
.blocks-section .section-head .sub{color:var(--qg-subtitle,#57534e)}
.blocks-wrap{position:relative}
.blocks-arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px rgba(0, 0, 0,.12), 0 2px 6px rgba(0, 0, 0,.08);display:grid;place-items:center;cursor:pointer;color:var(--ink);z-index:5;transition:all .18s;padding:0}
.blocks-arrow:hover{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 8px 24px rgba(255, 91, 0,.35), 0 2px 6px rgba(255, 91, 0,.18)}
.blocks-arrow:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.blocks-arrow:disabled{opacity:0;pointer-events:none}
.blocks-arrow.left{left:6px}
.blocks-arrow.right{right:6px}
.blocks-arrow svg{width:18px;height:18px}
.blocks-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:none}
.blocks-track::-webkit-scrollbar{display:none}

.scroll-progress{display:none;height:3px;background:var(--line);border-radius:2px;margin:14px auto 0;max-width:120px;position:relative;overflow:hidden}
.scroll-progress .thumb{position:absolute;top:0;height:100%;background:var(--orange);border-radius:2px;transition:left .12s linear, width .12s linear;will-change:left,width}

.block-card{flex:0 0 240px;scroll-snap-align:start;background:var(--qg-card-bg,#FFFFFF);border-radius:var(--radius);overflow:hidden;border:1px solid var(--qg-card-border,#e7e5e4);transition:all .2s;cursor:pointer}
.block-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--cream)}
.block-img{height:160px;background-size:cover;background-position:center;background-color:#eee;position:relative}
.block-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.15) 100%)}
.block-img.b1{background-image:linear-gradient(135deg,#f4d39a,#d4a45a)}
.block-img.b2{background-image:linear-gradient(135deg,#f5b269,#ff5b00)}
.block-img.b3{background-image:linear-gradient(135deg,#a8c89a,#21a873)}
.block-img.b4{background-image:linear-gradient(135deg,#8ab4d4,#08a9d2)}
.block-img.b5{background-image:linear-gradient(135deg,#e8e0c4,#c4b894)}
.block-img.b6{background-image:linear-gradient(135deg,#d4a48a,#a4644a)}
.block-info{padding:14px 16px 18px}
.block-info h3{font-size:16px;font-weight:600;color:var(--qg-card-title,#292524);line-height:1.35;margin-bottom:4px}
.block-info p{font-size:14px;color:var(--qg-card-text,#57534e)}

/* ============ CATEGORIES — Trip journey + other topics ============ */
.categories-section{background:#FFFFFF !important}
.categories-section .section-head h2{color:var(--cat-heading,#292524)}
.categories-section .section-head .sub{color:var(--cat-subtitle,#57534e)}
.categories-section .section-head.center{}
.stage-subhead{font-size:16px;font-weight:400;color:#57534e;margin:4px 0 0;text-align:center}

.cat-sublabel{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--cat-sublabel,#57534e);text-align:center;margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:14px}
.cat-sublabel::before, .cat-sublabel::after{content:'';display:block;width:36px;height:1px;background:var(--line)}

/* Trip journey: 4-column grid with chronological orange timeline */
.cat-journey{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;margin-bottom:38px}
.cat-journey::before{
  content:'';position:absolute;top:50%;left:9%;right:9%;height:2px;
  transform:translateY(-50%);background:#ff5b00;z-index:0;
  pointer-events:none;opacity:.5
}

.cat-stage{
  background:var(--cat-card-bg,#FFFFFF);border:1px solid var(--cat-card-border,#e7e5e4);
  border-radius:var(--radius);padding:20px 18px;cursor:pointer;transition:all .2s;
  position:relative;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;z-index:1
}
.cat-stage:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--orange)}
.cat-stage .stage-head{display:flex;align-items:center;gap:10px}
.cat-stage .stage-icon{width:40px;height:40px;border-radius:12px;background:var(--cat-icon-bg,var(--orange-soft));display:grid;place-items:center;color:var(--cat-icon-color,var(--orange));flex-shrink:0;transition:all .2s;position:relative;z-index:2}
.cat-stage:hover .stage-icon{background:var(--orange);color:#fff}
.cat-stage .stage-icon svg{width:20px;height:20px}
.cat-stage .step{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--cat-step,#a8a29e);text-transform:uppercase}
.cat-stage h3{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--cat-card-title,#292524);margin-top:2px}
.cat-stage p{font-size:14px;color:var(--cat-card-text,#57534e);line-height:1.5}
.cat-stage .count{margin-top:auto;padding-top:10px;font-size:12px;color:var(--cat-count,var(--orange));font-weight:600}

/* Forward arrow between trip-journey stages */
.cat-journey .cat-stage:not(:last-child)::after{
  content:'';position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background-color:#ff5b00;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  background-size:14px 14px;background-position:55% center;background-repeat:no-repeat;
  box-shadow:0 4px 10px rgba(255, 91, 0,.30);z-index:3
}

/* Auto-iterated grid from Zendesk categories */
.cat-grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:18px 0 0}
.cat-grid-auto .cat-stage::after{display:none}
.cat-stage-auto .count:empty{display:none}
.cat-stage-auto .step:empty{display:none}

/* "Your trip journey" auto container — big step-card style */
.cat-journey-auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:32px}
.cat-journey-auto .cat-stage::after{display:none}

/* "Other topics" auto container — slim, no arrows, 3 per row */
.cat-tiles-auto{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat-tiles-auto .cat-stage::after{display:none}
.cat-tiles-auto .cat-stage-auto{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:14px;row-gap:1px;padding:14px 18px;
  background:var(--tile-card-bg,var(--cream-bg,#f9f7f3));
  border:0;border-radius:12px;min-height:auto;box-shadow:none;
}
.cat-tiles-auto .cat-stage-auto:hover{background:var(--white);box-shadow:0 4px 14px rgba(0,0,0,.05)}
.cat-tiles-auto .cat-stage-auto .stage-head{grid-row:1 / span 2;margin:0;align-items:center}
.cat-tiles-auto .cat-stage-auto .stage-icon{
  width:40px;height:40px;border-radius:12px;
  background:var(--tile-icon-bg,#FFFFFF);border:0;color:var(--orange);
  box-shadow:0 1px 4px rgba(0,0,0,.04);display:grid;place-items:center;
}
.cat-tiles-auto .cat-stage-auto .stage-icon svg{width:20px;height:20px;display:block}
.cat-tiles-auto .cat-stage-auto h3{
  grid-column:2;font-size:16px;font-weight:700;margin:0;line-height:1.25;
  color:var(--tile-card-title,#292524);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cat-tiles-auto .cat-stage-auto p{
  grid-column:2;font-size:12px;color:var(--tile-card-text,var(--muted,#57534e));
  margin:0;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
}
.cat-tiles-auto .cat-stage-auto .count{display:none}

/* ============ STAGE FILTER CHIPS ============ */
/* Stage chips drive the tier-1/tier-2 split of categories */
.stage-filter{
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex-wrap:wrap;margin:0 auto;padding-bottom:32px;max-width:840px;
}
/* Chips follow the UI-library Pill: default = outline pill, selected = filled pill. */
.stage-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:32px;padding:0 16px;font-size:14px;font-weight:500;font-family:inherit;
  background:transparent;border:1px solid var(--orange,#ff5b00);color:var(--orange,#ff5b00);
  border-radius:9999px;cursor:pointer;transition:all .15s;
}
/* Outline chip hover (desktop) + pressed (mobile) = primary-100 fill */
.stage-chip:hover,
.stage-chip:active{background:#ffddc3}
.stage-chip.is-active{background:var(--orange,#ff5b00);color:#FFFFFF;border-color:var(--orange,#ff5b00)}
/* Selected chip hover (desktop) + pressed (mobile) are identical */
.stage-chip.is-active:hover,
.stage-chip.is-active:active{background:var(--orange-hover,#da5e02);border-color:var(--orange-hover,#da5e02);color:#FFFFFF}
/* ============ END STAGE FILTER ============ */

/* ============ STAGE ARTICLES CAROUSEL (2 rows) ============ */
/* Side padding (52px) reserves a gutter so the nav arrows never overlap the cards. */
.stage-articles-wrap{
  position:relative;max-width:1180px;margin:0 auto 14px;padding:0 46px;
}
.stage-articles-track{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(2, minmax(0, 1fr));
  grid-auto-columns:calc((100% - 40px) / 3);
  gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:20px 4px 16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.stage-articles-track::-webkit-scrollbar{display:none}
.stage-card{
  position:relative;
  scroll-snap-align:start;
  background:var(--cat-card-bg,#FFFFFF);
  border:1px solid #e7e5e4;
  border-radius:12px;padding:18px 18px 16px;
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  text-decoration:none;color:inherit;
  box-shadow:var(--shadow-xs,0 1px 1px 0 rgba(0,0,0,0.05));
  transition:transform .2s, box-shadow .2s;
  min-height:120px;
}
.stage-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,0.10));
}
.stage-card-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:16px;font-weight:600;line-height:1.35;color:var(--cat-card-title,var(--ink,#292524));
  margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.stage-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.stage-card-tags{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.stage-card-arrow{flex-shrink:0;display:inline-flex;align-items:center;color:#292524;transition:color .15s, transform .15s}
.stage-card-arrow svg{stroke-width:1.5px}
.stage-card:hover .stage-card-arrow{color:var(--orange,#ff5b00);transform:translateX(3px)}
.stage-card-tag{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--orange,#ff5b00);
  background:var(--orange-soft,#ffefe4);
  padding:3px 8px;border-radius:6px;line-height:1.4;
}
.stage-loading,
.stage-empty{
  grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;text-align:center;
  font-size:14px;color:var(--muted,#57534e);padding:36px 16px;
}

.stage-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;
  background:#FFFFFF;border:1px solid var(--line,#e7e5e4);
  display:grid;place-items:center;cursor:pointer;color:var(--muted,#57534e);
  box-shadow:none;
  transition:all .15s;
}
.stage-arrow:hover:not(:disabled){background:var(--orange,#ff5b00);color:#fff;border-color:var(--orange,#ff5b00)}
.stage-arrow:disabled{opacity:0;pointer-events:none}
.stage-arrow.left{left:4px}
.stage-arrow.right{right:4px}

.stage-dots{
  display:flex;justify-content:center;align-items:center;gap:6px;
  margin:2px auto 36px;max-width:840px;
}
.stage-dot{
  width:7px;height:7px;border-radius:50%;
  background:#e7e5e4;border:0;padding:0;cursor:pointer;
  transition:all .2s;
}
.stage-dot:hover{background:#d6d3d1}
.stage-dot.is-active{background:#d6d3d1;width:22px;border-radius:4px}
/* ============ END STAGE ARTICLES ============ */

/* Static tiles row (legacy) */
.cat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat-tile{background:var(--tile-card-bg,var(--cream-light));border:1px solid var(--tile-card-border,#e7e5e4);border-radius:var(--radius);padding:18px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;text-decoration:none;color:inherit}
.cat-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--orange);background:var(--white)}
.cat-tile .tile-icon{width:40px;height:40px;border-radius:12px;background:var(--tile-icon-bg,#FFFFFF);border:1px solid var(--tile-card-border,#e7e5e4);display:grid;place-items:center;color:var(--orange);flex-shrink:0;transition:all .2s}
.cat-tile:hover .tile-icon{background:var(--orange);color:#fff;border-color:var(--orange)}
.cat-tile .tile-icon svg{width:18px;height:18px}
.cat-tile .tile-info h3{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:16px;font-weight:700;color:var(--tile-card-title,#292524);margin-bottom:2px}
.cat-tile .tile-info p{font-size:12px;color:var(--tile-card-text,#57534e)}

/* ============ PROMOTED ARTICLES ============ */
.promo-section{background:var(--promo-section-bg,#f9f7f3);margin-top:0}
.promo-section .section-head h2{color:var(--promo-heading,#292524)}
.promo-section .section-head .sub{color:var(--promo-subtitle,#57534e)}

.booking-filter{max-width:840px;margin:0 auto 22px}
.booking-filter-title{
  text-align:center;font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--muted,#57534e);margin:0 auto 14px;
}
.booking-chips{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.chip{
  font-size:14px;font-weight:600;color:#44403c;background:#FFFFFF;
  border:1px solid #e7e5e4;border-radius:999px;padding:8px 16px;cursor:pointer;
  transition:all .15s;font-family:inherit;display:inline-flex;align-items:center;gap:6px
}
.chip:hover{border-color:var(--orange);color:var(--orange)}
.chip.active{background:#292524;color:#FFFFFF;border-color:#292524}
.chip.active:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.chip[data-filter="round_trip"] .dot{background:#21a873;opacity:1}
.chip[data-filter="one_way"] .dot{background:#08a9d2;opacity:1}
.chip[data-filter="relocation"] .dot{background:var(--orange);opacity:1}
.chip.active .dot{opacity:1}

.promo-empty{display:none;text-align:center;padding:40px 24px;background:var(--cream-bg,#f9f7f3);border-radius:var(--radius);color:var(--ink-soft,#44403c);max-width:840px;margin:18px auto 0}
.promo-empty.show{display:block}
.promo-empty h4{font-family:var(--heading-font,'Figtree',sans-serif);font-size:18px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.promo-empty p{font-size:14px;margin-bottom:14px;color:var(--muted)}
.promo-empty button{background:var(--orange);color:#fff;padding:8px 18px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;border:0;font-family:inherit}
.promo-empty button:hover{background:var(--orange-dark)}

.promo-list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.promo-item.filtered-out{display:none}
.promo-item{background:var(--promo-card-bg,#FFFFFF);border:1px solid var(--promo-card-border,#e7e5e4);border-radius:var(--radius);overflow:hidden;transition:border-color .2s}
.promo-item:hover{border-color:var(--cream)}
.promo-item.open{border-color:var(--orange);box-shadow:var(--shadow-sm)}
.promo-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;gap:16px}
.promo-head .q{font-size:16px;font-weight:500;color:var(--promo-question,#292524);flex:1}
.promo-item.open .promo-head .q{font-weight:600;color:var(--promo-question-open,var(--orange))}
.promo-chev{width:28px;height:28px;border-radius:50%;background:var(--promo-chev-bg,#f5f5f4);display:grid;place-items:center;color:var(--ink);flex-shrink:0;transition:all .25s}
.promo-chev svg{width:13px;height:13px;transition:transform .25s}
.promo-item.open .promo-chev{background:var(--orange);color:#fff}
.promo-item.open .promo-chev svg{transform:rotate(180deg)}
.promo-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.promo-body-inner{padding:0 22px 22px;font-size:14px;color:var(--promo-answer,#44403c);line-height:1.65}
.promo-body-inner p{margin-bottom:10px}
.promo-body-inner .preview-label{display:inline-block;background:var(--promo-qa-bg,#ffefe4);color:var(--promo-qa-text,#ff5b00);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 9px;border-radius:4px;margin-bottom:10px}
.promo-read-more{display:inline-flex;align-items:center;gap:6px;margin-top:6px;color:var(--orange);font-weight:600;font-size:14px;border-top:1px solid var(--line-soft);padding-top:14px;width:100%}
.promo-read-more::after{content:'→'}

/* ============ VIDEOS ============ */
.videos-section{background:#f5f5f4;color:var(--ink,#292524)}
.videos-section .section{padding-bottom:68px}
.videos-section .section-head h2{color:#292524}
.videos-section .section-head .sub{color:#57534e}
.videos-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.video-card{
  background:#FFFFFF;border-radius:var(--radius);overflow:hidden;
  cursor:pointer;transition:all .2s;border:1px solid #e7e5e4;text-decoration:none;color:inherit;
  display:block;padding:0;text-align:left;font-family:inherit;flex:0 1 calc(25% - 19px);
  box-shadow:var(--shadow-xs,0 1px 1px 0 rgba(0,0,0,0.05));
}
.video-card:hover{transform:translateY(-3px);border-color:#e7e5e4;box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,0.10))}
.video-thumb{aspect-ratio:16/10;background-color:#292524;background-image:linear-gradient(135deg,#44403c,#292524);position:relative;display:grid;place-items:center;background-size:cover;background-position:center;background-repeat:no-repeat;overflow:hidden}
.video-thumb.v1{background-color:#1a1410;background-image:linear-gradient(135deg,#4a3a2a,#1a1410)}
.video-thumb.v2{background-color:#101820;background-image:linear-gradient(135deg,#2a3a4a,#101820)}
.video-thumb.v3{background-color:#201020;background-image:linear-gradient(135deg,#3a2a3a,#201020)}
.video-thumb.v4{background-color:#201810;background-image:linear-gradient(135deg,#4a4a2a,#201810)}
.video-thumb::after{content:'';position:absolute;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:1.5px solid rgba(255,255,255,.4);transition:all .2s}
.video-card:hover .video-thumb::after{background:var(--orange);border-color:var(--orange);transform:scale(1.05)}
.play-tri{position:absolute;z-index:2;width:0;height:0;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.video-info{padding:14px 16px}
.video-info h4{font-size:14px;font-weight:600;padding-bottom:8px;color:#292524}
.video-info .meta{font-size:12px;color:#57534e;display:flex;align-items:center;gap:8px}
.video-info .meta .pill{background:#e7e5e4;padding:2px 7px;border-radius:4px;font-size:12px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:#57534e}

/* Video lightbox modal */
.video-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:24px;touch-action:none;overscroll-behavior:contain}
.video-modal.open{display:flex}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85);cursor:pointer}
.video-modal-content{position:relative;z-index:1;width:100%;max-width:960px}
.video-modal-close{position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;border:0;cursor:pointer;display:grid;place-items:center}
.video-modal-close:hover{background:rgba(255,255,255,.28)}
.video-modal-title{position:absolute;top:-40px;left:0;right:60px;color:#fff;font-weight:600;font-size:16px;font-family:var(--heading-font,'Figtree',sans-serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-modal-frame{position:relative;width:100%;padding-bottom:56.25%;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);touch-action:none}
.video-modal-frame iframe,.video-modal-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;touch-action:none}
body.video-modal-open{overflow:hidden;position:fixed;width:100%;left:0;right:0}

/* ============ CONTACT ============ */
.contact-section{padding:64px 28px 72px;background:#FFFFFF !important}
.contact-inner{max-width:1180px;margin:0 auto;text-align:center}
.contact-inner h2{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:36px;font-weight:700;letter-spacing:-.8px;color:var(--contact-heading,#292524);margin-bottom:0;padding-bottom:8px}
.contact-inner .lead{font-size:16px;color:var(--contact-subtitle,#57534e);max-width:540px;margin:0 auto 32px}
.channels-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:980px;margin:0 auto}
.channel{
  background:#FFFFFF;border:1px solid #e7e5e4;
  border-radius:var(--radius);padding:22px 18px 20px;text-align:center;
  box-shadow:var(--shadow-xs,0 1px 1px 0 rgba(0,0,0,0.05));
  transition:transform .2s, box-shadow .2s;
  cursor:pointer;position:relative;overflow:hidden;font-family:inherit;color:inherit;
  text-decoration:none;display:block;flex:0 1 calc(25% - 13px)   /* up to 4 per row, centered (justify-content:center handles any count) */
}
.channel:hover,
.channel:active{transform:translateY(-3px);box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,0.10))}
/* Icons mirror .bbc-cat-icon: grey-100 square, grey-800 1.5px stroke; selected (hover/active) = orange fill, white icon */
.channel-icon{width:46px;height:46px;border-radius:8px;background: #f5f5f4;display:grid;place-items:center;margin:0 auto 12px;color:#57534E;transition:background .15s,color .15s}
.channel:hover .channel-icon,
.channel:active .channel-icon{background:#FFf;color:#ff5b00;border: 1px inset rgba(89,66,53,0.2); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) }
.channel-icon svg{width:22px;height:22px;stroke-width:1.5px}
.channel h4{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:16px;font-weight:700;color:var(--contact-card-title,#292524);margin-bottom:3px;letter-spacing:-.2px}
.channel:hover h4,.channel:active h4{color:#ff5b00}
.channel .desc{font-size:14px;color:var(--contact-card-text,#57534e);margin-bottom:10px}
.channel .number{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.channel .sla{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:#57534e;background:#FAFAF9;padding:2px 8px;border-radius:1000px;line-height:1.4; width: fit-content; border: 1px solid #D6D3D1; }

/* ============ FOOTER ============ */
.footer{background:rgb(16,24,40);color:#FFFFFF;padding:20px 28px;margin-top:auto}
.footer-inner{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-copy{font-size:14px}
.footer-links{display:flex;gap:24px}
/* UI-library Link: primary-500, underline (offset 3px), hover primary-600 */
.footer-links a{font-size:14px;font-weight:400;color:#FFFFFF;text-decoration:underline;text-underline-offset:3px;transition:color .15s}
.footer-links a:hover{color:var(--orange,#ff5b00)}
.footer-links a:active{color:var(--orange-hover,#da5e02)}

/* ============ INNER PAGES (legacy generic) ============ */
.page-wrap{max-width:1180px;margin:0 auto;padding:48px 28px}
.breadcrumbs{display:flex;align-items:center;gap:0;font-size:14px;color:var(--muted);margin-bottom:18px;flex-wrap:wrap}
.breadcrumbs a{color:var(--muted);transition:color .15s}
.breadcrumbs a:hover{color:var(--orange)}
.breadcrumbs .sep{color:var(--muted-light)}
.page-title{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:36px;font-weight:700;letter-spacing:-.6px;color:var(--ink);margin-bottom:24px;line-height:1.15}
.page-grid{display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start}
@media (max-width:900px){.page-grid{grid-template-columns:1fr}}

.side-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin-bottom:18px}
.side-card h4{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:700}
.side-card ul{list-style:none}
.side-card li{margin-bottom:8px}
.side-card a{font-size:14px;color:var(--ink);transition:color .15s;display:block;padding:6px 0;border-bottom:1px solid var(--line-soft)}
.side-card a:hover{color:var(--orange)}
.side-card li:last-child a{border-bottom:0}
.side-card .current{color:var(--orange);font-weight:600}

.section-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:32px}
.section-tile{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:inherit;transition:all .2s;display:block}
.section-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--orange)}
.section-tile h3{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:18px;font-weight:700;color:var(--ink);margin-bottom:6px}
.section-tile p{font-size:14px;color:var(--muted);margin-bottom:8px}
.section-tile .count{font-size:12px;color:var(--orange);font-weight:600}

.article-list{list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.article-list li{border-bottom:1px solid var(--line-soft)}
.article-list li:last-child{border-bottom:0}
.article-list a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px;color:var(--ink);transition:background .15s;font-size:16px}
.article-list a:hover{background:var(--cream-light);color:var(--orange)}
.article-list a::after{content:'→';color:var(--muted-light);transition:color .15s}
.article-list a:hover::after{color:var(--orange)}

.search-results-list{display:flex;flex-direction:column;gap:14px}
.search-result{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;transition:all .2s}
.search-result:hover{border-color:var(--orange);box-shadow:var(--shadow-sm)}
.search-result h3{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:18px;margin-bottom:6px}
.search-result h3 a{color:var(--ink)}
.search-result h3 a:hover{color:var(--orange)}
.search-result .crumbs{font-size:12px;color:var(--muted);margin-bottom:8px}
.search-result .snippet{font-size:14px;color:var(--ink-soft);line-height:1.55}
.search-result em{background:rgba(255, 91, 0,.18);color:var(--orange);font-style:normal;padding:0 2px;border-radius:2px}

.empty-state{text-align:center;padding:60px 24px;background:var(--cream-light);border:1px solid var(--line);border-radius:var(--radius);max-width:560px;margin:0 auto}
.empty-state h3{font-family:var(--heading-font, 'Figtree', 'Bricolage Grotesque', sans-serif);font-size:24px;margin-bottom:8px;color:var(--ink)}
.empty-state p{font-size:14px;color:var(--muted);margin-bottom:14px}
.btn-primary{display:inline-block;background:var(--orange);color:#fff;padding:10px 22px;border-radius:999px;font-weight:600;font-size:14px;transition:all .15s;border:0;cursor:pointer;font-family:inherit}
.btn-primary:hover{background:var(--orange-dark);color:#fff}
.btn-secondary{display:inline-block;background:var(--white);color:var(--ink);border:1px solid var(--line);padding:10px 22px;border-radius:999px;font-weight:600;font-size:14px;transition:all .15s;cursor:pointer;font-family:inherit}
.btn-secondary:hover{border-color:var(--orange);color:var(--orange)}

.form-field{margin-bottom:18px}
.form-field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);font-family:inherit;font-size:14px;color:var(--ink);background:var(--white);transition:border-color .15s}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--orange)}

/* ============ ARTICLE / CATEGORY / SECTION PAGES ============ */

/* Sub-nav strip (breadcrumb + inline search) */
.sub-nav-strip{
  padding:18px 32px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;border-bottom:1px solid var(--line);
}
.sub-nav-breadcrumb{font-size:12px;color:#a8a29e;line-height:1.4;margin-bottom:12px}

/* Bottom-of-page "Back to Help Center" CTA */
.page-back-cta-wrap{
  display:flex;justify-content:center;
  padding:28px 32px 48px;
  background:transparent;
}
/* Section page only: 20px top padding above the back button + ghost variant (no border) */
body:has(.section-hero) .page-back-cta-wrap{padding-top:20px}
body:has(.section-hero) .page-back-cta{border:0}
/* Submit-a-request page: no top padding above the back button */
body:has(.request-hero) .page-back-cta-wrap{padding-top:0}
.page-back-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 24px;border-radius:8px;
  background:transparent;color:#292524;text-decoration:none;
  border:0;box-shadow:none;
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:16px;font-weight:600;letter-spacing:.2px;
  transition:background .15s,border-color .15s,transform .15s;
}
.page-back-cta:hover{
  background:#f5f5f4;
}
.page-back-cta svg{flex-shrink:0;transition:transform .15s}
.page-back-cta:hover svg{transform:translateX(-3px)}

/* Small inline back link (used on article page between vote + contact strip) */
.article-back-link-wrap{
  display:flex;justify-content:center;
  padding:20px;
}
/* Ghost button */
.article-back-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--ink,#292524);text-decoration:none;
  background:transparent;border:0;
  transition:color .15s,background .15s;
}
.article-back-link:hover{background:#f5f5f4}
.article-back-link svg{flex-shrink:0;transition:transform .15s}
.article-back-link:hover svg{transform:translateX(-2px)}

.sub-nav-breadcrumb a{color:#a8a29e;text-decoration:none;transition:color .15s}
.sub-nav-breadcrumb a:hover{color:var(--orange)}
.sub-nav-breadcrumb ol,
.sub-nav-breadcrumb ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center}
.sub-nav-breadcrumb li{display:inline-flex;align-items:center;margin:0;padding:0}
.sub-nav-breadcrumb li::marker{content:"";display:none}
.sub-nav-breadcrumb li + li::before{content:"›";margin:0 6px;color:#a8a29e;font-size:12px}
.sub-nav-breadcrumb li:last-child{color:#a8a29e;font-weight:500}
.sub-nav-search{
  position:relative;flex:0 0 320px;max-width:360px;display:flex;align-items:center;
  background:var(--white,#FFFFFF);
  border:1.5px solid var(--orange,#ff5b00);
  border-radius:12px;
  padding:8px 14px;transition:border-color .15s,box-shadow .15s;
}
.sub-nav-search:focus-within{border-color:var(--orange-dark,#ab4804);box-shadow:0 0 0 3px rgba(255, 91, 0,.18)}
.sub-nav-search svg{color:var(--muted-light,#a8a29e);flex-shrink:0;margin-right:8px}
.sub-nav-search input{flex:1;border:0;outline:0;background:transparent;font:14px var(--body-font,'Figtree',sans-serif);color:var(--ink);font-weight:400}
.sub-nav-search input::placeholder{color:var(--muted-light,#a8a29e);opacity:1;font-weight:400;letter-spacing:.1px}
.sub-nav-search input::-webkit-input-placeholder{color:var(--muted-light,#a8a29e);opacity:1;font-weight:400}
.sub-nav-search input::-moz-placeholder{color:var(--muted-light,#a8a29e);opacity:1;font-weight:400}

/* 3-column article layout */
.article-layout{
  padding:32px 32px 32px;display:grid;
  grid-template-columns:240px 1fr 260px;gap:40px;align-items:start;
}
/* "Articles in this section" LEFT, "On this page" anchors RIGHT.
   grid-row:1 forces all three onto the same row (DOM order differs from columns). */
.article-layout > .article-aside{grid-column:3;grid-row:1}
.article-layout > .article-main{grid-column:2;grid-row:1}
.article-layout > .article-sidebar{grid-column:1;grid-row:1}
/* Article has no in-page TOC → drop the empty left column (main left, articles right) */
.article-layout:has(.article-aside-toc[hidden]){grid-template-columns:260px 1fr}
.article-layout:has(.article-aside-toc[hidden]) > .article-aside{display:none}
.article-layout:has(.article-aside-toc[hidden]) > .article-main{grid-column:2;grid-row:1}
.article-layout:has(.article-aside-toc[hidden]) > .article-sidebar{grid-column:1;grid-row:1}
.article-main{min-width:0;max-width:800px;margin:0}   /* centered in its column */
.article-header{position:relative;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.article-header::before{
  content:"";display:block;width:36px;height:4px;
  background:var(--orange,#ff5b00);border-radius:2px;margin-bottom:18px;
}
.article-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:36px;font-weight:700;line-height:1.2;
  color:var(--article-title-color,var(--ink));
  margin:0 0 14px;letter-spacing:-.01em;
}
.article-meta{font-size:14px;color:var(--muted);display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.article-meta-sep{opacity:.5}
.article-meta-item:first-child::before{
  content:"";display:inline-block;width:14px;height:14px;
  margin-right:6px;vertical-align:-2px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
  background-size:contain;background-repeat:no-repeat;opacity:.8;
}

/* Article sidebars (left + right) — card style */
.article-sidebar{position:sticky;top:90px;align-self:start}
.article-aside{
  position:sticky;top:90px;align-self:start;
  display:flex;flex-direction:column;gap:18px;
  max-height:calc(100vh - 110px);overflow-y:auto;padding-right:4px;
}
/* "Articles in this section" → white card */
.article-layout .article-sidebar{
  background:#FFFFFF;
  border:1px solid var(--line,#e7e5e4);
  border-radius:12px;padding:20px 22px;
  box-shadow:var(--shadow-xs,0 1px 1px 0 rgba(0,0,0,0.05));
}
/* "On this page" anchors → plain, no outline / background */
.article-layout .article-aside-block{
  background:transparent;border:0;border-radius:0;padding:0;
}
.sidebar-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:#a8a29e;margin:0 0 12px;
}
.sidebar-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.sidebar-item{margin:0}
.sidebar-link{
  display:block;padding:8px 14px;font-size:14px;color:var(--muted);
  text-decoration:none;border-left:2px solid transparent;margin-left:-1px;
  transition:color .15s,border-color .15s,background .15s;line-height:1.4;
}
.sidebar-link:hover{color:var(--ink);background:rgba(0,0,0,.02)}
.sidebar-link.current{color:var(--orange);font-weight:600;border-left-color:var(--orange);background:rgba(255,90,30,.04)}

/* "On this page" TOC */
.article-toc{margin:6px 0 10px 14px;padding-left:12px;border-left:1px dashed var(--line)}
.article-aside-toc .article-toc{margin:0;padding:0;border-left:0}
.article-toc-list{list-style:none;margin:0;padding:0}
.article-toc-list li{margin:0}
.article-toc-list a{display:block;padding:5px 0;font-size:14px;color:var(--muted);text-decoration:none;line-height:1.4;transition:color .15s}
.article-toc-list a:hover{color:var(--orange)}
.article-toc-list a.h3{padding-left:12px;font-size:12px}
.article-toc-list a.active{color:var(--orange);font-weight:600}

/* Recently viewed list */
.article-aside-recent .related-list{margin-bottom:0}
.related-list{list-style:none;margin:0 0 16px;padding:0}
.related-list li{margin:0;border-bottom:1px solid var(--line)}
.related-list li:last-child{border-bottom:0}
.related-link{display:block;padding:10px 0;font-size:14px;color:var(--ink);text-decoration:none;line-height:1.4;transition:color .15s}
.related-link:hover{color:var(--orange)}
.related-see-all{display:inline-block;margin-top:8px;font-size:14px;font-weight:600;color:var(--orange);text-decoration:none;transition:opacity .15s}
.related-see-all:hover{opacity:.7}

/* Article body typography */
.article-body{font:16px/1.7 var(--body-font,'Figtree',sans-serif);color:var(--article-body-text,#1c1917)}
.article-body > *:first-child{margin-top:0}
.article-body > p:first-of-type{font-size:18px;line-height:1.65;color:#44403c}
.article-body h2{
  position:relative;padding-left:14px;
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:24px;font-weight:600;color:var(--ink);
  margin:36px 0 14px;line-height:1.3;scroll-margin-top:88px;
}
.article-body h2::before{
  content:"";position:absolute;left:0;top:0.3em;bottom:0.3em;
  width:3px;background:var(--orange,#ff5b00);border-radius:2px;
}
.article-body h3{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:18px;font-weight:600;color:var(--ink);
  margin:28px 0 10px;line-height:1.35;scroll-margin-top:88px;
}
.article-body h4{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:16px;font-weight:600;color:var(--ink);margin:22px 0 8px;
}
.article-body p{margin:0 0 16px}
.article-body ul{margin:0 0 18px;padding-left:22px}
.article-body li{margin:6px 0}
.article-body a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.article-body a:hover{text-decoration:none}

/* Custom-numbered OL */
.article-body ol{list-style:none;padding-left:0;counter-reset:ol-counter;margin:18px 0}
.article-body ol > li{position:relative;padding-left:44px;counter-increment:ol-counter;margin:10px 0;min-height:28px}
.article-body ol > li::before{
  content:counter(ol-counter);position:absolute;left:0;top:0;
  width:28px;height:28px;border-radius:50%;
  background:var(--orange,#ff5b00);color:#fff;
  font-weight:700;font-size:14px;display:grid;place-items:center;
  font-family:var(--heading-font,'Figtree',sans-serif);line-height:1;
}

/* Image polish */
.article-body img{
  display:block;max-width:100%;height:auto;margin:22px auto;
  border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

/* Callouts (<blockquote> + .callout-* variants) */
.article-body blockquote,
.article-body .callout,
.article-body .callout-info{
  position:relative;margin:24px 0;padding:16px 18px 16px 50px;
  background:#ffefe4;border-left:3px solid var(--orange,#ff5b00);
  border-radius:0 10px 10px 0;color:#1c1917;font-size:16px;line-height:1.55;font-style:normal;
}
.article-body blockquote::before,
.article-body .callout::before,
.article-body .callout-info::before{
  content:"";position:absolute;left:16px;top:18px;width:22px;height:22px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8530E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='16' x2='12' y2='12'/><circle cx='12' cy='8' r='0.5' fill='%23E8530E'/></svg>");
  background-size:contain;background-repeat:no-repeat;
}
.article-body blockquote p:last-child,
.article-body .callout p:last-child{margin-bottom:0}
.article-body .callout-warning{background:#fff9e3;border-left-color:#E8B30E}
.article-body .callout-warning::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B98D08' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L1 22h22L12 2z'/><line x1='12' y1='9' x2='12' y2='14'/><circle cx='12' cy='17' r='0.5' fill='%23B98D08'/></svg>");
}
.article-body .callout-tip{background:#effaf4;border-left-color:#4a9a3a}
.article-body .callout-tip::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a9a3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polyline points='8 12 11 15 16 9'/></svg>");
}

.article-body code{
  background:var(--cream-bg);padding:2px 6px;border-radius:4px;
  font:13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#a83300;
}
.article-body pre{background:#292524;color:#e7e5e4;padding:16px 18px;border-radius:12px;overflow-x:auto;margin:18px 0}
.article-body pre code{background:transparent;color:inherit;padding:0}
.article-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:16px}
.article-body th,.article-body td{padding:10px 14px;border:1px solid var(--line);text-align:left}
.article-body th{background:var(--cream-bg);font-weight:600}
.article-body hr{border:0;border-top:1px solid var(--line);margin:28px 0}

/* Attachments */
.article-attachments{margin-top:32px;padding:18px 20px;background:var(--cream-bg);border:1px solid var(--line);border-radius:var(--radius)}
.article-attachments h4{font-family:var(--heading-font,'Figtree',sans-serif);font-size:14px;font-weight:700;color:var(--ink);margin:0 0 10px}
.article-attachments ul{list-style:none;margin:0;padding:0}
.article-attachments li{padding:5px 0;font-size:14px}
.article-attachments a{color:var(--orange);text-decoration:none}
.article-attachments a:hover{text-decoration:underline}

/* ============ INLINE "WAS THIS ARTICLE HELPFUL?" FOOTER
   Sits at the end of the article body as a cream panel with a thumb
   icon, the question, and yes/no thumb buttons on the right.
   ============================================================ */
.article-vote-inline{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:40px 0 0;padding:18px 22px;
  background:#fafaf9;
  border:0;border-radius:12px;
  position:relative;overflow:hidden;
}
.article-vote-inline::before{display:none}   /* orange left bar removed */
.article-vote-inline-text{
  display:flex;align-items:center;gap:12px;flex:1;min-width:0;
}
.article-vote-inline-icon{
  width:30px;height:30px;color:var(--orange,#ff5b00);flex-shrink:0;
  padding:5px;background:var(--orange-soft,#ffefe4);border-radius:50%;
}
.article-vote-inline-label{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:16px;font-weight:700;letter-spacing:.1px;
  color:var(--ink);
}
.article-vote-inline-buttons{display:flex;gap:10px;align-items:center}
.article-vote-inline-buttons .vote-thumb,
.article-vote-inline-buttons a.vote-thumb{
  width:44px;height:44px;border-radius:50%;
  background:var(--white);border:1.5px solid var(--line);
  color:var(--ink-soft);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s;font-family:inherit;font-size:0;text-decoration:none;
}
.article-vote-inline-buttons .vote-thumb::before{
  content:"";display:block;width:22px;height:22px;
  background-position:center;background-repeat:no-repeat;background-size:contain;
  filter:brightness(.4);
}
.article-vote-inline-buttons .vote-thumb-up::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 11v8a1 1 0 0 0 1 1h10.4a2 2 0 0 0 2-1.6l1.6-8a1.5 1.5 0 0 0-1.5-1.8h-5.2a.5.5 0 0 1-.5-.6l.7-3.4a1.8 1.8 0 0 0-1.8-2.1L13 3l-3 5-3 3z'/><path d='M3 11h4v9H3z'/></svg>");
}
.article-vote-inline-buttons .vote-thumb-down::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 13V5a1 1 0 0 0-1-1H5.6a2 2 0 0 0-2 1.6l-1.6 8a1.5 1.5 0 0 0 1.5 1.8h5.2a.5.5 0 0 1 .5.6l-.7 3.4a1.8 1.8 0 0 0 1.8 2.1l.7 0 3-5 3-3z'/><path d='M21 13h-4V4h4z'/></svg>");
}
.article-vote-inline-buttons .vote-thumb:hover{
  border-color:var(--orange);background:var(--orange-soft,#ffefe4);
}
.article-vote-inline-buttons .vote-thumb.vote-voted-up,
.article-vote-inline-buttons .vote-thumb.vote-voted-down{
  background:var(--orange);border-color:var(--orange);
}
.article-vote-inline-buttons .vote-thumb.vote-voted-up::before,
.article-vote-inline-buttons .vote-thumb.vote-voted-down::before{
  filter:brightness(0) invert(1);
}
.article-vote-q{font-family:var(--heading-font,'Figtree',sans-serif);font-size:18px;font-weight:700;color:var(--ink);margin:0 0 14px}
.article-vote-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.article-vote-buttons button,.article-vote-buttons .vote-button{
  background:var(--white);border:1px solid var(--line);color:var(--ink);
  padding:9px 22px;border-radius:999px;font-weight:600;cursor:pointer;font-size:14px;
  transition:all .15s;font-family:var(--body-font,'Figtree',sans-serif);
}
.article-vote-buttons button:hover,.article-vote-buttons .vote-button:hover{border-color:var(--orange);color:var(--orange)}
.article-vote-buttons .vote-button.vote-voted-up,
.article-vote-buttons .vote-button.vote-voted-down{background:var(--orange);border-color:var(--orange);color:var(--white)}

/* ============ COMPACT "NEED MORE HELP?" STRIP
   Full-width (matches the article-layout edges above it). Horizontal
   layout: campervan illustration on the left, content in the middle,
   3 contact pill buttons on the right.
   ============================================================ */
.article-help-strip-v2{
  margin:0;padding:24px 32px 0;
  background:var(--white,#FFFFFF);
}
.article-help-strip-v2 .article-help-inner{
  position:relative;
  background:var(--white,#FFFFFF);
  border:0;border-top:1px solid var(--line);
  border-radius:0;
  padding:24px 28px 28px;text-align:left;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
}
.article-help-strip-v2 .article-help-illustration{
  width:var(--help-illustration-size,180px);
  aspect-ratio:330 / 180;
  height:auto;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.article-help-strip-v2 .article-help-illustration-shape{
  width:100%;height:100%;
  background-color:var(--help-illustration-color,var(--orange,#ff5b00));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.article-help-strip-v2 .article-help-content{min-width:0}
.article-help-strip-v2 .article-help-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:18px;font-weight:700;color:var(--ink);margin:0 0 3px;line-height:1.25;
}
.article-help-strip-v2 .article-help-sub{
  font-size:14px;color:var(--muted);margin:0;line-height:1.4;
}
.article-help-strip-v2 .article-help-channels{
  display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end;
}
/* Replicates the homepage .channel cards: white, shadow-xs → shadow-md on hover,
   grey-100 icon (grey-800, 1.5 stroke) → orange/white on hover, SLA pill.
   Keeps the rectangular horizontal layout; corners = radius-lg (not a pill). */
.article-help-strip-v2 .help-channel{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px;border-radius:8px;
  background:#FFFFFF;border:1px solid #e7e5e4;
  text-decoration:none;color:var(--ink);font-family:inherit;cursor:pointer;
  box-shadow:none;
  transition:transform .2s,border-color .2s;text-align:left;
}
.article-help-strip-v2 .help-channel:hover{
  transform:translateY(-3px);border-color:#e7e5e4;box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,0.10));
}
.article-help-strip-v2 .help-channel-icon{
  width:46px;height:46px;border-radius:8px;
  background:#f5f5f4;color:#57534e;
  display:grid;place-items:center;flex-shrink:0;
  transition:background .15s,color .15s;
}
.article-help-strip-v2 .help-channel-icon svg{width:22px;height:22px;stroke-width:1.5px}
.article-help-strip-v2 .help-channel:hover .help-channel-icon{
  background:#fff;color:#ff5b00;border:1px inset rgba(89,66,53,0.2);box-shadow:0 1px 2px 0 rgba(0,0,0,0.05);
}
.article-help-strip-v2 .help-channel-body{
  display:flex;flex-direction:column;gap:0;min-width:0;
}
.article-help-strip-v2 .help-channel-body h4{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:14px;font-weight:700;color:var(--ink);margin:0;line-height:1.2;
}
.article-help-strip-v2 .help-channel-sla{
  display:inline-block;font-size:12px;font-weight:500;letter-spacing:.3px;
  text-transform:uppercase;color:#57534e;
  background:#FAFAF9;padding:2px 7px;border-radius:4px;border:1px solid #D6D3D1;
  margin-top:3px;line-height:1.4;
}
.article-help-title{font-family:var(--heading-font,'Figtree',sans-serif);font-size:24px;font-weight:700;color:var(--ink);margin:0 0 8px}
.article-help-sub{color:var(--muted);font-size:16px;margin:0 0 26px}
.article-help-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:880px;margin:0 auto}
.help-channel{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:var(--white);border:1px solid var(--line);border-radius:8px;
  text-decoration:none;color:var(--ink);cursor:pointer;text-align:left;
  font-family:var(--body-font,'Figtree',sans-serif);
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.help-channel:hover{transform:translateY(-2px);border-color:var(--orange);box-shadow:0 6px 18px rgba(255,90,30,.10)}
.help-channel-icon{
  width:44px;height:44px;border-radius:50%;background:var(--orange-tint,#ffefe4);
  display:flex;align-items:center;justify-content:center;color:var(--orange);flex-shrink:0;
}
.help-channel-icon svg{width:22px;height:22px}
.help-channel-body{flex:1;min-width:0}
.help-channel-body h4{font-family:var(--heading-font,'Figtree',sans-serif);font-size:16px;font-weight:700;color:var(--ink);margin:0 0 2px}
.help-channel-body p{font-size:14px;color:var(--muted);margin:0 0 4px;line-height:1.3}
.help-channel-sla{
  display:inline-block;font-size:12px;font-weight:500;color:#57534e;
  background:#e7e5e4;padding:2px 7px;border-radius:4px;
  text-transform:uppercase;letter-spacing:.3px;
}

/* Reading-progress bar */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;pointer-events:none;background:transparent}
.reading-progress-bar{height:100%;width:0;background:var(--orange,#ff5b00);transition:width .1s linear}

/* ============ CATEGORY PAGE ============ */
.category-hero{
  max-width:1200px;margin:0 auto;padding:56px 40px 44px;
  background:var(--category-hero-bg,transparent);background-size:cover;background-position:center;
  border-radius:0 0 12px 12px;
}
.category-hero.has-image{
  color:#fff;border-radius:0 0 12px 12px;margin:18px auto 0;padding:80px 48px;min-height:240px;
  display:flex;align-items:flex-end;
}
.category-hero.has-image .category-title{color:#fff}
.category-hero.has-image .category-desc{color:rgba(255,255,255,.92)}
.category-hero.has-image .category-eyebrow{color:#ffefe4}
.category-hero-inner{max-width:880px}
.category-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.category-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:36px;font-weight:700;line-height:1.15;
  color:var(--category-title-color,var(--ink));
  margin:0 0 14px;letter-spacing:-.015em;
}
.category-desc{color:var(--muted);font-size:16px;line-height:1.55;margin:0;max-width:680px}

.category-sections{max-width:1200px;margin:0 auto;padding:32px 32px 50px}
.category-section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.category-section-card{
  display:flex;flex-direction:column;
  background:var(--category-card-bg,var(--white));
  border:1px solid #e7e5e4;border-radius:18px;
  padding:22px 22px 16px;text-decoration:none;color:var(--ink);
  transition:transform .18s,box-shadow .18s;
  height:170px;overflow:hidden;        /* fixed height; articles pinned to bottom */
}
.category-section-card:hover{transform:translateY(-3px);border-color:#e7e5e4;box-shadow:var(--shadow-lg,0 20px 25px -5px rgba(0,0,0,0.10))}
.category-section-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.category-section-num{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#a8a29e}
.category-section-arrow{flex-shrink:0;color:var(--orange,#ff5b00);transition:transform .15s}
.category-section-card:hover .category-section-arrow{transform:translateX(3px)}
.category-section-title{
  font-family:var(--heading-font,'Figtree',sans-serif);font-size:18px;font-weight:700;
  color:var(--category-card-title,var(--ink));margin:0 0 8px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.category-section-desc{
  color:var(--muted);font-size:14px;line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.category-section-articles{
  margin-top:auto;padding-top:12px;border-top:1px dashed var(--line);
  display:flex;align-items:center;justify-content:space-between;   /* "Browse articles" left, arrow at opposite edge */
}
.category-section-count{font-size:14px;font-weight:600;color:var(--orange)}

/* ============ SECTION PAGE ============ */
.section-hero{
  max-width:1200px;margin:0 auto;padding:48px 40px 32px;
  background:var(--section-hero-bg,transparent);background-size:cover;background-position:center;
  border-radius:0 0 12px 12px;
}
.section-hero.has-image{
  color:#fff;border-radius:18px;margin:18px auto 0;padding:64px 44px;min-height:200px;
  display:flex;align-items:flex-end;
}
.section-hero.has-image .section-title{color:#fff}
.section-hero.has-image .section-desc{color:rgba(255,255,255,.92)}
.section-hero.has-image .section-eyebrow{color:#ffefe4}
.section-hero-inner{max-width:880px}
.section-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.section-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:36px;font-weight:700;line-height:1.18;
  color:var(--section-title-color,var(--ink));
  margin:0 0 12px;letter-spacing:-.01em;
}
.section-desc{color:var(--muted);font-size:16px;line-height:1.55;margin:0;max-width:680px}

.section-layout{
  max-width:1200px;margin:0 auto;padding:20px 32px 50px; 
  display:grid;grid-template-columns:1fr 280px;gap:36px;align-items:start;
}

.section-layout--solo{grid-template-columns:1fr;max-width:880px}
.section-main{min-width:0}
.section-subhead{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:14px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:#a8a29e;margin:0 0 14px;padding-top:32px;
}
.section-subsections{margin-bottom:32px}
.section-subsection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.section-subsection-card{
  display:block;padding:16px 18px;background:var(--section-card-bg,var(--cream-bg));
  border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);
  transition:transform .15s,border-color .15s;
}
.section-subsection-card:hover{background:#fafaf9;border-color:#e7e5e4}
.section-subsection-card h4{font-family:var(--heading-font,'Figtree',sans-serif);font-size:16px;font-weight:700;color:var(--ink);margin:0 0 4px}
.section-subsection-card p{font-size:14px;color:var(--muted);margin:0;line-height:1.4}

.section-article-list{list-style:none;margin:0;padding:0}
.section-article-item{margin:0}        /* no separators between article rows */
.section-article-link{display:flex;align-items:center;gap:16px;padding:12px 14px;text-decoration:none;color:var(--ink);border-radius:8px;transition:background .15s,color .15s}
.section-article-link:hover{background:#FAFAF9}   /* grey-100 hover */
.section-article-body{flex:1;min-width:0}
.section-article-title{font-family:var(--heading-font,'Figtree',sans-serif);font-size:16px;font-weight:600;color:var(--ink);line-height:1.4}
.section-article-meta{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.section-article-meta-sep{opacity:.5}
.section-article-promoted{
  display:inline-block;font-size:12px;font-weight:700;color:var(--orange);
  background:var(--orange-tint,#ffefe4);padding:2px 8px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.4px;
}
.section-article-arrow{color:#49545C;flex-shrink:0;transition:color .15s,transform .15s}
.section-article-link:hover .section-article-arrow{color:#FF5B00;transform:translateX(3px)}

.section-aside{position:sticky;top:90px;align-self:start}
.section-aside-card{background:var(--section-aside-bg,var(--cream-bg));border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.section-aside-card .sidebar-list{border-left:0;margin-bottom:14px}
.section-aside-card .sidebar-link{padding:7px 0;border-left:0;margin-left:0}
.section-aside-card .sidebar-link.current{background:transparent;border-left:0;color:var(--orange)}

/* ============ COMMUNITY HERO ============ */
.community-hero{
  max-width:1200px;margin:0 auto;padding:56px 40px 44px;
  background:var(--community-hero-bg,transparent);background-size:cover;background-position:center;
}
.community-hero.has-image{
  color:#fff;border-radius:18px;margin:18px auto 0;padding:80px 48px;min-height:240px;
  display:flex;align-items:flex-end;
}
.community-hero.has-image .community-title{color:#fff}
.community-hero.has-image .community-desc{color:rgba(255,255,255,.92)}
.community-hero.has-image .category-eyebrow{color:#ffefe4}
.community-hero-inner{max-width:880px}
.community-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:36px;font-weight:700;letter-spacing:-.6px;line-height:1.1;
  color:var(--community-title-color,var(--ink));margin:0 0 10px;
}
.community-desc{font-size:16px;color:var(--muted);max-width:760px;line-height:1.5;margin:0}
@media (max-width:760px){
  .community-hero{padding:28px 18px 18px}
  .community-hero.has-image{padding:48px 22px;min-height:180px}
  .community-title{font-size:30px}
}

/* ============ COMMUNITY POST LIST ============ */
.community-list-wrap{padding:24px 32px 8px}
.community-list-inner{max-width:880px;margin:0 auto}
.community-post-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.community-post-item{border-bottom:1px solid var(--line)}
.community-post-link{
  display:flex;align-items:center;gap:16px;
  padding:18px 4px;text-decoration:none;color:var(--ink);
  transition:background .15s,padding .15s;
}
.community-post-link:hover{background:#ffefe4;padding-left:14px;padding-right:14px;border-radius:8px}
.community-post-link:hover .community-post-title{color:var(--orange,#ff5b00)}
.community-post-link:hover .community-post-arrow{color:var(--orange,#ff5b00);transform:translateX(3px)}
.community-post-body{flex:1;min-width:0}
.community-post-title{
  margin:0 0 4px;
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);
  transition:color .15s;
}
.community-post-meta{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.community-post-meta-sep{color:var(--muted-light)}
.community-post-arrow{color:var(--muted-light);flex-shrink:0;transition:color .15s,transform .15s}
.community-empty{
  text-align:center;padding:48px 24px;border:1px dashed var(--line);border-radius:12px;
  background:var(--cream-bg,#f9f7f3);color:var(--muted);
}
.community-empty h3{
  margin:0 0 8px;
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:18px;font-weight:700;color:var(--ink);
}
.community-empty p{margin:0;font-size:14px}
@media (max-width:760px){
  .community-list-wrap{padding:16px 18px 4px}
  .community-post-link{padding:16px 2px}
  .community-post-link:hover{padding-left:10px;padding-right:10px}
}

/* ============ USER PROFILE PAGE ============ */
.profile-hero{
  background:var(--cream-bg,#f9f7f3);padding:40px 32px 32px;
}
.profile-hero-inner{
  max-width:1000px;margin:0 auto;
  display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;
}
.profile-avatar{
  width:80px;height:80px;flex-shrink:0;border-radius:50%;
  background:var(--orange,#ff5b00);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.profile-identity{flex:1;min-width:0}
.profile-name{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:36px;font-weight:700;letter-spacing:-.4px;line-height:1.15;color:var(--ink);
  margin:0 0 6px;
}
.profile-meta{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.profile-meta-sep{color:var(--muted-light)}
.profile-role{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600;
  text-transform:capitalize;color:var(--ink);
}
.profile-description{
  font-size:14px;line-height:1.55;color:var(--ink);margin:6px 0 0;max-width:640px;
}
.profile-actions{flex-shrink:0;align-self:flex-start}
.profile-actions a,.profile-actions button{
  display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line);font-size:14px;font-weight:600;
  color:var(--ink);text-decoration:none;cursor:pointer;
  transition:border-color .15s,color .15s;
}
.profile-actions a:hover,.profile-actions button:hover{
  border-color:var(--orange,#ff5b00);color:var(--orange,#ff5b00);
}

.profile-stats-wrap{padding:32px 32px 16px}
.profile-stats-inner{max-width:1000px;margin:0 auto}
.profile-activity-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:28px 32px;
}
.profile-activity-heading{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:14px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--orange,#ff5b00);margin:0 0 10px;
}
.profile-activity-body{
  font-size:16px;line-height:1.55;color:var(--ink);margin:0 0 22px;max-width:680px;
}
.profile-activity-body strong{font-weight:700}
.profile-quick-links{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;
}
.profile-quick-link{
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px;background:var(--cream-bg,#f9f7f3);
  border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--ink);
  transition:border-color .15s,transform .15s,background .15s;
}
.profile-quick-link:hover{
  border-color:var(--orange,#ff5b00);
  transform:translateY(-2px);
  background:#ffefe4;
}
.profile-quick-link strong{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:16px;font-weight:700;color:var(--ink);
}
.profile-quick-link span{font-size:14px;color:var(--muted);line-height:1.45}

/* Sign-in required state */
.profile-signin-required{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:60px 32px;
}
.profile-signin-inner{
  text-align:center;max-width:480px;
  padding:48px 28px;border:1px solid var(--line);border-radius:18px;
  background:var(--cream-bg,#f9f7f3);
}
.profile-signin-inner svg{color:var(--orange,#ff5b00);margin-bottom:14px}
.profile-signin-inner h1{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:30px;font-weight:700;color:var(--ink);margin:0 0 8px;
}
.profile-signin-inner p{font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 22px}
.profile-signin-actions{display:flex;flex-direction:column;gap:10px;align-items:center}
.profile-signin-btn{display:inline-flex}
.profile-secondary-link{
  font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;
  transition:color .15s;
}
.profile-secondary-link:hover{color:var(--orange,#ff5b00)}

@media (max-width:760px){
  .profile-hero{padding:24px 18px}
  .profile-hero-inner{gap:16px}
  .profile-avatar{width:64px;height:64px;font-size:24px}
  .profile-name{font-size:24px}
  .profile-actions{width:100%}
  .profile-stats-wrap{padding:22px 18px 10px}
  .profile-stats-grid{grid-template-columns:repeat(2,1fr)}
  .profile-stat{padding:18px 12px}
  .profile-stat-value{font-size:24px}
}

/* ============ ERROR PAGE ============ */
.error-page{
  flex:1;min-height:60vh;display:flex;align-items:center;justify-content:center;
  padding:60px 32px;
}
.error-page-inner{text-align:center;max-width:520px;margin:0 auto}
.error-page-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:36px;font-weight:700;letter-spacing:-2px;line-height:1;
  color:#1c1917;margin:0 0 12px;
}
/* Error-page CTA = primary (filled) button */
/* page-back-cta uses the unified transparent → grey-100 ghost style on all pages (incl. error) */
.error-page-lead{font-size:16px;color:var(--muted);margin:0 auto 28px;max-width:420px;line-height:1.5}

/* ============ SEARCH RESULTS PAGE ============ */
.search-hero{
  background:var(--cream-bg,#f9f7f3);
  padding:54px 32px;
}
.search-hero-inner{max-width:760px;margin:0 auto;text-align:center}
.search-hero-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:36px;font-weight:700;letter-spacing:-.4px;line-height:1.15;color:var(--ink);
  margin:6px 0 8px;
}
.search-hero-desc{font-size:16px;color:var(--muted);margin:0 0 24px;line-height:1.5}
.search-hero-form{
  display:flex;align-items:center;
  background:var(--white);border-radius:12px;
  border: 1px solid #FAFAF9;
  padding:12px;max-width:560px;margin:0 auto;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10)
  /* box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,0.10)); */
	
}
.search-hero-form svg{width:18px;height:18px;color:var(--muted-light,#a8a29e);flex-shrink:0}
.search-hero-form input{
  flex:1;border:0;outline:0;background:transparent;
  font-family:inherit;font-size:16px;color:var(--ink);font-weight:400;
  padding:12px 14px;
}
.search-hero-form input::placeholder{color:var(--muted-light,#a8a29e) !important;opacity:1 !important;font-weight:400 !important;letter-spacing:.1px}
.search-hero-btn{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:44px;height:44px;background:var(--orange,#ff5b00);color:#fff;
  border:1px solid rgba(89,66,53,0.2);border-radius:8px;
  cursor:pointer;transition:background .15s;
}
.search-hero-btn svg{width:20px;height:20px;color:#fff}
.search-hero-btn:hover{background:var(--orange-dark,#ab4804)}

.search-results-wrap{padding:28px 32px 12px}
.search-results-inner{max-width:820px;margin:0 auto}
.search-results-count{font-size:14px;color:var(--muted);margin-bottom:14px;letter-spacing:.2px}
.search-result-list{list-style:none;margin:0;padding:0}
.search-result-item{border-radius:8px;transition:background .15s}
.search-result-item:hover{background:#FAFAF9}
.search-result-item:hover .search-result-arrow{color:#FF5B00;transform:translateX(3px)}
.search-result-link{
  display:flex;align-items:center;gap:16px;padding:12px 14px;
  text-decoration:none;color:var(--ink);
}
.search-result-body{flex:1;min-width:0}
.search-result-title{
  margin:0 0 4px;font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);
}
.search-result-snippet{font-size:14px;color:var(--muted);line-height:1.5;margin:0}
.search-result-arrow{color:#49545C;flex-shrink:0;transition:color .15s,transform .15s}

.search-empty{
  text-align:center;padding:60px 28px;
  border:1px dashed var(--line);border-radius:12px;background:var(--cream-bg,#f9f7f3);color:var(--muted);
}
.search-empty svg{color:var(--orange,#ff5b00);margin-bottom:14px}
.search-empty h3{
  margin:0 0 8px;font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:20px;font-weight:700;color:var(--ink);
}
.search-empty p{margin:0;font-size:14px;max-width:380px;margin:0 auto;line-height:1.5}

@media (max-width:760px){
  .search-hero{padding:30px 18px 36px}
  .search-hero-title{font-size:30px}
  .search-hero-form{padding:8px;flex-wrap:nowrap}
  .search-hero-btn{width:40px;height:40px}
  .search-results-wrap{padding:18px 18px 8px}
  .error-page-title{font-size:36px}
}

/* ============ COMMUNITY TOPIC LIST (topic cards) ============ */
.community-topics-wrap{padding:24px 32px 8px}
.community-topics-inner{max-width:1200px;margin:0 auto}
.community-topic-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
}
.community-topic-card{
  display:flex;flex-direction:column;gap:8px;
  padding:22px 22px 24px;background:#fff;border:1px solid var(--line);border-radius:12px;
  text-decoration:none;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.community-topic-card:hover{
  border-color:var(--orange,#ff5b00);
  box-shadow:0 6px 18px rgba(255, 91, 0,.10);
  transform:translateY(-2px);
}
.community-topic-card-head{display:flex;justify-content:space-between;align-items:center}
.community-topic-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--orange,#ff5b00);
}
.community-topic-arrow{color:var(--muted-light);transition:color .15s,transform .15s}
.community-topic-card:hover .community-topic-arrow{color:var(--orange,#ff5b00);transform:translateX(3px)}
.community-topic-title{
  margin:4px 0 0;
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:18px;font-weight:700;line-height:1.25;color:var(--ink);
}
.community-topic-desc{
  margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--muted);
}
@media (max-width:760px){
  .community-topics-wrap{padding:16px 18px 4px}
  .community-topic-grid{grid-template-columns:1fr;gap:12px}
}

/* ============ COMMUNITY POST PAGE (single post) ============ */
.community-post-page{
  max-width:820px;margin:0 auto;padding:28px 32px 40px;
}
.community-post-header{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.community-post-page-title{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:36px;font-weight:700;letter-spacing:-.4px;line-height:1.2;color:var(--ink);
  margin:0 0 10px;
}
.community-post-page-meta{
  font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.community-post-body-content{
  font-size:16px;line-height:1.7;color:var(--ink);
}
.community-post-body-content p{margin:0 0 14px}
.community-post-body-content a{color:var(--orange,#ff5b00);text-decoration:underline}
.community-post-body-content a:hover{color:var(--orange-dark,#ab4804)}
.community-post-body-content strong{font-weight:700}
.community-post-body-content ul,
.community-post-body-content ol{margin:0 0 14px 22px}
.community-comments{margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.community-comments-heading{
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:18px;font-weight:700;color:var(--ink);margin:0 0 14px;
}
.community-comment-list{list-style:none;margin:0;padding:0}
.community-comment-item{
  padding:16px 18px;background:var(--cream-bg,#f9f7f3);border:1px solid var(--line);
  border-radius:12px;margin-bottom:10px;
}
.community-comment-meta{font-size:14px;color:var(--muted);margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.community-comment-body{font-size:14px;line-height:1.6;color:var(--ink)}
@media (max-width:760px){
  .community-post-page{padding:18px 18px 24px}
  .community-post-page-title{font-size:30px}
}

/* ============ SUBMIT-A-REQUEST PAGE ============ */
.request-hero{
  max-width:1200px;margin:0 auto;padding:56px 40px 44px;
  background:var(--request-hero-bg,#f9f7f3);background-size:cover;background-position:center;
  border-radius:0 0 12px 12px;
}
.request-hero.has-image{
  color:#fff;border-radius:0 0 12px 12px;margin:0 auto;padding:80px 48px;min-height:240px;
  display:flex;align-items:flex-end;
}
.request-hero.has-image .category-title{color:#fff}
.request-hero.has-image .category-desc{color:rgba(255,255,255,.92)}
.request-hero.has-image .category-eyebrow{color:#ffefe4}
.request-hero-inner{max-width:880px}
@media (max-width:760px){
  .request-hero{padding:28px 22px 22px;margin:12px 18px 0}
  .request-hero.has-image{padding:48px 28px;min-height:180px}
}

.request-layout{
  max-width:1200px;margin:0 auto;padding:32px 32px 50px;
  display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;
}
.request-main{min-width:0}
.request-form-card{
  background:var(--white,#fff);border:1px solid var(--line);border-radius:12px;
  padding:28px 32px;
  box-shadow:var(--shadow-xs,0 1px 1px 0 rgba(0,0,0,0.05));
}

/* Style the Zendesk {{request_form}}-injected form */
.request-form-card .form-field{margin-bottom:20px}
.request-form-card label{
  display:block;font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px;line-height:1.3;
}
.request-form-card .form-field-description,
.request-form-card .description{
  font-size:14px;color:var(--muted);margin:6px 0 0;line-height:1.4;
}
.request-form-card input[type="text"],
.request-form-card input[type="email"],
.request-form-card input[type="url"],
.request-form-card input[type="tel"],
.request-form-card input[type="number"],
.request-form-card select,
.request-form-card textarea{
  width:100%;padding:12px 16px;
  border:1px solid #e7e5e4;border-radius:var(--radius);background:#fff;   /* grey-200 border, radius-md */
  font:14px var(--body-font,'Figtree',sans-serif);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
/* Description field hint → 14px, text-secondary */
#request_description_hint{font-size:14px;color:#57534e;padding-top:4px}
.request-form-card textarea{min-height:140px;resize:vertical;line-height:1.5}
.request-form-card input:focus,
.request-form-card select:focus,
.request-form-card textarea:focus{
  outline:0;border-color:var(--orange,#ff5b00);
  box-shadow:0 0 0 3px rgba(255, 91, 0,.15);
}
.request-form-card input::placeholder,
.request-form-card textarea::placeholder{color:var(--muted-light,#9aa0a6)}
.request-form-card .form-field.required label::after,
.request-form-card .required label::after{
  content:" *";color:var(--orange,#ff5b00);
}
.request-form-card .nesty-input,
.request-form-card .nesty-container{
  border:1px solid #e7e5e4;border-radius:var(--radius);background:#fff;   /* grey-200, radius-md */
  font-family:var(--body-font,'Figtree',sans-serif);color:var(--ink);
}
.request-form-card .nesty-input{padding:12px 16px;font-size:14px}
/* Dropdown (open) state: keep the rounded corners + Figtree font on the options */
.request-form-card .nesty-container *{font-family:var(--body-font,'Figtree',sans-serif)}
.request-form-card .attachments,
.request-form-card .form-field-attachments{
  border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center;color:var(--muted);
}

/* Submit button + footer */
.request-form-card .form-buttons,
.request-form-card .request-form-footer{
  display:flex;justify-content:flex-end;gap:12px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
}
/* Primary CTA button (UI-library) */
.request-form-card button[type="submit"],
.request-form-card input[type="submit"]{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border:0;border-radius:8px;cursor:pointer;
  background:var(--orange,#ff5b00);color:#fff;
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:16px;font-weight:600;letter-spacing:.2px;
  transition:background .15s;
}
.request-form-card button[type="submit"]:hover,
.request-form-card input[type="submit"]:hover{
  background:var(--orange-hover,#da5e02);
}
.request-form-card button.cancel{
  padding:12px 22px;border-radius:999px;background:transparent;
  border:1px solid var(--line);color:var(--ink);
  font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:border-color .15s,color .15s;
}
.request-form-card button.cancel:hover{border-color:var(--orange,#ff5b00);color:var(--orange,#ff5b00)}

/* Sidebar: Other ways to reach us */
.request-aside{position:sticky;top:90px;align-self:start}
.request-aside-card{
  background:#FFFFFF;border:1px solid var(--line);
  border-radius:12px;padding:22px 22px 18px;
}
.request-aside-card .sidebar-title{margin-bottom:14px}
/* Channels mirror the homepage .channel states (white, shadow-xs → shadow-md + lift on
   hover; grey-100 icon → orange/white). Layout (horizontal row) kept as-is. */
.request-channel{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:12px 14px;margin-bottom:8px;
  background:#fff;border:1px solid #e7e5e4;border-radius:12px;
  text-decoration:none;color:var(--ink);cursor:pointer;text-align:left;
  font:inherit;
  box-shadow:var(--shadow-xs,0 1px 1px 0 rgba(0,0,0,0.05));
  transition:transform .2s,box-shadow .2s;
}
.request-channel:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md,0 4px 6px -1px rgba(0,0,0,0.10));
}
.request-channel:last-child{margin-bottom:0}
.request-channel-icon{
  width:46px;height:46px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:#FFEFE4;color:#FF5B00;
  transition:background .15s,color .15s;
}
.request-channel-icon svg{width:22px;height:22px;stroke-width:1.5px}
.request-channel:hover .request-channel-icon{background:var(--orange,#ff5b00);color:#fff}
.request-channel-body{display:flex;flex-direction:column;min-width:0;flex:1}
.request-channel-body h5{
  margin:0;font-family:var(--heading-font,'Figtree',sans-serif);
  font-size:14px;font-weight:700;color:var(--ink);line-height:1.2;
}
.request-channel-sla{
  display:inline-block;align-self:flex-start;
  font-size:12px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;
  color:#57534e;background:#e7e5e4;
  padding:2px 7px;border-radius:4px;margin-top:4px;line-height:1.4;
}

/* Hide OpenCX floating trigger button — we open the chat from the custom "Web chat" buttons via openIndieBot() */
iframe[title="OpenCX Live Chat Trigger"]{
  position:fixed !important;
  top:-9999px !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* Custom X close button overlaid on the OpenCX chat panel */
#indie-bot-close{
  position:fixed;
  bottom:calc(20px + 540px - 44px);
  right:calc(20px + 12px);
  z-index:2147483647;
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transition:background .15s,transform .15s;
}
#indie-bot-close:hover{background:rgba(0,0,0,.85);transform:scale(1.05)}
#indie-bot-close:focus-visible{outline:2px solid var(--orange,#ff5b00);outline-offset:2px}
@media (max-width:760px){
  #indie-bot-close{bottom:auto;top:14px;right:14px}
}
/* Pagination — minimal style: numbers + Next only */
.pagination{
  list-style:none;padding:0;
  display:flex;justify-content:center;align-items:center;gap:6px;
  margin:36px 0 0;font-family:var(--heading-font,'Figtree',sans-serif);flex-wrap:wrap;
}
.pagination li{list-style:none;display:inline-flex;align-items:center}
.pagination li::marker{content:""}

/* Hide First and Last buttons + their symbol siblings */
.pagination li[class*="first"],
.pagination li[class*="last"]{display:none}

/* Default: numeric page links — small circular pills */
.pagination a,
.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;
  border-radius:999px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--muted);
  background:transparent;border:1px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
}
.pagination a:hover{color:var(--orange,#ff5b00);background:#ffefe4}

/* Current page — orange filled circle */
.pagination .current,
.pagination [aria-current="page"]{
  background:var(--orange,#ff5b00);color:#fff;border-color:var(--orange,#ff5b00);
}

/* Prev / Next — outlined pill on the side */
.pagination li[class*="prev"] a,
.pagination li[class*="next"] a{
  padding:0 18px;border:1px solid var(--line);background:#fff;
  color:var(--ink);font-weight:700;
}
.pagination li[class*="prev"] a:hover,
.pagination li[class*="next"] a:hover{
  border-color:var(--orange,#ff5b00);color:var(--orange,#ff5b00);background:#ffefe4;
}

/* Hide the small symbol-only siblings (Zendesk outputs Next + › as two adjacent items) */
.pagination li[class*="prev"] + li[class*="prev"],
.pagination li[class*="next"] + li[class*="next"]{display:none}

.pagination .disabled,
.pagination [aria-disabled="true"]{opacity:.35;pointer-events:none}
.pagination a:focus-visible{outline:2px solid var(--orange,#ff5b00);outline-offset:2px}

/* ============================================================
   TOPNAV SCROLL MORPH — on scroll, nav links collapse and a
   centered search bar + abbreviated language toggle take over.
   ============================================================ */
/* Only grow the logo when scrolled — so the search bar centers between
   logo and right cluster. In default state the logo stays at natural
   width, leaving room for all the nav links on the right. */
.topnav.scrolled .topnav-inner > .logo{ flex-grow:1; }
.topnav-search{
  display:none;flex:0 1 350px;max-width:350px;min-width:0;
  align-items:center;gap:8px;
  background:#FFFFFF;
  border:1px solid var(--line,#e7e5e4);
  border-radius:8px;padding:4px 4px 4px 14px;
  box-shadow:var(--shadow-xs,0 1px 1px 0 rgba(0,0,0,0.05));
  transition:border-color .15s,box-shadow .15s;
}
.topnav-search:focus-within{border-color:var(--orange,#ff5b00);box-shadow:0 0 0 3px rgba(255,91,0,.18)}
.topnav-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:14px var(--body-font,'Figtree',sans-serif);color:var(--ink,#292524);font-weight:400}
.topnav-search input::placeholder{color:#a8a29e;opacity:1;font-weight:400;letter-spacing:.1px}
.topnav-search input::-webkit-input-placeholder{color:#a8a29e;opacity:1;font-weight:400}
.topnav-search input::-moz-placeholder{color:#a8a29e;opacity:1;font-weight:400}
.topnav-search-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:1px solid rgba(89,66,53,0.2);border-radius:6px;background:var(--orange,#ff5b00);color:#fff;cursor:pointer;transition:background .15s}
.topnav-search-btn:hover{background:var(--orange-dark,#ab4804)}
.topnav-search-btn svg{width:16px;height:16px;flex-shrink:0}

/* When .scrolled is on the topnav: hide links + show search + shrink language */
.topnav.scrolled .topnav-links{display:none}
.topnav.scrolled .topnav-search{display:flex}
.topnav.scrolled .lang-dropdown-toggle > span{display:none}
.topnav.scrolled .lang-dropdown-toggle{padding:6px 10px;gap:4px}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .cat-journey{grid-template-columns:repeat(2,1fr)}
  .cat-journey .cat-stage:nth-child(2)::after{display:none}
  .video-card{flex-basis:calc(50% - 14px)}   /* 2 per row on tablet/mobile, lone card centers */
  .channels-grid{max-width:520px}
  .channel{flex-basis:calc(50% - 10px)}   /* 2 per row on tablet/mobile, lone card centers */
  .topnav-links a{padding:9px 10px;font-size:14px}
  .article-layout{grid-template-columns:220px 1fr;gap:28px;padding:32px 24px 24px}
  /* Narrow: hide the right panel ("more on this section"), keep the anchors on the left */
  .article-layout > .article-sidebar{display:none}
  .article-layout > .article-aside{grid-column:1;grid-row:1}
  .article-layout > .article-main{grid-column:2;grid-row:1}
  /* No TOC → single column (just the article) */
  .article-layout:has(.article-aside-toc[hidden]){grid-template-columns:1fr}
  .article-layout:has(.article-aside-toc[hidden]) > .article-main{grid-column:1;grid-row:1}
  .article-help-strip-v2{padding:0 24px 50px}
  .section-layout{grid-template-columns:1fr;gap:24px;padding:16px 20px 36px}
  .section-aside{order:2}
  .request-layout{grid-template-columns:1fr;gap:24px;padding:24px 18px 36px}
  .request-aside{order:2;position:static}
  .request-form-card{padding:22px 20px}
}
@media (max-width:900px){
  .cat-tiles-auto{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  /* Compact sub-nav: smaller breadcrumb + search */
  .sub-nav-strip{flex-direction:column;align-items:stretch;padding:10px 16px;gap:8px}
  .sub-nav-breadcrumb{font-size:12px}
  .sub-nav-breadcrumb li + li::before{margin:0 6px;font-size:14px}
  .sub-nav-search{flex:1;max-width:none;padding:6px 12px}
  .sub-nav-search input{font-size:14px;padding:4px 0}
  .sub-nav-search svg{width:14px;height:14px;margin-right:6px}

  .page-back-cta-wrap{padding:20px 18px 36px}
  .page-back-cta{padding:12px 22px;font-size:14px}

  /* Article header — more compact */
  .article-layout{grid-template-columns:1fr;gap:20px;padding:32px 16px 24px}
  /* Reset the desktop column swap so panels stack as accordions */
  .article-layout > .article-aside,
  .article-layout > .article-main,
  .article-layout > .article-sidebar{grid-column:auto !important;grid-row:auto !important}
    /* Mobile: convert sidebars to accordions below the article */
  .article-main{order:1}
  .article-sidebar,
  .article-aside{
    order:2;
    display:block !important;
    position:static !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0;
    padding:0;
    background:var(--cream-bg,#f9f7f3);
    border:1px solid var(--line);
    border-radius:12px;
  }
  .article-aside{
    background:transparent;
    border:0;
    padding:0;
    display:flex !important;
    flex-direction:column;
    gap:10px;
  }
  .article-aside-block{
    margin:0;
    padding:0;
    background:var(--cream-bg,#f9f7f3);
    border:1px solid var(--line);
    border-radius:12px;
  }
  /* Sidebar/accordion title becomes clickable header */
  .article-sidebar .sidebar-title,
  .article-aside-block .sidebar-title{
    margin:0;
    padding:14px 18px;
    font-size:14px;
    color:#a8a29e;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    user-select:none;
  }
  .article-sidebar .sidebar-title::after,
  .article-aside-block .sidebar-title::after{
    content:'';
    width:10px;height:10px;
    border-right:2px solid var(--ink);
    border-bottom:2px solid var(--ink);
    transform:rotate(45deg);
    transition:transform .2s;
    margin-left:8px;
    margin-bottom:3px;
  }
  .article-sidebar.is-open .sidebar-title::after,
  .article-aside-block.is-open .sidebar-title::after{
    transform:rotate(-135deg);
    margin-bottom:-3px;
  }
  /* Hide content by default, show on .is-open */
  .article-sidebar .sidebar-list,
  .article-aside-block .related-list,
  .article-aside-block .article-toc{
    display:none;
    padding:0 18px 14px;
    margin:0;
    border-left:0;
  }
  .article-sidebar.is-open .sidebar-list,
  .article-aside-block.is-open .related-list,
  .article-aside-block.is-open .article-toc{
    display:block;
  }
  /* Adjust list link padding */
  .article-sidebar .sidebar-link{padding:8px 0;border-left:0;margin-left:0}
  .article-header{margin-bottom:18px;padding-bottom:12px}
  .article-header::before{width:28px;height:3px;margin-bottom:12px}
  .article-title{font-size:24px;line-height:1.25;letter-spacing:-.4px;margin-bottom:8px}
  .article-meta{font-size:12px;gap:6px}

  /* Article body typography */
  .article-body{font-size:16px;line-height:1.65}
  .article-body > p:first-of-type{font-size:16px;line-height:1.6}
  .article-body h2{font-size:18px;margin:28px 0 10px;padding-left:11px}
  .article-body h2::before{width:3px}
  .article-body h3{font-size:16px;margin:22px 0 8px}
  .article-body ul{padding-left:18px}
  .article-body ol > li{padding-left:36px}
  .article-body ol > li::before{width:24px;height:24px;font-size:12px}
  .category-hero{padding:28px 20px 20px}
  .category-title{font-size:30px}
  .category-sections{padding:24px 20px 36px}
    .category-section-grid{display:flex;flex-direction:column;gap:20px}
  .category-section-card{
    padding:16px;
    height: fit-content ;
    border-radius:12px;
  }
  .category-section-card-head{margin-bottom:6px}
  .category-section-num{font-size:12px;letter-spacing:1.2px}
  .category-section-arrow{width:16px;height:16px}
  .category-section-title{font-size:18px;line-height:1.25;margin-bottom:4px}
  .category-section-desc{display:none}
  .category-section-articles{margin-top:8px;padding-top:14px}
  .category-section-count{font-size:14px}
  .is-cat-section-page .section-subhead{padding-top:20px}
  .section-hero{padding:24px 20px 12px}
  .section-title{font-size:30px}
  .article-help-strip-v2{padding:0 18px 40px}
  .article-help-strip-v2 .article-help-inner{
    grid-template-columns:1fr;gap:14px;padding:22px 22px;text-align:center;
  }
    .article-help-strip-v2{padding:0 16px 28px}
  .article-help-strip-v2 .article-help-inner{
    grid-template-columns:1fr;gap:10px;padding:18px 18px;text-align:center;
  }
  .article-help-strip-v2 .article-help-illustration{
    width:100px;height:auto;margin:0 auto;
  }
  .article-help-strip-v2 .article-help-title{font-size:16px;margin-bottom:2px}
  .article-help-strip-v2 .article-help-sub{font-size:14px}
  /* Stack the contact buttons vertically, content-width (not edge-to-edge) */
  /* Mobile: horizontal row of vertical cards (icon on top, text below) */
  .article-help-strip-v2 .article-help-channels{
    flex-direction:row;align-items:stretch;gap:16px;flex-wrap:nowrap;justify-content:center;
  }
  .article-help-strip-v2 .help-channel{
    flex:1 1 0;min-width:0;
    justify-content:center;
    padding:16px 14px;
    flex-direction:column;
    text-align:center;
    gap:8px;
  }
  .article-help-strip-v2 .help-channel-icon{width:42px;height:42px}
  .article-help-strip-v2 .help-channel-icon svg{width:20px;height:20px}
  .article-help-strip-v2 .help-channel-body{align-items:center}
  .article-help-strip-v2 .help-channel-body h4{font-size:14px;line-height:1.2}
  .article-help-strip-v2 .help-channel-sla{font-size:12px}
  .article-vote-inline{flex-direction:column;align-items:center;gap:10px;padding:18px 0 8px}
  /* Topnav morph: hide search + links in scrolled state on mobile */
  .topnav.scrolled .topnav-search{display:none}
  .topnav.scrolled .topnav-links{display:none}
}
@media (max-width:720px){
  .hero{min-height:400px;padding:40px 0}
  .hero-inner{padding:0 18px}
  .hero h1{font-size:30px;line-height:1.2}
  .hero h1 .greet{font-size:16px;margin-bottom:3px}
  .search-wrap{margin-top:18px}
  .search-bar{padding:5px}
  .search-bar input{padding:11px 10px;font-size:16px}
  .search-btn{padding:10px 16px;font-size:14px}
  .popular{
    margin-top:14px;gap:5px;
    /* Mobile: revert to natural wrapping (no horizontal scroll), keep full-viewport span */
    flex-wrap:wrap;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    width:100vw;max-width:100vw;
    overflow-x:visible;
    padding:0 18px;
  }
  .popular .lbl{font-size:12px;width:100%;text-align:center;margin-bottom:4px;margin-right:0;white-space:normal}
  .popular a{font-size:14px}
  .popular .sep{font-size:14px}

  .section{padding:36px 18px}
  .section-head h2{font-size:24px}
  .section-head .sub{font-size:16px}
  .section-head{}

  .block-card{flex-basis:200px}
  .blocks-track{gap:14px;margin:0 -18px;padding:0 18px 6px}
  .blocks-arrow{display:none}
  .blocks-section .scroll-progress{display:block}

  .cat-stage{padding:16px 14px}
  .cat-stage h3{font-size:16px}
  .cat-stage p{font-size:12px}
  .cat-stage .step{font-size:12px}
  .cat-tile{padding:14px 16px}
  .cat-tile h3{font-size:16px}
  .cat-sublabel{font-size:12px;letter-spacing:1.6px}

  .promo-head{padding:15px 16px;gap:10px}
  .promo-head .q{font-size:14px}
  .promo-body-inner{padding:0 16px 18px;font-size:14px}
  .promo-chev{width:24px;height:24px}

  .videos-section .section{padding:36px 20px 48px}
  /* Mobile: center only the section title + subtitle (NOT the card contents) */
  .videos-section .section-head{justify-content:center;text-align:center}
  .videos-grid{gap:16px;overflow:visible;margin:0;padding:0}
  .video-info{text-align:left}
  .video-info h4{font-size:14px}
  .video-info .meta{font-size:12px}
  .videos-section .scroll-progress{display:none}

  .contact-section{padding:44px 20px 52px}
  .contact-inner h2{font-size:24px}
  .contact-inner .lead{font-size:14px;margin-bottom:24px}
  /* Mobile: vertical list of horizontal cards (icon left + text beside) */
  .channels-grid{gap:12px;flex-direction:column;flex-wrap:nowrap}
  .channel{padding:16px;display:flex;align-items:center;gap:14px;text-align:left;flex:0 0 auto}
  .channel-icon{width:42px;height:42px;margin:0;flex-shrink:0}
  .channel-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
  .channel-icon svg{width:20px;height:20px}
  .channel h4{font-size:16px}
  .channel .desc{font-size:12px}
  .channel .number{font-size:14px}

     .footer{padding:14px 14px}
  .footer-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;flex-wrap:nowrap}
  .footer-copy{font-size:12px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .footer-links{gap:10px;flex-wrap:nowrap;justify-content:flex-end;flex-shrink:0}
  .footer-links a{font-size:12px;white-space:nowrap}

  .logo-text{font-size:18px}
  .logo-text small{font-size:12px;letter-spacing:1.5px}
  .logo-mark{width:32px;height:32px}
  .logo-mark::after{width:12px;height:12px}

  .page-wrap{padding:32px 18px}
  .page-title{font-size:30px}
}
@media (max-width:560px){
  .cat-tiles-auto{grid-template-columns:1fr}
  /* Stage chips: all 4 on ONE line, centered, no scroll, no wrap.
     Compact sizing so they fit common phone widths (≥360px). */
  .stage-filter{gap:6px;padding:0 8px;flex-wrap:nowrap;overflow-x:visible;justify-content:center}
  .stage-chip{padding:7px 11px;font-size:12px;white-space:nowrap;flex:0 0 auto}
  /* Stage articles carousel mobile: 2 rows, ~2 cols visible + a PEEK of the next
     column so it's visibly horizontally scrollable (swipe for more). */
  .stage-articles-wrap{padding:0 24px}
  /* Mobile: a centered 2x2 grid (4 cards) per page; swipe pages instead of a
     continuous slide. Firm snap, and snap-points only at each page start so a
     swipe always lands on a clean group of 4. */
  .stage-articles-track{
    grid-template-rows:repeat(2, minmax(0, 1fr));     /* 2 rows */
    grid-auto-columns:calc((100% - 20px) / 2);        /* 2 full columns = 4-card page */
    gap:20px;padding:20px 0 16px;
    scroll-snap-type:x mandatory;                     /* firm page-by-page swipe */
  }
  .stage-card{padding:16px 16px 14px;min-height:120px;border-radius:12px;gap:12px;scroll-snap-align:none}
  .stage-card:nth-of-type(4n+1){scroll-snap-align:start}  /* snap point = start of each 4-card page */
  .stage-card-title{font-size:14px;line-height:1.3;-webkit-line-clamp:3}
  .stage-card-tag{font-size:12px;padding:2px 6px;letter-spacing:.3px}
  .stage-card-tags{gap:4px}
  .stage-arrow{display:none}
  .stage-dots{margin-top:10px;margin-bottom:32px}
}
@media (min-width:561px) and (max-width:900px){
  .stage-articles-track{grid-auto-columns:calc((100% - 20px) / 2)}
}
@media (max-width:480px){
  .search-btn{padding:10px 14px;font-size:14px}
  .hero h1{font-size:32px}
  .hero h1 .greet{font-size:14px}
  .search-bar input{font-size:14px}
  .cat-journey{grid-template-columns:1fr;gap:10px}
  .cat-journey .cat-stage::after{display:none}
  .cat-tiles{grid-template-columns:1fr;gap:10px}
  .booking-chips{gap:5px}
  .chip{padding:6px 11px;font-size:12px}
}
@media (max-width:360px){
  .search-btn{padding:10px 12px;font-size:0}
  .search-btn::before{content:'→';font-size:18px;font-weight:700}
}
/* ============================================================
   PAGE BACKGROUND — light cream tint on article / category /
   section pages. Cards / sidebars stay at --cream-bg so they
   pop against the lighter wash. The body class is added by
   script.js on page load (more reliable than :has()).
   ============================================================ */
html.is-content-page,
body.is-content-page{
  background:#FFFFFF !important;
}
/* Category & section pages: pure white page + search lives in the navbar
   (always visible, like the homepage's scrolled state) */
html.is-cat-section-page,
body.is-cat-section-page{
  background:#ffffff !important;
}
/* Category, section, article AND new-request pages: search in the navbar (homepage scrolled-state look) */
body.is-content-page .topnav-search,
body.is-request-page .topnav-search{display:flex}
/* Center the navbar search: logo (left) and right cluster both grow from 0,
   so the fixed-width search sits dead-center. !important beats the scrolled-state logo rule. */
body.is-content-page .topnav-inner > .logo,
body.is-request-page .topnav-inner > .logo{flex:1 1 0 !important;min-width:0}
/* Keep the "Need more help?" strip pure white on top of the cream page */
body.is-content-page .article-help-strip-v2{
  background:var(--white,#FFFFFF);
}
/* ============ MOBILE TOPNAV ============ */
@media (max-width:820px){
  /* Hide inline topnav links — they go in the hamburger menu */
  .topnav-links{display:none}
  .topnav-deals{display:none}

  /* Show the hamburger button */
  .hamburger{display:inline-flex}

  /* Tighten the topnav padding/gap on mobile */
  .topnav-inner{padding:12px 18px;gap:12px}

  /* Shrink the language selector to just the globe icon */
  .lang-dropdown-toggle > span{display:none}
  .lang-dropdown-toggle .lang-dropdown-chev{display:none}
  .lang-dropdown-toggle{padding:8px 10px;gap:0}
}
/* Popular searches — refined chip style on mobile (horizontal) */
@media (max-width:560px){
  .popular{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 18px;
    margin-top:14px;
  }
  .popular .lbl{
    width:100%;
    margin:0 0 4px;
    text-align:center;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    opacity:.7;
    color:#fff;
  }
  .popular .sep{display:inline-block}
  .popular a{
    display:inline-flex;align-items:center;
    font-size:14px;font-weight:500;color:#fff;
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
    text-shadow:0 1px 8px rgba(0,0,0,.45);
    transition:color .15s;
  }
  .popular a:hover,.popular a:active{color:#ff5b00}
}

/* Trip-journey cards on mobile — 2-column compact layout */
@media (max-width:560px){
  .cat-journey-auto,
  .cat-journey,
  .cat-grid-auto{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
    margin-bottom:20px;
  }
  .cat-stage{
    padding:14px 12px;
    min-height:auto;
    gap:6px;
  }
  .cat-stage p{display:none}
  .cat-stage .stage-head{gap:8px}
  .cat-stage .stage-icon{
    width:32px;height:32px;border-radius:8px;
  }
  .cat-stage .stage-icon svg{width:16px;height:16px}
  .cat-stage .step{
    font-size:12px;letter-spacing:1.2px;
  }
  .cat-stage h3{
    font-size:14px;line-height:1.25;
    margin-top:0;margin-bottom:4px;
  }
  .cat-stage .count{
    font-size:12px;
    padding-top:6px;
    margin-top:auto;
  }
  .cat-journey .cat-stage:not(:last-child)::after{display:none}
  /* Hide the orange timeline line on mobile (doesn't fit 2-col grid) */
  .cat-journey::before,
  .cat-journey-auto::before{display:none}
}

/* Hide arrows when disabled (right arrow on last card) */
.blocks-arrow:disabled{
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
}
/* Hide left arrow when on first card (no scroll happened yet) */
.blocks-wrap:not(.has-scrolled) .blocks-arrow.left{
  opacity:0 !important;
  pointer-events:none !important;
  visibility:hidden !important;
}
/* Mobile safeguard: empty space in topnav doesn't capture clicks */
@media (max-width:820px){
  .topnav-inner{
    pointer-events:none;
  }
  .topnav-inner .logo,
  .topnav-inner .lang-dropdown,
  .topnav-inner .ic-menu-dd,
  .topnav-inner .topnav-menu-btn,
  .topnav-inner .topnav-search,
  .topnav-inner .user-dropdown{
    pointer-events:auto;
  }
}
/* Promoted articles — mobile only: collapse to 3 items + show more button */
.promo-show-more{display:none}

@media (max-width:760px){
  /* Hide items beyond the 3rd on mobile until expanded */
  .promo-list:not(.promo-expanded) .promo-item:nth-of-type(n+4){
    display:none;
  }
  /* Show More / Show Less button */
  .promo-show-more{
    display:block;
    margin:14px auto 0;
    padding:10px 26px;
    background:transparent;
    border:1.5px solid var(--orange,#ff5b00);
    color:var(--orange,#ff5b00);
    border-radius:999px;
    font-weight:600;
    font-size:14px;
    font-family:inherit;
    cursor:pointer;
    transition:background .15s,color .15s;
  }
  .promo-show-more:hover,
  .promo-show-more:active{
    background:var(--orange,#ff5b00);
    color:#fff;
  }
  .promo-show-more svg{
    display:inline-block;
    vertical-align:-3px;
    margin-left:6px;
    transition:transform .2s;
  }
  .promo-list.promo-expanded ~ .promo-show-more svg{
    transform:rotate(180deg);
  }
}

/* ============ MOBILE NAVBAR (image spec) ============ */
/* Icon logo hidden by default — desktop shows the full wordmark.
   !important is required to beat the base ".topnav .logo img{display:block !important}". */
.topnav .logo img.logo-icon{display:none !important;height:40px !important;width:auto !important;max-width:48px !important;object-fit:contain}

@media (max-width:768px){
  /* Logo switches to its icon version (same height) */
  .topnav .logo-has-icon img.logo-full{display:none !important}
  .topnav .logo-has-icon img.logo-icon{display:block !important}
  /* Topnav search appears only after scrolling past the hero (like desktop), then fills the space.
     On category/section/article/new-request pages it's always shown and fills the space the same way. */
  .topnav.scrolled .topnav-search,
  body.is-content-page .topnav-search,
  body.is-request-page .topnav-search{display:flex;flex:1 1 auto;max-width:none}
  /* On phones the search fills the bar, so the logo stays natural (don't grow/center) */
  body.is-content-page .topnav-inner > .logo,
  body.is-request-page .topnav-inner > .logo{flex:0 0 auto !important}
  /* Let the search take the space; keep the right-side actions content-width */
  .topnav-right{flex:0 0 auto}
}

/* === Indie Campers HC theme tweaks (merged overrides — last in source order; no importance flags) ===
   These come after all earlier rules so they win on equal specificity; where an original
   rule was more specific, the selector below is raised to match/exceed it (e.g. .section-head .sub,
   the .channels-grid > .channel chain). */

/* 1. Video cards */
.videos-grid { gap: 24px; }
.videos-grid > .video-card { flex: 1 1 0; }
.videos-grid .video-thumb { aspect-ratio: auto; height: 150px; }
@media (max-width: 480px) {
  .videos-grid { flex-direction: column; gap: 16px }
  .videos-grid > .video-card { flex: 0 0 auto; width: 100%; height: 90px; }
}

/* 2. Browse-by-category buttons */
.bbc-cats button[type="button"] { border: none; }

/* 3. Browse by category heading */
.bbc-section h2 { padding-bottom: 0; }

/* 4. Desktop-only padding (>=481px) */
@media (min-width: 481px) {
  /* Video guides section head (structural selector — replaces .section-head--video) */
  .videos-section .section-head { padding-top: 14px; }
  /* (stage-articles-track top padding now set globally to 8px in batch 2 below) */
  .bbc-section .section-head { padding-left: 14px; padding-top: 12px; }
}

/* 5. BBC section + subtitles (mobile <=480px) */
@media (max-width: 480px) {
  .bbc-section .section { padding-bottom: 20px; }
  /* Mobile: remove section-head bottom padding; tighten h2 padding */
  .bbc-section .section-head { padding-bottom: 0; }
  .bbc-section h2 { padding: 12px 0 0 12px; }
  /* .section-head .sub raised from .sub to beat the original .section-head .sub (0,2,0) */
  .section-head .sub, .bbc-overline { font-size: 14px; }
}

/* 6. Other areas */
.other-areas-section { padding-top: 0; }

/* 7. Section headers */
.section-head { }
.section-head.center { gap: 0; }

/* 8. Channel cards ("Need more help?") */
.channels-grid {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.channels-grid > .channel {
  display: flex;
  flex-direction: column;
  height: auto;
  align-self: flex-start;
  flex: 1 1 0;
  max-width: 232px;
  width: auto;
}
.channels-grid > .channel,
.channels-grid > .channel .channel-body {
  text-align: center;
  align-items: center;
}
.channels-grid > .channel .channel-body h4 { line-height: 24px; }
.channels-grid > .channel .channel-body .desc { line-height: 21px; }
.channels-grid > .channel .channel-body .sla {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  line-height: 16.8px;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .channels-grid > .channel .channel-body .desc { display: none; }
  .channels-grid > .channel .channel-body .sla { text-align: center; }
}

/* 9. Card grid gaps */
.stage-articles-track { gap: 16px; }
@media (min-width: 901px) {
  .other-areas-grid { gap: 24px; }
}

/* 10. Section side padding */
.section, .hero-inner { padding-left: 20px; padding-right: 20px; }

/* 11. Stage dots */
.stage-dots { margin-bottom: 16px; }

/* 12. Stage articles wrap (mobile <=560px) */
@media (max-width: 560px) {
  .stage-articles-wrap { padding-left: 0; padding-right: 0; }
}

/* === Indie Campers HC theme tweaks (batch 2 — merged, last in source order, no importance flags) === */

/* 1. Stage cards: arrow slides right on hover (matches "Browse articles"). */

/* 2. Browse-by-category panel cards: arrow slides right on hover. */
.bbc-card svg { transition: color 0.15s, transform 0.15s; }
.bbc-card:hover svg,
.bbc-card:active svg { transform: translateX(3px); }

/* 3. Side-panel category chevron: remove its slide/fade animation. */
.bbc-cat-chev { transition: none; }
.bbc-cat.is-active .bbc-cat-chev,
.bbc-cat:hover .bbc-cat-chev { transform: none; }

/* 4. Stage-articles track: top padding so the hover-lifted card isn't clipped. */
.stage-articles-track { padding-top: 0px; }
@media (max-width: 560px) {
  .stage-articles-track { padding-top: 32px; }
}

/* 5. Category section cards: shadows match the stage cards (xs default, md hover). */
.category-section-card { box-shadow: var(--shadow-xs, 0 1px 1px 0 rgba(0,0,0,0.05)); }
.category-section-card:hover { box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.10)); }

/* 6. Back-to-Help-Center CTA: 14px text, 16x16 icon, no top padding (all instances).
   The :has() hero variants are listed explicitly so this wins on specificity alone. */
.page-back-cta-wrap,
body:has(.section-hero) .page-back-cta-wrap,
body:has(.request-hero) .page-back-cta-wrap { padding-top: 0; }
.page-back-cta-wrap a { font-size: 14px; }
.page-back-cta-wrap a svg { width: 16px; height: 16px; }

/* Video lightbox "Was this helpful?" — reuses the article .article-vote-inline design */
.video-feedback[hidden]{display:none}
.video-feedback .article-vote-inline{margin:16px 0 0}
.video-feedback .vote-thumb{padding:0;appearance:none;-webkit-appearance:none;font:inherit}
@media (max-width:560px){
  .video-feedback .article-vote-inline{padding:16px}
}

/* ============ VIDEO CARDS — Figma redesign (node 134-8790) ============ */
/* Play button moves from the thumbnail overlay into the content row. */
.video-thumb::after{display:none}
.video-card:hover .video-thumb::after{display:none}
.video-thumb .play-tri{display:none}
.video-info{position:relative;padding:14px 68px 14px 16px}
.video-info h4{padding-bottom:6px}
.video-info::after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:var(--ink,#292524);transition:transform .2s,background .2s;z-index:1}
.video-info::before{content:"";position:absolute;right:31px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;z-index:2}
.video-card:hover .video-info::after{background-color:var(--orange);transform:translateY(-50%) scale(1.05)}

/* ---- Video card refinements ---- */
/* Replace CSS triangle with Lucide "play" icon (white, centered on the circle). */
.video-info::before{display:none}
.video-info::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:18px 18px}
/* Mobile: lay the card content out as a row (preview + description) instead of a column. */
@media (max-width:480px){
  .video-card{display:flex;flex-direction:row;align-items:stretch}
  .video-thumb{flex:0 0 40%;aspect-ratio:auto;min-height:96px}
  .video-info{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
}

/* Mobile: card height hugs the content; thumbnail matches that height. */
@media (max-width:480px){
  .video-card{align-items:stretch}
  .video-thumb{min-height:0;height:auto;align-self:stretch}
}

/* Override the fixed 150px thumb height on mobile (matches .videos-grid specificity). */
@media (max-width:480px){
  .videos-grid .video-thumb{height:auto;min-height:0;align-self:stretch}
}
}