@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

@font-face {
  font-family: "NeoSansPro";
  src:
    url("https://developer.pricefx.eu/unit-components/public/fonts/neo-sans-pro/NeoSansStd-Bold.otf") format("opentype"),
    url("https://developer.pricefx.eu/unit-components/public/fonts/neo-sans-pro/NeoSansPro-Bold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NeoSansPro";
  src:
    url("https://developer.pricefx.eu/unit-components/public/fonts/neo-sans-pro/NeoSansStd-Medium.otf") format("opentype"),
    url("https://developer.pricefx.eu/unit-components/public/fonts/neo-sans-pro/NeoSansPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NeoSansPro";
  src:
    url("https://developer.pricefx.eu/unit-components/public/fonts/neo-sans-pro/NeoSansStd-Regular.otf") format("opentype"),
    url("https://developer.pricefx.eu/unit-components/public/fonts/neo-sans-pro/NeoSansPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --theme-headline-font: "Aptos", "Aptos Display", "Inter", "NeoSansPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --theme-text-font: "Aptos", "Inter", "NeoSansPro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Brand / accent */
  --pfx-accent-bg: #F0FDF4;        /* tile hover background (green-50, subtle) */
  --pfx-accent-border: #DCFCE7;    /* tile hover border (green-100) */
  --pfx-accent-strong: #047857;    /* emerald-700 — link/title hover */

  /* Text */
  --pfx-text-primary: #0f172a;     /* slate-900 */
  --pfx-text-muted: #6b7280;       /* gray-500 */
  --pfx-text-placeholder: #9ca3af; /* gray-400 */

  /* Surfaces */
  --pfx-surface: #ffffff;
  --pfx-surface-border: rgba(148, 163, 184, 0.18);
  --pfx-surface-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  --pfx-divider: rgba(15, 23, 42, 0.16);

  /* Tile */
  --pfx-tile-radius: 12px;
  --pfx-tile-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --pfx-transition: 160ms ease-out;
}

/* === LAYOUT: three cards in a row on desktop === */
[data-page-template="portal"] .home-page.body .content {
  max-width: 1480px;
  margin: 0 auto;
  /* Reduce top padding so cards sit closer to the banner */
  padding: 1rem 1rem 2rem;

  /* Use flex layout so cards stretch to the same height */
  display: flex;
  flex-wrap: wrap;
  /* Slightly tighter gaps between cards */
  gap: 1rem;
  align-items: stretch;
}

@media (max-width: 1699px) {
  [data-page-template="portal"] .home-page.body .content > .spaces {
    flex-basis: calc((100% - 1rem) / 2);
  }

  [data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(4),
  [data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(5) {
    flex-basis: 100%;
  }
}

[data-page-template="portal"] .home-page.body .content > .spaces {
  /* Each card becomes a flex column so inner content can stretch */
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - 2rem) / 3);
  margin: 0;
  font-size: 16px;
  box-sizing: border-box;

  background: var(--pfx-surface);
  border-radius: 16px;
  box-shadow: var(--pfx-surface-shadow);
  padding: 1.75rem;
  border: 1px solid var(--pfx-surface-border);
}

[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(4),
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(5) {
  flex-basis: 100%;
}

/* Stack cards on small screens */
@media (max-width: 900px) {
  [data-page-template="portal"] .home-page.body .content {
    flex-direction: column;
    gap: 1rem;
  }
  [data-page-template="portal"] .home-page.body .content > .spaces {
    flex: 1 1 100%;
    width: 100%;
    display: flex; /* keep column layout for card internals */
  }
}

/* Let the list area inside a card grow so all cards look balanced */
[data-page-template="portal"] .home-page.body .spaces .items.tiles {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* === LINKS UNDER EACH OTHER INSIDE A CARD === */

[data-page-template="portal"] .home-page.body .spaces .items.tiles {
  display: block;
  margin: 0;
  padding: 0;
}

/* Add subtle separators between tiles and align spacing */
[data-page-template="portal"] .home-page.body .spaces .items.tiles > li {
  margin: 0;
  padding: 0.6rem 0;
  border-bottom: none;
}

[data-page-template="portal"] .home-page.body .spaces .items.tiles > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Divider between items that remains visible with hover */
[data-page-template="portal"] .home-page.body .spaces .items.tiles > li + li {
  border-top: 1px solid var(--pfx-divider);
  padding-top: 0.85rem;
}

/* Make each tile a rounded frame */
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile {
  display: block;
  background: transparent;
  box-shadow: none;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, 
    box-shadow 160ms ease-out, transform 160ms ease-out;
}

[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile:hover,
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile:focus-within,
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile:has(a:focus-visible) {
  background: var(--pfx-accent-bg);
  border-color: var(--pfx-accent-border);
  box-shadow: var(--pfx-tile-shadow);
  transform: none;
}

/* Title picks up the accent colour when its tile is hovered/focused */
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile:hover .tile-title a,
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile:focus-within .tile-title a {
  color: var(--pfx-accent-strong);
}

[data-page-template="portal"] .home-page.body .spaces .tile-image {
  display: none;
}

/* Make separators more visible by applying them to the tile element itself. */
[data-page-template="portal"] .home-page.body .spaces .items.tiles > li .tile {
  margin-bottom: 0;
}

[data-page-template="portal"] .home-page.body .spaces .items.tiles > li:last-child .tile {
  margin-bottom: 0;
}

[data-page-template="portal"] .home-page.body .spaces .tile-title a {
  font-weight: 600;
  text-decoration: none;
  /* Slightly larger title for tiles */
  font-size: 1.25rem;
  white-space: nowrap;
  color: var(--pfx-text-primary);
  transition: color var(--pfx-transition);
}

[data-page-template="portal"] .home-page.body .spaces .tile-title a:hover {
  color: var(--pfx-accent-strong);
  text-decoration: none;
}

/* Tile descriptions: make them a medium grey and slightly smaller */
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile .tile-description,
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile .tile-excerpt,
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile .tile-body,
[data-page-template="portal"] .home-page.body .spaces .items.tiles > li p {
  color: var(--pfx-text-muted);
  font-size: 0.9rem;
  margin: 0.25rem 0 0;
  line-height: 1.35;
}

/* Card titles & icons */
[data-page-template="portal"] .home-page.body .content > .spaces h2:first-of-type,
[data-page-template="portal"] .home-page.body .content > .spaces .space-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0;
}

[data-page-template="portal"] .home-page.body .content > .spaces h2:first-of-type::before,
[data-page-template="portal"] .home-page.body .content > .spaces .space-title::before {
  content: "";
  display: inline-block;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* FIRST card icon */
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(1) h2:first-of-type::before,
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(1) .space-title::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2238%22%20height%3D%2238%22%20rx%3D%225.9375%22%20fill%3D%22%23F0F5FF%22%2F%3E%3Cpath%20d%3D%22M15.4375%2016.625H16.625C16.9399%2016.625%2017.242%2016.4999%2017.4647%2016.2772C17.6874%2016.0545%2017.8125%2015.7524%2017.8125%2015.4375C17.8125%2015.1226%2017.6874%2014.8205%2017.4647%2014.5978C17.242%2014.3751%2016.9399%2014.25%2016.625%2014.25H15.4375C15.1226%2014.25%2014.8205%2014.3751%2014.5978%2014.5978C14.3751%2014.8205%2014.25%2015.1226%2014.25%2015.4375C14.25%2015.7524%2014.3751%2016.0545%2014.5978%2016.2772C14.8205%2016.4999%2015.1226%2016.625%2015.4375%2016.625ZM15.4375%2019C15.1226%2019%2014.8205%2019.1251%2014.5978%2019.3478C14.3751%2019.5705%2014.25%2019.8726%2014.25%2020.1875C14.25%2020.5024%2014.3751%2020.8045%2014.5978%2021.0272C14.8205%2021.2499%2015.1226%2021.375%2015.4375%2021.375H22.5625C22.8774%2021.375%2023.1795%2021.2499%2023.4022%2021.0272C23.6249%2020.8045%2023.75%2020.5024%2023.75%2020.1875C23.75%2019.8726%2023.6249%2019.5705%2023.4022%2019.3478C23.1795%2019.1251%2022.8774%2019%2022.5625%2019H15.4375ZM28.5%2015.3662C28.4876%2015.2572%2028.4637%2015.1497%2028.4288%2015.0456V14.9387C28.3717%2014.8167%2028.2955%2014.7044%2028.2031%2014.6063L21.0781%207.48125C20.98%207.38888%2020.8677%207.31272%2020.7456%207.25562C20.7102%207.25059%2020.6742%207.25059%2020.6388%207.25562C20.5181%207.18644%2020.3849%207.14203%2020.2469%207.125H13.0625C12.1177%207.125%2011.2115%207.50033%2010.5434%208.16843C9.87533%208.83653%209.5%209.74267%209.5%2010.6875V27.3125C9.5%2028.2573%209.87533%2029.1635%2010.5434%2029.8316C11.2115%2030.4997%2012.1177%2030.875%2013.0625%2030.875H24.9375C25.8823%2030.875%2026.7885%2030.4997%2027.4566%2029.8316C28.1247%2029.1635%2028.5%2028.2573%2028.5%2027.3125V15.4375C28.5%2015.4375%2028.5%2015.4375%2028.5%2015.3662ZM21.375%2011.1744L24.4506%2014.25H22.5625C22.2476%2014.25%2021.9455%2014.1249%2021.7228%2013.9022C21.5001%2013.6795%2021.375%2013.3774%2021.375%2013.0625V11.1744ZM26.125%2027.3125C26.125%2027.6274%2025.9999%2027.9295%2025.7772%2028.1522C25.5545%2028.3749%2025.2524%2028.5%2024.9375%2028.5H13.0625C12.7476%2028.5%2012.4455%2028.3749%2012.2228%2028.1522C12.0001%2027.9295%2011.875%2027.6274%2011.875%2027.3125V10.6875C11.875%2010.3726%2012.0001%2010.0705%2012.2228%209.84781C12.4455%209.62511%2012.7476%209.5%2013.0625%209.5H19V13.0625C19%2014.0073%2019.3753%2014.9135%2020.0434%2015.5816C20.7115%2016.2497%2021.6177%2016.625%2022.5625%2016.625H26.125V27.3125ZM22.5625%2023.75H15.4375C15.1226%2023.75%2014.8205%2023.8751%2014.5978%2024.0978C14.3751%2024.3205%2014.25%2024.6226%2014.25%2024.9375C14.25%2025.2524%2014.3751%2025.5545%2014.5978%2025.7772C14.8205%2025.9999%2015.1226%2026.125%2015.4375%2026.125H22.5625C22.8774%2026.125%2023.1795%2025.9999%2023.4022%2025.7772C23.6249%2025.5545%2023.75%2025.2524%2023.75%2024.9375C23.75%2024.6226%2023.6249%2024.3205%2023.4022%2024.0978C23.1795%2023.8751%2022.8774%2023.75%2022.5625%2023.75Z%22%20fill%3D%22%236C8DD0%22%2F%3E%3C%2Fsvg%3E");
}

/* SECOND card icon */
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(2) h2:first-of-type::before,
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(2) .space-title::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2239%22%20height%3D%2238%22%20viewBox%3D%220%200%2039%2038%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.666672%22%20width%3D%2238%22%20height%3D%2238%22%20rx%3D%225.9375%22%20fill%3D%22%23F4F2FF%22%2F%3E%3Cpath%20d%3D%22M12.5417%2011.875C12.5417%2011.2451%2012.7919%2010.641%2013.2373%2010.1956C13.6827%209.75022%2014.2868%209.5%2014.9167%209.5C15.2316%209.5%2015.5337%209.37489%2015.7564%209.15219C15.9791%208.92949%2016.1042%208.62744%2016.1042%208.3125C16.1042%207.99756%2015.9791%207.69551%2015.7564%207.47281C15.5337%207.25011%2015.2316%207.125%2014.9167%207.125C13.6569%207.125%2012.4487%207.62545%2011.5579%208.51624C10.6671%209.40704%2010.1667%2010.6152%2010.1667%2011.875V15.4375C10.1667%2016.0674%209.91645%2016.6715%209.47105%2017.1169C9.02565%2017.5623%208.42156%2017.8125%207.79167%2017.8125C7.47673%2017.8125%207.17468%2017.9376%206.95198%2018.1603C6.72928%2018.383%206.60417%2018.6851%206.60417%2019C6.60417%2019.3149%206.72928%2019.617%206.95198%2019.8397C7.17468%2020.0624%207.47673%2020.1875%207.79167%2020.1875C8.42156%2020.1875%209.02565%2020.4377%209.47105%2020.8831C9.91645%2021.3285%2010.1667%2021.9326%2010.1667%2022.5625V26.125C10.1667%2027.3848%2010.6671%2028.593%2011.5579%2029.4838%2012.4487%2030.3746%2013.6569%2030.875%2014.9167%2030.875C15.2316%2030.875%2015.5337%2030.7499%2015.7564%2030.5272C15.9791%2030.3045%2016.1042%2030.0024%2016.1042%2029.6875C16.1042%2029.3726%2015.9791%2029.0705%2015.7564%2028.8478C15.5337%2028.6251%2015.2316%2028.5%2014.9167%2028.5C14.2868%2028.5%2013.6827%2028.2498%2013.2373%2027.8044C12.7919%2027.359%2012.5417%2026.7549%2012.5417%2026.125V22.5625C12.5379%2021.8863%2012.3897%2021.2186%2012.1071%2020.6043C11.8245%2019.9899%2011.4139%2019.4429%2010.9029%2019C11.4139%2018.5571%2011.8245%2018.0101%2012.1071%2017.3957C12.3897%2016.7814%2012.5379%2016.1137%2012.5417%2015.4375V11.875ZM31.5417%2017.8125C30.9118%2017.8125%2030.3077%2017.5623%2029.8623%2017.1169C29.4169%2016.6715%2029.1667%2016.0674%2029.1667%2015.4375V11.875C29.1667%2010.6152%2028.6662%209.40704%2027.7754%208.51624C26.8846%207.62545%2025.6765%207.125%2024.4167%207.125C24.1017%207.125%2023.7997%207.25011%2023.577%207.47281C23.3543%207.69551%2023.2292%207.99756%2023.2292%208.3125C23.2292%208.62744%2023.3543%208.92949%2023.577%209.15219C23.7997%209.37489%2024.1017%209.5%2024.4167%209.5C25.0466%209.5%2025.6507%209.75022%2026.096%2010.1956C26.5414%2010.641%2026.7917%2011.2451%2026.7917%2011.875V15.4375C26.7955%2016.1137%2026.9437%2016.7814%2027.2263%2017.3957C27.5089%2018.0101%2027.9194%2018.5571%2028.4304%2019C27.9194%2019.4429%2027.5089%2019.9899%2027.2263%2020.6043C26.9437%2021.2186%2026.7955%2021.8863%2026.7917%2022.5625V26.125C26.7917%2026.7549%2026.5414%2027.359%2026.096%2027.8044C25.6507%2028.2498%2025.0466%2028.5%2024.4167%2028.5C24.1017%2028.5%2023.7997%2028.6251%2023.577%2028.8478C23.3543%2029.0705%2023.2292%2029.3726%2023.2292%2029.6875C23.2292%2030.0024%2023.3543%2030.3045%2023.577%2030.5272C23.7997%2030.7499%2024.1017%2030.875%2024.4167%2030.875C25.6765%2030.875%2026.8846%2030.3746%2027.7754%2029.4838C28.6662%2028.593%2029.1667%2027.3848%2029.1667%2026.125V22.5625C29.1667%2021.9326%2029.4169%2021.3285%2029.8623%2020.8831C30.3077%2020.4377%2030.9118%2020.1875%2031.5417%2020.1875C31.8566%2020.1875%2032.1587%2020.0624%2032.3814%2019.8397C32.6041%2019.617%2032.7292%2019.3149%2032.7292%2019C32.7292%2018.6851%2032.6041%2018.383%2032.3814%2018.1603C32.1587%2017.9376%2031.8566%2017.8125%2031.5417%2017.8125Z%22%20fill%3D%22%23907CC0%22%2F%3E%3C%2Fsvg%3E");
}

/* THIRD card icon */
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(3) h2:first-of-type::before,
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(3) .space-title::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2239%22%20height%3D%2238%22%20viewBox%3D%220%200%2039%2038%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.333374%22%20width%3D%2238%22%20height%3D%2238%22%20rx%3D%225.9375%22%20fill%3D%22%23EDFFDB%22%2F%3E%3Cpath%20d%3D%22M30.864%2023.2513L25.4965%2017.8956C25.6088%2017.3486%2025.6645%2016.7915%2025.6628%2016.2331C25.6623%2014.702%2025.276%2013.1957%2024.5393%2011.8535C23.8027%2010.5113%2022.7395%209.37637%2021.4482%208.55375C20.1569%207.73112%2018.679%207.24731%2017.1512%207.14703C15.6234%207.04675%2014.0949%207.33324%2012.7071%207.98001C12.5313%208.06033%2012.3777%208.18236%2012.2598%208.3355C12.1418%208.48864%2012.063%208.66826%2012.0303%208.85876C11.9976%209.04685%2012.0108%209.24003%2012.0687%209.42194C12.1265%209.60386%2012.2274%209.76913%2012.3628%209.90376L17.5284%2015.0575L15.3909%2017.195L10.2371%2012.0294C10.1014%2011.8962%209.93557%2011.7975%209.75371%2011.7417C9.57186%2011.6859%209.37926%2011.6746%209.19213%2011.7088C9.00282%2011.7403%208.82399%2011.8173%208.67094%2011.9332C8.5179%2012.049%208.39521%2012.2002%208.31338%2012.3738C7.66444%2013.7661%207.3782%2015.3%207.48129%2016.8327C7.58438%2018.3654%208.07344%2019.8471%208.90299%2021.14C9.73254%2022.4329%2010.8756%2023.495%2012.2259%2024.2275C13.5762%2024.9599%2015.0898%2025.339%2016.6259%2025.3294C17.1843%2025.3312%2017.7414%2025.2755%2018.2884%2025.1631L23.644%2030.5306C23.7544%2030.6419%2023.8857%2030.7303%2024.0304%2030.7906C24.1752%2030.8509%2024.3304%2030.8819%2024.4871%2030.8819C24.6439%2030.8819%2024.7991%2030.8509%2024.9438%2030.7906C25.0885%2030.7303%2025.2199%2030.6419%2025.3303%2030.5306C25.4416%2030.4202%2025.5299%2030.2889%2025.5902%2030.1442C25.6505%2029.9995%2025.6815%2029.8443%2025.6815%2029.6875C25.6815%2029.5308%2025.6505%2029.3755%2025.5902%2029.2308C25.5299%2029.0861%2025.4416%2028.9548%2025.3303%2028.8444L19.5115%2023.0256C19.3661%2022.8812%2019.1858%2022.7768%2018.9881%2022.7227C18.7904%2022.6686%2018.5821%2022.6666%2018.3834%2022.7169C17.81%2022.8704%2017.2194%2022.9502%2016.6259%2022.9544C15.7377%2022.9622%2014.8567%2022.7942%2014.0337%2022.4601C13.2107%2022.126%2012.462%2021.6324%2011.8306%2021.0076C11.1993%2020.3828%2010.6977%2019.6393%2010.355%2018.8199C10.0122%2018.0005%209.83491%2017.1214%209.83338%2016.2331C9.83184%2015.8353%209.86362%2015.4381%209.92838%2015.0456L14.5834%2019.7125C14.6938%2019.8238%2014.8251%2019.9122%2014.9698%2019.9724C15.1145%2020.0327%2015.2697%2020.0638%2015.4265%2020.0638C15.5833%2020.0638%2015.7385%2020.0327%2015.8832%2019.9724C16.0279%2019.9122%2016.1592%2019.8238%2016.2696%2019.7125L20.0459%2015.9006C20.2599%2015.6792%2020.3796%2015.3833%2020.3796%2015.0753C20.3796%2014.7674%2020.2599%2014.4714%2020.0459%2014.25L15.4265%209.59501C15.8191%209.5309%2016.2162%209.49913%2016.614%209.50001C18.3977%209.50316%2020.1072%2010.2139%2021.3674%2011.4763C22.6275%2012.7387%2023.3353%2014.4495%2023.3353%2016.2331C23.3311%2016.8267%2023.2513%2017.4173%2023.0978%2017.9906C23.0475%2018.1893%2023.0495%2018.3977%2023.1036%2018.5953C23.1577%2018.793%2023.2621%2018.9734%2023.4065%2019.1188L29.2253%2024.9375C29.4489%2025.1611%2029.7521%2025.2867%2030.0684%2025.2867C30.3846%2025.2867%2030.6879%2025.1611%2030.9115%2024.9375C31.1351%2024.7139%2031.2607%2024.4106%2031.2607%2024.0944C31.2607%2023.7782%2031.1351%2023.4749%2030.9115%2023.2513H30.864Z%22%20fill%3D%22%23739B4B%22%2F%3E%3C%2Fsvg%3E");
}

/* FOURTH card icon (What's New) */
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(4) h2:first-of-type::before,
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(4) .space-title::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2238%22%20height%3D%2238%22%20viewBox%3D%220%200%2038%2038%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%2238%22%20height%3D%2238%22%20rx%3D%225.9375%22%20fill%3D%22%23FFF5E8%22%2F%3E%3Cpath%20d%3D%22M14.8333%2013.0625H23.1458M14.8333%2017.8125H20.7708M14.8333%2022.5625H19.5833M26.7083%2010.6875V27.3125C26.7083%2027.9424%2026.4581%2028.5465%2026.0127%2028.9919C25.5673%2029.4373%2024.9632%2029.6875%2024.3333%2029.6875H13.6458C13.0159%2029.6875%2012.4119%2029.4373%2011.9665%2028.9919C11.521%2028.5465%2011.2708%2027.9424%2011.2708%2027.3125V10.6875C11.2708%2010.0576%2011.521%209.45352%2011.9665%209.00812C12.4119%208.56272%2013.0159%208.3125%2013.6458%208.3125H24.3333C24.9632%208.3125%2025.5673%208.56272%2026.0127%209.00812C26.4581%209.45352%2026.7083%2010.0576%2026.7083%2010.6875Z%22%20stroke%3D%22%23C97C2E%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M24.9278%2015.2246L26.1153%2013.0918L27.3028%2015.2246L29.4356%2016.4121L27.3028%2017.5996L26.1153%2019.7324L24.9278%2017.5996L22.795%2016.4121L24.9278%2015.2246Z%22%20fill%3D%22%23E79A41%22%2F%3E%3C%2Fsvg%3E");
}

/* FIFTH card icon (Learning Resources) */
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(5) h2:first-of-type::before,
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(5) .space-title::before {
  background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='38' height='38' rx='6' fill='%23E9F7FF'/%3E%3Cpath d='M11.9 13.4C11.9 12.36 12.74 11.52 13.78 11.52H24.22C25.26 11.52 26.1 12.36 26.1 13.4V24.6C26.1 25.64 25.26 26.48 24.22 26.48H13.78C12.74 26.48 11.9 25.64 11.9 24.6V13.4ZM14.27 14.48V23.52L18.42 21.05C18.79 20.83 19.25 20.83 19.62 21.05L23.73 23.5V14.48H14.27Z' fill='%230E7490'/%3E%3C/svg%3E");
}

/* Learning Resources: make tiles look like the richer sections even without HTML descriptions */
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(5) .tile-title {
  display: flex;
  align-items: center;
  gap: 0.72rem;
}

[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(5) .tile .tile-body::after {
  display: block;
  margin-top: 0.33rem;
  color: var(--pfx-text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(5) .tile:has(a[href="/project-managers-knowledge-base"]) .tile-body::after {
  content: "Playbooks and guidance for project leadership and customer delivery.";
}

[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(5) .tile:has(a[href="/technical-delivery-roles"]) .tile-body::after {
  content: "Role-based resources for solution architects, engineers, and delivery teams.";
}

[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(5) .tile:has(a[href="/pricefx-training"]) .tile-body::after {
  content: "Learning paths and onboarding materials to build Pricefx product skills.";
}
/* Force left-alignment inside all tiles */
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile,
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile * {
  text-align: left !important;
}

/* === UX tweak: Bigger tiles & rounded hero (user request) === */
/* Make tiles feel larger and more touch-friendly */
[data-page-template="portal"] .home-page.body .content > .spaces {
  padding: 2.25rem; /* increased card padding */
  border-radius: 20px; /* slightly rounder card container */
}

[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile {
  padding: 0.9rem 1rem; /* larger hit area */
  border-radius: 12px; /* more rounded tiles */
}

[data-page-template="portal"] .home-page.body .spaces .tile-title a {
  font-size: 1.1rem; /* keep one-line titles on standard desktop widths */
}

[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile .tile-description,
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile .tile-excerpt,
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile .tile-body,
[data-page-template="portal"] .home-page.body .spaces .items.tiles > li p {
  font-size: 0.95rem; /* slightly larger body text */
}

/* Top 3 cards: uniform description heights so titles align row-by-row across cards */
[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3)) .items.tiles > li .tile-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.35;
  min-height: calc(2 * 0.95rem * 1.35); /* exactly 2 lines at the pinned size ≈ 2.565rem */
  margin: 0.25rem 0 0;
  padding: 0;
}

/* Rounded hero containers: try common hero/banner selectors */
[data-page-template="portal"] .home-page.body .hero,
[data-page-template="portal"] .home-page.body .banner,
[data-page-template="portal"] .home-page.body .portal-hero,
[data-page-template="portal"] .home-page.body .page-hero {
  border-radius: 18px;
  overflow: hidden; /* clip background/illustration edges */
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

/* Homepage banner: match visual layout from reference */
[data-page-template="portal"] .home-page.body > .banner {
  max-width: 1480px;
  margin: 1.1rem auto 1.65rem;
  padding: 3rem 2rem 4.5rem;
  border-radius: 18px;
  position: relative;
  z-index: 20;
  overflow: visible;
  text-align: center;
  background-size: cover;
  background-position: center;
}

[data-page-template="portal"] .home-page.body > .banner hgroup {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

[data-page-template="portal"] .home-page.body > .banner h1 {
  margin: 0;
  font-size: clamp(2rem, 3.1vw, 3rem);
  line-height: 1.12;
}

[data-page-template="portal"] .home-page.body > .banner hgroup p {
  margin: 0;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  opacity: 0.95;
}

[data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"] {
  display: block;
  width: calc(100% - 2rem);
  max-width: 1440px;
  margin: 1.25rem auto 0;
  position: relative;
  z-index: 30;
}

[data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"]::after {
  content: "Type to find...";
  position: absolute;
  left: 3.15rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pfx-text-placeholder);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

[data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"]:focus-within::after {
  opacity: 0;
}

[data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"]:has(.search-bar__input-container)::after {
  content: none;
}

[data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"]:has(input:not(:placeholder-shown))::after,
[data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"]:has(input[value]:not([value=""]))::after,
[data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"]:has([aria-expanded="true"])::after {
  opacity: 0;
}

/* Fallback for deployed rendering where search-bar internal container is used */
[data-page-template="portal"] .home-page.body > .banner [data-component="search-bar"] .search-bar__input-container {
  position: relative;
}

[data-page-template="portal"] .home-page.body > .banner [data-component="search-bar"] .search-bar__input-container::after {
  content: "Type to find...";
  position: absolute;
  left: 2.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pfx-text-placeholder);
  font-size: 1rem;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

[data-page-template="portal"] .home-page.body > .banner [data-component="search-bar"] .search-bar__input-container:focus-within::after,
[data-page-template="portal"] .home-page.body > .banner [data-component="search-bar"] .search-bar__input-container:has(.search-input__input:not(:placeholder-shown))::after,
[data-page-template="portal"] .home-page.body > .banner [data-component="search-bar"] .search-bar__input-container:has(.search-input__input[value]:not([value=""]))::after,
[data-page-template="portal"] .home-page.body > .banner [data-component="search-bar"] .search-bar__input-container:has([aria-expanded="true"])::after {
  opacity: 0;
}

[data-page-template="portal"] .home-page.body > .content {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  /* Keep tiles roomy on mobile but don't force large desktop paddings */
  [data-page-template="portal"] .home-page.body > .banner {
    padding: 2rem 1.1rem 3rem;
    margin-bottom: 1rem;
  }

  [data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"] {
    width: 100%;
    margin-top: 1rem;
  }

  [data-page-template="portal"] .home-page.body .content > .spaces {
    padding: 1.25rem;
    border-radius: 14px;
  }
  [data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile {
    padding: 0.75rem 0.9rem;
  }
}

/* === Drawer nav: style only the What’s New item like the section heading === */
[data-page-template="portal"] :is(.drawer-nav, .drawer-links) .tree-item:has(> .tree-item-header > a#36e65c39f83b8df9-10) {
  border-block-end: none;
  margin-block-start: 0.75rem;
}

[data-page-template="portal"] :is(.drawer-nav, .drawer-links) .tree-item:has(> .tree-item-header > a#36e65c39f83b8df9-10) > .tree-item-header {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

[data-page-template="portal"] :is(.drawer-nav, .drawer-links) .tree-item > .tree-item-header:has(> a#36e65c39f83b8df9-10)::before {
  content: none;
}

[data-page-template="portal"] :is(.drawer-nav, .drawer-links) .tree-item > .tree-item-header > a#36e65c39f83b8df9-10 {
  color: #202124;
  font-size: clamp(1.9rem, 2.3vw, 2.4rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.015em;
}

[data-page-template="portal"] :is(.drawer-nav, .drawer-links) .tree-item > .tree-item-header:has(> a#36e65c39f83b8df9-10):is(:hover, :has(:focus-visible)) {
  background: transparent;
}

/* === Footer links: 3 titled columns === */

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links {
  display: grid;
  --footer-section-gap: 1.65rem;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  column-gap: 4rem;
  row-gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li {
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(1),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(2),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(3),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(4) {
  grid-column: 1;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(5),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(6),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(7),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(8) {
  grid-column: 2;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(9),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(10),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(11),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(12) {
  grid-column: 3;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(13),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(14),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(15),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(16) {
  grid-column: 4;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(1),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(5),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(9) {
  grid-row: 1;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(2),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(6),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(10) {
  grid-row: 2;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(3),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(7),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(11) {
  grid-row: 3;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(4),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(8),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(12) {
  grid-row: 4;
}

/* Extra gap between column heading and its first link — applied to the
   first li so the space sits below the heading, not below the first link */

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(13),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(14),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(15),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(16) {
  grid-row: 1;
  justify-self: start;
  margin-top: var(--footer-section-gap);
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(13) {
  margin-left: 0;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(14) {
  margin-left: 2.2rem;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(15) {
  margin-left: 4.4rem;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(16) {
  margin-left: 6.6rem;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(1),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(5),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(9),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(13) {
  position: relative;
  margin-top: var(--footer-section-gap);
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(1),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(5),
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(9) {
  padding-top: 0.6rem;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(1)::before,
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(5)::before,
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(9)::before,
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(13)::before {
  position: absolute;
  top: -1.75rem;
  left: 0;
  font-size: calc(var(--K15t-font-size-small) * 1.4);
  font-weight: 500;
  line-height: 1.1;
  color: #ffffff;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(1)::before {
  content: "Resources";
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(5)::before {
  content: "Company";
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(9)::before {
  content: "Legal";
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(13)::before {
  content: "Network";
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(13) > a,
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(14) > a,
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(15) > a,
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(16) > a {
  width: 1.35rem;
  height: 1.35rem;
  display: inline-block;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(13) > a {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M24%2012.07C24%205.4%2018.63%200%2012%200S0%205.4%200%2012.07C0%2018.1%204.39%2023.09%2010.13%2024v-8.44H7.08V12.1h3.05V9.46c0-3.02%201.79-4.69%204.53-4.69%201.31%200%202.68.24%202.68.24v2.97h-1.51c-1.49%200-1.96.93-1.96%201.88v2.25h3.34l-.53%203.46h-2.81V24C19.61%2023.09%2024%2018.1%2024%2012.07z%27/%3E%3C/svg%3E");
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(14) > a {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M18.9%202.25h3.68l-8.05%209.2L24%2021.75h-7.41l-5.8-6.62-5.8%206.62H1.31l8.62-9.86L0%202.25h7.6l5.24%205.99%206.06-5.99zm-1.3%2017.28h2.04L6.5%204.38H4.3z%27/%3E%3C/svg%3E");
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(15) > a {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M7.75%202h8.5A5.75%205.75%200%200%201%2022%207.75v8.5A5.75%205.75%200%200%201%2016.25%2022h-8.5A5.75%205.75%200%200%201%202%2016.25v-8.5A5.75%205.75%200%200%201%207.75%202zm8.36%201.73h-8.22a4.16%204.16%200%200%200-4.16%204.16v8.22a4.16%204.16%200%200%200%204.16%204.16h8.22a4.16%204.16%200%200%200%204.16-4.16V7.89a4.16%204.16%200%200%200-4.16-4.16zm.99%201.23a1.08%201.08%200%201%201%200%202.16%201.08%201.08%200%200%201%200-2.16zM12%206.42A5.58%205.58%200%201%201%206.42%2012%205.58%205.58%200%200%201%2012%206.42zm0%201.73A3.85%203.85%200%201%200%2015.85%2012%203.85%203.85%200%200%200%2012%208.15z%27/%3E%3C/svg%3E");
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links > li:nth-child(16) > a {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23fff%27%20d%3D%27M12%200C5.37%200%200%205.37%200%2012c0%205.3%203.44%209.8%208.2%2011.39.6.11.82-.26.82-.58%200-.29-.01-1.04-.02-2.04-3.34.73-4.04-1.61-4.04-1.61-.55-1.38-1.34-1.74-1.34-1.74-1.1-.75.08-.74.08-.74%201.21.09%201.84%201.24%201.84%201.24%201.08%201.85%202.83%201.31%203.52%201%20.11-.78.42-1.31.76-1.61-2.67-.31-5.47-1.34-5.47-5.95%200-1.31.47-2.38%201.24-3.22-.12-.31-.54-1.56.12-3.26%200%200%201.01-.32%203.3%201.23.96-.27%201.98-.4%203-.41%201.02.01%202.04.14%203%20.41%202.28-1.55%203.29-1.23%203.29-1.23.66%201.7.24%202.95.12%203.26.77.84%201.24%201.91%201.24%203.22%200%204.62-2.8%205.64-5.48%205.94.43.37.82%201.1.82%202.22%200%201.6-.01%202.88-.01%203.27%200%20.32.21.7.83.58C20.57%2021.8%2024%2017.3%2024%2012c0-6.63-5.37-12-12-12z%27/%3E%3C/svg%3E");
}


:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links a {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  font-size: var(--K15t-font-size-small);
  line-height: 1.35;
  font-weight: 400;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer .footer-links a:is(:hover, :focus-visible) {
  color: #5d9dff;
  text-decoration: none;
}

/* === Footer bottom bar: divider above copyright, hide attribution === */
.footer .footer-content {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
}

.footer .footer-content > li:nth-child(2) {
  font-size: 0.7rem;
  opacity: 0.45;
}

.footer .footer-content > li:nth-child(2) a {
  color: inherit;
  text-decoration: none;
}

.footer .footer-content > li:nth-child(2) a:is(:hover, :focus-visible) {
  opacity: 1;
  text-decoration: underline;
}

/* === Release banner at the bottom of the landing page === */
[data-page-template="portal"] {
  --release-banner-image: url("https://pricefx.atlassian.net/wiki/download/attachments/60030989/BlackCatReleaseBanner.png");
}

[data-page-template="portal"] .home-page.body .content::after {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 16 / 4;
  margin-top: 1.5rem;
  border-radius: 12px;
  background-image: var(--release-banner-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media (max-width: 900px) {
  [data-page-template="portal"] .home-page.body .content::after {
    aspect-ratio: 16 / 6;
  }
}

/* === Featured + Other Resources categories: 3-column grid of tiles === */
[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .items.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

@media (max-width: 900px) {
  [data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .items.tiles {
    grid-template-columns: 1fr;
  }
}

[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .items.tiles > li {
  border-top: none;
  border-bottom: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .items.tiles > li .tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .items.tiles > li .tile:hover {
  transform: translateY(-2px);
  border-color: #d1d5db;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

/* Allow long titles to wrap (global rule at line 195 forces nowrap) */
[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .items.tiles > li,
[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .items.tiles > li .tile,
[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .tile-body,
[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .tile-title {
  min-width: 0;
  max-width: 100%;
}

[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .tile-title {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .tile-title a {
  display: block;
  max-width: 100%;
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  font-size: 1.05rem;
  line-height: 1.35;
}

/* Let the tile body stretch so bottom affordances / descriptions align */
[data-page-template="portal"] .home-page.body .content > .spaces:is(:nth-of-type(4), :nth-of-type(5)) .tile .tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* Hardcoded "Read more" affordance on each Featured tile.
   Scoped to Featured (:nth-of-type(4)) only — Other Resources
   (:nth-of-type(5)) uses ::after for description text instead. */
[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(4) .tile .tile-body::after {
  content: "Read more →";
  display: block;
  margin-top: auto;
  padding-top: 0.9rem;
  color: #2563eb;
  font-size: 0.92rem;
  font-weight: 500;
}

[data-page-template="portal"] .home-page.body .content > .spaces:nth-of-type(4) .items.tiles > li .tile:hover .tile-body::after {
  text-decoration: underline;
}


/* === Header Support flyout menu === */
@media screen and (min-width: 1024px) {
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul {
    position: relative;
    --support-menu-width: min(700px, calc(100vw - 3rem));
    --support-menu-column-width: calc(var(--support-menu-width) / 2);
    --support-menu-top: calc(100% + 0.9rem);
    --support-menu-second-row-top: calc(100% + 5.95rem);
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(3) {
    position: relative;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(3) > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(3) > a::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.08rem);
    transform-origin: center;
    transition: transform 160ms ease;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(5),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(7) {
    position: absolute;
    top: var(--support-menu-top);
    z-index: 30;
    width: calc(var(--support-menu-column-width) - 0.75rem);
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.35rem);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(5) {
    left: calc(50% - var(--support-menu-column-width));
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(7) {
    left: 50%;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6) {
    top: var(--support-menu-top);
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(5),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(7) {
    top: var(--support-menu-second-row-top);
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4)::before,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6)::before {
    content: "";
    position: absolute;
    inset: -1.2rem 0 auto;
    height: 1.2rem;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4)::after,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6)::after {
    position: absolute;
    top: 1.15rem;
    left: 1.5rem;
    right: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #d1d5db;
    color: #666666;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4)::after {
    content: "Helpdesk Login";
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6)::after {
    content: "How to Use Helpdesk";
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6) {
    padding-top: 3rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(5),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(7) {
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6) {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(5),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(7) {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(7) {
    border-left: 1px solid #d1d5db;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4) > a,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(5) > a,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6) > a,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(7) > a {
    display: block;
    position: relative;
    padding: 0.85rem 1.5rem 0.85rem 2.4rem;
    color: #202124;
    background: transparent;
    text-decoration: none;
    white-space: normal;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4) > a::before,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(5) > a::before,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6) > a::before,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(7) > a::before {
    content: "\2022";
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: #111827;
    font-size: 1rem;
    line-height: 1;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(4) > a:is(:hover, :focus-visible),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(5) > a:is(:hover, :focus-visible),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(6) > a:is(:hover, :focus-visible),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(7) > a:is(:hover, :focus-visible) {
    background: #f3f4f6;
    outline: none;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul:is(
    :has(> li:nth-child(3):is(:hover, :focus-within)),
    :has(> li:nth-child(4):is(:hover, :focus-within)),
    :has(> li:nth-child(5):is(:hover, :focus-within)),
    :has(> li:nth-child(6):is(:hover, :focus-within)),
    :has(> li:nth-child(7):is(:hover, :focus-within))
  ) > li:nth-child(4),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul:is(
    :has(> li:nth-child(3):is(:hover, :focus-within)),
    :has(> li:nth-child(4):is(:hover, :focus-within)),
    :has(> li:nth-child(5):is(:hover, :focus-within)),
    :has(> li:nth-child(6):is(:hover, :focus-within)),
    :has(> li:nth-child(7):is(:hover, :focus-within))
  ) > li:nth-child(5),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul:is(
    :has(> li:nth-child(3):is(:hover, :focus-within)),
    :has(> li:nth-child(4):is(:hover, :focus-within)),
    :has(> li:nth-child(5):is(:hover, :focus-within)),
    :has(> li:nth-child(6):is(:hover, :focus-within)),
    :has(> li:nth-child(7):is(:hover, :focus-within))
  ) > li:nth-child(6),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul:is(
    :has(> li:nth-child(3):is(:hover, :focus-within)),
    :has(> li:nth-child(4):is(:hover, :focus-within)),
    :has(> li:nth-child(5):is(:hover, :focus-within)),
    :has(> li:nth-child(6):is(:hover, :focus-within)),
    :has(> li:nth-child(7):is(:hover, :focus-within))
  ) > li:nth-child(7) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul:is(
    :has(> li:nth-child(3):is(:hover, :focus-within)),
    :has(> li:nth-child(4):is(:hover, :focus-within)),
    :has(> li:nth-child(5):is(:hover, :focus-within)),
    :has(> li:nth-child(6):is(:hover, :focus-within)),
    :has(> li:nth-child(7):is(:hover, :focus-within))
  ) > li:nth-child(3) > a::after {
    transform: rotate(225deg) translateY(-0.02rem);
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(8) {
    position: relative;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(8) > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(8) > a::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.08rem);
    transform-origin: center;
    transition: transform 160ms ease;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(9),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(10) {
    position: absolute;
    left: 50%;
    top: calc(100% + 1rem);
    z-index: 30;
    width: min(330px, calc(100vw - 3rem));
    margin: 0;
    list-style: none;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -0.35rem);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(9) {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(10) {
    top: calc(100% + 3.55rem);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(9)::before {
    content: "";
    position: absolute;
    inset: -1rem 0 auto;
    height: 1rem;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(9) > a,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(10) > a {
    display: block;
    position: relative;
    padding: 0.85rem 1.5rem 0.85rem 2.4rem;
    color: #202124;
    background: transparent;
    text-decoration: none;
    white-space: normal;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(9) > a::before,
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(10) > a::before {
    content: "\2022";
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: #111827;
    font-size: 1rem;
    line-height: 1;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(9) > a:is(:hover, :focus-visible),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul > li:nth-child(10) > a:is(:hover, :focus-visible) {
    background: #f3f4f6;
    outline: none;
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul:is(
    :has(> li:nth-child(8):is(:hover, :focus-within)),
    :has(> li:nth-child(9):is(:hover, :focus-within)),
    :has(> li:nth-child(10):is(:hover, :focus-within))
  ) > li:nth-child(9),
  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul:is(
    :has(> li:nth-child(8):is(:hover, :focus-within)),
    :has(> li:nth-child(9):is(:hover, :focus-within)),
    :has(> li:nth-child(10):is(:hover, :focus-within))
  ) > li:nth-child(10) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  :is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .header-links ul:is(
    :has(> li:nth-child(8):is(:hover, :focus-within)),
    :has(> li:nth-child(9):is(:hover, :focus-within)),
    :has(> li:nth-child(10):is(:hover, :focus-within))
  ) > li:nth-child(8) > a::after {
    transform: rotate(225deg) translateY(-0.02rem);
  }
}

/* ============================================================
   === 2026 polish: mesh hero, eyebrow labels, scroll motion ===
   ============================================================ */

/* Hero: replace the striped background image with a rich CSS mesh
   gradient + film grain. Pure CSS, no asset swap needed. */
[data-page-template="portal"] .home-page.body > .banner {
  position: relative;
  isolation: isolate;
}

[data-page-template="portal"] .home-page.body > .banner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 90% at 8% 12%,  rgba(52, 211, 153, 0.70) 0%, transparent 60%),
    radial-gradient(ellipse 65% 80% at 95% 18%, rgba(59, 130, 246, 0.60) 0%, transparent 62%),
    radial-gradient(ellipse 85% 95% at 82% 105%, rgba(16, 185, 129, 0.55) 0%, transparent 62%),
    radial-gradient(ellipse 75% 90% at 12% 108%, rgba(14, 165, 233, 0.50) 0%, transparent 60%);
  mix-blend-mode: overlay;
  opacity: 1;
}

/* Subtle grain layer — tiny inline SVG noise, no extra HTTP request */
[data-page-template="portal"] .home-page.body > .banner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Keep hero content above the overlays */
[data-page-template="portal"] .home-page.body > .banner > * {
  position: relative;
  z-index: 1;
}

/* Tighter, bolder headline hierarchy */
[data-page-template="portal"] .home-page.body > .banner h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(2.25rem, 3.4vw, 3.4rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

[data-page-template="portal"] .home-page.body > .banner hgroup p {
  font-weight: 400;
  opacity: 0.92;
}

/* Search bar: larger pill, soft elevation, accent focus ring */
[data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"] {
  max-width: 760px;
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 18px 40px -18px rgba(15, 23, 42, 0.45),
    0 2px 6px rgba(15, 23, 42, 0.12);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}

[data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"]:focus-within {
  box-shadow:
    0 0 0 4px rgba(16, 185, 129, 0.28),
    0 22px 50px -18px rgba(15, 23, 42, 0.55),
    0 2px 6px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

/* Section headings → eyebrow style above the card title */
[data-page-template="portal"] .home-page.body .content > .spaces h2:first-of-type {
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  font-weight: 700;
  color: var(--pfx-text-primary);
  padding-bottom: 0.85rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--pfx-divider);
}

/* Card lift on hover — whole `.spaces` card responds */
[data-page-template="portal"] .home-page.body .content > .spaces {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease-out;
  will-change: transform;
}

[data-page-template="portal"] .home-page.body .content > .spaces:hover {
  transform: translateY(-3px);
  box-shadow:
    0 24px 48px -20px rgba(15, 23, 42, 0.22),
    0 4px 12px rgba(15, 23, 42, 0.06);
  border-color: rgba(16, 185, 129, 0.35);
}

/* Individual tile row gets a crisp accent bar on hover */
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile {
  position: relative;
}

[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--pfx-accent-strong);
  transform: translateY(-50%);
  transition: height 200ms ease-out;
}

[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile:hover::before,
[data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile:focus-within::before {
  height: 70%;
}

/* Scroll-driven entrance for cards — modern Chromium/Edge/Safari TP.
   Gracefully ignored where unsupported. */
@supports (animation-timeline: view()) {
  [data-page-template="portal"] .home-page.body .content > .spaces {
    animation: pfx-rise-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  @keyframes pfx-rise-in {
    from {
      opacity: 0;
      transform: translateY(28px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  [data-page-template="portal"] .home-page.body .content > .spaces,
  [data-page-template="portal"] .home-page.body > .banner search-bar[variant="large"],
  [data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile,
  [data-page-template="portal"] .home-page.body .spaces [data-component="tile"].tile::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   === 2026 polish: floating header + link micro-interactions ===
   ============================================================ */

/* Floating header — detach from the viewport edges, round the corners,
   add a soft shadow, and stick to the top on scroll. Keep the theme's
   solid background color — no transparency override. */
body > header[data-component="header"].header {
  position: sticky;
  top: 0.5rem;
  z-index: 100;
  margin: 0.5rem 0.5rem 0;
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 18px -12px rgba(15, 23, 42, 0.20);
  transition: box-shadow 220ms ease-out;
}

/* Make the Support and Training & Certification flyout triggers
   non-navigational. Hover still opens the menu (it's detected on the
   parent <li>, not the anchor), and the flyout children remain clickable. */
body > header[data-component="header"] .header-links ul > li:is(:nth-child(3), :nth-child(8)) > a {
  pointer-events: none;
  cursor: default;
}

/* Header link pill hover + animated underline.
   ONLY applied to items 1, 2, 11, 12 (Get Started, Release Notes,
   Community, pricefx.com). Items 3 and 8 are flyout triggers with
   their own chevron `::after`; items 4–7 and 9–10 are hidden dropdown
   children positioned by the flyout section above. */
body > header[data-component="header"] .header-links ul > li:is(:nth-child(1), :nth-child(2), :nth-child(11), :nth-child(12)) > a {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}

body > header[data-component="header"] .header-links ul > li:is(:nth-child(1), :nth-child(2), :nth-child(11), :nth-child(12)) > a:hover,
body > header[data-component="header"] .header-links ul > li:is(:nth-child(1), :nth-child(2), :nth-child(11), :nth-child(12)) > a:focus-visible {
  background-color: rgba(255, 255, 255, 0.10);
  outline: none;
}

/* Animated underline that slides in from the center on hover */
body > header[data-component="header"] .header-links ul > li:is(:nth-child(1), :nth-child(2), :nth-child(11), :nth-child(12)) > a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 2px;
  background: #34d399; /* emerald accent */
  transition: left 220ms ease-out, right 220ms ease-out;
}

body > header[data-component="header"] .header-links ul > li:is(:nth-child(1), :nth-child(2), :nth-child(11), :nth-child(12)) > a:hover::after,
body > header[data-component="header"] .header-links ul > li:is(:nth-child(1), :nth-child(2), :nth-child(11), :nth-child(12)) > a:focus-visible::after {
  left: 0.85rem;
  right: 0.85rem;
}

/* Active page marker — if theme emits aria-current. */
body > header[data-component="header"] .header-links ul > li:is(:nth-child(1), :nth-child(2), :nth-child(11), :nth-child(12)) > a[aria-current] {
  background-color: rgba(52, 211, 153, 0.18);
  color: #ffffff;
}

body > header[data-component="header"] .header-links ul > li:is(:nth-child(1), :nth-child(2), :nth-child(11), :nth-child(12)) > a[aria-current]::after {
  left: 0.85rem;
  right: 0.85rem;
}

/* External-link arrow — only on items 11 (Community) and 12 (pricefx.com). */
body > header[data-component="header"] .header-links ul > li:is(:nth-child(11), :nth-child(12)) > a[target="_blank"]::before {
  content: "↗";
  display: inline-block;
  margin-right: 0.3rem;
  font-size: 0.85em;
  opacity: 0.75;
  transform: translateY(-1px);
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}

body > header[data-component="header"] .header-links ul > li:is(:nth-child(11), :nth-child(12)) > a[target="_blank"]:hover::before {
  transform: translate(1px, -2px);
  opacity: 1;
}

/* Reduced-motion: disable the transform/filter animations */
@media (prefers-reduced-motion: reduce) {
  body > header[data-component="header"].header,
  body > header[data-component="header"] .header-links ul > li > a,
  body > header[data-component="header"] .header-links ul > li > a::after,
  body > header[data-component="header"] .header-links ul > li > a[target="_blank"]::before {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   === Base-theme fallbacks (custom domain shift) ===
   Header / banner / footer previously inherited dark bg + white
   text from the Scroll Sites base theme. After the custom-domain
   switch the base defaults changed, so set them explicitly here.
   ============================================================ */

/* Header: solid dark background so the nav links stay legible */
body > header[data-component="header"].header {
  background-color: #0D1900;
  color: #ffffff;
}

body > header[data-component="header"] .header-links ul > li > a {
  color: #ffffff;
}

/* Portal banner headline + tagline: force white on the gradient hero */
[data-page-template="portal"] .home-page.body > .banner hgroup h1,
[data-page-template="portal"] .home-page.body > .banner hgroup p {
  color: #ffffff !important;
}

/* Footer: dark background with light text across all templates */
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer {
  background-color: #0D1900;
  color: #ffffff;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer a {
  color: #ffffff;
}

:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer,
:is([data-page-template="portal"], [data-page-template="article"], [data-page-template="content-source"], [data-page-template="error"], [data-page-template="search"]) .footer * {
  color: #ffffff;
}