@charset "UTF-8";
/***** Normalize.css *****/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

@font-face {
    font-family: 'Mistrully';
    src: url('/hc/theming_assets/01M2N619J9RSN84Y3K9AQ7FH11') format('woff2'),
        url('/hc/theming_assets/01M2N61DTKZT6EANZA3CFX4QG7') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-Bold.eot');
    src: local('TT Norms Bold'), local('TTNorms-Bold'),
        url('/hc/theming_assets/01M2N61AG29N8CQ0C8F5M1CSA7') format('woff2'),
        url('/hc/theming_assets/01M2N61DMSH530QSVAKYG0TA0C') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-ThinItalic.eot');
    src: local('TT Norms Thin Italic'), local('TTNorms-ThinItalic'),
        url('/hc/theming_assets/01M2N61BYYBM0TAFGKD2E6JCTH') format('woff2'),
        url('/hc/theming_assets/01M2N61E7MVDGR331J0Q2RN0DE') format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-Thin.eot');
    src: local('TT Norms Thin'), local('TTNorms-Thin'),
        url('/hc/theming_assets/01M2N61CVATFHMASB7R1SJCDPD') format('woff2'),
        url('/hc/theming_assets/01M2N61DTM8W0GJC08AX9NP5GR') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-LightItalic.eot');
    src: local('TT Norms Light Italic'), local('TTNorms-LightItalic'),
        url('/hc/theming_assets/01M2N61CJZPS7GJ3HDF7ZEKGKW') format('woff2'),
        url('/hc/theming_assets/01M2N61E0T7DS519P0Z44JFDBA') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-ExtraBoldItalic.eot');
    src: local('TT Norms ExtraBold Italic'), local('TTNorms-ExtraBoldItalic'),
        url('/hc/theming_assets/01M2N61BSM98PYRRSX96PQTCE7') format('woff2'),
        url('/hc/theming_assets/01M2N61E80DM32CM7KSSXJCVCD') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-Italic.eot');
    src: local('TT Norms Italic'), local('TTNorms-Italic'),
        url('/hc/theming_assets/01M2N61A9YZG97G4KXH4Y2223J') format('woff2'),
        url('/hc/theming_assets/01M2N61EDFGXNHSK3BJW2SJQK4') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-ExtraLight.eot');
    src: local('TT Norms ExtraLight'), local('TTNorms-ExtraLight'),
        url('/hc/theming_assets/01M2N619R26V118F1KKVG7CVMJ') format('woff2'),
        url('/hc/theming_assets/01M2N61EA7NHW56Q0HBJK085GH') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-HeavyItalic.eot');
    src: local('TT Norms Heavy Italic'), local('TTNorms-HeavyItalic'),
        url('/hc/theming_assets/01M2N61DE4KAKH44R33B12XJEE') format('woff2'),
        url('/hc/theming_assets/01M2N61DXHSXXF6M4B2PAS9F75') format('woff');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-MediumItalic.eot');
    src: local('TT Norms Medium Italic'), local('TTNorms-MediumItalic'),
        url('/hc/theming_assets/01M2N619MK7N3XK0TDA7B6GK5H') format('woff2'),
        url('/hc/theming_assets/01M2N61EDDKQRT5447QHY4821D') format('woff');

    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-BoldItalic.eot');
    src: local('TT Norms Bold Italic'), local('TTNorms-BoldItalic'),
        url('/hc/theming_assets/01M2N61CYAQE4AASDPJ77EH45R') format('woff2'),
        url('/hc/theming_assets/01M2N61E0R4S10KTBCM8WV4GB0') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-Heavy.eot');
    src: local('TT Norms Heavy'), local('TTNorms-Heavy'),
        url('/hc/theming_assets/01M2N61C5CZGA429F1RVSAQ15K') format('woff2'),
        url('/hc/theming_assets/01M2N61EC35A80NR0Z27F3PSR1') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-Light.eot');
    src: local('TT Norms Light'), local('TTNorms-Light'),
        url('/hc/theming_assets/01M2N61C5JFY4FS02YBMJGE9C7') format('woff2'),
        url('/hc/theming_assets/01M2N61EC51C9BCXD7AA58K2CC') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-Medium.eot');
    src: local('TT Norms Medium'), local('TTNorms-Medium'),
        url('/hc/theming_assets/01M2N61BRS81AFDJ7HN6PR18NM') format('woff2'),
        url('/hc/theming_assets/01M2N61DTP816067Q158N52MNJ') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-ExtraBold.eot');
    src: local('TT Norms ExtraBold'), local('TTNorms-ExtraBold'),
        url('/hc/theming_assets/01M2N619NP7NHXDC421D6CPYDT') format('woff2'),
        url('/hc/theming_assets/01M2N61EBP50VZFG1AG2KQYAWE') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-ExtraLightItalic.eot');
    src: local('TT Norms ExtraLight Italic'), local('TTNorms-ExtraLightItalic'),
        url('/hc/theming_assets/01M2N61C8WMXWZ5QQNW7PQ3S82') format('woff2'),
        url('/hc/theming_assets/01M2N61E1SH6BDJRE8GR01EC6A') format('woff');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-Regular.eot');
    src: local('TT Norms Regular'), local('TTNorms-Regular'),
        url('/hc/theming_assets/01M2N61CJ6C48X841WBMPD13PP') format('woff2'),
        url('/hc/theming_assets/01M2N61E1BX5B1YW5FGTG3ERTX') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-BlackItalic.eot');
    src: local('TT Norms Black Italic'), local('TTNorms-BlackItalic'),
        url('/hc/theming_assets/01M2N619XJF4PC4YZPSKW1S6M1') format('woff2'),
        url('/hc/theming_assets/01M2N61EENFHV0DBYVP1FM0QY3') format('woff');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'TT Norms';
    src: url('TTNorms-Black.eot');
    src: local('TT Norms Black'), local('TTNorms-Black'),
        url('/hc/theming_assets/01M2N61B9JQQDPQMDYCBN1FRYW') format('woff2'),
        url('/hc/theming_assets/01M2N61EEH2KT3JDZQMJX24DR9') format('woff');
    font-weight: 900;
    font-style: normal;
}



html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}
/* ============================================================================
   LINKVERTISE HELP CENTER — VISUAL REDESIGN 2026 (Increment 1)
   ----------------------------------------------------------------------------
   Everything below this line replaces the old Copenhagen-fork design layer.
   The @font-face + normalize blocks ABOVE are kept unchanged.

   HOW TO RETUNE: every colour / size / radius lives in :root as a token.
   Values flagged  (~)  are best-guesses read off the Figma screenshot and
   are expected to change once exact specs are available. Component rules
   cascade from the tokens, so adjusting :root propagates everywhere.

   Zendesk Guide theming notes:
   - rgba(254, 153, 0, 1) / #171717 / #F5F5F5 / rgba(254, 153, 0, 1) etc. are
     substituted from manifest.json settings before the CSS is served.
   - lighten()/darken()/rgba() are the only preprocessor colour helpers and
     only work on a colour literal (not on var()).
   - No SCSS nesting / no `&` — this file is flat CSS on purpose.
   ============================================================================ */

:root {
  /* --- Colour palette — 1:1 the "Colors" collection of Figma "Tokens - Base Components"
         (DVlaQlnO6IIgh3rfMeKt9f, var-set 422:1318), avatar colours left out. Components don't
         use these directly — the semantic --lv-* tokens below point at them. --- */
  --lv-c-orange:                  #FE9900;                    /* color/primary/orange */
  --lv-c-orange-hover:            #FEAD33;
  --lv-c-orange-light:            #FFDFB0;
  --lv-c-orange-transparent:      rgba(254, 153, 0, 0.10);
  --lv-c-charcoalgrey:            #171717;                    /* color/secondary/charcoalgrey */
  --lv-c-charcoalgrey-hover:      #383838;
  --lv-c-charcoalgrey-t10:        rgba(23, 23, 23, 0.10);
  --lv-c-charcoalgrey-t20:        rgba(23, 23, 23, 0.20);
  --lv-c-charcoalgrey-t30:        rgba(23, 23, 23, 0.30);
  --lv-c-purpley:                 #C5B3FF;                    /* color/secondary/purpley */
  --lv-c-purpley-hover:           #D1C2FF;
  --lv-c-purpley-light:           #E8E1FF;
  --lv-c-purpley-t10:             rgba(197, 179, 255, 0.10);
  --lv-c-purpley-t30:             rgba(197, 179, 255, 0.30);
  --lv-c-lightgrey:               #F5F5F5;                    /* color/neutral/* */
  --lv-c-lightgrey-hover:         #E8E8E8;
  --lv-c-softgrey:                #E8E8E8;
  --lv-c-softgrey-hover:          #DDDDDD;
  --lv-c-stonegrey:               #D4D4D4;
  --lv-c-stonegrey-hover:         #C9C9C9;
  --lv-c-ashgrey:                 #ADADAD;
  --lv-c-ashgrey-hover:           #969696;
  --lv-c-white:                   #FFFFFF;                    /* color/shades/* */
  --lv-c-white-transparent:       rgba(255, 255, 255, 0.20);
  --lv-c-black:                   #000000;
  --lv-c-lime:                    #BBF351;                    /* color/special/* */
  --lv-c-lime-hover:              #D9EE56;
  --lv-c-coral:                   #FF6467;
  --lv-c-coral-hover:             #FF7A7D;
  --lv-c-coral-light:             #FFC6C8;
  --lv-c-yellow-ad:               #EAB308;
  --lv-c-red:                     #FA2C37;                    /* color/negative/* */
  --lv-c-red-hover:               #E32630;
  --lv-c-red-light:               #F6E1E2;
  --lv-c-green:                   #7CCF00;                    /* color/positive/* */
  --lv-c-green-hover:             #6FBA00;
  --lv-c-green-light:             #E9F2DD;

  /* --- Brand (driven by manifest.json settings) --- */
  --lv-brand:          rgba(254, 153, 0, 1);                 /* rgb(254,153,0) — verified via Figma MCP */
  --lv-brand-ink:      #FFFFFF;            /* #FFFFFF */
  --lv-brand-strong:   var(--lv-c-orange-hover);     /* hover / active — Figma's orange hover is LIGHTER, not darker */
  --lv-brand-tint:     var(--lv-c-orange-transparent); /* pale orange wash: focus rings, "No" vote hover */
  --lv-ink:            #171717;                  /* #171717 "charcoalgrey" — verified via Figma MCP */
  --lv-page:           #F5F5F5;            /* #F5F5F5 "lightgrey" — verified via Figma MCP */
  --lv-link:           rgba(254, 153, 0, 1);
  --lv-link-hover:     rgba(254, 153, 0, 1);
  --lv-link-visited:   rgba(254, 153, 0, 1);

  /* --- Neutrals / surfaces --- */
  --lv-ink-soft:       dimgray;    /* muted body text (~, not covered by pulled frame) */
  --lv-ink-faint:      #9c9c9c;    /* captions, counters (~) */
  --lv-surface:        var(--lv-c-white);
  --lv-surface-alt:    #F5F5F5;            /* = page bg "lightgrey" — used as chip fill on white cards */
  --lv-border:         var(--lv-c-softgrey);
  --lv-border-strong:  var(--lv-c-stonegrey);

  /* --- Purple accent "secondary/purpley": chevron circles, active states, list rows --- */
  --lv-purple:         var(--lv-c-purpley);
  --lv-purple-ink:     var(--lv-c-charcoalgrey);
  --lv-purple-soft:    var(--lv-c-purpley-light);    /* article list rows, highlights */
  --lv-purple-soft-hi: var(--lv-c-purpley-hover);    /* row hover — no "light-hover" token, next step up is purpley-hover */

  /* --- Gradients: "secondary/purpley" -> "primary/orange" — verified via Figma MCP --- */
  --lv-hero-from:      rgba(254, 153, 0, 1);
  --lv-hero-to:        var(--lv-c-purpley);
  --lv-hero-ink:       var(--lv-c-white);
  --lv-hero-gradient:    linear-gradient(112deg, var(--lv-hero-from) 23.2%, var(--lv-hero-to) 80%);   /* hero band */
  --lv-banner-gradient:  linear-gradient(161deg, var(--lv-hero-from) 20%, var(--lv-hero-to) 80%);     /* blog banner, different angle in Figma */

  /* --- Footer (dark rounded card) --- */
  --lv-footer-bg:      var(--lv-c-charcoalgrey);
  --lv-footer-ink:     var(--lv-c-white);
  --lv-footer-muted:   var(--lv-c-ashgrey);
  --lv-footer-border:  rgba(255, 255, 255, 0.12);

  /* --- Typography — font + scale verified via Figma MCP (styles: Landingpages/D4, H2; Heading/H1, H4; Label/L1-3; Body/B2-3) --- */
  --lv-font:      'Outfit';
  --lv-fs-xs:     12px;   /* Label/L3 — "12 articles" chip */
  --lv-fs-sm:     13px;   /* (~) not in the pulled type styles, kept for dense UI (tables etc.) */
  --lv-fs-base:   16px;   /* Body/B2 · Label/L1 */
  --lv-fs-md:     14px;   /* Body/B3 · Heading/H4 · Label/L2 — card/body copy */
  --lv-fs-lg:     20px;   /* Landingpages/H2 — card titles */
  --lv-fs-xl:     24px;   /* Heading/H1 — footer column headers */
  --lv-fs-2xl:    32px;   /* Display/D3 */
  --lv-fs-3xl:    64px;   /* Landingpages/D7 */
  --lv-fs-hero:   40px;   /* hero H1 on mobile (HC_Startseite / Mobile: Bold 40/48) */
  --lv-fs-hero-lg: 96px;  /* Landingpages/D4 — hero H1 desktop, verified via Figma MCP */
  --lv-fs-hero-sm: 32px;  /* page-hero (section/category) H1 on mobile */
  --lv-lh:        1.6;
  --lv-lh-tight:  1.18;
  --lv-weight-heading: 500;   /* Figma has no SemiBold: headings are Regular (Heading/*), Medium (D1/D3, Landingpages/H2) or Bold (display) */

  /* --- Text styles — 1:1 the named Figma text styles as `font` shorthands (weight size/line-height).
         Verified via Figma MCP against HC_Startseite, HC_Kategorie, HC_Artikeldetailseite, HC_Formular
         (desktop + mobile). Use as `font: var(--lv-t-…)`. --- */
  --lv-t-d4:    700 96px/90px var(--lv-font);    /* Landingpages/D4 — hero H1 desktop */
  --lv-t-d7:    700 64px/70px var(--lv-font);    /* Landingpages/D7 — "How can we help?" */
  --lv-t-d1:    500 48px/52px var(--lv-font);    /* Display/D1 — article title desktop */
  --lv-t-d3:    500 32px/36px var(--lv-font);    /* Display/D3 */
  --lv-t-lp-h2: 500 20px/24px var(--lv-font);    /* Landingpages/H2 — category card title */
  --lv-t-h1:    400 24px/28px var(--lv-font);    /* Heading/H1 */
  --lv-t-h2:    400 20px/24px var(--lv-font);    /* Heading/H2 */
  --lv-t-h3:    400 16px/24px var(--lv-font);    /* Heading/H3 */
  --lv-t-h4:    400 14px/18px var(--lv-font);    /* Heading/H4 */
  --lv-t-b1:    400 20px/24px var(--lv-font);    /* Body/B1 */
  --lv-t-b2:    400 16px/20px var(--lv-font);    /* Body/B2 */
  --lv-t-b3:    400 14px/18px var(--lv-font);    /* Body/B3 */
  --lv-t-b4:    400 12px/16px var(--lv-font);    /* Body/B4 */
  --lv-t-l1:    400 16px/normal var(--lv-font);  /* Label/L1 — buttons, form labels/inputs desktop */
  --lv-t-l2:    400 14px/normal var(--lv-font);  /* Label/L2 — buttons mobile, card "Read more" */
  --lv-t-l3:    400 12px/12px var(--lv-font);    /* Label/L3 — chips */

  /* --- Spacing scale (4px base) --- */
  --lv-s1: 4px;  --lv-s2: 8px;  --lv-s3: 12px; --lv-s4: 16px;
  --lv-s5: 24px; --lv-s6: 32px; --lv-s7: 48px; --lv-s8: 86px; --lv-s9: 96px;

  /* --- Radius --- */
  --lv-r-sm:   10px;   /* inputs (~) */
  --lv-r-md:   32px;   /* cards — "border-radius/m" verified via Figma MCP */
  --lv-r-lg:   22px;   /* blog banner — verified via Figma MCP */
  --lv-r-xl:   48px;   /* footer card — "border-radius/l" verified via Figma MCP */
  --lv-r-pill: 999px;  /* buttons, search, chips, list rows — "border-radius/full" (100px in Figma) */
  --lv-r-input: 100px; /* new_request_page: text inputs / nesty-dropdown / multiselect */

  /* --- Buttons: always 44px high, 24px left/right (design feedback) --- */
  --lv-btn-h:  44px;
  --lv-btn-px: 24px;

  /* --- Elevation --- */
  --lv-shadow-sm: 0 1px 2px rgba(24, 16, 48, 0.04), 0 6px 20px rgba(24, 16, 48, 0.06);
  --lv-shadow-md: 0 12px 34px rgba(24, 16, 48, 0.13);

  /* --- Layout --- */
  --lv-container: 970px;
  --lv-content-width: 976px;   /* content column (.main-content-layout, .container) */
  --lv-gutter:    clamp(16px, 5vw, 40px);
  --lv-header-h:  72px;

  /* --- Status colours — ok/danger from Figma; info/warn have no token yet (kept from Copenhagen) --- */
  --lv-ok:     var(--lv-c-green);
  --lv-info:   #1F73B7;
  --lv-warn:   #FFB648;
  --lv-danger: var(--lv-c-red);
}

