:root {
      /* Satori Bold */
      --background: #fffdf7;
      --surface: #ffffff;

      --sidebar-background: #073b3a;
      --sidebar-background-deep: #052d2c;
      --sidebar-text: #fffdf7;
      --sidebar-muted: #a7c7c0;
      --sidebar-border: rgba(255, 255, 255, 0.14);

      --text: #10201f;
      --text-secondary: #40534f;
      --text-muted: #71807d;

      --border: #d7dfdb;
      --border-strong: #10201f;

      --accent: #f4bd45;
      --accent-strong: #d79312;
      --accent-soft: #fff0bd;

      --danger: #ee6a5f;
      --danger-soft: #fff0ed;

      --mint: #bce5d4;
      --mint-soft: #ecf8f3;

      --sidebar-width: 300px;
      --header-height: 68px;
      --content-width: 860px;

      --radius: 14px;
      --radius-large: 20px;
      --shadow-offset: 6px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--background);
      color: var(--text);
      font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      font-size: 16px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    ::selection {
      background: var(--accent);
      color: var(--text);
    }

    /*
    |--------------------------------------------------------------------------
    | App shell
    |--------------------------------------------------------------------------
    */

    .layout {
      min-height: 100vh;
    }

    .sidebar {
      position: fixed;
      inset: 0 auto 0 0;
      width: var(--sidebar-width);

      display: flex;
      flex-direction: column;

      background:
        linear-gradient(
          180deg,
          var(--sidebar-background) 0%,
          var(--sidebar-background-deep) 100%
        );
      border-right: 2px solid var(--text);
      z-index: 40;
    }

    /*
    |--------------------------------------------------------------------------
    | Site identity
    |--------------------------------------------------------------------------
    */






    /*
    |--------------------------------------------------------------------------
    | Documentation search
    |--------------------------------------------------------------------------
    */

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

    .docs-search-wrapper {
      padding: 18px 16px 0;
    }

    .docs-search {
      position: relative;
    }

    .docs-search-icon {
      position: absolute;
      top: 50%;
      left: 13px;

      width: 16px;
      height: 16px;

      transform: translateY(-50%);

      color: var(--sidebar-muted);

      pointer-events: none;

      transition: color 120ms ease;
    }

    .docs-search-input {
      appearance: none;

      width: 100%;
      height: 42px;

      padding: 0 13px 0 39px;

      border: 1px solid var(--sidebar-border);
      border-radius: 10px;

      outline: none;

      background: rgba(255, 255, 255, 0.07);
      color: var(--sidebar-text);

      font: inherit;
      font-size: 13px;
      font-weight: 550;
      line-height: 1;

      transition:
        background 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
    }

    .docs-search-input::placeholder {
      color: var(--sidebar-muted);
      opacity: 1;
    }

    .docs-search-input:focus {
      border-color: var(--accent);

      background: rgba(255, 255, 255, 0.11);

      box-shadow:
        0 0 0 3px rgba(244, 189, 69, 0.16);
    }

    .docs-search:focus-within .docs-search-icon {
      color: var(--accent);
    }

    .docs-search-input::-webkit-search-decoration {
      display: none;
    }

    /*
    |--------------------------------------------------------------------------
    | Navigation
    |--------------------------------------------------------------------------
    */

    .nav-wrapper {
      flex: 1;
      overflow-y: auto;
      padding: 28px 16px;
    }

    .nav-label {
      margin: 0 10px 13px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.13em;
      text-transform: uppercase;
    }

    .nav {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .nav a {
      position: relative;
      display: block;
      padding: 10px 12px;

      border: 1px solid transparent;
      border-radius: 10px;

      color: #dcebe7;
      text-decoration: none;

      font-size: 14px;
      font-weight: 550;
      line-height: 1.4;

      transition:
        transform 120ms ease,
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease;
    }

    .nav a:hover {
      transform: translateX(2px);
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.12);
      color: #ffffff;
    }

    .nav a.active {
      background: var(--accent);
      border-color: var(--text);
      color: var(--text);
      box-shadow: 3px 3px 0 var(--text);
      font-weight: 800;
    }

    /*
    |--------------------------------------------------------------------------
    | Sidebar footer
    |--------------------------------------------------------------------------
    */

    .sidebar-footer {
      padding: 18px 24px;
      border-top: 1px solid var(--sidebar-border);
      color: var(--sidebar-muted);
      font-size: 12px;
      font-weight: 550;
    }

    .sidebar-footer::before {
      content: "↗";
      display: inline-block;
      margin-right: 6px;
      color: var(--accent);
      font-weight: 900;
    }

    .sidebar-footer a {
      color: inherit;
      text-decoration: none;
    }

    .sidebar-footer a:hover {
      color: #ffffff;
    }

    /*
    |--------------------------------------------------------------------------
    | Main content
    |--------------------------------------------------------------------------
    */

    .main {
      min-height: 100vh;
      margin-left: var(--sidebar-width);
    }

    .mobile-header {
      display: none;
    }

    .content-shell {
      width: 100%;
      max-width: calc(var(--content-width) + 150px);
      margin: 0 auto;
      padding: 62px 72px 110px;
    }

    /*
    |--------------------------------------------------------------------------
    | Page hero
    |--------------------------------------------------------------------------
    */

    .page-header {
      position: relative;
      isolation: isolate;
      overflow: hidden;

      margin-bottom: 52px;
      padding: 42px 46px 46px;

      border: 2px solid var(--text);
      border-radius: var(--radius-large);

      background: var(--sidebar-background);
      color: #ffffff;
      box-shadow:
        var(--shadow-offset)
        var(--shadow-offset)
        0
        var(--accent);
    }

    .page-header::after {
      content: "";
      position: absolute;
      z-index: -1;
      top: -65px;
      right: -42px;

      width: 190px;
      height: 190px;

      border: 2px solid rgba(255, 255, 255, 0.18);
      border-radius: 50%;

      box-shadow:
        0 0 0 28px rgba(255, 255, 255, 0.035),
        0 0 0 58px rgba(255, 255, 255, 0.025);
    }

    .page-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;

      margin-bottom: 15px;

      color: var(--accent);
      font-size: 12px;
      font-weight: 850;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .page-kicker::before {
      content: "";
      width: 10px;
      height: 10px;
      border: 2px solid var(--text);
      border-radius: 2px;
      background: var(--accent);
      box-shadow: 2px 2px 0 var(--text);
    }

    .page-title {
      max-width: 760px;
      margin: 0;

      color: #ffffff;

      font-size: clamp(42px, 5vw, 62px);
      font-weight: 850;
      line-height: 0.98;
      letter-spacing: -0.055em;
    }

    /*
    |--------------------------------------------------------------------------
    | Knowledge-base homepage
    |--------------------------------------------------------------------------
    | The hero deliberately sits outside .home-content-shell so it fills
    | the whole public-site area to the right of the sidebar.
    */

    /*
    | Full-width hero
    */

    /*
    | Homepage shell
    | The normal sidebar/mobile header remain available for articles and
    | search pages, but the homepage uses its own full-width front door.
    */

    .homepage .sidebar {
      display: none;
    }

    .homepage .mobile-header {
      display: none;
    }

    .homepage .mobile-overlay {
      display: none !important;
    }

    .homepage .main {
      margin-left: 0;
    }

    /*
    | Homepage brand bar
    */

    .home-topbar {
      position: absolute;
      z-index: 4;

      top: 0;
      left: 0;
      right: 0;

      display: flex;
      align-items: center;

      height: 86px;
      padding: 0 clamp(24px, 4vw, 58px);

      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }





    .home-hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;

      width: 100%;
      min-height: 410px;

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

      margin: 0;
      padding: 126px 48px 76px;

      border: 0;
      border-radius: 0;

      /*
      | Satori Bold
      | Deep teal + cream + mustard + mint.
      | Chunky graphic shapes rather than the softer purple/blue atmosphere.
      */
      background:
        radial-gradient(
          circle at 87% 14%,
          rgba(244, 189, 69, 0.98) 0 54px,
          transparent 55px
        ),
        radial-gradient(
          circle at 87% 14%,
          transparent 0 82px,
          rgba(255, 253, 247, 0.16) 83px 85px,
          transparent 86px
        ),
        radial-gradient(
          circle at 11% 83%,
          rgba(188, 229, 212, 0.19) 0 112px,
          transparent 113px
        ),
        linear-gradient(
          135deg,
          #073b3a 0%,
          #07504c 54%,
          #0b6059 100%
        );

      color: #fffdf7;

      box-shadow:
        inset 0 -3px 0 rgba(16, 32, 31, 0.32);

      text-align: center;
    }

    /*
    | Satori Bold graphic texture:
    | cream/yellow dots + strong diagonal poster lines.
    */

    .home-hero::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;

      background:
        radial-gradient(
          circle,
          rgba(255, 253, 247, 0.20) 0 2px,
          transparent 2.5px
        ) 0 0 / 34px 34px,
        linear-gradient(
          116deg,
          transparent 0 18%,
          rgba(244, 189, 69, 0.10) 18.2% 18.8%,
          transparent 19% 100%
        ),
        linear-gradient(
          116deg,
          transparent 0 71%,
          rgba(188, 229, 212, 0.09) 71.2% 71.8%,
          transparent 72% 100%
        );

      mask-image:
        linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.55),
          rgba(0, 0, 0, 0.08) 42%,
          rgba(0, 0, 0, 0.10) 62%,
          rgba(0, 0, 0, 0.48)
        );

      opacity: 0.72;
      pointer-events: none;
    }

    /*
    | Large offset "sticker" shape along the lower edge.
    | This deliberately echoes the heavy shadows / offset blocks used
    | elsewhere in the Bold theme without putting a box around the hero.
    */

    .home-hero::after {
      content: "";
      position: absolute;
      z-index: -1;

      width: 330px;
      height: 112px;

      right: -58px;
      bottom: -34px;

      border: 3px solid #10201f;
      border-radius: 26px;

      background: #f4bd45;

      box-shadow:
        -14px -14px 0 rgba(188, 229, 212, 0.88);

      transform: rotate(-7deg);

      pointer-events: none;
    }

    .home-hero-inner {
      position: relative;
      z-index: 2;

      width: 100%;
      max-width: 840px;
      margin: 0 auto;
    }

    .home-title {
      max-width: 760px;
      margin: 0 auto;

      color: #ffffff;

      font-size: clamp(44px, 5.4vw, 66px);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.052em;

      text-wrap: balance;
    }

    .home-subtitle {
      max-width: 620px;
      margin: 17px auto 0;

      color: rgba(255, 255, 255, 0.78);

      font-size: 16px;
      font-weight: 500;
      line-height: 1.6;
    }

    /*
    | Hero search
    */

    .home-search-wrap {
      width: min(760px, 100%);
      margin: 32px auto 0;
    }

    .home-search {
      display: flex;
      align-items: center;

      width: 100%;
      min-height: 70px;

      padding: 7px;

      border: 1px solid rgba(255, 255, 255, 0.92);
      border-radius: 999px;

      background: rgba(255, 255, 255, 0.985);

      box-shadow:
        0 0 0 6px rgba(255, 253, 247, 0.11),
        0 0 0 9px rgba(244, 189, 69, 0.09),
        0 20px 46px rgba(2, 29, 28, 0.25);

      transition:
        transform 150ms ease,
        box-shadow 150ms ease;
    }

    .home-search:focus-within {
      transform: translateY(-2px);

      box-shadow:
        0 0 0 6px rgba(255, 253, 247, 0.14),
        0 0 0 10px rgba(244, 189, 69, 0.14),
        0 26px 56px rgba(2, 29, 28, 0.29);
    }

    .home-search-icon {
      width: 21px;
      height: 21px;

      flex: 0 0 auto;

      margin-left: 18px;

      color: #596b79;
    }

    .home-search-input {
      appearance: none;

      min-width: 0;
      flex: 1;

      height: 54px;
      padding: 0 15px;

      border: 0;
      outline: 0;

      background: transparent;
      color: #17263a;

      font: inherit;
      font-size: 15px;
      font-weight: 520;
    }

    .home-search-input::placeholder {
      color: #788696;
      opacity: 1;
    }

    .home-search-button {
      appearance: none;

      width: 54px;
      height: 54px;
      flex: 0 0 auto;

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

      padding: 0;

      border: 0;
      border-radius: 999px;

      border: 2px solid #10201f;

      background: #f4bd45;

      color: #10201f;

      box-shadow:
        3px 3px 0 #10201f;

      cursor: pointer;

      transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        filter 120ms ease;
    }

    .home-search-button:hover {
      transform: scale(1.045);

      box-shadow:
        5px 5px 0 #10201f;

      filter: brightness(1.03);
    }

    .home-search-button:focus-visible {
      outline: 3px solid rgba(255, 255, 255, 0.94);
      outline-offset: 3px;
    }

    .home-search-button svg {
      width: 21px;
      height: 21px;
    }

    .home-search-preview {
      opacity: 0.94;
    }

    .home-search-preview .home-search-input {
      cursor: default;
    }

    /*
    | Content beneath hero
    */

    .home-content-shell {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: 42px 48px 104px;
    }

    .home-section-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;

      margin: 0 2px 19px;
    }

    .home-section-title {
      margin: 0;

      color: var(--text);

      font-size: 21px;
      font-weight: 760;
      line-height: 1.25;
      letter-spacing: -0.025em;
    }

    .home-section-meta {
      margin: 0;

      color: var(--text-muted);

      font-size: 13px;
      font-weight: 540;
    }

    .home-topic-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 15px;
    }

    .home-topic-card {
      position: relative;

      min-width: 0;
      min-height: 154px;

      display: flex;
      flex-direction: column;
      align-items: flex-start;

      padding: 20px 20px 18px;

      border: 1px solid var(--border);
      border-radius: 17px;

      background:
        linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.98),
          rgba(255, 255, 255, 0.92)
        );

      color: inherit;

      box-shadow:
        0 1px 2px rgba(16, 33, 63, 0.025),
        0 10px 26px rgba(16, 33, 63, 0.045);

      text-decoration: none;

      transition:
        transform 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        background 140ms ease;
    }

    .home-topic-card:hover {
      transform: translateY(-3px);

      border-color: rgba(82, 104, 154, 0.22);

      background: #ffffff;

      box-shadow:
        0 2px 5px rgba(16, 33, 63, 0.04),
        0 18px 36px rgba(16, 33, 63, 0.085);
    }

    .home-topic-card:focus-visible {
      outline: 3px solid var(--accent-soft);
      outline-offset: 3px;
    }

    .home-topic-icon {
      width: 46px;
      height: 46px;

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

      margin-bottom: 18px;

      border: 0;
      border-radius: 13px;

      background:
        linear-gradient(
          135deg,
          rgba(82, 123, 255, 0.12),
          rgba(118, 87, 232, 0.11) 56%,
          rgba(24, 191, 174, 0.11)
        );

      color: #315aa8;

      box-shadow: none;
    }

    .home-topic-icon svg {
      width: 22px;
      height: 22px;
    }

    .home-topic-copy {
      min-width: 0;
      padding-right: 22px;
    }

    .home-topic-title {
      margin: 0 0 5px;

      color: var(--text);

      font-size: 16px;
      font-weight: 720;
      line-height: 1.35;
      letter-spacing: -0.018em;

      overflow-wrap: anywhere;
    }

    .home-topic-count {
      margin: 0;

      color: var(--text-muted);

      font-size: 13px;
      font-weight: 500;
      line-height: 1.4;
    }

    .home-topic-arrow {
      position: absolute;
      top: 19px;
      right: 18px;

      color: var(--text-muted);

      font-size: 18px;
      font-weight: 650;
      line-height: 1;

      transition:
        transform 120ms ease,
        color 120ms ease;
    }

    .home-topic-card:hover .home-topic-arrow {
      transform: translateX(3px);
      color: var(--accent-strong);
    }

    /*
    |--------------------------------------------------------------------------
    | Homepage theme: Professional
    |--------------------------------------------------------------------------
    */

    .theme-professional.homepage .home-topbar {
      border-bottom-color: rgba(255, 255, 255, 0.14);
    }



    .theme-professional .home-hero {
      min-height: 410px;

      border: 0;
      border-radius: 0;

      background:
        radial-gradient(
          circle at 78% 72%,
          rgba(177, 111, 255, 0.46),
          transparent 30%
        ),
        radial-gradient(
          circle at 21% 25%,
          rgba(55, 155, 255, 0.31),
          transparent 31%
        ),
        radial-gradient(
          circle at 50% 118%,
          rgba(89, 222, 207, 0.18),
          transparent 38%
        ),
        linear-gradient(
          125deg,
          #092d68 0%,
          #0b469f 42%,
          #3049bd 70%,
          #6e49ad 110%
        );

      box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    }

    .theme-professional .home-title {
      font-weight: 730;
      letter-spacing: -0.048em;
    }

    .theme-professional .home-subtitle {
      color: rgba(255, 255, 255, 0.80);
      font-weight: 450;
    }

    .theme-professional .home-search {
      border-color: rgba(255, 255, 255, 0.84);

      box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.10),
        0 0 39px rgba(158, 113, 255, 0.33),
        0 21px 50px rgba(18, 59, 143, 0.24);
    }

    .theme-professional .home-search:focus-within {
      box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.13),
        0 0 46px rgba(167, 122, 255, 0.44),
        0 27px 58px rgba(18, 59, 143, 0.26);
    }

    .theme-professional .home-search-input {
      color: #18375f;
      font-weight: 480;
    }

    .theme-professional .home-search-button {
      background:
        linear-gradient(
          135deg,
          var(--brand-blue),
          var(--brand-violet) 60%,
          var(--brand-teal)
        );

      color: #ffffff;
    }

    .theme-professional .home-content-shell {
      max-width: 1260px;
      padding: 42px 48px 104px;
    }

    .theme-professional .home-section-title {
      color: #173560;
      font-weight: 700;
    }

    .theme-professional .home-section-meta {
      font-weight: 500;
    }

    .theme-professional .home-topic-card {
      border-color: #dce5f4;

      background:
        linear-gradient(
          180deg,
          #ffffff,
          #fcfdff
        );

      box-shadow:
        0 1px 2px rgba(22, 48, 88, 0.02),
        0 10px 26px rgba(36, 84, 180, 0.045);
    }

    .theme-professional .home-topic-card:hover {
      border-color: #cbdcff;

      box-shadow:
        0 2px 5px rgba(22, 48, 88, 0.03),
        0 18px 38px rgba(36, 84, 180, 0.09);
    }

    .theme-professional .home-topic-icon {
      background:
        linear-gradient(
          135deg,
          rgba(36, 107, 254, 0.12),
          rgba(118, 87, 232, 0.11) 56%,
          rgba(24, 191, 174, 0.12)
        );

      color: var(--brand-blue-deep);
    }

    .theme-professional .home-topic-title {
      color: #173560;
      font-weight: 660;
    }

    .theme-professional .home-topic-count {
      color: #72809a;
      font-weight: 460;
    }

    .theme-professional .home-topic-arrow {
      color: #8a98b1;
    }

    .theme-professional .home-topic-card:hover .home-topic-arrow {
      color: var(--brand-blue);
    }

    /*
    |--------------------------------------------------------------------------
    | Homepage theme: Calm
    |--------------------------------------------------------------------------
    */

    .theme-calm.homepage .home-topbar {
      border-bottom-color: rgba(255, 255, 255, 0.13);
    }



    .theme-calm .home-hero {
      min-height: 390px;

      border: 0;
      border-radius: 0;

      background:
        radial-gradient(
          circle at 78% 72%,
          rgba(139, 171, 158, 0.20),
          transparent 30%
        ),
        radial-gradient(
          circle at 20% 24%,
          rgba(134, 164, 190, 0.17),
          transparent 31%
        ),
        linear-gradient(
          140deg,
          #37584e 0%,
          #4f7468 48%,
          #66877b 76%,
          #748a86 120%
        );

      box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    }

    .theme-calm .home-hero::after {
      background:
        radial-gradient(
          ellipse at 50% 0%,
          rgba(210, 225, 218, 0.22),
          rgba(177, 203, 192, 0.09) 38%,
          transparent 70%
        );
    }

    .theme-calm .home-title {
      color: #ffffff;

      font-size: clamp(41px, 5vw, 59px);
      font-weight: 650;
      letter-spacing: -0.044em;
    }

    .theme-calm .home-subtitle {
      color: rgba(255, 255, 255, 0.76);
      font-weight: 430;
    }

    .theme-calm .home-search {
      border-color: rgba(255, 255, 255, 0.78);

      background: #fffefa;

      box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.08),
        0 16px 38px rgba(42, 66, 57, 0.18);
    }

    .theme-calm .home-search:focus-within {
      box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.11),
        0 20px 44px rgba(42, 66, 57, 0.21);
    }

    .theme-calm .home-search-input {
      color: var(--text);
      font-weight: 470;
    }

    .theme-calm .home-search-button {
      background:
        linear-gradient(
          135deg,
          #527d6c,
          #73998a
        );

      color: #ffffff;

      box-shadow:
        0 8px 18px rgba(77, 118, 102, 0.20);
    }

    .theme-calm .home-content-shell {
      max-width: 1180px;
      padding: 46px 52px 108px;
    }

    .theme-calm .home-section-title {
      font-weight: 650;
    }

    .theme-calm .home-section-meta {
      font-weight: 450;
    }

    .theme-calm .home-topic-card {
      border-color: #d8e1dc;

      background: #fffefa;

      box-shadow:
        0 1px 2px rgba(54, 70, 62, 0.02),
        0 9px 23px rgba(54, 70, 62, 0.035);
    }

    .theme-calm .home-topic-card:hover {
      border-color: #c6d7cf;

      box-shadow:
        0 14px 30px rgba(54, 70, 62, 0.075);
    }

    .theme-calm .home-topic-icon {
      background: #e4eee8;
      color: var(--accent-strong);
    }

    .theme-calm .home-topic-title {
      font-weight: 620;
    }

    .theme-calm .home-topic-count {
      font-weight: 430;
    }

    .theme-calm .home-topic-arrow {
      color: #8b9891;
    }

    .theme-calm .home-topic-card:hover .home-topic-arrow {
      color: var(--accent-strong);
    }

    /*
    | Homepage responsive
    */

    @media (max-width: 1120px) {
      .home-topic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 900px) {
      .home-hero,
      .theme-professional .home-hero,
      .theme-calm .home-hero {
        min-height: 370px;
        padding: 62px 30px 66px;
      }

      .home-content-shell,
      .theme-professional .home-content-shell,
      .theme-calm .home-content-shell {
        padding: 36px 30px 84px;
      }
    }

    @media (max-width: 700px) {
      .home-topic-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .home-topbar {
        height: 72px;
        padding: 0 18px;
      }




      .home-hero,
      .theme-professional .home-hero,
      .theme-calm .home-hero {
        min-height: 0;

        margin: 0;
        padding: 108px 20px 50px;

        border-radius: 0;
      }

      .home-title,
      .theme-professional .home-title,
      .theme-calm .home-title {
        font-size: clamp(35px, 11vw, 45px);
      }

      .home-subtitle {
        margin-top: 12px;

        font-size: 14px;
        line-height: 1.55;
      }

      .home-search-wrap {
        margin-top: 25px;
      }

      .home-search {
        min-height: 60px;
        padding: 5px;
      }

      .home-search-icon {
        width: 18px;
        height: 18px;
        margin-left: 14px;
      }

      .home-search-input {
        height: 48px;
        padding: 0 10px;

        font-size: 14px;
      }

      .home-search-button {
        width: 48px;
        height: 48px;
      }

      .home-content-shell,
      .theme-professional .home-content-shell,
      .theme-calm .home-content-shell {
        padding: 30px 18px 64px;
      }

      .home-section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;

        margin-bottom: 16px;
      }

      .home-topic-card {
        min-height: 132px;
        padding: 18px;
      }

      .home-topic-icon {
        width: 42px;
        height: 42px;

        margin-bottom: 15px;
      }

      .home-topic-arrow {
        top: 18px;
        right: 17px;
      }
    }

    /*
    |--------------------------------------------------------------------------
    | Search results page
    |--------------------------------------------------------------------------
    */

    .search-results {
      width: 100%;
      max-width: var(--content-width);
    }

    .search-page-form {
      display: flex;
      align-items: center;
      gap: 12px;

      margin: 0 0 26px;
    }

    .search-page-input {
      appearance: none;

      min-width: 0;
      flex: 1;
      height: 50px;

      padding: 0 16px;

      border: 2px solid var(--text);
      border-radius: 12px;

      outline: none;

      background: var(--surface);
      color: var(--text);

      font: inherit;
      font-size: 15px;
      font-weight: 600;

      transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
    }

    .search-page-input::placeholder {
      color: var(--text-muted);
      opacity: 1;
    }

    .search-page-input:focus {
      border-color: var(--text);
      box-shadow:
        0 0 0 3px var(--accent-soft);
    }

    .search-page-button {
      appearance: none;

      height: 50px;
      padding: 0 22px;

      border: 2px solid var(--text);
      border-radius: 12px;

      background: var(--accent);
      color: var(--text);

      box-shadow: 3px 3px 0 var(--text);

      font: inherit;
      font-size: 14px;
      font-weight: 800;

      cursor: pointer;

      transition:
        transform 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
    }

    .search-page-button:hover {
      transform: translate(-1px, -1px);
      box-shadow: 4px 4px 0 var(--text);
    }

    .search-page-button:active {
      transform: translate(1px, 1px);
      box-shadow: 2px 2px 0 var(--text);
    }

    .search-page-button:focus-visible {
      outline: 3px solid var(--accent-soft);
      outline-offset: 3px;
    }

    .search-summary {
      margin: 0 0 17px;

      color: var(--text-muted);

      font-size: 14px;
      font-weight: 650;
      line-height: 1.5;
    }

    .search-result {
      position: relative;

      display: block;

      margin: 0 0 14px;
      padding: 20px 54px 20px 22px;

      border: 2px solid var(--text);
      border-radius: 14px;

      background: var(--surface);
      color: inherit;

      box-shadow: 4px 4px 0 var(--mint);

      text-decoration: none;

      transition:
        transform 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease,
        background 120ms ease;
    }

    .search-result::after {
      content: "→";

      position: absolute;
      top: 50%;
      right: 22px;

      transform: translateY(-50%);

      color: var(--accent-strong);

      font-size: 22px;
      font-weight: 850;
      line-height: 1;

      transition: transform 120ms ease;
    }

    .search-result:hover {
      transform: translateY(-2px);

      background: #ffffff;

      box-shadow: 5px 5px 0 var(--accent);
    }

    .search-result:hover::after {
      transform: translate(3px, -50%);
    }

    .search-result:focus-visible {
      outline: 3px solid var(--accent-soft);
      outline-offset: 3px;
    }

    .search-result-title {
      margin: 0 0 7px;

      color: var(--text);

      font-size: 19px;
      font-weight: 800;
      line-height: 1.28;
      letter-spacing: -0.02em;
    }

    .search-result-snippet {
      margin: 0;

      color: var(--text-secondary);

      font-size: 14px;
      font-weight: 500;
      line-height: 1.65;
    }

    .search-empty {
      display: flex;
      flex-direction: column;
      align-items: center;

      padding: 46px 28px;

      border: 2px dashed var(--border-strong);
      border-radius: var(--radius-large);

      background: var(--surface);

      text-align: center;
    }

    .search-empty-icon {
      width: 54px;
      height: 54px;

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

      margin-bottom: 18px;

      border: 2px solid var(--text);
      border-radius: 14px;

      background: var(--accent-soft);
      color: var(--text);

      box-shadow: 3px 3px 0 var(--accent);
    }

    .search-empty-icon svg {
      width: 25px;
      height: 25px;
    }

    .search-empty h2 {
      max-width: 620px;
      margin: 0 0 8px;

      color: var(--text);

      font-size: 22px;
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: -0.025em;
    }

    .search-empty p {
      max-width: 500px;
      margin: 0;

      color: var(--text-muted);

      font-size: 15px;
      line-height: 1.65;
    }

    .search-empty-neutral {
      border-style: solid;
      border-color: var(--border);
    }

    /*
    |--------------------------------------------------------------------------
    | Confluence content
    |--------------------------------------------------------------------------
    */

    .content {
      max-width: var(--content-width);
      color: var(--text-secondary);
      font-size: 17px;
      line-height: 1.78;
    }

    .content > :first-child {
      margin-top: 0 !important;
    }

    .content > :last-child {
      margin-bottom: 0 !important;
    }

    /*
    | Headings
    */

    .content h1,
    .content h2,
    .content h3,
    .content h4,
    .content h5,
    .content h6 {
      color: var(--text);
      font-weight: 800;
      letter-spacing: -0.035em;
      scroll-margin-top: 30px;
    }

    .content h1 {
      margin: 54px 0 20px;
      font-size: 34px;
      line-height: 1.15;
    }

    .content h2 {
      position: relative;
      margin: 58px 0 19px;
      padding-left: 18px;

      font-size: 28px;
      line-height: 1.2;
    }

    .content h2::before {
      content: "";
      position: absolute;
      top: 0.13em;
      bottom: 0.08em;
      left: 0;

      width: 6px;

      border-radius: 999px;
      background: var(--accent);
    }

    .content h3 {
      margin: 38px 0 13px;
      font-size: 21px;
      line-height: 1.3;
    }

    .content h4 {
      margin: 30px 0 10px;
      font-size: 18px;
      line-height: 1.35;
    }

    /*
    | Paragraphs
    */

    .content p {
      margin: 0 0 21px;
    }

    .content strong {
      color: var(--text);
      font-weight: 750;
    }

    /*
    | Links
    */

    .content a {
      color: #075f59;
      font-weight: 700;
      text-decoration-line: underline;
      text-decoration-color: var(--accent);
      text-decoration-thickness: 3px;
      text-underline-offset: 3px;

      transition:
        color 120ms ease,
        background 120ms ease;
    }

    .content a:hover {
      color: var(--text);
      background: var(--accent-soft);
    }

    /*
    | Lists
    */

    .content ul,
    .content ol {
      margin: 0 0 24px;
      padding-left: 29px;
    }

    .content li {
      margin: 7px 0;
      padding-left: 4px;
    }

    .content li::marker {
      color: #08756d;
      font-weight: 800;
    }

    .content li > ul,
    .content li > ol {
      margin-top: 7px;
      margin-bottom: 7px;
    }

    /*
    | Images
    */

    .content img {
      display: block;
      max-width: 100%;
      height: auto;

      margin: 38px auto;

      border: 2px solid var(--text);
      border-radius: var(--radius-large);

      background: #ffffff;
      box-shadow:
        var(--shadow-offset)
        var(--shadow-offset)
        0
        var(--accent);
    }

    .content .confluence-embedded-file-wrapper {
      display: block;
      margin: 38px 0;
    }

    .content .confluence-embedded-file-wrapper img {
      margin: 0 auto;
    }

    /*
    | Tables
    */

    .content .table-wrap {
      width: 100%;
      margin: 34px 0;
      overflow-x: auto;

      border: 2px solid var(--text);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: 5px 5px 0 var(--mint);
    }

    .content table {
      width: 100%;
      margin: 0;

      border-spacing: 0;
      border-collapse: separate;

      background: var(--surface);

      font-size: 14px;
      line-height: 1.55;
    }

    /* Fallback for tables without Confluence's .table-wrap wrapper. */
    .content > table {
      margin: 34px 0;
      border: 2px solid var(--text);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 5px 5px 0 var(--mint);
    }

    .content th,
    .content td {
      padding: 13px 16px;

      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);

      text-align: left;
      vertical-align: top;
    }

    .content th:last-child,
    .content td:last-child {
      border-right: 0;
    }

    .content tr:last-child td {
      border-bottom: 0;
    }

    .content th {
      background: var(--sidebar-background);
      color: #ffffff;

      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.045em;
      text-transform: uppercase;
    }

    .content tbody tr:nth-child(even) td {
      background: #fbfdfc;
    }

    /*
    | Quotes
    */

    .content blockquote {
      margin: 34px 0;
      padding: 22px 24px;

      border: 2px solid var(--text);
      border-left: 8px solid var(--accent);
      border-radius: var(--radius);

      background: var(--accent-soft);
      color: var(--text);

      box-shadow: 4px 4px 0 var(--text);
    }

    .content blockquote p:last-child {
      margin-bottom: 0;
    }

    /*
    | Inline code
    */

    .content code {
      padding: 2px 6px;

      border: 1px solid #b8c4c0;
      border-radius: 5px;

      background: #eef6f3;
      color: #075f59;

      font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

      font-size: 0.88em;
      font-weight: 650;
    }

    /*
    | Code blocks
    */

    .content pre {
      margin: 32px 0;
      padding: 22px 24px;

      overflow-x: auto;

      border: 2px solid var(--text);
      border-radius: var(--radius);

      background: #101b1a;
      color: #f5f7f6;

      box-shadow: 5px 5px 0 var(--accent);

      font-size: 13px;
      line-height: 1.65;
    }

    .content pre code {
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font-size: inherit;
    }

    /*
    | IMPORTANT: Confluence code macros also carry the generic .panel class.
    | Keep them out of the callout styling so we don't get a box-in-a-box.
    */

    .content .code.panel {
      margin: 32px 0 !important;
      padding: 0 !important;

      overflow: visible !important;

      border: 0 !important;
      border-radius: 0 !important;

      background: transparent !important;
      box-shadow: none !important;
    }

    .content .code.panel .panelContent,
    .content .code.panel .codeContent {
      padding: 0 !important;
      background: transparent !important;
    }

    .content .code.panel pre {
      margin: 0;
    }

    /*
    | Horizontal rules
    */

    .content hr {
      height: 2px;
      margin: 48px 0;

      border: 0;
      background: var(--text);
      opacity: 0.12;
    }

    /*
    |--------------------------------------------------------------------------
    | Confluence callouts
    |--------------------------------------------------------------------------
    */

    /* Native Confluence information macros */
    .content .confluence-information-macro {
      position: relative;

      margin: 34px 0 !important;
      padding: 0 !important;

      overflow: hidden;

      border: 2px solid var(--text) !important;
      border-left: 8px solid var(--accent) !important;
      border-radius: var(--radius) !important;

      background: #fff7d8 !important;
      color: var(--text);

      box-shadow: 5px 5px 0 var(--text);
    }

    .content .confluence-information-macro-icon {
      display: none !important;
    }

    .content .confluence-information-macro-body {
      padding: 18px 21px !important;
    }

    .content .confluence-information-macro-body > :first-child {
      margin-top: 0 !important;
    }

    .content .confluence-information-macro-body > :last-child {
      margin-bottom: 0 !important;
    }

    .content .confluence-information-macro-warning {
      border-left-color: var(--danger) !important;
      background: var(--danger-soft) !important;
      box-shadow: 5px 5px 0 var(--danger);
    }

    .content .confluence-information-macro-tip {
      border-left-color: #31a37c !important;
      background: var(--mint-soft) !important;
      box-shadow: 5px 5px 0 var(--mint);
    }

    .content .confluence-information-macro-information {
      border-left-color: #4e91e6 !important;
      background: #edf5ff !important;
      box-shadow: 5px 5px 0 #a9cdf7;
    }

    /*
    | Older/generic Confluence panels.
    | Exclude .code panels: those are handled above.
    */

    .content .panel:not(.code) {
      margin: 34px 0 !important;
      padding: 0 !important;

      overflow: hidden;

      border: 2px solid var(--text) !important;
      border-left: 8px solid var(--accent) !important;
      border-radius: var(--radius) !important;

      background: #fff7d8 !important;
      box-shadow: 5px 5px 0 var(--text);
    }

    .content .panel:not(.code) .panelContent {
      padding: 18px 21px !important;
      background: transparent !important;
    }

    .content .panel:not(.code) .panelContent > :first-child {
      margin-top: 0 !important;
    }

    .content .panel:not(.code) .panelContent > :last-child {
      margin-bottom: 0 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Confluence layout cleanup
    |--------------------------------------------------------------------------
    */

    .content .contentLayout2,
    .content .columnLayout,
    .content .cell,
    .content .innerCell {
      max-width: 100% !important;
    }

    .content .columnLayout {
      width: 100% !important;
    }

    .content .innerCell {
      padding: 0 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Mobile navigation
    |--------------------------------------------------------------------------
    */

    .mobile-menu-button {
      appearance: none;

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

      width: 40px;
      height: 40px;
      padding: 0;

      border: 2px solid var(--text);
      border-radius: 9px;

      background: var(--accent);
      color: var(--text);
      box-shadow: 3px 3px 0 var(--text);

      cursor: pointer;
    }

    .mobile-menu-button svg {
      width: 19px;
      height: 19px;
    }

    .mobile-overlay {
      display: none;
    }

    /*
    |--------------------------------------------------------------------------
    | Responsive
    |--------------------------------------------------------------------------
    */

    @media (max-width: 900px) {
      .sidebar {
        transform: translateX(-100%);
        width: min(330px, 88vw);

        transition: transform 180ms ease;

        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.18);
      }

      body.sidebar-open .sidebar {
        transform: translateX(0);
      }

      .main {
        margin-left: 0;
      }

      .mobile-header {
        position: sticky;
        top: 0;
        z-index: 30;

        height: var(--header-height);

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 18px;

        border-bottom: 2px solid var(--text);

        background: var(--sidebar-background);
      }


      .content-shell {
        padding: 42px 30px 84px;
      }

      .mobile-overlay {
        position: fixed;
        inset: 0;
        z-index: 35;

        background: rgba(16, 32, 31, 0.45);
        backdrop-filter: blur(2px);
      }

      body.sidebar-open .mobile-overlay {
        display: block;
      }
    }

    @media (max-width: 600px) {
      .content-shell {
        padding: 28px 18px 64px;
      }

      .page-header {
        margin-bottom: 40px;
        padding: 30px 26px 33px;

        border-radius: 16px;
        box-shadow: 4px 4px 0 var(--accent);
      }

      .page-title {
        font-size: clamp(36px, 11vw, 46px);
      }

      .page-kicker {
        margin-bottom: 12px;
      }

      .search-page-form {
        align-items: stretch;
        flex-direction: column;
      }

      .search-page-input {
        width: 100%;
        height: 50px;
        min-height: 50px;
        flex: none;
      }

      .search-page-button {
        width: 100%;
        height: 50px;
      }

      .search-result {
        padding: 18px 48px 18px 18px;
      }

      .search-result::after {
        right: 18px;
      }

      .search-empty {
        padding: 38px 22px;
      }

      .content {
        font-size: 16px;
        line-height: 1.72;
      }

      .content h1 {
        font-size: 29px;
      }

      .content h2 {
        margin-top: 44px;
        padding-left: 15px;
        font-size: 24px;
      }

      .content h2::before {
        width: 5px;
      }

      .content h3 {
        font-size: 20px;
      }

      .content .table-wrap {
        max-width: 100%;
        white-space: nowrap;
        box-shadow: 3px 3px 0 var(--mint);
      }

      .content > table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
      }

      .content img {
        margin: 30px auto;
        border-radius: 12px;
        box-shadow: 4px 4px 0 var(--accent);
      }

      .content pre,
      .content .code.panel {
        margin: 27px 0 !important;
      }

      .content pre {
        padding: 18px 19px;
        box-shadow: 4px 4px 0 var(--accent);
      }

      .content .confluence-information-macro,
      .content .panel:not(.code),
      .content blockquote {
        box-shadow: 4px 4px 0 var(--text);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition-duration: 0.01ms !important;
      }
    }

    /*
    |--------------------------------------------------------------------------
    | Theme: Satori Professional
    |--------------------------------------------------------------------------
    | More expressive, customer-facing visual system:
    | clean documentation structure + confident Satori colour.
    */

    .theme-professional {
      --background: #fbfcff;
      --surface: #ffffff;

      --sidebar-background: #f7f9ff;
      --sidebar-background-deep: #f7f9ff;
      --sidebar-text: #10213f;
      --sidebar-muted: #6d7892;
      --sidebar-border: #e3e9f5;

      --text: #10213f;
      --text-secondary: #485872;
      --text-muted: #72809a;

      --border: #dfe6f1;
      --border-strong: #cbd7e8;

      --accent: #246bfe;
      --accent-strong: #1554d1;
      --accent-soft: #eaf1ff;

      --brand-blue: #246bfe;
      --brand-blue-deep: #123b8f;
      --brand-teal: #18bfae;
      --brand-teal-deep: #0b8278;
      --brand-violet: #7657e8;
      --brand-lilac: #f0edff;
      --brand-sky: #edf5ff;
      --brand-mint: #e9fbf7;
      --brand-peach: #fff1e8;

      --danger: #d84b5f;
      --danger-soft: #fff0f2;

      --mint: #d8f5ee;
      --mint-soft: #effaf7;

      --sidebar-width: 286px;
      --content-width: 830px;

      --radius: 12px;
      --radius-large: 22px;
      --shadow-offset: 0px;

      background:
        radial-gradient(circle at 78% 4%, rgba(118, 87, 232, 0.07), transparent 28rem),
        radial-gradient(circle at 40% 0%, rgba(36, 107, 254, 0.06), transparent 24rem),
        var(--background);
    }

    .theme-professional .sidebar {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,249,255,0.98)),
        var(--sidebar-background);
      border-right: 1px solid var(--sidebar-border);
      box-shadow: 10px 0 30px rgba(27, 55, 100, 0.035);
    }






    .theme-professional .docs-search-wrapper {
      padding: 18px 14px 0;
    }

    .theme-professional .docs-search-input {
      border: 1px solid #dce5f4;
      background: #ffffff;
      color: var(--text);
      box-shadow: 0 2px 7px rgba(27, 55, 100, 0.04);
      font-weight: 500;
    }

    .theme-professional .docs-search-input::placeholder {
      color: #7b88a1;
    }

    .theme-professional .docs-search-icon {
      color: #7b88a1;
    }

    .theme-professional .docs-search-input:hover {
      border-color: #c8d7ed;
    }

    .theme-professional .docs-search-input:focus {
      border-color: var(--brand-blue);
      background: #ffffff;
      box-shadow:
        0 0 0 3px rgba(36, 107, 254, 0.10),
        0 3px 10px rgba(27, 55, 100, 0.05);
    }

    .theme-professional .docs-search:focus-within .docs-search-icon {
      color: var(--brand-blue);
    }

    .theme-professional .nav-wrapper {
      padding: 20px 14px 26px;
    }

    .theme-professional .nav-label {
      margin: 0 10px 12px;
      color: var(--brand-blue);
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.11em;
    }

    .theme-professional .nav {
      gap: 3px;
    }

    .theme-professional .nav a {
      padding: 8px 10px;
      border: 1px solid transparent;
      border-radius: 9px;
      color: var(--text-secondary);
      font-weight: 500;
      transition:
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        transform 120ms ease;
    }

    .theme-professional .nav a:hover {
      transform: translateX(2px);
      background: #edf3ff;
      border-color: #dce8ff;
      color: var(--brand-blue-deep);
    }

    .theme-professional .nav a.active {
      background:
        linear-gradient(90deg, rgba(36,107,254,0.12), rgba(24,191,174,0.10));
      border: 1px solid #cfe0ff;
      color: var(--brand-blue-deep);
      box-shadow: inset 3px 0 0 var(--brand-teal);
      font-weight: 650;
    }

    .theme-professional .nav-folder {
      color: #60708d;
      font-weight: 700;
    }

    .theme-professional .sidebar-footer {
      padding: 17px 22px;
      border-top: 1px solid var(--sidebar-border);
      color: var(--text-muted);
      background: rgba(255,255,255,0.7);
      font-weight: 450;
    }

    .theme-professional .sidebar-footer::before {
      display: none;
    }

    .theme-professional .search-page-input {
      border: 1px solid #d6e2f2;
      border-radius: 11px;
      background: #ffffff;
      color: var(--text);
      box-shadow: 0 2px 8px rgba(27, 55, 100, 0.035);
      font-weight: 500;
    }

    .theme-professional .search-page-input:focus {
      border-color: var(--brand-blue);
      box-shadow:
        0 0 0 3px rgba(36, 107, 254, 0.10),
        0 3px 10px rgba(27, 55, 100, 0.04);
    }

    .theme-professional .search-page-button {
      border: 0;
      border-radius: 11px;
      background:
        linear-gradient(135deg, var(--brand-blue), #5d52d5 70%);
      color: #ffffff;
      box-shadow: 0 8px 18px rgba(36, 107, 254, 0.18);
      font-weight: 650;
    }

    .theme-professional .search-page-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 11px 24px rgba(36, 107, 254, 0.22);
    }

    .theme-professional .search-page-button:active {
      transform: translateY(0);
      box-shadow: 0 6px 14px rgba(36, 107, 254, 0.16);
    }

    .theme-professional .search-summary {
      color: var(--text-muted);
      font-weight: 500;
    }

    .theme-professional .search-result {
      margin-bottom: 12px;
      border: 1px solid #dce5f4;
      border-radius: 14px;
      background: rgba(255,255,255,0.92);
      box-shadow:
        0 2px 5px rgba(22, 48, 88, 0.025),
        0 10px 26px rgba(36, 84, 180, 0.045);
    }

    .theme-professional .search-result::after {
      color: var(--brand-blue);
      font-weight: 700;
    }

    .theme-professional .search-result:hover {
      transform: translateY(-2px);
      border-color: #cbdcff;
      background:
        linear-gradient(
          90deg,
          rgba(36,107,254,0.035),
          rgba(24,191,174,0.025)
        ),
        #ffffff;
      box-shadow:
        0 3px 8px rgba(22, 48, 88, 0.035),
        0 16px 34px rgba(36, 84, 180, 0.08);
    }

    .theme-professional .search-result-title {
      color: #173560;
      font-size: 18px;
      font-weight: 680;
    }

    .theme-professional .search-result-snippet {
      color: #63728b;
      font-weight: 450;
    }

    .theme-professional .search-empty {
      border: 1px solid #dce5f4;
      background:
        radial-gradient(
          circle at 50% 0%,
          rgba(36,107,254,0.055),
          transparent 14rem
        ),
        #ffffff;
      box-shadow: 0 14px 34px rgba(31, 61, 110, 0.045);
    }

    .theme-professional .search-empty-icon {
      border: 0;
      border-radius: 15px;
      background:
        linear-gradient(
          135deg,
          rgba(36,107,254,0.12),
          rgba(118,87,232,0.11) 56%,
          rgba(24,191,174,0.12)
        );
      color: var(--brand-blue-deep);
      box-shadow: none;
    }

    .theme-professional .search-empty h2 {
      color: #173560;
      font-weight: 680;
    }

    .theme-professional .main {
      background:
        radial-gradient(circle at 86% 0%, rgba(24,191,174,0.07), transparent 24rem),
        radial-gradient(circle at 58% 0%, rgba(118,87,232,0.06), transparent 24rem);
    }

    .theme-professional .content-shell {
      max-width: calc(var(--content-width) + 150px);
      padding: 64px 64px 104px;
    }

    .theme-professional .page-header {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      margin-bottom: 48px;
      padding: 42px 44px 46px;
      border: 0;
      border-radius: var(--radius-large);
      background:
        linear-gradient(125deg, #123b8f 0%, #245bd8 48%, #6257d9 78%, #168f93 125%);
      color: #ffffff;
      box-shadow:
        0 2px 4px rgba(16, 33, 63, 0.08),
        0 24px 54px rgba(36, 84, 180, 0.16);
    }

    .theme-professional .page-header::before {
      content: "";
      position: absolute;
      z-index: -1;
      width: 240px;
      height: 240px;
      right: -54px;
      top: -90px;
      border-radius: 50%;
      background: rgba(117, 229, 218, 0.17);
      box-shadow:
        -92px 96px 0 18px rgba(255,255,255,0.045),
        -18px 158px 0 2px rgba(255,255,255,0.04);
    }

    .theme-professional .page-header::after {
      content: "";
      position: absolute;
      z-index: -1;
      left: 36%;
      bottom: -96px;
      width: 190px;
      height: 190px;
      border-radius: 44% 56% 48% 52%;
      background: rgba(24,191,174,0.10);
      transform: rotate(22deg);
    }

    .theme-professional .page-kicker {
      width: fit-content;
      margin-bottom: 14px;
      padding: 6px 10px;
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 999px;
      background: rgba(255,255,255,0.10);
      color: #dffbf6;
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.1em;
      backdrop-filter: blur(8px);
    }

    .theme-professional .page-kicker::before {
      display: block;
      width: 7px;
      height: 7px;
      border: 0;
      border-radius: 999px;
      background: #62e4d4;
      box-shadow: none;
    }

    .theme-professional .page-title {
      max-width: 760px;
      color: #ffffff;
      font-size: clamp(38px, 4.6vw, 54px);
      font-weight: 760;
      line-height: 1.04;
      letter-spacing: -0.045em;
      text-wrap: balance;
    }

    .theme-professional .content {
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.72;
    }

    .theme-professional .content h1,
    .theme-professional .content h2,
    .theme-professional .content h3,
    .theme-professional .content h4,
    .theme-professional .content h5,
    .theme-professional .content h6 {
      color: var(--text);
      font-weight: 700;
      letter-spacing: -0.028em;
    }

    .theme-professional .content h1 {
      margin: 48px 0 18px;
      font-size: 32px;
      line-height: 1.2;
    }

    .theme-professional .content h2 {
      position: relative;
      margin: 44px 0 15px;
      padding-left: 16px;
      font-size: 25px;
      line-height: 1.28;
    }

    .theme-professional .content h2::before {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      top: 0.14em;
      bottom: 0.12em;
      width: 5px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--brand-blue), var(--brand-teal));
    }

    .theme-professional .content h3 {
      margin: 34px 0 12px;
      font-size: 20px;
    }

    .theme-professional .content h4 {
      margin: 28px 0 10px;
      font-size: 17px;
    }

    .theme-professional .content p {
      margin-bottom: 20px;
    }

    .theme-professional .content a {
      color: var(--accent-strong);
      font-weight: 600;
      text-decoration-color: #8fded5;
      text-decoration-thickness: 2px;
      text-underline-offset: 3px;
    }

    .theme-professional .content a:hover {
      color: var(--brand-teal-deep);
      background: #effbf8;
      text-decoration-color: var(--brand-teal);
    }

    .theme-professional .content li::marker {
      color: var(--brand-teal);
      font-weight: 700;
    }

    .theme-professional .content img {
      margin: 32px auto;
      border: 1px solid #d7e3f4;
      border-radius: 16px;
      background: #ffffff;
      box-shadow:
        0 2px 4px rgba(20, 46, 90, 0.04),
        0 18px 42px rgba(36, 107, 254, 0.09);
    }

    .theme-professional .content .confluence-embedded-file-wrapper {
      margin: 32px 0;
    }

    .theme-professional .content .table-wrap {
      margin: 30px 0;
      border: 1px solid #d9e3f0;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 10px 28px rgba(31, 61, 110, 0.055);
    }

    .theme-professional .content > table {
      margin: 30px 0;
      border: 1px solid #d9e3f0;
      border-radius: 14px;
      box-shadow: 0 10px 28px rgba(31, 61, 110, 0.055);
    }

    .theme-professional .content th {
      background: linear-gradient(180deg, #f1f6ff, #edf4ff);
      color: #18345f;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
    }

    .theme-professional .content tbody tr:nth-child(even) td {
      background: #fbfdff;
    }

    .theme-professional .content blockquote {
      margin: 30px 0;
      padding: 20px 22px;
      border: 1px solid #cfeae4;
      border-left: 5px solid var(--brand-teal);
      border-radius: 0 14px 14px 0;
      background:
        linear-gradient(90deg, #edfbf8 0%, #f8fffd 100%);
      color: #355b59;
      box-shadow: none;
    }

    .theme-professional .content code {
      border: 1px solid #d9e3f5;
      border-radius: 6px;
      background: #f1f5ff;
      color: #304fc7;
      font-weight: 500;
    }

    .theme-professional .content pre {
      margin: 30px 0;
      padding: 21px 23px;
      border: 0;
      border-top: 4px solid var(--brand-teal);
      border-radius: 14px;
      background:
        linear-gradient(135deg, #10213f, #172b53);
      color: #eef4ff;
      box-shadow: 0 16px 36px rgba(16, 33, 63, 0.14);
    }

    .theme-professional .content .code.panel {
      margin: 30px 0 !important;
    }

    .theme-professional .content hr {
      height: 1px;
      margin: 44px 0;
      border: 0;
      background: linear-gradient(90deg, #dbe5f4, #cfeee8, #e4defe);
      opacity: 1;
    }

    .theme-professional .content .confluence-information-macro,
    .theme-professional .content .panel:not(.code) {
      margin: 30px 0 !important;
      border: 1px solid #dce5f4 !important;
      border-left: 5px solid var(--brand-blue) !important;
      border-radius: 14px !important;
      background: var(--brand-sky) !important;
      box-shadow: none;
    }

    .theme-professional .content .confluence-information-macro-warning {
      border-color: #f3cbd1 !important;
      border-left-color: #d84b5f !important;
      background: #fff4f5 !important;
    }

    .theme-professional .content .confluence-information-macro-tip {
      border-color: #cfece5 !important;
      border-left-color: var(--brand-teal) !important;
      background: var(--brand-mint) !important;
    }

    .theme-professional .content .confluence-information-macro-information {
      border-color: #d9d4fa !important;
      border-left-color: var(--brand-violet) !important;
      background: var(--brand-lilac) !important;
    }

    .theme-professional .mobile-menu-button {
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.13);
      color: #ffffff;
      box-shadow: none;
      backdrop-filter: blur(8px);
    }

    @media (max-width: 900px) {
      .theme-professional .mobile-header {
        border-bottom: 0;
        background:
          linear-gradient(100deg, #123b8f, #245bd8 58%, #5d52d5);
        box-shadow: 0 8px 24px rgba(18, 59, 143, 0.14);
      }

    }

    @media (max-width: 600px) {
      .theme-professional .content-shell {
        padding: 28px 18px 72px;
      }

      .theme-professional .page-header {
        margin-bottom: 34px;
        padding: 30px 26px 34px;
        border-radius: 18px;
        box-shadow: 0 18px 36px rgba(36, 84, 180, 0.14);
      }

      .theme-professional .page-title {
        font-size: 35px;
      }
    }



    /*
    |--------------------------------------------------------------------------
    | Theme: Satori Calm
    |--------------------------------------------------------------------------
    */

    .theme-calm {
      --background: #f8f7f2;
      --surface: #fffefa;

      --sidebar-background: #f0f1eb;
      --sidebar-background-deep: #f0f1eb;
      --sidebar-text: #26332e;
      --sidebar-muted: #78827d;
      --sidebar-border: #d9ddd7;

      --text: #27332e;
      --text-secondary: #5c6963;
      --text-muted: #7a8580;

      --border: #d9ddd7;
      --border-strong: #bcc6c0;

      --accent: #6f9485;
      --accent-strong: #4d7666;
      --accent-soft: #e4eee8;

      --danger: #c7776c;
      --danger-soft: #f8eeeb;

      --mint: #dbe8df;
      --mint-soft: #edf4ef;

      --sidebar-width: 290px;
      --content-width: 800px;

      --radius: 16px;
      --radius-large: 22px;
      --shadow-offset: 0px;
    }

    .theme-calm {
      background: var(--background);
    }

    .theme-calm .sidebar {
      background: var(--sidebar-background);
      border-right: 1px solid var(--border);
    }






    .theme-calm .docs-search-wrapper {
      padding: 20px 18px 0;
    }

    .theme-calm .docs-search-input {
      border: 1px solid #d7ddd9;
      background: #fffefa;
      color: var(--text);
      box-shadow: none;
      font-weight: 500;
    }

    .theme-calm .docs-search-input::placeholder {
      color: var(--text-muted);
    }

    .theme-calm .docs-search-icon {
      color: var(--text-muted);
    }

    .theme-calm .docs-search-input:focus {
      border-color: var(--accent);
      background: #ffffff;
      box-shadow:
        0 0 0 3px rgba(111, 148, 133, 0.11);
    }

    .theme-calm .docs-search:focus-within .docs-search-icon {
      color: var(--accent-strong);
    }

    .theme-calm .nav-wrapper {
      padding: 22px 18px 30px;
    }

    .theme-calm .nav-label {
      margin: 0 12px 12px;
      color: var(--text-muted);
      font-weight: 650;
      letter-spacing: 0.1em;
    }

    .theme-calm .nav {
      gap: 4px;
    }

    .theme-calm .nav a {
      padding: 9px 12px;
      border: 0;
      border-radius: 10px;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
    }

    .theme-calm .nav a:hover {
      transform: none;
      background: rgba(111, 148, 133, 0.08);
      color: var(--text);
    }

    .theme-calm .nav a.active {
      background: var(--accent-soft);
      border: 0;
      color: var(--accent-strong);
      box-shadow: none;
      font-weight: 650;
    }

    .theme-calm .sidebar-footer {
      padding: 18px 24px;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-weight: 400;
    }

    .theme-calm .sidebar-footer::before {
      display: none;
    }

    .theme-calm .search-page-input {
      border: 1px solid #d4e1db;
      border-radius: 12px;
      background: #fffefa;
      color: var(--text);
      box-shadow: none;
      font-weight: 500;
    }

    .theme-calm .search-page-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(111, 148, 133, 0.11);
    }

    .theme-calm .search-page-button {
      border: 0;
      border-radius: 12px;
      background: var(--accent-strong);
      color: #ffffff;
      box-shadow: none;
      font-weight: 600;
    }

    .theme-calm .search-page-button:hover {
      transform: translateY(-1px);
      background: #416d5d;
      box-shadow: 0 8px 20px rgba(70, 105, 92, 0.12);
    }

    .theme-calm .search-page-button:active {
      transform: translateY(0);
      box-shadow: none;
    }

    .theme-calm .search-summary {
      color: var(--text-muted);
      font-weight: 500;
    }

    .theme-calm .search-result {
      margin-bottom: 12px;
      border: 1px solid #d8e1dc;
      border-radius: 15px;
      background: #fffefa;
      box-shadow: none;
    }

    .theme-calm .search-result::after {
      color: var(--accent-strong);
      font-weight: 650;
    }

    .theme-calm .search-result:hover {
      transform: translateY(-1px);
      border-color: #c6d7cf;
      background: #ffffff;
      box-shadow: 0 12px 28px rgba(54, 70, 62, 0.065);
    }

    .theme-calm .search-result-title {
      color: var(--text);
      font-size: 18px;
      font-weight: 650;
    }

    .theme-calm .search-result-snippet {
      color: var(--text-secondary);
      font-weight: 450;
    }

    .theme-calm .search-empty {
      border: 1px solid #d8e1dc;
      background:
        linear-gradient(
          180deg,
          rgba(228,238,232,0.42),
          rgba(255,254,250,0.92)
        );
      box-shadow: none;
    }

    .theme-calm .search-empty-icon {
      border: 0;
      border-radius: 16px;
      background: #e4eee8;
      color: var(--accent-strong);
      box-shadow: none;
    }

    .theme-calm .search-empty h2 {
      color: var(--text);
      font-weight: 650;
    }

    .theme-calm .content-shell {
      max-width: calc(var(--content-width) + 160px);
      padding: 74px 72px 120px;
    }

    .theme-calm .page-header {
      margin-bottom: 56px;
      padding: 38px 42px 40px;
      border: 1px solid #dce3de;
      border-radius: var(--radius-large);
      background: #eef3ef;
      color: var(--text);
      box-shadow: none;
    }

    .theme-calm .page-header::after {
      display: none;
    }

    .theme-calm .page-kicker {
      margin-bottom: 14px;
      color: var(--accent-strong);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: 0.11em;
    }

    .theme-calm .page-kicker::before {
      width: 8px;
      height: 8px;
      border: 0;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: none;
    }

    .theme-calm .page-title {
      max-width: 720px;
      color: var(--text);
      font-size: clamp(38px, 4.7vw, 52px);
      font-weight: 680;
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .theme-calm .content {
      color: var(--text-secondary);
      font-size: 17px;
      line-height: 1.85;
    }

    .theme-calm .content h1,
    .theme-calm .content h2,
    .theme-calm .content h3,
    .theme-calm .content h4,
    .theme-calm .content h5,
    .theme-calm .content h6 {
      color: var(--text);
      font-weight: 650;
      letter-spacing: -0.025em;
    }

    .theme-calm .content h1 {
      margin: 58px 0 20px;
      font-size: 32px;
    }

    .theme-calm .content h2 {
      margin: 56px 0 18px;
      padding-left: 0;
      font-size: 27px;
      line-height: 1.28;
    }

    .theme-calm .content h2::before {
      display: none;
    }

    .theme-calm .content h3 {
      margin: 40px 0 13px;
      font-size: 21px;
    }

    .theme-calm .content h4 {
      margin: 32px 0 11px;
      font-size: 18px;
    }

    .theme-calm .content p {
      margin-bottom: 23px;
    }

    .theme-calm .content a {
      color: var(--accent-strong);
      font-weight: 600;
      text-decoration-thickness: 1px;
      text-decoration-color: #a9c3b8;
    }

    .theme-calm .content a:hover {
      color: #355c4d;
      background: transparent;
      text-decoration-color: #6f9485;
    }

    .theme-calm .content li {
      margin: 8px 0;
    }

    .theme-calm .content li::marker {
      color: var(--accent);
      font-weight: 600;
    }

    .theme-calm .content img {
      margin: 40px auto;
      border: 1px solid #dce2de;
      border-radius: 18px;
      box-shadow: 0 14px 34px rgba(54, 70, 62, 0.07);
    }

    .theme-calm .content .confluence-embedded-file-wrapper {
      margin: 40px 0;
    }

    .theme-calm .content .table-wrap {
      margin: 34px 0;
      border: 1px solid #d7ddd9;
      border-radius: 14px;
      box-shadow: none;
    }

    .theme-calm .content > table {
      margin: 34px 0;
      border: 1px solid #d7ddd9;
      border-radius: 14px;
      box-shadow: none;
    }

    .theme-calm .content th {
      background: #eaf0ec;
      color: #34433c;
      font-size: 13px;
      font-weight: 650;
      letter-spacing: 0;
      text-transform: none;
    }

    .theme-calm .content td {
      background: #fffefa;
    }

    .theme-calm .content tbody tr:nth-child(even) td {
      background: #fafaf6;
    }

    .theme-calm .content blockquote {
      margin: 34px 0;
      padding: 18px 22px;
      border: 0;
      border-left: 4px solid #91ad9f;
      border-radius: 0 12px 12px 0;
      background: #eef3ef;
      color: var(--text-secondary);
      box-shadow: none;
    }

    .theme-calm .content code {
      border: 1px solid #d7dfda;
      background: #eef3ef;
      color: #456a5b;
      font-weight: 500;
    }

    .theme-calm .content pre {
      margin: 34px 0;
      padding: 22px 24px;
      border: 0;
      border-radius: 14px;
      background: #26332e;
      color: #f2f5f3;
      box-shadow: none;
    }

    .theme-calm .content .code.panel {
      margin: 34px 0 !important;
    }

    .theme-calm .content hr {
      height: 1px;
      margin: 50px 0;
      background: var(--border);
      opacity: 1;
    }

    .theme-calm .content .confluence-information-macro,
    .theme-calm .content .panel:not(.code) {
      margin: 34px 0 !important;
      border: 1px solid #d8e0db !important;
      border-left: 4px solid #8daa9d !important;
      border-radius: 14px !important;
      background: #eef4f0 !important;
      box-shadow: none;
    }

    .theme-calm .content .confluence-information-macro-warning {
      border-left-color: #c7776c !important;
      background: #f8eeeb !important;
      box-shadow: none;
    }

    .theme-calm .content .confluence-information-macro-tip {
      border-left-color: #6f9485 !important;
      background: #edf4ef !important;
      box-shadow: none;
    }

    .theme-calm .content .confluence-information-macro-information {
      border-left-color: #819da6 !important;
      background: #eef3f4 !important;
      box-shadow: none;
    }

    .theme-calm .mobile-menu-button {
      border: 1px solid var(--border);
      background: #e4eee8;
      color: var(--text);
      box-shadow: none;
    }

    @media (max-width: 900px) {
      .theme-calm .mobile-header {
        border-bottom: 1px solid var(--border);
        background: rgba(240, 241, 235, 0.96);
        backdrop-filter: blur(12px);
      }

    }

    @media (max-width: 600px) {
      .theme-calm .content-shell {
        padding: 30px 20px 72px;
      }

      .theme-calm .page-header {
        margin-bottom: 42px;
        padding: 28px 24px 30px;
        border-radius: 16px;
        box-shadow: none;
      }

      .theme-calm .page-title {
        font-size: 36px;
      }
    }

    /*
    |--------------------------------------------------------------------------
    | Shared reading rhythm
    |--------------------------------------------------------------------------
    | Keep the three themes visually different, but give all of them the same
    | tighter documentation spacing. Confluence often wraps list-item text in
    | <p> tags, so the li > p rule is particularly important.
    */

    .content {
      line-height: 1.68;
    }

    .content h1 {
      margin-top: 42px;
      margin-bottom: 14px;
    }

    .content h2 {
      margin-top: 38px;
      margin-bottom: 12px;
    }

    .content h3 {
      margin-top: 28px;
      margin-bottom: 9px;
    }

    .content h4 {
      margin-top: 24px;
      margin-bottom: 8px;
    }

    .content p {
      margin-bottom: 16px;
    }

    .content ul,
    .content ol {
      margin-bottom: 18px;
    }

    .content li {
      margin-top: 3px;
      margin-bottom: 3px;
    }

    /* Confluence commonly renders bullets as <li><p>Text</p></li>.
       Without this, paragraph spacing makes every bullet look double-spaced. */
    .content li > p {
      margin-top: 0;
      margin-bottom: 0;
    }

    .content li > ul,
    .content li > ol {
      margin-top: 5px;
      margin-bottom: 5px;
    }

    @media (max-width: 600px) {
      .content h1 {
        margin-top: 36px;
        margin-bottom: 12px;
      }

      .content h2 {
        margin-top: 34px;
        margin-bottom: 11px;
      }

      .content h3 {
        margin-top: 25px;
        margin-bottom: 8px;
      }

      .content h4 {
        margin-top: 21px;
        margin-bottom: 7px;
      }

      .content p {
        margin-bottom: 14px;
      }

      .content ul,
      .content ol {
        margin-bottom: 16px;
      }
    }

    /*
|--------------------------------------------------------------------------
| Shared content spacing
|--------------------------------------------------------------------------
| All themes use the same reading rhythm.
| Themes change colour, shape, typography and decoration — not spacing.
*/

.theme-professional .content,
.theme-calm .content {
  line-height: 1.68;
}

.theme-professional .content h1,
.theme-calm .content h1 {
  margin-top: 42px;
  margin-bottom: 14px;
}

.theme-professional .content h2,
.theme-calm .content h2 {
  margin-top: 38px;
  margin-bottom: 12px;
}

.theme-professional .content h3,
.theme-calm .content h3 {
  margin-top: 28px;
  margin-bottom: 9px;
}

.theme-professional .content h4,
.theme-calm .content h4 {
  margin-top: 24px;
  margin-bottom: 8px;
}

.theme-professional .content p,
.theme-calm .content p {
  margin-bottom: 16px;
}

.theme-professional .content ul,
.theme-professional .content ol,
.theme-calm .content ul,
.theme-calm .content ol {
  margin-bottom: 18px;
}

.theme-professional .content li,
.theme-calm .content li {
  margin-top: 3px;
  margin-bottom: 3px;
}

/* Confluence often renders bullets as <li><p>...</p></li>. */
.theme-professional .content li > p,
.theme-calm .content li > p {
  margin-top: 0;
  margin-bottom: 0;
}

.theme-professional .content li > ul,
.theme-professional .content li > ol,
.theme-calm .content li > ul,
.theme-calm .content li > ol {
  margin-top: 5px;
  margin-bottom: 5px;
}

@media (max-width: 600px) {
  .theme-professional .content h1,
  .theme-calm .content h1 {
    margin-top: 36px;
    margin-bottom: 12px;
  }

  .theme-professional .content h2,
  .theme-calm .content h2 {
    margin-top: 34px;
    margin-bottom: 11px;
  }

  .theme-professional .content h3,
  .theme-calm .content h3 {
    margin-top: 25px;
    margin-bottom: 8px;
  }

  .theme-professional .content h4,
  .theme-calm .content h4 {
    margin-top: 21px;
    margin-bottom: 7px;
  }

  .theme-professional .content p,
  .theme-calm .content p {
    margin-bottom: 14px;
  }

  .theme-professional .content ul,
  .theme-professional .content ol,
  .theme-calm .content ul,
  .theme-calm .content ol {
    margin-bottom: 16px;
  }
}


        .nav-folder {
      padding: 14px 12px 6px;

      color: var(--sidebar-muted);

      font-size: 12px;
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: 0.02em;
    }

    .nav-folder:first-child {
      padding-top: 6px;
    }

    .theme-professional .nav-folder {
      color: var(--text-muted);
      font-weight: 650;
    }

    .theme-calm .nav-folder {
      color: var(--text-muted);
      font-weight: 650;
    }



    /* -------------------------------------------------------------------------
       Satori Calm — richer colour refinement
       -------------------------------------------------------------------------
       Keep the theme gentle and editorial, but give it more identity through
       muted multi-colour surfaces, soft gradients and clearer branded accents.
    */

    .theme-calm {
      --background: #fbfaf6;
      --surface: #fffefb;

      --sidebar-background: #f1f7f3;
      --sidebar-background-deep: #eef4f6;
      --sidebar-text: #243934;
      --sidebar-muted: #70817b;
      --sidebar-border: #dbe5df;

      --text: #243934;
      --text-secondary: #586a64;
      --text-muted: #7b8984;

      --border: #dbe4df;
      --border-strong: #c8d5cf;

      --accent: #6f9f8d;
      --accent-strong: #426f61;
      --accent-soft: #e5f1eb;

      --calm-sage: #6f9f8d;
      --calm-sage-deep: #426f61;
      --calm-sea: #72aeb2;
      --calm-sky: #dceef4;
      --calm-lilac: #a695c7;
      --calm-lilac-soft: #eee9f6;
      --calm-peach: #d99a82;
      --calm-peach-soft: #faece5;
      --calm-gold: #caa85c;
      --calm-gold-soft: #f8f0d8;
      --calm-mint: #dff1e9;
      --calm-cream: #fffaf0;

      --danger: #c96f68;
      --danger-soft: #fbefec;

      --mint: #dcebe4;
      --mint-soft: #eef6f2;

      background:
        radial-gradient(circle at 84% 2%, rgba(166,149,199,0.11), transparent 28rem),
        radial-gradient(circle at 52% 0%, rgba(114,174,178,0.09), transparent 24rem),
        radial-gradient(circle at 22% 14%, rgba(217,154,130,0.06), transparent 22rem),
        var(--background);
    }

    .theme-calm .sidebar {
      background:
        radial-gradient(circle at 12% 4%, rgba(111,159,141,0.13), transparent 16rem),
        linear-gradient(180deg, #f4f8f4 0%, #eef5f3 58%, #f4f1f8 118%);
      border-right: 1px solid var(--sidebar-border);
      box-shadow: 10px 0 32px rgba(48, 76, 68, 0.035);
    }





    .theme-calm .nav-label {
      color: var(--calm-sage-deep);
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.11em;
    }

    .theme-calm .nav a {
      border: 1px solid transparent;
      color: var(--text-secondary);
      font-weight: 520;
      transition:
        background 120ms ease,
        border-color 120ms ease,
        color 120ms ease,
        transform 120ms ease;
    }

    .theme-calm .nav a:hover {
      transform: translateX(2px);
      background: rgba(111,159,141,0.09);
      border-color: rgba(111,159,141,0.12);
      color: var(--calm-sage-deep);
    }

    .theme-calm .nav a.active {
      background:
        linear-gradient(90deg, rgba(111,159,141,0.16), rgba(166,149,199,0.11));
      border: 1px solid #d3e3dc;
      color: var(--calm-sage-deep);
      box-shadow: inset 3px 0 0 var(--calm-sea);
      font-weight: 680;
    }

    .theme-calm .nav-folder {
      color: #667a73;
      font-weight: 700;
    }

    .theme-calm .sidebar-footer {
      background: rgba(255,255,255,0.46);
    }

    .theme-calm .main {
      background:
        radial-gradient(circle at 90% 2%, rgba(114,174,178,0.075), transparent 24rem),
        radial-gradient(circle at 62% 0%, rgba(166,149,199,0.065), transparent 25rem),
        radial-gradient(circle at 38% 9%, rgba(217,154,130,0.04), transparent 20rem);
    }

    .theme-calm .content-shell {
      max-width: calc(var(--content-width) + 170px);
      padding: 68px 72px 112px;
    }

    .theme-calm .page-header {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      margin-bottom: 52px;
      padding: 42px 44px 45px;
      border: 1px solid #d7e5df;
      border-radius: 24px;
      background:
        linear-gradient(132deg, #e7f3ed 0%, #e9f3f5 44%, #eee9f6 76%, #faeee7 125%);
      color: var(--text);
      box-shadow:
        0 2px 4px rgba(47, 72, 64, 0.025),
        0 22px 50px rgba(66, 111, 97, 0.075);
    }

    .theme-calm .page-header::before {
      content: "";
      position: absolute;
      z-index: -1;
      display: block;
      width: 220px;
      height: 220px;
      right: -60px;
      top: -84px;
      border-radius: 50%;
      background: rgba(114,174,178,0.17);
      box-shadow:
        -112px 118px 0 10px rgba(166,149,199,0.075),
        -18px 168px 0 -4px rgba(217,154,130,0.095);
    }

    .theme-calm .page-header::after {
      content: "";
      position: absolute;
      z-index: -1;
      display: block;
      left: 12%;
      bottom: -108px;
      width: 210px;
      height: 160px;
      border-radius: 55% 45% 62% 38%;
      background: rgba(202,168,92,0.08);
      transform: rotate(-12deg);
    }

    .theme-calm .page-kicker {
      width: fit-content;
      margin-bottom: 14px;
      padding: 6px 10px;
      border: 1px solid rgba(66,111,97,0.12);
      border-radius: 999px;
      background: rgba(255,255,255,0.55);
      color: var(--calm-sage-deep);
      font-size: 10px;
      font-weight: 750;
      letter-spacing: 0.1em;
      backdrop-filter: blur(8px);
    }

    .theme-calm .page-kicker::before {
      display: block;
      width: 7px;
      height: 7px;
      border: 0;
      border-radius: 999px;
      background: var(--calm-peach);
      box-shadow: none;
    }

    .theme-calm .page-title {
      max-width: 740px;
      color: #264038;
      font-size: clamp(39px, 4.8vw, 54px);
      font-weight: 700;
      line-height: 1.06;
      letter-spacing: -0.044em;
      text-wrap: balance;
    }

    .theme-calm .content {
      color: var(--text-secondary);
      font-size: 17px;
      line-height: 1.76;
    }

    .theme-calm .content h1,
    .theme-calm .content h2,
    .theme-calm .content h3,
    .theme-calm .content h4,
    .theme-calm .content h5,
    .theme-calm .content h6 {
      color: #29443b;
      font-weight: 680;
      letter-spacing: -0.027em;
    }

    .theme-calm .content h2 {
      position: relative;
      padding-left: 16px;
    }

    .theme-calm .content h2::before {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      top: 0.12em;
      bottom: 0.1em;
      width: 5px;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--calm-sage), var(--calm-lilac));
    }

    .theme-calm .content a {
      color: var(--calm-sage-deep);
      font-weight: 650;
      text-decoration-thickness: 2px;
      text-decoration-color: #a9cdc0;
      text-underline-offset: 3px;
    }

    .theme-calm .content a:hover {
      color: #355f71;
      background: #edf7f7;
      text-decoration-color: var(--calm-sea);
    }

    .theme-calm .content li::marker {
      color: var(--calm-peach);
      font-weight: 700;
    }

    .theme-calm .content img {
      border: 1px solid #d6e3de;
      border-radius: 20px;
      background: #ffffff;
      box-shadow:
        0 2px 4px rgba(47,72,64,0.025),
        0 18px 42px rgba(91,126,113,0.09);
    }

    .theme-calm .content .table-wrap,
    .theme-calm .content > table {
      border: 1px solid #d6e2dc;
      border-radius: 15px;
      background: #ffffff;
      box-shadow: 0 10px 28px rgba(62,89,80,0.045);
    }

    .theme-calm .content th {
      background:
        linear-gradient(180deg, #edf5f0 0%, #edf3f5 100%);
      color: #355248;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
    }

    .theme-calm .content td {
      background: #fffefb;
    }

    .theme-calm .content tbody tr:nth-child(even) td {
      background: #fafcf9;
    }

    .theme-calm .content blockquote {
      padding: 20px 22px;
      border: 1px solid #eedbd2;
      border-left: 5px solid var(--calm-peach);
      border-radius: 0 14px 14px 0;
      background:
        linear-gradient(90deg, #faeee8 0%, #fff9f5 100%);
      color: #6a5148;
      box-shadow: none;
    }

    .theme-calm .content code {
      border: 1px solid #d8e4df;
      border-radius: 6px;
      background: #eff5f2;
      color: #4d7165;
      font-weight: 520;
    }

    .theme-calm .content pre {
      border: 0;
      border-top: 4px solid var(--calm-sea);
      border-radius: 15px;
      background:
        linear-gradient(135deg, #294039, #314d48 58%, #35474f);
      color: #eef5f2;
      box-shadow: 0 16px 34px rgba(41,64,57,0.12);
    }

    .theme-calm .content hr {
      background: linear-gradient(90deg, #d7e7df, #dceaf0, #e6deef, #f0ded5);
    }

    .theme-calm .content .confluence-information-macro,
    .theme-calm .content .panel:not(.code) {
      border: 1px solid #d8e4df !important;
      border-left: 5px solid var(--calm-sage) !important;
      border-radius: 15px !important;
      background: #eff6f2 !important;
      box-shadow: none;
    }

    .theme-calm .content .confluence-information-macro-warning {
      border-color: #efd7d1 !important;
      border-left-color: var(--danger) !important;
      background: var(--danger-soft) !important;
    }

    .theme-calm .content .confluence-information-macro-tip {
      border-color: #cfe5da !important;
      border-left-color: var(--calm-sage) !important;
      background: var(--calm-mint) !important;
    }

    .theme-calm .content .confluence-information-macro-information {
      border-color: #d6e5eb !important;
      border-left-color: var(--calm-sea) !important;
      background: #edf6f8 !important;
    }

    .theme-calm .mobile-menu-button {
      border: 1px solid rgba(255,255,255,0.34);
      background: rgba(255,255,255,0.22);
      color: #29443b;
      box-shadow: none;
      backdrop-filter: blur(8px);
    }

    @media (max-width: 900px) {
      .theme-calm .mobile-header {
        border-bottom: 1px solid rgba(66,111,97,0.12);
        background:
          linear-gradient(100deg, #e7f3ed 0%, #e7f2f4 52%, #eee8f5 100%);
        box-shadow: 0 8px 24px rgba(66,111,97,0.07);
      }

    }

    @media (max-width: 600px) {
      .theme-calm .content-shell {
        padding: 28px 18px 72px;
      }

      .theme-calm .page-header {
        margin-bottom: 36px;
        padding: 30px 26px 34px;
        border-radius: 19px;
        box-shadow: 0 16px 34px rgba(66,111,97,0.07);
      }

      .theme-calm .page-title {
        font-size: 36px;
      }
    }

/*
|--------------------------------------------------------------------------
| Theme: Satori Console
|--------------------------------------------------------------------------
| This intentionally overrides the former Calm theme.
| Internal class remains .theme-calm so no Django/model change is required.
|
| Visual language:
| - retro CRT / tactical console
| - near-black panels
| - red phosphor primary
| - amber + terminal green secondary signals
| - scanlines, grids, square corners and restrained glow
|--------------------------------------------------------------------------
*/

.theme-calm {
  --background: #050706;
  --surface: #090d0b;

  --sidebar-background: #050706;
  --sidebar-background-deep: #020403;
  --sidebar-text: #ffd8d3;
  --sidebar-muted: #9f5f59;
  --sidebar-border: rgba(255, 86, 72, 0.28);

  --text: #f4e3df;
  --text-secondary: #c9aaa5;
  --text-muted: #8f706b;

  --border: rgba(255, 86, 72, 0.23);
  --border-strong: rgba(255, 86, 72, 0.58);

  --accent: #ff594b;
  --accent-strong: #ff7568;
  --accent-soft: rgba(255, 89, 75, 0.11);

  --danger: #ff4538;
  --danger-soft: rgba(255, 69, 56, 0.11);

  --mint: #76ff9f;
  --mint-soft: rgba(118, 255, 159, 0.09);

  --console-red: #ff594b;
  --console-red-bright: #ff7568;
  --console-red-dim: #8f342d;
  --console-amber: #ffb14e;
  --console-green: #76ff9f;
  --console-grid: rgba(255, 89, 75, 0.055);

  --sidebar-width: 292px;
  --content-width: 830px;

  --radius: 2px;
  --radius-large: 2px;
  --shadow-offset: 0px;

  color-scheme: dark;

  background:
    linear-gradient(rgba(255, 89, 75, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 89, 75, 0.028) 1px, transparent 1px),
    radial-gradient(circle at 50% -20%, rgba(255, 89, 75, 0.08), transparent 34rem),
    #050706;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto;

  color: var(--text);

  font-family:
    "SFMono-Regular",
    "Cascadia Code",
    "Roboto Mono",
    Consolas,
    "Liberation Mono",
    monospace;

  letter-spacing: 0.012em;
}

/*
| CRT wash / scanline texture
*/

.theme-calm::before {
  content: "";
  position: fixed;
  z-index: 9999;
  inset: 0;

  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.014) 0,
      rgba(255, 255, 255, 0.014) 1px,
      transparent 1px,
      transparent 4px
    );

  opacity: 0.42;
  pointer-events: none;
}

.theme-calm ::selection {
  background: var(--console-red);
  color: #050706;
}

/*
|--------------------------------------------------------------------------
| Shell / sidebar
|--------------------------------------------------------------------------
*/

.theme-calm .sidebar {
  background:
    linear-gradient(180deg, rgba(255, 89, 75, 0.045), transparent 180px),
    linear-gradient(180deg, #070a08 0%, #020403 100%);

  border-right: 1px solid rgba(255, 89, 75, 0.48);

  box-shadow:
    8px 0 30px rgba(0, 0, 0, 0.42),
    inset -1px 0 0 rgba(255, 89, 75, 0.08);
}






/*
| Sidebar search
*/

.theme-calm .docs-search-wrapper {
  padding: 18px 16px 0;
}

.theme-calm .docs-search-input {
  height: 42px;

  border: 1px solid rgba(255, 89, 75, 0.34);
  border-radius: 1px;

  background: #050706;
  color: #ffd8d3;

  box-shadow:
    inset 0 0 18px rgba(255, 89, 75, 0.03);

  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.theme-calm .docs-search-input::placeholder {
  color: #81554f;
}

.theme-calm .docs-search-icon {
  color: var(--console-red-dim);
}

.theme-calm .docs-search-input:focus {
  border-color: var(--console-red);

  background: #070907;

  box-shadow:
    0 0 0 1px rgba(255, 89, 75, 0.20),
    0 0 20px rgba(255, 89, 75, 0.09);
}

.theme-calm .docs-search:focus-within .docs-search-icon {
  color: var(--console-red-bright);
}

/*
| Navigation
*/

.theme-calm .nav-wrapper {
  padding: 22px 16px 28px;
}

.theme-calm .nav-label {
  margin: 0 10px 13px;

  color: var(--console-red);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  text-shadow:
    0 0 10px rgba(255, 89, 75, 0.20);
}

.theme-calm .nav-label::before {
  content: "// ";
  color: var(--console-red-dim);
}

.theme-calm .nav {
  gap: 3px;
}

.theme-calm .nav-folder {
  padding: 15px 10px 6px;

  color: #9f5f59;

  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-calm .nav-folder::before {
  content: "[";
  margin-right: 5px;
  color: var(--console-red-dim);
}

.theme-calm .nav-folder::after {
  content: "]";
  margin-left: 5px;
  color: var(--console-red-dim);
}

.theme-calm .nav a {
  padding: 9px 10px;

  border: 1px solid transparent;
  border-radius: 1px;

  color: #b88c86;

  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.025em;

  transition:
    background 90ms ease,
    border-color 90ms ease,
    color 90ms ease,
    box-shadow 90ms ease;
}

.theme-calm .nav a::before {
  content: ">";

  display: inline-block;
  width: 15px;

  color: #6b332e;

  transition: color 90ms ease;
}

.theme-calm .nav a:hover {
  transform: none;

  border-color: rgba(255, 89, 75, 0.20);

  background: rgba(255, 89, 75, 0.055);
  color: #ffd8d3;

  box-shadow:
    inset 2px 0 0 rgba(255, 89, 75, 0.42);
}

.theme-calm .nav a:hover::before {
  color: var(--console-red);
}

.theme-calm .nav a.active {
  border: 1px solid rgba(255, 89, 75, 0.54);

  background:
    linear-gradient(90deg, rgba(255, 89, 75, 0.17), rgba(255, 89, 75, 0.035));

  color: #fff0ed;

  box-shadow:
    inset 3px 0 0 var(--console-red),
    0 0 18px rgba(255, 89, 75, 0.07);

  font-weight: 700;
}

.theme-calm .nav a.active::before {
  color: var(--console-red-bright);
}

.theme-calm .sidebar-footer {
  padding: 17px 22px;

  border-top: 1px solid rgba(255, 89, 75, 0.26);

  background: rgba(255, 89, 75, 0.025);

  color: #76514c;

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-calm .sidebar-footer::before {
  content: "SYS //";
  display: inline-block;

  margin-right: 6px;

  color: var(--console-red-dim);
}

/*
|--------------------------------------------------------------------------
| Main / article shell
|--------------------------------------------------------------------------
*/

.theme-calm .main {
  background:
    linear-gradient(rgba(255, 89, 75, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 89, 75, 0.025) 1px, transparent 1px),
    radial-gradient(circle at 75% 0%, rgba(255, 89, 75, 0.055), transparent 28rem),
    #050706;

  background-size:
    32px 32px,
    32px 32px,
    auto,
    auto;
}

.theme-calm .content-shell {
  max-width: calc(var(--content-width) + 180px);
  padding: 66px 72px 112px;
}

/*
| Article header / HUD panel
*/

.theme-calm .page-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  margin-bottom: 48px;
  padding: 37px 42px 39px;

  border: 1px solid rgba(255, 89, 75, 0.48);
  border-left: 4px solid var(--console-red);
  border-radius: 1px;

  background:
    linear-gradient(100deg, rgba(255, 89, 75, 0.075), transparent 52%),
    #080b09;

  color: var(--text);

  box-shadow:
    0 0 0 1px rgba(255, 89, 75, 0.04),
    0 18px 42px rgba(0, 0, 0, 0.32),
    inset 0 0 46px rgba(255, 89, 75, 0.025);
}

.theme-calm .page-header::before {
  content: "";

  position: absolute;
  z-index: -1;

  inset: 0;

  display: block;

  background:
    linear-gradient(rgba(255, 89, 75, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 89, 75, 0.055) 1px, transparent 1px);

  background-size: 22px 22px;

  mask-image:
    linear-gradient(90deg, transparent 18%, #000 100%);
}

.theme-calm .page-header::after {
  content: "";

  position: absolute;
  z-index: -1;

  display: block;

  width: 148px;
  height: 148px;

  top: -50px;
  right: 24px;

  border: 1px solid rgba(255, 89, 75, 0.22);
  border-radius: 50%;

  background:
    radial-gradient(circle, transparent 0 31%, rgba(255, 89, 75, 0.08) 32% 33%, transparent 34%),
    linear-gradient(90deg, transparent 49.5%, rgba(255, 89, 75, 0.12) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(255, 89, 75, 0.12) 50%, transparent 50.5%);

  box-shadow:
    0 0 0 20px rgba(255, 89, 75, 0.016),
    0 0 0 42px rgba(255, 89, 75, 0.01);
}

.theme-calm .page-kicker {
  width: fit-content;

  margin-bottom: 15px;
  padding: 0;

  border: 0;
  border-radius: 0;

  background: transparent;

  color: var(--console-amber);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;

  backdrop-filter: none;
}

.theme-calm .page-kicker::before {
  display: inline-block;

  width: 7px;
  height: 7px;

  border: 1px solid var(--console-amber);
  border-radius: 0;

  background: transparent;

  box-shadow:
    0 0 8px rgba(255, 177, 78, 0.24);
}

.theme-calm .page-title {
  max-width: 760px;

  color: #ffe2de;

  font-size: clamp(38px, 4.7vw, 54px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.025em;
  text-transform: uppercase;

  text-shadow:
    0 0 18px rgba(255, 89, 75, 0.13);

  text-wrap: balance;
}

/*
|--------------------------------------------------------------------------
| Article content
|--------------------------------------------------------------------------
*/

.theme-calm .content {
  color: #c8aaa5;

  font-size: 16px;
  line-height: 1.68;

  letter-spacing: 0.005em;
}

.theme-calm .content h1,
.theme-calm .content h2,
.theme-calm .content h3,
.theme-calm .content h4,
.theme-calm .content h5,
.theme-calm .content h6 {
  color: #f4d1cc;

  font-family:
    "SFMono-Regular",
    "Cascadia Code",
    "Roboto Mono",
    Consolas,
    monospace;

  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;

  text-shadow:
    0 0 12px rgba(255, 89, 75, 0.08);
}

.theme-calm .content h1 {
  font-size: 30px;
}

.theme-calm .content h2 {
  position: relative;

  padding-left: 18px;

  font-size: 25px;
}

.theme-calm .content h2::before {
  content: "";

  position: absolute;
  display: block;

  left: 0;
  top: 0.12em;
  bottom: 0.12em;

  width: 4px;

  border-radius: 0;

  background: var(--console-red);

  box-shadow:
    0 0 9px rgba(255, 89, 75, 0.22);
}

.theme-calm .content h3 {
  font-size: 20px;
}

.theme-calm .content h4 {
  font-size: 17px;
}

.theme-calm .content strong {
  color: #f3ccc7;
  font-weight: 800;
}

.theme-calm .content a {
  color: var(--console-amber);

  font-weight: 650;

  text-decoration-line: underline;
  text-decoration-color: rgba(255, 177, 78, 0.44);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.theme-calm .content a:hover {
  background: rgba(255, 177, 78, 0.08);
  color: #ffd08a;

  text-decoration-color: var(--console-amber);
}

.theme-calm .content li::marker {
  color: var(--console-red);
  font-weight: 800;
}

/*
| Images
*/

.theme-calm .content img {
  border: 1px solid rgba(255, 89, 75, 0.42);
  border-radius: 1px;

  background: #090d0b;

  box-shadow:
    0 0 0 1px rgba(255, 89, 75, 0.05),
    0 16px 38px rgba(0, 0, 0, 0.38);

  filter:
    saturate(0.82)
    contrast(1.04);
}

/*
| Tables
*/

.theme-calm .content .table-wrap,
.theme-calm .content > table {
  border: 1px solid rgba(255, 89, 75, 0.38);
  border-radius: 1px;

  background: #080b09;

  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.28);
}

.theme-calm .content table {
  background: #080b09;
  color: #c8aaa5;
}

.theme-calm .content th,
.theme-calm .content td {
  border-right-color: rgba(255, 89, 75, 0.16);
  border-bottom-color: rgba(255, 89, 75, 0.16);
}

.theme-calm .content th {
  background:
    linear-gradient(180deg, rgba(255, 89, 75, 0.14), rgba(255, 89, 75, 0.075));

  color: #ffb0a8;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.theme-calm .content td {
  background: #080b09;
}

.theme-calm .content tbody tr:nth-child(even) td {
  background: #0b0e0c;
}

/*
| Quotes / terminal transmission
*/

.theme-calm .content blockquote {
  position: relative;

  padding: 25px 22px 20px;

  border: 1px solid rgba(255, 177, 78, 0.30);
  border-left: 4px solid var(--console-amber);
  border-radius: 1px;

  background: rgba(255, 177, 78, 0.045);

  color: #d6bda5;

  box-shadow: none;
}

.theme-calm .content blockquote::before {
  content: "// TRANSMISSION";

  display: block;

  margin-bottom: 9px;

  color: var(--console-amber);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

/*
| Inline code
*/

.theme-calm .content code {
  border: 1px solid rgba(118, 255, 159, 0.20);
  border-radius: 1px;

  background: rgba(118, 255, 159, 0.045);
  color: var(--console-green);

  font-family: inherit;
  font-weight: 550;
}

/*
| Code blocks
*/

.theme-calm .content pre {
  position: relative;

  border: 1px solid rgba(118, 255, 159, 0.34);
  border-top: 3px solid var(--console-green);
  border-radius: 1px;

  background:
    linear-gradient(rgba(118, 255, 159, 0.024) 1px, transparent 1px),
    #030604;

  background-size:
    100% 4px,
    auto;

  color: #b9ffca;

  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.36),
    inset 0 0 30px rgba(118, 255, 159, 0.025);

  text-shadow:
    0 0 8px rgba(118, 255, 159, 0.08);
}

.theme-calm .content hr {
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--console-red-dim) 12%,
      var(--console-red) 50%,
      var(--console-red-dim) 88%,
      transparent
    );

  opacity: 0.55;
}

/*
| Confluence callouts
*/

.theme-calm .content .confluence-information-macro,
.theme-calm .content .panel:not(.code) {
  border: 1px solid rgba(255, 177, 78, 0.25) !important;
  border-left: 4px solid var(--console-amber) !important;
  border-radius: 1px !important;

  background: rgba(255, 177, 78, 0.045) !important;
  color: #d8bda0;

  box-shadow: none;
}

.theme-calm .content .confluence-information-macro-warning {
  border-color: rgba(255, 69, 56, 0.30) !important;
  border-left-color: var(--console-red) !important;

  background: rgba(255, 69, 56, 0.065) !important;
}

.theme-calm .content .confluence-information-macro-tip {
  border-color: rgba(118, 255, 159, 0.24) !important;
  border-left-color: var(--console-green) !important;

  background: rgba(118, 255, 159, 0.045) !important;
}

.theme-calm .content .confluence-information-macro-information {
  border-color: rgba(255, 177, 78, 0.24) !important;
  border-left-color: var(--console-amber) !important;

  background: rgba(255, 177, 78, 0.045) !important;
}

/*
|--------------------------------------------------------------------------
| Search results page
|--------------------------------------------------------------------------
*/

.theme-calm .search-page-input {
  border: 1px solid rgba(255, 89, 75, 0.42);
  border-radius: 1px;

  background: #080b09;
  color: #f2d8d3;

  box-shadow: none;

  font-family: inherit;
  font-weight: 500;
}

.theme-calm .search-page-input::placeholder {
  color: #80524c;
}

.theme-calm .search-page-input:focus {
  border-color: var(--console-red);

  box-shadow:
    0 0 0 1px rgba(255, 89, 75, 0.18),
    0 0 22px rgba(255, 89, 75, 0.07);
}

.theme-calm .search-page-button {
  border: 1px solid var(--console-red);
  border-radius: 1px;

  background: rgba(255, 89, 75, 0.14);
  color: #ffb8b1;

  box-shadow: none;

  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-calm .search-page-button:hover {
  transform: none;

  background: var(--console-red);
  color: #050706;

  box-shadow:
    0 0 18px rgba(255, 89, 75, 0.14);
}

.theme-calm .search-page-button:active {
  transform: none;
  box-shadow: none;
}

.theme-calm .search-summary {
  color: #8e625d;

  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-calm .search-result {
  margin-bottom: 11px;

  border: 1px solid rgba(255, 89, 75, 0.28);
  border-radius: 1px;

  background:
    linear-gradient(90deg, rgba(255, 89, 75, 0.045), transparent 44%),
    #080b09;

  box-shadow: none;
}

.theme-calm .search-result::after {
  color: var(--console-red);

  font-family: inherit;
  font-weight: 700;
}

.theme-calm .search-result:hover {
  transform: translateX(3px);

  border-color: rgba(255, 89, 75, 0.58);

  background:
    linear-gradient(90deg, rgba(255, 89, 75, 0.09), transparent 58%),
    #090d0b;

  box-shadow:
    -3px 0 0 var(--console-red),
    0 12px 26px rgba(0, 0, 0, 0.25);
}

.theme-calm .search-result-title {
  color: #f2cbc6;

  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.theme-calm .search-result-snippet {
  color: #ad8e89;
  font-weight: 450;
}

.theme-calm .search-empty {
  border: 1px dashed rgba(255, 89, 75, 0.42);
  border-radius: 1px;

  background: #080b09;

  box-shadow: none;
}

.theme-calm .search-empty-icon {
  border: 1px solid rgba(255, 89, 75, 0.45);
  border-radius: 1px;

  background: rgba(255, 89, 75, 0.07);
  color: var(--console-red);

  box-shadow:
    0 0 18px rgba(255, 89, 75, 0.08);
}

.theme-calm .search-empty h2 {
  color: #efc9c4;

  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.theme-calm .search-empty p {
  color: #936e69;
}

/*
|--------------------------------------------------------------------------
| Homepage — console front door
|--------------------------------------------------------------------------
*/

.theme-calm.homepage {
  background: #050706;
}

.theme-calm.homepage .home-topbar {
  border-bottom: 1px solid rgba(255, 89, 75, 0.32);

  background:
    linear-gradient(90deg, rgba(255, 89, 75, 0.06), transparent 50%),
    rgba(3, 5, 4, 0.92);

  backdrop-filter: none;
}





/*
| Homepage hero
*/

.theme-calm .home-hero {
  min-height: 410px;

  border: 0;
  border-radius: 0;

  background:
    radial-gradient(circle at 80% 42%, rgba(255, 89, 75, 0.12), transparent 15rem),
    radial-gradient(circle at 20% 72%, rgba(255, 177, 78, 0.05), transparent 18rem),
    linear-gradient(rgba(255, 89, 75, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 89, 75, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, #070a08 0%, #040605 55%, #090805 100%);

  background-size:
    auto,
    auto,
    34px 34px,
    34px 34px,
    auto;

  box-shadow:
    inset 0 -1px 0 rgba(255, 89, 75, 0.32);
}

.theme-calm .home-hero::before {
  content: "";

  position: absolute;
  z-index: -1;
  inset: 0;

  background:
    linear-gradient(90deg, transparent 49.85%, rgba(255, 89, 75, 0.09) 50%, transparent 50.15%),
    linear-gradient(0deg, transparent 49.85%, rgba(255, 89, 75, 0.06) 50%, transparent 50.15%),
    radial-gradient(circle at 50% 50%, transparent 0 126px, rgba(255, 89, 75, 0.09) 127px 128px, transparent 129px),
    radial-gradient(circle at 50% 50%, transparent 0 198px, rgba(255, 89, 75, 0.045) 199px 200px, transparent 201px);

  opacity: 1;

  pointer-events: none;
}

.theme-calm .home-hero::after {
  content: "";

  position: absolute;
  z-index: -1;

  width: 250px;
  height: 250px;

  right: 5%;
  bottom: -118px;

  border: 1px solid rgba(255, 89, 75, 0.20);
  border-radius: 50%;

  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 89, 75, 0.12) 0deg 1deg,
      transparent 1deg 14deg
    );

  box-shadow:
    inset 0 0 0 38px #050706,
    inset 0 0 0 39px rgba(255, 89, 75, 0.16),
    inset 0 0 0 72px #050706;

  opacity: 0.72;

  pointer-events: none;
}

.theme-calm .home-title {
  color: #ffb6af;

  font-size: clamp(42px, 5vw, 61px);
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;

  text-shadow:
    0 0 10px rgba(255, 89, 75, 0.18),
    0 0 28px rgba(255, 89, 75, 0.08);
}

.theme-calm .home-title::before {
  content: "[ ";
  color: var(--console-red-dim);
}

.theme-calm .home-title::after {
  content: " ]";
  color: var(--console-red-dim);
}

.theme-calm .home-subtitle {
  color: #9d6c66;

  font-size: 13px;
  font-weight: 550;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/*
| Homepage search
*/

.theme-calm .home-search {
  border: 1px solid rgba(255, 89, 75, 0.58);
  border-radius: 1px;

  background: rgba(4, 7, 5, 0.96);

  box-shadow:
    0 0 0 1px rgba(255, 89, 75, 0.06),
    0 0 26px rgba(255, 89, 75, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.34);
}

.theme-calm .home-search:focus-within {
  transform: none;

  border-color: var(--console-red);

  box-shadow:
    0 0 0 1px rgba(255, 89, 75, 0.12),
    0 0 30px rgba(255, 89, 75, 0.12),
    0 18px 38px rgba(0, 0, 0, 0.36);
}

.theme-calm .home-search-icon {
  color: var(--console-red);
}

.theme-calm .home-search-input {
  color: #ffd7d2;

  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.025em;
}

.theme-calm .home-search-input::placeholder {
  color: #794a45;
}

.theme-calm .home-search-button {
  border: 1px solid var(--console-red);
  border-radius: 1px;

  background: rgba(255, 89, 75, 0.13);
  color: var(--console-red-bright);

  box-shadow:
    inset 0 0 14px rgba(255, 89, 75, 0.05);
}

.theme-calm .home-search-button:hover {
  transform: none;

  background: var(--console-red);
  color: #050706;

  box-shadow:
    0 0 18px rgba(255, 89, 75, 0.14);

  filter: none;
}

.theme-calm .home-search-button:focus-visible {
  outline: 1px solid var(--console-red-bright);
  outline-offset: 4px;
}

/*
| Homepage topics
*/

.theme-calm .home-content-shell {
  max-width: 1240px;
  padding: 42px 48px 104px;
}

.theme-calm .home-section-title {
  color: #eabcb7;

  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.theme-calm .home-section-title::before {
  content: "// ";
  color: var(--console-red);
}

.theme-calm .home-section-meta {
  color: #7c554f;

  font-family: inherit;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.theme-calm .home-topic-card {
  min-height: 150px;

  border: 1px solid rgba(255, 89, 75, 0.25);
  border-radius: 1px;

  background:
    linear-gradient(135deg, rgba(255, 89, 75, 0.045), transparent 54%),
    #080b09;

  box-shadow: none;
}

.theme-calm .home-topic-card:hover {
  transform: translateY(-2px);

  border-color: rgba(255, 89, 75, 0.58);

  background:
    linear-gradient(135deg, rgba(255, 89, 75, 0.085), transparent 62%),
    #090d0b;

  box-shadow:
    0 0 0 1px rgba(255, 89, 75, 0.035),
    0 16px 30px rgba(0, 0, 0, 0.24);
}

.theme-calm .home-topic-icon {
  border: 1px solid rgba(255, 89, 75, 0.32);
  border-radius: 1px;

  background: rgba(255, 89, 75, 0.055);
  color: var(--console-red);

  box-shadow:
    inset 0 0 14px rgba(255, 89, 75, 0.035);
}

.theme-calm .home-topic-title {
  color: #dfb2ad;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.theme-calm .home-topic-count {
  color: #75514c;

  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.theme-calm .home-topic-arrow {
  color: #81423b;
}

.theme-calm .home-topic-card:hover .home-topic-arrow {
  color: var(--console-red-bright);
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

.theme-calm .mobile-menu-button {
  border: 1px solid var(--console-red);
  border-radius: 1px;

  background: rgba(255, 89, 75, 0.10);
  color: var(--console-red);

  box-shadow: none;
  backdrop-filter: none;
}

@media (max-width: 900px) {
  .theme-calm .mobile-header {
    border-bottom: 1px solid rgba(255, 89, 75, 0.38);

    background:
      linear-gradient(90deg, rgba(255, 89, 75, 0.06), transparent),
      rgba(3, 5, 4, 0.96);

    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.34);

    backdrop-filter: none;
  }


  .theme-calm .sidebar {
    box-shadow:
      14px 0 42px rgba(0, 0, 0, 0.55);
  }
}

@media (max-width: 600px) {
  .theme-calm .content-shell {
    padding: 28px 18px 72px;
  }

  .theme-calm .page-header {
    margin-bottom: 36px;
    padding: 28px 24px 30px;

    border-radius: 1px;
  }

  .theme-calm .page-title {
    font-size: 32px;
  }

  .theme-calm .home-hero {
    padding: 108px 20px 52px;
  }

  .theme-calm .home-title {
    font-size: clamp(31px, 9vw, 40px);
    letter-spacing: 0.045em;
  }

  .theme-calm .home-subtitle {
    font-size: 11px;
    letter-spacing: 0.065em;
  }

  .theme-calm .home-content-shell {
    padding: 30px 18px 64px;
  }

  .theme-calm .home-topic-card {
    min-height: 126px;
  }
}

/*
|--------------------------------------------------------------------------
| Shared public-site header / customer branding
|--------------------------------------------------------------------------
| One component renders the brand in the sidebar, homepage and mobile
| header. Keep uploaded-logo geometry here so themes cannot distort it.
*/

.site-header {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-brand {
  min-width: 0;
  max-width: 100%;

  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: inherit;
  text-decoration: none;
}

.site-brand-logo-wrap {
  height: 40px;
  max-width: 128px;
  min-width: 0;

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

  flex: 0 1 auto;
}

.site-brand-logo {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;

  flex: 0 1 auto;

  object-fit: contain;
  object-position: left center;
}

.site-brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;

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

  border: 2px solid var(--text);
  border-radius: 11px;

  background: var(--accent);
  color: var(--text);

  box-shadow: 3px 3px 0 var(--text);

  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.site-brand-name {
  min-width: 0;
  margin: 0;
  overflow: hidden;

  color: inherit;

  font-size: 17px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -0.025em;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar variant */
.sidebar > .site-header--sidebar {
  min-height: 84px;
  padding: 18px 22px;

  border-bottom: 1px solid var(--sidebar-border);

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

/* Homepage variant. .home-topbar owns positioning, height and outer padding. */
.home-topbar > .site-header--homepage {
  height: 100%;
  min-height: 0;
  padding: 0;

  border: 0;
  background: transparent;

  color: #ffffff;
}

/* Mobile variant. .mobile-header owns sticky positioning and background. */
.mobile-header > .site-header--mobile {
  height: 100%;
  min-height: 0;
  padding: 0;

  border: 0;
  background: transparent;

  color: #ffffff;
}

.mobile-header > .site-header--mobile .site-brand {
  min-width: 0;
  flex: 1 1 auto;
  margin-right: 16px;
  overflow: hidden;
}

.mobile-header > .site-header--mobile .mobile-menu-button {
  flex: 0 0 auto;
}

/* Professional theme: retain theme chrome, not theme-specific logo sizing. */
.theme-professional .sidebar > .site-header--sidebar {
  min-height: 78px;
  padding: 16px 22px;

  border-bottom: 1px solid var(--sidebar-border);

  background: rgba(255, 255, 255, 0.82);
  color: var(--text);

  backdrop-filter: blur(10px);
}

.theme-professional .site-brand-mark {
  border: 0;
  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      var(--brand-blue),
      var(--brand-violet) 55%,
      var(--brand-teal)
    );
  color: #ffffff;

  box-shadow: 0 8px 20px rgba(36, 107, 254, 0.22);

  font-weight: 750;
}

.theme-professional .sidebar > .site-header--sidebar .site-brand-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.theme-professional.homepage .site-header--homepage,
.theme-professional .mobile-header > .site-header--mobile {
  color: #ffffff;
}

/* Console theme. Internal theme class intentionally remains .theme-calm. */
.theme-calm .sidebar > .site-header--sidebar {
  min-height: 82px;
  padding: 16px 20px;

  border-bottom: 1px solid rgba(255, 89, 75, 0.30);

  background:
    linear-gradient(90deg, rgba(255, 89, 75, 0.06), transparent);
  color: var(--sidebar-text);

  backdrop-filter: none;
}

.theme-calm .site-brand-mark {
  border: 1px solid var(--console-red);
  border-radius: 1px;

  background: rgba(255, 89, 75, 0.08);
  color: var(--console-red-bright);

  box-shadow:
    inset 0 0 16px rgba(255, 89, 75, 0.08),
    0 0 15px rgba(255, 89, 75, 0.12);

  font-size: 15px;
  font-weight: 800;
}

.theme-calm .site-brand-name {
  color: #ffd8d3;

  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;

  text-shadow: 0 0 12px rgba(255, 89, 75, 0.18);
}

.theme-calm.homepage .site-header--homepage .site-brand-name {
  font-size: 14px;
  letter-spacing: 0.10em;
}

.theme-calm .mobile-header > .site-header--mobile .site-brand-name {
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* Compact homepage/mobile sizing. Aspect ratio remains untouched. */
@media (max-width: 600px) {
  .site-header--homepage .site-brand-logo-wrap,
  .site-header--mobile .site-brand-logo-wrap {
    height: 34px;
    max-width: 112px;
  }

  .site-header--homepage .site-brand-mark,
  .site-header--mobile .site-brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 10px;
  }

  .site-header--homepage .site-brand-name,
  .site-header--mobile .site-brand-name {
    font-size: 15px;
  }
}

/*
|--------------------------------------------------------------------------
| Navigation hierarchy refinement
|--------------------------------------------------------------------------
| Works with the shared navigation markup in public_base.html:
| - .nav-link / .nav-folder
| - .nav-node--nested
| - --nav-indent
| - .nav-link-label / .nav-folder-label
|
| Keep this block after the theme rules so hierarchy geometry stays
| consistent while each theme can keep its own colours and visual language.
*/

.sidebar {
  --nav-connector: rgba(255, 255, 255, 0.18);
  --nav-connector-active: var(--accent);
}

.theme-professional .sidebar {
  --nav-connector: #d9e3f2;
  --nav-connector-active: var(--brand-teal);
}

/* The current .theme-calm implementation is the Console theme. */
.theme-calm .sidebar {
  --nav-connector: rgba(255, 89, 75, 0.22);
  --nav-connector-active: var(--console-red);
}

.sidebar .nav {
  gap: 0;
}

.sidebar .nav .nav-link,
.sidebar .nav .nav-folder {
  --nav-indent: 0px;

  position: relative;
  width: calc(100% - var(--nav-indent));
  min-width: 0;
  margin-left: var(--nav-indent);
}

.sidebar .nav .nav-link {
  display: flex;
  align-items: center;

  min-height: 38px;
  padding: 8px 10px;

  line-height: 1.4;
}

/*
  Keep hover/active movement from shifting the connector rails around.
  Colour, border and background still come from the active theme.
*/
.sidebar .nav .nav-link:hover,
.sidebar .nav .nav-link.active {
  transform: none;
}

.sidebar .nav .nav-folder {
  margin-top: 9px;
  padding: 8px 10px 5px;
}

.sidebar .nav .nav-folder:first-child {
  margin-top: 0;
  padding-top: 5px;
}

.sidebar .nav .nav-link-label,
.sidebar .nav .nav-folder-label {
  display: block;
  min-width: 0;
}

/*
  Draw hierarchy rails from the new label spans rather than from the link
  itself. This avoids clashes with theme-specific link markers such as the
  Console theme's leading ">".
*/
.sidebar .nav .nav-node--nested > .nav-link-label::before,
.sidebar .nav .nav-node--nested > .nav-folder-label::before {
  content: "";

  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -11px;

  width: 1px;

  background: var(--nav-connector);

  pointer-events: none;
}

.sidebar .nav .nav-node--nested > .nav-link-label::after,
.sidebar .nav .nav-node--nested > .nav-folder-label::after {
  content: "";

  position: absolute;
  top: 50%;
  left: -11px;

  width: 9px;
  height: 1px;

  background: var(--nav-connector);
  transform: translateY(-50%);

  pointer-events: none;
}

/* Give the selected branch a slightly clearer connection to its parent. */
.sidebar .nav .nav-link.nav-node--nested.active > .nav-link-label::after {
  height: 2px;
  background: var(--nav-connector-active);
}

/*
  Nested active/hover states now begin at the node's hierarchy level instead
  of stretching back across the indentation area.
*/
.sidebar .nav .nav-link.nav-node--nested:hover,
.sidebar .nav .nav-link.nav-node--nested.active {
  width: calc(100% - var(--nav-indent));
  margin-left: var(--nav-indent);
}

/* Professional theme: slightly tighter, documentation-style grouping. */
.theme-professional .sidebar .nav .nav-folder {
  margin-top: 11px;
}

.theme-professional .sidebar .nav .nav-link {
  min-height: 37px;
}

/* Console theme keeps its terminal styling while using the same hierarchy. */
.theme-calm .sidebar .nav .nav-folder {
  margin-top: 10px;
}

.theme-calm .sidebar .nav .nav-link {
  min-height: 37px;
}

@media (max-width: 900px) {
  .sidebar .nav .nav-link {
    min-height: 40px;
  }
}

/* ==========================================================================
   PROSPECT-RESEARCHED THEME REFRESH
   --------------------------------------------------------------------------
   Keeps the existing theme keys (`bold`, `professional`, `calm`) so no
   template/model changes are required.

   The three themes are deliberately all blue for now. Their difference comes
   from typography, density, geometry, borders, hero treatment and navigation.

   Future accent-colour support:
   set --site-accent on .theme-bold / .theme-professional / .theme-calm.
   ========================================================================== */


/* ==========================================================================
   THEME 1 — BOLD => CORPORATE
   --------------------------------------------------------------------------
   Inspired by the more established enterprise / industrial sites in the
   prospect set: strong nav, squared geometry, restrained cards, bold headings.
   Good default for logistics, finance, insurance and large B2B organisations.
   ========================================================================== */

.theme-bold {
  --background: #f7f9fc;
  --surface: #ffffff;

  --sidebar-background: #0a2142;
  --sidebar-background-deep: #07182f;
  --sidebar-text: #ffffff;
  --sidebar-muted: #b6c6d9;
  --sidebar-border: rgba(255, 255, 255, 0.16);

  --text: #10243e;
  --text-secondary: #42556e;
  --text-muted: #6b7d93;

  --border: #d8e0ea;
  --border-strong: #9fb0c3;

  --accent: var(--site-accent, #1769e0);
  --accent-strong: #0c55bd;
  --accent-soft: #eaf2ff;

  --mint: #dbe9fb;
  --mint-soft: #f1f6fd;

  --radius: 4px;
  --radius-large: 6px;
  --shadow-offset: 0;
}

.theme-bold {
  font-family: Arial, Helvetica, "Segoe UI", sans-serif;
}

.theme-bold .sidebar {
  background: var(--sidebar-background);
  border-right: 0;
  box-shadow: 6px 0 24px rgba(13, 35, 64, 0.08);
}

.theme-bold .docs-search-input {
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 500;
}

.theme-bold .docs-search-input:focus {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.13);
}

.theme-bold .nav-wrapper {
  padding-top: 24px;
}

.theme-bold .nav-label {
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.theme-bold .nav {
  gap: 2px;
}

.theme-bold .nav a {
  padding: 9px 11px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0;
  color: #d8e3ef;
  font-size: 13px;
  font-weight: 500;
}

.theme-bold .nav a:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.07);
  border-left-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

.theme-bold .nav a.active {
  background: rgba(255, 255, 255, 0.10);
  border-color: transparent;
  border-left-color: var(--accent);
  color: #ffffff;
  box-shadow: none;
  font-weight: 700;
}

.theme-bold .sidebar-footer::before {
  display: none;
}

.theme-bold .content-shell {
  max-width: 1080px;
  padding-top: 54px;
}

.theme-bold .page-header {
  margin-bottom: 48px;
  padding: 42px 46px;
  border: 0;
  border-radius: 2px;
  background:
    linear-gradient(110deg, #0a2142 0 72%, #123967 72% 100%);
  color: #ffffff;
  box-shadow: none;
}

.theme-bold .page-header::after {
  top: 0;
  right: 0;
  width: 22%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(128deg, transparent 0 43%, rgba(255,255,255,.08) 44% 58%, transparent 59%);
  box-shadow: none;
}

.theme-bold .page-kicker {
  color: #c9dcf5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.theme-bold .page-kicker::before {
  width: 22px;
  height: 3px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  box-shadow: none;
}

.theme-bold .page-title {
  max-width: 820px;
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.theme-bold .content {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.72;
}

.theme-bold .content h1,
.theme-bold .content h2,
.theme-bold .content h3,
.theme-bold .content h4,
.theme-bold .content h5,
.theme-bold .content h6 {
  color: var(--text);
  font-family: Arial, Helvetica, "Segoe UI", sans-serif;
  letter-spacing: -0.025em;
}

.theme-bold .content h2 {
  padding-left: 16px;
  border-left: 4px solid var(--accent);
}

/*
 * The base article styles already draw an h2 accent with ::before.
 * Bold uses a squared left border instead, so disable the base marker
 * to avoid the doubled / bulbous blue bar.
 */
.theme-bold .content h2::before {
  content: none;
  display: none;
}

.theme-bold .content a {
  color: var(--accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.theme-bold .content img {
  border-radius: 2px;
  box-shadow: none;
}

.theme-bold .content blockquote,
.theme-bold .content .confluence-information-macro,
.theme-bold .content .panel:not(.code) {
  border-radius: 2px;
  box-shadow: none;
}

.theme-bold.homepage .home-topbar {
  height: 76px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: #0a2142;
}

.theme-bold .home-hero {
  min-height: 390px;
  padding: 116px 48px 70px;
  background:
    linear-gradient(118deg, #0a2142 0 62%, #123d72 62% 100%);
  color: #ffffff;
  box-shadow: none;
}

.theme-bold .home-hero::before {
  inset: 0 0 0 auto;
  width: 43%;
  background:
    linear-gradient(132deg,
      transparent 0 31%,
      rgba(255,255,255,.08) 31% 42%,
      transparent 42% 53%,
      rgba(255,255,255,.055) 53% 64%,
      transparent 64%);
  mask-image: none;
  opacity: 1;
}

.theme-bold .home-hero::after {
  display: block;
  width: 180px;
  height: 10px;
  right: -34px;
  bottom: 36px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  box-shadow: none;
  transform: rotate(-35deg);
}

.theme-bold .home-title {
  max-width: 900px;
  font-size: clamp(42px, 5vw, 66px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -0.04em;
}

.theme-bold .home-subtitle {
  max-width: 720px;
  color: #d7e3f2;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}

.theme-bold .home-search {
  max-width: 760px;
  border: 0;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.theme-bold .home-search:focus-within {
  box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 0 0 3px rgba(255,255,255,.22);
}

.theme-bold .home-search-button {
  border-radius: 1px;
  background: var(--accent);
  box-shadow: none;
}

.theme-bold .home-content-shell {
  max-width: 1120px;
}

.theme-bold .home-section-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.theme-bold .home-topic-card {
  min-height: 132px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: #ffffff;
  box-shadow: none;
}

.theme-bold .home-topic-card:hover {
  transform: translateY(-2px);
  border-color: #a9b8ca;
  box-shadow: 0 10px 24px rgba(14, 39, 70, 0.08);
}

.theme-bold .home-topic-icon {
  border: 0;
  border-radius: 2px;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}

.theme-bold .home-topic-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.theme-bold .home-topic-count {
  color: var(--text-muted);
}

.theme-bold .home-topic-arrow {
  color: var(--accent);
}


/* ==========================================================================
   THEME 2 — PROFESSIONAL => MODERN PRODUCT
   --------------------------------------------------------------------------
   Inspired by product-led SaaS sites in the prospect set: bright canvas,
   generous whitespace, soft cards, friendly radius, polished gradient hero.
   ========================================================================== */

.theme-professional {
  --background: #ffffff;
  --surface: #ffffff;

  --sidebar-background: #ffffff;
  --sidebar-background-deep: #ffffff;
  --sidebar-text: #19324d;
  --sidebar-muted: #71849b;
  --sidebar-border: #dce5ef;

  --text: #102a43;
  --text-secondary: #486581;
  --text-muted: #829ab1;

  --border: #dce5ef;
  --border-strong: #b7c7d8;

  --accent: var(--site-accent, #1769e0);
  --accent-strong: #0f59c7;
  --accent-soft: #edf4ff;

  --radius: 12px;
  --radius-large: 18px;
  --shadow-offset: 0;
}

.theme-professional {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.theme-professional .sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border);
  box-shadow: none;
}

.theme-professional .docs-search-input {
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #f8fafc;
  color: var(--text);
  box-shadow: none;
}

.theme-professional .docs-search-input::placeholder {
  color: var(--text-muted);
}

.theme-professional .docs-search-icon {
  color: var(--text-muted);
}

.theme-professional .docs-search-input:hover {
  border-color: #bdcad8;
}

.theme-professional .docs-search-input:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(23, 105, 224, .11);
}

.theme-professional .nav-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.theme-professional .nav {
  gap: 3px;
}

.theme-professional .nav a {
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  color: #4b627a;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

.theme-professional .nav a:hover {
  transform: none;
  background: #f2f6fb;
  color: var(--text);
}

.theme-professional .nav a.active {
  background: var(--accent-soft);
  border: 0;
  color: #164f9f;
  box-shadow: none;
  font-weight: 700;
}

.theme-professional .sidebar-footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

.theme-professional .sidebar-footer::before {
  display: none;
}

.theme-professional .content-shell {
  max-width: 1040px;
  padding-top: 58px;
}

.theme-professional .page-header {
  margin-bottom: 48px;
  padding: 44px 48px;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 5%, rgba(255,255,255,.24), transparent 24%),
    linear-gradient(125deg, #0f55b8 0%, #1769e0 56%, #4d8ff0 100%);
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(23,105,224,.16);
}

.theme-professional .page-header::before {
  display: none;
}

.theme-professional .page-header::after {
  width: 240px;
  height: 240px;
  top: -120px;
  right: -80px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 36px rgba(255,255,255,.035);
}

.theme-professional .page-kicker {
  color: #dbe9ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.theme-professional .page-kicker::before {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: none;
}

.theme-professional .page-title {
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 750;
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.theme-professional .content h1,
.theme-professional .content h2,
.theme-professional .content h3,
.theme-professional .content h4,
.theme-professional .content h5,
.theme-professional .content h6 {
  color: var(--text);
  letter-spacing: -0.03em;
}

.theme-professional .content h2::before {
  width: 4px;
  border-radius: 999px;
  background: var(--accent);
}

.theme-professional .content a {
  color: var(--accent);
}

.theme-professional .content img {
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 56, 95, .10);
}

.theme-professional .content blockquote,
.theme-professional .content .confluence-information-macro,
.theme-professional .content .panel:not(.code) {
  border-radius: 10px;
  box-shadow: none;
}

.theme-professional.homepage .home-topbar {
  height: 82px;
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: transparent;
}

.theme-professional .home-hero {
  min-height: 420px;
  padding: 126px 48px 78px;
  background:
    radial-gradient(circle at 82% 13%, rgba(255,255,255,.22), transparent 23%),
    radial-gradient(circle at 14% 90%, rgba(255,255,255,.12), transparent 27%),
    linear-gradient(128deg, #0f55b8 0%, #1769e0 52%, #5b93eb 100%);
  color: #ffffff;
  box-shadow: none;
}

.theme-professional .home-hero::before {
  background:
    radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 1.5px) 0 0 / 32px 32px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.25), transparent 45%, transparent 62%, rgba(0,0,0,.22));
  opacity: .55;
}

.theme-professional .home-hero::after {
  display: none;
}

.theme-professional .home-title {
  max-width: 900px;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.05em;
}

.theme-professional .home-subtitle {
  max-width: 700px;
  color: #eaf2ff;
  font-size: 16px;
  font-weight: 450;
  letter-spacing: 0;
}

.theme-professional .home-search {
  max-width: 760px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(7, 42, 89, .19);
}

.theme-professional .home-search:focus-within {
  border-color: #ffffff;
  box-shadow: 0 16px 36px rgba(7, 42, 89, .19), 0 0 0 4px rgba(255,255,255,.16);
}

.theme-professional .home-search-button {
  border-radius: 11px;
  background: var(--accent);
  box-shadow: none;
}

.theme-professional .home-content-shell {
  max-width: 1120px;
}

.theme-professional .home-section-title {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.03em;
}

.theme-professional .home-topic-card {
  min-height: 136px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 47, 82, .035);
}

.theme-professional .home-topic-card:hover {
  transform: translateY(-3px);
  border-color: #b8cbe0;
  box-shadow: 0 14px 30px rgba(15, 47, 82, .09);
}

.theme-professional .home-topic-icon {
  border: 0;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: none;
}

.theme-professional .home-topic-title {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.theme-professional .home-topic-count {
  color: var(--text-muted);
}

.theme-professional .home-topic-arrow {
  color: var(--accent);
}


/* ==========================================================================
   THEME 3 — CALM => EDITORIAL / INSTITUTIONAL
   --------------------------------------------------------------------------
   Inspired by research, public-interest and information-heavy organisations:
   quieter, content-first, broad whitespace, very little decoration.
   ========================================================================== */

.theme-calm {
  --background: #fbfcfe;
  --surface: #ffffff;

  --sidebar-background: #f4f7fb;
  --sidebar-background-deep: #f4f7fb;
  --sidebar-text: #18324d;
  --sidebar-muted: #6e8195;
  --sidebar-border: #d7e0e9;

  --text: #17324d;
  --text-secondary: #485f75;
  --text-muted: #7b8d9f;

  --border: #d9e1e9;
  --border-strong: #aab9c8;

  --accent: var(--site-accent, #1769e0);
  --accent-strong: #0e55bd;
  --accent-soft: #edf4ff;

  --radius: 0px;
  --radius-large: 0px;
  --shadow-offset: 0;
}

.theme-calm {
  font-family: Arial, Helvetica, "Segoe UI", sans-serif;
}

.theme-calm .sidebar {
  background: #f4f7fb;
  border-right: 1px solid var(--border);
  box-shadow: none;
}

.theme-calm .docs-search-wrapper {
  padding-top: 16px;
}

.theme-calm .docs-search-input {
  height: 40px;
  border: 1px solid #cfd9e4;
  border-radius: 0;
  background: #ffffff;
  color: var(--text);
  box-shadow: none;
}

.theme-calm .docs-search-input::placeholder,
.theme-calm .docs-search-icon {
  color: var(--text-muted);
}

.theme-calm .docs-search-input:focus {
  border-color: var(--accent);
  background: #ffffff;
  box-shadow: inset 3px 0 0 var(--accent);
}

.theme-calm .nav-wrapper {
  padding-top: 24px;
}

.theme-calm .nav-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
}

.theme-calm .nav {
  gap: 0;
}

.theme-calm .nav a {
  padding: 9px 10px;
  border: 0;
  border-radius: 0;
  color: #4e6479;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

.theme-calm .nav a:hover {
  transform: none;
  background: #eaf0f6;
  color: var(--text);
}

.theme-calm .nav a.active {
  background: #ffffff;
  border: 0;
  border-left: 3px solid var(--accent);
  color: var(--text);
  box-shadow: none;
  font-weight: 700;
}

.theme-calm .sidebar-footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

.theme-calm .sidebar-footer::before {
  display: none;
}

.theme-calm .content-shell {
  max-width: 980px;
  padding-top: 64px;
}

.theme-calm .page-header {
  margin-bottom: 52px;
  padding: 16px 0 28px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.theme-calm .page-header::after {
  display: none;
}

.theme-calm .page-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
}

.theme-calm .page-kicker::before {
  width: 24px;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  box-shadow: none;
}

.theme-calm .page-title {
  max-width: 820px;
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.theme-calm .content {
  max-width: 820px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.78;
}

.theme-calm .content h1,
.theme-calm .content h2,
.theme-calm .content h3,
.theme-calm .content h4,
.theme-calm .content h5,
.theme-calm .content h6 {
  color: var(--text);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.theme-calm .content h2 {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.theme-calm .content h2::before {
  display: none;
}

.theme-calm .content a {
  color: var(--accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.theme-calm .content img {
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

.theme-calm .content blockquote {
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.theme-calm .content .confluence-information-macro,
.theme-calm .content .panel:not(.code) {
  border-radius: 0;
  box-shadow: none;
}

.theme-calm.homepage .home-topbar {
  height: 80px;
  border-bottom: 1px solid rgba(255,255,255,.18);
  background: #0d335c;
}

.theme-calm .home-hero {
  min-height: 390px;
  padding: 120px 48px 72px;
  background: #0d335c;
  color: #ffffff;
  box-shadow: none;
}

.theme-calm .home-hero::before {
  background:
    linear-gradient(90deg, transparent 0 68%, rgba(255,255,255,.045) 68% 69%, transparent 69%),
    linear-gradient(0deg, transparent 0 66%, rgba(255,255,255,.04) 66% 67%, transparent 67%);
  mask-image: none;
  opacity: 1;
}

.theme-calm .home-hero::after {
  display: none;
}

.theme-calm .home-title {
  max-width: 860px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(43px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.theme-calm .home-subtitle {
  max-width: 660px;
  color: #d9e4ef;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}

.theme-calm .home-search {
  max-width: 720px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.theme-calm .home-search:focus-within {
  border-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.13);
}

.theme-calm .home-search-button {
  border-radius: 0;
  background: var(--accent);
  box-shadow: none;
}

.theme-calm .home-content-shell {
  max-width: 1080px;
}

.theme-calm .home-section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.theme-calm .home-topic-card {
  min-height: 128px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}

.theme-calm .home-topic-card:hover {
  transform: none;
  border-color: var(--accent);
  box-shadow: inset 4px 0 0 var(--accent);
}

.theme-calm .home-topic-icon {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  box-shadow: none;
}

.theme-calm .home-topic-title {
  color: var(--text);
  font-family: Arial, Helvetica, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.theme-calm .home-topic-count {
  color: var(--text-muted);
  font-family: Arial, Helvetica, "Segoe UI", sans-serif;
  text-transform: none;
  letter-spacing: 0;
}

.theme-calm .home-topic-arrow {
  color: var(--accent);
}


/* Shared mobile polish for the refreshed themes */
@media (max-width: 900px) {
  .theme-bold .mobile-header {
    background: #0a2142;
    border-bottom: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 8px 22px rgba(9, 30, 57, .14);
  }

  .theme-professional .mobile-header {
    background: #ffffff;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 22px rgba(20, 56, 95, .06);
  }

  .theme-calm .mobile-header {
    background: #f4f7fb;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
  }

  .theme-bold .mobile-menu-button,
  .theme-professional .mobile-menu-button,
  .theme-calm .mobile-menu-button {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: none;
  }
}

@media (max-width: 600px) {
  .theme-bold .home-hero,
  .theme-professional .home-hero,
  .theme-calm .home-hero {
    min-height: 360px;
    padding: 108px 20px 54px;
  }

  .theme-bold .home-title,
  .theme-professional .home-title,
  .theme-calm .home-title {
    font-size: clamp(34px, 10vw, 46px);
  }

  .theme-bold .page-header,
  .theme-professional .page-header {
    padding: 30px 26px 32px;
  }

  .theme-calm .page-header {
    padding: 8px 0 24px;
  }
}


/* ==========================================================================
   THEME 3 LIGHT RESET
   --------------------------------------------------------------------------
   Theme 3 remains the Editorial / Institutional option, but is intentionally
   light. This neutralises the older terminal/dark Calm rules that still exist
   earlier in the stylesheet.
   ========================================================================== */

.theme-calm {
  color-scheme: light !important;

  background: #fbfcfe !important;
  background-image: none !important;
  color: var(--text) !important;

  font-family: Arial, Helvetica, "Segoe UI", sans-serif !important;
  letter-spacing: normal !important;
}

.theme-calm::before {
  display: none !important;
  content: none !important;
}

.theme-calm .main {
  background: #fbfcfe !important;
  color: var(--text) !important;
}

.theme-calm .sidebar {
  background: #f4f7fb !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.theme-calm .sidebar > .site-header--sidebar {
  background: #f4f7fb !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.theme-calm .site-brand-name,
.theme-calm .sidebar > .site-header--sidebar .site-brand-name {
  color: var(--text) !important;
  text-shadow: none !important;
}

.theme-calm .site-brand-mark {
  border: 1px solid var(--border-strong) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.theme-calm .docs-search-input {
  border: 1px solid #cfd9e4 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  letter-spacing: normal !important;
}

.theme-calm .docs-search-input::placeholder {
  color: var(--text-muted) !important;
}

.theme-calm .docs-search-icon {
  color: var(--text-muted) !important;
}

.theme-calm .docs-search-input:focus {
  border-color: var(--accent) !important;
  background: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

.theme-calm .docs-search:focus-within .docs-search-icon {
  color: var(--accent) !important;
}

.theme-calm .nav-label {
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-shadow: none !important;
}

.theme-calm .nav-label::before {
  content: none !important;
  display: none !important;
}

.theme-calm .nav-folder {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.theme-calm .nav-folder::before,
.theme-calm .nav-folder::after {
  content: none !important;
  display: none !important;
}

.theme-calm .nav a {
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #4e6479 !important;
  box-shadow: none !important;

  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

.theme-calm .nav a::before {
  content: none !important;
  display: none !important;
}

.theme-calm .nav a:hover {
  border-left-color: #b9c9da !important;
  background: #eaf0f6 !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.theme-calm .nav a.active {
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.theme-calm .nav a.active::before,
.theme-calm .nav a:hover::before {
  content: none !important;
  display: none !important;
}

.theme-calm .sidebar-footer {
  border-top: 1px solid var(--border) !important;
  background: #f4f7fb !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}

.theme-calm .sidebar-footer::before {
  display: none !important;
  content: none !important;
}

/* Article/page */
.theme-calm .content-shell {
  background: transparent !important;
}

.theme-calm .page-header {
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.theme-calm .page-header::before,
.theme-calm .page-header::after {
  display: none !important;
  content: none !important;
}

.theme-calm .page-title {
  color: var(--text) !important;
  text-shadow: none !important;
}

.theme-calm .page-kicker {
  color: var(--accent) !important;
  text-shadow: none !important;
}

.theme-calm .page-kicker::before {
  border: 0 !important;
  background: var(--accent) !important;
  box-shadow: none !important;
}

.theme-calm .content {
  color: var(--text-secondary) !important;
  text-shadow: none !important;
}

.theme-calm .content h1,
.theme-calm .content h2,
.theme-calm .content h3,
.theme-calm .content h4,
.theme-calm .content h5,
.theme-calm .content h6,
.theme-calm .content strong {
  color: var(--text) !important;
  text-shadow: none !important;
}

.theme-calm .content h1,
.theme-calm .content h2,
.theme-calm .content h3,
.theme-calm .content h4,
.theme-calm .content h5,
.theme-calm .content h6 {
  font-family: Georgia, "Times New Roman", serif !important;
  letter-spacing: -0.02em !important;
}

.theme-calm .content h2 {
  border-bottom: 1px solid var(--border) !important;
  border-left: 0 !important;
}

.theme-calm .content h2::before {
  display: none !important;
  content: none !important;
}

.theme-calm .content a {
  color: var(--accent-strong) !important;
  background: transparent !important;
  text-shadow: none !important;
}

.theme-calm .content a:hover {
  color: var(--accent) !important;
  background: transparent !important;
}

.theme-calm .content li::marker {
  color: var(--accent) !important;
}

.theme-calm .content img {
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
}

.theme-calm .content .table-wrap,
.theme-calm .content > table,
.theme-calm .content table {
  border-color: var(--border) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

.theme-calm .content th {
  border-color: var(--border) !important;
  background: #edf3f8 !important;
  color: var(--text) !important;
}

.theme-calm .content td {
  border-color: var(--border) !important;
  background: #ffffff !important;
  color: var(--text-secondary) !important;
}

.theme-calm .content tbody tr:nth-child(even) td {
  background: #f8fafc !important;
}

.theme-calm .content blockquote {
  border: 0 !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 0 !important;
  background: #f3f7fb !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

.theme-calm .content blockquote::before {
  display: none !important;
  content: none !important;
}

.theme-calm .content code {
  border: 1px solid var(--border) !important;
  background: #eef3f8 !important;
  color: #244866 !important;
  text-shadow: none !important;
}

.theme-calm .content pre {
  border: 1px solid #c9d7e5 !important;
  border-radius: 0 !important;
  background: #17324d !important;
  color: #f6f9fc !important;
  box-shadow: none !important;
}

.theme-calm .content hr {
  background: var(--border) !important;
  box-shadow: none !important;
}

.theme-calm .content .confluence-information-macro,
.theme-calm .content .panel:not(.code) {
  border-color: var(--border) !important;
  border-radius: 0 !important;
  background: #f7f9fc !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

.theme-calm .content .confluence-information-macro-information {
  border-left: 3px solid var(--accent) !important;
  background: #f2f6fc !important;
}

.theme-calm .content .confluence-information-macro-tip {
  border-left: 3px solid #4b79a8 !important;
  background: #f3f7fb !important;
}

.theme-calm .content .confluence-information-macro-warning {
  border-left: 3px solid #8d6b2d !important;
  background: #fbf8f0 !important;
}

/* Search results */
.theme-calm .search-page-input {
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.theme-calm .search-page-input::placeholder {
  color: var(--text-muted) !important;
}

.theme-calm .search-page-input:focus {
  border-color: var(--accent) !important;
  box-shadow: inset 3px 0 0 var(--accent) !important;
}

.theme-calm .search-page-button {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.theme-calm .search-page-button:hover,
.theme-calm .search-page-button:active {
  transform: none !important;
  background: var(--accent-strong) !important;
  box-shadow: none !important;
}

.theme-calm .search-result,
.theme-calm .search-empty {
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

.theme-calm .search-result:hover {
  transform: none !important;
  border-color: var(--accent) !important;
  background: #ffffff !important;
  box-shadow: inset 4px 0 0 var(--accent) !important;
}

.theme-calm .search-result::after,
.theme-calm .search-result-title {
  color: var(--text) !important;
  text-shadow: none !important;
}

.theme-calm .search-result-snippet,
.theme-calm .search-summary,
.theme-calm .search-empty p {
  color: var(--text-muted) !important;
}

.theme-calm .search-empty-icon {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

/* Homepage — intentionally light, not a dark/black hero */
.theme-calm.homepage {
  background: #fbfcfe !important;
  color: var(--text) !important;
}

.theme-calm.homepage .home-topbar {
  height: 80px !important;
  border-bottom: 1px solid var(--border) !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.theme-calm.homepage .site-header--homepage .site-brand-name {
  color: var(--text) !important;
  text-shadow: none !important;
}

.theme-calm .home-hero {
  min-height: 390px !important;
  padding: 120px 48px 72px !important;

  background:
    linear-gradient(180deg, #eaf2fc 0%, #f7faff 100%) !important;

  color: var(--text) !important;
  box-shadow: none !important;
}

.theme-calm .home-hero::before {
  content: "" !important;
  display: block !important;
  background:
    linear-gradient(90deg, transparent 0 68%, rgba(23,105,224,.08) 68% 68.2%, transparent 68.2%),
    linear-gradient(0deg, transparent 0 66%, rgba(23,105,224,.06) 66% 66.2%, transparent 66.2%) !important;
  mask-image: none !important;
  opacity: 1 !important;
}

.theme-calm .home-hero::after {
  display: none !important;
  content: none !important;
}

.theme-calm .home-title {
  color: var(--text) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  text-shadow: none !important;
}

.theme-calm .home-title::before,
.theme-calm .home-title::after {
  display: none !important;
  content: none !important;
}

.theme-calm .home-subtitle {
  color: var(--text-secondary) !important;
  text-shadow: none !important;
}

.theme-calm .home-search {
  border: 1px solid #b8c8d8 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(29, 61, 96, .07) !important;
}

.theme-calm .home-search:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 8px 22px rgba(29, 61, 96, .07), 0 0 0 3px rgba(23,105,224,.10) !important;
}

.theme-calm .home-search-input {
  background: transparent !important;
  color: var(--text) !important;
  font-family: Arial, Helvetica, "Segoe UI", sans-serif !important;
  letter-spacing: normal !important;
}

.theme-calm .home-search-input::placeholder,
.theme-calm .home-search-icon {
  color: var(--text-muted) !important;
}

.theme-calm .home-search-button {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.theme-calm .home-search-button:hover {
  background: var(--accent-strong) !important;
  transform: none !important;
  box-shadow: none !important;
}

.theme-calm .home-content-shell {
  background: #fbfcfe !important;
}

.theme-calm .home-section-title {
  color: var(--text) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  text-shadow: none !important;
}

.theme-calm .home-section-title::before {
  display: none !important;
  content: none !important;
}

.theme-calm .home-section-meta {
  color: var(--text-muted) !important;
}

.theme-calm .home-topic-card {
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.theme-calm .home-topic-card:hover {
  transform: none !important;
  border-color: var(--accent) !important;
  background: #ffffff !important;
  box-shadow: inset 4px 0 0 var(--accent) !important;
}

.theme-calm .home-topic-icon {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

.theme-calm .home-topic-title {
  color: var(--text) !important;
  font-family: Arial, Helvetica, "Segoe UI", sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-shadow: none !important;
}

.theme-calm .home-topic-count {
  color: var(--text-muted) !important;
  font-family: Arial, Helvetica, "Segoe UI", sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.theme-calm .home-topic-arrow {
  color: var(--accent) !important;
}

.theme-calm .mobile-menu-button {
  border: 1px solid var(--accent) !important;
  border-radius: 0 !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  .theme-calm .mobile-header {
    border-bottom: 1px solid var(--border) !important;
    background: #ffffff !important;
    color: var(--text) !important;
    box-shadow: none !important;
  }

  .theme-calm .mobile-header > .site-header--mobile .site-brand-name {
    color: var(--text) !important;
  }
}

/* ==========================================================================
   Demo banner / public-site layout integration
   --------------------------------------------------------------------------
   The demo banner sits before .layout in public_base.html. The sidebar and
   mobile header use fixed/sticky positioning, so normal document flow alone
   will not keep them beneath the banner.

   Desktop banner: 66px.
   Mobile collapsed banner: approximately 100px.
   ========================================================================== */

:root {
  --demo-banner-height: 66px;
}

/*
 * Keep the Satori demo layer above every piece of the customer site.
 * This deliberately exceeds the sidebar (40) and mobile overlay (35).
 */
.satori-demo-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/*
 * public_base.html renders:
 *
 *   .satori-demo-banner
 *   .layout
 *     .mobile-header
 *     .sidebar
 *
 * Only sites that actually render the demo banner are offset. Normal
 * customer sites are therefore completely unaffected.
 */
.satori-demo-banner + .layout .sidebar {
  top: var(--demo-banner-height);
}

/*
 * On mobile the site header is itself sticky. Keep it immediately below
 * the demo toolbar rather than allowing both sticky elements to occupy top: 0.
 */
@media (max-width: 900px) {
  .satori-demo-banner + .layout .mobile-header {
    top: var(--demo-banner-height);
    z-index: 50;
  }

  /*
   * The slide-out navigation may cover the mobile site header, as it did
   * before, but it must never cover the Satori demo toolbar.
   */
  .satori-demo-banner + .layout .sidebar {
    top: var(--demo-banner-height);
  }
}

/*
 * The compact mobile demo banner contains the intro plus the two-control
 * row, so reserve a little more vertical space for sticky/fixed elements.
 */
@media (max-width: 700px) {
  :root {
    --demo-banner-height: 100px;
  }
}

/*
|--------------------------------------------------------------------------
| Homepage adaptive topic layout
|--------------------------------------------------------------------------
| Keep small knowledge bases looking intentional. One top-level item becomes
| a focused entry point, two items use a balanced two-column layout, and
| larger sets continue to use the normal responsive grid.
*/

.home-topics {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.home-section-header {
  display: block;
  margin: 0 2px 22px;
}

.home-section-meta {
  margin: 6px 0 0;
  line-height: 1.4;
}

.home-topic-grid.home-topic-grid--single {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.home-topic-grid.home-topic-grid--double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A single destination should read like a deliberate starting point rather
   than one lonely card from a three-column grid. */
.homepage .home-topic-grid--single .home-topic-card {
  min-height: 108px;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
}

.homepage .home-topic-grid--single .home-topic-icon {
  flex: 0 0 auto;
  margin-bottom: 0;
}

.homepage .home-topic-grid--single .home-topic-copy {
  min-width: 0;
  flex: 1;
  padding-right: 0;
}

.homepage .home-topic-grid--single .home-topic-title {
  margin: 0;
  font-size: 17px;
}

.homepage .home-topic-grid--single .home-topic-arrow {
  position: static;
  flex: 0 0 auto;
  margin-left: auto;
}

.home-empty-state {
  padding: 26px 28px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--text-muted);
  background: var(--surface);
  font-size: 14px;
}

.home-empty-state p {
  margin: 0;
}

@media (max-width: 1120px) {
  .home-topic-grid.home-topic-grid--single {
    grid-template-columns: minmax(0, 720px);
  }

  .home-topic-grid.home-topic-grid--double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .home-topic-grid.home-topic-grid--single,
  .home-topic-grid.home-topic-grid--double {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .home-section-header {
    margin-bottom: 16px;
  }

  .homepage .home-topic-grid--single .home-topic-card {
    min-height: 96px;
    gap: 14px;
    padding: 18px;
  }

  .homepage .home-topic-grid--single .home-topic-title {
    font-size: 16px;
  }
}

/* ==========================================================================
   FLEXIBLE LOGO-ONLY BRAND TREATMENT
   --------------------------------------------------------------------------
   For now the public site header uses the uploaded customer logo only.
   The site name remains in the HTML so it can be brought back later, but is
   hidden visually. Logo geometry stays flexible for marks and wordmarks.
   ========================================================================== */

.site-brand {
  gap: 0 !important;
  max-width: min(280px, 70vw);
}

.site-brand-name {
  display: none !important;
}

/* Sensible default for article/sidebar/mobile headers. */
.site-brand-logo-wrap {
  width: auto !important;
  height: 46px;
  max-width: 220px;
  min-width: 0;

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

  flex: 0 1 auto;
  overflow: visible;
}

.site-brand-logo {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: left center;
}

/* Homepage gets a little more room for the customer brand. */
.site-header--homepage .site-brand-logo-wrap {
  height: 50px;
  max-width: 260px;
}

/* JS on the homepage adds these classes from the image aspect ratio. */
.site-brand--logo-square .site-brand-logo-wrap {
  height: 50px;
  max-width: 64px;
}

.site-brand--logo-wide .site-brand-logo-wrap {
  height: 44px;
  max-width: 220px;
}

.site-brand--logo-ultrawide .site-brand-logo-wrap {
  height: 38px;
  max-width: 270px;
}

/* Keep uploaded logos visually neutral; don't manufacture a tile around them. */
.site-brand-logo-wrap,
.site-brand-logo {
  background: transparent;
  box-shadow: none;
}

@media (max-width: 600px) {
  .site-header--homepage .site-brand-logo-wrap,
  .site-header--mobile .site-brand-logo-wrap {
    height: 40px;
    max-width: 190px;
  }

  .site-brand--logo-square .site-brand-logo-wrap {
    height: 40px;
    max-width: 52px;
  }

  .site-brand--logo-wide .site-brand-logo-wrap {
    height: 38px;
    max-width: 170px;
  }

  .site-brand--logo-ultrawide .site-brand-logo-wrap {
    height: 34px;
    max-width: 190px;
  }
}
/* Homepage refresh. Scoped to the new homepage template; article/search styles stay intact. */
.homepage.home-refresh {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: #f7f9fc !important;
  color: #172b46 !important;
  --home-ink: #172b46 !important;
  --home-muted: #596a80 !important;
  --home-accent: #1766bd !important;
}
.home-refresh .main { background: transparent !important; }
.home-refresh .home-hero {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(115deg, #123c67 0%, #165e9d 65%, #247bb5 100%) !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}
.home-refresh.theme-bold .home-hero { background: linear-gradient(115deg, #102f5b, #145ac2) !important; }
.home-refresh.theme-calm .home-hero { background: linear-gradient(115deg, #213b52, #426d8b) !important; }
.home-refresh .home-hero::before,
.home-refresh .home-hero::after,
.home-refresh .home-title::before,
.home-refresh .home-title::after,
.home-refresh .home-section-title::before { display: none !important; }
.home-refresh .home-topbar {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 80px !important;
  padding: 16px 28px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.home-refresh .home-topbar > .site-header--homepage {
  width: 100% !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  min-height: 48px !important;
  color: white !important;
}
.home-refresh .site-header--homepage .site-brand { gap: 14px !important; max-width: 100% !important; }
.home-refresh .site-header--homepage .site-brand-logo-wrap {
  width: auto !important;
  height: 48px !important;
  max-width: 200px !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.home-refresh .site-header--homepage .site-brand-logo {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 200px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
.home-refresh .site-header--homepage .site-brand-name {
  display: block !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  letter-spacing: 0 !important;
}
.home-refresh .home-hero-inner {
  max-width: 840px !important;
  padding: 42px 28px 48px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.home-refresh .home-title {
  max-width: 780px !important;
  margin: 0 auto !important;
  color: #fff !important;
  font-family: inherit !important;
  font-size: clamp(30px, 3.3vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
  text-transform: none !important;
  text-shadow: none !important;
}
.home-refresh .home-subtitle {
  margin: 14px auto 0 !important;
  color: #e1ecf6 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
.home-refresh .home-search-wrap { width: 100% !important; max-width: 680px !important; margin: 26px auto 0 !important; }
.home-refresh .home-search {
  min-height: 62px !important;
  padding: 6px 7px 6px 18px !important;
  border: 1px solid #d8e3f0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(5,25,49,.16) !important;
}
.home-refresh .home-search:focus-within {
  outline: 3px solid #a9d5ff !important;
  outline-offset: 3px !important;
  box-shadow: 0 8px 24px rgba(5,25,49,.16) !important;
  transform: none !important;
}
.home-refresh .home-search-icon { color: #64748b !important; margin: 0 12px 0 0 !important; width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }
.home-refresh .home-search-input {
  min-width: 0 !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 !important;
  color: #172b46 !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 16px !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.home-refresh .home-search-input::placeholder { color: #64748b !important; opacity: 1 !important; }
.home-refresh .home-search-button {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #1766bd !important;
  color: white !important;
  box-shadow: none !important;
  transform: none !important;
}
.home-refresh .home-search-button:hover { background: #124d90 !important; transform: none !important; }
.home-refresh .home-search-button:focus-visible { outline: 3px solid #123c67 !important; outline-offset: 2px !important; }
.home-refresh .home-search-preview { opacity: .85 !important; }
.home-refresh .home-content-shell { max-width: 1136px !important; padding: 38px 28px 48px !important; }
.home-refresh .home-topics { max-width: none !important; }
.home-refresh .home-section-header { margin: 0 0 22px !important; align-items: center !important; }
.home-refresh .home-section-title {
  color: var(--home-ink) !important;
  font-family: inherit !important;
  font-size: 23px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
}
.home-refresh .home-section-description { margin: 7px 0 0 !important; color: var(--home-muted) !important; font-size: 15px !important; line-height: 1.5 !important; }
.home-refresh .home-topic-grid,
.home-refresh .home-topic-grid.home-topic-grid--single,
.home-refresh .home-topic-grid.home-topic-grid--double {
  max-width: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.home-refresh .home-topic-card,
.home-refresh .home-topic-grid--single .home-topic-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 18px !important;
  min-height: 114px !important;
  padding: 24px !important;
  border: 1px solid #dde5ee !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--home-ink) !important;
  box-shadow: 0 2px 5px rgba(23,43,70,.025) !important;
  transition: border-color .15s, box-shadow .15s, transform .15s !important;
}
.home-refresh .home-topic-card::before,
.home-refresh .home-topic-card::after { display: none !important; }
.home-refresh .home-topic-card:hover {
  border-color: #8db2d7 !important;
  background: #fff !important;
  box-shadow: 0 6px 20px rgba(23,43,70,.08) !important;
  transform: translateY(-2px) !important;
}
.home-refresh .home-topic-card:focus-visible { outline: 3px solid #1766bd !important; outline-offset: 3px !important; }
.home-refresh .home-topic-card .home-topic-icon {
  width: 44px !important;
  height: 48px !important;
  margin: 0 !important;
  flex: 0 0 44px !important;
  color: var(--home-accent) !important;
  background: #edf4fc !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.home-refresh .home-topic-copy { min-width: 0 !important; flex: 1 !important; padding: 0 !important; }
.home-refresh .home-topic-card .home-topic-title {
  margin: 0 !important;
  color: var(--home-ink) !important;
  font-family: inherit !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -.015em !important;
  text-transform: none !important;
}
.home-refresh .home-card-detail { margin: 7px 0 0 !important; color: var(--home-muted) !important; font-size: 13px !important; line-height: 1.4 !important; }
.home-refresh .home-topic-card .home-topic-arrow { position: static !important; flex-shrink: 0 !important; color: #6b8199 !important; font-size: 20px !important; }
.home-refresh .home-topic-card:hover .home-topic-arrow { color: #1766bd !important; }
.home-refresh .home-footer { max-width: 1080px !important; margin: 0 auto !important; padding: 22px 0 30px !important; border-top: 1px solid #dde5ee !important; color: #687a8e !important; font-size: 12px !important; }
.home-refresh .home-empty-state { grid-column: 1 / -1 !important; background: #fff !important; color: var(--home-muted) !important; }
@media (max-width: 680px) {
  .home-refresh .home-topbar { padding: 14px 20px !important; min-height: 72px !important; }
  .home-refresh .site-header--homepage .site-brand-logo-wrap,
  .home-refresh .site-header--homepage .site-brand-logo { max-width: 120px !important; max-height: 40px !important; }
  .home-refresh .site-header--homepage .site-brand-name { font-size: 13px !important; }
  .home-refresh .home-hero-inner { padding: 30px 20px 36px !important; }
  .home-refresh .home-content-shell { padding: 28px 20px 36px !important; }
  .home-refresh .home-topic-grid,
  .home-refresh .home-topic-grid.home-topic-grid--single,
  .home-refresh .home-topic-grid.home-topic-grid--double { grid-template-columns: minmax(0, 1fr) !important; }
  .home-refresh .home-topic-card,
  .home-refresh .home-topic-grid--single .home-topic-card { padding: 20px !important; gap: 14px !important; min-height: 104px !important; }
  .home-refresh .home-footer { margin: 0 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .home-refresh .home-topic-card,
  .home-refresh .home-topic-arrow { transition: none !important; }
  .home-refresh .home-topic-card:hover,
  .home-refresh .home-topic-card:hover .home-topic-arrow { transform: none !important; }
}