/* Kirsten's Homepage V3, "Made for you" (11 November 2026), for HomePage.razor: her look under our own class names, in
   the design system's tokens (design-tokens.css, customer.css). The only stylesheet the home page adds (it loads none of
   the other pages' sheets), so everything it needs is here. Desktop first: tablet below 1100px, phone below 760px.
   Whatever moves stops for a visitor who asked for less motion. The 3X4 Genetics banner (US) and the stars are kept from
   the page before. */

/* The home page leaves out MudBlazor's theme (CustomerLayout), whose settings MudBlazor's sheet gives the body and links;
   these are the theme's values (TailorBlendMudTheme), so the header, footer and cart look as on every other page. */
body {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.43;
    letter-spacing: 0;
    text-transform: none;
}

a {
    color: var(--slate-900);
}

.tb-home {
    --tb-home-pad: 64px;
    --tb-home-space: 104px;
    --tb-home-teal: var(--tb-teal-accessible);
    background: #fff;
    color: var(--slate-900);
    line-height: 1.5;
}

/* The legacy and app sheets give every heading, paragraph and list its own margins and colour. */
.tb-home :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) {
    margin: 0;
}

.tb-home :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.tb-home :where(h1, h2, h3, h4) {
    color: inherit;
}

/* ---------- Shared ---------- */

.tb-home-section {
    padding: var(--tb-home-space) 0;
}

.tb-home-inner {
    max-width: calc(1240px + 2 * var(--tb-home-pad));
    margin: 0 auto;
    padding: 0 var(--tb-home-pad);
}

.tb-home-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tb-home-head.center {
    align-items: center;
    text-align: center;
}

.tb-home-eyebrow {
    margin-bottom: 14px;
    color: var(--tb-home-teal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.32em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* The design system's headings: capitals, heavy, with a light teal second part. */
.tb-home-h1,
.tb-home-h2 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-transform: uppercase;
}

.tb-home-h1 {
    font-size: 72px;
}

.tb-home-h2 {
    font-size: 40px;
}

.tb-home-h1 span,
.tb-home-h2 span {
    color: var(--tb-home-teal);
    font-weight: 300;
    text-decoration: none;
}

.tb-home-h3 {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

.tb-home-lead {
    max-width: 620px;
    margin-top: 16px;
    color: var(--slate-700);
    font-size: 18px;
    line-height: 1.5;
}

.tb-home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tb-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tb-home-btn--teal {
    background: var(--tb-teal-fill);
    color: var(--tb-teal-fill-text);
}

.tb-home-btn--teal:hover {
    background: var(--tb-teal-ui-dark);
    color: #fff;
}

.tb-home-btn--light {
    background: #fff;
    color: var(--slate-900);
}

.tb-home-btn--light:hover {
    background: var(--tb-teal-tint);
    color: var(--slate-900);
}

.tb-home-btn--dark {
    background: var(--slate-900);
    color: #fff;
}

.tb-home-btn--dark:hover {
    background: var(--slate-700);
    color: #fff;
}

/* A round arrow beside a track (people, testimonials); shown on a desktop once home.js has wired it. */
.tb-home-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--slate-900);
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.tb-home-arrow svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* A read-only tag: the people's goals and the formats' flavours. */
.tb-home-person__tags li,
.tb-home-format__flavours li {
    padding: 4px 9px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.16);
    font-size: 11px;
    font-weight: 500;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ---------- Hero ---------- */

/* With the header and the four proof points it fills the first screen: 64px of header and 72px of proof points. */
#homeCarousel {
    position: relative;
    height: clamp(520px, calc(100vh - 136px), 1000px);
    height: clamp(520px, calc(100svh - 136px), 1000px);
    overflow: hidden;
    background: var(--slate-900);
}

.tb-home-hero .carousel-inner,
.tb-home-slide {
    height: 100%;
}

/* Kirsten's crossfade is slower than Bootstrap's. Bootstrap times the slide from the outgoing slide's delay. */
.tb-home-hero .carousel-item {
    transition-duration: 1.2s;
}