/* ============================================================ Base */
* { box-sizing: border-box; }

html { line-height: var(--lv-lh-tight); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--lv-page);
  color: var(--lv-ink);
  /* Body/B2 (16/20) — Figma's running text everywhere. Unitless line-height on purpose:
     a px value would be inherited as-is by every element that changes its font-size. */
  font-family: var(--lv-font);
  font-size: var(--lv-fs-base);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

@media (min-width: 1024px) {
  body > main { min-height: 60vh; }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-family: var(--lv-font);
  font-weight: var(--lv-weight-heading);
  line-height: 1.2;
  color: var(--lv-ink);
}
/* Default scale = Figma styles, unitless line-heights so component font-size overrides stay proportional */
h1 { font-size: var(--lv-fs-2xl);  font-weight: 500; line-height: 1.125; }  /* Display/D3 32/36 */
h2 { font-size: var(--lv-fs-xl);   font-weight: 400; line-height: 1.167; }  /* Heading/H1 24/28 */
h3 { font-size: var(--lv-fs-lg);   font-weight: 400; line-height: 1.2; }    /* Heading/H2 20/24 */
h4 { font-size: var(--lv-fs-base); font-weight: 400; line-height: 1.5; }    /* Heading/H3 16/24 */

p { margin: 0 0 1em; }

a {
  color: var(--lv-link);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:visited { color: var(--lv-link-visited); }
a:hover, a:active, a:focus { color: var(--lv-link-hover); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--lv-purple);
  outline-offset: 2px;
}

img { max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--lv-border); margin: var(--lv-s6) 0; }

/* Form controls (global) */
input, textarea, select, button { font-family: inherit; }

input, textarea {
  color: var(--lv-ink);
  font-size: var(--lv-fs-base);
  max-width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:not([type=checkbox]):not([type=radio]) { outline: none; }

textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--lv-border-strong);
  border-radius: var(--lv-r-sm);
  background: var(--lv-surface);
  resize: vertical;
}
textarea:focus { border-color: var(--lv-brand); box-shadow: 0 0 0 3px var(--lv-brand-tint); }

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 10px 34px 10px 14px;
  color: var(--lv-ink);
  background: var(--lv-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238A6FF0' d='M0 0h10L5 6 0 0z'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--lv-border-strong);
  border-radius: var(--lv-r-sm);
  outline: none;
}
select:focus { border-color: var(--lv-brand); box-shadow: 0 0 0 3px var(--lv-brand-tint); }
select::-ms-expand { display: none; }
input[disabled], select[disabled] { background-color: var(--lv-c-softgrey); cursor: not-allowed; }

/* ============================================================ Layout primitives */
/* Only used inside full-width bands (profile header, my-activities nav) so their
   content lines up with .main-content-layout — page layout itself: see end of file */
.container {
  width: min(var(--lv-content-width), 100% - 2 * var(--lv-gutter));
  margin: 0 auto;
}

ul { list-style: none; margin: 0; padding: 0; }

.section { margin-bottom: var(--lv-s7); }
@media (min-width: 768px) { .section { margin-bottom: var(--lv-s8); } }

.section-title { font-size: var(--lv-fs-xl); margin-bottom: var(--lv-s5); }

.error-page {
  text-align: center;
}
.error-page h1 { font-size: var(--lv-fs-2xl); }
.error-page h2 { font-size: var(--lv-fs-lg); font-weight: 500; color: var(--lv-ink-soft); }
.error-page a { display: inline-block; margin-top: var(--lv-s4); }

.visibility-hidden,
.recent-activity-accessibility-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============================================================ Buttons */
/* Mapped 1:1 to the Figma "Buttons" component set (Tokens - Base Components, node 2013:1161):
   size=lg (44px, 24px side padding, Label/L1, radius 100, outlined stroke 2px inside).
   Hover only ever changes colours (→ *-hover tokens) — no fill on outlined, no shadow.
   .button                 = color=orange,  variant=outlined
   .button-primary/-large  = color=orange,  variant=filled
   .button-secondary       = color=grey,    variant=outlined
   .promo-banner-cta       = color=white,   variant=outlined
   .blocks-item-cta        = color=grey,    variant=outlined */
.button,
.pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link,
.subscriptions-subscribe button,
.requests-table-toolbar .organization-subscribe button,
.community-follow button,
.article-subscribe button,
.section-subscribe button,
.split-button button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--lv-btn-h);
  margin: 0;
  padding: 0 var(--lv-btn-px);
  font: var(--lv-t-l1);   /* Label/L1 */
  text-align: center;
  white-space: nowrap;
  color: var(--lv-ink);
  background-color: transparent;
  border: 2px solid var(--lv-brand);
  border-radius: var(--lv-r-pill);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
@media (min-width: 768px) {
  .button,
  .pagination-next-link, .pagination-prev-link, .pagination-first-link, .pagination-last-link,
  .subscriptions-subscribe button,
  .requests-table-toolbar .organization-subscribe button,
  .community-follow button,
  .article-subscribe button,
  .section-subscribe button,
  .split-button button { width: auto; }
}
.button:visited { color: var(--lv-ink); }
.button:hover, .button:focus, .button:active,
.pagination-next-link:hover, .pagination-prev-link:hover, .pagination-first-link:hover, .pagination-last-link:hover,
.subscriptions-subscribe button:hover,
.requests-table-toolbar .organization-subscribe button:hover,
.community-follow button:hover,
.article-subscribe button:hover,
.section-subscribe button:hover,
.split-button button:hover {
  background-color: transparent;
  border-color: var(--lv-brand-strong);
  color: var(--lv-c-charcoalgrey-hover);
  text-decoration: none;
}

.button-primary,
.button.button-primary,
.subscriptions-subscribe button[data-selected=true],
.requests-table-toolbar .organization-subscribe button[data-selected=true],
.article-subscribe button[data-selected=true],
.section-subscribe button[data-selected=true] {
  background-color: var(--lv-brand);
  color: var(--lv-brand-ink);
  border-color: var(--lv-brand);
}
.button-primary:hover, .button-primary:focus, .button-primary:active,
.subscriptions-subscribe button[data-selected=true]:hover,
.requests-table-toolbar .organization-subscribe button[data-selected=true]:hover,
.article-subscribe button[data-selected=true]:hover,
.section-subscribe button[data-selected=true]:hover {
  background-color: var(--lv-brand-strong);
  border-color: var(--lv-brand-strong);
  color: var(--lv-brand-ink);
}

.button-large,
input[type=submit],
.button.button-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--lv-btn-h);
  padding: 0 var(--lv-btn-px);
  font: var(--lv-t-l1);   /* Label/L1 — "Send request" / "Submit a request" */
  color: var(--lv-brand-ink);
  background-color: var(--lv-brand);
  border: 0;
  border-radius: var(--lv-r-pill);
  cursor: pointer;
  text-align: center;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 768px) { .button-large, input[type=submit], .button.button-large { width: auto; } }
.button-large:visited, input[type=submit]:visited { color: var(--lv-brand-ink); }
.button-large:hover, .button-large:focus, .button-large:active,
input[type=submit]:hover, input[type=submit]:focus, input[type=submit]:active {
  background-color: var(--lv-brand-strong);
  color: var(--lv-brand-ink);
  text-decoration: none;
}
/* orange / filled / disabled */
.button-large[disabled], input[type=submit][disabled] { background-color: var(--lv-c-orange-light); color: var(--lv-c-white); cursor: not-allowed; }

/* grey / outlined */
.button-secondary,
.button.button-secondary {
  color: var(--lv-c-charcoalgrey);
  background-color: transparent;
  border: 2px solid var(--lv-c-charcoalgrey);
}
.button-secondary:visited { color: var(--lv-c-charcoalgrey); }
.button-secondary:hover, .button-secondary:focus, .button-secondary:active {
  color: var(--lv-c-charcoalgrey-hover);
  background-color: transparent;
  border-color: var(--lv-c-charcoalgrey-hover);
}

/* orange / outlined / disabled */
.button[data-disabled], [data-disabled].pagination-next-link {
  cursor: default;
  color: var(--lv-c-softgrey);
  border-color: var(--lv-c-orange-light);
  background-color: transparent;
}

/* Split button (follow with count) */
.split-button { display: inline-flex; }
.split-button button {
  background-color: var(--lv-brand);
  color: var(--lv-brand-ink);
  border: 0;
  line-height: 1.15;
}
[dir=ltr] .split-button button:not(:only-child):first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 1px solid var(--lv-brand-ink); }
[dir=rtl] .split-button button:not(:only-child):first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid var(--lv-brand-ink); }
.split-button button:not(:only-child):last-child {
  display: flex; align-items: center; justify-content: center;
  width: 34px; min-width: 34px; padding: 0;
}
[dir=ltr] .split-button button:not(:only-child):last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
[dir=rtl] .split-button button:not(:only-child):last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* orange / filled / hover — overrides the outlined hover from the shared group above */
.split-button button:hover { background-color: var(--lv-brand-strong); color: var(--lv-brand-ink); }

/* ============================================================ Header */
/* Verified via Figma MCP: the header is always a solid white pill, inset from
   the page edges — never a full-width bar, never transparent over the hero. */
.header-main {
  margin-bottom: var(--lv-s4);
  position: relative;
  z-index: 20;
  padding: var(--lv-s4) var(--lv-gutter) 0;
  background: transparent;
}

.header {
  position: relative;
  max-width: calc(var(--lv-container) - 2 * var(--lv-gutter));
  margin: 0 auto;
  padding: 0 var(--lv-s5);
  display: flex;
  align-items: center;
  gap: var(--lv-s5);
  height: var(--lv-header-h);
  background: var(--lv-surface);
  border-radius: var(--lv-r-pill);
  box-shadow: var(--lv-shadow-sm);
}

.logo { flex: none; height: 28px}
.logo a { display: inline-flex; align-items: center; gap: 8px; }
.logo a:hover, .logo a:focus, .logo a:active { text-decoration: none; }
.logo img { display: block; height: 28px; width: auto; vertical-align: middle; }
.logo span { margin: 0 8px; color: var(--lv-brand); font-weight: 700; }

/* Desktop search lives in the header bar */
.search-div {
  position: relative;
  flex: 1 1 auto;
  max-width: 520px;
  margin-left: auto;
}
/* Direct child only — the mobile slide-open field also contains a .search-div,
   nested inside .mobile-search-inline, and must stay visible when expanded. */
@media (max-width: 1023px) { .header > .search-div { display: none; } }

.nav-wrapper-desktop { display: none; flex: none; margin-left: auto; }
@media (min-width: 1024px) { .nav-wrapper-desktop { display: inline-flex; align-items: center; } }
.nav-wrapper-desktop a {
  color: var(--lv-link);
  font-size: var(--lv-fs-sm);
  padding: 0 14px 0 0;
}
[dir=rtl] .nav-wrapper-desktop a { padding: 0 0 0 14px; }

.nav-wrapper-mobile { flex: none; margin-left: auto; display: flex; align-items: center; gap: 2px; }
@media (min-width: 1024px) { .nav-wrapper-mobile { display: none; } }
.nav-wrapper-mobile .menu-button-mobile,
.nav-wrapper-mobile .search-button-mobile {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 6px;
}
.nav-wrapper-mobile .menu-button-mobile .icon-menu,
.nav-wrapper-mobile .search-button-mobile .icon-search-toggle {
  width: 28px; height: 28px; padding: 5px; border-radius: 50%; color: var(--lv-ink);
}
.nav-wrapper-mobile .menu-button-mobile[aria-expanded=true] .icon-menu,
.nav-wrapper-mobile .search-button-mobile[aria-expanded=true] .icon-search-toggle { background: var(--lv-surface-alt); }
.nav-wrapper-mobile .menu-list-mobile {
  position: absolute; left: 0; right: 0; top: var(--lv-header-h);
  background: var(--lv-surface);
  border-top: 1px solid var(--lv-border);
  box-shadow: var(--lv-shadow-md);
  border-radius: var(--lv-r-md);
  overflow: hidden;
  z-index: 30;
}
.nav-wrapper-mobile .menu-list-mobile[aria-expanded=false] { display: none; }
.nav-wrapper-mobile .menu-list-mobile-items .item { margin: 2px 0; }
.nav-wrapper-mobile .menu-list-mobile-items a,
.nav-wrapper-mobile .menu-list-mobile-items button {
  display: block; width: 100%; padding: 12px 24px;
  color: var(--lv-ink); background: none; border: 0; text-align: start; cursor: pointer;
}
.nav-wrapper-mobile .menu-list-mobile-items a:hover,
.nav-wrapper-mobile .menu-list-mobile-items button:hover { background: var(--lv-surface-alt); }
.nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar { width: 22px; height: 22px; border-radius: 50%; margin-right: 8px; }
[dir=rtl] .nav-wrapper-mobile .menu-list-mobile-items .menu-profile-avatar { margin-right: 0; margin-left: 8px; }
.nav-wrapper-mobile .menu-list-mobile-items .my-profile { display: flex; align-items: center; }
.nav-wrapper-mobile .menu-list-mobile-items .my-profile-tooltip { font-size: var(--lv-fs-xs); color: var(--lv-ink-faint); }

/* User dropdown in header */
.user-info { display: inline-flex; align-items: center; }
.user-info > button {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: none; color: var(--lv-link); cursor: pointer;
  font-size: var(--lv-fs-sm); padding: 6px 10px; border-radius: var(--lv-r-pill);
}
.user-info > button:hover { background: var(--lv-surface-alt); color: var(--lv-link); }
.dropdown-chevron-icon { vertical-align: middle; }

.user-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-block; vertical-align: middle; object-fit: cover; }

.avatar { display: inline-block; position: relative; }
.avatar img { width: 40px; height: 40px; border-radius: 50%; }
.avatar .icon-agent {
  position: absolute; right: -2px; bottom: -4px;
  width: 17px; height: 17px; line-height: 17px; text-align: center;
  color: var(--lv-brand); background-color: var(--lv-brand-ink);
  border: 2px solid var(--lv-surface); border-radius: 50%; font-size: 15px;
}

