/*
 * ==============================================
 * Skin for oXygen generated WebHelp.
 * ==============================================
 */

/* AIS portal landing-page styles (registered separately in .opt; @import covers standalone use) */
@import url('ais-portal.css');
/* AIS home page-only overrides */
@import url('ais-home-only.css');

/*
 * ------------------------------------------------------------------
 *
 * Second-level tile layout for chapter landing pages.
 *
 * Oxygen renders child topics as a <div class="wh_child_links"> bullet
 * list at the bottom of each chapter page.  The CSS below transforms
 * that list into a tile grid matching the main landing page style.
 *
 * Works for ALL chapter pages that have direct child topicrefs
 * (e.g. PKI → PKI User Guide, PKI API Guide).
 *
 */

/* ---- AIS chapter landing page: child links as tiles (scoped to AIS only) ---- */

body#ais_guides .wh_child_links {
    margin-top: 28px;
}

body#ais_guides .wh_child_links .ullinks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

body#ais_guides .wh_child_links .ulchildlink {
    position: relative;          /* anchor for the full-card link overlay */
    background: #f5f7fa;
    border: 1px solid #dde3ed;
    border-radius: 4px;
    padding: 32px 24px;
    text-align: center;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

body#ais_guides .wh_child_links .ulchildlink:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
    border-color: #337ab7;
}

body#ais_guides .wh_child_links .ulchildlink strong {
    font-weight: normal;
}

body#ais_guides .wh_child_links .ulchildlink > strong > a {
    font-size: 1.05em;
    font-weight: 600;
    color: #337ab7 !important;
    text-decoration: none !important;
}

/* overlay — makes the whole card clickable */
body#ais_guides .wh_child_links .ulchildlink > strong > a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 4px;
}

body#ais_guides .wh_child_links .ulchildlink > strong > a:hover,
body#ais_guides .wh_child_links .ulchildlink > strong > a:focus {
    text-decoration: none !important;
}

/* shortdesc if Oxygen includes it in the link rendering */
body#ais_guides .wh_child_links .ulchildlink p {
    font-size: 0.88em;
    color: #666;
    margin-top: 10px;
    margin-bottom: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    body#ais_guides .wh_child_links .ullinks {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    body#ais_guides .wh_child_links .ullinks {
        grid-template-columns: 1fr;
    }
}

