@charset "UTF-8";

:root {
	/* Brand colors */
	--color-yellow: #ffdd15;
	--color-blue: #0057B8;
	--color-blue-alt: #0072B2;
	--color-red: #CE2029;
	--color-green: #008000;

	/* Neutrals */
	--color-black: #000000;
	--color-off-black: #111111;
	--color-white: #ffffff;
	--color-off-white: #fdfdfd;
	--color-gray-dark: #666666;
	--color-gray-mid: #999999;
	--color-gray-light: #cccccc;
	--color-gray-lighter: #e8e8e8;
	--color-gray-lightest: #eeeeee;
	--color-text-body: #212529;

	/* Toggle link tones */
	--color-link: #0056b3;
	--color-link-hover: #003d82;

	/* Section backgrounds */
	--color-solution-bg: #E6F9F1;

	/* Gradient stops */
	--grad-yellow-1: #ecc901;
	--grad-yellow-2: #d8bf40;
	--grad-index-1: #e97727;
	--grad-index-2: #e73c61;
	--grad-index-4: #23d5ab;

	/* Transitions */
	--transition-fast: 0.15s ease-out;
	--transition-base: 0.2s ease-out;
	--transition-slow: 0.3s ease-out;

	/* Radii */
	--radius-sm: 4px;
	--radius-md: 8px;

	/* Fluid type scale (320px → 1200px viewport) */
	--fs-h1: clamp(2.8rem, 2rem + 4vw, 3.5em);
	--fs-h2: clamp(2rem, 1.82rem + 0.91vw, 2.5rem);
	--fs-h3: clamp(1.5rem, 1.41rem + 0.45vw, 1.75rem);
	--fs-h4: clamp(1.2rem, 1.18rem + 0.09vw, 1.25rem);
	--fs-hero-h1: clamp(3em, 2.27rem + 3.64vw, 5em);
	--fs-highlight: clamp(2em, 1.5rem + 1.82vw, 3em);
    --fs-banner-h1: clamp(3.5em, 2.59rem + 4.55vw, 6em);

	/* Shadows / overlays */
	--overlay-heavy: rgba(0, 0, 0, 0.7);
	--shadow-dropdown: 0px 8px 16px rgba(0, 0, 0, 0.2);
	--shadow-hover: 0 4px 15px rgba(0, 0, 0, 0.1);
}
html { height: 100%; scroll-behavior: smooth; overscroll-behavior: none; }
*,*:before,*:after { box-sizing: border-box; }
body {
	font-family: "Inter", sans-serif;
	font-style: normal;
	font-weight: normal;
	font-optical-sizing: auto;
	background-color:var(--color-off-white);
	color:var(--color-off-black);
	margin:0;
}

/* COLORS */
.yellow { color:var(--color-yellow); }
.black { color:var(--color-black); }
.white { color:var(--color-white); }
.blue { color:var(--color-blue); }
.gray { color:var(--color-gray-mid); }
.red { color:var(--color-red); }
.green { color:var(--color-green); }
.black-bg { background-color:var(--color-black); }
.white-bg { background-color:var(--color-white); }


/* TEXT STYLES */
h1, h2, h3, h4, h5, p { margin: 0 0 16px 0; }
h1 { font-weight: 200; font-size: var(--fs-h1); }
h2 { font-weight: 200; font-size: var(--fs-h2); }
h3 { font-weight: 500; line-height: 1.6em; font-size: var(--fs-h3); }
h4 { font-weight: 500; line-height: 1.6em; font-size: var(--fs-h4); }
p, li { color:var(--color-text-body); font-size:1em; line-height: 1.8em; }
ol li {margin-left: -20px; font-weight:700; line-height: 1.8em; }
ul li { margin-left: -20px; line-height: 1.8em; }
a { 
	transition: all var(--transition-base) 0s;
    color:var(--color-blue);
}
a:hover { color:var(--color-yellow); }
small { display: inline-block; padding-top: 1em;}