.tb-home-hero .active.carousel-item-start,
.tb-home-hero .active.carousel-item-end {
    transition: opacity 0s 1.2s;
}

/* The slide after the current one, laid out but unseen once the page has loaded, so its picture is there when it fades in. */
.carousel-item.is-warm:not(.active):not(.carousel-item-next):not(.carousel-item-prev) {
    display: block;
    visibility: hidden;
    position: absolute;
}

.tb-home-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tb-home-slide.shake img {
    object-position: 65% center;
}

.tb-home-slide.window img {
    object-position: 60% 40%;
}

.tb-home-slide.scoop img,
.tb-home-slide.froth img {
    object-position: 60% center;
}

.tb-home-slide.coffee img {
    object-position: 70% center;
}

/* Darkens the left and the foot, where the white text sits. */
.tb-home-hero__shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(20, 20, 20, 0.82) 0%, rgba(20, 20, 20, 0.5) 42%, rgba(20, 20, 20, 0) 72%),
        linear-gradient(0deg, rgba(20, 20, 20, 0.4), rgba(20, 20, 20, 0) 40%);
}

.tb-home-hero__content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    padding: 64px max(var(--tb-home-pad), calc(50% - 620px));
    color: #fff;
    pointer-events: none;
}

.tb-home-hero__content > * {
    pointer-events: auto;
}

.tb-home-h1 span {
    color: var(--tb-teal-light);
}

.tb-home-hero__lead {
    max-width: 460px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 1.5;
}

.tb-home-hero__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.tb-home-hero__dots.carousel-indicators {
    position: static;
    z-index: auto;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
}

.tb-home-hero__dots [data-bs-target] {
    width: 28px;
    margin: 0;
    border-radius: 2px;
    opacity: 0.4;
}

.tb-home-hero__dots .active {
    opacity: 1;
}

/* Pause and play for the slideshow, as moving content must be stoppable. */
.tb-carousel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
}

.tb-carousel-toggle svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.tb-carousel-toggle__play,
.tb-carousel-toggle[aria-pressed="true"] .tb-carousel-toggle__pause {
    display: none;
}

.tb-carousel-toggle[aria-pressed="true"] .tb-carousel-toggle__play {
    display: block;
}

.tb-home-proof {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 max(44px, calc(50% - 640px));
    background: #fff;
}

.tb-home-proof li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 20px;
}

.tb-home-proof strong {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 20px;
}

.tb-home-proof span {
    color: var(--slate-600);
    font-size: 12px;
    line-height: 18px;
}

.tb-home-proof a {
    color: inherit;
    font-weight: inherit;
}

/* ---------- One tub replaces the shelf ---------- */

.tb-home-tub .tb-home-lead {
    max-width: 560px;
}

.tb-home-tub__pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
}

.tb-home-tub figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tb-home-tub__art {
    position: relative;
}