.skip-navigation {
  position: absolute; top: auto; left: -9999px;
  display: flex; align-items: center; justify-content: center;
  margin: 16px; padding: 16px 20px; z-index: -999;
  background: var(--lv-ink); color: #fff; font-size: var(--lv-fs-sm); border-radius: var(--lv-r-sm);
}
[dir=rtl] .skip-navigation { left: auto; right: -9999px; }
.skip-navigation:focus, .skip-navigation:active { left: 0; z-index: 999; text-decoration: none; }
[dir=rtl] .skip-navigation:focus, [dir=rtl] .skip-navigation:active { left: auto; right: 0; }
#zd-modal-container ~ .skip-navigation { display: none; }

/* Mobile: search collapses into a header icon (see .search-button-mobile above).
   Clicking it slides the input field itself open — it unrolls out from the icon's
   spot and covers the pill (clip-path, not a dropdown) — over the logo, anchored
   to the right so it reads as the icon "opening up" into a field. The home page
   hides it entirely since the hero already has its own search field. */
.mobile-search-inline {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--lv-s2);
  background: var(--lv-surface);
  border-radius: inherit;
  padding: 0 var(--lv-s4) 0 var(--lv-s5);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-search-inline[aria-expanded=true] { clip-path: inset(0 0 0 0%); }
.mobile-search-inline .search-div { flex: 1 1 auto; min-width: 0; max-width: none; margin: 0; }
.mobile-search-inline .search-close-mobile {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--lv-ink); cursor: pointer;
}
.mobile-search-inline .search-close-mobile:hover { background: var(--lv-surface-alt); }
@media (min-width: 1024px) {
  .search-button-mobile, .mobile-search-inline { display: none; }
}
body.home-page .search-button-mobile,
body.home-page .mobile-search-inline { display: none; }
body.home-page .header .search-div { display: none; }

/* ============================================================ Search field */
.search-container { position: relative; }

.search {
  display: flex;
  position: relative;
  border: 1px solid var(--lv-border-strong);
  border-radius: var(--lv-r-pill);
  background: var(--lv-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Same 2px purple ring as before, but border width stays 1px and the extra pixel is an
   outline (outside the box, no layout impact) — a thicker border made the field grow on focus */
.search:focus-within { border-color: var(--lv-purple); outline: 1px solid var(--lv-purple); outline-offset: 0; }
.search input[type=search],
.search .clear-button { background-color: var(--lv-surface); border: none; border-radius: var(--lv-r-pill); }
.search input[type=search] {
  appearance: none; -webkit-appearance: none;
  flex: 1 1 auto; width: 100%; height: 44px;
  color: var(--lv-ink); font-size: var(--lv-fs-base);
}
.search input[type=search]::-webkit-search-decoration,
.search input[type=search]::-webkit-search-cancel-button,
.search input[type=search]::-webkit-search-results-button,
.search input[type=search]::-webkit-search-results-decoration { -webkit-appearance: none; }
.search input[type=search]:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--lv-surface) inset; }
.search .clear-button {
  display: none; flex: none; align-items: center; justify-content: center;
  padding: 0 16px; color: var(--lv-ink-faint); cursor: pointer;
}
.search-has-value .clear-button { display: flex; }

[dir=ltr] .search input[type=search] { padding-left: 44px; padding-right: 20px; }
[dir=rtl] .search input[type=search] { padding-left: 20px; padding-right: 44px; }
[dir=ltr] .search-has-value input[type=search] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
[dir=rtl] .search-has-value input[type=search] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
[dir=ltr] .search .clear-button { border-top-left-radius: 0; border-bottom-left-radius: 0; }
[dir=rtl] .search .clear-button { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.search-icon {
  position: absolute; top: 50%; left: 16px; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--lv-ink-faint); pointer-events: none; z-index: 1;
}
[dir=rtl] .search-icon { left: auto; right: 16px; }

/* ============================================================ Hero */
.hero {
  position: relative;
  width: 100%;
  padding: var(--lv-s8) var(--lv-gutter);
  text-align: center;
  background: var(--lv-hero-gradient);
  color: var(--lv-hero-ink);
  overflow: hidden;
}
.hero-inner { display: flex; flex-direction: column; position: relative; max-width: 680px; margin: 0 auto; gap: var(--lv-s9); }
.hero h1, .hero h2, .hero h3 { color: var(--lv-hero-ink); }

.home-hero { margin-top: var(--lv-s5); padding-top: var(--lv-s7); padding-bottom: var(--lv-s8); }
/* Mobile: Bold 40/48 (HC_Startseite / Mobile) */
.hero-title {
  font-size: var(--lv-fs-hero);
  font-weight: 700;
  line-height: 48px;
  margin: 0 0 var(--lv-s5);
}
/* Landingpages/D4: Outfit Bold 96px/90 — verified via Figma MCP */
@media (min-width: 768px) { .hero-title { font: var(--lv-t-d4); } }

.hero .hero-search,
.hero .search-container { width: 100%; max-width: 560px; margin: 0 auto; }
/* 44px total incl. the 1px border (border-box) — the input fills the rest */
.hero .search {
  height: 44px;
  border-color: transparent;
  box-shadow: var(--lv-shadow-md);
}
.hero .search:focus-within { border-color: var(--lv-purple); }
.hero .search input[type=search] { height: 100%; }
.hero .search-icon { color: var(--lv-ink-faint); }

/* Section / category / community hero band (added to templates in increment 2) */
.page-hero { padding: var(--lv-s8) var(--lv-gutter); text-align: center; }
.page-hero .hero-inner { max-width: calc(var(--lv-container) - 2 * var(--lv-gutter)); text-align: center; }
.page-hero .page-header { margin: 0; }
/* Mobile: Bold 32/36 (HC_Kategorie / Mobile) · desktop: Landingpages/D4 */
.page-hero .page-header h1 { color: var(--lv-hero-ink); font-size: var(--lv-fs-hero-sm); line-height: 36px; margin: 0; }
@media (min-width: 768px) { .page-hero .page-header h1 { font: var(--lv-t-d4); } }
/* Heading/H3 mobile · Heading/H2 desktop */
.page-hero .page-header-description { color: #FFFFFF; font-style: normal; margin: var(--lv-s3) 0 0; font: var(--lv-t-h3); }
@media (min-width: 768px) { .page-hero .page-header-description { font: var(--lv-t-h2); } }

.community-hero {
  background: var(--lv-hero-gradient);
  color: var(--lv-hero-ink);
  padding: var(--lv-s7) var(--lv-gutter);
  margin-bottom: var(--lv-s6);
}
.community-hero .hero-inner { max-width: 560px; }
.community-hero .search { border-color: transparent; box-shadow: var(--lv-shadow-md); }

/* ============================================================ Breadcrumbs + sub-nav */
/* Figma "Breadcrumb" → Stepper component (HC_Artikeldetailseite / HC_Kategorie):
   Heading/H3 in charcoalgrey, 16px between label and arrow, filled 14×14 "keyboard_arrow_right"
   (assets/breadcrumb-arrow.svg, exported from Figma with the instance colour #171717 baked in —
   a background-image, not a mask, because masks from the asset CDN would need CORS). */
.breadcrumbs { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.breadcrumbs li {
  display: flex;
  align-items: center;
  color: var(--lv-ink);
  font: var(--lv-t-h3);   /* Heading/H3 — desktop + mobile */
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumbs li + li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0 var(--lv-s4);
  background: url("/hc/theming_assets/01M4XQ0S8ZGE9W8DJ17JTTE75R") center / 14px no-repeat;
}
.breadcrumbs li a { color: var(--lv-ink); }
.breadcrumbs li a:visited { color: var(--lv-ink); }

.sub-nav {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lv-s3) var(--lv-s6);
  margin-bottom: var(--lv-s6);
}
@media (min-width: 768px) { .sub-nav { flex-direction: row; } }
.sub-nav .search-container { max-width: 320px; width: 100%; }
@media (min-width: 768px) { .sub-nav .search-container { flex: 0 1 320px; } }

.page-header {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: var(--lv-s5) 0 var(--lv-s6);
}
@media (min-width: 768px) {
  .page-header { flex-direction: row; align-items: baseline; gap: var(--lv-s4); }
}
.page-header h1 { flex-grow: 1; margin-bottom: var(--lv-s3); }
.page-header-description {
  flex-basis: 100%;
  margin: 0 0 var(--lv-s5);
  color: #FFFFFF;
  word-break: break-word;
}
.page-header .section-subscribe { flex-shrink: 0; margin-bottom: var(--lv-s3); }
.page-header .icon-lock { width: 20px; height: 20px; vertical-align: baseline; }

/* ============================================================ Homepage — category cards */
.knowledge-base { position: relative; }

.blocks-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  grid-auto-rows: 1fr;   /* every row as tall as the tallest card — same height across rows, not just within one */
  gap: var(--lv-s7);
  padding: 0;
}

/* Card: white, rounded-32, verified via Figma MCP */
.blocks-item {
  display: flex;
  border: 0;
  border-radius: var(--lv-r-md);
  background: var(--lv-surface);
  box-shadow: var(--lv-shadow-sm);
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.blocks-item:hover, .blocks-item:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--lv-shadow-md);
}
.blocks-item-internal { box-shadow: inset 0 0 0 1px var(--lv-border); }
.blocks-item-internal .icon-lock { width: 15px; height: 15px; }

.blocks-item-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lv-s5);
  flex: 1;
  padding: var(--lv-s4);
  color: var(--lv-ink);
  border-radius: inherit;
}
.blocks-item-link:visited, .blocks-item-link:hover, .blocks-item-link:active { color: var(--lv-ink); text-decoration: none; }

/* "12 articles" chip — Label/L3, bg = page-bg lightgrey — verified via Figma MCP */
.blocks-item-count {
  display: inline-block;
  padding: 4px 8px;
  font: var(--lv-t-l3);
  color: var(--lv-ink);
  background: var(--lv-surface-alt);
  border-radius: var(--lv-r-pill);
}
/* Landingpages/H2: Outfit Medium 20px/24 — verified via Figma MCP */
.blocks-item-title {
  margin: 0;
  font: var(--lv-t-lp-h2);
}
/* Heading/H4: Outfit Regular 14px/18, 75% opacity — verified via Figma MCP */
.blocks-item-description {
  margin: 0;
  font: var(--lv-t-h4);
  color: var(--lv-ink);
  opacity: 0.75;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "Read more": outlined in ink (not brand) — verified via Figma MCP */
.blocks-item-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--lv-btn-h);
  margin-top: auto;   /* pinned to the card bottom, so buttons line up when descriptions differ in length */
  box-sizing: border-box;
  text-align: center;
  padding: 0 var(--lv-btn-px);
  font: var(--lv-t-l2);   /* Label/L2 */
  color: var(--lv-ink);
  border: 2px solid var(--lv-c-charcoalgrey);
  border-radius: var(--lv-r-pill);
  transition: border-color 0.15s ease, color 0.15s ease;
}
/* Figma "Buttons" set, color=grey / variant=outlined / state=hover: stroke + text charcoalgrey-hover */
.blocks-item:hover .blocks-item-cta,
.blocks-item:focus-within .blocks-item-cta { border-color: var(--lv-c-charcoalgrey-hover); color: var(--lv-c-charcoalgrey-hover); }

/* Homepage community + activity blocks */
.home-section { text-align: center; }
.home-section h2 { margin-bottom: var(--lv-s3); }
.community { text-align: center; }
.community a { color: var(--lv-link); text-decoration: underline; }
.community-image {
  min-height: 260px;
  margin-top: var(--lv-s5);
  background: url(/hc/theming_assets/01J917S7BENK6H8KP4NSRBYGJ0) center / contain no-repeat;
}
.community, .activity { padding: var(--lv-s6) 0; }
.activity:empty { display: none; }

/* Recent activity list */
.recent-activity-header { text-align: center; margin-bottom: var(--lv-s3); }
.recent-activity-list { padding: 0; }
.recent-activity-item { border-bottom: 1px solid var(--lv-border); padding: var(--lv-s5) 0; overflow: auto; }
.recent-activity-item h3 { margin: 0; }
.recent-activity-item-parent { font-size: var(--lv-fs-base); font-weight: 600; }
.recent-activity-item-parent, .recent-activity-item-link { display: inline-block; width: 100%; margin: 6px 0; }
@media (min-width: 768px) { .recent-activity-item-parent, .recent-activity-item-link { width: 70%; margin: 0; } }
.recent-activity-item-link { font-size: var(--lv-fs-sm); overflow: hidden; text-overflow: ellipsis; }
.recent-activity-item-meta { color: var(--lv-ink-faint); margin: var(--lv-s3) 0 0; }
@media (min-width: 768px) { .recent-activity-item-meta { margin: 0; float: right; } [dir=rtl] .recent-activity-item-meta { float: left; } }
.recent-activity-item-time, .recent-activity-item-comment { display: inline-block; font-size: var(--lv-fs-sm); }
.recent-activity-item-comment { padding-left: 5px; }
.recent-activity-controls { padding-top: var(--lv-s4); }
.recent-activity-controls a { color: var(--lv-link); text-decoration: underline; }
.recent-activity-comment-icon svg { width: 16px; height: 16px; vertical-align: middle; color: var(--lv-brand); }
.recent-activity-comment-icon::after { content: attr(data-comment-count); margin-left: 3px; }

/* ============================================================ Promo / blog banner */
/* Full purpley->orange gradient, white text, white-outline button — verified via Figma MCP */
.promo-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--lv-s4);
  padding: var(--lv-s6) var(--lv-s7);
  border-radius: var(--lv-r-lg);
  background: var(--lv-banner-gradient);
  text-align: center;
}
@media (min-width: 768px) {
  .promo-banner { margin: flex-direction: row; justify-content: space-between; text-align: left; }
}
/* Mobile: Bold 16/20 · Body/B3 · Label/L2 — desktop: Bold 20/24 · Body/B2 · Label/L1 */
.promo-banner-heading { margin-bottom: 19px; color: var(--lv-hero-ink); font: 700 var(--lv-fs-base) / 20px var(--lv-font); text-align: start; }
.promo-banner-text { margin: 0; font: var(--lv-t-b3); color: var(--lv-hero-ink); text-align: start; }
.promo-banner-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--lv-btn-h);
  padding: 0 var(--lv-btn-px);
  font: var(--lv-t-l2);
  color: var(--lv-hero-ink);
  background: transparent;
  border: 2px solid var(--lv-hero-ink);
  border-radius: var(--lv-r-pill);
  transition: border-color 0.15s ease;
}
/* white / outlined / hover: stroke → lightgrey, text stays white, no fill */
.promo-banner-cta:hover, .promo-banner-cta:focus { border-color: var(--lv-c-lightgrey); color: var(--lv-hero-ink); text-decoration: none; }
@media (min-width: 768px) {
  .promo-banner-heading { font: 700 var(--lv-fs-lg) / 24px var(--lv-font); }
  .promo-banner-text { font: var(--lv-t-b2); }
  .promo-banner-cta { font: var(--lv-t-l1); }
}
/* Optional soft/light variant for contexts that shouldn't repeat the loud hero gradient */
.promo-banner--soft { background: linear-gradient(96deg, var(--lv-purple-soft) 0%, var(--lv-brand-tint) 100%); }
.promo-banner--soft .promo-banner-text { color: var(--lv-ink); }
.promo-banner--soft .promo-banner-cta { color: var(--lv-ink); border-color: var(--lv-brand); }
.promo-banner--soft .promo-banner-cta:hover { background: var(--lv-brand); color: var(--lv-brand-ink); }