.max-char { max-width:80ch; }
.quotes { text-indent: -8px; font-weight:300 }


/* BUTTONS */	
.btn, .spec-btn {
    padding: 12px 16px 12px 12px;
    color: var(--color-black);
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    font-weight:300;
    text-align: center;
    font-size: 1em;
    transition: var(--transition-fast) 0s;
    cursor: pointer;
    white-space: nowrap; /* Prevents text inside from wrapping to a new line */
    word-break: normal;  /* Keeps words whole */
    flex-shrink: 0;
}
.btn {
    gap:8px;
    align-items: center;
    display: inline-flex;
}
.btn:hover { transform: scale(1.1); color: var(--color-black); }	
.spec-btn:hover { color: var(--color-black); }		
.btn-yellow { background-image: linear-gradient(180deg, var(--grad-yellow-1) 20%, var(--grad-yellow-2) 80%);  box-shadow: inset 0 0 2px var(--overlay-heavy);}
.btn-clear { border: none; background-color:var(--color-white); }	
.btn-clear:hover { background-color:var(--color-gray-lightest); }
/* Header Back/Next links wrap instead of overflowing narrow screens */
header.nav-flexspread { flex-wrap: wrap; gap: 8px; }	
.button-row { display:flex; gap:8px; align-items: center; }
.btn-fix { height:50px; padding-top: 16px; }


/* LAYOUT */
.container {
	margin-right: auto;
  	margin-left: auto;
    width: 1128px;
    overflow:visible;
}
section, body > footer { padding: 2rem 0;}


/* BORDERS */
.border { border: solid 1px var(--color-black); }
.border-green { border: solid 1px var(--color-green); }
.border-red { border: solid 1px var(--color-red); }


/* IMAGES */
.img-responsive { width: 100%; height: auto; }
.hero-image {
    height:30em;
    background-color: #ececec;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-shadow: inset 0px 0px 10px var(--overlay-heavy);
}
@media all and (max-width:767px) {
	.hero-image { height:20em; }
}
.hero-rydergyde { background-image: url("../rydergyde/images/rydergydehero.webp"); }
.hero-prophet { background-image: url("../prophet/images/prophethero.webp"); }
.hero-risk { background-image: url("../risk/images/riskhero.webp"); }