.tb-home-tub__art img {
    display: block;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.tb-home-tub__old img {
    width: 300px;
    height: 220px;
    opacity: 0.5;
    filter: grayscale(1);
}

.tb-home-tub__new img {
    width: 220px;
    height: 220px;
}

/* The hand-drawn cross and tick. */
.tb-home-tub__mark {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 52px;
    height: 52px;
    fill: none;
    stroke: currentColor;
    stroke-width: 3.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tb-home-tub__old .tb-home-tub__mark {
    color: #B4483F;
}

.tb-home-tub__new .tb-home-tub__mark {
    right: -4px;
    color: var(--tb-home-teal);
}

.tb-home-tub figcaption {
    margin-top: -18px;
    color: var(--slate-500);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.tb-home-tub__new figcaption {
    color: var(--tb-home-teal);
}

.tb-home-tub__arrow,
.tb-home-tub__points svg {
    flex: none;
    fill: none;
    stroke: var(--tb-home-teal);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tb-home-tub__arrow {
    width: 44px;
    height: 44px;
}

.tb-home-tub__points {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    max-width: 1040px;
    margin: 40px auto 0;
    text-align: center;
}

.tb-home-tub__points li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tb-home-tub__points svg {
    width: 26px;
    height: 26px;
}

.tb-home-tub__points strong {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.tb-home-tub__points span {
    color: var(--slate-600);
    font-size: 13px;
}

/* ---------- Real people ---------- */

.tb-home-people .tb-home-head {
    margin-bottom: 36px;
}

.tb-home-people__frame {
    position: relative;
}

.tb-home-people__track {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 0 21vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.tb-home-people__track::-webkit-scrollbar,
.tb-home-quotes__track::-webkit-scrollbar {
    display: none;
}

.tb-home-person {
    position: relative;
    flex: 0 0 58vw;
    max-width: 860px;
    min-height: 460px;
    aspect-ratio: 16 / 9.4;
    overflow: hidden;
    border-radius: 8px;
    background: var(--slate-900);
    color: #fff;
    scroll-snap-align: center;
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* The cards either side of the middle one are darker and a touch smaller (not faded, which looks washed out on white). */
.tb-home-people.is-ready .tb-home-person:not(.is-active) {
    filter: brightness(0.7) saturate(0.65);
    transform: scale(0.96);
}

.tb-home-person img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 28%;
}

.tb-home-person.jamie img {
    object-position: 65% 30%;
}

.tb-home-person.lisa img {
    object-position: 60% 30%;
}

.tb-home-person.sezza img {
    object-position: center 35%;
}

.tb-home-person.steve img {
    object-position: 60% 25%;
}

.tb-home-person.gerry img {
    object-position: center 30%;
}

.tb-home-person.joe img {
    object-position: 60% 98%;
    transform: scale(1.1);
    transform-origin: 72% 27%;
}

/* Who they are on the left, under a shade; their blend in a frosted panel at the bottom right. */
.tb-home-person__in {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 360px) 290px;
    grid-template-rows: 1fr auto auto 1fr;
    justify-content: space-between;
    column-gap: 20px;
    padding: 36px 44px;
    background: linear-gradient(90deg, rgba(20, 20, 20, 0.78) 0%, rgba(20, 20, 20, 0.25) 46%, rgba(20, 20, 20, 0.4) 100%);
}

.tb-home-person__who {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.tb-home-person__who h3 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.tb-home-person__title {
    color: rgba(255, 255, 255, 0.92);
    font-size: 15px;
    font-style: italic;
    line-height: 1.4;
}

.tb-home-person__tags {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 6px;
}

.tb-home-person__quote {
    grid-column: 1;
    grid-row: 3;
    padding-top: 18px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    line-height: 1.5;
}

.tb-home-person__blend {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-radius: 8px;
    background: rgba(31, 31, 31, 0.58);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.tb-home-person__name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-transform: uppercase;
}

.tb-home-person__base {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tb-teal-ui);
    color: rgba(255, 255, 255, 0.92);
    font-size: 12.5px;
}

.tb-home-person__items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 14px;
    padding-top: 4px;
}

.tb-home-person__items.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tb-home-person__items li {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.55;
    text-transform: uppercase;
}

.tb-home-people .tb-home-arrow.prev {
    left: 4vw;
}

.tb-home-people .tb-home-arrow.next {
    right: 4vw;
}

.tb-home-people__dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 36px;
}

.tb-home-people__dots button {
    padding: 10px 4px;
    border: 0;
    background: none;
    cursor: pointer;
}

.tb-home-people__dots button::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(31, 31, 31, 0.25);
    transition: width 0.3s ease;
}

.tb-home-people__dots button[aria-current="true"]::before {
    width: 22px;
    background: var(--tb-home-teal);
}

.tb-home-people__note {
    margin-top: 36px;
    padding: 0 20px;
    color: var(--slate-600);
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

.tb-home-people__dots:not([hidden]) + .tb-home-people__note {
    margin-top: 12px;
}

/* ---------- What goes in ---------- */

.tb-home-goes__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: center;
    margin-top: 36px;
}

.tb-home-goes__tubs {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 4%;
}

.tb-home-goes__front {
    width: 40%;
    height: auto;
    margin: 0 -9% 2% 0;
}

.tb-home-goes__back {
    position: relative;
    width: 69%;
}

.tb-home-goes__back img {
    display: block;
    width: 100%;
    height: auto;
}

/* A numbered marker, on the label and beside its point. */
.tb-home-mark {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tb-home-teal);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.tb-home-goes__back .tb-home-mark {
    position: absolute;
    margin: -14px 0 0 -14px;
    border: 2px solid #fff;
    box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.4);
}

.tb-home-mark.m1 {
    top: 20.5%;
    left: 14.5%;
}

.tb-home-mark.m2 {
    top: 22.5%;
    left: 88%;
}

.tb-home-mark.m3 {
    top: 38.3%;
    left: 14.5%;
}

.tb-home-mark.m4 {
    top: 62%;
    left: 14.5%;
}

.tb-home-goes__parts {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tb-home-goes__parts li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 3px 14px;
    padding: 14px 0;
    border-top: 1px solid var(--slate-200);
}

.tb-home-goes__parts .tb-home-mark {
    grid-row: 1 / span 2;
}

.tb-home-goes__parts strong {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.tb-home-goes__parts li > span:last-child {
    color: var(--slate-700);
    font-size: 14px;
    line-height: 1.55;
}

.tb-home-price {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: 8px;
    background: var(--charcoal);
    color: var(--slate-100);
}

.tb-home-price > p:first-child {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.tb-home-price__example {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.tb-home-price__example > span,
.tb-home-price__example strong span {
    color: var(--slate-300);
    font-size: 12.5px;
    font-weight: 400;
}

.tb-home-price__example strong {
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tb-home-goes > .tb-home-inner > .tb-home-h3 {
    margin-top: 56px;
}

.tb-home-formats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.tb-home-format {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 480px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--slate-900);
    color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tb-home-format img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tb-home-format.shake img {
    object-position: 72% center;
}

.tb-home-format::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0) 30%, rgba(20, 20, 20, 0.9) 100%);
}

.tb-home-format__in {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
}

.tb-home-format h4 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
}

.tb-home-format p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.5;
}