/* ============================================================ "Create a Ticket" block */
.request-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lv-s3);
  max-width: 720px;
  margin: var(--lv-s8) auto;
  padding: 0;
  border: 0;
  text-align: center;
}
/* Mobile: Display/D3 set Bold (32/36), node 3326:7115 · desktop: ExtraBold 80/80, node 3138:3892 */
.request-main-title {
  margin: 0;
  font: 700 var(--lv-fs-2xl) / 36px var(--lv-font);
}
/* Heading/H3 mobile · Heading/H2 desktop */
.request-normal-title {
  margin: 0;
  font: var(--lv-t-h3);
  text-transform: none;
  color: var(--lv-ink-soft);
}
@media (min-width: 768px) {
  .request-main-title { font: 800 80px / 80px var(--lv-font); }
  .request-normal-title { font: var(--lv-t-h2); }
}
.submit-button { margin-top: var(--lv-s3);}
.submit-button a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--lv-btn-h);
  padding: 0 var(--lv-btn-px);
  font: var(--lv-t-l1);   /* Label/L1 */
  color: var(--lv-brand-ink);
  background: var(--lv-brand);
  border-radius: var(--lv-r-pill);
}
/* orange / filled / hover */
.request-section .submit-button a:hover { background: var(--lv-brand-strong); text-decoration: none; }
/* legacy decorative markup from the old template, hidden */
.main-images-left, .main-images-right, .footer-lines, .footer-line-first, .footer-line-second,
.text-image-title, .buttons-sell-buy { display: none; }

/* ============================================================ Category + Section pages */
.category-container, .section-container { display: block; }

.section-tree { display: flex; flex-direction: column; gap: var(--lv-s6); }
.section-tree .section { margin: 0; max-width: 100%; }
.section-tree-title { margin: 0 0 var(--lv-s3); font-size: var(--lv-fs-lg); font-weight: var(--lv-weight-heading); }
.section-tree-title a { color: var(--lv-ink); }
.section-tree-title a:hover { color: var(--lv-link); }

.article-list { display: flex; flex-direction: column; gap: var(--lv-s2); margin: 0; }

/* ------------------------------------------------------------ Accordion look (category + section page)
   Figma "Components" file → page "Accordion": faq (desktop 34:153 / mobile 20:2599),
   item states Default / Hovered (20:2654). Deliberately a plain link to the article —
   no expanding, so only the closed + hover states are used.
   Default: title pill + separate icon box, both purpley @30%, radius 18.
   Hover  : title pill grows to full width and fuses with the icon box into one bar.
   Icon: Figma's plus swapped for "circle_arrow_right-02" (Helpcenter file, 3586:3474) since the
   row navigates instead of expanding. */
.faq-list { display: flex; flex-direction: column; gap: var(--lv-s3); margin: 0; padding: 0; }   /* mobile: 6px row padding ×2 */
@media (min-width: 768px) { .faq-list { gap: 14px; } }

.faq-link {
  display: flex;
  align-items: stretch;
  min-height: 49px;
  border-radius: 18px;
}
.faq-link:hover, .faq-link:focus, .faq-link:active { text-decoration: none; }

.faq-title {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: var(--lv-s2);
  padding: 15px var(--lv-s4);
  font: var(--lv-t-b3);   /* Body/B3 mobile · Body/B1 desktop */
  color: #262626;         /* Components file "text/1" */
  background: var(--lv-c-purpley-t30);
  border-radius: 18px;
  transition: flex-grow 0.2s ease, border-radius 0.2s ease;
}
.faq-title .icon-star { flex: none; color: var(--lv-brand); }
.faq-title .icon-lock { flex: none; width: 15px; height: 15px; color: var(--lv-ink-faint); }

/* Icon box: 33px arrow circle centred in a 49/59px rounded box. The arrow sits on ::before so
   it can be mirrored for RTL without mirroring the box's corner radii. */
.faq-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  margin-inline-start: auto;
  background: var(--lv-c-purpley-t30);
  border-radius: 17px;
  transition: border-radius 0.2s ease;
}
.faq-icon::before {
  content: "";
  width: 33px;
  height: 33px;
  background: url("/hc/theming_assets/01M4XQ0SAW8NMF97DBW4P3BXV8") center / 33px no-repeat;
}
[dir=rtl] .faq-icon::before { transform: scaleX(-1); }

/* Hover / keyboard focus: one full-width bar (logical corners → correct in RTL too) */
.faq-link:hover .faq-title,
.faq-link:focus-visible .faq-title { flex-grow: 1; border-start-end-radius: 0; border-end-end-radius: 0; }
.faq-link:hover .faq-icon,
.faq-link:focus-visible .faq-icon { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 18px; border-end-end-radius: 18px; }

@media (min-width: 768px) {
  .faq-link { min-height: 59px; }
  .faq-title { padding: 17px var(--lv-s4); font: var(--lv-t-b1); }
  .faq-icon { width: 59px; }
}

.see-all-articles {
  display: inline-block;
  margin-top: var(--lv-s3);
  font-size: var(--lv-fs-sm);
  font-weight: 600;
  color: var(--lv-link);
}

.section-list { margin: var(--lv-s6) 0; display: flex; flex-direction: column; gap: var(--lv-s2); }
.section-list-item { padding: 0; }
.section-list-item a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lv-s3);
  padding: 16px 20px;
  color: var(--lv-ink); font-weight: 600;
  background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-r-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.section-list-item a:hover { border-color: var(--lv-border-strong); box-shadow: var(--lv-shadow-sm); text-decoration: none; }
.section-list-item svg { color: var(--lv-purple); }

.category-empty, .section-empty { display: block; margin-top: var(--lv-s5); color: var(--lv-ink-faint); font-style: normal; }

/* ============================================================ Article page */
.article-container { display: flex; flex-direction: column; gap: var(--lv-s6); }
@media (min-width: 1024px) { .article-container { flex-direction: row; align-items: flex-start; } }

.article {
  flex: 1 1 auto;
  min-width: 0;
}
@media (min-width: 1024px) { .article { max-width: 760px; padding: 0; } }

.article-sidebar {
  flex: none;
  border-top: 1px solid var(--lv-border);
  border-bottom: 1px solid var(--lv-border);
  padding: 0;
  margin-bottom: var(--lv-s5);
}
@media (min-width: 1024px) {
  .article-sidebar { width: 240px; border: 0; margin: 0; position: sticky; top: var(--lv-s5); }
}

/* Sidebar typography switches with its layout (collapsible below 1024px):
   title Label/L2 → Bold 16/20, items Label/L3 → Body/B2 (current article Bold) */
.sidenav-title { position: relative; margin: 0; font: var(--lv-t-l2); color: var(--lv-ink-faint); }
.article-sidebar ul { margin-top: var(--lv-s3); }
.sidenav-item {
  display: block;
  margin: 2px 0;
  padding: 8px 14px;
  border-radius: var(--lv-r-sm);
  font: var(--lv-t-l3);
    color: var(--lv-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) {
  .sidenav-title { font: 700 var(--lv-fs-base) / 20px var(--lv-font); }
  .sidenav-item { font: var(--lv-t-b2); }
}
.sidenav-item:visited { color: var(--lv-ink-soft); }
.sidenav-item:hover { background: var(--lv-surface-alt); color: var(--lv-purple); text-decoration: none; }
.sidenav-item.current-article,
.sidenav-item.current {
  color: var(--lv-purple);
  font-weight: 700;
}
.article-sidebar-item { display: block; margin-top: var(--lv-s2); font-size: var(--lv-fs-sm); font-weight: 600; color: var(--lv-link); }

.article-header { margin: var(--lv-s5) 0 var(--lv-s6); }
/* Mobile: Bold 32/36 · desktop: Display/D1 (Medium 48/52) */
.article-title {
  margin: 0 0 var(--lv-s4);
  font: 700 var(--lv-fs-2xl) / 36px var(--lv-font);
  overflow-wrap: break-word;
}
@media (min-width: 768px) { .article-title { font: var(--lv-t-d1); } }
.article-title .icon-lock { width: 22px; height: 22px; vertical-align: baseline; }
.article-author { margin: 0; }
.article-meta { display: inline-flex; flex-wrap: wrap; gap: var(--lv-s2); }
/* Figma "Pill" (3262:6291): 22px high, 4px/8px padding, 8px icon–text gap, Label/L3 white */
.article-meta .meta-data {
  border-radius:  100px;
  color: var(--lv-surface);
  background:  var(--lv-c-charcoalgrey-t20);
  backdrop-filter: blur(82px);
  display: inline-flex;
  align-items: center;
  gap: var(--lv-s2);
  height: 22px;
  padding: 4px 8px;
  font: var(--lv-t-l3);
}
.article-meta .meta-data-icon { display: block; flex: none; width: 10.18px; height: 11.23px; }
.article-meta .meta-data::after { content: none; margin: 0; }

.article-content { margin: var(--lv-s6) 0; }
.article-body { font: var(--lv-t-b2); word-wrap: break-word; }   /* Body/B2 */
.article-body a { color: var(--lv-link); text-decoration: underline; }
.article-body a:visited { color: var(--lv-link-visited); }
/* h2: Heading/H2 mobile · Heading/H1 desktop. h3 one step below (not in the frames) */
.article-body h2 { font: var(--lv-t-h2); margin: 1.4em 0 0.5em; }
.article-body h3 { font: var(--lv-t-h3); margin: 1.3em 0 0.5em; }
@media (min-width: 768px) {
  .article-body h2 { font: var(--lv-t-h1); }
  .article-body h3 { font: var(--lv-t-h2); }
}
.article-body img { height: auto; max-width: 100%; border-radius: var(--lv-r-sm); }
.article-body p > img.image-style-align-left { float: left; margin: 8px 20px 6px 0; }
.article-body p > img.image-style-align-right { float: right; margin: 8px 0 6px 20px; }
.article-body figure.image { display: table; margin: 1em auto; }
.article-body figure.image > img { display: block; width: 100%; }
.article-body figcaption { padding: 8px 0; font-size: var(--lv-fs-xs); text-align: center; color: var(--lv-ink-faint); }
.article-body ul, .article-body ol { padding-left: 20px; margin: 1em 0 1em 20px; list-style-position: outside; }
[dir=rtl] .article-body ul, [dir=rtl] .article-body ol { padding-right: 20px; padding-left: 0; margin-left: 0; margin-right: 20px; }
.article-body ul > ul, .article-body ol > ol, .article-body ol > ul, .article-body ul > ol,
.article-body li > ul, .article-body li > ol { margin: 0; }
.article-body ul { list-style-type: disc; }
.article-body :not(pre) > code { padding: 2px 6px; margin: 0 2px; background: var(--lv-surface-alt); border: 1px solid var(--lv-border); border-radius: 6px; font-size: 0.9em; }
.article-body pre { padding: 14px 16px; background: var(--lv-surface-alt); border: 1px solid var(--lv-border); border-radius: var(--lv-r-sm); overflow: auto; white-space: pre; }
.article-body blockquote { margin: 1em 0; padding: 8px 18px; border-left: 3px solid var(--lv-purple); color: var(--lv-ink-soft); font-style: italic; }
[dir=rtl] .article-body blockquote { border-left: 0; border-right: 3px solid var(--lv-purple); }
.article-body > p:last-child { margin-bottom: 0; }

.content-tags > p { margin: 2em 0 var(--lv-s2); color: var(--lv-ink-faint); font-size: var(--lv-fs-sm); }
.content-tags-add-hint { color: var(--lv-ink-faint); font-size: var(--lv-fs-sm); }
.content-tag-list { display: flex; flex-wrap: wrap; gap: var(--lv-s2); }
.content-tag-list li { border: 0; padding: 0; margin: 0; }
.content-tag-list li a,
.content-tag .label {
  display: inline-block;
  padding: 4px 12px;
  font-size: var(--lv-fs-xs);
  font-weight: 600;
  color: var(--lv-ink-soft);
  background: var(--lv-surface-alt);
  border-radius: var(--lv-r-pill);
}

.article-footer { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--lv-s5); }
.article-comment-count { color: var(--lv-ink-soft); }
.article-comment-count-icon { width: 18px; height: 18px; vertical-align: middle; color: var(--lv-brand); }

/* Was this article helpful? */
.article-votes { padding: var(--lv-s6) 0; text-align: center; border-top: 1px solid var(--lv-border); }
/* Heading/H3 mobile · Heading/H2 desktop; Yes/No buttons Label/L2 mobile · Label/L1 desktop (via .button) */
.article-votes-question { margin: 0 0 var(--lv-s3); font: var(--lv-t-h3); }
@media (min-width: 768px) { .article-votes-question { font: var(--lv-t-h2); } }
@media (max-width: 767px) { .article-votes .article-vote { font: var(--lv-t-l2); } }
.article-vote,
.vote-up, .vote-down {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--lv-s2);
  min-width: 92px; margin: var(--lv-s2) 6px 0; height: var(--lv-btn-h); padding: 0 var(--lv-btn-px);
  border: 2px solid var(--lv-border-strong); border-radius: var(--lv-r-pill);
  background: var(--lv-surface); color: var(--lv-ink-soft); cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Scoped under .article-votes: Zendesk's vote helper also emits the bare .vote-up/.vote-down
   classes, which the community-post vote widget further below styles differently (color: brand,
   background: transparent on hover/voted). Same specificity + later source order meant that rule
   was winning the cascade over the unscoped version of these — scoping fixes that for good. */
/* Full border declared here (not just border-color): the bare .vote-up/.vote-down reset further
   below sets `border: 0`, which would otherwise leave the "No" outline at zero width. */
.article-votes .article-vote { height: var(--lv-btn-h); padding: 0 var(--lv-btn-px); border: 2px solid var(--lv-brand); }
.article-votes .article-vote.vote-voted, .article-votes .vote-voted { background: var(--lv-brand); border-color: var(--lv-brand); color: var(--lv-brand-ink); }

/* No = orange / outlined, Yes = orange / filled (Figma Buttons set) */
.article-votes .article-vote-down, .article-votes .vote-down { background: transparent; border-color: var(--lv-brand); color: var(--lv-ink); }
.article-votes .article-vote-up, .article-votes .vote-up { background: var(--lv-brand); border-color: var(--lv-brand); color: var(--lv-brand-ink); }
/* full `border` again on hover: `.vote-up:hover, .vote-down:hover { border: 0 }` below is later in source */
.article-votes .article-vote-down:hover, .article-votes .vote-down:hover { background: transparent; border: 2px solid var(--lv-brand-strong); color: var(--lv-c-charcoalgrey-hover); }
.article-votes .article-vote-up:hover, .article-votes .vote-up:hover { background: var(--lv-brand-strong); border: 2px solid var(--lv-brand-strong); color: var(--lv-brand-ink); }

/* Thumbs up / down icons — Figma "like" / "dislike" (Feedback Container 3262:6352, 20×20), paths
   copied verbatim. The vote helper renders its own markup, so no inline <svg> is possible; drawn as a
   currentColor mask instead, which also picks up the colours above for free (data URI, not an asset
   URL: masks loaded from the asset CDN would need CORS). Scoped to .article-votes — the bare
   .vote-up/.vote-down classes are also the comment vote arrows, which must not get a thumb. */