/* FLEXBOX */
.flexbox { display:flex; gap:2em; }
.icon-align { display:flex; align-items:center; gap: 8px; }
.nav-flexspread, .foot-flexspread {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.flexspread-centered {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.flexside-centered {
    display:flex;
    align-items: center;
    gap: 2em;
}
.flexside-top {
    display:flex;
    align-items:flex-start;
    gap: 2em;
}
.flex1 { flex:1; min-width: 0; }
.flex2 { flex:2; min-width: 0; }


/* GENERAL COMPONENTS */

/* NAV */
nav { 
    height: 70px;
    margin-top: -70px;
    padding: 16px;
    font-weight:300;
    position: sticky;
    top: 0;
    z-index:3;
    background-color: rgba(0, 0, 0, 0.8);
}
nav	div a { color:var(--color-white); text-decoration: none; }
.dropdown {
  position: relative; display: inline-block; }
.dropdown-content {
  position: absolute;
  top: calc(100% + 16px);
  background-color: var(--color-off-black);
  width: max-content;
  box-shadow: var(--shadow-dropdown);
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px); 
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0.15s;
}
.dropdown-left { left: -24px; }
.dropdown-right {right: -16px;}
.dropdown-content a {
  padding: 16px 24px;
  display: block;
  text-decoration: none;
  color: var(--color-white);
  border-bottom: solid 1px var(--color-gray-dark);
  transition: color var(--transition-base) 0s;
}
.dropdown-content a:last-child { border-bottom: none;}
.dropdown-content a:hover { color:var(--color-yellow); }
.dropdown-content.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.dropbtn { cursor: pointer;}
nav div .dropbtn { color: var(--color-white); }


/* HEADER */
header {padding:5rem 1rem 1rem 1rem;}
.footlinks { padding:16px; }
.access { 
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding:16px;
}
.latest-news-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--color-white);
}
.latest-news-label {
    font-size: 0.85em;
    font-weight: 200;
    white-space: nowrap;
    flex-shrink: 0;
}
.latest-news-text {
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* SHOW - HIDE CONTENT */
/* Hide the "Hide Content" text by default */
.text-hide {
  display: none;
}

/* When the details element is open, hide the "Show" text */
details[open] .text-show {
  display: none;
}

/* When the details element is open, show the "Hide" text */
details[open] .text-hide {
  display: inline;
}

/* --- Basic Layout --- */
.toggle-section {
  display: block; 
}
/* Toggle buttons: strip default button styling */
.toggle-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.card .target { width: 100%; }

/* --- Link Button Styles --- */
.toggle-link {
  color: var(--color-link);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
  display: block;          /* Makes the link act like a block... */
  width: max-content;      /* ...but only as wide as the text inside it */
  margin: 0 auto;
}
.toggle-link:hover {
  color: var(--color-link-hover);
  text-decoration: none;
}

/* --- Text Swapping Logic --- */
.toggle-section.is-open .toggle-link .text-show {
  display: none;
}
.toggle-section.is-open .toggle-link .text-hide {
  display: inline;
}

/* --- The Smooth Open/Close Animation (CSS Grid) --- */
.toggle-grid {
  display: grid;
  /* Start collapsed */
  grid-template-rows: 0fr; 
  transition: grid-template-rows var(--transition-slow);
}

.toggle-section.is-open .toggle-grid {
  /* Expand to natural height */
  grid-template-rows: 1fr; 
}

.toggle-content {
  /* Crucial: prevents content from spilling out while collapsed */
  overflow: hidden; 
  /* Hidden from Tab and screen readers while collapsed; waits for the close animation */
  visibility: hidden;
  transition: visibility 0s linear var(--transition-slow);
}
.toggle-section.is-open .toggle-content {
  visibility: visible;
  transition-delay: 0s;
}

/* --- Content Styling --- */
/* We apply margins and padding here so they don't break the 0fr collapse */
.content-inner {
  margin-top: 24px;
}

/* INDEX COMPONENTS */

/* INDEX HERO */
.index-hero {
	height:auto;
	display:flex;
    justify-content: center;
    overflow: hidden;
    gap:1rem;
    padding-bottom: 2rem;
   
}
.index-gradient {
    background: linear-gradient(-45deg, var(--grad-index-1), var(--grad-index-2), var(--color-blue), var(--grad-index-4));
    background-size: 400% 400%;
    animation: gradient 45s ease infinite;  
    padding-top:4.25em;
}
#gradient-toggle, #latest-news-next {
    color:var(--color-white);
    font-size: 0.8em;
    gap:5px;
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.0);
}
#gradient-toggle:hover, #latest-news-next:hover {  background-color: var(--overlay-heavy);}

@media all and (max-width: 767px) {
    .index-hero { padding-top: 48px; }
    .hero-chat-card h1 { font-size: 2em; }
    #chat-input { font-size: 1em; padding: 0.75rem; }
    .chat-bubble { font-size: 0.9em; }
    #gradient-toggle { font-size: 0.75em; }
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* CHAT WINDOW */
.hero-chat-card {
	width: 100%;
	max-width: 80ch;
	display: flex;
	flex-direction: column;
	gap: 1em;
}

.chat-body {
	border-radius: var(--radius-md);
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1.5rem;
}

#chat-messages {
	height: 280px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.chat-bubble {
	max-width: 85%;
	border-radius: var(--radius-md);
	font-size: 1em;
	line-height: 1.6;
	white-space: pre-wrap;
}
.chat-bubble-bot {
	align-self: flex-start;
	color: var(--color-white);
}
.chat-bubble-user {
	align-self: flex-end;
	background: #444;
	color: var(--color-white);
    padding:1rem;
}
#chat-input-row {
	display: flex;
    width:100%;
	gap: 16px;
    margin-top: 1rem;

}
#chat-input {
	flex: 1;
	min-width: 0;
	padding: 1rem;
	border:none;
	border-radius: var(--radius-md);
    background-color: var(--color-black);
    color: var(--color-white);
	font-size: 1.25em;
	font-family: inherit;
}
#chat-send {
	border-radius: var(--radius-md);
    border:none;
	padding: 10px 16px;
	cursor: pointer;
	white-space: nowrap;
    flex-shrink: 0;
}
@media all and (max-width: 767px) {
	.hero-chat-card { height:auto; }
	#chat-messages { height: 220px; height:auto; }
}