.tb-home-format__flavours {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* Each card lifts a little on hover and its photo zooms a touch. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .tb-home-format:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 50px -28px rgba(31, 31, 31, 0.55);
    }

    .tb-home-format:hover img {
        transform: scale(1.04);
    }
}

/* ---------- Four ways ---------- */

.tb-home-ways .tb-home-head {
    margin-bottom: 56px;
}

.tb-home-ways .tb-home-lead {
    line-height: 1.6;
}

/* Each way's text, then its picture beside it (under it on a narrow screen). On a desktop, once home.js runs (is-pinned),
   the pictures share the right-hand column, pinned in the middle of the window below the header, and the active one shows;
   without the script every picture still shows beside its way. */
.tb-home-ways__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 72px;
}

.tb-home-way {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: 36px 0;
    border-top: 1px solid var(--slate-200);
}

.tb-home-way__visual {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 0;
    border-top: 1px solid var(--slate-200);
}

.tb-home-ways__nav {
    display: none;
}

@media (min-width: 1100px) {
    .tb-home-ways.is-pinned .tb-home-way {
        min-height: max(80vh, 560px);
        padding: 0;
        border-top: 0;
    }

    .tb-home-ways.is-pinned .tb-home-way__visual {
        grid-row: 1 / span 4;
        position: sticky;
        top: calc(50vh - 248px);
        align-self: start;
        height: 560px;
        padding: 0;
        border-top: 0;
        opacity: 0;
        transition: opacity 0.5s ease;
    }

    .tb-home-ways.is-pinned .tb-home-way__visual.is-active {
        z-index: 1;
        opacity: 1;
    }

    .tb-home-ways.is-pinned .tb-home-ways__nav {
        grid-column: 2;
        grid-row: 1 / span 4;
        position: sticky;
        top: calc(50vh - 40px);
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-self: start;
        justify-self: start;
        margin-left: -46px;
    }
}

.tb-home-ways__nav button {
    padding: 4px 10px;
    border: 0;
    background: none;
    cursor: pointer;
}

