/* Titan Turf Product Quiz — frontend UI */
.ttq-quiz {
    --ttq-accent: #12a456;
    --ttq-accent-dark: #087c43;
    --ttq-accent-light: #1abb69;
    --ttq-text: #202923;
    --ttq-muted: #6f7973;
    --ttq-line: #e1e8e3;
    --ttq-line-strong: #d3dfd7;
    --ttq-surface: #ffffff;
    --ttq-page: #f5f7f5;
    --ttq-soft: #f8faf8;
    --ttq-soft-green: #edf8f1;
    --ttq-star-empty: #c8ead5;
    --ttq-shadow: 0 14px 44px rgba(26, 62, 43, .08);
    --ttq-shadow-hover: 0 18px 46px rgba(26, 62, 43, .13);
    color: var(--ttq-text);
    font-family: inherit;
    width: 100%;
    padding: 34px 24px 48px;
    background: var(--ttq-page);
}

.ttq-quiz *,
.ttq-quiz *::before,
.ttq-quiz *::after { box-sizing: border-box; }

.ttq-quiz button,
.ttq-quiz a { font-family: inherit; }

.ttq-quiz__inner {
    width: min(1240px, 100%);
    margin: 0 auto;
}

/* Intro is intentionally designed as the first card in the quiz, so the heading
   and questions read as a single component rather than unrelated page content. */
.ttq-quiz__header {
    position: relative;
    width: 100%;
    margin: 0 0 16px;
    padding: 26px 30px 25px;
    overflow: hidden;
    border: 1px solid var(--ttq-line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 9px 30px rgba(26,62,43,.055);
    text-align: left;
}

.ttq-quiz__header::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--ttq-accent-dark), var(--ttq-accent-light));
    content: "";
}

.ttq-quiz__eyebrow,
.ttq-results__kicker {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 9px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ttq-soft-green);
    color: var(--ttq-accent-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1;
    text-transform: uppercase;
}

.ttq-quiz__heading,
.ttq-step h3 {
    margin: 0;
    color: inherit;
    font-family: inherit;
    font-weight: 700;
}

.ttq-quiz__heading {
    max-width: 820px;
    color: var(--ttq-text);
    font-size: clamp(30px, 3.1vw, 43px);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.ttq-quiz__intro {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--ttq-muted);
    font-size: 15px;
    line-height: 1.6;
}

.ttq-quiz__stage {
    width: 100%;
    min-height: 260px;
}

.ttq-step { animation: ttqFade .22s ease both; }

/* Question card */
.ttq-step--question {
    width: 100%;
    padding: 28px 30px 30px;
    border: 1px solid var(--ttq-line);
    border-radius: 20px;
    background: var(--ttq-surface);
    box-shadow: var(--ttq-shadow);
}

.ttq-step__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
    color: var(--ttq-accent-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ttq-step__meta > span:last-child {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ttq-soft-green);
}

.ttq-step--question > h3 {
    max-width: 820px;
    margin: 0 0 24px;
    color: var(--ttq-text);
    font-size: clamp(25px, 2.7vw, 35px);
    line-height: 1.16;
    letter-spacing: -.02em;
}

.ttq-back,
.ttq-restart {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--ttq-line-strong);
    border-radius: 10px;
    background: #fff;
    color: #516059;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.ttq-back:hover,
.ttq-back:focus-visible,
.ttq-restart:hover,
.ttq-restart:focus-visible {
    border-color: rgba(18,164,86,.45);
    background: var(--ttq-soft-green);
    color: var(--ttq-accent-dark);
    outline: 0;
}

.ttq-options {
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    background: transparent;
}

.ttq-options--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ttq-options--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ttq-options--dynamic { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.ttq-option {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 208px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 0;
    padding: 22px 22px 21px;
    border: 1px solid var(--ttq-line);
    border-radius: 17px;
    background: #fff;
    color: var(--ttq-text);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 7px 24px rgba(28, 62, 44, .045);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ttq-option:hover,
.ttq-option:focus-visible {
    z-index: 1;
    border-color: rgba(18,164,86,.48);
    background: #fbfefc;
    box-shadow: var(--ttq-shadow-hover);
    transform: translateY(-3px);
    outline: 0;
}

/* Uploaded artwork already contains its own circular framing. */
.ttq-option__icon {
    display: block;
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    overflow: visible;
    background: transparent;
    color: var(--ttq-accent);
}

.ttq-option__icon img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.ttq-option__icon svg {
    display: block;
    width: 86px;
    height: 86px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.ttq-option__copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 6px;
}

.ttq-option__copy strong {
    color: var(--ttq-text);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.ttq-option__copy span {
    color: var(--ttq-muted);
    font-size: 13px;
    line-height: 1.5;
}

.ttq-option__arrow {
    position: absolute;
    right: 18px;
    top: 18px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid #dce7e0;
    border-radius: 50%;
    background: #fff;
    color: var(--ttq-accent-dark);
    font-size: 18px;
    line-height: 1;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.ttq-option:hover .ttq-option__arrow,
.ttq-option:focus-visible .ttq-option__arrow {
    border-color: var(--ttq-accent);
    background: var(--ttq-accent);
    color: #fff;
    transform: translateX(2px);
}

/* Results */
.ttq-step--results { width: 100%; }

.ttq-results__heading {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin: 0 0 20px;
    padding: 24px 28px;
    overflow: hidden;
    border: 1px solid var(--ttq-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(26,62,43,.055);
    color: var(--ttq-text);
}

.ttq-results__heading::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--ttq-accent-dark), var(--ttq-accent-light));
    content: "";
}

.ttq-results__heading h3 {
    margin: 0;
    color: var(--ttq-text);
    font-size: clamp(26px, 2.8vw, 36px);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.ttq-results__kicker { margin-bottom: 8px; }

.ttq-results__description {
    max-width: 700px;
    margin: 9px 0 0;
    color: var(--ttq-muted);
    font-size: 13px;
    line-height: 1.55;
}

.ttq-results__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
}

/* Products are intentionally independent cards, not columns inside one shared table. */
.ttq-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 22px;
    padding: 0;
    background: transparent;
}

.ttq-product {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ttq-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 32px rgba(26,62,43,.065);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ttq-product:hover {
    border-color: rgba(18,164,86,.34);
    box-shadow: var(--ttq-shadow-hover);
    transform: translateY(-2px);
}

.ttq-product--recommended {
    border-color: rgba(18,164,86,.34);
    box-shadow: 0 12px 34px rgba(18,164,86,.10);
}

.ttq-product__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--ttq-line);
    background: #edf3ef;
}

.ttq-product__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.ttq-product:hover .ttq-product__image img { transform: scale(1.02); }

.ttq-product__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 22px;
}

.ttq-product__top {
    display: flex;
    min-height: 78px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.ttq-product__match {
    position: static;
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    margin: 0 0 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ttq-soft-green);
    color: var(--ttq-accent-dark);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.ttq-product__top h3 {
    margin: 0;
    color: var(--ttq-text);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}

.ttq-product__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 17px 0 0;
    background: transparent;
    border: 0;
}

.ttq-product__metric {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    min-height: 70px;
    padding: 12px;
    border: 1px solid #e9efeb;
    border-radius: 12px;
    background: var(--ttq-soft);
}

.ttq-product__metric--wide {
    grid-column: 1 / -1;
    min-height: 64px;
}

.ttq-product__metric-icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 9px;
    background: var(--ttq-soft-green);
    color: var(--ttq-accent-dark);
}

.ttq-product__metric-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ttq-product__metric span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.ttq-product__metric small {
    color: #7e8882;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.ttq-product__metric strong {
    overflow: hidden;
    color: #334039;
    font-size: 13px;
    line-height: 1.25;
    text-overflow: ellipsis;
}
.ttq-product__metric--wide strong { font-size: 13px; }

.ttq-product__ratings {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
    margin-top: 7px;
    padding: 7px 0 0;
    border-top: 1px solid var(--ttq-line);
    background: #fff;
}

.ttq-product__ratings > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 42px;
    padding: 8px 0;
    border-bottom: 1px solid #edf0ed;
}

.ttq-product__ratings > div:last-child { border-bottom: 0; }
.ttq-product__ratings > div > span {
    color: #5f6c65;
    font-size: 13px;
    font-weight: 500;
}

/* Larger, clearly legible green ratings. Empty stars remain green but lighter,
   so a 3/5 rating is immediately distinguishable from 5/5. */
.ttq-rating {
    color: var(--ttq-accent);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    white-space: nowrap;
}
.ttq-rating__empty { color: var(--ttq-star-empty); }
.ttq-cost {
    color: var(--ttq-accent-dark);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
}

.ttq-product__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 46px;
    margin-top: auto;
    padding: 0 15px;
    border: 0;
    border-radius: 10px;
    background: var(--ttq-accent);
    color: #fff !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .075em;
    text-decoration: none !important;
    text-transform: uppercase;
    transition: background .18s ease, transform .18s ease;
}

.ttq-product__button:hover {
    background: var(--ttq-accent-dark);
    transform: translateY(-1px);
}

.ttq-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 28px;
    border: 1px dashed #cad7cf;
    border-radius: 14px;
    background: #f8fbf9;
}
.ttq-empty span { color: var(--ttq-muted); }

/* Slider */
.ttq-slider-nav {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ttq-slider-nav__button {
    width: 38px;
    height: 38px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--ttq-line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--ttq-accent-dark);
    cursor: pointer;
    font: inherit;
    font-size: 17px;
    line-height: 1;
    transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.ttq-slider-nav__button:hover:not(:disabled) {
    border-color: rgba(18,164,86,.45);
    background: var(--ttq-soft-green);
}
.ttq-slider-nav__button:disabled { opacity: .32; cursor: default; }
.ttq-slider-nav__status {
    min-width: 68px;
    color: var(--ttq-muted);
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
}

.ttq-results-slider { position: relative; width: 100%; overflow: hidden; }
.ttq-results-slider__viewport { width: 100%; overflow: hidden; padding: 3px; margin: -3px; }
.ttq-results.ttq-results--slider {
    --ttq-visible: 3;
    display: flex;
    grid-template-columns: none;
    gap: 22px;
    width: 100%;
    transform: translate3d(0,0,0);
    transition: transform .36s cubic-bezier(.2,.75,.25,1);
    will-change: transform;
}
.ttq-results--slider .ttq-product {
    flex: 0 0 calc((100% - (22px * (var(--ttq-visible) - 1))) / var(--ttq-visible));
    min-width: 0;
}

@keyframes ttqFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1000px) {
    .ttq-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ttq-options--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .ttq-quiz { padding: 24px 16px 34px; }
    .ttq-quiz__header { margin-bottom: 14px; padding: 23px 20px 21px; border-radius: 16px; }
    .ttq-step--question { padding: 22px 18px 18px; border-radius: 16px; }
    .ttq-step--question > h3 { margin-bottom: 20px; }
    .ttq-options,
    .ttq-options--two,
    .ttq-options--three,
    .ttq-options--dynamic,
    .ttq-results { grid-template-columns: 1fr; }
    .ttq-option {
        min-height: 132px;
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr) 34px;
        align-items: center;
        gap: 14px;
        padding: 17px;
    }
    .ttq-option__icon { width: 80px; height: 80px; flex-basis: 80px; }
    .ttq-option__icon img { width: 80px; height: 80px; }
    .ttq-option__icon svg { width: 70px; height: 70px; }
    .ttq-option__arrow { position: static; }
    .ttq-option__copy strong { font-size: 17px; }
    .ttq-results__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        padding: 21px 20px;
        border-radius: 16px;
    }
    .ttq-results__actions { width: 100%; justify-content: space-between; }
    .ttq-product { border-radius: 16px; }
    .ttq-product__body { padding: 20px; }
}