.article-votes .article-vote::before {
  content: "";
  display: inline-block;
  width: 20px; height: 20px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.article-votes .article-vote-up::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.7594 2.98322C12.8549 3.09755 13.0725 3.37809 13.1872 3.57755C13.7147 4.4216 13.8754 5.4262 13.6326 6.38052C13.6059 6.48755 13.5715 6.59539 13.5179 6.7608L13.2894 7.47674C13.1939 7.77431 13.137 7.95593 13.1077 8.09215C13.0859 8.16755 13.096 8.31999 13.3153 8.32972C13.466 8.34269 14.0571 8.3435 14.3861 8.3435C15.4218 8.3435 16.2632 8.34269 16.9061 8.42539C17.5633 8.50972 18.1594 8.69539 18.5663 9.18918C18.6458 9.28647 18.7178 9.39026 18.7798 9.49891C19.0971 10.0584 19.0301 10.6608 18.8384 11.2665C18.6525 11.8567 18.3043 12.5832 17.8773 13.4735C17.4813 14.2989 17.1297 15.0327 16.8149 15.5468C16.4892 16.0786 16.1418 16.4962 15.6604 16.8149C15.0969 17.187 14.3451 17.3816 13.7021 17.4416C13.0784 17.5 12.3124 17.5 11.3512 17.5C10.1926 17.5 8.75674 17.5 8.02502 17.4076C7.26734 17.3119 6.62939 17.1084 6.12037 16.6308C6.00065 16.5189 5.89767 16.3997 5.80725 16.2741C5.23962 17.0192 4.34214 17.5 3.33246 17.5C2.044 17.5 1 16.4565 1 15.1689V10.5067C1 9.21918 2.044 8.17566 3.33246 8.17566C4.12195 8.17566 4.84279 8.46999 5.39116 8.95404C5.40707 8.90458 5.42549 8.85593 5.44474 8.80729C5.70344 8.16188 6.19153 7.63809 6.94167 6.83458L10.4663 3.05457C10.5333 2.98241 10.6011 2.90944 10.6689 2.85268C11.2809 2.33701 12.2211 2.39214 12.7594 2.98322ZM2.5547 10.5067V15.1689C2.5547 15.5978 2.90298 15.9457 3.33246 15.9457C4.1906 15.9457 4.88716 15.25 4.88716 14.3922V11.2835C4.88716 10.4257 4.1906 9.72999 3.33246 9.72999C2.90298 9.72999 2.5547 10.0778 2.5547 10.5067Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.7594 2.98322C12.8549 3.09755 13.0725 3.37809 13.1872 3.57755C13.7147 4.4216 13.8754 5.4262 13.6326 6.38052C13.6059 6.48755 13.5715 6.59539 13.5179 6.7608L13.2894 7.47674C13.1939 7.77431 13.137 7.95593 13.1077 8.09215C13.0859 8.16755 13.096 8.31999 13.3153 8.32972C13.466 8.34269 14.0571 8.3435 14.3861 8.3435C15.4218 8.3435 16.2632 8.34269 16.9061 8.42539C17.5633 8.50972 18.1594 8.69539 18.5663 9.18918C18.6458 9.28647 18.7178 9.39026 18.7798 9.49891C19.0971 10.0584 19.0301 10.6608 18.8384 11.2665C18.6525 11.8567 18.3043 12.5832 17.8773 13.4735C17.4813 14.2989 17.1297 15.0327 16.8149 15.5468C16.4892 16.0786 16.1418 16.4962 15.6604 16.8149C15.0969 17.187 14.3451 17.3816 13.7021 17.4416C13.0784 17.5 12.3124 17.5 11.3512 17.5C10.1926 17.5 8.75674 17.5 8.02502 17.4076C7.26734 17.3119 6.62939 17.1084 6.12037 16.6308C6.00065 16.5189 5.89767 16.3997 5.80725 16.2741C5.23962 17.0192 4.34214 17.5 3.33246 17.5C2.044 17.5 1 16.4565 1 15.1689V10.5067C1 9.21918 2.044 8.17566 3.33246 8.17566C4.12195 8.17566 4.84279 8.46999 5.39116 8.95404C5.40707 8.90458 5.42549 8.85593 5.44474 8.80729C5.70344 8.16188 6.19153 7.63809 6.94167 6.83458L10.4663 3.05457C10.5333 2.98241 10.6011 2.90944 10.6689 2.85268C11.2809 2.33701 12.2211 2.39214 12.7594 2.98322ZM2.5547 10.5067V15.1689C2.5547 15.5978 2.90298 15.9457 3.33246 15.9457C4.1906 15.9457 4.88716 15.25 4.88716 14.3922V11.2835C4.88716 10.4257 4.1906 9.72999 3.33246 9.72999C2.90298 9.72999 2.5547 10.0778 2.5547 10.5067Z'/%3E%3C/svg%3E");
}
.article-votes .article-vote-down::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.33246 11.8243C2.044 11.8243 1 10.7808 1 9.49325V4.83108C1 3.54351 2.044 2.5 3.33246 2.5C4.34214 2.5 5.23962 2.98081 5.80725 3.72595C5.89767 3.60027 6.00065 3.48108 6.12037 3.36919C6.62939 2.89162 7.26734 2.68811 8.02502 2.59243C8.75674 2.5 10.1926 2.5 11.3512 2.5C12.3124 2.5 13.0784 2.5 13.7021 2.55838C14.3451 2.61838 15.0969 2.81297 15.6604 3.18514C16.1418 3.50379 16.4892 3.92135 16.8149 4.45325C17.1297 4.9673 17.4813 5.70109 17.8773 6.52649C18.3043 7.41676 18.6525 8.14325 18.8384 8.73352C19.0301 9.3392 19.0971 9.94163 18.7798 10.5011C18.7178 10.6097 18.6458 10.7135 18.5663 10.8108C18.1594 11.3046 17.5633 11.4903 16.9061 11.5746C16.2632 11.6565 15.4226 11.6565 14.3861 11.6565C14.0571 11.6565 13.466 11.6573 13.3153 11.6703C13.096 11.68 13.0859 11.8324 13.1077 11.9079C13.137 12.0441 13.1939 12.2257 13.2894 12.5233L13.5179 13.2392C13.5715 13.4046 13.6059 13.5124 13.6326 13.6195C13.8754 14.5738 13.7147 15.5784 13.1872 16.4225C13.0725 16.6219 12.8549 16.9025 12.7594 17.0168C12.2211 17.6079 11.2809 17.663 10.6689 17.1473C10.6011 17.0906 10.5333 17.0176 10.4663 16.9454L6.94167 13.1654C6.19153 12.3619 5.70344 11.8381 5.44474 11.1927C5.42549 11.1441 5.40707 11.0954 5.39116 11.046C4.84279 11.53 4.12195 11.8243 3.33246 11.8243ZM2.5547 9.49325C2.5547 9.92217 2.90298 10.27 3.33246 10.27C4.1906 10.27 4.88716 9.57433 4.88716 8.7165V5.60784C4.88716 4.75 4.1906 4.05433 3.33246 4.05433C2.90298 4.05433 2.5547 4.40216 2.5547 4.83108V9.49325Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.33246 11.8243C2.044 11.8243 1 10.7808 1 9.49325V4.83108C1 3.54351 2.044 2.5 3.33246 2.5C4.34214 2.5 5.23962 2.98081 5.80725 3.72595C5.89767 3.60027 6.00065 3.48108 6.12037 3.36919C6.62939 2.89162 7.26734 2.68811 8.02502 2.59243C8.75674 2.5 10.1926 2.5 11.3512 2.5C12.3124 2.5 13.0784 2.5 13.7021 2.55838C14.3451 2.61838 15.0969 2.81297 15.6604 3.18514C16.1418 3.50379 16.4892 3.92135 16.8149 4.45325C17.1297 4.9673 17.4813 5.70109 17.8773 6.52649C18.3043 7.41676 18.6525 8.14325 18.8384 8.73352C19.0301 9.3392 19.0971 9.94163 18.7798 10.5011C18.7178 10.6097 18.6458 10.7135 18.5663 10.8108C18.1594 11.3046 17.5633 11.4903 16.9061 11.5746C16.2632 11.6565 15.4226 11.6565 14.3861 11.6565C14.0571 11.6565 13.466 11.6573 13.3153 11.6703C13.096 11.68 13.0859 11.8324 13.1077 11.9079C13.137 12.0441 13.1939 12.2257 13.2894 12.5233L13.5179 13.2392C13.5715 13.4046 13.6059 13.5124 13.6326 13.6195C13.8754 14.5738 13.7147 15.5784 13.1872 16.4225C13.0725 16.6219 12.8549 16.9025 12.7594 17.0168C12.2211 17.6079 11.2809 17.663 10.6689 17.1473C10.6011 17.0906 10.5333 17.0176 10.4663 16.9454L6.94167 13.1654C6.19153 12.3619 5.70344 11.8381 5.44474 11.1927C5.42549 11.1441 5.40707 11.0954 5.39116 11.046C4.84279 11.53 4.12195 11.8243 3.33246 11.8243ZM2.5547 9.49325C2.5547 9.92217 2.90298 10.27 3.33246 10.27C4.1906 10.27 4.88716 9.57433 4.88716 8.7165V5.60784C4.88716 4.75 4.1906 4.05433 3.33246 4.05433C2.90298 4.05433 2.5547 4.40216 2.5547 4.83108V9.49325Z'/%3E%3C/svg%3E");
}

.article-more-questions { margin: var(--lv-s3) 0 var(--lv-s5); text-align: center; }
.article-more-questions a { color: var(--lv-link); text-decoration: underline; }

.article-relatives { display: flex; flex-direction: column; gap: var(--lv-s5); padding: var(--lv-s6) 0; border-top: 1px solid var(--lv-border); }
@media (min-width: 768px) { .article-relatives { flex-direction: row; } }
.article-relatives > * { flex: 1 1 50%; min-width: 0; }
.article-relatives h3 { font-size: var(--lv-fs-md); }
.recent-articles li, .related-articles li { margin-bottom: var(--lv-s3); }

.article-return-to-top { border-top: 1px solid var(--lv-border); }
@media (min-width: 1024px) { .article-return-to-top { display: none; } }
.article-return-to-top a { display: block; padding: var(--lv-s5) 0; color: var(--lv-ink-soft); }
.article-return-to-top-icon { transform: rotate(0.5turn); }

/* Collapsible sidebar / nav shared behaviour */
.collapsible-sidebar { position: relative; flex: 1; max-height: 46px; overflow: hidden; padding: var(--lv-s3) 0; }
@media (min-width: 1024px) { .collapsible-sidebar { max-height: none; padding: 0; } }
.collapsible-sidebar-title { margin-top: 0; }
.collapsible-sidebar-toggle,
.collapsible-nav-toggle {
  position: absolute; top: 22px; right: 0; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--lv-ink-soft);
}
[dir=rtl] .collapsible-sidebar-toggle, [dir=rtl] .collapsible-nav-toggle { right: auto; left: 0; }
@media (min-width: 1024px) { .collapsible-sidebar-toggle { display: none; } }
@media (min-width: 768px) { .collapsible-nav-toggle { display: none; } }
.collapsible-sidebar-toggle-icon, .collapsible-nav-toggle-icon { display: none; }
.collapsible-sidebar-toggle[aria-expanded=false] .chevron-icon,
.collapsible-nav-toggle[aria-expanded=false] .chevron-icon { display: inline-block; }
.collapsible-sidebar-toggle[aria-expanded=true] .x-icon,
.collapsible-nav-toggle[aria-expanded=true] .x-icon { display: inline-block; }
.collapsible-sidebar-body { display: none; }
@media (min-width: 1024px) { .collapsible-sidebar-body { display: block; } }
.collapsible-sidebar[aria-expanded=true] { max-height: none; }
.collapsible-sidebar[aria-expanded=true] .collapsible-sidebar-body { display: block; }

/* ============================================================ Attachments + social share */
.attachments .attachment-item { position: relative; margin-bottom: var(--lv-s3); padding-left: 22px; }
.attachments .attachment-item .attachment-icon { position: absolute; left: 0; top: 4px; color: var(--lv-ink-soft); }
[dir=rtl] .attachments .attachment-item { padding-left: 0; padding-right: 22px; }
[dir=rtl] .attachments .attachment-item .attachment-icon { left: auto; right: 0; }
.upload-dropzone span { color: var(--lv-ink-soft); }

/* Article share links — same icons, size and hover as the footer's social links (footer.hbs:
   34px, gap 32px, scale + fade on hover), in ink instead of light grey for the light page. */
.share { display: flex; flex-wrap: wrap; gap: var(--lv-s6); padding: 0; }
.share li { width: 34px; height: 34px; }
.share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  color: var(--lv-ink);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.share a:hover, .share a:focus-visible { color: var(--lv-ink); text-decoration: none; transform: scale(1.12); opacity: 0.85; }
.share a svg { width: 34px; height: 34px; display: block; }

/* ============================================================ Comments + vote + actions */
.comment { border-bottom: 1px solid var(--lv-border); padding: var(--lv-s5) 0; }
.comment-heading,
.recent-articles-title, .related-articles-title { margin: 0 0 var(--lv-s2); font-size: var(--lv-fs-md); font-weight: var(--lv-weight-heading); }
.comment-overview { border-top: 1px solid var(--lv-border); border-bottom: 1px solid var(--lv-border); padding: var(--lv-s5) 0; }
.comment-callout { display: inline-block; margin: 0; font-size: var(--lv-fs-sm); color: var(--lv-ink-soft); }
.comment-callout a { color: var(--lv-link); text-decoration: underline; }
.comment-sorter { display: inline-block; float: right; }
[dir=rtl] .comment-sorter { float: left; }
.comment-sorter .dropdown-toggle { font-size: var(--lv-fs-sm); color: var(--lv-ink-soft); }
.comment-wrapper { display: flex; position: relative; }
.comment-wrapper.comment-official { border: 1px solid var(--lv-brand); border-radius: var(--lv-r-md); padding: 40px 20px 20px; }
.comment-info { min-width: 0; width: 100%; padding-right: 20px; }
[dir=rtl] .comment-info { padding-right: 0; padding-left: 20px; }
.comment-author { display: flex; flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--lv-s5); }
@media (min-width: 768px) { .comment-author { justify-content: space-between; } }
.comment-avatar { margin-right: 10px; }
[dir=rtl] .comment-avatar { margin-right: 0; margin-left: 10px; }
.comment-meta { flex: 1 1 auto; }
.comment-labels { flex-basis: 100%; }
@media (min-width: 768px) { .comment-labels { flex-basis: auto; } }
.comment-form { display: flex; padding-top: var(--lv-s6); word-wrap: break-word; }
.comment-container { width: 100%; }
.comment-form-controls { display: none; margin-top: var(--lv-s3); }
@media (min-width: 768px) { [dir=ltr] .comment-form-controls { text-align: right; } }
.comment-form-controls input[type=submit] { margin-top: var(--lv-s3); }
@media (min-width: 1024px) { .comment-form-controls input[type=submit] { margin-left: var(--lv-s3); } [dir=rtl] .comment-form-controls input[type=submit] { margin-left: 0; margin-right: var(--lv-s3); } }
.comment-form-controls input[type=checkbox] { margin-right: 5px; }
.comment-ccs { display: none; }
.comment-ccs + textarea { margin-top: var(--lv-s3); }
.comment-attachments { margin-top: var(--lv-s3); }
.comment-attachments a { color: var(--lv-brand); }
.comment-body { line-height: var(--lv-lh); word-break: break-word; overflow-x: auto; display: flow-root; }
.comment-body a { color: var(--lv-link); text-decoration: underline; }
.comment-body img { height: auto; max-width: 100%; }
.comment-body ul, .comment-body ol { padding-left: 20px; margin: 1em 0 1em 20px; list-style-position: outside; }
[dir=rtl] .comment-body ul, [dir=rtl] .comment-body ol { padding-right: 20px; padding-left: 0; margin-left: 0; margin-right: 20px; }
.comment-body ul { list-style-type: disc; }
.comment-body :not(pre) > code { padding: 2px 6px; background: var(--lv-surface-alt); border: 1px solid var(--lv-border); border-radius: 6px; }
.comment-body pre { padding: 14px 16px; background: var(--lv-surface-alt); border: 1px solid var(--lv-border); border-radius: var(--lv-r-sm); overflow: auto; }
.comment-body blockquote { padding: 8px 18px; border-left: 3px solid var(--lv-purple); color: var(--lv-ink-soft); font-style: italic; }
.comment-mark-as-solved { display: inline-block; }

.vote { display: flex; flex-direction: column; text-align: center; }
.vote a:hover, .vote a:active, .vote a:focus { text-decoration: none; }
.vote-sum { display: block; margin: 3px 0; color: var(--lv-ink-soft); }
[dir=rtl] .vote-sum { direction: ltr; unicode-bidi: bidi-override; }
.vote-up svg { transform: scale(1, -1); }
.vote-up, .vote-down {
  min-width: 35px; min-height: 35px; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--lv-ink-soft);
}
.vote-up:hover, .vote-down:hover, .vote-voted { color: var(--lv-brand); background: transparent; border: 0; }

.actions { flex-shrink: 0; text-align: center; }
.actions button {
  display: flex; align-items: center; justify-content: center;
  min-width: 35px; min-height: 35px; border: 0; background: transparent; cursor: pointer; color: var(--lv-ink-soft);
}