.tb-home-ways__nav button::before {
    content: "";
    display: block;
    width: 3px;
    height: 28px;
    border-radius: 2px;
    background: var(--slate-300);
    transition: background-color 0.3s ease;
}

.tb-home-ways__nav button[aria-current="true"]::before {
    background: var(--tb-home-teal);
}

.tb-home-way__eyebrow {
    color: var(--tb-home-teal);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.tb-home-way__text {
    max-width: 460px;
    color: var(--slate-700);
    font-size: 15px;
    line-height: 1.65;
}

.tb-home-checks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tb-home-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
}

.tb-home-checks li::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background: var(--tb-home-teal);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tb-home-way .tb-home-actions {
    align-self: stretch;
    padding-top: 6px;
}

.tb-home-way__note {
    color: var(--slate-600);
    font-size: 12px;
}

/* A phone: the Deyna recording, or three Create screens taking turns, with its pause button beside it. */
.tb-home-phone {
    position: relative;
    width: 250px;
    padding: 9px;
    border-radius: 36px;
    background: var(--slate-900);
    box-shadow: 0 36px 70px -30px rgba(31, 31, 31, 0.6);
}

/* The recording's first frame is a picture under the video, which covers it once it plays. */
.tb-home-phone__screen {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
}

.tb-home-phone__screen img {
    display: block;
    width: 100%;
    height: auto;
}

.tb-home-phone__screen video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tb-home-builder {
    position: relative;
    width: 100%;
    max-height: 560px;
    overflow: hidden;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    box-shadow: 0 36px 70px -40px rgba(31, 31, 31, 0.45);
}

.tb-home-builder img {
    display: block;
    width: 100%;
    height: auto;
}

.tb-home-builder::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 72px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
}

.tb-home-phone--builder {
    display: none;
    width: 240px;
}

.tb-home-phone__screens {
    position: relative;
    aspect-ratio: 621 / 1346;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
}

.tb-home-phone__screens img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tb-home-phone__screens img + img {
    opacity: 0;
    animation: tb-home-screens 9s linear infinite;
}

.tb-home-phone__screens img:nth-child(2) {
    animation-delay: 3s;
}

.tb-home-phone__screens img:nth-child(3) {
    animation-delay: 6s;
}

.tb-home-phone.is-paused .tb-home-phone__screens img {
    animation-play-state: paused;
}

/* On the white page, so solid charcoal rather than the slideshow's see-through dark. */
.tb-home-phone__toggle {
    position: absolute;
    right: -50px;
    bottom: 12px;
    border-color: var(--slate-900);
    background: var(--slate-900);
}

@keyframes tb-home-screens {
    0% { opacity: 0; }
    6% { opacity: 1; }
    33% { opacity: 1; }
    39% { opacity: 0; }
    100% { opacity: 0; }
}

.tb-home-way__photo {
    width: 100%;
}

.tb-home-way__photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}

/* ---------- Testimonials ---------- */

.tb-home-quotes .tb-home-head {
    margin-bottom: 36px;
}

.tb-home-quotes__frame {
    position: relative;
}

/* The padding leaves room for the cards' shadows inside the scrolling box. */
.tb-home-quotes__track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin: -10px -2px -36px;
    padding: 10px 2px 36px;
    overflow-x: auto;
    scroll-padding-left: 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.tb-home-quote {
    display: flex;
    flex: 0 0 calc((100% - 32px) / 3);
    flex-direction: column;
    gap: 16px;
    padding: 26px;
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 36px -20px rgba(31, 31, 31, 0.3);
    scroll-snap-align: start;
}

.tb-home-quote__stars {
    display: flex;
    gap: 3px;
    color: var(--tb-home-teal);
    font-size: 14px;
}

.tb-home-quote blockquote {
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.55;
}

.tb-home-quote figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--slate-100);
}

.tb-home-quote figcaption strong {
    font-size: 13px;
    font-weight: 700;
}

.tb-home-quote figcaption span {
    color: var(--slate-600);
    font-size: 12px;
}

.tb-home-quotes .tb-home-arrow {
    border: 1px solid var(--slate-300);
    background: #fff;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.3);
}