@media (max-width: 430px) {
    .ttq-option {
        grid-template-columns: 68px minmax(0, 1fr) 32px;
        min-height: 118px;
        gap: 12px;
        padding: 14px;
    }
    .ttq-option__icon { width: 68px; height: 68px; flex-basis: 68px; }
    .ttq-option__icon img { width: 68px; height: 68px; }
    .ttq-option__icon svg { width: 60px; height: 60px; }
    .ttq-product__metrics { grid-template-columns: 1fr; }
    .ttq-product__metric--wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ttq-step,
    .ttq-option,
    .ttq-product,
    .ttq-product__button { animation: none; transition: none; }
}


/* v0.5.3 — comparison-card results and product detail modal */
.ttq-product {
    cursor: pointer;
    overflow: visible;
}

.ttq-product--recommended {
    border: 2px solid var(--ttq-accent) !important;
    box-shadow: 0 18px 44px rgba(18,164,86,.16) !important;
    transform: translateY(-8px);
}

.ttq-product--recommended:hover {
    transform: translateY(-10px);
    box-shadow: 0 22px 52px rgba(18,164,86,.20) !important;
}

.ttq-product__featured {
    position: relative;
    z-index: 2;
    margin: -2px -2px 0;
    padding: 10px 16px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, var(--ttq-accent-dark), var(--ttq-accent-light));
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    text-align: center;
    text-transform: uppercase;
}

.ttq-product--recommended .ttq-product__image {
    border-radius: 0;
}

.ttq-product__top {
    min-height: 88px;
}

.ttq-product__match {
    order: 2;
    margin: 8px 0 0;
    padding: 0;
    min-height: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ttq-accent-dark);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: none;
}

.ttq-product__match--muted {
    color: #7d8881;
}

.ttq-product__button {
    min-height: 52px;
    margin-top: 22px;
    border: 1px solid var(--ttq-accent);
    border-radius: 12px;
    background: #fff;
    color: var(--ttq-accent-dark) !important;
    cursor: pointer;
    font-size: 11px;
}

.ttq-product__button:hover,
.ttq-product__button:focus-visible {
    background: var(--ttq-accent);
    color: #fff !important;
    outline: 0;
}

.ttq-product--recommended .ttq-product__button {
    background: var(--ttq-accent);
    color: #fff !important;
}

.ttq-product--recommended .ttq-product__button:hover,
.ttq-product--recommended .ttq-product__button:focus-visible {
    background: var(--ttq-accent-dark);
}

.ttq-rating {
    font-size: 21px;
    letter-spacing: 2.5px;
}

.ttq-rating__empty {
    color: #bfe9cf;
}

.ttq-cost {
    font-size: 18px;
}

/* v0.6.0 — guided quiz experience */
.ttq-quiz {
    padding: 42px 24px 56px;
    background: #f4f7f5;
}

.ttq-quiz__shell {
    overflow: hidden;
    border: 1px solid #dfe8e2;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 20px 54px rgba(20, 58, 37, .10);
}

.ttq-quiz__header {
    margin: 0;
    padding: 34px 38px 26px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

.ttq-quiz__header::before {
    height: 6px;
}

.ttq-quiz__heading {
    max-width: 900px;
    margin-inline: auto;
}

.ttq-quiz__intro {
    max-width: 760px;
    margin: 10px auto 0;
}

.ttq-quiz__stage {
    min-height: 0;
    padding: 0 30px 30px;
}

.ttq-step--question {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ttq-progress {
    margin: 0 0 20px;
}

.ttq-progress__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    color: #647168;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ttq-progress__meta strong {
    color: var(--ttq-accent-dark);
    font-size: 11px;
}

.ttq-progress__track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7eee9;
}

.ttq-progress__track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ttq-accent-dark), var(--ttq-accent-light));
    transition: width .3s ease;
}

.ttq-progress--complete {
    margin-bottom: 18px;
}

.ttq-question-layout {
    display: grid;
    grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr);
    gap: 24px;
    padding: 20px;
    border: 1px solid var(--ttq-line);
    border-radius: 24px;
    background: #f8faf8;
}

.ttq-question-visual {
    position: relative;
    display: grid;
    min-height: 430px;
    overflow: hidden;
    place-items: center;
    border-radius: 20px;
    background:
        radial-gradient(circle at 70% 20%, rgba(44, 201, 112, .16), transparent 34%),
        linear-gradient(145deg, #eaf8ef, #f5fbf7 58%, #e5f4eb);
}

.ttq-question-visual::after {
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 210px;
    height: 210px;
    border: 1px solid rgba(18,164,86,.12);
    border-radius: 50%;
    content: "";
}

.ttq-question-visual__image {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 430px;
    place-items: center;
    padding: 32px;
}

.ttq-question-visual__image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 430px;
    max-height: 360px;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(20, 58, 37, .10));
}

.ttq-question-visual__image:not(.is-selection) {
    padding: 0;
}

.ttq-question-visual__image:not(.is-selection) img {
    max-width: none;
    max-height: none;
    object-fit: cover;
    filter: none;
}

.ttq-question-visual__placeholder {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: 280px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px;
    color: #486054;
    text-align: center;
}

.ttq-question-visual__mark {
    display: grid;
    width: 88px;
    height: 88px;
    margin-bottom: 8px;
    place-items: center;
    border-radius: 24px;
    background: #fff;
    color: var(--ttq-accent);
    box-shadow: 0 12px 34px rgba(18,164,86,.12);
}

.ttq-question-visual__mark svg {
    width: 48px;
    height: 48px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ttq-question-visual__placeholder strong {
    color: #243229;
    font-size: 20px;
}

.ttq-question-visual__placeholder small {
    color: #758078;
    font-size: 13px;
    line-height: 1.5;
}

.ttq-question-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 24px 18px 14px;
}

.ttq-question-kicker {
    display: inline-flex;
    align-self: flex-start;
    margin-bottom: 11px;
    color: var(--ttq-accent-dark);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.ttq-question-content > h3 {
    max-width: 670px;
    margin: 0 0 22px;
    color: var(--ttq-text);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.ttq-options--choice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ttq-options--choice-list .ttq-option {
    display: grid;
    min-height: 88px;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border: 1px solid #dce5df;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
    transform: none;
}

.ttq-options--choice-list .ttq-option:hover,
.ttq-options--choice-list .ttq-option:focus-visible {
    border-color: rgba(18,164,86,.48);
    background: #fbfefc;
    box-shadow: 0 8px 24px rgba(18,164,86,.07);
    transform: none;
}

.ttq-options--choice-list .ttq-option.is-selected {
    border-color: var(--ttq-accent);
    background: var(--ttq-soft-green);
    box-shadow: inset 0 0 0 1px var(--ttq-accent), 0 9px 25px rgba(18,164,86,.08);
}

.ttq-option__choice {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1.5px solid #cad7cf;
    border-radius: 50%;
    background: #fff;
    color: transparent;
    font-size: 14px;
    font-weight: 900;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.ttq-option.is-selected .ttq-option__choice {
    border-color: var(--ttq-accent);
    background: var(--ttq-accent);
    color: #fff;
}

.ttq-options--choice-list .ttq-option__copy {
    gap: 4px;
}

.ttq-options--choice-list .ttq-option__copy strong {
    font-size: 16px;
    line-height: 1.25;
}

.ttq-options--choice-list .ttq-option__copy span {
    font-size: 12px;
    line-height: 1.45;
}

.ttq-question-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 24px;
}

.ttq-nav-button {
    appearance: none;
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border-radius: 13px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}

.ttq-nav-button--back {
    border: 1px solid var(--ttq-line-strong);
    background: #fff;
    color: #536159;
}

.ttq-nav-button--next {
    min-width: 170px;
    border: 1px solid var(--ttq-accent);
    background: linear-gradient(90deg, var(--ttq-accent-dark), var(--ttq-accent-light));
    color: #fff;
    box-shadow: 0 10px 24px rgba(18,164,86,.18);
}

.ttq-nav-button--next:not(:disabled):hover,
.ttq-nav-button--next:not(:disabled):focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(18,164,86,.24);
    outline: 0;
}

.ttq-nav-button:disabled {
    border-color: #dce4df;
    background: #edf1ee;
    color: #a0aaa3;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .85;
}

.ttq-question-error {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 28px;
    border: 1px solid #e0e8e2;
    border-radius: 18px;
    background: #fff;
}

/* Results remain connected to the same quiz shell. */
.ttq-step--results {
    padding-top: 0;
}

.ttq-results__heading {
    box-shadow: none;
}

@media (max-width: 980px) {
    .ttq-question-layout {
        grid-template-columns: 1fr;
    }
    .ttq-question-visual,
    .ttq-question-visual__image {
        min-height: 300px;
    }
    .ttq-question-visual__image img {
        max-height: 250px;
    }
    .ttq-question-content {
        padding: 12px 8px 8px;
    }
}

@media (max-width: 680px) {
    .ttq-quiz {
        padding: 18px 12px 30px;
    }
    .ttq-quiz__shell {
        border-radius: 20px;
    }
    .ttq-quiz__header {
        padding: 28px 20px 20px;
        text-align: left;
    }
    .ttq-quiz__heading,
    .ttq-quiz__intro {
        margin-left: 0;
        margin-right: 0;
    }
    .ttq-quiz__stage {
        padding: 0 14px 16px;
    }
    .ttq-question-layout {
        gap: 14px;
        padding: 12px;
        border-radius: 18px;
    }
    .ttq-question-visual,
    .ttq-question-visual__image {
        min-height: 240px;
        border-radius: 16px;
    }
    .ttq-question-visual__image {
        padding: 18px;
    }
    .ttq-question-visual__image img {
        max-height: 205px;
    }
    .ttq-question-content > h3 {
        font-size: 29px;
    }
    .ttq-options--choice-list {
        grid-template-columns: 1fr;
    }
    .ttq-options--choice-list .ttq-option {
        min-height: 76px;
    }
    .ttq-question-nav {
        align-items: stretch;
        flex-direction: column-reverse;
    }
    .ttq-question-nav > span {
        display: none;
    }
    .ttq-nav-button {
        width: 100%;
    }
}


/* v0.6.1 — simplified single-card quiz: image → question → pill choice → next */
.ttq-quiz {
    --ttq-deep-green: #003b2a;
    --ttq-deeper-green: #062b21;
    --ttq-glass: rgba(255,255,255,.90);
    --ttq-glass-line: rgba(255,255,255,.26);
    padding: 46px 20px 58px;
    background:
        radial-gradient(circle at 18% 8%, rgba(31,190,104,.12), transparent 31%),
        linear-gradient(180deg, #f4f7f5 0%, #eef3ef 100%);
}

.ttq-quiz__inner { width: min(900px, 100%); }

.ttq-quiz__shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,59,42,.12);
    border-radius: 34px;
    background:
        radial-gradient(circle at 86% -10%, rgba(31,187,102,.42), transparent 35%),
        linear-gradient(145deg, var(--ttq-deep-green), var(--ttq-deeper-green));
    box-shadow: 0 28px 70px rgba(1,43,30,.19);
}