/* CASE STUDY CARDS */
.case-study-row { display:flex; gap:16px; }
.case-card {
    position: relative;
    background-color: var(--color-white);
	border: 1px solid var(--color-gray-light);
    padding:24px;
    border-radius: var(--radius-md);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	display:block;
	flex: 1;
}
.case-card:hover {
	transform: translateY(-5px);
  	box-shadow: var(--shadow-hover);
}
.main-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.target:after {
	content: '\002B';
  	color: var(--color-off-black);
  	font-size: 2em;
	font-weight: 100;
  	float: right;
  	margin-left: 5px;
}
.toggle-section.is-open .target:after {
  content: "\2212";
}

/* ACCORDION */
.accordion {
	display: flex;
  	flex-direction: column;
}
.accordion .card {
	background-color: var(--color-white);
	padding:16px;
	border-bottom: 1px solid var(--color-gray-light);
	color:var(--color-black);
	box-sizing: border-box;
}
.accordion .card:first-child {
	border-top: 1px solid var(--color-gray-light);
}
.accordion .card h3 { margin:0; }
.card h4 { padding: 20px 0 0 0; }
.card .target {
    display:flex;
    justify-content: space-between;
    align-items: center;
}

/* SKILLS SECTION */
.skills {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    
}
.skills div { flex: 1 1 calc(33.333% - 16px); }

/* LOGO ROW */
.logo-marquee {
    overflow: hidden;
    width: 100%;

    /* Fade mask on left and right edges */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}
.logo-row {
	display:flex;
    flex-direction: row;
    width: max-content;
	align-items: center;
    gap:50px;
    animation: scrollLeft 30s linear infinite;
    will-change: transform;
}
.logo-row div { flex:1; }
/* Pause the logos while the pointer or keyboard focus is on them */
.logo-marquee:hover .logo-row,
.logo-marquee:focus-within .logo-row,
.logo-row.is-paused { animation-play-state: paused !important; }
.marquee-toggle {
    margin-top: 16px;
    padding: 8px 12px;
    background: none;
    border: 1px solid #767676; /* 4.5:1 so the button edge is visible (WCAG 1.4.11) */
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 0.875em;
    color: var(--color-black);
    cursor: pointer;
}
.marquee-toggle:hover { background-color: var(--color-gray-lightest); }
.logo-row img { width: max-content; height: auto; }

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Translates exactly half the total width (the length of 1 duplicate set) */
        transform: translateX(-50%);
    }
}
.brands {
	background-color: var(--color-white);
	/*box-shadow: 0 4px 8px var(--color-gray-light);*/
}

/* QUOTES */
.quoter {
	width: 100%;
	text-align: right;
}

/* PRODUCT PAGE COMPONENTS */

/* PRODUCT HERO */
.hero {
    display:flex;
    align-items: center;
    gap: 2em;
    height: 16em; 
}
.hero h1 { font-size: var(--fs-hero-h1); font-weight:500; }
.highlight {
    color:var(--color-blue);
    font-size: var(--fs-highlight);
    font-weight:200;
    /*text-indent: -18px;  USE FOR QUOTATIONS */
}