/* Three quarters of each arrow sits outside the cards: the quarter over a card stays inside its 27px of border and padding,
   with room for the keyboard outline (4px, customer.css), so neither ever covers a card's text (sheet issue 11). */
.tb-home-quotes .tb-home-arrow.prev {
    left: -36px;
}

.tb-home-quotes .tb-home-arrow.next {
    right: -36px;
}

/* ---------- Momentum Multiply ---------- */

.tb-home-momentum {
    padding: 96px 0;
}

.tb-home-momentum__card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 8px;
    background: var(--slate-100);
}

.tb-home-momentum__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    padding: 56px;
}

.tb-home-momentum__logo {
    width: auto;
    height: 52px;
}

.tb-home-momentum__eyebrow {
    color: var(--slate-600);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.tb-home-momentum__body {
    max-width: 440px;
    color: var(--slate-700);
    font-size: 15px;
    line-height: 1.65;
}

.tb-home-momentum .tb-home-actions {
    align-self: stretch;
}

.tb-home-momentum__note {
    color: var(--slate-600);
    font-size: 12px;
}

.tb-home-momentum__photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    max-height: 460px;
    object-fit: cover;
}

/* ---------- Closing panel ---------- */

.tb-home-closing {
    position: relative;
    overflow: hidden;
    background: var(--slate-900);
    color: #fff;
}

.tb-home-closing__photo,
.tb-home-closing__photo::after {
    position: absolute;
    inset: 0;
}

.tb-home-closing__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tb-home-closing__photo::after {
    content: "";
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.72), rgba(20, 20, 20, 0.86));
}

.tb-home-closing .tb-home-inner {
    position: relative;
}

.tb-home-closing .tb-home-eyebrow {
    color: var(--tb-teal-ui);
}

.tb-home-closing .tb-home-h2 {
    max-width: 820px;
    line-height: 1.02;
}

.tb-home-closing .tb-home-h2 span {
    color: var(--tb-teal-light);
}