/* ---- AIS Learning Journey page: 3-column card grid (same proven pattern as ais_guides) ---- */

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links {
    margin-top: 20px;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ullinks {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink {
    position: relative;
    background: #ffffff;
    border: 1px solid #c8ddf2;
    border-left: 4px solid #0878c9;
    border-radius: 6px;
    padding: 16px 18px 14px;
    text-align: left;
    box-shadow: 0 1px 3px rgba(16, 42, 67, 0.06);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink:hover {
    box-shadow: 0 4px 14px rgba(8, 120, 201, 0.14);
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong {
    display: block;
    margin-bottom: 8px;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong > a {
    font-size: 12px;
    font-weight: 800;
    color: #0878c9 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong > a::before {
    content: '\203A\00a0';
    font-size: 15px;
    color: #0878c9;
}

/* full-card click overlay */
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong > a::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: 6px;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong > a:hover,
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink > strong > a:focus {
    text-decoration: none !important;
}

/* audience tag badges */
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-tag {
    display: inline-block !important;
    margin: 0 4px 6px 0;
    padding: 2px 9px;
    border: 1px solid #d5e1ec;
    border-radius: 12px;
    background: #f3f7fb;
    color: #6d86a1;
    font-size: 10px;
    line-height: 1.5;
}

/* card description text */
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-description {
    display: block !important;
    margin: 6px 0 10px;
    color: #102a43;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* card link list — force block so items don't concatenate */
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links li {
    display: block !important;
    padding: 3px 0 !important;
    margin: 0 !important;
    font-size: 13px;
    color: #0878c9;
    line-height: 1.4;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links li::before {
    content: '\2192\00a0';
    color: #79a7cf;
    font-size: 12px;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links a {
    color: #0878c9;
    text-decoration: none;
}

:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-links a:hover {
    text-decoration: underline;
    color: #075b99;
}

/* card footer: time/availability label */
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ulchildlink .ais-card-meta {
    display: block !important;
    margin: auto 0 0;
    padding-top: 8px;
    border-top: 1px solid #d5e3f0;
    color: #7892ad;
    font-size: 11px;
    line-height: 1.3;
}

/* per-stage left-border accent colours */
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-prepare   { border-left-color: #00a8cc; }
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-build     { border-left-color: #10b981; }
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-firstwin  { border-left-color: #22c55e; }
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-ts        { border-left-color: #f59e0b; }
:is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ais-card-vid       { border-left-color: #f97316; }

@media (max-width: 860px) {
    :is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ullinks {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 540px) {
    :is(body#task_hj4_nky_fkc, body#ais-home, .ais-journey-page, #task_hj4_nky_fkc) .wh_child_links .ullinks {
        grid-template-columns: 1fr !important;
    }
}



/*
 * ------------------------------------------------------------------
 *  
 * Fonts.
 *  
 *
 * @import url("https://fonts.googleapis.com/css?family=Roboto:400,700,300");
 */
 
@font-face {
  font-family: 'Roboto-Light';
  src: url('./resources/fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('./resources/fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto-Bold';
  src: url('./resources/fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto-Thin';
  src: url('./resources/fonts/Roboto-Thin.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Then use normally */
body {
  font-family: 'Roboto', sans-serif;
}

 
html, body {
    min-width:100%;
}

body{
    font-family: Roboto, sans-serif;
}

    /*
     * ------------------------------------------------------------------
     *
     * Fight with bootstrap
     *
     */
.navbar-brand{
    height:auto;
}
.navbar {
    border:none;
    border-radius:0;
    margin:0;
}
.wh_header{
    background: #000 none;
    color: #ffffff;
}
.wh_logo img{
    width:225px;
}
a,
a:hover,
a:visited{
    color: #337ab7;
}
a:hover{
    text-decoration: none;
}


/*
 * ------------------------------------------------------------------
 *  
 * Publication titles
 *  
 */
 .wh_publication_title{
     display:none;
 }
 .wh_publication_title > a{
     color:#fff;
     font-size: 1.4em;
}



/*
 * ------------------------------------------------------------------
 *  
 * Menu
 *  
 */
.wh_top_menu {
    text-transform: uppercase;
    margin: .4em 0;
    font-size: 0.9em;
}
.wh_top_menu a{
    color: #fff;
    line-height: 2em;
}

/* The submenus */
.wh_top_menu ul ul {
    background-color: #333;
}
.wh_top_menu ul li:hover,
.wh_top_menu.activated-on-click ul li.active {
    background-color: #333;
}
.wh_top_menu ul ul li a:focus,
.wh_top_menu ul ul li a:hover {
    background: #000;
    color: #FFF;
}
.wh_top_menu ul ul li {
    border-top-color: #000;
    width: 270px;
    text-transform: capitalize;
}
.wh_top_menu ul ul li.has-children:after{
}

/*
 * ------------------------------------------------------------------
 *  
 * Link to the index.
 * 
 */
 .wh_indexterms_link a span{
    display:none;
}
.wh_indexterms_link a:before{
    color:#fff;
}


/*
 * ------------------------------------------------------------------
 *  
 * Breadcrumb
 *  
 */
.wh_breadcrumb ol {
    color: #878787;
}
.wh_breadcrumb ol a {
    color:inherit;
}
.wh_breadcrumb ol .active {
    color: #5185cb;
}


/*
 * ------------------------------------------------------------------
 *  
 * Tools and navigation
 * 
 */
.wh_tools{
    background-color: #ECF2F9;
    margin: 1em 0 2em;
}
nav.wh_tools {
    margin-top: 0;
}
.close-publication-toc-sticky-button {
    top: 1px;
    }
.wh_print_link,
.wh_navigation_links,
.wh_navigation_links .navnext,
.wh_navigation_links .navprev{
}

.wh_print_link button,
.webhelp_expand_collapse_sections,
.wh_hide_highlight,
.oxy-icon-pdf-link,
.wh_navigation_links a,
.wh_navigation_links a:hover,
.wh_navigation_links a:active,
.wh_navigation_links a:visited,
.wh_print_link a:before,
.wh_navigation_links a:before,
.wh_navigation_links a:hover:before,
.wh_navigation_links a:active:before,
.wh_navigation_links a:visited:before{
    color: #347bb7;
    text-decoration: none;
}


/*
 * ------------------------------------------------------------------
 *  
 * Tiles
 * 
 */
.wh_tile {
    background-color: #EFEFEF;
    font-weight: 300;
}
.wh_tile_shortdesc{
    margin-top:1em;
    text-align: center;
    color: #0D1A2B;
    font-size:1.1em;
}
.wh_tile_text:after{
    background: linear-gradient(to bottom, rgba(239, 239, 239, 0), rgba(239, 239, 239, 1) 75%);
}
.wh_tile_title{
    font-size:1.7em;
    text-align: center;
    text-decoration: none;
}
.wh_tile_title a{
    color: #3077be;
    line-height:1.3em
}
@media only screen and (max-width: 767px) {
    .wh_tile > div {
        height: auto;
    }
}

/* 
You can style some of the tiles in a special way. 
Example:
.wh_tiles *[data-id='getting_started']{
    background-color:gray;
}
*/


/*
 * ------------------------------------------------------------------
 *  
 * Search area
 * 
 */
.wh_search_input{
    display:block;
    margin:0;
    position:relative;
    background: url('resources/images/bgr_right_small.png') right no-repeat #5E6573;
    padding: 40px 0;
}

.wh_welcome:not(:empty){
    font-size: 4em;
    margin: 0 auto;
    font-family: 'Roboto Thin', sans-serif;
    padding: 0 0 1.5em 0;
    text-shadow: none;
}

.wh_main_page .wh_search_input{
    background: url('resources/images/bgr_right.png') right no-repeat #5E6573;

}
.wh_search_textfield{
    border: solid 1px #CCC;
    border-radius: 5px;
    padding: 0 .5em;
    position: relative;
    height: 2.8em;
}
/*.wh_search_button{
    border: solid 1px #CCC;
    border-radius: 0 5px 5px 0;
    padding: 0.6em 1em;
    color:#fff;
    background-color: #C93416;
    height: 2.8em;
}*/
.wh_search_button{
    background: transparent linear-gradient(270deg,#EE4137 0%,#4B00FF 100%) 0% 0% no-repeat padding-box!important;
    border: 2px solid #fff !important;
}
/* Search autocomplete icons */
.search-autocomplete-proposal-type-history a,
.search-autocomplete-proposal-type-history a:hover,
.search-autocomplete-proposal-type-history a:visited,
.search-autocomplete-proposal-type-history a:active{
    text-decoration: none;
    color:inherit;
    font-size: 0.8em;
}

.ui-state-active .search-autocomplete-proposal-type-history a,
.ui-state-active .search-autocomplete-proposal-type-history a:hover,
.ui-state-active .search-autocomplete-proposal-type-history a:visited,
.ui-state-active .search-autocomplete-proposal-type-history a:active{
    color: #fff;
}

.ui-state-active{
    background-color: #999; 
}

/* Active search page */
#wh-search-pagination > ul > li.active > a {
    background-color: #346ec5;
}

/*@media only screen and (max-width: 999px) {*/
    /*.wh_search_input:after{*/
        /*display:none;*/
    /*}*/

/*}*/
@media only screen and (max-width: 767px) {
    .wh_main_page .wh_search_input,
    .wh_search_input {
        padding: 3em 0;
    }
}


/*
 * ------------------------------------------------------------------
 *  
 * Publication TOC
 * 
 */
.wh_publication_toc{
    border-radius: 3px;
    padding: 1.5em 2em;
    background-color: #f8f8f8
}
.wh_publication_toc .active > .topicref a {
    color: #5185cb;
    font-weight: normal;
}
.wh_publication_toc div, .wh_publication_toc a, .wh_publication_toc a:visited, .wh_publication_toc a:hover {
    color: #878787;
}
.wh_publication_toc a:hover {
    text-decoration: underline;
}

.wh_publication_toc  ul  li{
    margin-top: .7em;
}

@media only screen and (max-width: 767px) {
    .wh_publication_toc {
        border-radius: 0;
        padding: 1em 0.5em;
        margin-top: 10px;
        border: 1px solid #e0e0e0;
    }

    .wh_related_links,
    .wh_child_links,
    .wh_topic_content .related-links{
        border: 1px solid #e0e0e0;
    }
}

/* Publication TOC tooltip */
.wh_breadcrumb .topicref .wh-tooltip,
.wh-toc-tooltip {
    background-color: #5E6573;
    color: #fff;
    font-size: 1.4rem;
}

.wh_breadcrumb .topicref .wh-tooltip a,
.wh-toc-tooltip a {
    color: #fff;
    text-decoration: underline;
}

/* Tooltip arrow. */

[data-tooltip-position="left"] .topicref .wh-tooltip::before,
[data-tooltip-position="left"] .wh-toc-tooltip::before {
    border-left-color: #5E6573;
}

[data-tooltip-position="right"] .topicref .wh-tooltip::before,
[data-tooltip-position="right"] .wh-toc-tooltip::before {
    border-right-color: #5E6573;
}

[data-tooltip-position="bottom"] .topicref .wh-tooltip::before,
[data-tooltip-position="bottom"] .wh-toc-tooltip::before {
    border-bottom-color: #5E6573;
}

[data-tooltip-position="top"] .topicref .wh-tooltip::before,
[data-tooltip-position="top"] .wh-toc-tooltip::before {
    border-top-color: #5E6573;
}

/*
 * ------------------------------------------------------------------
 *
 * Footer
 * 
 */
.wh_footer{
    text-align: center;
    padding: 0.5em;
    position:relative;
    bottom: 0;
    width: 100%;
    color: #ffffff;
    background: none #333333;
    margin-top: 2em;
}

.wh_footer a{
    color: #CCE2F1;
}

/*
 * ------------------------------------------------------------------
 *  
 * Topic content
 * 
 */
.wh_topic_content,.wh_content_area {
    color: #000000;
    line-height: 1.7em;
    margin-bottom: 80px;
}
.wh_topic_content{
    margin-bottom: 0px;
}
.wh_main_page .wh_content_area {
    margin: 40px 0;
}
.wh_topic_content .title.topictitle1 {
    font-size: 2em;
    margin-bottom: 1em;
    line-height: 1.1em;
}

.topictitle3{
    font-weight: 400;
}

.wh_related_links,
.wh_child_links,
.wh_topic_content .related-links{
	border-top: 1px solid #ccc;
    padding-top: 7px;
    margin-top: 0;
}

.wh_related_links,
.wh_topic_content .related-links{
    padding: .5em 1.5em ;
}

.wh_child_links {
    padding: 1.5em ;
}

.related-links strong{
    font-weight: 500;
}

.related-links a,
.related-links a:visited {
    color: #5185cb;
    padding-bottom: .3em;
}

.filepath {
    color: #c7254e !important;
}

/*
 * ------------------------------------------------------------------
 *  
 * Search results.
 * 
 */
.searchresult {
    list-style: none;
}

.searchresult li a {
    color:#346ec5;
}
.searchresult .shortdesclink {
    margin: .3em .5em 0 0;
}
.wh_search_expression{
    font-weight:bold;
}

/* Search relative path */
.searchresult li .relativePath a {
    color: #666666;
}

/*--------- Search results breadcrumb ----------*/
.search-breadcrumb li a {
    background: #ECF2F9;
}
.search-breadcrumb li .title:before,
.search-breadcrumb li .title:after {
    border-color: #ECF2F9;
}
.search-breadcrumb li .title:before {
    border-left-color: transparent;
}
.search-breadcrumb li .title:after {
    border-color: transparent;
    border-left-color: #ECF2F9;
}

/*
 * ------------------------------------------------------------------
 *  
 * Index terms.
 * 
 */
.wh_index_terms span.wh_first_letter {
    color: #346ec5;
}
.wh_index_terms #indexList{
    padding:0;
}



/*
 * ------------------------------------------------------------------
 *  
 * Tree TOC for the main page.
 * 
 */
.wh_main_page_toc{
}


.wh_main_page_toc .expanded, .wh_main_page_toc .wh_main_page_toc_accordion_header:hover, .wh_main_page_toc>.wh_main_page_toc_entry:hover, .wh_main_page_toc_accordion_entries{
    background-color: #F2F8FF;
}

/**
 *
 * Styles used for RTL pages
 *
 */
html[dir='rtl'] .wh_top_menu:not(.activated-on-click) ul li:hover > ul,
html[dir='rtl'] .wh_top_menu.activated-on-click ul li.active > ul {
    max-width: 270px;
}

/* Hide print header/footer on screen */
.wh-print-header,
.wh-print-footer {
  display: none;
}

/* PRINT STYLES */
@media print {

  .wh-print-header {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    padding: 10px 20px;
    border-bottom: 1px solid #999;
    background: white;
  }

  .wh-print-header img {
    height: 25px;
    vertical-align: middle;
    margin-right: 15px;
  }

  .wh-print-title {
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
  }

  .wh-print-footer {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    text-align: center;
    font-size: 11px;
    border-top: 1px solid #999;
    background: white;
  }

  /* Prevent content from overlapping header/footer */
  body {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

table {
  table-layout: fixed;
  width: 100%;
}

/* ================================================================
 * AIS Landing Page – dark-theme overlay for Oxygen WebHelp output
 *
 * Activated when the DITA topic carries outputclass="ais-landing".
 * Oxygen WebHelp copies outputclass values to HTML class attributes,
 * so <topic outputclass="ais-landing"> renders as <body class="... ais-landing">.
 *
 * Palette matches AIS_Product_Landing_Page_v2.html exactly.
 * ================================================================ */

body.ais-landing {
    --bg:     #0d1b2a;
    --bg2:    #111f30;
    --card:   #152030;
    --border: #1e3550;
    --text:   #c8d8e8;
    --muted:  #5a7a9a;
    --head:   #f0f4f8;
    --link:   #38bdf8;
    --s1:     #0078d4;
    --s2:     #00a8cc;
    --s3:     #10b981;
    --s4:     #22c55e;
    --s5:     #f59e0b;
    --s6:     #f97316;
}

/* ── Content area shell ─────────────────────────────────────────── */
body.ais-landing .wh_content_area,
body.ais-landing .wh_topic_content {
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
    line-height: 1.55;
    margin-bottom: 0;
}

/* ── Page H1 ────────────────────────────────────────────────────── */
body.ais-landing .wh_topic_content .title.topictitle1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--head);
    text-align: center;
    padding: 40px 0 8px;
    margin-bottom: 4px;
    border-bottom: none;
    line-height: 1.2;
}

/* ── Short description / hero subtitle ─────────────────────────── */
body.ais-landing .wh_topic_content .shortdesc {
    display: block;
    text-align: center;
    color: var(--text);
    font-size: 15px;
    padding-bottom: 24px;
    margin: 0;
    background-color: var(--bg);
}

/* ── Hero stats bar ─────────────────────────────────────────────── */
body.ais-landing .hero-stats {
    text-align: center;
    background-color: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 24px;
}

body.ais-landing .hero-stats .title.sectiontitle {
    display: none;
}

body.ais-landing .stat-badge {
    display: inline-block;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 4px 13px;
    font-size: 12px;
    color: var(--text);
    margin: 3px 4px;
}

/* ── Orientation / info banner ──────────────────────────────────── */
body.ais-landing .orient-banner {
    font-size: 12px;
    color: var(--muted);
    background-color: rgba(0,120,212,0.05);
    border: 1px solid rgba(0,120,212,0.18);
    border-radius: 6px;
    padding: 9px 14px;
    margin-bottom: 18px;
}

/* ── Section intro label ────────────────────────────────────────── */
body.ais-landing .section-intro {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 20px;
}

/* ── Section title shared style ─────────────────────────────────── */
body.ais-landing .wh_topic_content .title.sectiontitle {
    font-size: 20px;
    font-weight: 600;
    color: var(--head);
    margin-bottom: 6px;
    border-bottom: none;
}

/* ── Guides-grid section wrapper ────────────────────────────────── */
body.ais-landing .guides-grid {
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 40px 24px;
}

/* ── Card row – CSS Grid ────────────────────────────────────────── */
body.ais-landing .card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 4px;
}

/* ── Individual stage cards ─────────────────────────────────────── */
body.ais-landing .stage-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--s1);   /* default; overridden per stage */
    border-radius: 8px;
    padding: 14px 16px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

body.ais-landing .stage-card:hover {
    border-color: rgba(255,255,255,0.13);
    box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}

body.ais-landing .stage-card .title.sectiontitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--head);
    margin: 8px 0;
    border-bottom: none;
}

/* Stage accent colours on left border */
body.ais-landing .stage-1   { border-left-color: var(--s1); }
body.ais-landing .stage-2   { border-left-color: var(--s2); }
body.ais-landing .stage-3   { border-left-color: var(--s3); }
body.ais-landing .stage-4   { border-left-color: var(--s4); }
body.ais-landing .stage-ts  { border-left-color: var(--s5); }
body.ais-landing .stage-vid { border-left-color: var(--s6); }

/* Stage number badge circle */
body.ais-landing .stage-num {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    margin-right: 6px;
    vertical-align: middle;
}

body.ais-landing .num-1   { background-color: var(--s1); }
body.ais-landing .num-2   { background-color: var(--s2); }
body.ais-landing .num-3   { background-color: var(--s3); }
body.ais-landing .num-4   { background-color: var(--s4); }
body.ais-landing .num-ts  { background-color: var(--s5); }
body.ais-landing .num-vid { background-color: var(--s6); }

/* Stage label next to number */
body.ais-landing .label-1, body.ais-landing .label-2,
body.ais-landing .label-3, body.ais-landing .label-4,
body.ais-landing .label-ts, body.ais-landing .label-vid {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
body.ais-landing .label-1   { color: var(--s1); }
body.ais-landing .label-2   { color: var(--s2); }
body.ais-landing .label-3   { color: var(--s3); }
body.ais-landing .label-4   { color: var(--s4); }
body.ais-landing .label-ts  { color: var(--s5); }
body.ais-landing .label-vid { color: var(--s6); }

/* ── Role tag badges ────────────────────────────────────────────── */
body.ais-landing .card-roles { margin: 4px 0 2px; }

body.ais-landing .role-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 9px;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    color: var(--muted);
    margin-right: 4px;
}

/* ── Card link list ─────────────────────────────────────────────── */
body.ais-landing .stage-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}

body.ais-landing .stage-card ul li {
    font-size: 12px;
    padding: 2px 0;
    color: var(--link);
}

body.ais-landing .stage-card ul li::before {
    content: "→ ";
    color: var(--muted);
    font-size: 11px;
}

body.ais-landing .stage-card ul li.featured { color: #a5f3fc; font-weight: 600; }
body.ais-landing .stage-card ul li.featured::before { color: #a5f3fc; }

body.ais-landing .stage-card ul li a,
body.ais-landing .stage-card ul li a:visited { color: inherit; text-decoration: none; }

/* ── Card footer (time + button) ────────────────────────────────── */
body.ais-landing .card-footer {
    font-size: 10px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 8px;
    margin-top: 6px;
    overflow: hidden;   /* contain the floated button */
}

body.ais-landing .card-time { font-size: 10px; color: var(--muted); }

body.ais-landing .card-btn {
    display: inline-block;
    float: right;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    border-radius: 5px;
    padding: 3px 10px;
}

body.ais-landing .btn-1   { background-color: var(--s1); }
body.ais-landing .btn-2   { background-color: var(--s2); }
body.ais-landing .btn-3   { background-color: var(--s3); }
body.ais-landing .btn-4   { background-color: var(--s4); }
body.ais-landing .btn-ts  { background-color: var(--s5); }
body.ais-landing .btn-vid { background-color: var(--s6); }

/* ── Docs Map section ───────────────────────────────────────────── */
body.ais-landing .section-docs-map {
    background-color: var(--bg2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 40px 24px;
}

/* ── KPIs section ───────────────────────────────────────────────── */
body.ais-landing .section-kpis {
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 40px 24px;
}

/* ── Shared table styles ────────────────────────────────────────── */
body.ais-landing .docs-table,
body.ais-landing .kpi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background-color: var(--card);
    color: var(--text);
    table-layout: auto;       /* override the global fixed layout */
    margin-top: 4px;
}

body.ais-landing .docs-table thead tr th,
body.ais-landing .kpi-table  thead tr th {
    background-color: rgba(255,255,255,0.04);
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 7px 10px;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--border);
}

body.ais-landing .docs-table tbody tr td,
body.ais-landing .kpi-table  tbody tr td {
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text);
}

body.ais-landing .docs-table tbody tr:hover td,
body.ais-landing .kpi-table  tbody tr:hover td {
    background-color: rgba(255,255,255,0.02);
}

/* Stage column colour coding */
body.ais-landing .stage-col-1   { color: var(--s1); font-weight: 600; white-space: nowrap; }
body.ais-landing .stage-col-2   { color: var(--s2); font-weight: 600; white-space: nowrap; }
body.ais-landing .stage-col-3   { color: var(--s3); font-weight: 600; white-space: nowrap; }
body.ais-landing .stage-col-4   { color: var(--s4); font-weight: 600; white-space: nowrap; }
body.ais-landing .stage-col-ts  { color: var(--s5); font-weight: 600; white-space: nowrap; }
body.ais-landing .stage-col-vid { color: var(--s6); font-weight: 600; white-space: nowrap; }

/* KPI columns */
body.ais-landing .metric-name { font-weight: 600; color: var(--head); white-space: nowrap; }
body.ais-landing .kpi-target  { color: #10b981; font-weight: 600; }

/* ── Doc-type badge chips ───────────────────────────────────────── */
body.ais-landing .badge {
    display: inline-block;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    margin: 1px 2px;
}
body.ais-landing .badge-concept  { background-color: rgba(0,120,212,0.14);  color: #38bdf8; }
body.ais-landing .badge-howto    { background-color: rgba(245,158,11,0.14); color: #fcd34d; }
body.ais-landing .badge-tutorial { background-color: rgba(16,185,129,0.14); color: #34d399; }
body.ais-landing .badge-ref      { background-color: rgba(139,92,246,0.14); color: #c4b5fd; }
body.ais-landing .badge-faq      { background-color: rgba(249,115,22,0.14); color: #fdba74; }

/* ── Links and notes within landing page ────────────────────────── */
body.ais-landing .wh_topic_content a,
body.ais-landing .wh_topic_content a:visited { color: var(--link); }

body.ais-landing .wh_topic_content .note {
    background-color: rgba(0,120,212,0.07);
    border-left: 3px solid var(--s1);
    border-radius: 0 8px 8px 0;
    padding: 8px 12px;
    color: var(--text);
}

/* ── Responsive breakpoints ─────────────────────────────────────── */
@media (max-width: 900px) {
    body.ais-landing .card-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    body.ais-landing .card-row {
        grid-template-columns: 1fr;
    }
    body.ais-landing .wh_topic_content .title.topictitle1 {
        font-size: 24px;
    }
}