/* ROW OF CARDS */
.card-row { 
    display: flex;
    align-items:stretch;
}    
.card-row div {
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	color: var(--color-blue);
	border: 4px solid var(--color-gray-lighter);
	padding: 1em;
	font-weight:500;
    flex: 1;
    min-width: 0; 
    display:flex;
    flex-direction:column;
    justify-content:space-around;
}

/* USER COMPONENT */
.user-profile {
    background-color: var(--color-gray-lighter);
    padding:24px;
    border-radius: var(--radius-md);
    box-shadow: 2px 2px 4px var(--color-black);
}
.user-title  {
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap:1em;
}


/* SHOW MORE IN USER COMPONENT */
.btn-show {
    width:100%;
    font-size: 1em;
    color:var(--color-blue);
    background-color: var(--color-gray-lightest);
    border-radius: var(--radius-md);
    border: solid 1px var(--color-gray-mid);
    text-align: center;
    padding: 8px 24px;
    cursor: pointer;
}

/* KPI BANNER */
.banner {
    background-color: var(--color-blue-alt);
    color: var(--color-white);
    padding:24px;
}
.banner h1, .banner .stat {
    font-size: var(--fs-banner-h1);
    font-weight: 900;
    margin:0;
}
.banner p {
    color: var(--color-white);
    margin:0;
}

/* PROBLEM BANNER */
.problem {
    background-color: var(--color-red);
    color: var(--color-white);
}

/* SOLUTION SECTION */
.solution { background-color: var(--color-solution-bg); }
.solution h2, .solution h3 { color:var(--color-green); }

/* BEFORE - AFTER */
.beforeafter {
    display:flex;
    align-items: center;
}

/* FINAL PROTOTYPE */
.final-proto {
    display:flex;
    align-items:flex-start;
    gap: 2em;
}


/* LESSONS LEARNED */
.lessons { max-width:80ch; }
.lessons h3 { 
    margin:0; 
    color:var(--color-blue); 
    padding-left: 28px;
    text-indent: -28px;  
}
.lessons p { margin-left: 32px; }


/* JOURNEY MAP */
.userjourney {
    position: relative;
    width:100%;
    height:310px;
}	
.sliderLeft, .map, .sliderRight {
	width: 100%;
  	height: 100%;
  	position: absolute;
}
.sliderRight, .sliderLeft {
	display: flex;
	justify-content:center;
	align-items: center;
	color:var(--color-white);
	background:var(--overlay-heavy);
	text-align: center;
	vertical-align: middle;
	width:50px;
	height:300px;
  	z-index: 2;
	font-size: 2.5em;
	font-weight:100;
	cursor: pointer;
}		
.sliderLeft { left:0; display:none; }	
.sliderRight {right:0;}
	
.map { overflow: auto; }	
.map img { width:auto; height:300px;}

@media all and (min-width:1200px) { .sliderRight { display:none; }  }

@media all and (max-width:767px) {
	.userjourney { height:210px;}
	.sliderLeft {height:200px;}
	.sliderRight {height:200px;}
	.map img { width:auto; height:200px; }
}	


/* DIRECT FIXES */
.killmargin { margin:0; }
.text-center { text-align: center;}
.text-right { text-align: right; }
.block { display:block; }
.padbottom { padding-bottom: 1rem;}
.padtop { padding-top: 1rem; }
.gap { display:flex; flex-direction: column; gap:2rem; }
.gap1 { height: 1rem;}
.gap2 { height: 2rem;}
.pain-points h3 {
    color:var(--color-blue);
    margin:0 0 4px 0;
    padding-left: 28px;
    text-indent: -28px;
}
.pain-points p { margin-left: 28px; }
.methodology-note {
    font-size: 0.8em;
    color: #6b6b6b; /* 5.2:1 on the page background (WCAG AA) */
    font-style: italic;
    margin-top: 0.75rem;
}


/* RESPONSIVE MODS */