.tb-home-closing .tb-home-lead {
    max-width: 460px;
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.tb-home-closing .tb-home-actions {
    margin-top: 20px;
}

.tb-home-signup {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 40px;
}

.tb-home-signup__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.tb-home-signup__who {
    color: var(--tb-teal-light);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.tb-home-signup__title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.tb-home-signup__text {
    flex: 1;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.6;
}

.tb-home-signup__link,
.tb-home-signup__link:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

/* ---------- Tablet ---------- */

@media (max-width: 1099.98px) {
    .tb-home {
        --tb-home-pad: 40px;
        --tb-home-space: 80px;
    }

    .tb-home-goes__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .tb-home-momentum__card {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The header is 56px below 992px and the proof points take two lines, so the hero gives up more of the screen. */
    #homeCarousel {
        height: clamp(480px, calc(100vh - 170px), 1000px);
        height: clamp(480px, calc(100svh - 170px), 1000px);
    }

    /* The landscape people cards stay landscape, wider, with a narrower blend panel, so who they are keeps its room. */
    .tb-home-people__track {
        padding: 0 10vw;
    }

    .tb-home-person {
        flex-basis: 80vw;
    }

    .tb-home-person__in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
        padding: 28px 32px;
    }

    .tb-home-person__who h3 {
        font-size: 30px;
    }
}

@media (max-width: 899.98px) {
    .tb-home-ways__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tb-home-way__visual {
        grid-column: 1;
        padding-top: 0;
        border-top: 0;
    }

    .tb-home-quote {
        flex-basis: 84%;
    }
}

/* ---------- Phone ---------- */

@media (max-width: 759.98px) {
    .tb-home {
        --tb-home-pad: 20px;
        --tb-home-space: 56px;
    }

    .tb-home-h1 {
        font-size: 40px;
    }

    .tb-home-h2 {
        font-size: 28px;
    }

    .tb-home-h3 {
        font-size: 24px;
    }

    .tb-home-lead,
    .tb-home-hero__lead {
        font-size: 16px;
    }

    .tb-home-actions .tb-home-btn {
        flex: 1 1 100%;
    }

    .tb-home-arrow {
        display: none;
    }

    /* A phone's hero fills the screen under the 56px header, the proof points below it (Kirsten, 13 November 2026). svh is
       the height with the browser's toolbars showing, so its foot is never behind them. */
    #homeCarousel {
        height: max(480px, calc(100vh - 56px));
        height: max(480px, calc(100svh - 56px));
    }

    /* No dots or pause button on a phone (Kirsten, 13 November 2026): they took space the photo needs. */
    .tb-home-hero__controls {
        display: none;
    }

    .tb-home-hero__shade {
        background: linear-gradient(180deg, rgba(20, 20, 20, 0.1) 0%, rgba(20, 20, 20, 0.88) 72%);
    }

    .tb-home-hero__content {
        padding: 24px 20px 28px;
    }

    .tb-home-slide.window img {
        object-position: 47% center;
    }

    .tb-home-proof {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 0 28px;
    }

    .tb-home-proof li {
        align-items: center;
        padding: 14px 10px;
        text-align: center;
    }

    .tb-home-tub__pair {
        gap: 10px;
    }

    .tb-home-tub__old img {
        width: 150px;
        height: 120px;
    }

    .tb-home-tub__new img {
        width: 110px;
        height: 120px;
    }

    .tb-home-tub__mark {
        width: 34px;
        height: 34px;
    }

    .tb-home-tub__arrow {
        width: 26px;
        height: 26px;
    }

    .tb-home-tub figcaption {
        margin-top: -7px;
    }

    .tb-home-tub__points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 12px;
    }

    /* Tall cards you swipe, the blend panel at the foot with the quote inside it, under the ingredients. */
    .tb-home-people__track {
        gap: 10px;
        padding: 0 10vw;
    }

    .tb-home-person {
        display: flex;
        flex-direction: column;
        flex-basis: 80vw;
        min-height: 0;
        aspect-ratio: auto;
    }

    .tb-home-person__in {
        position: relative;
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(90px, 1fr) auto auto;
        padding: 20px 16px 16px;
        background: linear-gradient(180deg, rgba(20, 20, 20, 0.7) 0%, rgba(20, 20, 20, 0.25) 40%, rgba(20, 20, 20, 0.75) 100%);
    }

    .tb-home-person__who {
        grid-row: 1;
    }

    .tb-home-person__who h3 {
        font-size: 26px;
    }

    .tb-home-person__blend {
        grid-column: 1;
        grid-row: 3;
        align-self: stretch;
        padding-bottom: 6px;
        border-radius: 8px 8px 0 0;
    }

    .tb-home-person__quote {
        grid-row: 4;
        padding: 0 20px 20px;
        border-radius: 0 0 8px 8px;
        background: rgba(31, 31, 31, 0.58);
        font-size: 12.5px;
        font-style: italic;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .tb-home-person__quote::before {
        content: "";
        display: block;
        height: 1px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.22);
    }

    .tb-home-person.jamie img {
        object-position: center 20%;
    }

    .tb-home-person.lisa img {
        object-position: 62% 30%;
    }

    .tb-home-person.sezza img {
        top: 27%;
        height: 50%;
        object-position: 47% center;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
    }

    .tb-home-person.steve img {
        object-position: 62% 25%;
    }

    .tb-home-person.gerry img {
        object-position: 46% 30%;
    }

    .tb-home-person.joe img {
        object-position: 66% 55%;
        transform: translateY(-11%) scale(1.6);
        transform-origin: 87% 68%;
    }

    .tb-home-format {
        min-height: 380px;
    }

    .tb-home-builder {
        display: none;
    }

    .tb-home-phone--builder {
        display: block;
    }

    .tb-home-momentum,
    .tb-home .genetics-banner {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .tb-home-momentum__text {
        padding: 28px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tb-home-hero .carousel-item,
    .tb-home-hero .active.carousel-item-start,
    .tb-home-hero .active.carousel-item-end,
    .tb-home-person,
    .tb-home-people__dots button::before,
    .tb-home-way__visual {
        transition: none;
    }

    .tb-home-phone__screens img + img {
        animation: none;
    }
}

/* ---------- 3X4 Genetics banner (US), kept from the page before ---------- */

.genetics-banner {
    /* 3X4 brand accent colours — local to this banner, not part of the core palette */
    --gx-purple: #663399;
    --gx-blue: #5882C8;
    --gx-gold: #C5A846;
    --gx-teal: #58C2B5;
    --gx-teal-dark: #4AB0A4;
    --gx-ink: #282D2C;

    display: flex;
    justify-content: center;
    /* In the page's column, with the space Momentum has in South Africa (Homepage V3). */
    padding: 96px var(--tb-home-pad);
}

.genetics-banner__card {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1240px;
    border: 1px solid #E8ECEF;
    border-radius: 10px;
    background: #FAFBFC;
    overflow: hidden;
}

.genetics-banner__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(197, 168, 70, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 10% 100%, rgba(102, 51, 153, 0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 0%, rgba(88, 130, 200, 0.03) 0%, transparent 35%);
    z-index: 0;
    pointer-events: none;
}

.genetics-banner__card > * {
    position: relative;
    z-index: 1;
}

.genetics-banner__accent {
    width: 5px;
    flex-shrink: 0;
    background: linear-gradient(180deg, var(--gx-purple) 0%, var(--gx-blue) 50%, var(--gx-gold) 100%);
}

.genetics-banner__content {
    flex: 1;
    padding: 36px 36px 36px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.genetics-banner__logos {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.genetics-banner__logo {
    display: block;
    width: auto;
}

.genetics-banner__logo--3x4 {
    height: 26px;
}

.genetics-banner__logo--tb {
    /* black wordmark sized so its text matches the 3X4 "GENETICS" text — adjust to taste */
    height: 18px;
}

.genetics-banner__logo-divider {
    width: 1px;
    height: 20px;
    background: #CCC;
}

.genetics-banner__badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gx-purple);
    border: 1px solid rgba(102, 51, 153, 0.25);
    padding: 3px 10px;
    border-radius: 100px;
    margin-left: 6px;
}

.genetics-banner__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gx-ink);
    line-height: 1.3;
    margin-bottom: 12px;
}

