/* Gives .hero-tutor-mascot's height:60% a definite reference height to
   resolve against -- percentage heights only work against a containing
   block with a non-auto height, and this wrapper's height would
   otherwise just be whatever the td-card image's content happens to
   render at. aspect-ratio matches 3d-card-img-1-{light,dark}.png's
   actual pixel dimensions (~1535x1025), so the wrapper's computed
   height already tracks the image's rendered height at any width. */
.hero-td-card-wrapper {
position: relative;
aspect-ratio: 1535 / 1025;
}

.hero-tutor-mascot {
position: absolute;
z-index: 3;
right: 1em;
bottom: 2.5em;
height: 70%;
width: auto;
pointer-events: none;
}

.industry-slideshow {
position: relative;
}
.industry-slideshow__viewport {
overflow: hidden;
}
.industry-slideshow__track {
display: flex;
list-style: none;
margin: 0;
padding: 0;
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.industry-slideshow__slide {
flex: 0 0 100%;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
align-items: center;
}
@media (min-width: 64rem) {
.industry-slideshow__slide {
grid-template-columns: 2fr 1fr;
gap: var(--space-xl);
}
}
.industry-slideshow__media {
margin: 0;
}
.industry-slideshow__media img {
display: block;
width: 100%;
height: 100%;
}
.industry-slideshow__eyebrow {
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-xxxs);
}
.industry-slideshow__control {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: none;
border-radius: 50%;
background-color: var(--color-bg);
color: var(--color-contrast-higher);
box-shadow: var(--shadow-md);
cursor: pointer;
}
.industry-slideshow__control:hover {
color: var(--color-primary);
}
.industry-slideshow__control--prev {
left: -14px;
}
.industry-slideshow__control--next {
right: -14px;
}
@media (max-width: 47.99rem) {
.industry-slideshow__control {
display: none;
}
}
.industry-slideshow__dots {
display: flex;
justify-content: center;
gap: var(--space-xxs);
margin-top: var(--space-md);
}
.industry-slideshow__dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background-color: var(--color-contrast-low);
opacity: 0.4;
cursor: pointer;
transition: opacity 0.3s, background-color 0.3s;
}
.industry-slideshow__dot.is-active {
opacity: 1;
background-color: var(--color-primary);
}

.quote-spotlight {
text-align: center;
}
.quote-spotlight__mark {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: 10rem;
line-height: 0;
color: var(--color-contrast-lower);
margin-bottom: var(--space-xs);
}
.quote-spotlight__viewport {
position: relative;
min-height: 9.5em;
}
@media (min-width: 48rem) {
.quote-spotlight__viewport {
min-height: 6.5em;
}
}
.quote-spotlight__slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin: 0;
font-size: 2.25rem;
line-height: 1.55;
color: var(--color-contrast-high);
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
}
.quote-spotlight__slide.is-active {
position: relative;
opacity: 1;
visibility: visible;
}
.quote-spotlight__highlight {
font-style: italic;
font-weight: 600;
color: var(--color-primary);
background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.14);
border-radius: var(--radius-sm);
padding: 0.05em 0.3em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.quote-spotlight__attribution {
margin: var(--space-sm) 0 0;
font-size: var(--text-lg);
color: var(--color-contrast-low);
}

.saas-feature {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
height: 100%;
}
.saas-feature__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.12);
color: var(--color-primary);
}
.saas-feature__icon svg {
width: 22px;
height: 22px;
}
.saas-feature h4 {
margin-bottom: var(--space-xxxs);
}

.section-eyebrow {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-xl);
}
.section-eyebrow span {
flex-shrink: 0;
font-size: var(--text-sm);
color: var(--color-contrast-low);
}
#auditability {
margin-top: 8rem;
}

.auditability-heading-col,
.auditability-text-col {
position: relative;
}

/* Two copies of the same image (like the light:display/dark:display
   theme-conditional images elsewhere on this page) -- which column the
   mascot sits above changes at the same 64rem breakpoint the grid
   itself collapses to a single column at, so it needs to actually live
   inside whichever column is relevant instead of being positioned from
   a shared ancestor with calculated offsets. */

.section-eyebrow__mascot {
position: absolute;
left: 50%;
bottom: calc(170% + var(--space-sm));
transform: translateX(-50%);
height: clamp(150px, 15vw, 200px);
width: auto;
}

@media (min-width: 1024px) {
.section-eyebrow__mascot {
bottom: calc(100% + var(--space-sm));
}
}
.section-wall__mascot {
position: absolute;
right: -28%;
bottom: calc(55% + var(--space-sm));
transform: translateX(-50%);
height: clamp(120px, 17em, 348px);
width: auto;
}

@media (max-width: 1279px) {
.section-wall__mascot {
right: -35%;
height: 17em;
}
}
@media (max-width: 384px) {
.section-wall__mascot {
display: none;
}
}
@media (min-width: 385px) {
.section-wall__mascot {
bottom: calc(76% + var(--space-sm));
right: 0;
height: 8em;
}
}
@media (min-width: 474px) {
.section-wall__mascot {
height: 8%;
bottom: calc(75% + var(--space-sm));
right: 1em;
}
}
@media (min-width: 534px) {
.section-wall__mascot {
bottom: calc(70% + var(--space-sm));
right: -2%;
height: 15em;
}
}
@media (min-width: 767px) {
.section-wall__mascot {
bottom: calc(69% + var(--space-sm));
right: 16%;
height: 16em;
}
}
@media (min-width: 1024px) {
.section-wall__mascot {
bottom: calc(56% + var(--space-sm));
right: -5%;
height: 16em;
}
}
@media (min-width: 1280px) {
.section-wall__mascot {
bottom: calc(56% + var(--space-sm));
right: 0;
height: 16em;
}
}
.auditability-heading {
font-size: var(--text-xxl);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.01em;
}