.ttq-quiz__shell::before {
    position: absolute;
    top: -140px;
    right: -120px;
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: rgba(42,207,118,.13);
    filter: blur(6px);
    pointer-events: none;
    content: "";
}

.ttq-quiz__header {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 30px 44px 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.ttq-quiz__header::before { display: none; }

.ttq-quiz__eyebrow {
    min-height: 0;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    color: #53ed99;
    font-size: 10px;
    letter-spacing: .14em;
}

.ttq-quiz__heading {
    max-width: 700px;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.ttq-quiz__intro {
    max-width: 610px;
    margin: 10px auto 0;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.55;
}

.ttq-quiz__stage {
    position: relative;
    z-index: 1;
    min-height: 0;
    padding: 0 20px 20px;
}

.ttq-simple-quiz {
    width: 100%;
    padding: 0;
    background: transparent;
}

.ttq-simple-quiz__glass {
    overflow: hidden;
    border: 1px solid var(--ttq-glass-line);
    border-radius: 26px;
    background: var(--ttq-glass);
    box-shadow: 0 18px 48px rgba(0,0,0,.15);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.ttq-progress-modern {
    padding: 18px 24px 0;
}

.ttq-progress-modern__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
    color: #607169;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ttq-progress-modern__row strong { color: var(--ttq-accent-dark); }

.ttq-progress-modern__track {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(0,59,42,.10);
}

.ttq-progress-modern__track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0c9b54, #28d57a);
    box-shadow: 0 0 18px rgba(33,199,111,.26);
    transition: width .3s ease;
}

.ttq-focus-image {
    position: relative;
    display: grid;
    min-height: 390px;
    margin: 18px 24px 0;
    overflow: hidden;
    place-items: center;
    border: 1px solid rgba(0,59,42,.09);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 30%, rgba(49,211,126,.14), transparent 40%),
        linear-gradient(145deg, #f7fbf8, #eaf5ee);
    transition: opacity .18s ease, transform .18s ease;
}

.ttq-focus-image.is-changing {
    opacity: .45;
    transform: scale(.99);
}

.ttq-focus-image__frame {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 390px;
    place-items: center;
    padding: 22px;
}

.ttq-focus-image__frame img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 590px;
    max-height: 350px;
    object-fit: contain;
    filter: drop-shadow(0 22px 36px rgba(0,50,32,.12));
}

.ttq-focus-image__placeholder {
    display: flex;
    max-width: 280px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #718078;
    text-align: center;
}

.ttq-focus-image__mark {
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    border-radius: 24px;
    background: rgba(255,255,255,.74);
    color: var(--ttq-accent);
    box-shadow: 0 14px 34px rgba(0,59,42,.09);
}
.ttq-focus-image__mark svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.ttq-simple-quiz__content {
    padding: 27px 30px 30px;
    text-align: center;
}

.ttq-simple-quiz__content .ttq-question-kicker {
    display: inline-flex;
    align-self: auto;
    margin: 0 0 7px;
    color: #168d50;
    font-size: 9px;
    letter-spacing: .13em;
}

.ttq-simple-quiz__content > h3 {
    max-width: 700px;
    margin: 0 auto 22px;
    color: #17261e;
    font-size: clamp(25px, 3.3vw, 36px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.ttq-answer-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin: 0 auto;
}

.ttq-answer-pill {
    appearance: none;
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 128px;
    padding: 0 19px;
    border: 1px solid #cad9d0;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    color: #22332a;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(0,59,42,.04);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    transition: border-color .17s ease, background .17s ease, color .17s ease, box-shadow .17s ease, transform .17s ease;
}

.ttq-answer-pill:hover,
.ttq-answer-pill:focus-visible {
    border-color: rgba(18,164,86,.56);
    background: #f5fbf7;
    box-shadow: 0 8px 22px rgba(0,59,42,.08);
    outline: 0;
    transform: translateY(-1px);
}

.ttq-answer-pill__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border: 1.5px solid #9ab5a5;
    border-radius: 50%;
    background: transparent;
    transition: border-color .17s ease, background .17s ease, box-shadow .17s ease;
}

.ttq-answer-pill.is-selected {
    border-color: #0ea158;
    background: linear-gradient(135deg, #0e9a55, #18b966);
    color: #fff;
    box-shadow: 0 10px 24px rgba(14,154,85,.20);
}

.ttq-answer-pill.is-selected .ttq-answer-pill__dot {
    border-color: #fff;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}

.ttq-selected-help {
    min-height: 20px;
    margin: 13px auto 0;
    color: #718078;
    font-size: 12px;
    line-height: 1.5;
}

.ttq-simple-nav {
    display: grid;
    grid-template-columns: 1fr minmax(180px, 250px) 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.ttq-simple-nav__back,
.ttq-simple-nav__next {
    appearance: none;
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    transition: transform .17s ease, box-shadow .17s ease, opacity .17s ease, background .17s ease;
}

.ttq-simple-nav__back {
    justify-self: start;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: #617168;
}

.ttq-simple-nav__back:hover,
.ttq-simple-nav__back:focus-visible {
    color: var(--ttq-accent-dark);
    outline: 0;
}

.ttq-simple-nav__next {
    grid-column: 2;
    width: 100%;
    padding: 0 25px;
    border: 1px solid #003b2a;
    background: linear-gradient(135deg, #003b2a, #07553a);
    color: #fff;
    box-shadow: 0 12px 26px rgba(0,59,42,.19);
}

.ttq-simple-nav__next:not(:disabled):hover,
.ttq-simple-nav__next:not(:disabled):focus-visible {
    background: linear-gradient(135deg, #064d37, #0b6c49);
    box-shadow: 0 16px 32px rgba(0,59,42,.24);
    outline: 0;
    transform: translateY(-2px);
}

.ttq-simple-nav__next:disabled {
    border-color: #d9e2dc;
    background: #e8eeea;
    color: #a3aea7;
    box-shadow: none;
    cursor: not-allowed;
}

/* Keep result screens connected to the dark/glass quiz shell. */
.ttq-step--results {
    padding: 4px 4px 8px;
}
.ttq-step--results .ttq-progress--complete {
    margin: 0 0 14px;
    padding: 0 2px;
}
.ttq-step--results .ttq-progress__meta { color: rgba(255,255,255,.72); }
.ttq-step--results .ttq-progress__meta strong { color: #55ed9a; }
.ttq-step--results .ttq-progress__track { background: rgba(255,255,255,.13); }
.ttq-results__heading {
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

@media (max-width: 700px) {
    .ttq-quiz { padding: 22px 12px 32px; }
    .ttq-quiz__shell { border-radius: 24px; }
    .ttq-quiz__header { padding: 25px 20px 15px; }
    .ttq-quiz__heading { font-size: 30px; }
    .ttq-quiz__intro { font-size: 12px; }
    .ttq-quiz__stage { padding: 0 10px 10px; }
    .ttq-simple-quiz__glass { border-radius: 20px; }
    .ttq-progress-modern { padding: 15px 16px 0; }
    .ttq-focus-image { min-height: 270px; margin: 14px 14px 0; border-radius: 16px; }
    .ttq-focus-image__frame { min-height: 270px; padding: 14px; }
    .ttq-focus-image__frame img { max-height: 245px; }
    .ttq-simple-quiz__content { padding: 23px 16px 18px; }
    .ttq-simple-quiz__content > h3 { font-size: 27px; margin-bottom: 18px; }
    .ttq-answer-pills { gap: 8px; }
    .ttq-answer-pill { min-width: calc(50% - 4px); min-height: 48px; padding: 0 12px; font-size: 13px; }
    .ttq-simple-nav { grid-template-columns: 1fr; margin-top: 20px; }
    .ttq-simple-nav__spacer { display: none; }
    .ttq-simple-nav__next { grid-column: 1; grid-row: 1; width: 100%; }
    .ttq-simple-nav__back { grid-row: 2; justify-self: center; min-height: 42px; }
}

@media (max-width: 420px) {
    .ttq-answer-pill { min-width: 100%; }
    .ttq-focus-image { min-height: 235px; }
    .ttq-focus-image__frame { min-height: 235px; }
    .ttq-focus-image__frame img { max-height: 210px; }
}

/* v0.6.2 — split product-quiz layout: answers left, featured image right */
.ttq-quiz {
    --ttq-ink: #062d21;
    --ttq-deep: #003b2a;
    --ttq-deeper: #022b20;
    --ttq-lime: #2ee882;
    --ttq-lime-soft: #59f0a0;
    padding: 42px 24px 56px;
    background: #f3f6f4;
}

.ttq-quiz__inner { width: min(1180px, 100%); }

.ttq-quiz__shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,59,42,.10);
    border-radius: 30px;
    background:
        radial-gradient(circle at 88% 14%, rgba(46,232,130,.16), transparent 28%),
        linear-gradient(145deg, #023c2d 0%, #002f23 58%, #01281e 100%);
    box-shadow: 0 28px 70px rgba(0,42,29,.18);
}

.ttq-quiz__shell::after {
    position: absolute;
    right: -10%;
    bottom: -32%;
    width: 560px;
    height: 560px;
    border: 1px solid rgba(83,237,153,.09);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.ttq-quiz__header {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 34px 40px 18px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}
.ttq-quiz__header::before { display: none; }
.ttq-quiz__eyebrow {
    min-height: 0;
    margin: 0 0 8px;
    padding: 0;
    background: transparent;
    color: #5cf0a0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}
.ttq-quiz__heading {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.04;
    letter-spacing: -.04em;
}
.ttq-quiz__intro {
    max-width: 680px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 14px;
}
.ttq-quiz__stage {
    position: relative;
    z-index: 1;
    padding: 0 20px 20px;
}

.ttq-simple-quiz__glass {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.055));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px rgba(0,0,0,.14);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.ttq-progress-modern { padding: 22px 24px 0; }
.ttq-progress-modern__row {
    margin-bottom: 9px;
    color: rgba(255,255,255,.62);
}
.ttq-progress-modern__row strong { color: #63efa5; }
.ttq-progress-modern__track { background: rgba(255,255,255,.12); }
.ttq-progress-modern__track > span {
    background: linear-gradient(90deg, #22d978, #62f1a6);
    box-shadow: 0 0 20px rgba(57,231,137,.28);
}

.ttq-simple-quiz__layout {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    gap: 22px;
    align-items: stretch;
    padding: 22px 24px 24px;
}

.ttq-simple-quiz__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 14px 4px 2px 4px;
    text-align: left;
}

.ttq-simple-quiz__content .ttq-question-kicker {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 8px;
    color: #5cf0a0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.ttq-simple-quiz__content > h3 {
    max-width: 520px;
    margin: 0 0 22px;
    color: #fff;
    font-size: clamp(27px, 3.1vw, 38px);
    line-height: 1.09;
    letter-spacing: -.035em;
}

.ttq-answer-pills {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin: 0;
}

.ttq-answer-pill {
    appearance: none;
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) 30px;
    min-width: 0;
    min-height: 66px;
    align-items: center;
    justify-content: stretch;
    gap: 13px;
    padding: 8px 11px 8px 9px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    color: #fff;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    text-align: left;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.ttq-answer-pill:hover,
.ttq-answer-pill:focus-visible {
    border-color: rgba(88,239,159,.58);
    background: rgba(255,255,255,.09);
    box-shadow: 0 10px 26px rgba(0,0,0,.13), inset 0 1px 0 rgba(255,255,255,.10);
    outline: 0;
    transform: translateY(-1px);
}

.ttq-answer-pill__icon {
    display: grid;
    width: 48px;
    height: 48px;
    overflow: hidden;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
}
.ttq-answer-pill__icon img {
    display: block;
    width: 44px;
    height: 44px;
    object-fit: contain;
}
.ttq-answer-pill__icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #5cf0a0;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.ttq-answer-pill__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.ttq-answer-pill__label {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}
.ttq-answer-pill__help {
    overflow: hidden;
    color: rgba(255,255,255,.54);
    font-size: 11px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ttq-answer-pill__check {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: transparent;
    font-size: 13px;
    font-weight: 900;
    transition: all .16s ease;
}
.ttq-answer-pill.is-selected {
    border-color: #41e78c;
    background: linear-gradient(135deg, rgba(33,211,116,.23), rgba(55,238,143,.10));
    color: #fff;
    box-shadow: 0 0 0 1px rgba(65,231,140,.30), 0 12px 28px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.12);
}
.ttq-answer-pill.is-selected .ttq-answer-pill__icon {
    background: rgba(75,235,145,.12);
}
.ttq-answer-pill.is-selected .ttq-answer-pill__check {
    border-color: #4bea93;
    background: #4bea93;
    color: #003b2a;
    box-shadow: 0 0 18px rgba(75,234,147,.28);
}

.ttq-focus-image {
    position: relative;
    display: grid;
    min-height: 440px;
    margin: 0;
    overflow: hidden;
    place-items: center;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 30%, rgba(63,232,139,.20), transparent 42%),
        rgba(0,25,18,.44);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.ttq-focus-image::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 65%, rgba(0,37,27,.24));
    content: "";
    pointer-events: none;
}
.ttq-focus-image__frame {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 440px;
    place-items: center;
    padding: 18px;
}
.ttq-focus-image__frame img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: 440px;
    border-radius: 14px;
    object-fit: cover;
    filter: none;
}
.ttq-focus-image__placeholder {
    display: flex;
    max-width: 270px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.54);
    text-align: center;
}
.ttq-focus-image__mark {
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background: rgba(255,255,255,.07);
    color: #5cf0a0;
    box-shadow: none;
}

.ttq-simple-nav {
    display: grid;
    grid-template-columns: auto minmax(190px, 1fr);
    gap: 10px;
    margin-top: auto;
    padding-top: 22px;
}
.ttq-simple-nav__spacer { display: block; }
.ttq-simple-nav__back,
.ttq-simple-nav__next {
    min-height: 54px;
    border-radius: 14px;
}
.ttq-simple-nav__back {
    justify-self: stretch;
    padding: 0 16px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.72);
}
.ttq-simple-nav__back:hover,
.ttq-simple-nav__back:focus-visible {
    border-color: rgba(88,239,159,.45);
    background: rgba(255,255,255,.08);
    color: #fff;
}
.ttq-simple-nav__next {
    grid-column: 2;
    width: 100%;
    border: 1px solid #39e587;
    background: linear-gradient(135deg, #28d878, #52ed99);
    color: #003b2a;
    box-shadow: 0 12px 28px rgba(38,220,126,.18);
}
.ttq-simple-nav__next:not(:disabled):hover,
.ttq-simple-nav__next:not(:disabled):focus-visible {
    background: linear-gradient(135deg, #47e993, #6ff3ad);
    box-shadow: 0 16px 32px rgba(38,220,126,.24);
}
.ttq-simple-nav__next:disabled {
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.32);
    box-shadow: none;
}

/* Results remain part of the same dark shell while the product cards stay clean. */
.ttq-step--results { padding: 0 4px 4px; }
.ttq-step--results .ttq-progress--complete { margin: 0 0 14px; }
.ttq-step--results .ttq-progress__meta { color: rgba(255,255,255,.62); }
.ttq-step--results .ttq-progress__meta strong { color: #5cf0a0; }
.ttq-step--results .ttq-progress__track { background: rgba(255,255,255,.10); }
.ttq-results__heading {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 42px rgba(0,0,0,.12);
}

@media (max-width: 980px) {
    .ttq-simple-quiz__layout {
        grid-template-columns: 1fr;
    }
    .ttq-focus-image {
        min-height: 330px;
        grid-row: 1;
    }
    .ttq-focus-image__frame { min-height: 330px; }
    .ttq-focus-image__frame img { max-height: 330px; }
    .ttq-simple-quiz__content { grid-row: 2; }
}

@media (max-width: 700px) {
    .ttq-quiz { padding: 20px 12px 30px; }
    .ttq-quiz__shell { border-radius: 22px; }
    .ttq-quiz__header { padding: 24px 20px 14px; }
    .ttq-quiz__heading { font-size: 30px; }
    .ttq-quiz__intro { font-size: 12px; }
    .ttq-quiz__stage { padding: 0 10px 10px; }
    .ttq-progress-modern { padding: 15px 15px 0; }
    .ttq-simple-quiz__layout { gap: 15px; padding: 15px; }
    .ttq-focus-image { min-height: 245px; border-radius: 16px; }
    .ttq-focus-image__frame { min-height: 245px; padding: 10px; }
    .ttq-focus-image__frame img { max-height: 245px; border-radius: 12px; }
    .ttq-simple-quiz__content { padding: 4px 0 0; }
    .ttq-simple-quiz__content > h3 { font-size: 28px; margin-bottom: 18px; }
    .ttq-answer-pill { grid-template-columns: 44px minmax(0,1fr) 28px; min-height: 62px; }
    .ttq-answer-pill__icon { width: 44px; height: 44px; }
    .ttq-answer-pill__icon img { width: 40px; height: 40px; }
    .ttq-simple-nav { grid-template-columns: 1fr; }
    .ttq-simple-nav__spacer { display: none; }
    .ttq-simple-nav__next { grid-column: 1; grid-row: 1; }
    .ttq-simple-nav__back { grid-row: 2; }
}


/* v0.6.3 — full-width quiz, detached page heading, transparent question visual,
   and dark product recommendation cards inspired by modern product-quiz UIs. */
.ttq-quiz {
    padding: 40px 0 56px;
    background: #f3f6f4;
}

.ttq-quiz__inner {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* Page intro now lives above the quiz shell and visually belongs to the page. */
.ttq-quiz__header {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto 24px;
    padding: 0 24px;
    background: transparent;
    text-align: left;
}
.ttq-quiz__eyebrow {
    color: var(--ttq-accent-dark);
}
.ttq-quiz__heading {
    max-width: 860px;
    color: #163126;
    font-size: clamp(34px, 4.1vw, 54px);
    line-height: 1.02;
}
.ttq-quiz__intro {
    max-width: 740px;
    color: #6d7b73;
    font-size: 15px;
}

.ttq-quiz__shell {
    width: 100%;
    border-radius: 30px;
}
.ttq-quiz__stage {
    width: 100%;
    padding: 22px;
}

/* The featured question image should be artwork, not artwork inside another object/card. */
.ttq-focus-image {
    min-height: 420px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.ttq-focus-image::after { display: none; }
.ttq-focus-image__frame {
    min-height: 420px;
    padding: 10px 0 10px 24px;
}
.ttq-focus-image__frame img {
    width: 100%;
    height: 100%;
    max-width: 520px;
    max-height: 420px;
    border-radius: 0;
    object-fit: contain;
    filter: drop-shadow(0 22px 38px rgba(0,0,0,.18));
}
.ttq-focus-image__placeholder {
    min-height: 360px;
    justify-content: center;
}

/* Results heading is no longer a separate white card. */
.ttq-step--results {
    padding: 2px;
}
.ttq-step--results .ttq-progress--complete {
    margin: 0 0 22px;
    padding: 0 2px;
}
.ttq-results__heading {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 28px;
    margin: 0 0 22px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.ttq-results__heading::before { display: none; }
.ttq-results__kicker {
    min-height: 0;
    margin: 0 0 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #63efa5;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}
.ttq-results__heading h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.04;
    letter-spacing: -.04em;
}
.ttq-results__description {
    max-width: 720px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.55;
}
.ttq-restart {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
}
.ttq-restart:hover,
.ttq-restart:focus-visible {
    border-color: rgba(88,239,159,.48);
    background: rgba(255,255,255,.10);
    color: #fff;
}

/* Product selection — individual glass/dark cards, with one clear best match. */
.ttq-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 0;
    background: transparent;
}
.ttq-product {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    background:
        radial-gradient(circle at 78% 0%, rgba(60,238,144,.10), transparent 32%),
        linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 38px rgba(0,0,0,.16);
    cursor: pointer;
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.ttq-product:hover {
    border-color: rgba(88,239,159,.38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 24px 48px rgba(0,0,0,.20);
    transform: translateY(-4px);
}
.ttq-product--recommended {
    border: 2px solid #48eb93;
    background:
        radial-gradient(circle at 75% 0%, rgba(94,243,170,.25), transparent 34%),
        linear-gradient(160deg, rgba(39,215,124,.20), rgba(255,255,255,.07));
    box-shadow: 0 0 0 1px rgba(72,235,147,.22), 0 24px 54px rgba(0,0,0,.24), 0 0 42px rgba(45,226,133,.11);
    transform: translateY(-8px);
}
.ttq-product--recommended:hover {
    transform: translateY(-11px);
}
.ttq-product__featured {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    background: linear-gradient(90deg, #24d778, #58ee9e);
    color: #003b2a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.ttq-product__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 0;
    background: rgba(0,25,18,.22);
}
.ttq-product__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ttq-product__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}
.ttq-product__top {
    min-height: 74px;
    margin: 0;
}
.ttq-product__top h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 24px;
    line-height: 1.14;
    letter-spacing: -.025em;
}
.ttq-product__match,
.ttq-product__match--muted {
    display: inline-flex;
    color: #63efa5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}
.ttq-product__match--muted {
    color: rgba(255,255,255,.52);
}
.ttq-product__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin: 18px 0 0;
    border: 0;
    background: transparent;
}
.ttq-product__metric {
    min-height: 76px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.055);
}
.ttq-product__metric--wide {
    grid-column: 1 / -1;
}
.ttq-product__metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(236,248,240,.94) 100%);
    box-shadow: 0 6px 16px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.55);
    color: #11b661;
}
.ttq-product__metric small {
    color: rgba(255,255,255,.48);
}
.ttq-product__metric-icon svg {
    width: 21px;
    height: 21px;
}
.ttq-product__metric strong,
.ttq-product__metric--wide strong {
    color: #fff;
}
.ttq-product__ratings {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding: 10px 0 0;
    border-top: 1px solid rgba(255,255,255,.10);
    background: transparent;
}
.ttq-product__ratings > div {
    min-height: 40px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.ttq-product__ratings > div > span {
    color: rgba(255,255,255,.60);
}
.ttq-rating {
    color: #55ee9b;
    font-size: 18px;
    letter-spacing: 2px;
}
.ttq-rating__empty {
    color: rgba(85,238,155,.22);
}
.ttq-cost {
    color: #55ee9b;
    font-size: 18px;
}
.ttq-product__button {
    margin-top: auto;
    padding: 14px 16px;
    border: 1px solid rgba(88,239,159,.38);
    border-radius: 12px;
    background: rgba(51,220,132,.08);
    color: #63efa5 !important;
}
.ttq-product__button:hover,
.ttq-product__button:focus-visible {
    border-color: #58ef9f;
    background: rgba(51,220,132,.16);
    color: #fff !important;
}
.ttq-product--recommended .ttq-product__button {
    border-color: #4bea93;
    background: linear-gradient(135deg, #2bd97c, #5cf0a0);
    color: #003b2a !important;
}

/* Slider preserves the same product-card look. */
.ttq-results-slider,
.ttq-results-slider__viewport {
    background: transparent;
}
.ttq-results.ttq-results--slider {
    gap: 18px;
}
.ttq-results--slider .ttq-product {
    border-right: 1px solid rgba(255,255,255,.13);
}
.ttq-slider-nav__button {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
}
.ttq-slider-nav__status {
    color: rgba(255,255,255,.66);
}

@media (max-width: 1100px) {
    .ttq-quiz__header { max-width: 100%; }
    .ttq-quiz__stage { padding: 18px; }
    .ttq-results { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ttq-product--recommended,
    .ttq-product--recommended:hover { transform: none; }
}

@media (max-width: 980px) {
    .ttq-focus-image {
        min-height: 320px;
        grid-row: 1;
    }
    .ttq-focus-image__frame {
        min-height: 320px;
        padding: 0;
    }
    .ttq-focus-image__frame img {
        max-height: 320px;
    }
}

@media (max-width: 700px) {
    .ttq-quiz { padding: 28px 0 36px; }
    .ttq-quiz__header { margin-bottom: 18px; padding: 0 16px; }
    .ttq-quiz__heading { font-size: 34px; }
    .ttq-quiz__shell { border-radius: 22px; }
    .ttq-quiz__stage { padding: 12px; }
    .ttq-results__heading { align-items: flex-start; flex-direction: column; gap: 14px; }
    .ttq-results { grid-template-columns: 1fr; }
    .ttq-product__top { min-height: 0; }
    .ttq-product__body { padding: 20px; }
    .ttq-rating { font-size: 17px; }
}


/* v0.6.4 refinements */
.ttq-rating {
    font-size: 36px;
    line-height: 1;
    letter-spacing: 3px;
}
.ttq-product__ratings > div {
    min-height: 52px;
}
.ttq-quiz__eyebrow {
    display: none !important;
}
@media (max-width: 700px) {
    .ttq-rating {
        font-size: 30px;
        letter-spacing: 2px;
    }
}


/* v0.6.6: SVG ratings for reliable sizing across themes */
.ttq-rating {
    --ttq-star-size: 24px;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: calc((var(--ttq-star-size) * 5) + 16px);
    font-size: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}
.ttq-rating__star {
    display: block;
    width: var(--ttq-star-size) !important;
    height: var(--ttq-star-size) !important;
    flex: 0 0 var(--ttq-star-size);
    fill: currentColor;
    stroke: none;
}
.ttq-rating__star.is-filled {
    color: #4bea93;
    filter: drop-shadow(0 0 5px rgba(75,234,147,.16));
}
.ttq-rating__star.is-empty {
    color: rgba(75,234,147,.20);
}
.ttq-product__ratings > div {
    min-height: 56px;
}
.ttq-modal__ratings .ttq-rating {
    --ttq-star-size: 22px;
}
@media (max-width: 700px) {
    .ttq-rating {
        --ttq-star-size: 22px;
        gap: 3px;
    }
}


/* v0.6.8: controllable, higher-contrast rating and metric icon sizing */
.ttq-rating {
    --ttq-star-size: var(--ttq-rating-size, 20px) !important;
    gap: 3px !important;
}
.ttq-rating__star.is-filled {
    color: #4bea93;
    filter: none;
}
.ttq-rating__star.is-empty {
    color: rgba(75,234,147,.18);
}
.ttq-product__ratings > div {
    min-height: 48px;
}

.ttq-product__metric-icon {
    width: calc(var(--ttq-metric-icon-size, 24px) + 20px) !important;
    height: calc(var(--ttq-metric-icon-size, 24px) + 20px) !important;
    flex: 0 0 calc(var(--ttq-metric-icon-size, 24px) + 20px) !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 12px !important;
    background: var(--ttq-metric-icon-bg, #eafff2) !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.14) !important;
    color: var(--ttq-metric-icon-color, #087a46) !important;
}
.ttq-product__metric-icon svg {
    width: var(--ttq-metric-icon-size, 24px) !important;
    height: var(--ttq-metric-icon-size, 24px) !important;
    stroke-width: 2.2 !important;
}

.ttq-modal__feature > span {
    width: calc(var(--ttq-metric-icon-size, 24px) + 16px) !important;
    height: calc(var(--ttq-metric-icon-size, 24px) + 16px) !important;
    flex: 0 0 calc(var(--ttq-metric-icon-size, 24px) + 16px) !important;
    background: var(--ttq-metric-icon-bg, #eafff2) !important;
    color: var(--ttq-metric-icon-color, #087a46) !important;
}
.ttq-modal__feature > span svg {
    width: var(--ttq-metric-icon-size, 24px) !important;
    height: var(--ttq-metric-icon-size, 24px) !important;
}

@media (max-width: 700px) {
    .ttq-rating {
        --ttq-star-size: max(16px, calc(var(--ttq-rating-size, 20px) - 2px)) !important;
    }
}


/* v0.6.9 — direct product/brochure actions; no popup. */
.ttq-product__button--disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

/* v0.7.0 — branded product/rating icons with improved contrast */
.ttq-icon-badge {
    display: grid;
    place-items: center;
    overflow: hidden;
}

.ttq-icon-badge svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
}

.ttq-icon-badge--image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.ttq-product__metric-icon {
    width: calc(var(--ttq-metric-icon-size, 20px) + 22px) !important;
    height: calc(var(--ttq-metric-icon-size, 20px) + 22px) !important;
    flex: 0 0 calc(var(--ttq-metric-icon-size, 20px) + 22px) !important;
    padding: 7px !important;
    border: 1px solid rgba(8, 122, 70, 0.18) !important;
    border-radius: 12px !important;
    background: var(--ttq-metric-icon-bg, #f2fff7) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
    color: var(--ttq-metric-icon-color, #087a46) !important;
}

.ttq-product__metric-icon svg {
    width: var(--ttq-metric-icon-size, 20px) !important;
    height: var(--ttq-metric-icon-size, 20px) !important;
}

.ttq-product__metric-icon img {
    width: 100% !important;
    height: 100% !important;
}

.ttq-product__ratings {
    gap: 0 !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    background: transparent !important;
}

.ttq-product__rating-row,
.ttq-product__ratings > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ttq-product__rating-row:last-child,
.ttq-product__ratings > div:last-child {
    border-bottom: 0;
}

.ttq-product__rating-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: rgba(245, 251, 247, 0.92);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.ttq-product__rating-label > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ttq-product__rating-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d7ffe8;
}

.ttq-product__rating-icon svg {
    width: 18px;
    height: 18px;
}

.ttq-rating {
    --ttq-star-size: var(--ttq-rating-size, 17px) !important;
    gap: 2px !important;
}

.ttq-rating__star.is-filled {
    color: #4bea93;
}

.ttq-rating__star.is-empty {
    color: rgba(75, 234, 147, 0.24);
}

.ttq-cost {
    color: #72ffae;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}

@media (max-width: 700px) {
    .ttq-product__rating-label {
        font-size: 12px;
    }

    .ttq-product__rating-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .ttq-rating {
        --ttq-star-size: max(15px, calc(var(--ttq-rating-size, 17px) - 1px)) !important;
    }
}


/* v0.7.1 — result heading spacing + stronger restart action */
.ttq-results__heading {
    margin-bottom: 34px !important;
    padding: 0 4px 4px !important;
}

.ttq-results__description {
    margin-top: 12px !important;
}

.ttq-restart {
    min-width: 132px !important;
    min-height: 50px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
    cursor: pointer !important;
}

.ttq-restart:hover,
.ttq-restart:focus-visible {
    border-color: rgba(88,239,159,.66) !important;
    background: rgba(88,239,159,.14) !important;
}

/* Give the recommendation copy a little more air before the product grid. */
.ttq-results {
    margin-top: 2px;
}

@media (max-width: 700px) {
    .ttq-results__heading {
        margin-bottom: 26px !important;
    }

    .ttq-restart {
        min-width: 120px !important;
        min-height: 46px !important;
    }
}


/* v0.7.2 — full-container responsive layout */
.ttq-quiz,
.ttq-quiz *,
.ttq-quiz *::before,
.ttq-quiz *::after {
    box-sizing: border-box;
}

.ttq-quiz {
    width: 100% !important;
    max-width: none !important;
}

.ttq-quiz__inner,
.ttq-quiz__shell,
.ttq-quiz__stage,
.ttq-step,
.ttq-step--results,
.ttq-simple-quiz,
.ttq-simple-quiz__glass,
.ttq-results-slider,
.ttq-results-slider__viewport {
    width: 100% !important;
    max-width: none !important;
}

.ttq-quiz__header {
    width: 100% !important;
    max-width: none !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.ttq-quiz__stage {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Results always consume all available space for 1, 2 or 3 products. */
.ttq-results {
    --ttq-result-gap: 18px;
    width: 100% !important;
    max-width: none !important;
    gap: var(--ttq-result-gap) !important;
}

.ttq-results--count-1 {
    grid-template-columns: minmax(0, 1fr) !important;
}

.ttq-results--count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ttq-results--count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Keep slider math in sync with its real visual gap. */
.ttq-results.ttq-results--slider {
    --ttq-result-gap: 18px;
    gap: var(--ttq-result-gap) !important;
}

.ttq-results--slider .ttq-product {
    flex-basis: calc(
        (100% - (var(--ttq-result-gap) * (var(--ttq-visible) - 1)))
        / var(--ttq-visible)
    ) !important;
}

/* Prevent cards/content from forcing horizontal overflow. */
.ttq-product,
.ttq-product__body,
.ttq-product__metrics,
.ttq-product__metric,
.ttq-product__ratings,
.ttq-product__rating-row,
.ttq-simple-quiz__layout,
.ttq-simple-quiz__content,
.ttq-focus-image {
    min-width: 0;
}

.ttq-product__top h3,
.ttq-product__metric strong,
.ttq-results__heading h3,
.ttq-results__description {
    overflow-wrap: anywhere;
}

/* Tablet: two columns, but a single product still spans the container. */
@media (max-width: 1000px) {
    .ttq-results--count-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ttq-results--count-3 > .ttq-product:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* Mobile: one clean full-width column and never more than 16px side padding. */
@media (max-width: 700px) {
    .ttq-quiz__header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .ttq-quiz__stage {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .ttq-results--count-1,
    .ttq-results--count-2,
    .ttq-results--count-3 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ttq-results--count-3 > .ttq-product:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .ttq-product__body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Keep the small summary data readable without squeezing two columns. */
    .ttq-product__metrics {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .ttq-product__metric--wide {
        grid-column: auto !important;
    }

    .ttq-results__actions {
        width: 100%;
    }

    .ttq-restart {
        width: 100%;
        min-width: 0 !important;
    }
}

/* Very small phones: use 10px outer stage padding. */
@media (max-width: 420px) {
    .ttq-quiz__stage {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ttq-quiz__header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


/* v0.7.3 — tighter mobile spacing + stacked product details */
@media (max-width: 700px) {
    /* Let the quiz use almost all of the available page width. */
    .ttq-quiz {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ttq-quiz__inner,
    .ttq-quiz__shell,
    .ttq-step,
    .ttq-step--results,
    .ttq-simple-quiz,
    .ttq-simple-quiz__glass {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ttq-quiz__header {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .ttq-quiz__stage {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .ttq-step--results {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ttq-results__heading {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Cards stay full-width, with modest internal spacing only. */
    .ttq-product__body {
        padding: 16px 12px !important;
    }

    /* Pile height, warranty and technology become true stacked rows. */
    .ttq-product .ttq-product__metrics {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .ttq-product .ttq-product__metric,
    .ttq-product .ttq-product__metric--wide {
        display: flex !important;
        width: 100% !important;
        grid-column: auto !important;
        min-height: 58px !important;
        padding: 10px 12px !important;
    }

    .ttq-product__ratings {
        width: 100% !important;
    }

    .ttq-results {
        gap: 12px !important;
    }

    .ttq-results__actions {
        margin-top: 4px;
    }
}

@media (max-width: 420px) {
    .ttq-quiz__header {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .ttq-quiz__stage {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .ttq-product__body {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .ttq-product .ttq-product__metric,
    .ttq-product .ttq-product__metric--wide {
        padding: 9px 10px !important;
    }
}


/* v0.7.4 — override Qode/theme fixed content widths only where the quiz lives.
   The theme applies fixed widths such as 300px on mobile and narrower widths
   at laptop breakpoints. JS adds .ttq-quiz-host to the closest width-limiting
   container so the rest of the website is untouched. */
.ttq-quiz-host {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* CSS :has() fallback / immediate application for current browsers. */
.container_inner:has(.ttq-quiz),
div.section .section_inner:has(.ttq-quiz),
div.grid_section .section_inner:has(.ttq-quiz),
.full_width .parallax_content:has(.ttq-quiz),
.steps_holder_inner:has(.ttq-quiz),
.carousel-inner .slider_content_outer:has(.ttq-quiz) {
    width: calc(100% - 40px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Smaller desktop/laptop screens: keep the quiz fluid instead of snapping
   to the theme's fixed tablet/laptop container widths. */
@media (max-width: 1400px) {
    .ttq-quiz-host,
    .container_inner:has(.ttq-quiz),
    div.section .section_inner:has(.ttq-quiz),
    div.grid_section .section_inner:has(.ttq-quiz),
    .full_width .parallax_content:has(.ttq-quiz),
    .steps_holder_inner:has(.ttq-quiz),
    .carousel-inner .slider_content_outer:has(.ttq-quiz) {
        width: calc(100% - 32px) !important;
        max-width: none !important;
    }
}

@media (max-width: 1100px) {
    .ttq-quiz-host,
    .container_inner:has(.ttq-quiz),
    div.section .section_inner:has(.ttq-quiz),
    div.grid_section .section_inner:has(.ttq-quiz),
    .full_width .parallax_content:has(.ttq-quiz),
    .steps_holder_inner:has(.ttq-quiz),
    .carousel-inner .slider_content_outer:has(.ttq-quiz) {
        width: calc(100% - 24px) !important;
    }
}

/* Mobile: override the theme's width:300px rule and leave only 10px each side. */
@media (max-width: 700px) {
    .ttq-quiz-host,
    .container_inner:has(.ttq-quiz),
    div.section .section_inner:has(.ttq-quiz),
    div.grid_section .section_inner:has(.ttq-quiz),
    .full_width .parallax_content:has(.ttq-quiz),
    .steps_holder_inner:has(.ttq-quiz),
    .carousel-inner .slider_content_outer:has(.ttq-quiz) {
        width: calc(100% - 20px) !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 420px) {
    .ttq-quiz-host,
    .container_inner:has(.ttq-quiz),
    div.section .section_inner:has(.ttq-quiz),
    div.grid_section .section_inner:has(.ttq-quiz),
    .full_width .parallax_content:has(.ttq-quiz),
    .steps_holder_inner:has(.ttq-quiz),
    .carousel-inner .slider_content_outer:has(.ttq-quiz) {
        width: calc(100% - 12px) !important;
    }
}


/* v1.1.0 — optional input and textarea quiz steps */
.ttq-capture-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
    margin-top: 24px;
}

.ttq-capture-field__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ttq-capture-field__required {
    padding: 4px 8px;
    border: 1px solid rgba(75,234,147,.26);
    border-radius: 999px;
    background: rgba(75,234,147,.08);
    color: #73f3ac;
    font-size: 9px;
    letter-spacing: .05em;
}

.ttq-capture-field input,
.ttq-capture-field textarea {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 14px;
    outline: 0;
    background: rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    color: #fff;
    font: inherit;
    font-size: 16px;
    line-height: 1.45;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ttq-capture-field textarea {
    min-height: 140px;
    resize: vertical;
}

.ttq-capture-field input::placeholder,
.ttq-capture-field textarea::placeholder {
    color: rgba(255,255,255,.42);
}

.ttq-capture-field input:focus,
.ttq-capture-field textarea:focus {
    border-color: rgba(75,234,147,.74);
    background: rgba(255,255,255,.10);
    box-shadow: 0 0 0 4px rgba(75,234,147,.10);
}

.ttq-capture-field__help {
    color: rgba(255,255,255,.58);
    font-size: 12px;
    line-height: 1.5;
}

/* The third-party floating Google review badge overlaps the quiz on mobile.
   The plugin stylesheet only loads where the quiz is rendered, so hide it on
   quiz pages without changing it elsewhere on the website. */
.review-widget_net {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 700px) {
    .ttq-capture-field {
        margin-top: 18px;
    }

    .ttq-capture-field input,
    .ttq-capture-field textarea {
        padding: 14px 15px;
        border-radius: 12px;
        font-size: 16px;
    }

    .ttq-capture-field textarea {
        min-height: 120px;
    }
}


/* v1.1.1 — Titan Turf yellow secondary accent */
.ttq-quiz {
    --ttq-brand-yellow: #f9dd4a;
}

/* Ratings are the clearest place to use the logo yellow. */
.ttq-rating__star.is-filled {
    color: var(--ttq-brand-yellow) !important;
}

.ttq-rating__star.is-empty {
    color: rgba(249, 221, 74, 0.22) !important;
}

/* Use yellow as the secondary highlight while green remains the main CTA colour. */
.ttq-product__featured {
    background: var(--ttq-brand-yellow) !important;
    color: #173d2e !important;
}

.ttq-product--recommended .ttq-product__match {
    color: var(--ttq-brand-yellow) !important;
}

.ttq-results__kicker {
    color: var(--ttq-brand-yellow) !important;
}

.ttq-step--results .ttq-progress__meta strong {
    color: var(--ttq-brand-yellow) !important;
}

/* A small yellow accent on rating-row icons ties the comparison area together
   without replacing the core Titan green treatment. */
.ttq-product__rating-icon {
    border-color: rgba(249, 221, 74, 0.22) !important;
}

.ttq-product__rating-icon svg {
    color: #fff;
}

/* Keep cost distinct from ratings; it remains green so yellow does not dominate. */
.ttq-cost {
    color: #72ffae !important;
}


/* v1.1.2 — refined Titan Turf yellow usage */

/* Best Match goes back to the primary Titan green treatment. */
.ttq-product__featured {
    background: #4bea93 !important;
    color: #073d2a !important;
}

/* Keep the recommendation sub-label green too, so yellow stays an accent. */
.ttq-product--recommended .ttq-product__match {
    color: #4bea93 !important;
}

/* Use yellow for the quiz instruction/kicker. */
.ttq-question-kicker,
.ttq-simple-quiz__content .ttq-question-kicker {
    color: var(--ttq-brand-yellow, #f9dd4a) !important;
}

/* Selected answer tick is a clear yellow brand accent. */
.ttq-answer-pill.is-selected .ttq-answer-pill__check {
    border-color: var(--ttq-brand-yellow, #f9dd4a) !important;
    background: var(--ttq-brand-yellow, #f9dd4a) !important;
    color: #16452f !important;
    box-shadow: 0 0 18px rgba(249, 221, 74, 0.24) !important;
}


/* v1.1.3 — direct quote CTA + TradeHQ popup */
.ttq-product__actions {
    display: grid;
    gap: 9px;
    margin-top: auto;
}

.ttq-product__actions .ttq-product__button {
    margin-top: 0 !important;
}

.ttq-product__quote-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid #f9dd4a;
    border-radius: 10px;
    background: #f9dd4a;
    box-shadow: none;
    color: #173d2e;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.ttq-product__quote-button:hover,
.ttq-product__quote-button:focus-visible {
    filter: brightness(1.035);
    box-shadow: 0 8px 22px rgba(249, 221, 74, .14);
    transform: translateY(-1px);
    outline: none;
}

html.ttq-quote-modal-open,
body.ttq-quote-modal-open {
    overflow: hidden !important;
}

.ttq-quote-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: grid;
    place-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

.ttq-quote-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ttq-quote-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 38, 26, .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ttq-quote-modal__dialog {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(980px, 100%);
    max-height: calc(100vh - 40px);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 32px 90px rgba(0,0,0,.34);
    transform: translateY(10px) scale(.985);
    transition: transform .2s ease;
}

.ttq-quote-modal.is-open .ttq-quote-modal__dialog {
    transform: translateY(0) scale(1);
}

.ttq-quote-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 76px;
    padding: 16px 20px;
    background: #064b35;
    color: #fff;
}

.ttq-quote-modal__header > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ttq-quote-modal__header span {
    color: #f9dd4a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.ttq-quote-modal__header strong {
    font-size: 20px;
    line-height: 1.15;
}

.ttq-quote-modal__close {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    margin: 0;
    padding: 0 0 3px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}

.ttq-quote-modal__close:hover,
.ttq-quote-modal__close:focus-visible {
    border-color: #f9dd4a;
    background: #f9dd4a;
    color: #173d2e;
    outline: none;
}

.ttq-quote-modal__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

.ttq-quote-modal__body iframe {
    display: block;
    width: 100% !important;
    height: min(1050px, calc(100vh - 116px)) !important;
    min-height: 650px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #fff;
}

.ttq-quote-modal__loading {
    display: grid;
    min-height: 300px;
    place-items: center;
    color: #55645c;
    font-size: 14px;
}

@media (max-width: 700px) {
    .ttq-product__quote-button {
        min-height: 50px;
    }

    .ttq-quote-modal {
        padding: 8px;
    }

    .ttq-quote-modal__dialog {
        width: 100%;
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }

    .ttq-quote-modal__header {
        min-height: 66px;
        padding: 12px 14px;
    }

    .ttq-quote-modal__header strong {
        font-size: 18px;
    }

    .ttq-quote-modal__body iframe {
        height: calc(100dvh - 82px) !important;
        min-height: 0;
    }
}


/* v1.1.4 — compact product thumbnail beside product title */
.ttq-product__top {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 96px !important;
    margin: 0 !important;
}

.ttq-product__top-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.ttq-product__top h3 {
    margin: 0 0 7px !important;
}

.ttq-product__top .ttq-product__match {
    margin: 0 !important;
}

.ttq-product__image {
    width: 104px !important;
    height: 82px !important;
    aspect-ratio: auto !important;
    flex: 0 0 auto;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 12px !important;
    background: rgba(0,25,18,.20) !important;
}

.ttq-product__image img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
}

.ttq-product:hover .ttq-product__image img {
    transform: none !important;
}

/* The image is now part of the title block, so metrics can sit closer underneath. */
.ttq-product__metrics {
    margin-top: 14px !important;
}

@media (max-width: 1100px) {
    .ttq-product__top {
        gap: 10px !important;
    }

    .ttq-product__image {
        width: 88px !important;
        height: 72px !important;
    }

    .ttq-product__top h3 {
        font-size: 21px !important;
    }
}

@media (max-width: 700px) {
    .ttq-product__top {
        min-height: 82px !important;
        gap: 10px !important;
    }

    .ttq-product__image {
        width: 78px !important;
        height: 64px !important;
        border-radius: 10px !important;
    }

    .ttq-product__top h3 {
        font-size: 21px !important;
    }
}

@media (max-width: 380px) {
    .ttq-product__image {
        width: 68px !important;
        height: 58px !important;
    }

    .ttq-product__top h3 {
        font-size: 19px !important;
    }
}

/* v1.1.5 — free-standing product art + softer linear visual treatment */

/* Replace the old circular/radial highlight in the main quiz shell with a
   cleaner directional glow from the upper-right. */
.ttq-quiz__shell {
    background:
        linear-gradient(132deg, rgba(35, 218, 126, 0) 52%, rgba(35, 218, 126, .12) 78%, rgba(48, 232, 139, .22) 100%),
        linear-gradient(145deg, #023c2d 0%, #003326 48%, #01291f 100%) !important;
}

.ttq-quiz__shell::before,
.ttq-quiz__shell::after {
    display: none !important;
    content: none !important;
}

/* Product cards use a gentle linear glass treatment rather than a circular
   highlight in the upper-right. */
.ttq-product {
    isolation: isolate;
    background:
        linear-gradient(145deg, rgba(255,255,255,.105) 0%, rgba(255,255,255,.06) 42%, rgba(26,187,104,.055) 100%) !important;
}

.ttq-product--recommended {
    background:
        linear-gradient(145deg, rgba(39,215,124,.20) 0%, rgba(255,255,255,.075) 48%, rgba(37,186,104,.08) 100%) !important;
}

/* Soft duplicate of the turf image washes upward from the bottom-left of the
   full product card. It remains intentionally subtle so content stays crisp. */
.ttq-product__image-wash {
    position: absolute;
    z-index: 0;
    left: -16%;
    bottom: -14%;
    width: 128%;
    height: 67%;
    opacity: .065;
    pointer-events: none;
    transform: rotate(-4deg);
    -webkit-mask-image: linear-gradient(36deg, #000 0%, rgba(0,0,0,.75) 28%, rgba(0,0,0,.22) 60%, transparent 82%);
    mask-image: linear-gradient(36deg, #000 0%, rgba(0,0,0,.75) 28%, rgba(0,0,0,.22) 60%, transparent 82%);
}

.ttq-product--recommended .ttq-product__image-wash {
    opacity: .085;
}

.ttq-product__image-wash img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
    filter: saturate(.9) contrast(.95);
}

.ttq-product__featured,
.ttq-product__body {
    position: relative;
    z-index: 2;
}

/* The small product image beside the title is now artwork only — no tile,
   border, panel, shadow or clipped container around it. */
.ttq-product__image {
    display: flex !important;
    width: 112px !important;
    height: 80px !important;
    flex: 0 0 112px !important;
    align-items: center;
    justify-content: flex-end;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ttq-product__image img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 112px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .14));
}

.ttq-product:hover .ttq-product__image img {
    transform: none !important;
}

@media (max-width: 1100px) {
    .ttq-product__image {
        width: 92px !important;
        height: 70px !important;
        flex-basis: 92px !important;
    }

    .ttq-product__image img {
        max-width: 92px !important;
        max-height: 70px !important;
    }
}

@media (max-width: 700px) {
    .ttq-quiz__shell {
        background:
            linear-gradient(142deg, rgba(35,218,126,0) 48%, rgba(35,218,126,.10) 76%, rgba(48,232,139,.17) 100%),
            linear-gradient(145deg, #023c2d 0%, #003326 52%, #01291f 100%) !important;
    }

    .ttq-product__image-wash {
        left: -23%;
        bottom: -9%;
        width: 142%;
        height: 54%;
        opacity: .055;
    }

    .ttq-product--recommended .ttq-product__image-wash {
        opacity: .07;
    }

    .ttq-product__image {
        width: 82px !important;
        height: 62px !important;
        flex-basis: 82px !important;
    }

    .ttq-product__image img {
        max-width: 82px !important;
        max-height: 62px !important;
    }
}

@media (max-width: 380px) {
    .ttq-product__image {
        width: 70px !important;
        height: 56px !important;
        flex-basis: 70px !important;
    }

    .ttq-product__image img {
        max-width: 70px !important;
        max-height: 56px !important;
    }
}


/* v1.2.0 — advice-only result pages and expanded quiz flow */
.ttq-advice-result {
    display: flex;
    width: 100%;
    min-height: 190px;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 30px 32px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background:
        linear-gradient(120deg, rgba(249,221,74,.055), transparent 42%),
        linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.045));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

.ttq-advice-result__copy {
    display: flex;
    max-width: 650px;
    flex-direction: column;
    gap: 7px;
}

.ttq-advice-result__copy > span {
    color: #f9dd4a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ttq-advice-result__copy > strong {
    color: #fff;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.08;
    letter-spacing: -.025em;
}

.ttq-advice-result__copy p {
    margin: 3px 0 0;
    color: rgba(255,255,255,.66);
    font-size: 14px;
    line-height: 1.6;
}

.ttq-advice-result__actions {
    display: flex;
    min-width: 205px;
    flex-direction: column;
    gap: 10px;
}

.ttq-advice-result__link,
.ttq-advice-result__quote {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    padding: 0 20px;
    border-radius: 11px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .045em;
    text-decoration: none !important;
    text-transform: uppercase;
}

.ttq-advice-result__link {
    border: 1px solid rgba(255,255,255,.20);
    background: rgba(255,255,255,.08);
    color: #fff !important;
}

.ttq-advice-result__quote {
    border: 1px solid #f9dd4a;
    background: #f9dd4a;
    color: #173d2e;
}

.ttq-advice-result__link:hover,
.ttq-advice-result__link:focus-visible {
    border-color: rgba(255,255,255,.42);
    background: rgba(255,255,255,.12);
    outline: none;
}

.ttq-advice-result__quote:hover,
.ttq-advice-result__quote:focus-visible {
    filter: brightness(1.04);
    outline: none;
}

@media (max-width: 700px) {
    .ttq-advice-result {
        min-height: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        padding: 22px 16px;
    }

    .ttq-advice-result__actions {
        min-width: 0;
        width: 100%;
    }
}

/* New built-in answer SVGs are already transparent, so do not crop them. */
.ttq-answer-pill__icon img[src$=".svg"] {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain !important;
}


/* v1.2.1 — advice outcomes now read as a true final recommendation card */
.ttq-step--advice .ttq-results__heading {
    margin-bottom: 24px !important;
}

.ttq-step--advice .ttq-results__kicker {
    color: #f9dd4a !important;
}

.ttq-solution-card {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 2px solid #4bea93;
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(20,111,75,.22), rgba(255,255,255,.055)),
        rgba(0,55,39,.86);
    box-shadow:
        0 18px 48px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.07);
}

.ttq-solution-card::after {
    position: absolute;
    right: -12%;
    bottom: -45%;
    width: 55%;
    height: 130%;
    background: linear-gradient(135deg, transparent, rgba(75,234,147,.075));
    content: "";
    pointer-events: none;
    transform: rotate(-8deg);
}

.ttq-solution-card__featured {
    position: relative;
    z-index: 2;
    min-height: 34px;
    padding: 9px 20px 8px;
    background: #4bea93;
    color: #073d2a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    line-height: 1.6;
    text-transform: uppercase;
}

.ttq-solution-card__body {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
    align-items: center;
    gap: 34px;
    min-height: 220px;
    padding: 30px 32px 32px;
}

.ttq-solution-card__content {
    min-width: 0;
}

.ttq-solution-card__match {
    display: inline-flex;
    margin-bottom: 10px;
    color: #4bea93;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
}

.ttq-solution-card h4 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(27px, 3.2vw, 40px);
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.ttq-solution-card__description {
    max-width: 760px;
    margin: 14px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.65;
}

.ttq-solution-card__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ttq-solution-card__link,
.ttq-solution-card__quote {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0;
    padding: 0 20px;
    border-radius: 11px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
    line-height: 1.2;
    text-decoration: none !important;
    text-transform: uppercase;
}

.ttq-solution-card__link {
    justify-content: space-between;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.08);
    color: #fff !important;
}

.ttq-solution-card__quote {
    border: 1px solid #f9dd4a;
    background: #f9dd4a;
    color: #173d2e;
}

.ttq-solution-card__link:hover,
.ttq-solution-card__link:focus-visible {
    border-color: rgba(255,255,255,.38);
    background: rgba(255,255,255,.12);
    color: #fff !important;
    outline: none;
}

.ttq-solution-card__quote:hover,
.ttq-solution-card__quote:focus-visible {
    filter: brightness(1.04);
    box-shadow: 0 8px 24px rgba(249,221,74,.13);
    outline: none;
}

@media (max-width: 700px) {
    .ttq-solution-card__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        min-height: 0;
        padding: 22px 16px 18px;
    }

    .ttq-solution-card h4 {
        font-size: 28px;
    }

    .ttq-solution-card__description {
        font-size: 14px;
    }

    .ttq-solution-card__actions {
        width: 100%;
    }
}


/* v1.2.2 — advice-only outcomes use the same 1/3 product-card rhythm */
.ttq-results--solution {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    width: 100% !important;
    align-items: stretch;
}

.ttq-results--solution .ttq-solution-card {
    grid-column: 1;
    width: 100% !important;
    min-width: 0;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 2px solid #4bea93;
    border-radius: 18px;
    background:
        linear-gradient(160deg, rgba(39,215,124,.18), rgba(255,255,255,.055)),
        rgba(0,55,39,.88);
    box-shadow:
        0 15px 36px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.ttq-results--solution .ttq-solution-card::after {
    display: none;
}

.ttq-results--solution .ttq-solution-card__featured {
    min-height: 34px;
    padding: 9px 14px 8px;
    background: #4bea93;
    color: #073d2a;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    line-height: 1.6;
    text-transform: uppercase;
}

.ttq-results--solution .ttq-solution-card__body {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 24px 20px 20px;
}

.ttq-results--solution .ttq-solution-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ttq-results--solution .ttq-solution-card__match {
    margin: 0 0 9px;
    color: #4bea93;
    font-size: 11px;
    font-weight: 800;
}

.ttq-results--solution .ttq-solution-card h4 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 750;
    line-height: 1.16;
    letter-spacing: -.02em;
}

.ttq-results--solution .ttq-solution-card__description {
    margin: 15px 0 0;
    color: rgba(255,255,255,.70);
    font-size: 13px;
    line-height: 1.65;
}

.ttq-results--solution .ttq-solution-card__actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: auto;
}

.ttq-results--solution .ttq-solution-card__link,
.ttq-results--solution .ttq-solution-card__quote {
    min-height: 48px;
    border-radius: 10px;
    font-size: 11px;
}

.ttq-results--solution .ttq-solution-card__link {
    border: 1px solid rgba(75,234,147,.55);
    background: transparent;
    color: #4bea93 !important;
}

.ttq-results--solution .ttq-solution-card__quote {
    border: 1px solid #f9dd4a;
    background: #f9dd4a;
    color: #173d2e;
}

/* Tablet: same behaviour as product cards — two-column rhythm. */
@media (max-width: 1000px) {
    .ttq-results--solution {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ttq-results--solution .ttq-solution-card {
        grid-column: 1;
        min-height: 470px;
    }
}

/* Mobile: one full-width recommendation card. */
@media (max-width: 700px) {
    .ttq-results--solution {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    .ttq-results--solution .ttq-solution-card {
        grid-column: auto;
        min-height: 0;
    }

    .ttq-results--solution .ttq-solution-card__body {
        padding: 20px 14px 14px;
        gap: 20px;
    }

    .ttq-results--solution .ttq-solution-card h4 {
        font-size: 22px;
    }

    .ttq-results--solution .ttq-solution-card__description {
        font-size: 13px;
    }
}


/* v1.2.3 — mobile result controls + native swipe carousel */
.ttq-slider-mobile-hint {
    display: none;
}

@media (max-width: 700px) {
    /* Results heading becomes a clean stacked block. This prevents the Start
       again control being squeezed/cropped by slider controls on narrow phones. */
    .ttq-results__heading {
        display: block !important;
        width: 100% !important;
        margin-bottom: 18px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .ttq-results__heading > div:first-child {
        width: 100%;
        min-width: 0;
    }

    .ttq-results__heading h3,
    .ttq-results__description {
        max-width: 100% !important;
    }

    .ttq-results__actions {
        display: flex !important;
        width: 100% !important;
        margin-top: 16px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Desktop arrows are unnecessary on touch devices; the cards themselves
       are now a native, scroll-snap carousel. */
    .ttq-slider-nav {
        display: none !important;
    }

    .ttq-restart {
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 50px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .ttq-slider-mobile-hint {
        display: flex;
        align-items: center;
        width: 100%;
        margin: -2px 0 10px;
        color: rgba(255,255,255,.67);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .02em;
    }

    .ttq-slider-mobile-hint::before {
        display: inline-block;
        margin-right: 7px;
        color: #f9dd4a;
        content: '↔';
        font-size: 15px;
        line-height: 1;
    }

    /* Native horizontal swipe. All product cards remain in the DOM in one row,
       and the next card deliberately peeks into view to make the gesture clear. */
    .ttq-results-slider {
        width: 100% !important;
        overflow: visible !important;
    }

    .ttq-results-slider__viewport {
        width: 100% !important;
        margin: 0 !important;
        padding: 2px 0 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        touch-action: pan-x pan-y;
    }

    .ttq-results-slider__viewport::-webkit-scrollbar {
        display: none;
    }

    .ttq-results.ttq-results--slider {
        --ttq-visible: 1 !important;
        display: flex !important;
        width: 100% !important;
        max-width: none !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 24px 0 0 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .ttq-results--slider .ttq-product {
        flex: 0 0 calc(100% - 26px) !important;
        width: calc(100% - 26px) !important;
        min-width: calc(100% - 26px) !important;
        max-width: calc(100% - 26px) !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

@media (max-width: 420px) {
    .ttq-results--slider .ttq-product {
        flex-basis: calc(100% - 22px) !important;
        width: calc(100% - 22px) !important;
        min-width: calc(100% - 22px) !important;
        max-width: calc(100% - 22px) !important;
    }

    .ttq-results.ttq-results--slider {
        padding-right: 20px !important;
    }
}

/* v1.3.0 — optional Best Match, summary cards and prominent result navigation */
.ttq-slider-toolbar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 16px;
    padding: 13px 14px 12px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: rgba(255,255,255,.065);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.ttq-slider-toolbar__info {
    display: grid;
    min-width: 0;
    flex: 1;
    grid-template-columns: auto minmax(150px, 1fr);
    align-items: center;
    gap: 7px 16px;
}

.ttq-slider-toolbar__info strong {
    color: #f9dd4a;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .025em;
    white-space: nowrap;
}

.ttq-slider-toolbar__info small {
    grid-column: 1 / -1;
    color: rgba(255,255,255,.58);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.ttq-slider-toolbar__track {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}

.ttq-slider-toolbar__track > span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 30%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f9dd4a, #fff08a);
    box-shadow: 0 0 14px rgba(249,221,74,.18);
    transition: width .2s ease, left .24s ease;
}

.ttq-slider-toolbar .ttq-slider-nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.ttq-slider-toolbar .ttq-slider-nav__button {
    width: 42px;
    height: 42px;
    border-color: rgba(249,221,74,.30);
    background: rgba(249,221,74,.08);
    color: #f9dd4a;
}

.ttq-slider-toolbar .ttq-slider-nav__button:hover:not(:disabled),
.ttq-slider-toolbar .ttq-slider-nav__button:focus-visible:not(:disabled) {
    border-color: #f9dd4a;
    background: #f9dd4a;
    color: #173d2e;
    outline: none;
}

.ttq-product__summary {
    grid-column: 1 / -1;
    display: flex;
    min-height: 122px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 7px;
    padding: 16px 17px;
    border-top: 1px solid rgba(255,255,255,.11);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
}

.ttq-product__summary > span {
    color: #f9dd4a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.ttq-product__summary p {
    margin: 0;
    color: rgba(255,255,255,.76);
    font-size: 13px;
    line-height: 1.62;
}

/* When Best Match is disabled there is deliberately no featured strip or
   raised green outline; all recommended products receive equal visual weight. */
.ttq-product:not(.ttq-product--recommended) .ttq-product__match--muted {
    color: rgba(255,255,255,.58);
}

@media (max-width: 1000px) {
    .ttq-slider-toolbar__info {
        grid-template-columns: minmax(0, 1fr);
    }

    .ttq-slider-toolbar__info small {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    .ttq-slider-toolbar {
        display: block;
        margin-bottom: 11px;
        padding: 11px 12px 10px;
    }

    .ttq-slider-toolbar__info {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .ttq-slider-toolbar__info strong {
        font-size: 11px;
        white-space: normal;
    }

    .ttq-slider-toolbar__info small {
        color: rgba(255,255,255,.62);
        font-size: 10px;
    }

    .ttq-slider-toolbar__track {
        height: 7px;
    }

    .ttq-slider-toolbar .ttq-slider-nav {
        display: none !important;
    }

    .ttq-product__summary {
        min-height: 0;
        padding: 14px 12px;
    }
}


/* v1.3.1 — slider arrows flank the cards; navigation dots sit underneath */
.ttq-slider-toolbar {
    margin-bottom: 12px !important;
}

/* The toolbar now only communicates position/progress. */
.ttq-slider-toolbar__info {
    width: 100%;
}

/* 3-column shell: arrow / turf cards / arrow. */
.ttq-results-slider-shell {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.ttq-results-slider-shell .ttq-results-slider {
    min-width: 0;
}

/* Large, obvious controls centred vertically alongside the cards. */
.ttq-slider-side {
    appearance: none;
    display: grid;
    width: 48px;
    height: 68px;
    place-items: center;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(249,221,74,.42);
    border-radius: 13px;
    background: rgba(249,221,74,.075);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 8px 20px rgba(0,0,0,.08);
    color: #f9dd4a;
    cursor: pointer;
    font: inherit;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    transition:
        border-color .16s ease,
        background .16s ease,
        color .16s ease,
        transform .16s ease,
        opacity .16s ease;
}

.ttq-slider-side:hover:not(:disabled),
.ttq-slider-side:focus-visible:not(:disabled) {
    border-color: #f9dd4a;
    background: #f9dd4a;
    color: #173d2e;
    outline: none;
    transform: scale(1.04);
}

.ttq-slider-side:disabled {
    opacity: .26;
    cursor: default;
    transform: none;
}

/* Classic carousel dots make the additional pages visible at a glance. */
.ttq-slider-dots {
    display: flex;
    width: 100%;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 11px;
}

.ttq-slider-dots__dot {
    appearance: none;
    display: block;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
    box-shadow: none;
    cursor: pointer;
    transition:
        width .18s ease,
        background .18s ease,
        opacity .18s ease,
        transform .18s ease;
}

.ttq-slider-dots__dot:hover,
.ttq-slider-dots__dot:focus-visible {
    background: rgba(249,221,74,.70);
    outline: none;
    transform: scale(1.18);
}

.ttq-slider-dots__dot.is-active {
    width: 25px;
    flex-basis: 25px;
    background: #f9dd4a;
}

/* Remove the now-unused toolbar arrow layout from previous versions. */
.ttq-slider-toolbar > .ttq-slider-nav {
    display: none !important;
}

@media (max-width: 1000px) and (min-width: 701px) {
    .ttq-results-slider-shell {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        gap: 8px;
    }

    .ttq-slider-side {
        width: 44px;
        height: 62px;
    }
}

@media (max-width: 700px) {
    /* Mobile remains swipe-first: preserve maximum card width and hide side arrows. */
    .ttq-results-slider-shell {
        display: block;
        width: 100%;
    }

    .ttq-slider-side {
        display: none !important;
    }

    .ttq-slider-toolbar {
        margin-bottom: 8px !important;
    }

    .ttq-slider-toolbar__info small {
        display: none;
    }

    /* Dots remain visible and follow the card reached by touch scrolling. */
    .ttq-slider-dots {
        gap: 6px;
        margin-top: 9px;
        min-height: 24px;
    }

    .ttq-slider-dots__dot {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
    }

    .ttq-slider-dots__dot.is-active {
        width: 22px;
        flex-basis: 22px;
    }
}


/* v1.3.2 — slider arrows use the solid Titan yellow as their default state */
.ttq-slider-side {
    border-color: #f9dd4a !important;
    background: #f9dd4a !important;
    color: #173d2e !important;
    box-shadow:
        0 8px 22px rgba(249, 221, 74, .18),
        inset 0 1px 0 rgba(255,255,255,.35) !important;
    opacity: 1;
}

.ttq-slider-side:hover:not(:disabled),
.ttq-slider-side:focus-visible:not(:disabled) {
    border-color: #ffe66a !important;
    background: #ffe66a !important;
    color: #103c2a !important;
    box-shadow:
        0 10px 28px rgba(249, 221, 74, .28),
        inset 0 1px 0 rgba(255,255,255,.45) !important;
    transform: scale(1.05);
}

.ttq-slider-side:disabled {
    border-color: rgba(249,221,74,.38) !important;
    background: rgba(249,221,74,.18) !important;
    color: rgba(249,221,74,.55) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: default;
}