.genetics-banner__text {
    font-size: 13.5px;
    font-weight: 400;
    color: #555;
    line-height: 1.7;
    margin-bottom: 14px;
}

.genetics-banner__instruction {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--slate-600);
    line-height: 1.6;
    margin-bottom: 22px;
}

.genetics-banner__instruction strong {
    color: var(--gx-teal);
    font-weight: 600;
}

.genetics-banner__cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.genetics-banner__cta-primary {
    display: inline-block;
    background: var(--gx-teal);
    color: var(--color-white);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 12px 26px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.genetics-banner__cta-primary:hover {
    background: var(--gx-teal-dark);
    color: var(--color-white);
}

.genetics-banner__cta-secondary {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--slate-600);
    text-decoration: none;
    transition: color 0.2s ease;
}

.genetics-banner__cta-secondary:hover {
    color: var(--gx-purple);
}

.genetics-banner__cta-secondary span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.genetics-banner__image {
    flex-shrink: 0;
    width: 420px;
    min-height: 280px;
    overflow: hidden;
    background: #f0f0ee;
}

.genetics-banner__image-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

@media (max-width: 800px) {
    .genetics-banner__card {
        flex-direction: column;
    }

    .genetics-banner__accent {
        order: -1;
        width: auto;
        height: 4px;
        background: linear-gradient(90deg, var(--gx-purple) 0%, var(--gx-blue) 50%, var(--gx-gold) 100%);
    }

    .genetics-banner__content {
        padding: 28px 24px;
    }

    .genetics-banner__title {
        font-size: 20px;
    }

    .genetics-banner__cta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .genetics-banner__image {
        order: 1;
        width: 100%;
        min-height: 200px;
        height: 220px;
    }
}

/* Five stars: one drawn shape, filled with the colour of the text around it. */
.tb-star {
    display: inline-block;
    width: 1.125em;
    height: 1em;
    vertical-align: -0.125em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E") center / contain no-repeat;
}