/* MOBILE SCREENS LESS THAN 767 PIXELS */
@media only screen and (max-width: 767px) {
    .container { width: 100%; padding:16px; }
    section, body > footer { padding: 1rem 0; }
    .nav-flexspread { padding:16px; }
    .flexside-centered, .flexside-top {
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 2rem;
    }
    .case-study-row {
        flex-direction: column;
        width: 100%;
        height:auto;
    }
    .card-row {
        flex-direction: column;
        width: 100%;
        height:auto;
        align-items: center;
    }
    .flexspread-centered {
        flex-direction: column;
        width: 100%;
        height:auto;
        gap: 2rem;
        align-items: flex-start;
    }
    .banner div {
        flex-direction: column;
        align-items:flex-start;
        justify-content: center;
        gap: 8px;
    }
    .logo-row {
        flex-wrap: wrap;
        padding: 0 16px;
        gap:1em;
    }
    .logo-row img { 
        width: 100px;
        flex: 1 1 calc(50% - 8px); }

    .skills {
        flex-direction: column;
        gap:24px;
        
    }
    .beforeafter {
        flex-direction: column;
    }
    .vertical-list { margin:0;}
    .user-profile { padding:16px; }
    .user-title { flex-direction: column; align-items: flex-start; }
    /*.user-profile .flexspread-centered, .flexside-top {gap: 1rem;}*/
    .index-hero { height:auto; flex-direction: column; }
    #chat-messages { height: 20em; }
    .hero { 
        flex-direction: column;
        width: 100%;
        height: auto;
        gap:1em;
     }
    .final-proto {
        flex-direction: column;
        align-items:flex-start;
        gap: 0;
        padding-bottom: 24px;
    }
    .btn-fix { padding:16px 0; }

}

@media all and (min-width:768px) and (max-width:991px) {
	.container { width: 740px; }
    .hero { 
        flex-direction: column;
        width: 100%;
        height: auto;
        gap:1em;
        max-width: 80ch;
     }
    
}
@media all and (min-width:992px) and (max-width:1199px) {
	.container { width: 960px; }
}


@media all and (min-width:768px) {
    .desktop-hide { display:none; }
}
@media only screen and (max-width: 767px) {
    .mobile-hide { display:none; }
    .access { justify-content: flex-end; }
}    


/* SIDE NAVIGATION */	
#sideNav {
    position:fixed;
	background-color:var(--color-black);
    top:0;
    bottom:0;
    right: -100%;
	font-size: 1.75em;
	padding: 15px 20px;
	width: 100%;
    height: 100vh;
	transition: right 0.3s ease, visibility 0s linear 0.3s;
	z-index:4;
	/* Closed menu is off-screen: keep its links out of the Tab order */
	visibility: hidden;
}
#sideNav.is-open {
	visibility: visible;
	transition: right 0.3s ease, visibility 0s;
}	
#sideNav ul { padding: 0; margin: 0; list-style-type: none; }
#sideNav li { margin: 15px 0; line-height: 1.5em; }
#sideNav li:first-child { margin: 0;}	
#sideNav ul li a, #close {
    color:var(--color-white);
	font-weight: 400;
    text-decoration: none;
	transition: all var(--transition-base) 0s;
	cursor:pointer;
}	
#sideNav ul li a:hover { color:var(--color-yellow); }
/* Menu open/close buttons: strip default button styling */
.nav-toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: inherit;
    color: inherit;
    cursor: pointer;
}
.close-box {
    position: absolute;
    top:0;
    right:0;
    font-size: 48px;
    line-height:1.3em;
    padding:0 15px;
}
.disabled { 
    pointer-events: none;
    cursor: default;
    color: var(--color-gray-mid) !important;
    text-decoration: none;
}

/* ACCESSIBILITY HELPERS */
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 10;
	padding: 12px 16px;
	background-color: var(--color-white);
	color: var(--color-black);
	border-radius: var(--radius-md);
}
.skip-link:focus { top: 16px; }