/* ============================================================ Striped list (community posts / requests) */
.striped-list { padding: 0; }
.striped-list-item {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: var(--lv-s5) 0; border-bottom: 1px solid var(--lv-border);
}
@media (min-width: 768px) { .striped-list-item { flex-direction: row; align-items: center; } }
.striped-list-info { flex: 2; }
.striped-list-title { display: inline-block; margin: 0 5px 8px 0; color: var(--lv-link); font-weight: 600; }
.striped-list-title:hover { text-decoration: underline; }
.striped-list .meta-group { margin: 5px 0; }
.striped-list-count { color: var(--lv-ink-faint); font-size: var(--lv-fs-sm); text-transform: capitalize; }
@media (min-width: 768px) { .striped-list-count { display: flex; flex: 1; justify-content: space-around; } }
.striped-list-count-item::after { content: "·"; padding: 0 5px; }
@media (min-width: 768px) { .striped-list-count-item::after { display: none; } }
.striped-list-count-item:last-child::after { display: none; }
.striped-list-number { display: block; text-align: center; }
@media (min-width: 768px) { .striped-list-number { color: var(--lv-ink); } }

/* ============================================================ Status labels */
.status-label {
  display: inline-block;
  padding: 3px 12px; margin-right: 2px;
  font-size: var(--lv-fs-xs); font-weight: 700;
  color: var(--lv-ink); background-color: var(--lv-ok);   /* ink, not white: white on Figma's green #7CCF00 is ~2:1 */
  border-radius: var(--lv-r-pill); vertical-align: middle; white-space: nowrap;
}
.status-label:hover { text-decoration: none; }
.status-label-pinned, .status-label-featured, .status-label-official { background-color: var(--lv-brand); color: var(--lv-brand-ink); }
.status-label-official { position: absolute; top: 0; right: 0; width: 100%; text-align: center; border-radius: 0; }
@media (min-width: 768px) { .status-label-official { right: 30px; width: auto; border-radius: 0 0 var(--lv-r-sm) var(--lv-r-sm); } }
[dir=rtl] .status-label-official { right: auto; left: 30px; }
.status-label-not-planned, .status-label-closed { background-color: var(--lv-c-softgrey); color: var(--lv-ink-soft); }
.status-label-pending, .status-label-pending-moderation { background-color: var(--lv-info); color: #fff; text-align: center; }
.status-label-open { background-color: var(--lv-danger); color: #fff; }
.status-label-solved { background-color: #68737D; color: #fff; }
.status-label-new { background-color: var(--lv-warn); color: #703B15; }
.status-label-hold { background-color: #000; color: #fff; }
.status-label-request { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 768px) { .status-label-request { max-width: 150px; } }

/* Community badges */
.community-badge-title { display: inline-block; padding: 1px 8px; font-size: var(--lv-fs-xs); font-weight: 700; line-height: 18px; color: #fff; background: #04444D; border-radius: var(--lv-r-pill); vertical-align: middle; }
.community-badge-titles { display: inline; }
.community-badge-achievement { display: block; width: 16px; height: 16px; }
.community-badge-achievement img { width: 100%; height: 100%; }
.community-badge-achievements { display: flex; }
.community-badge-achievements-rest { font-size: var(--lv-fs-xs); font-weight: 700; line-height: 20px; text-align: center; }
.community-badge { margin: 2px; }
.profile-info .community-badge-title { padding: 2px 8px; line-height: 20px; }
.profile-info .community-badge-achievement { width: 40px; height: 40px; }
.profile-info .community-badge-achievements-rest { line-height: 40px; font-size: var(--lv-fs-md); }

/* ============================================================ Community */
.community-header { margin-bottom: var(--lv-s6); }
.community-header .title { margin: 0; font-size: var(--lv-fs-base); }
.community-footer { text-align: center; }
.community-footer-title { margin-bottom: var(--lv-s4); font-size: var(--lv-fs-md); }
.community-featured-posts .title { font-size: var(--lv-fs-md); font-weight: var(--lv-weight-heading); }
.community-featured-posts, .community-activity { width: 100%; }
.post-to-community { margin-top: var(--lv-s3); }
@media (min-width: 768px) { .post-to-community { margin: 0; } }
.topics { width: 100%; }
.topics-item .meta-group { justify-content: center; margin-top: var(--lv-s3); }
.topic-header { border-bottom: 1px solid var(--lv-border); font-size: var(--lv-fs-sm); }
@media (min-width: 768px) { .topic-header { padding-bottom: var(--lv-s3); } }
.topic-header .dropdown { display: block; border-top: 1px solid var(--lv-border); padding: var(--lv-s3) 0; }
@media (min-width: 768px) { .topic-header .dropdown { display: inline-block; border-top: 0; margin-right: 20px; padding: 0; } }
.no-posts-with-filter { margin: var(--lv-s5) 0; }

.community-follow { width: 100%; margin-bottom: var(--lv-s3); }
@media (min-width: 768px) { .community-follow { width: auto; margin-bottom: 0; } }
.community-follow button { position: relative; width: 100%; padding: 0 var(--lv-btn-px); }
@media (min-width: 768px) { .community-follow button { width: auto; } }
.community-follow button[data-selected=true] { background: var(--lv-brand); color: var(--lv-brand-ink); }
.community-follow button::after {
  content: attr(data-follower-count);
  margin-left: 12px; padding-left: 10px;
  border-left: 1px solid currentColor;
}
[dir=rtl] .community-follow button::after { margin: 0 12px 0 0; padding: 0 10px 0 0; border-left: 0; border-right: 1px solid currentColor; }

/* Community post page */
.post { flex: 1; margin-bottom: var(--lv-s3); min-width: 0; }
@media (min-width: 1024px) { .post { flex: 1 1 70%; max-width: 70%; } }
.post-container { display: flex; flex-direction: column; gap: var(--lv-s6); }
@media (min-width: 1024px) { .post-container { flex-direction: row; } }
.post-header { display: flex; flex-direction: column; align-items: center; justify-content: space-between; margin-bottom: var(--lv-s3); }
@media (min-width: 768px) { .post-header { flex-direction: row; align-items: baseline; } }
.post-title { width: 100%; margin-bottom: var(--lv-s4); }
@media (min-width: 768px) { .post-title { margin-bottom: 0; padding-right: 10px; } }
.post-title h1 { display: inline; vertical-align: middle; }
.post-author { display: flex; align-items: flex-start; justify-content: space-between; }
.post-avatar { margin-bottom: var(--lv-s6); }
.post-content { line-height: var(--lv-lh); word-break: break-word; }
.post-info-container { display: flex; margin-bottom: var(--lv-s6); }
.post-info { min-width: 0; width: 100%; padding-right: 20px; }
[dir=rtl] .post-info { padding-right: 0; padding-left: 20px; }
.post-meta { flex: 1; margin-left: 10px; }
[dir=rtl] .post-meta { margin-left: 0; margin-right: 10px; }
.post-body { display: flow-root; }
.post-body a { color: var(--lv-link); text-decoration: underline; }
.post-body img { height: auto; max-width: 100%; }
.post-body ul, .post-body ol { padding-left: 20px; margin: 1em 0 1em 20px; list-style-position: outside; }
.post-body ul { list-style-type: disc; }
.post-body blockquote { padding: 8px 18px; border-left: 3px solid var(--lv-purple); color: var(--lv-ink-soft); font-style: italic; }
.post-footer { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--lv-s5); }
.post-comment-count { color: var(--lv-ink-soft); }
.post-comment-count .icon-comments { width: 18px; height: 18px; margin: 5px; vertical-align: middle; color: var(--lv-brand); }
.post-sidebar { flex: 1; padding: var(--lv-s6) 0; border-top: 1px solid var(--lv-border); text-align: center; }
@media (min-width: 1024px) { .post-sidebar { flex: 1 1 30%; border: 0; padding: 0 0 0 50px; text-align: start; } [dir=rtl] .post-sidebar { padding: 0 50px 0 0; } }
.post-sidebar-title { font-size: var(--lv-fs-md); font-weight: var(--lv-weight-heading); }

/* ============================================================ My activities / tables */
.my-activities-nav { margin-bottom: var(--lv-s5); background: var(--lv-surface-alt); }
.my-activities-header h1 { font-size: var(--lv-fs-2xl); }
.my-activities-sub-nav { margin-bottom: var(--lv-s6); }

.collapsible-nav { position: relative; display: flex; flex-direction: column; font-size: var(--lv-fs-sm); }
@media (min-width: 768px) { .collapsible-nav { flex-direction: row; } }
.collapsible-nav-border { border-top: 1px solid var(--lv-border); border-bottom: 1px solid var(--lv-border); }
@media (min-width: 768px) { .collapsible-nav-border { border-top: 0; } }
.collapsible-nav-list { display: flex; flex-direction: column; }
@media (min-width: 768px) { .collapsible-nav-list { flex-direction: row; } }
.collapsible-nav-list li { line-height: 44px; }
@media (min-width: 768px) { .collapsible-nav-list li { line-height: normal; margin-right: 28px; } [dir=rtl] .collapsible-nav-list li { margin-right: 0; margin-left: 28px; } .collapsible-nav-list li a { padding: 14px 0; } }
.collapsible-nav-list li a { display: block; color: var(--lv-ink-soft); }
.collapsible-nav-list li.current a, .collapsible-nav-list li[aria-selected=true] a { color: var(--lv-ink); font-weight: 700; }
.collapsible-nav-list li:not(.current):not([aria-selected=true]) { display: none; }
@media (min-width: 768px) {
  .collapsible-nav-list li:not(.current):not([aria-selected=true]) { display: block; }
  .collapsible-nav-list li.current, .collapsible-nav-list li[aria-selected=true] { border-bottom: 3px solid var(--lv-brand); }
}
.collapsible-nav[aria-expanded=true] li:not(.current):not([aria-selected=true]) { display: block; }

.table { width: 100%; border-collapse: collapse; table-layout: fixed; }
@media (min-width: 768px) { .table { table-layout: auto; } }
.table th, .table th a { color: var(--lv-ink-soft); font-size: var(--lv-fs-sm); text-align: left; font-weight: 700; }
[dir=rtl] .table th, [dir=rtl] .table th a { text-align: right; }
.table tr { display: block; padding: var(--lv-s5) 0; border-bottom: 1px solid var(--lv-border); }
@media (min-width: 768px) { .table tr { display: table-row; } }
.table td { display: block; }
@media (min-width: 768px) { .table td { display: table-cell; } .table td, .table th { padding: 12px 20px; height: 58px; } }
@media (min-width: 1024px) { .table td, .table th { padding: 18px 26px; } }

.my-activities-table thead, .requests-table thead { display: none; }
@media (min-width: 768px) { .my-activities-table thead, .requests-table thead { display: table-header-group; } }
.my-activities-table th:first-child, .my-activities-table td:first-child { padding-left: 0; }
.my-activities-table th:last-child, .my-activities-table td:last-child { padding-right: 0; }
.my-activities-table td:not(:first-child) { display: none; }
@media (min-width: 768px) { .my-activities-table td:not(:first-child) { display: table-cell; } }
.my-activities-table .striped-list-title { display: block; max-width: 500px; white-space: normal; }
@media (min-width: 1024px) { .my-activities-table .striped-list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.request-closed { opacity: 0.6; }
.requests-table-meta { display: block; }
@media (min-width: 768px) { .requests-table-meta { display: none; } }
.requests-table-info { display: block; }
@media (min-width: 768px) { .requests-table-info { display: table-cell; vertical-align: middle; } }
.no-activities { color: var(--lv-ink-faint); margin: var(--lv-s5) 0; }

.requests-table-toolbar { display: flex; flex-direction: column; align-items: flex-end; gap: var(--lv-s3); }
@media (min-width: 768px) { .requests-table-toolbar { flex-direction: row; align-items: flex-end; } }
.requests-table-toolbar .search { flex: 1; width: 100%; }
.requests-table-toolbar .request-table-filter { width: 100%; }
@media (min-width: 768px) { .requests-table-toolbar .request-table-filter { width: auto; } }
.requests-table-toolbar .request-filter-label { display: block; font-size: var(--lv-fs-sm); }
.requests-table-toolbar select { max-height: 44px; }
@media (min-width: 768px) { .requests-table-toolbar select { max-width: 280px; } }
.requests-search-info { margin-top: var(--lv-s4); color: var(--lv-ink-soft); font-size: var(--lv-fs-sm); }
.requests-table-toolbar + .requests { margin-top: var(--lv-s6); }
.my-activities-following-header { margin: var(--lv-s4) 0; }

/* ============================================================ Request page */
.request-container { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; }
@media (min-width: 1024px) { .request-container { flex-direction: row; align-items: flex-start; } }
.request-breadcrumbs { margin-bottom: var(--lv-s6); }
.request-main { flex: 1 1 auto; order: 1; min-width: 0; }
@media (min-width: 1024px) { .request-main { flex: 0 0 64%; order: 0; } }
.request-main .comment-fields, .request-main .request-submit-comment { display: none; }
.request-main .comment-fields.shown { display: block; }
.request-main .request-submit-comment.shown { display: inline; }
.request-main .comment-form-controls, .request-main .comment-ccs { display: block; }
.request-main .comment-show-container {
  width: 100%; padding: 10px 24px;
  color: var(--lv-ink-soft); background: transparent;
  border: 1px solid var(--lv-border-strong); border-radius: var(--lv-r-sm);
}
.request-main .comment-show-container.hidden { display: none; }
.request-main input#mark_as_solved { display: none; }
.request-title { width: 100%; }
@media (min-width: 1024px) { .request-title { max-width: 64%; padding-bottom: var(--lv-s5); border-bottom: 1px solid var(--lv-border); } }
.request-sidebar { flex: 1 1 auto; order: 0; border-top: 1px solid var(--lv-border); border-bottom: 1px solid var(--lv-border); }
@media (min-width: 1024px) { .request-sidebar { flex: 0 0 30%; border: 0; padding: 0 20px; font-size: var(--lv-fs-sm); } }
.request-sidebar h2 { position: relative; font-size: var(--lv-fs-sm); font-weight: var(--lv-weight-heading); }
@media (min-width: 1024px) { .request-sidebar h2 { display: none; } }
.request-details { margin: 0; padding-bottom: var(--lv-s5); border-bottom: 1px solid var(--lv-border); font-size: 0; }
.request-details:last-child { border: 0; }
.request-details dt, .request-details dd { display: inline-block; vertical-align: top; margin: var(--lv-s5) 0 0; font-size: var(--lv-fs-sm); }
.request-details dt { width: 40%; color: var(--lv-ink-soft); }
.request-details dd { width: 60%; padding: 0 10px; }
.request-details dd::after { content: "\a"; white-space: pre; }
.request-attachments dt, .request-attachments dd { width: 100%; }
.request-form textarea { min-height: 130px; border-radius: var(--lv-r-md); }
.request-follow-up { padding-top: var(--lv-s5); }

/* ============================================================ Search results */
.search-results { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; }
@media (min-width: 1024px) { .search-results { flex-direction: row; } }
.search-results-column { flex: 1; }
@media (min-width: 1024px) { .search-results-column { flex: 0 0 74%; } }
.search-results-sidebar { flex: 1 0 auto; border-top: 1px solid var(--lv-border); margin-bottom: var(--lv-s5); }
@media (min-width: 1024px) { .search-results-sidebar { flex: 0 0 22%; border: 0; } }
.search-results-sidebar .collapsible-sidebar { margin-bottom: var(--lv-s6); }
.search-results-sidebar .sidenav-item { border-radius: var(--lv-r-sm); padding: 9px 16px; margin-bottom: 2px; color: var(--lv-ink-soft); }
.search-results-sidebar .sidenav-item:hover, .search-results-sidebar .sidenav-item.current { background: var(--lv-surface-alt); color: var(--lv-ink); text-decoration: none; }
.search-results-sidebar .sidenav-tag { display: flex; align-items: flex-start; }
.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n+6) { display: none; }
.search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list { display: none; }
@media (min-width: 1024px) { .search-results-sidebar .collapsible-sidebar[aria-expanded=false] .multibrand-filter-list { display: block; } }
.search-results-sidebar .doc-count { color: var(--lv-ink-faint); }
.search-results-sidebar .see-all-filters { display: block; padding: var(--lv-s3); background: none; border: 0; color: var(--lv-link); cursor: pointer; }
.search-results-sidebar .see-all-filters[aria-hidden=true] { display: none; }
.search-results-sidebar .see-all-filters::after { content: " ⌄"; font-weight: 700; }
.search-results-subheading { font-size: var(--lv-fs-md); font-weight: var(--lv-weight-heading); }
.search-results-list { margin-bottom: var(--lv-s6); }
.search-results-list > li { padding: var(--lv-s5) 0; }
.search-results-list > li:first-child { border-top: 1px solid var(--lv-border); }
.search-result-title-container { display: flex; align-items: center; justify-content: space-between; }
.search-result-title { margin: 0; font-size: var(--lv-fs-md); }
.search-result-votes, .search-result-meta-count { color: var(--lv-ink-soft); font-size: var(--lv-fs-sm); }
.search-result-votes-icon, .search-result-meta-count-icon { width: 13px; height: 13px; vertical-align: middle; color: var(--lv-brand); }
[dir=ltr] .search-result-votes, [dir=ltr] .search-result-meta-count { margin-left: 20px; }
[dir=rtl] .search-result-votes, [dir=rtl] .search-result-meta-count { margin-right: 20px; }
.search-result-meta-container { display: flex; flex-direction: column; color: var(--lv-ink-faint); }
@media (min-width: 1024px) { .search-result-meta-container { flex-direction: row; align-items: center; } .search-result-meta-container nav { flex: 1; } }
.search-result-breadcrumbs { margin: 0; }
.search-result-description { margin: var(--lv-s3) 0 0; word-break: break-word; }
.search-results-description em { font-style: normal; font-weight: 700; }
html[lang|=zh] .search-results-description em { background: #ff8; }
.search-results .no-results { display: flex; flex-direction: column; align-items: center; padding-top: var(--lv-s8); text-align: center; }
.search-results .no-results svg { max-width: 160px; height: auto; opacity: 0.9; }
.search-results .no-results .headline { margin-top: var(--lv-s5); font-size: var(--lv-fs-md); color: var(--lv-ink); }
.search-results .no-results .action-prompt { margin-top: var(--lv-s2); font-size: var(--lv-fs-sm); color: var(--lv-ink-soft); }
.search-results .no-results .action-prompt a { color: var(--lv-link); }
.scoped-search, .search-full { width: 100%; }

/* ============================================================ Forms + request form (custom) */
.form { max-width: 560px; }
.form-header { margin-bottom: var(--lv-s5); }
.form-field ~ .form-field { margin-top: var(--lv-s4); border-radius: var(--lv-r-pill); }
.form-field label { display: block; margin-bottom: 6px; font: var(--lv-t-l1); }   /* Label/L1 */
.form-field input,
.form-field .nesty-input,
.form-field .hc-multiselect-toggle {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--lv-border-strong); border-radius: var(--lv-r-pill);
  background: var(--lv-surface);
}
/* new_request_page only — .request-form is the class Zendesk's {{request_form}} helper
   puts on its generated <form>, same scoping as the textarea rule below */
.request-form .form-field input,
.request-form .form-field .nesty-input,
.request-form .form-field .hc-multiselect-toggle { border-radius: var(--lv-r-input); }
.form-field input:focus,
.form-field .nesty-input:focus,
.form-field textarea:focus,
.form-field .hc-multiselect-toggle:focus { border-color: var(--lv-brand); box-shadow: 0 0 0 3px var(--lv-brand-tint); outline: none; text-decoration: none; }
/* new_request_page: unselected = black border, selected/focus = purple — same purple used for
   the search box's focus-within border */
.request-form .form-field input,
.request-form .form-field .nesty-input,
.request-form .form-field .hc-multiselect-toggle,
.request-form textarea { border-color: var(--lv-c-charcoalgrey-t10); }
.request-form .form-field input:focus,
.request-form .form-field .nesty-input:focus,
.request-form textarea:focus,
.request-form .form-field .hc-multiselect-toggle:focus { border-color: var(--lv-purple); box-shadow: 0 0 0 3px var(--lv-purple-soft); }
/* text-selection highlight inside these fields defaults to the OS accent color (orange here) — override to match.
   .nesty-input is itself an <a> (see a.nesty-input in new_request_page.hbs's JS), hence listed separately. */
.request-form .form-field input::selection,
.request-form textarea::selection,
.request-form .form-field .nesty-input::selection { background: var(--lv-purple); color: var(--lv-purple-ink); }
/* .nesty-input being an <a> also means the global a:hover/a:active/a:focus rule (style.css:520)
   wins on color over the plain .nesty-input{color} base style — pin it back down here. */
.request-form .form-field .nesty-input:hover,
.request-form .form-field .nesty-input:active,
.request-form .form-field .nesty-input:focus { color: var(--lv-ink-soft); text-decoration: none; }
.form-field .nesty-input { min-height: 44px; line-height: 22px; vertical-align: middle; }
.form-field input[type=checkbox], .form-field input[type=radio] { width: auto; }
.form-field input[type=checkbox] + label { margin: 0 0 0 10px; }
.form-field .optional { margin-left: 4px; color: var(--lv-ink-faint); font-weight: 400; }
/* Helper text: Label/L3 mobile · Label/L1 desktop */
.form-field p, .field-description { margin: 6px 0; color: var(--lv-ink-soft); font: var(--lv-t-l3); }
@media (min-width: 768px) { .form-field p, .field-description { font: var(--lv-t-l1); } }
/* Required markers hidden (label::after from Zendesk, .required-star injected by new_request_page.hbs) */
.form-field.required label::after { content: none; }
.required .required-star,
.required-star { display: none; }
.form footer { margin-top: var(--lv-s6); padding-top: var(--lv-s5); }
.form footer a { margin-right: var(--lv-s3); color: var(--lv-ink-soft); cursor: pointer; }
.form .suggestion-list { margin-top: var(--lv-s5); font-size: var(--lv-fs-sm); }
.form .suggestion-list label { display: block; padding-bottom: 5px; border-bottom: 1px solid var(--lv-border); }
.form .suggestion-list li { padding: 10px 0; }

#hc-wysiwyg { border: 1px solid var(--lv-border-strong); border-radius: var(--lv-r-sm); }
.upload-dropzone,
#upload-dropzone { border: 1px dashed var(--lv-border-strong); border-radius: var(--lv-r-sm); background: var(--lv-surface); }

.nesty-panel { max-height: unset; border: 1px solid var(--lv-border-strong); border-radius: var(--lv-r-sm); background: var(--lv-surface); box-shadow: var(--lv-shadow-md); }
.nesty-panel ul { padding: 6px; border: 0 !important; outline: 0 !important; }
.nesty-panel li { padding: 8px 12px !important; font-size: var(--lv-fs-sm); color: var(--lv-ink); border-radius: 8px; }
.nesty-panel li:hover { background: var(--lv-surface-alt) !important; }
.nesty-input { color: var(--lv-ink-soft); font-size: var(--lv-fs-base); }

/* new_request_page custom layout */
.login-page-1, .submit-page-1 { max-width: 720px; margin: 0 auto; background: var(--lv-surface); border-radius: var(--lv-r-md); padding: var(--lv-s6); box-shadow: 0 8px 48px 0 rgba(0, 0, 0, 0.23);
}
.login-page-1 { display: none; }
/* Mobile: Bold 32 · desktop: Landingpages/D7 (Bold 64/70) */
.submit-request-title { margin-bottom: 6px; font: 700 var(--lv-fs-2xl) / normal var(--lv-font); }
@media (min-width: 768px) { .submit-request-title { font: var(--lv-t-d7); } }
.submit-request-subtitle { margin-bottom: var(--lv-s6); font-size: var(--lv-fs-md); color: var(--lv-ink-soft); text-transform: none; }
.login-buttons { display: flex; flex-wrap: wrap; gap: var(--lv-s4); }
.login-b {
  display: flex; flex-direction: column; align-items: center; gap: var(--lv-s2);
  width: 220px; padding: var(--lv-s6) var(--lv-s5);
  background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-r-md);
  box-shadow: var(--lv-shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.login-buttons a:hover .login-b { transform: translateY(-3px); box-shadow: var(--lv-shadow-md); }
.login-b img { height: 40px; width: auto; }
.title-login { margin: 0; font-weight: 700; color: var(--lv-ink); }
.form-promoted-section { display: flex; flex-wrap: wrap; gap: var(--lv-s6); }
.submit-form { display: flex; width: full; flex-direction: column; width: 100%; align-items: center;}
.submit-form .form { width: 100%; max-width: none; }
.form-title { width: fit-content; font: var(--lv-t-h3); color: var(--lv-ink-soft); }   /* Heading/H3 */
/* Same helper-text style as .field-description */
.mandatory-fields { margin: 5px 0 0; font: var(--lv-t-l3); color: var(--lv-ink-faint); }
@media (min-width: 768px) { .mandatory-fields { font: var(--lv-t-l1); } }
.category-description { margin-top: 6px; }
footer.submit-field { margin-top: 0; text-align: right; }
.submit123 { min-width: 160px; }

/* Ticket-page FAQ suggestions sidebar (new_request_page.hbs) — reactivated,
   see REDESIGN-NOTES.md "Reactivating the ticket-page FAQ accordion". */
.sidenav { flex: 1 1 320px; min-width: 260px; }
.sidenav > ul { display: flex; flex-direction: column; gap: var(--lv-s3); margin: 0; padding: 0; }

.category { background: var(--lv-surface); border: 1px solid var(--lv-border); border-radius: var(--lv-r-md); }
.category-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--lv-s3);
  width: 100%; padding: var(--lv-s4) var(--lv-s5);
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 var(--lv-fs-lg) / 1.2 var(--lv-font); color: var(--lv-ink);
}
.category-chevron { flex: none; width: 12px; height: 12px; color: var(--lv-ink-faint); transition: transform 0.2s ease; }
.category.open .category-chevron { transform: rotate(180deg); }
.category .section-list { display: none; margin: 0; padding: 0 var(--lv-s5) var(--lv-s5); }
.category.open .section-list { display: block; }

.section { margin: var(--lv-s3) 0 0; transition: background-color 0.2s ease; }
.section:first-child { margin-top: 0; }
.section.section-highlight { background: var(--lv-purple-soft); }
.section .article-list { display: flex; flex-direction: column; gap: var(--lv-s2); margin: 0; padding: 0; }

.promoted-link { list-style: none; }
.promoted-link-header {
  display: flex; align-items: center; gap: var(--lv-s3);
  padding: 10px 14px; border-radius: var(--lv-r-pill);
  background: var(--lv-surface-alt); cursor: pointer;
  transition: background-color 0.15s ease, border-radius 0.15s ease;
}
.promoted-link:hover .promoted-link-header { background: var(--lv-purple-soft); }
.promoted-link.active-promoted .promoted-link-header { background: var(--lv-purple-soft); border-radius: var(--lv-r-md) var(--lv-r-md) 0 0; }
.title-promoted { flex: 1; margin: 0; font-size: var(--lv-fs-md); font-weight: 500; color: var(--lv-ink); }
.promoted-link-header .arrow-down { flex: none; width: 10px; height: 10px; transition: transform 0.2s ease; }
.promoted-link-header .arrow-down.active-arrow { transform: rotate(180deg); }

.art-body { display: none; padding: var(--lv-s3) 14px var(--lv-s4); background: var(--lv-purple-soft); border-radius: 0 0 var(--lv-r-md) var(--lv-r-md); }
.body-art {
  margin: 0 0 var(--lv-s2); font-size: var(--lv-fs-md); line-height: 1.5; color: var(--lv-ink); opacity: 0.8;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.body-promoted { display: inline-block; font-size: var(--lv-fs-sm); font-weight: 600; color: var(--lv-link); }
.body-promoted:hover { text-decoration: underline; }

/* Cap the list per section so one huge section doesn't run away */
.section .article-list .promoted-link:nth-child(n+9) { display: none; }

/* ============================================================ User profile */
.profile-header { padding: var(--lv-s6) 0; background: var(--lv-surface-alt); }
.profile-header .container { display: flex; flex-wrap: wrap; }
@media (min-width: 768px) { .profile-header .container { flex-wrap: nowrap; } }
.profile-header .profile-info { flex-basis: 100%; display: flex; flex-wrap: wrap; min-width: 0; }
.profile-avatar { position: relative; align-self: center; margin-right: 12px; line-height: 0; }
[dir=rtl] .profile-avatar { margin-right: 0; margin-left: 12px; }
.profile-avatar .user-avatar { width: 80px; height: 80px; }
.profile-avatar .icon-agent { right: 0; bottom: 0; }
.profile-header .basic-info { display: flex; flex-direction: column; justify-content: center; flex: 1 1 0; min-width: 0; word-break: break-word; }
.profile-header .basic-info .name { display: inline; margin: 0; line-height: 25px; }
.profile-header .options { display: flex; flex-wrap: wrap; flex-basis: 100%; margin-top: var(--lv-s3); gap: var(--lv-s2); }
@media (min-width: 768px) { .profile-header .options { flex-wrap: nowrap; flex-basis: auto; margin-top: 0; margin-left: var(--lv-s3); } }
.user-profile-actions { width: 100%; margin-bottom: var(--lv-s4); }
.profile-header .description { margin: var(--lv-s4) 0; flex-basis: 100%; word-break: break-word; }
.profile-stats { display: flex; flex-direction: column; flex-basis: 100%; font-size: var(--lv-fs-sm); }
.profile-stats .stat { display: flex; margin-bottom: var(--lv-s3); }
.profile-stats .stat-label { flex: 0 0 100px; margin-right: 10px; color: var(--lv-ink-soft); }
[dir=rtl] .profile-stats .stat-label { margin-right: 0; margin-left: 10px; }
.profile-stats-activity { margin-top: var(--lv-s4); border-top: 1px solid var(--lv-border); }
@media (min-width: 768px) { .profile-stats-activity { flex-direction: row; border-top: 0; } .profile-stats-activity .stat { flex-direction: column; } }
.profile-stats-counters { border-bottom: 1px solid var(--lv-border); }
@media (min-width: 768px) { .profile-stats-counters { flex: 0 0 220px; border-bottom: 0; margin-left: var(--lv-s7); } [dir=rtl] .profile-stats-counters { margin-left: 0; margin-right: var(--lv-s7); } }
.profile-private-badge { flex-basis: 100%; padding: 5px 20px; font-size: var(--lv-fs-xs); text-align: center; color: var(--lv-brand); border: 1px solid var(--lv-brand); border-radius: var(--lv-r-pill); }
@media (min-width: 768px) { .profile-private-badge { flex-basis: auto; } }
.profile-nav { background: var(--lv-surface-alt); }
.profile-section { width: 100%; }
@media (min-width: 1024px) { .profile-section { width: calc(100% - 330px); } }
.profile-section-header { display: flex; flex-wrap: wrap; }
.profile-section-title { flex-basis: 100%; margin-bottom: 0; }
.profile-section-description { flex-basis: 100%; padding: var(--lv-s3) 0; color: var(--lv-ink-soft); font-size: var(--lv-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) { .profile-section-description { flex: 1 0 50%; padding-bottom: 0; } }
.profile-section-sorter { flex-basis: 100%; border-top: 1px solid var(--lv-border); font-size: var(--lv-fs-sm); }
@media (min-width: 768px) { .profile-section-sorter { flex: 0 1 auto; border-top: 0; margin-left: 20px; } }
.profile-badges-items { margin-top: var(--lv-s5); }
.profile-badges-item { display: flex; padding: var(--lv-s5) 12px; border-top: 1px solid var(--lv-border); }
.profile-badges-item > div { padding: 0 12px; }
.profile-badges-item-image { width: 40px; height: 40px; margin-right: 12px; }
[dir=rtl] .profile-badges-item-image { margin-right: 0; margin-left: 12px; }
.profile-badges-item-image img { max-height: 40px; }
.profile-badges-item-title, .profile-badges-item-metadata-title { margin-bottom: var(--lv-s2); font-size: var(--lv-fs-sm); }
.profile-badges-item-title { font-weight: 700; }
.profile-badges-item-description, .profile-badges-item-metadata-description { margin: 0; color: var(--lv-ink-soft); font-size: var(--lv-fs-sm); }
.profile-badges-item-metadata { margin-left: auto; text-align: right; }
[dir=rtl] .profile-badges-item-metadata { margin-left: 0; margin-right: auto; text-align: left; }
.profile-contribution { position: relative; padding: var(--lv-s5) 0; word-break: break-word; }
.profile-contribution-header { margin-bottom: 5px; }
.profile-contribution-title { display: inline; margin: 0 0 5px; font-size: var(--lv-fs-sm); line-height: 21px; }
.profile-contribution-body { margin: var(--lv-s3) 0; }
.profile-contribution-list > .profile-contribution { border-top: 1px solid var(--lv-border); }
.profile-contribution-list > .profile-contribution:last-child { border-bottom: 1px solid var(--lv-border); }
.profile-contribution-icon { position: absolute; left: 0; color: var(--lv-ink-faint); line-height: 25px; }
[dir=rtl] .profile-contribution-icon { left: auto; right: 0; }
.profile-contribution-list .profile-contribution-header,
.profile-comments .profile-contribution-breadcrumbs { margin-left: 30px; }
@media (min-width: 768px) { .profile-contribution-list .profile-contribution-header, .profile-comments .profile-contribution-breadcrumbs { margin-left: 0; } .profile-contribution-list > .profile-contribution { padding-left: 30px; } }
.profile-section .no-activity, .profile-section .private-activity { display: block; margin-top: var(--lv-s6); color: var(--lv-ink-faint); }
.private-activity-icon { margin-right: 10px; }
.profile-activity-list { margin-top: var(--lv-s5); }
.profile-activity { position: relative; padding-bottom: var(--lv-s6); }
@media (min-width: 768px) { .profile-activity { padding-left: 20px; } .profile-activity:not(:last-child) { border-left: 1px solid var(--lv-border); } [dir=rtl] .profile-activity:not(:last-child) { border-left: 0; border-right: 1px solid var(--lv-border); } }
.profile-activity-header { display: flex; align-items: center; margin-left: 35px; }
@media (min-width: 768px) { .profile-activity-header { margin-left: 0; } }
.profile-activity-header .user-avatar { width: 40px; height: 40px; min-width: 40px; margin-right: 10px; align-self: flex-start; }
[dir=rtl] .profile-activity-header .user-avatar { margin-right: 0; margin-left: 10px; }
.profile-activity-description { margin: 0; min-width: 0; width: 100%; word-break: break-word; }
.profile-activity-description span:first-child { display: inline; font-weight: 700; }
.profile-activity-contribution { margin-top: var(--lv-s3); padding: var(--lv-s5); background: var(--lv-surface-alt); border-radius: var(--lv-r-md); }
@media (min-width: 768px) { .profile-activity-contribution { margin-top: 0; margin-left: 50px; } [dir=rtl] .profile-activity-contribution { margin-left: 0; margin-right: 50px; } }
.profile-activity-icon { position: absolute; left: 0; width: 28px; height: 28px; text-align: center; color: var(--lv-ink-faint); background: var(--lv-page); border-radius: 50%; }
[dir=rtl] .profile-activity-icon { left: auto; right: 0; }
@media (min-width: 768px) { .profile-activity-icon { left: -14px; } [dir=rtl] .profile-activity-icon { right: -14px; left: auto; } }
.profile-activity-icon svg { position: relative; top: 50%; transform: translateY(-50%); width: 1em; height: 1em; margin: auto; }

/* ============================================================ Pagination */
.pagination { margin: var(--lv-s6) 0; text-align: center; }
.pagination-next, .pagination-prev, .pagination-first, .pagination-last { display: inline-block; }
.pagination-first-link, .pagination-last-link { padding: 0 10px; }
.pagination-first-text, .pagination-last-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pagination-next-text { margin-right: 10px; }
.pagination-prev-text { margin-left: 10px; }
[dir=rtl] .pagination-next-text { margin-left: 10px; margin-right: 0; }
[dir=rtl] .pagination-prev-text { margin-right: 10px; margin-left: 0; }

/* ============================================================ Metadata */
.meta-group { display: block; }
.meta-group * { display: inline; }
.meta-group-opposite { float: right; }
[dir=rtl] .meta-group-opposite { float: left; }
.meta-data { color: var(--lv-ink-faint); font-size: var(--lv-fs-sm); }

/* ============================================================ Notifications */
.notification { display: table; width: 100%; padding: 13px 15px; font-size: var(--lv-fs-sm); color: #555; border: 1px solid; border-radius: var(--lv-r-sm); }
.notification a { color: var(--lv-info); }
.notification-inner { max-width: 980px; margin: 0 auto; padding: 0 20px; }
.notification-icon, .notification-text, .notification-dismiss { display: table-cell; vertical-align: middle; }
.notification-text { width: 100%; padding: 0 15px; }
.notification-error { background: #FFEDED; border-color: #F7CBCB; }
.notification-notice { background: #DBF3FF; border-color: #B5E0F5; }
.notification-alert { background: #FFF8ED; border-color: #FCDBA9; color: #AD5E18; }
.notification-icon::before { content: ""; display: inline-block; width: 14px; height: 14px; background-size: cover; vertical-align: middle; }
.notification-error .notification-icon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23555'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23555'/%3E%3C/svg%3E"); }
.notification-dismiss { color: #555; cursor: pointer; opacity: 0.6; text-decoration: none !important; }
.notification-dismiss:hover { opacity: 1; }
.notification-inline { position: relative; margin-top: 5px; padding: 5px; border-radius: var(--lv-r-sm); line-height: 14px; text-align: left; }
[dir=rtl] .notification-inline { text-align: right; }
.notification-inline[aria-hidden=true] { display: none; }
.notification-inline.notification-error { background: #FFF0F1; border: 1px solid #E35B66; color: #CC3340; }
.notification-inline.notification-error::before { content: ""; display: inline-block; width: 14px; height: 14px; margin: -2px 5px 0 0; background-size: cover; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e35b66'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e35b66'/%3E%3C/svg%3E"); }
.notification-inline.notification-large { margin-bottom: var(--lv-s5); padding: 13px 15px; }
.notification-left-aligned { padding-left: 0; text-align: left; }

/* ============================================================ Dropdown menu */
.dropdown { position: relative; display: inline-block; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; cursor: pointer; vertical-align: middle; text-align: initial; color: inherit; }
.dropdown-toggle:hover { text-decoration: none; }
.dropdown-toggle[aria-expanded=true] + .dropdown-menu { display: block; }
.dropdown-menu {
  position: absolute; left: 0; top: 100%; z-index: 1000;
  min-width: 190px; margin-top: 6px; padding: 8px 0;
  background: var(--lv-surface);
  border: 1px solid var(--lv-border);
  border-radius: var(--lv-r-md);
  box-shadow: var(--lv-shadow-md);
  overflow: hidden;
  display: none; font-size: var(--lv-fs-sm); text-align: left;
}
[dir=rtl] .dropdown-menu { left: auto; right: 0; text-align: right; }
.dropdown-menu [role=separator] { margin: 4px 0; border-bottom: 1px solid var(--lv-border); }
.dropdown-menu [role=menuitem], .dropdown-menu [role=menuitemradio] {
  display: block; width: 100%; padding: 8px 20px;
  color: var(--lv-ink); background: transparent; border: 0; cursor: pointer;
  white-space: nowrap; text-align: start;
}
[dir=rtl] .dropdown-menu [role=menuitem], [dir=rtl] .dropdown-menu [role=menuitemradio] { text-align: end; }
.dropdown-menu [role=menuitem]:hover, .dropdown-menu [role=menuitem]:focus,
.dropdown-menu [role=menuitemradio]:hover, .dropdown-menu [role=menuitemradio]:focus { background: var(--lv-surface-alt); color: var(--lv-ink); text-decoration: none; }
.dropdown-menu [role=menuitem][aria-selected=true]::after, .dropdown-menu [role=menuitemradio][aria-checked=true]::after {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%238A6FF0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'/%3E%3C/svg%3E") no-repeat center;
}
.dropdown-menu [role=menuitem][hidden], .dropdown-menu [role=menuitem][aria-hidden=true],
.dropdown-menu [role=menuitemradio][hidden], .dropdown-menu [role=menuitemradio][aria-hidden=true] { display: none !important; }
.dropdown-menu-end { left: auto; right: 0; }
.dropdown-menu-top { top: auto; bottom: 100%; margin-bottom: 6px; }

/* ============================================================ Footer */
/* footer.hbs is styled inline (design pulled directly from Figma); layout/colors live there.
   Hover states stay here so every current and future footer link/icon gets them for free. */
.site-footer a {
  color: var(--lv-footer-muted);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.site-footer a:hover, .site-footer a:focus-visible { color: var(--lv-footer-ink); text-decoration: underline; }
.site-footer a.social-link:hover, .site-footer a.social-link:focus-visible {
  text-decoration: none;
  transform: scale(1.12);
  opacity: 0.85;
}
.powered-by-zendesk a, .powered-by-zendesk a:visited { color: var(--lv-footer-muted); }
/* Typography is the one thing that can't stay inline — it changes per breakpoint:
   column titles Body/B3 → Heading/H1, links Body/B4 → Body/B3 */
.footer-col-title { font: var(--lv-t-b3); }
.footer-link { font: var(--lv-t-b4); }
@media (min-width: 768px) {
  .footer-col-title { font: var(--lv-t-h1); }
  .footer-link { font: var(--lv-t-b3); }
}

/* ============================================================ WYSIWYG editor (Zendesk CKEditor — light theme minimal) */
.ck.ck-editor__main > .ck-editor__editable { border-color: var(--lv-border-strong) !important; border-radius: 0 0 var(--lv-r-sm) var(--lv-r-sm) !important; }
.ck.ck-toolbar { border-color: var(--lv-border-strong) !important; border-radius: var(--lv-r-sm) var(--lv-r-sm) 0 0 !important; background: var(--lv-surface-alt) !important; }

/* ============================================================ RTL misc */
[dir=rtl] .breadcrumbs li + li::before { transform: scaleX(-1); }

/* ============================================================ Print */
@media print {
  .header-main, .footer, .article-sidebar, .article-votes, .article-relatives,
  .promo-banner, .request-section, .breadcrumbs { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ============================================================ Page layout
   Every page: optional full-width band on top (hero, profile/nav band), then
   one content column. The layout owns the spacing between blocks via `gap` —
   direct children get no vertical margins of their own. Kept at the end of the
   file so it wins over component rules of the same specificity. */
.page-layout {
  display: flex;
  flex-direction: column;
  gap: var(--lv-s8);
}
.page-layout > * { margin-top: 0; margin-bottom: 0; }
/* Pages without a hero: a little air below the header */
.page-layout > .main-content-layout:first-child { margin-top: var(--lv-s5); }

.main-content-layout {
  display: flex;
  flex-direction: column;
  gap: var(--lv-s8);
  width: min(var(--lv-content-width), 100% - 2 * var(--lv-gutter));
  margin: 0 auto;
}
.main-content-layout > * { margin-top: 0; margin-bottom: 0; }



/***** Linkvertise Custom Designs *****/
/* Article accordion — Figma "Components" file, Accordion (1:2060): closed 20:2596, open 20:2590,
   states Default / Hovered / Focused (20:2654). Same look as the .faq-* rows above, but separate
   classes — the .faq-* redirect rows on category/section pages are not affected.
   Markup is written by article authors and must stay as is:
     .accordion > .accordion-item > h3.accordion-header + div.accordion-content
   script.js toggles .is-open on the item.
   Closed: title pill (fit to text) + separate icon box on the right, both purpley @30%.
   Hover : title pill grows to full width and fuses with the icon box into one bar.
   Open  : whole item is one purpley @30% card, plus box swaps to a bare minus circle.
   The icon box is drawn on the header's ::after (positioned against the item), because the
   header is an author-written <h3> with plain text inside and no room for extra elements. */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--lv-s3);
  width: 100%;
  margin: var(--lv-s5) 0;
}
@media (min-width: 768px) { .accordion { gap: 14px; } }

/* Flex row (wrapping) so the header can animate flex-grow on hover like .faq-title;
   the content wraps onto its own full-width line below. */
.accordion-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  border-radius: 18px;
}

/* .accordion prefix beats `.article-body h3` (font + margins).
   margin-inline-end keeps the header clear of the icon box on ::after. */
.accordion .accordion-header {
  box-sizing: border-box;
  flex: 0 1 auto;
  min-height: 49px;
  margin: 0;
  margin-inline-end: 49px;
  padding: 15px var(--lv-s4);
  font: var(--lv-t-b3);   /* Body/B3 mobile · Body/B1 desktop */
  color: #262626;         /* Components file "text/1" */
  background: var(--lv-c-purpley-t30);
  border-radius: 18px;
  cursor: pointer;
  transition: flex-grow 0.2s ease, border-radius 0.2s ease;
}
.accordion .accordion-header::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 49px;
  height: 49px;
  background: url("/hc/theming_assets/01M5C8DP5QP8ZFFYT1VH9Y5HB2") center / 29px no-repeat, var(--lv-c-purpley-t30);
  border-radius: 17px;
  transition: border-radius 0.2s ease;
}
.accordion .accordion-header:focus { outline: none; }

/* Hover / keyboard focus (closed): one full-width bar (logical corners → correct in RTL too) */
.accordion-item:not(.is-open) .accordion-header:hover,
.accordion-item:not(.is-open) .accordion-header:focus-visible {
  flex-grow: 1;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.accordion-item:not(.is-open) .accordion-header:hover::after,
.accordion-item:not(.is-open) .accordion-header:focus-visible::after {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 18px;
  border-end-end-radius: 18px;
}

/* Open: the item becomes the card, header + content sit on it without their own fill */
.accordion-item.is-open { background: var(--lv-c-purpley-t30); }
.accordion-item.is-open .accordion-header {
  flex-grow: 1;
  margin-inline-end: 0;
  padding-inline-end: 49px;
  background: none;
}
.accordion-item.is-open .accordion-header::after {
  background: url("/hc/theming_assets/01M5C8DPEH09F30FGJ7HZXH3SS") center / 29px no-repeat;
}
.accordion-item.is-open .accordion-header:focus-visible { box-shadow: inset 0 0 0 2px var(--lv-c-purpley); }

.accordion-content {
  display: none;
  box-sizing: border-box;
  flex: 0 0 100%;
  padding: 6px var(--lv-s4) var(--lv-s4);
  font: var(--lv-t-b2);   /* Body/B2 */
  color: #262626;
}
.accordion-item.is-open .accordion-content { display: block; }

.accordion-content p {
  margin: 0;
}

@media (min-width: 768px) {
  .accordion .accordion-header {
    min-height: 59px;
    margin-inline-end: 59px;
    padding: 17px var(--lv-s4);
    font: var(--lv-t-b1);
  }
  .accordion .accordion-header::after { width: 59px; height: 59px; }
  .accordion-item.is-open .accordion-header { margin-inline-end: 0; padding-inline-end: 59px; }
}

.infobox{
  text-align: left; 
  background-color: #323232; 
  padding: 10px 15px; 
  margin: 10px 0;
  border-radius: 10px;
}
.outline-infobox{
  text-align: left; 
  background-color: none; 
  border: 1px solid #ff8114 !important; 
  padding: 10px 15px; 
  margin: 10px 0;
  border-radius: 10px;
}
.container-kb {
    margin-bottom: 50px;
}
.article-list .promoted-link:nth-child(n+11),
.article-list .art-body:nth-of-type(n+11) {
    display: none;
}
.attachment-remove {
  display: none;
}
@media (min-width: 1024px) {
  li.blocks-item.sec-26063570759953 {
    margin-right: 0;
}
}
@media (max-width: 1024px) {
  .blocks-item {
    margin: 0 8px 30px;
  }
    .blocks-item {
        margin: 0 8px 30px;
    }
  .blocks-list {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
}