:root {
--color-ink: #151719;
--color-ink-soft: #2d343a;
--color-muted: #626970;
--color-line: #d9dde2;
--color-line-strong: #bcc4cb;
--color-surface: #ffffff;
--color-surface-soft: #f4f6f8;
--color-surface-warm: #f7f9fb;
--color-brand: #e22922;
--color-brand-dark: #b91f1a;
--color-focus: #2672d9;
--color-success: #17a760;
--andon-content-max: 1180px;
--andon-page-gutter: clamp(20px, 3vw, 32px);
--andon-section-space-large: clamp(72px, 6vw, 80px);
--andon-section-space-medium: clamp(56px, 5vw, 64px);
--andon-section-space-compact: clamp(40px, 4vw, 48px);
--andon-section-space: var(--andon-section-space-medium);
--andon-grid-gap: clamp(20px, 2.2vw, 28px);
--andon-card-padding: clamp(20px, 2vw, 24px);
--header-height: 72px;
--radius: 6px;
--shadow-soft: 0 12px 36px rgba(21, 23, 25, 0.08);
--transition: 160ms ease;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: auto;
scroll-padding-top: 144px;
}
body {
margin: 0;
color: var(--color-ink);
background: var(--color-surface);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.65;
letter-spacing: 0;
overflow-x: hidden;
}
button,
input,
select,
textarea {
color: inherit;
font: inherit;
letter-spacing: 0;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
img {
display: block;
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
letter-spacing: 0;
line-height: 1.12;
}
h1 {
max-width: 760px;
margin-bottom: 24px;
font-size: 56px;
font-weight: 800;
}
h2 {
margin-bottom: 20px;
font-size: 40px;
font-weight: 800;
}
h3 {
margin-bottom: 12px;
font-size: 20px;
font-weight: 750;
}
.container {
width: min(
calc(100% - 2 * var(--andon-page-gutter)),
var(--andon-content-max)
);
margin-inline: auto;
}
.skip-link {
position: fixed;
z-index: 200;
top: 12px;
left: 12px;
padding: 10px 14px;
transform: translateY(-160%);
color: #ffffff;
background: var(--color-ink);
border-radius: 4px;
}
.skip-link:focus {
transform: translateY(0);
}
:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 3px;
}
.site-header {
position: relative;
z-index: 80;
min-height: var(--header-height);
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
display: flex;
min-height: var(--header-height);
align-items: center;
justify-content: space-between;
gap: 32px;
}
.brand {
display: block;
flex: 0 0 auto;
}
.brand img {
width: 220px;
height: auto;
}
.primary-nav {
display: flex;
align-items: center;
gap: 26px;
font-size: 14px;
font-weight: 700;
}
.primary-nav a:not(.button) {
text-decoration: none;
}
.primary-nav a:not(.button):hover {
color: var(--color-brand);
}
.button {
display: inline-flex;
min-height: 48px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 22px;
color: #ffffff;
background: var(--color-brand);
border: 1px solid var(--color-brand);
border-radius: 4px;
font-weight: 800;
line-height: 1.25;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.button:hover {
background: var(--color-brand-dark);
border-color: var(--color-brand-dark);
transform: translateY(-1px);
}
.button--small {
min-height: 40px;
padding: 9px 16px;
font-size: 13px;
}
.button--outline {
color: var(--color-ink);
background: transparent;
border-color: var(--color-line-strong);
}
.button--outline:hover {
color: #ffffff;
background: var(--color-ink);
border-color: var(--color-ink);
}
.button--light {
color: var(--color-ink);
background: #ffffff;
border-color: #ffffff;
}
.button--light:hover {
color: #ffffff;
background: transparent;
border-color: #ffffff;
}
.text-link {
display: inline-flex;
min-height: 44px;
align-items: center;
gap: 8px;
color: var(--color-ink);
font-weight: 800;
}
.eyebrow,
.step-label {
margin-bottom: 14px;
color: var(--color-brand);
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
}
.hero {
padding: 74px 0 34px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-line);
}
.hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(390px, 0.94fr);
align-items: center;
gap: 72px;
}
.hero__lead {
max-width: 690px;
margin-bottom: 32px;
color: var(--color-muted);
font-size: 20px;
line-height: 1.7;
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.hero-product {
position: relative;
margin: 0;
padding: 20px 20px 0;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius);
}
.hero-product::before,
.hero-product::after {
position: absolute;
z-index: 0;
content: "";
background: var(--color-line);
}
.hero-product::before {
top: 0;
bottom: 74px;
left: 50%;
width: 1px;
}
.hero-product::after {
top: calc(50% - 37px);
right: 0;
left: 0;
height: 1px;
}
.hero-product__image {
position: relative;
z-index: 1;
aspect-ratio: 1;
}
.hero-product__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.hero-product figcaption {
position: relative;
z-index: 2;
display: flex;
min-height: 72px;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 16px 4px;
background: var(--color-surface-soft);
border-top: 1px solid var(--color-line);
font-size: 13px;
}
.hero-product figcaption span {
color: var(--color-muted);
}
.hero-product figcaption strong {
max-width: 260px;
text-align: right;
}
.parameter-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-top: 44px;
background: var(--color-surface);
border: 1px solid var(--color-line);
}
.parameter-strip span {
min-height: 58px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
font-size: 14px;
font-weight: 800;
text-align: center;
}
.parameter-strip span + span {
border-left: 1px solid var(--color-line);
}
.section-nav {
position: sticky;
z-index: 70;
top: 0;
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid var(--color-line);
box-shadow: 0 8px 24px rgba(20, 30, 40, 0.05);
}
.section-nav__scroll {
display: flex;
min-height: 58px;
align-items: stretch;
overflow-x: auto;
scrollbar-width: thin;
}
.section-nav a {
position: relative;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
padding: 0 18px;
color: var(--color-muted);
font-size: 13px;
font-weight: 800;
text-decoration: none;
}
.section-nav a::after {
position: absolute;
right: 18px;
bottom: 0;
left: 18px;
height: 3px;
content: "";
background: transparent;
}
.section-nav a:hover,
.section-nav a.is-active {
color: var(--color-ink);
}
.section-nav a.is-active::after {
background: var(--color-brand);
}
.section {
padding-block: var(--andon-section-space-medium);
}
.section--large {
padding-block: var(--andon-section-space-large);
}
.section--compact {
padding-block: var(--andon-section-space-compact);
}
.section--soft {
background: var(--color-surface-soft);
}
.section--dark {
color: #ffffff;
background: var(--color-ink);
}
.section-heading {
max-width: 760px;
margin-bottom: 46px;
}
.section-heading--wide {
max-width: 850px;
}
.section-heading--compact {
margin-bottom: 28px;
}
.section-heading > p:last-child,
.section-lead {
color: var(--color-muted);
font-size: 18px;
}
.section-heading--light > p:last-child {
color: #c7d0d9;
}
.selector-layout {
display: grid;
grid-template-columns: minmax(0, 1.38fr) minmax(290px, 0.62fr);
align-items: start;
gap: 24px;
}
.selector-tool,
.selector-summary {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius);
}
.selector-tool {
min-height: 520px;
}
.selector-progress {
display: grid;
grid-template-columns: repeat(3, 1fr);
border-bottom: 1px solid var(--color-line);
}
.selector-progress button {
min-height: 70px;
padding: 12px;
color: var(--color-muted);
background: transparent;
border: 0;
border-right: 1px solid var(--color-line);
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.selector-progress button:last-child {
border-right: 0;
}
.selector-progress button span {
display: inline-grid;
width: 30px;
height: 30px;
margin-right: 6px;
place-items: center;
color: var(--color-muted);
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
border-radius: 50%;
}
.selector-progress button.is-complete,
.selector-progress button[aria-selected="true"] {
color: var(--color-ink);
}
.selector-progress button.is-complete span,
.selector-progress button[aria-selected="true"] span {
color: #ffffff;
background: var(--color-brand);
border-color: var(--color-brand);
}
.selector-step {
padding: 40px;
}
.selector-step h3 {
margin-bottom: 26px;
font-size: 28px;
}
.option-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.option-grid--colors {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.option-card {
position: relative;
display: flex;
min-height: 190px;
flex-direction: column;
align-items: flex-start;
padding: 24px;
color: var(--color-muted);
background: #ffffff;
border: 1px solid var(--color-line);
border-radius: 4px;
text-align: left;
cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.option-card:hover {
border-color: var(--color-line-strong);
box-shadow: 0 8px 24px rgba(20, 30, 40, 0.07);
transform: translateY(-2px);
}
.option-card.is-selected {
color: var(--color-ink-soft);
border: 2px solid var(--color-brand);
box-shadow: 0 0 0 3px rgba(226, 41, 34, 0.1);
}
.option-card__title {
display: block;
margin-bottom: 12px;
color: var(--color-ink);
font-size: 21px;
font-weight: 800;
}
.option-card__state {
margin-top: auto;
padding-top: 18px;
color: var(--color-brand);
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
}
.option-card.is-selected .option-card__state::before {
content: "✓ ";
}
.selector-note {
margin: 24px 0 0;
padding-left: 14px;
color: var(--color-muted);
border-left: 3px solid var(--color-brand);
font-size: 14px;
}
.selector-summary {
position: sticky;
top: 82px;
padding: 24px;
}
.selector-summary__image {
aspect-ratio: 1;
margin-bottom: 22px;
background: var(--color-surface-soft);
}
.selector-summary__image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.selector-summary dl {
margin: 0;
}
.selector-summary dl div {
display: flex;
min-height: 46px;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom: 1px solid var(--color-line);
}
.selector-summary dt {
color: var(--color-muted);
font-size: 13px;
}
.selector-summary dd {
margin: 0;
font-size: 14px;
font-weight: 800;
text-align: right;
}
.configuration-result {
display: grid;
grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
margin-top: 28px;
overflow: hidden;
background: var(--color-surface);
border: 1px solid var(--color-line-strong);
border-left: 5px solid var(--color-brand);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
.configuration-result[hidden] {
display: none;
}
.configuration-result--no-image {
grid-template-columns: 1fr;
}
.result-image {
min-height: 330px;
background: var(--color-surface-soft);
}
.result-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.result-content {
padding: 38px 42px;
}
.result-kicker {
color: var(--color-brand);
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
}
.result-content h3 {
max-width: 650px;
margin: 10px 0 8px;
font-size: 30px;
}
.result-code {
color: var(--color-muted);
font-size: 14px;
}
.result-specs {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 24px 0;
border-block: 1px solid var(--color-line);
}
.result-specs div {
padding: 14px 12px 14px 0;
}
.result-specs span {
display: block;
color: var(--color-muted);
font-size: 12px;
}
.result-specs strong {
font-size: 14px;
}
.result-included {
margin: 0 0 26px;
color: var(--color-muted);
}
.result-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.comparison-table-wrap {
overflow-x: auto;
border: 1px solid var(--color-line);
border-radius: var(--radius);
}
.comparison-table {
width: 100%;
min-width: 960px;
border-collapse: collapse;
background: var(--color-surface);
}
.comparison-table caption {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.comparison-table th,
.comparison-table td {
padding: 18px 16px;
border-bottom: 1px solid var(--color-line);
text-align: left;
vertical-align: middle;
}
.comparison-table th {
color: var(--color-muted);
background: var(--color-surface-soft);
font-size: 12px;
text-transform: uppercase;
}
.comparison-table tbody tr:hover {
background: #fffafa;
}
.comparison-table tbody tr:last-child td {
border-bottom: 0;
}
.configuration-name strong,
.configuration-name span {
display: block;
}
.configuration-name span {
margin-top: 4px;
color: var(--color-muted);
font-size: 12px;
}
.table-action {
min-height: 40px;
padding: 8px 12px;
color: var(--color-ink);
background: transparent;
border: 1px solid var(--color-line-strong);
border-radius: 4px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.table-action:hover {
color: #ffffff;
background: var(--color-ink);
border-color: var(--color-ink);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--color-line-strong);
}
.steps-grid li {
min-height: 270px;
padding: 30px 26px;
border-bottom: 1px solid var(--color-line-strong);
border-right: 1px solid var(--color-line-strong);
}
.steps-grid li:first-child {
border-left: 1px solid var(--color-line-strong);
}
.step-number {
display: block;
margin-bottom: 50px;
color: var(--color-brand);
font-size: 14px;
font-weight: 800;
}
.steps-grid p {
margin: 0;
color: var(--color-muted);
}
.inline-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 30px;
}
.inline-cta p {
margin: 0;
font-size: 19px;
}
.included-layout {
display: grid;
grid-template-columns: minmax(310px, 0.7fr) minmax(0, 1.3fr);
align-items: center;
gap: 70px;
}
.included-list {
margin: 30px 0 24px;
padding: 0;
list-style: none;
border-top: 1px solid var(--color-line);
}
.included-list li {
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
padding: 15px 0;
border-bottom: 1px solid var(--color-line);
}
.included-list span {
color: var(--color-brand);
font-size: 13px;
font-weight: 800;
}
.content-note {
color: var(--color-muted);
font-size: 14px;
}
.included-image {
margin: 0;
padding: 18px;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
}
.included-image img {
width: 100%;
height: auto;
}
.integration-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid #46515c;
border-left: 1px solid #46515c;
}
.integration-grid article {
min-height: 250px;
padding: 28px;
border-right: 1px solid #46515c;
border-bottom: 1px solid #46515c;
}
.integration-grid article > span {
display: block;
margin-bottom: 36px;
color: #ff6b66;
font-size: 13px;
font-weight: 800;
}
.integration-grid article p {
margin: 0;
color: #c7d0d9;
}
.safety-callout {
display: grid;
grid-template-columns: 220px 1fr auto;
align-items: center;
gap: 28px;
margin-top: 28px;
padding: 24px 28px;
background: var(--color-ink-soft);
border-left: 4px solid var(--color-brand);
}
.safety-callout p {
margin: 0;
color: #d6dde4;
font-size: 14px;
}
.applications-layout {
display: grid;
grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
align-items: start;
gap: 70px;
}
.applications-visual {
position: sticky;
top: 82px;
padding-bottom: 18px;
border-bottom: 3px solid var(--color-brand);
}
.applications-visual img {
width: 100%;
aspect-ratio: 610 / 445;
object-fit: cover;
}
.applications-visual p {
margin: 16px 0 0;
color: var(--color-muted);
font-size: 13px;
}
.application-list {
border-top: 1px solid var(--color-line-strong);
}
.application-list article {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 180px;
align-items: center;
gap: 18px;
min-height: 136px;
padding: 22px 0;
border-bottom: 1px solid var(--color-line-strong);
}
.application-index {
color: var(--color-brand);
font-size: 13px;
font-weight: 800;
}
.application-list h3 {
margin-bottom: 6px;
}
.application-list p {
margin: 0;
color: var(--color-muted);
font-size: 14px;
}
.application-list button {
padding: 10px 0;
color: var(--color-ink);
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-ink);
font-size: 13px;
font-weight: 800;
text-align: left;
cursor: pointer;
}
.application-list button::after {
display: block;
margin-top: 4px;
color: var(--color-muted);
content: "Recommended starting configuration";
font-size: 10px;
font-weight: 400;
}
.support-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(400px, 0.8fr);
align-items: start;
gap: 80px;
}
.support-layout h2 {
margin-bottom: 20px;
}
.support-actions {
border-top: 1px solid var(--color-line-strong);
}
.support-actions a {
display: flex;
min-height: 62px;
align-items: center;
justify-content: space-between;
padding: 12px 4px;
border-bottom: 1px solid var(--color-line-strong);
font-weight: 800;
text-decoration: none;
}
.support-actions a::after {
color: var(--color-brand);
content: "→";
font-size: 20px;
}
.custom-band {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
align-items: end;
gap: 40px 70px;
padding: 48px;
background: var(--color-surface-warm);
border: 1px solid var(--color-line);
border-left: 5px solid var(--color-brand);
}
.custom-band > div p:last-child {
margin-bottom: 0;
color: var(--color-muted);
}
.custom-band .button {
justify-self: start;
}
.requirement-tags {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--color-line);
}
.requirement-tags li {
padding: 10px 0;
border-bottom: 1px solid var(--color-line);
font-size: 14px;
font-weight: 700;
}
.faq-heading {
margin-bottom: 34px;
padding: 8px 0 8px 26px;
border-left: 5px solid var(--color-brand);
}
.faq-heading p:last-child {
max-width: 680px;
margin: 0;
color: var(--color-muted);
}
.faq-list {
border-top: 1px solid var(--color-line-strong);
}
.faq-list details {
background: var(--color-surface);
border-bottom: 1px solid var(--color-line-strong);
}
.faq-list summary {
position: relative;
padding: 24px 54px 24px 4px;
font-size: 17px;
font-weight: 800;
list-style: none;
cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary::after {
position: absolute;
top: 50%;
right: 12px;
width: 28px;
height: 28px;
content: "+";
transform: translateY(-50%);
color: var(--color-brand);
font-size: 24px;
line-height: 28px;
text-align: center;
}
.faq-list details[open] summary::after {
content: "−";
}
.faq-list details p {
max-width: 860px;
margin: 0;
padding: 0 54px 24px 4px;
color: var(--color-muted);
}
.quote-section {
background: #ffffff;
}
.quote-heading {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.72fr);
align-items: end;
gap: 70px;
margin-bottom: 34px;
}
.quote-heading > div:first-child > p:last-child {
max-width: 720px;
margin: 0;
color: var(--color-muted);
font-size: 18px;
}
.purchase-paths {
border-top: 1px solid var(--color-line-strong);
}
.purchase-paths div {
display: grid;
grid-template-columns: 160px 1fr;
gap: 20px;
padding: 14px 0;
border-bottom: 1px solid var(--color-line-strong);
}
.purchase-paths span {
color: var(--color-muted);
font-size: 12px;
}
.purchase-paths strong {
font-size: 14px;
}
.preview-notice {
display: flex;
align-items: center;
gap: 18px;
padding: 14px 18px;
background: #fff7dd;
border: 1px solid #e4cd7a;
border-radius: 4px;
font-size: 14px;
}
.quote-form {
margin-top: 24px;
padding: 36px;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 24px;
}
.field {
min-width: 0;
}
.field--full {
grid-column: 1 / -1;
}
.field label {
display: block;
margin-bottom: 7px;
font-size: 13px;
font-weight: 800;
}
.field label span {
color: var(--color-brand);
}
.field input,
.field select,
.field textarea {
display: block;
width: 100%;
min-height: 50px;
padding: 11px 13px;
background: #ffffff;
border: 1px solid var(--color-line-strong);
border-radius: 3px;
}
.field textarea {
min-height: 132px;
resize: vertical;
}
.field input[readonly] {
color: var(--color-ink-soft);
background: #e9edf1;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
border-color: var(--color-brand);
}
.field-error {
display: block;
min-height: 20px;
padding-top: 3px;
color: var(--color-brand-dark);
font-size: 12px;
}
.form-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 24px;
}
.form-footer p {
margin: 0;
color: var(--color-muted);
font-size: 13px;
}
.form-status {
min-height: 24px;
margin-top: 18px;
color: var(--color-success);
font-weight: 700;
}
.form-status.is-error {
color: var(--color-brand-dark);
}
.notice {
padding: 14px;
color: var(--color-muted);
background: var(--color-surface-soft);
}
.site-footer {
padding: 48px 0;
color: #d5dce3;
background: var(--color-ink);
}
body.qteatak-andon-standalone > footer.site-footer {
display: block !important;
}
.site-footer__inner {
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
}
.site-footer img {
width: 210px;
padding: 0;
background: transparent;
}
.site-footer p {
max-width: 480px;
margin: 16px 0 0;
color: #aeb8c2;
}
.site-footer nav {
display: grid;
gap: 9px;
}
.site-footer nav a {
color: #ffffff;
}
@media (max-width: 1100px) {
h1 {
font-size: 48px;
}
.hero__grid {
gap: 42px;
}
.steps-grid,
.integration-grid {
grid-template-columns: repeat(2, 1fr);
}
.steps-grid li:nth-child(3) {
border-left: 1px solid var(--color-line-strong);
}
.safety-callout {
grid-template-columns: 1fr auto;
}
.safety-callout strong {
grid-column: 1 / -1;
}
.application-list article {
grid-template-columns: 42px minmax(0, 1fr);
}
.application-list button {
grid-column: 2;
width: fit-content;
}
}
@media (max-width: 900px) {
.primary-nav > a:not(.button) {
display: none;
}
.hero__grid,
.selector-layout,
.included-layout,
.applications-layout,
.support-layout,
.quote-heading {
grid-template-columns: 1fr;
}
.hero__grid {
gap: 44px;
}
.hero-product {
max-width: 620px;
}
.selector-summary,
.applications-visual {
position: static;
}
.selector-summary {
display: grid;
grid-template-columns: 180px 1fr;
gap: 24px;
}
.selector-summary > .eyebrow {
grid-column: 1 / -1;
margin-bottom: -8px;
}
.configuration-result {
grid-template-columns: 260px minmax(0, 1fr);
}
.result-content {
padding: 30px;
}
.result-specs {
grid-template-columns: repeat(2, 1fr);
}
.included-layout,
.applications-layout,
.support-layout,
.quote-heading {
gap: 40px;
}
.custom-band {
grid-template-columns: 1fr;
align-items: start;
}
}
@media (max-width: 680px) {
html {
scroll-padding-top: 124px;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 31px;
}
.brand img {
width: 178px;
}
.site-header__inner {
gap: 12px;
}
.primary-nav .button {
min-height: 38px;
padding: 8px 11px;
font-size: 12px;
}
.hero {
padding-top: 48px;
}
.hero__lead {
font-size: 17px;
}
.hero__actions {
align-items: stretch;
}
.hero__actions .button {
flex: 1 1 100%;
}
.hero__actions .text-link {
width: 100%;
justify-content: center;
}
.hero-product {
padding: 12px 12px 0;
}
.hero-product figcaption {
display: block;
}
.hero-product figcaption strong {
display: block;
max-width: none;
margin-top: 5px;
text-align: left;
}
.parameter-strip {
grid-template-columns: repeat(2, 1fr);
}
.parameter-strip span + span {
border-left: 0;
}
.parameter-strip span:nth-child(even) {
border-left: 1px solid var(--color-line);
}
.parameter-strip span {
border-bottom: 1px solid var(--color-line);
}
.parameter-strip span:last-child {
grid-column: 1 / -1;
border-bottom: 0;
}
.section-nav a {
padding-inline: 14px;
}
.selector-tool {
min-height: 0;
}
.selector-progress button {
min-height: 62px;
padding: 8px 3px;
font-size: 11px;
}
.selector-progress button span {
display: grid;
margin: 0 auto 4px;
}
.selector-step {
padding: 28px 18px;
}
.selector-step h3 {
font-size: 24px;
}
.option-grid,
.form-grid {
grid-template-columns: 1fr;
}
.option-card {
min-height: 170px;
}
.selector-summary {
grid-template-columns: 120px 1fr;
padding: 18px;
}
.configuration-result {
grid-template-columns: 1fr;
}
.result-image {
min-height: 280px;
}
.result-content {
padding: 26px 20px;
}
.result-content h3 {
font-size: 26px;
}
.result-specs {
grid-template-columns: repeat(2, 1fr);
}
.result-actions .button {
width: 100%;
}
.steps-grid,
.integration-grid {
grid-template-columns: 1fr;
}
.steps-grid li,
.steps-grid li:nth-child(3) {
min-height: 0;
border-left: 1px solid var(--color-line-strong);
}
.step-number {
margin-bottom: 28px;
}
.inline-cta,
.form-footer {
align-items: stretch;
flex-direction: column;
}
.inline-cta .button,
.form-footer .button {
width: 100%;
}
.safety-callout {
grid-template-columns: 1fr;
padding: 22px;
}
.application-list article {
grid-template-columns: 34px minmax(0, 1fr);
}
.support-layout {
gap: 28px;
}
.custom-band {
padding: 30px 22px;
}
.requirement-tags {
grid-template-columns: 1fr;
}
.faq-heading {
padding-left: 18px;
}
.quote-form {
padding: 24px 16px;
}
.purchase-paths div {
grid-template-columns: 1fr;
gap: 3px;
}
.preview-notice {
display: block;
}
.preview-notice strong {
display: block;
margin-bottom: 3px;
}
.site-footer__inner {
grid-template-columns: 1fr;
gap: 34px;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
} :root {
--header-height: 78px;
}
.brand img {
width: 236px;
}
.primary-nav {
gap: 30px;
font-size: 15px;
}
.primary-nav .button--small {
min-height: 44px;
padding-inline: 19px;
font-size: 14px;
}
.hero {
padding-top: 62px;
}
.hero__grid {
grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
gap: 48px;
}
.hero__content h1 {
max-width: 800px;
font-size: 46px;
line-height: 1.18;
}
.hero__lead {
max-width: 760px;
font-size: 19px;
}
.hero-product {
padding: 14px 14px 0;
}
.hero-product__image {
aspect-ratio: 1 / 1.02;
}
.section-heading {
margin-bottom: 38px;
}
.option-card.is-selected .option-card__state::before {
content: "\2713\00a0";
}
.result-content {
padding: 34px 38px;
}
.result-model {
margin-bottom: 14px;
color: var(--color-ink);
font-size: 16px;
}
.result-description {
max-width: 660px;
margin-bottom: 20px;
color: var(--color-muted);
}
.result-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 26px;
padding: 0;
list-style: none;
}
.result-tags li {
min-height: 32px;
padding: 5px 11px;
color: var(--color-ink-soft);
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
border-radius: 3px;
font-size: 14px;
font-weight: 800;
}
.comparison-tabs {
display: inline-grid;
grid-template-columns: repeat(3, minmax(110px, 1fr));
margin-bottom: 18px;
padding: 4px;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
border-radius: 5px;
}
.comparison-tabs button {
min-height: 42px;
padding: 8px 18px;
color: var(--color-muted);
background: transparent;
border: 0;
border-radius: 3px;
font-size: 14px;
font-weight: 800;
cursor: pointer;
}
.comparison-tabs button:hover,
.comparison-tabs button.is-active {
color: #ffffff;
background: var(--color-ink);
}
.comparison-table {
min-width: 820px;
font-size: 15px;
}
.comparison-table th {
font-size: 14px;
text-transform: none;
}
.comparison-table th:first-child,
.comparison-table td:first-child {
width: 170px;
}
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
width: 110px;
}
.comparison-table th:nth-child(3),
.comparison-table td:nth-child(3) {
width: 150px;
}
.comparison-table th:last-child,
.comparison-table td:last-child {
width: 90px;
}
.steps-grid {
gap: 14px;
border-top: 0;
}
.steps-grid li,
.steps-grid li:first-child,
.steps-grid li:nth-child(3) {
display: flex;
min-height: 250px;
flex-direction: column;
padding: 26px;
background: #ffffff;
border: 1px solid var(--color-line);
border-radius: 5px;
}
.step-number {
margin-bottom: 34px;
font-size: 19px;
}
.steps-grid p {
font-size: 16px;
line-height: 1.62;
}
.inline-cta {
margin-top: 26px;
}
.included-layout {
grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
gap: 54px;
}
.included-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 28px 0 22px;
}
.included-cards article {
min-height: 104px;
padding: 18px;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
border-radius: 4px;
}
.included-cards span {
display: block;
margin-bottom: 14px;
color: var(--color-brand);
font-size: 13px;
font-weight: 800;
}
.included-cards h3 {
margin: 0;
font-size: 17px;
}
.included-image {
overflow: hidden;
padding: 0;
background: var(--color-surface-soft);
border-radius: 5px;
}
.included-image img {
width: 100%;
min-height: 310px;
object-fit: cover;
}
.setup-section {
background: #292d31;
}
.setup-layout {
display: grid;
grid-template-columns: minmax(310px, 0.78fr) minmax(0, 1.22fr);
align-items: center;
gap: 30px 58px;
}
.setup-copy h2 {
margin-bottom: 18px;
}
.setup-copy > p:not(.eyebrow) {
color: #d6dce1;
}
.setup-manual {
margin: 22px 0 0;
padding-left: 15px;
border-left: 3px solid var(--color-brand);
}
.setup-flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #505860;
}
.setup-flow li {
position: relative;
min-height: 142px;
padding: 22px 18px;
border-right: 1px solid #505860;
}
.setup-flow li:last-child {
border-right: 0;
}
.setup-flow li:not(:last-child)::after {
position: absolute;
z-index: 1;
top: 50%;
right: -10px;
display: grid;
width: 20px;
height: 20px;
place-items: center;
content: "\2192";
transform: translateY(-50%);
color: #ffffff;
background: #292d31;
font-weight: 800;
}
.setup-flow span {
display: block;
margin-bottom: 32px;
color: #ff746e;
font-size: 13px;
font-weight: 800;
}
.setup-flow strong {
display: block;
font-size: 15px;
}
.setup-note {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 24px;
border-top: 1px solid #505860;
}
.setup-note p {
margin: 0;
}
.application-list article {
grid-template-columns: 48px minmax(0, 1fr) 120px;
min-height: 122px;
}
.application-list p {
font-size: 16px;
line-height: 1.58;
}
.application-list button {
border-bottom: 0;
color: var(--color-brand-dark);
text-align: right;
}
.application-list button::after {
content: none;
}
.support-custom-layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
align-items: start;
gap: 54px;
}
.support-panel > .button {
margin-top: 24px;
}
.support-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 28px;
}
.support-cards article {
min-height: 210px;
padding: 24px;
background: #ffffff;
border: 1px solid var(--color-line);
border-top: 3px solid var(--color-brand);
border-radius: 4px;
}
.support-cards span {
display: block;
margin-bottom: 30px;
color: var(--color-brand);
font-size: 13px;
font-weight: 800;
}
.support-cards p {
margin: 0;
color: var(--color-muted);
font-size: 15px;
}
.custom-panel {
padding: 30px;
background: #ffffff;
border: 1px solid var(--color-line);
border-left: 4px solid var(--color-brand);
}
.custom-panel h2 {
font-size: 30px;
}
.custom-panel > p:not(.eyebrow) {
margin-top: 22px;
color: var(--color-muted);
}
.custom-panel .button {
width: 100%;
margin-top: 8px;
}
.faq-list details[open] summary::after {
content: "\2212";
}
.faq-list details p {
font-size: 16px;
line-height: 1.65;
}
.quote-form {
padding: 34px;
}
.quote-form__sections {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.quote-form fieldset {
min-width: 0;
margin: 0;
padding: 26px;
background: #ffffff;
border: 1px solid var(--color-line);
border-radius: 4px;
}
.quote-form legend {
padding: 0 10px;
color: var(--color-ink);
font-size: 18px;
font-weight: 800;
}
.field label {
font-size: 14px;
}
@media (max-width: 1100px) {
.hero__content h1 {
font-size: 46px;
}
.hero__grid {
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
gap: 36px;
}
.support-custom-layout,
.quote-form__sections {
grid-template-columns: 1fr;
}
}
@media (min-width: 1101px) {
.hero__content h1 {
white-space: nowrap;
}
}
@media (max-width: 900px) {
.brand img {
width: 218px;
}
.hero__grid,
.included-layout,
.setup-layout,
.support-custom-layout {
grid-template-columns: 1fr;
}
.hero-product {
max-width: 660px;
}
.setup-note {
grid-column: auto;
}
.support-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
:root {
--header-height: 68px;
}
.brand img {
width: 164px;
}
.hero {
padding-top: 42px;
}
.hero__content h1 {
font-size: 34px;
line-height: 1.2;
}
.hero__lead {
font-size: 17px;
}
.option-grid--colors,
.included-cards,
.support-cards,
.quote-form__sections {
grid-template-columns: 1fr;
}
.option-card {
min-height: 156px;
}
.configuration-result {
border-left-width: 4px;
}
.result-content {
padding: 26px 20px;
}
.comparison-tabs {
display: grid;
width: 100%;
grid-template-columns: repeat(3, 1fr);
}
.comparison-tabs button {
padding-inline: 8px;
}
.comparison-table-wrap {
overflow: visible;
border: 0;
}
.comparison-table,
.comparison-table tbody,
.comparison-table tr,
.comparison-table td {
display: block;
width: 100%;
min-width: 0;
}
.comparison-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.comparison-table tr {
margin-bottom: 14px;
padding: 16px;
background: #ffffff;
border: 1px solid var(--color-line);
border-radius: 4px;
}
.comparison-table td,
.comparison-table td:first-child,
.comparison-table td:nth-child(2),
.comparison-table td:nth-child(3),
.comparison-table td:last-child {
display: grid;
width: 100%;
grid-template-columns: 104px minmax(0, 1fr);
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--color-line);
}
.comparison-table td::before {
color: var(--color-muted);
content: attr(data-label);
font-size: 13px;
font-weight: 800;
}
.comparison-table td:last-child {
border-bottom: 0;
}
.table-action {
width: 100%;
}
.steps-grid {
gap: 12px;
}
.steps-grid li,
.steps-grid li:first-child,
.steps-grid li:nth-child(3) {
min-height: 0;
}
.included-image img {
min-height: 0;
}
.setup-flow {
grid-template-columns: 1fr;
}
.setup-flow li {
min-height: 88px;
border-right: 0;
border-bottom: 1px solid #505860;
}
.setup-flow li:last-child {
border-bottom: 0;
}
.setup-flow li:not(:last-child)::after {
top: auto;
right: 22px;
bottom: -10px;
transform: rotate(90deg);
}
.setup-flow span {
margin-bottom: 14px;
}
.setup-note {
align-items: stretch;
flex-direction: column;
}
.application-list article {
grid-template-columns: 34px minmax(0, 1fr);
}
.application-list button {
grid-column: 2;
text-align: left;
}
.support-cards article {
min-height: 0;
}
.quote-form {
padding: 22px 14px;
}
.quote-form fieldset {
padding: 20px 14px;
}
} .hero {
position: relative;
isolation: isolate;
min-height: 480px;
padding: 66px 0 34px;
overflow: hidden;
color: #ffffff;
background-color: #121619;
background-image: url(//qteatak.com/wp-content/mu-plugins/qteatak-andon-page/assets/images/hero-industrial-andon.webp);
background-repeat: no-repeat;
background-position: center 48%;
background-size: cover;
border-bottom: 0;
}
.hero::before {
position: absolute;
z-index: -1;
inset: 0;
content: "";
background: rgba(5, 9, 11, 0.7);
}
.hero > .container {
position: relative;
z-index: 1;
}
.hero__grid {
display: block;
}
.hero__content {
max-width: 790px;
margin-left: 0;
}
.hero .eyebrow {
color: #ff625d;
}
.hero__content h1 {
color: #ffffff;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}
.hero__lead {
max-width: 760px;
margin-bottom: 26px;
color: rgba(255, 255, 255, 0.88);
}
.hero__actions .button--light {
color: var(--color-ink);
background: #ffffff;
border-color: #ffffff;
}
.hero__actions .button--light:hover {
color: #ffffff;
background: transparent;
border-color: #ffffff;
}
.hero .text-link {
color: #ffffff;
}
.hero .text-link:hover {
color: #ffb3b0;
}
.hero__actions {
display: grid;
width: max-content;
max-width: 100%;
grid-template-columns: repeat(2, max-content);
}
.hero__actions .text-link {
min-height: 32px;
grid-column: 1 / -1;
width: fit-content;
}
.hero .parameter-strip {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 26px auto 0;
background: transparent;
border: 0;
}
.hero .parameter-strip span {
position: relative;
min-height: 31px;
justify-content: flex-start;
padding: 6px 12px 6px 28px;
color: #ffffff;
background: rgba(16, 20, 23, 0.76);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 999px;
font-size: 12px;
}
.hero .parameter-strip span + span {
border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.hero .parameter-strip span::before {
position: absolute;
left: 11px;
width: 8px;
height: 8px;
content: "";
background: #e22922;
border-radius: 50%;
}
.hero .parameter-strip span:nth-child(2)::before {
background: #f2a725;
}
.hero .parameter-strip span:nth-child(3)::before {
background: #1fa36b;
}
.hero .parameter-strip span:nth-child(4)::before {
background: #2f7dd4;
}
.hero .parameter-strip span:nth-child(5)::before {
background: #ffffff;
}
@media (max-width: 900px) {
.hero {
background-position: 56% center;
}
}
@media (max-width: 680px) {
.hero {
min-height: 0;
padding: 46px 0 30px;
background-position: 58% center;
}
.hero::before {
background: rgba(5, 9, 11, 0.78);
}
.hero__actions {
width: 100%;
grid-template-columns: 1fr;
}
.hero__actions .text-link {
grid-column: auto;
width: 100%;
}
.hero .parameter-strip {
display: grid;
width: min(
calc(100% - 2 * var(--andon-page-gutter)),
var(--andon-content-max)
);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 22px auto 0;
}
.hero .parameter-strip span,
.hero .parameter-strip span:nth-child(even) {
border: 1px solid rgba(255, 255, 255, 0.3);
}
.hero .parameter-strip span:last-child {
grid-column: 1 / -1;
}
} :root {
--color-muted: #535c65;
}
.site-header,
.site-footer {
font-size: 15px;
}
.primary-nav a:not(.button),
.site-footer nav a,
.site-footer nav span {
font-size: 14px;
}
.section .eyebrow:not(.hero .eyebrow) {
letter-spacing: 0;
text-transform: none;
}
.button,
.table-action {
min-height: 44px;
}
.hero {
min-height: 500px;
}
.hero::before {
background: linear-gradient(
90deg,
rgba(5, 9, 11, 0.88) 0%,
rgba(5, 9, 11, 0.76) 38%,
rgba(5, 9, 11, 0.38) 68%,
rgba(5, 9, 11, 0.1) 100%
);
}
.hero__content {
max-width: 860px;
}
.hero__content h1 {
max-width: 830px;
white-space: normal;
}
.hero__lead {
max-width: 820px;
}
.hero__actions {
display: flex;
width: auto;
max-width: 660px;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.hero__actions .button {
min-height: 48px;
}
.hero__actions .text-link {
display: inline-flex;
min-height: 44px;
grid-column: auto;
align-items: center;
padding: 0 4px;
font-size: 15px;
}
.hero .parameter-strip {
gap: 12px;
}
.hero .parameter-strip span {
min-height: 36px;
padding: 8px 14px 8px 31px;
font-size: 14px;
}
.selector-step-count {
margin: 0;
padding: 18px 24px 0;
color: var(--color-ink);
font-size: 14px;
font-weight: 800;
}
.selector-progress {
padding: 12px 18px 0;
border-bottom: 1px solid var(--color-line);
}
.selector-progress button {
position: relative;
min-height: 54px;
padding: 10px 12px 15px;
border-right: 0;
}
.selector-progress button::after {
position: absolute;
right: 0;
bottom: -1px;
left: 0;
height: 3px;
content: "";
background: transparent;
}
.selector-progress button[aria-selected="true"] {
color: var(--color-brand-dark);
}
.selector-progress button[aria-selected="true"]::after {
background: var(--color-brand);
}
.selector-progress button.is-complete {
color: var(--color-ink);
}
.selector-progress button span,
.selector-progress button.is-complete span,
.selector-progress button[aria-selected="true"] span {
display: inline;
width: auto;
height: auto;
margin: 0;
color: inherit;
background: transparent;
border: 0;
border-radius: 0;
}
.selector-step {
padding: 32px 36px 36px;
}
.selector-step h3 {
margin-bottom: 22px;
font-size: 25px;
}
.option-card__radio {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.option-card {
min-height: 150px;
padding: 22px 44px 22px 22px;
font-size: 15px;
line-height: 1.52;
}
.option-card__check {
position: absolute;
top: 16px;
right: 16px;
display: grid;
width: 25px;
height: 25px;
place-items: center;
color: transparent;
background: #ffffff;
border: 1px solid var(--color-line-strong);
border-radius: 50%;
font-size: 14px;
font-weight: 900;
}
.option-card.is-selected {
background: #fff5f4;
border: 2px solid var(--color-brand);
box-shadow: 0 0 0 3px rgba(226, 41, 34, 0.08);
}
.option-card.is-selected .option-card__check {
color: #ffffff;
background: var(--color-brand);
border-color: var(--color-brand);
}
.option-card__radio:focus-visible + .option-card {
outline: 3px solid #1f6fbb;
outline-offset: 3px;
}
.selector-summary__image {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid var(--color-line);
}
.selector-summary__preview {
display: flex;
max-width: 240px;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 28px;
color: var(--color-muted);
text-align: center;
}
.selector-summary [hidden],
.quote-form [hidden] {
display: none !important;
}
.selector-summary__preview strong {
color: var(--color-ink);
font-size: 20px;
}
.selector-summary__preview span {
font-size: 15px;
line-height: 1.55;
}
.comparison-tabs {
padding: 0;
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-line);
border-radius: 0;
}
.comparison-tabs button {
position: relative;
min-height: 46px;
border-radius: 0;
}
.comparison-tabs button::after {
position: absolute;
right: 12px;
bottom: -1px;
left: 12px;
height: 3px;
content: "";
background: transparent;
}
.comparison-tabs button:hover,
.comparison-tabs button.is-active {
color: var(--color-brand-dark);
background: #fff4f3;
}
.comparison-tabs button.is-active::after {
background: var(--color-brand);
}
.comparison-table {
font-size: 16px;
}
.comparison-table th,
.comparison-table td {
padding-top: 18px;
padding-bottom: 18px;
}
.comparison-table td:first-child strong {
font-size: 16px;
}
.alert-tag {
display: inline-flex;
min-height: 30px;
align-items: center;
padding: 4px 9px;
color: #2f5f49;
background: #eaf7f0;
border: 1px solid #b8dfca;
border-radius: 3px;
font-size: 13px;
font-weight: 800;
}
.alert-tag--audible {
color: #8d261f;
background: #fff0ef;
border-color: #efc1bd;
}
.table-action {
min-width: 78px;
padding-inline: 16px;
}
.steps-grid {
grid-auto-rows: 1fr;
}
.steps-grid li,
.steps-grid li:first-child,
.steps-grid li:nth-child(3) {
min-height: 232px;
}
.step-number {
margin-bottom: 26px;
color: var(--color-brand);
font-size: 34px;
line-height: 1;
}
.steps-grid p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.inline-cta .button {
background: var(--color-brand);
border-color: var(--color-brand);
color: #ffffff;
}
.setup-section {
padding-block: var(--andon-section-space-compact);
}
.setup-layout {
grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
gap: 24px 48px;
}
.setup-flow li {
min-height: 124px;
}
.setup-flow strong {
font-size: 17px;
}
.setup-note {
justify-content: flex-start;
}
.setup-note p {
max-width: 620px;
}
.applications-layout {
grid-template-columns: minmax(450px, 1.08fr) minmax(0, 0.92fr);
gap: 56px;
}
.applications-visual img {
width: 100%;
min-height: 480px;
object-fit: cover;
}
.application-list {
display: grid;
border-top: 1px solid var(--color-line-strong);
}
.application-option {
display: grid;
width: 100%;
min-height: 108px;
grid-template-columns: 48px minmax(0, 1fr) 140px;
align-items: center;
gap: 18px;
padding: 18px 4px;
color: var(--color-ink);
background: transparent;
border: 0;
border-bottom: 1px solid var(--color-line-strong);
text-align: left;
cursor: pointer;
}
.application-option:hover,
.application-option:focus-visible {
background: #fff6f5;
}
.application-option strong {
display: block;
margin-bottom: 6px;
font-size: 18px;
}
.application-option small {
display: block;
color: var(--color-muted);
font-size: 15px;
line-height: 1.5;
}
.application-action {
min-height: 44px;
padding: 12px 4px;
color: var(--color-brand-dark);
font-size: 14px;
font-weight: 800;
text-align: right;
}
.support-custom-layout {
grid-template-columns: minmax(0, 1.85fr) minmax(300px, 1fr);
align-items: stretch;
gap: 36px;
}
.support-panel,
.custom-panel {
display: flex;
flex-direction: column;
}
.support-cards {
flex: 1;
}
.support-cards .support-card {
display: flex;
min-height: 220px;
flex-direction: column;
padding: 24px;
color: var(--color-ink);
background: #ffffff;
border: 1px solid var(--color-line);
border-top: 3px solid var(--color-brand);
border-radius: 4px;
text-decoration: none;
}
.support-cards .support-card:hover,
.support-cards .support-card:focus-visible {
border-color: var(--color-brand);
box-shadow: var(--shadow-soft);
}
.support-cards .support-card span {
margin-bottom: 26px;
}
.support-cards .support-card p {
font-size: 16px;
}
.support-panel > .button,
.custom-panel .button {
min-height: 48px;
margin-top: auto;
}
.custom-panel > p:not(.eyebrow) {
font-size: 16px;
}
.requirement-tags {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
border-top: 0;
}
.requirement-tags li {
padding: 9px 10px;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
font-size: 14px;
}
.faq-list details {
transition: background-color var(--transition);
}
.faq-list details[open] {
background: #f6f7f8;
}
.faq-list summary {
min-height: 66px;
padding: 22px 62px 22px 12px;
}
.faq-list summary::after {
right: 16px;
width: 36px;
height: 36px;
font-size: 30px;
line-height: 36px;
}
.faq-list details p {
max-width: 940px;
padding: 0 62px 24px 12px;
font-size: 16px;
}
.quote-form__sections {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.quote-form__application {
grid-column: 1 / -1;
}
.form-selection-empty {
display: flex;
min-height: 206px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 12px;
padding: 24px;
color: var(--color-muted);
background: var(--color-surface-soft);
border: 1px dashed var(--color-line-strong);
}
.form-selection-empty strong {
color: var(--color-ink);
font-size: 20px;
}
.form-selection-empty a {
color: var(--color-brand-dark);
font-weight: 800;
}
.form-selection-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 0;
}
.form-selection-summary div {
min-height: 92px;
padding: 16px;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
}
.form-selection-summary dt {
margin-bottom: 7px;
color: var(--color-muted);
font-size: 14px;
}
.form-selection-summary dd {
margin: 0;
color: var(--color-ink);
font-size: 17px;
font-weight: 800;
}
.field label,
.form-footer p {
font-size: 14px;
}
.site-footer nav {
grid-template-columns: repeat(2, minmax(150px, 1fr));
gap: 12px 28px;
}
.site-footer nav a,
.site-footer nav span {
color: #ffffff;
}
.site-footer nav span[aria-disabled="true"] {
color: #aeb8c2;
}
@media (max-width: 1100px) {
.applications-layout,
.setup-layout,
.support-custom-layout,
.quote-form__sections {
grid-template-columns: 1fr;
}
.setup-note,
.quote-form__application {
grid-column: auto;
}
.applications-visual img {
min-height: 0;
}
}
@media (max-width: 680px) {
.hero::before {
background: linear-gradient(
90deg,
rgba(5, 9, 11, 0.9) 0%,
rgba(5, 9, 11, 0.78) 72%,
rgba(5, 9, 11, 0.52) 100%
);
}
.hero__actions {
align-items: stretch;
flex-direction: column;
}
.hero__actions .text-link {
width: fit-content;
}
.selector-step-count {
padding: 16px 18px 0;
}
.selector-progress {
padding-inline: 6px;
}
.selector-progress button {
padding-inline: 4px;
font-size: 13px;
}
.selector-step {
padding: 26px 18px 28px;
}
.option-card {
min-height: 132px;
}
.comparison-table tr {
padding: 18px;
}
.comparison-table td {
font-size: 14px;
}
.application-option {
grid-template-columns: 34px minmax(0, 1fr);
min-height: 118px;
}
.application-action {
grid-column: 2;
width: fit-content;
text-align: left;
}
.support-cards .support-card {
min-height: 0;
}
.form-selection-summary,
.form-grid,
.site-footer nav {
grid-template-columns: 1fr;
}
.site-footer__inner {
grid-template-columns: 1fr;
}
} .selector-summary dl[data-summary-details] {
display: grid;
gap: 0;
}
.selector-summary dl[data-summary-details] div:first-child {
min-height: 60px;
margin-bottom: 4px;
padding: 10px 12px;
background: #fff5f4;
border: 1px solid #efc1bd;
}
.selector-summary dl[data-summary-details] div:first-child dd {
color: var(--color-brand-dark);
font-size: 16px;
}
.configuration-result {
border-color: #c8cfd5;
border-left-width: 6px;
box-shadow: 0 16px 42px rgba(21, 23, 25, 0.1);
}
.result-content h3 {
margin-top: 12px;
font-size: 32px;
}
.result-model {
margin: 0 0 20px;
color: var(--color-ink-soft);
font-size: 17px;
}
.result-model strong {
color: var(--color-ink);
font-size: 20px;
}
.result-actions .button {
min-height: 46px;
white-space: normal;
}
.comparison-status {
margin: 14px 0 16px;
color: var(--color-ink-soft);
font-size: 14px;
font-weight: 700;
}
.section-context {
margin: 0;
color: var(--color-muted);
font-size: 16px;
}
.applications-visual img {
min-height: 0;
aspect-ratio: 610 / 445;
object-fit: cover;
}
.faq-list {
border-top: 1px solid var(--color-line-strong);
}
.faq-item {
background: #ffffff;
border-bottom: 1px solid var(--color-line-strong);
transition: background-color var(--transition);
}
.faq-item.is-open {
background: #f4f6f8;
}
.faq-item > button {
position: relative;
display: flex;
width: 100%;
min-height: 68px;
align-items: center;
padding: 20px 64px 20px 16px;
color: var(--color-ink);
background: transparent;
border: 0;
font-size: 16px;
font-weight: 800;
line-height: 1.45;
text-align: left;
cursor: pointer;
}
.faq-item > button::after {
position: absolute;
top: 50%;
right: 16px;
display: grid;
width: 36px;
height: 36px;
place-items: center;
transform: translateY(-50%);
color: var(--color-brand);
content: "+";
font-size: 30px;
line-height: 1;
}
.faq-item > button[aria-expanded="true"]::after {
content: "\2212";
}
.faq-item [data-faq-panel] p {
max-width: 940px;
margin: 0;
padding: 0 64px 24px 16px;
color: var(--color-muted);
font-size: 16px;
line-height: 1.65;
}
.purchase-paths a {
color: var(--color-ink);
font-size: 14px;
font-weight: 800;
}
.purchase-paths a:hover {
color: var(--color-brand-dark);
}
.purchase-paths [hidden] {
display: none !important;
}
.quote-form__application .form-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.form-selection-card {
padding: 20px;
background: #ffffff;
border: 1px solid var(--color-line-strong);
border-left: 4px solid var(--color-brand);
border-radius: 4px;
}
.form-selection-model {
margin: 0 0 16px;
color: var(--color-muted);
font-size: 15px;
}
.form-selection-model strong {
display: block;
margin-top: 3px;
color: var(--color-ink);
font-size: 22px;
}
.form-selection-card .form-selection-summary div {
min-height: 78px;
padding: 13px;
}
.change-configuration {
display: inline-flex;
min-height: 40px;
align-items: center;
margin-top: 14px;
color: var(--color-brand-dark);
font-size: 14px;
font-weight: 800;
}
.site-footer p,
.site-footer nav a,
.site-footer nav span {
font-size: 15px;
line-height: 1.55;
}
@media (max-width: 1100px) {
.quote-form__application .form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.result-content h3 {
font-size: 26px;
}
.result-actions {
align-items: stretch;
flex-direction: column;
}
.result-actions .button {
width: 100%;
}
.quote-form__application .form-grid {
grid-template-columns: 1fr;
}
.faq-item > button {
min-height: 72px;
padding-right: 56px;
padding-left: 12px;
}
.faq-item [data-faq-panel] p {
padding-right: 12px;
padding-left: 12px;
}
} .container {
width: min(
calc(100% - 2 * var(--andon-page-gutter)),
var(--andon-content-max)
);
margin-inline: auto;
}
.section {
padding-block: var(--andon-section-space);
}
.section--compact {
padding-block: var(--andon-section-space-compact);
}
.section > .container > :first-child,
.section > .container > :first-child > :first-child {
margin-top: 0;
}
.section > .container > :last-child {
margin-bottom: 0;
}
.section-heading,
.section-heading--wide,
.faq-heading {
width: 100%;
max-width: none;
margin-bottom: 24px;
}
.section-heading--compact {
margin-bottom: 20px;
}
.section-heading > p:last-child,
.faq-heading > p:last-child {
max-width: 760px;
margin-bottom: 0;
}
.selector-layout {
grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
align-items: stretch;
gap: var(--andon-grid-gap);
width: 100%;
}
.selector-tool {
min-height: 0;
}
.selector-summary {
position: relative;
top: auto;
display: flex;
height: 100%;
flex-direction: column;
align-self: stretch;
margin: 0;
padding: var(--andon-card-padding);
}
.selector-summary > .eyebrow {
margin-bottom: 14px;
}
.selector-summary__image {
height: 190px;
min-height: 0;
flex: 0 0 190px;
aspect-ratio: auto;
margin-bottom: 18px;
}
.selector-summary dl[data-summary-details] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.selector-summary dl[data-summary-details] div,
.selector-summary dl[data-summary-details] div:first-child {
display: block;
min-height: 74px;
margin: 0;
padding: 12px;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
}
.selector-summary dl[data-summary-details] div:first-child {
background: #fff5f4;
border-color: #efc1bd;
}
.selector-summary dt {
margin-bottom: 4px;
font-size: 12px;
}
.selector-summary dd,
.selector-summary dl[data-summary-details] div:first-child dd {
color: var(--color-ink);
font-size: 16px;
text-align: left;
}
.selector-summary dl[data-summary-details] div:first-child dd {
color: var(--color-brand-dark);
font-size: 18px;
}
.selector-step {
padding: var(--andon-card-padding);
}
.option-grid {
gap: 16px;
align-items: stretch;
}
.option-card {
min-height: 0;
padding: 20px 42px 20px 20px;
}
.configuration-result {
width: 100%;
grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
margin-top: 20px;
}
.result-image {
min-height: 0;
aspect-ratio: 1;
}
.result-content {
align-self: center;
padding: var(--andon-card-padding);
}
.comparison-tabs,
.comparison-status,
.comparison-table-wrap,
.comparison-table {
width: 100%;
}
.comparison-table-wrap {
margin-inline: 0;
}
.comparison-tabs {
margin-bottom: 12px;
}
.comparison-status {
margin-block: 10px 12px;
}
.comparison-table {
min-width: 0;
}
.comparison-table th,
.comparison-table td {
padding-block: 14px;
}
.steps-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: 1fr;
gap: 20px;
width: 100%;
}
.steps-grid li,
.steps-grid li:first-child,
.steps-grid li:nth-child(3) {
min-height: 0;
padding: var(--andon-card-padding);
}
.step-number {
margin-bottom: 16px;
}
.inline-cta {
width: 100%;
margin-top: 20px;
}
.included-layout {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
align-items: stretch;
gap: 24px;
}
.included-cards {
margin-block: 20px 16px;
}
.included-cards article {
min-height: 0;
padding: 16px;
}
.included-image {
position: relative;
align-self: stretch;
margin: 0;
}
.included-image img {
position: absolute;
inset: 0;
display: block;
width: 100%;
min-height: 0;
height: 100%;
object-fit: cover;
}
.setup-section {
padding-block: clamp(36px, 3.4vw, 42px);
}
.setup-layout {
grid-template-columns: minmax(250px, 0.58fr) minmax(0, 1.42fr);
align-items: stretch;
gap: var(--andon-grid-gap);
}
.setup-copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.setup-intro {
margin-bottom: 14px;
color: #ffffff;
font-size: 17px;
font-weight: 700;
}
.setup-points {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.setup-points li {
position: relative;
padding-left: 18px;
color: #c7d0d9;
font-size: 15px;
}
.setup-points li::before {
position: absolute;
top: 0.66em;
left: 0;
width: 6px;
height: 6px;
content: "";
background: var(--color-brand);
border-radius: 50%;
}
.setup-diagram {
display: grid;
align-content: center;
gap: 16px;
}
.setup-flow {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.setup-flow li {
min-height: 0;
padding: 20px;
}
.setup-flow span {
margin-bottom: 16px;
}
.setup-note {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 20px;
padding-top: 14px;
}
.applications-layout {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: stretch;
gap: var(--andon-grid-gap);
}
.applications-visual {
position: static;
display: grid;
min-height: 0;
grid-template-rows: minmax(0, 1fr) auto;
align-self: stretch;
padding-bottom: 0;
border-bottom: 0;
}
.applications-visual img {
width: 100%;
min-height: 0;
height: 100%;
object-fit: cover;
object-position: center;
}
.applications-visual p {
margin: 12px 0 0;
padding-bottom: 8px;
border-bottom: 3px solid var(--color-brand);
}
.application-list {
display: grid;
gap: 10px;
}
.application-list .application-option {
min-height: 0;
grid-template-columns: 42px minmax(0, 1fr) auto;
gap: 14px;
padding: 15px 16px;
color: var(--color-ink);
background: #ffffff;
border: 1px solid var(--color-line);
border-radius: 4px;
text-align: left;
transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.application-list .application-option:hover,
.application-list .application-option:focus-visible {
background: #fff8f7;
border-color: #e9a7a2;
box-shadow: 0 8px 22px rgba(21, 23, 25, 0.06);
}
.application-copy {
display: grid;
gap: 3px;
text-align: left;
}
.application-option strong {
margin: 0;
font-size: 17px;
}
.application-option small {
line-height: 1.4;
}
.application-recommendation {
color: var(--color-ink-soft);
font-size: 12px;
font-weight: 700;
text-align: left;
}
.support-custom-layout {
grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr);
align-items: stretch;
gap: var(--andon-grid-gap);
}
.support-panel,
.custom-panel {
display: flex;
min-width: 0;
flex-direction: column;
align-self: stretch;
}
.support-cards {
grid-auto-rows: 1fr;
gap: 12px;
margin-top: 20px;
}
.support-cards .support-card {
min-height: 0;
padding: 20px;
}
.support-cards .support-card span {
margin-bottom: 14px;
}
.support-panel > .button {
margin-top: auto;
padding-top: 12px;
padding-bottom: 12px;
}
.custom-panel {
padding: var(--andon-card-padding);
}
.custom-panel > p:not(.eyebrow) {
margin-block: 18px 20px;
}
.requirement-tags {
margin-bottom: 18px;
}
.custom-panel .button {
margin-top: auto;
}
.faq-heading {
padding-block: 0;
margin-bottom: 18px;
}
.faq-list {
width: 100%;
margin: 0;
}
.faq-item > button {
min-height: 60px;
padding-block: 16px;
padding-left: 16px;
}
.faq-item [data-faq-panel] p {
padding-bottom: 18px;
}
.quote-heading {
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
align-items: stretch;
gap: var(--andon-grid-gap);
width: 100%;
margin-bottom: 24px;
}
.quote-heading > div:first-child > p:last-child {
max-width: 720px;
}
.purchase-paths {
width: 100%;
padding: 6px 16px;
background: var(--color-surface-soft);
border: 1px solid var(--color-line);
}
.purchase-paths div {
grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.2fr);
gap: 16px;
}
.quote-form {
width: 100%;
margin: 0;
padding: 24px;
}
.quote-form__sections {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
gap: 20px;
}
.quote-form fieldset {
align-self: stretch;
padding: 22px;
}
.quote-form__application {
grid-column: 1 / -1;
}
.quote-form__application .form-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px 20px;
}
.form-selection-card {
display: flex;
height: 100%;
flex-direction: column;
padding: 14px;
}
.form-selection-model {
margin-bottom: 12px;
}
.form-selection-model strong {
display: inline;
margin-top: 0;
margin-left: 6px;
font-size: 20px;
}
.form-selection-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.form-selection-card .form-selection-summary div {
min-height: 70px;
padding: 11px;
}
.form-selection-summary dt {
min-height: 0;
margin-bottom: 4px;
font-size: 13px;
}
.form-selection-summary dd {
font-size: 16px;
}
.change-configuration {
min-height: 32px;
margin-top: auto;
padding-top: 8px;
}
.form-selection-empty {
min-height: 0;
height: 100%;
padding: var(--andon-card-padding);
}
.form-selection-summary div,
.form-selection-card .form-selection-summary div {
min-height: 0;
}
.field-error {
min-height: 0;
padding-top: 0;
}
.field-error:not(:empty) {
margin-top: 4px;
}
.form-footer {
margin-top: 20px;
}
.form-status {
min-height: 0;
}
.form-status:empty {
display: none;
}
.form-status:not(:empty) {
margin-top: 16px;
}
.site-footer {
padding-block: 36px;
}
.site-footer__inner {
align-items: center;
gap: var(--andon-grid-gap);
}
.site-footer p {
max-width: 430px;
margin-top: 12px;
}
.site-footer nav {
display: grid;
grid-template-columns: repeat(2, minmax(150px, 1fr));
gap: 28px;
}
.footer-links-group {
display: grid;
align-content: start;
gap: 8px;
}
.footer-links-group strong {
color: #ffffff;
font-size: 14px;
}
@media (max-width: 1100px) {
.setup-layout,
.applications-layout,
.support-custom-layout,
.quote-heading {
grid-template-columns: 1fr;
}
.applications-visual {
grid-template-rows: auto auto;
}
.applications-visual img {
height: auto;
aspect-ratio: 610 / 445;
}
.purchase-paths {
max-width: 620px;
}
.quote-form__application .form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.selector-layout,
.included-layout,
.quote-form__sections {
grid-template-columns: 1fr;
}
.included-image img {
position: static;
height: auto;
aspect-ratio: 1600 / 853;
object-fit: cover;
}
.form-selection-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-selection-summary dt {
min-height: 0;
}
.selector-summary {
position: static;
}
.configuration-result {
grid-template-columns: minmax(200px, 0.75fr) minmax(0, 1.25fr);
}
.steps-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.quote-form__application {
grid-column: auto;
}
}
@media (max-width: 680px) {
.section-heading,
.section-heading--wide,
.faq-heading,
.quote-heading {
margin-bottom: 24px;
}
.selector-layout,
.configuration-result,
.steps-grid,
.setup-flow,
.support-custom-layout,
.quote-heading,
.quote-form__sections {
grid-template-columns: 1fr;
}
.configuration-result {
margin-top: 20px;
}
.result-image {
aspect-ratio: 4 / 3;
}
.inline-cta,
.setup-note,
.form-footer {
align-items: stretch;
grid-template-columns: 1fr;
}
.inline-cta,
.form-footer {
flex-direction: column;
}
.setup-flow li {
padding: 18px;
}
.setup-flow li:not(:last-child)::after {
top: auto;
right: 20px;
bottom: -10px;
transform: rotate(90deg);
}
.application-list .application-option {
grid-template-columns: 36px minmax(0, 1fr);
padding: 15px;
}
.application-action {
grid-column: 2;
min-height: 0;
padding: 4px 0 0;
text-align: left;
}
.quote-form__application .form-grid {
grid-template-columns: 1fr;
}
.quote-form,
.quote-form fieldset,
.custom-panel {
padding: 20px;
}
.purchase-paths div {
grid-template-columns: 1fr;
gap: 4px;
}
.site-footer {
padding-block: 36px;
}
} .hero__lead {
max-width: 760px;
font-size: 18px;
line-height: 1.55;
}
.hero .parameter-strip span {
min-height: 40px;
padding-block: 9px;
font-weight: 700;
}
.button,
.table-action {
min-height: 46px;
}
.selector-layout {
grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
}
.selector-summary {
justify-content: flex-start;
}
.selector-summary__image {
height: 210px;
flex-basis: 210px;
background: #ffffff;
}
.selector-summary dl[data-summary-details] {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.selector-summary dl[data-summary-details] div,
.selector-summary dl[data-summary-details] div:first-child {
min-height: 76px;
margin: 0;
padding: 12px 14px;
border-radius: 4px;
}
.selector-summary dl[data-summary-details] div:first-child {
border-left: 4px solid var(--color-brand);
}
.selector-summary dt {
color: var(--color-muted);
font-size: 13px;
font-weight: 700;
}
.selector-summary dd,
.selector-summary dl[data-summary-details] div:first-child dd {
font-size: 17px;
font-weight: 800;
line-height: 1.35;
}
.selector-summary dl[data-summary-details] div:first-child dd {
font-size: 20px;
}
.configuration-result {
grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
border-left-width: 5px;
}
.result-content h3 {
margin: 8px 0 12px;
font-size: 30px;
}
.result-model {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
margin-bottom: 16px;
}
.result-model strong {
color: var(--color-brand-dark);
font-size: 22px;
}
.result-tags {
margin-bottom: 20px;
}
.result-actions {
align-items: stretch;
gap: 10px;
}
.result-actions .button {
min-height: 46px;
}
.comparison-table {
font-size: 15px;
}
.comparison-table th,
.comparison-table td {
padding-block: 16px;
}
.comparison-table td:first-child strong {
font-size: 16px;
}
.comparison-table td:nth-child(4) {
max-width: 360px;
line-height: 1.45;
}
.table-action {
min-width: 88px;
}
.steps-grid {
gap: 18px;
}
.steps-grid li,
.steps-grid li:first-child,
.steps-grid li:nth-child(3) {
display: flex;
min-height: 220px;
flex-direction: column;
}
.step-number {
margin-bottom: 18px;
font-size: 38px;
}
.steps-grid h3 {
min-height: 46px;
margin-bottom: 10px;
}
.steps-grid p {
margin-bottom: 0;
}
.inline-cta {
padding: 18px 20px;
}
.applications-layout > div:last-child {
display: flex;
min-width: 0;
flex-direction: column;
}
.application-list {
flex: 1;
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.application-list .application-option {
min-height: 84px;
height: 100%;
}
.application-action {
display: inline-flex;
min-width: 104px;
min-height: 44px;
align-items: center;
justify-content: flex-end;
}
.support-cards {
grid-auto-rows: 1fr;
}
.support-cards .support-card {
height: 100%;
padding: 22px;
}
.support-cards .support-card h3 {
min-height: 46px;
}
.support-cards .support-card p {
margin-bottom: 0;
}
.support-panel > .button,
.custom-panel .button {
width: 100%;
justify-content: center;
}
.requirement-tags {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.requirement-tags li {
display: flex;
min-height: 44px;
align-items: center;
padding: 10px 12px;
}
.faq-item.is-open {
background: #eef1f3;
}
.faq-item > button {
min-height: 66px;
padding-block: 18px;
font-size: 17px;
font-weight: 800;
}
.faq-item [data-faq-panel] p {
padding-bottom: 20px;
color: var(--color-ink-soft);
font-size: 16px;
}
.quote-form__sections {
gap: 20px;
}
.quote-form fieldset {
padding: 22px;
}
.quote-form .form-grid {
gap: 18px 20px;
}
.form-selection-card {
padding: 18px;
}
.form-selection-model {
display: grid;
gap: 3px;
margin-bottom: 14px;
}
.form-selection-model span {
color: var(--color-muted);
font-size: 13px;
font-weight: 700;
}
.form-selection-model strong {
margin: 0;
color: var(--color-brand-dark);
font-size: 24px;
line-height: 1.25;
}
.form-selection-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.form-selection-card .form-selection-summary div {
padding: 12px;
background: var(--color-surface-soft);
border-radius: 4px;
}
.change-configuration {
margin-top: 12px;
}
.form-footer {
align-items: center;
justify-content: space-between;
}
.form-footer .button {
min-width: 270px;
min-height: 46px;
justify-content: center;
}
.form-footer .button.is-loading {
cursor: wait;
opacity: 0.78;
}
.form-status {
padding: 12px 14px;
border-radius: 4px;
font-size: 14px;
font-weight: 700;
}
.form-status.is-error {
color: #8d261f;
background: #fff0ef;
border: 1px solid #efc1bd;
}
.form-status.is-success {
color: #285f46;
background: #edf8f2;
border: 1px solid #b8dfca;
}
.site-footer nav a {
min-height: 30px;
font-size: 15px;
}
@media (max-width: 1100px) {
.applications-layout > div:last-child {
display: block;
}
.application-list {
grid-template-rows: none;
}
}
@media (max-width: 900px) {
.selector-layout {
grid-template-columns: 1fr;
}
.selector-summary {
order: 2;
}
.steps-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.hero__lead {
font-size: 16px;
}
.hero .parameter-strip span {
min-height: 38px;
font-size: 13px;
}
.selector-summary__image {
height: auto;
flex-basis: auto;
aspect-ratio: 4 / 3;
}
.configuration-result,
.steps-grid {
grid-template-columns: 1fr;
}
.steps-grid li,
.steps-grid li:first-child,
.steps-grid li:nth-child(3) {
min-height: 0;
}
.steps-grid h3 {
min-height: 0;
}
.result-actions .button,
.form-footer .button {
width: 100%;
min-width: 0;
}
.form-selection-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-footer {
align-items: stretch;
}
} .selector-layout {
align-items: stretch;
}
.selector-tool,
.selector-summary {
height: auto;
min-height: 0;
align-self: stretch;
align-content: start;
}
.selector-tool {
display: flex;
flex-direction: column;
}
@media (min-width: 901px) {
.selector-tool,
.selector-summary {
min-height: 520px;
}
}
.selector-progress button {
min-height: 0;
}
.selector-summary__image {
height: auto;
min-height: 0;
flex: 1 1 auto;
aspect-ratio: auto;
margin-bottom: 0;
}
.selector-selection-details {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: center;
gap: 0;
margin: auto 0 0;
padding: 14px 6px 16px;
border-top: 1px solid var(--color-line);
}
.selector-selection-details[hidden] {
display: none;
}
.selector-selection-details div,
.selector-selection-details div:first-child {
display: flex;
min-height: 0;
min-width: 0;
flex-direction: column;
justify-content: center;
margin: 0;
padding: 0 14px;
background: transparent;
border: 0;
border-left: 1px solid var(--color-line);
border-radius: 0;
}
.selector-selection-details div:first-child {
background: transparent;
border-left: 4px solid var(--color-brand);
}
.selector-selection-details dt {
margin-bottom: 4px;
color: var(--color-muted);
font-size: 13px;
font-weight: 700;
}
.selector-selection-details dd {
margin: 0;
font-size: 17px;
font-weight: 800;
line-height: 1.35;
}
.selector-selection-details div:first-child dd {
color: var(--color-brand-dark);
font-size: 20px;
}
.quote-heading {
align-items: start;
}
.purchase-paths {
height: auto;
min-height: 0;
align-self: start;
align-content: start;
padding: 20px 22px;
}
.purchase-paths div {
min-height: 0;
align-items: center;
align-content: start;
padding: 0;
}
.quote-form__sections {
align-items: start;
align-content: start;
gap: 24px 20px;
}
.quote-form fieldset,
.quote-form__selection,
.form-selection-card,
.form-selection-empty {
height: auto;
min-height: 0;
align-self: start;
align-content: start;
}
@media (max-width: 900px) {
.selector-layout {
align-items: start;
}
.selector-tool,
.selector-summary {
min-height: 0;
align-self: start;
}
.selector-selection-details {
margin-top: 16px;
}
.selector-summary__image {
flex: 0 1 auto;
aspect-ratio: 1;
}
}
@media (max-width: 680px) {
.selector-selection-details {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.selector-selection-details div:first-child {
padding-left: 10px;
}
.selector-summary__image {
aspect-ratio: 1;
}
.purchase-paths {
padding: 20px;
}
.purchase-paths div {
align-items: start;
}
} .configuration-result {
grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
align-items: stretch;
background: #ffffff;
box-shadow: 0 10px 28px rgba(21, 23, 25, 0.08);
}
.result-image {
display: grid;
min-height: 300px;
aspect-ratio: auto;
place-items: center;
padding: 20px;
background: var(--color-surface-soft);
border-right: 1px solid var(--color-line);
}
.result-image img {
max-width: 100%;
max-height: 260px;
object-fit: contain;
}
.result-content {
display: grid;
align-content: center;
gap: 14px;
padding: 28px 32px;
}
.result-kicker {
line-height: 1.2;
letter-spacing: 0;
}
.result-content h3 {
max-width: none;
margin: 0;
font-size: clamp(26px, 2.2vw, 30px);
line-height: 1.2;
}
.result-model {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
gap: 10px;
margin: 0;
padding: 0 0 14px;
border-bottom: 1px solid var(--color-line);
}
.result-model span {
color: var(--color-muted);
font-size: 13px;
font-weight: 700;
}
.result-model strong {
color: var(--color-brand-dark);
font-size: 22px;
line-height: 1.2;
}
.result-tags {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin: 0;
padding: 0 0 14px;
border-bottom: 1px solid var(--color-line);
}
.result-tags li {
display: grid;
min-height: 0;
gap: 3px;
padding: 0 14px;
color: var(--color-ink);
background: transparent;
border: 0;
border-left: 1px solid var(--color-line);
border-radius: 0;
}
.result-tags li:first-child {
padding-left: 0;
border-left: 0;
}
.result-tags li span {
color: var(--color-muted);
font-size: 12px;
font-weight: 700;
}
.result-tags li strong {
font-size: 15px;
line-height: 1.35;
}
.result-actions {
display: flex;
align-items: stretch;
gap: 12px;
margin-top: 2px;
}
.result-actions .button {
min-height: 46px;
min-width: 0;
padding-inline: 22px;
}
@media (max-width: 900px) {
.configuration-result {
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}
.result-content {
padding: 24px;
}
.result-tags {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-bottom: 0;
}
.result-tags li {
padding: 10px 12px;
}
.result-tags li:nth-child(odd) {
padding-left: 0;
border-left: 0;
}
.result-tags li:nth-child(n + 3) {
border-top: 1px solid var(--color-line);
}
}
@media (max-width: 680px) {
.configuration-result {
grid-template-columns: 1fr;
}
.result-image {
min-height: 0;
aspect-ratio: 1;
border-right: 0;
border-bottom: 1px solid var(--color-line);
}
.result-image img {
min-width: 0;
min-height: 0;
max-width: 100%;
max-block-size: 100%;
object-fit: contain;
}
.result-content {
gap: 12px;
padding: 24px 20px;
}
.result-model {
grid-template-columns: 1fr;
gap: 4px;
}
.result-actions {
display: grid;
grid-template-columns: 1fr;
}
} .quote-heading {
grid-template-columns: minmax(0, 720px) auto;
align-items: center;
}
.quote-heading > div:first-child {
max-width: 720px;
}
.quote-amazon-action {
min-width: 276px;
min-height: 56px;
justify-self: end;
gap: 12px;
padding: 14px 24px;
color: #ffffff;
background: #202128;
border-color: #202128;
font-size: 15px;
white-space: nowrap;
}
.quote-amazon-action svg {
width: 22px;
height: 22px;
flex: 0 0 22px;
}
.quote-amazon-action:hover {
background: #2c2e37;
border-color: #2c2e37;
}
@media (min-width: 901px) {
.quote-form__sections {
align-items: stretch;
}
.quote-form__sections > fieldset:first-child .form-grid {
margin-top: 15px;
}
.quote-form__sections > fieldset:not(.quote-form__application) {
display: flex;
flex-direction: column;
align-self: stretch;
}
.quote-form__selection .form-selection-card,
.quote-form__selection .form-selection-empty {
flex: 1 1 auto;
align-self: stretch;
}
.quote-form__selection .form-selection-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"model change"
"details details";
align-items: start;
gap: 12px 20px;
}
.quote-form__selection .form-selection-model {
display: flex;
grid-area: model;
align-items: baseline;
gap: 10px;
margin-bottom: 0;
}
.quote-form__selection .form-selection-model strong {
margin-top: 0;
}
.quote-form__selection .form-selection-summary {
grid-area: details;
align-self: stretch;
margin: 0;
}
.quote-form__selection .form-selection-summary div {
padding: 8px 10px;
}
.quote-form__selection .change-configuration {
grid-area: change;
align-self: end;
justify-self: end;
margin-top: 0;
}
}
@media (max-width: 900px) {
.quote-heading {
grid-template-columns: 1fr;
}
.quote-amazon-action {
justify-self: start;
}
}
@media (max-width: 680px) {
.quote-amazon-action {
width: 100%;
min-width: 0;
justify-self: stretch;
}
}
#country {
appearance: none;
padding-right: 42px;
background-image: url(//qteatak.com/wp-content/mu-plugins/qteatak-andon-page/assets/images/select-chevron.png);
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 12px 9px;
}
.qtrq-honeypot {
display: none !important;
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.hero .qtk-breadcrumb,
.hero .qtk-breadcrumb a {
color: #ffffff;
}
.comparison-table tr[hidden] {
display: none !important;
}
.table-quote,
.table-amazon {
display: inline-flex;
min-height: 40px;
align-items: center;
margin: 4px 0 4px 8px;
color: var(--color-brand-dark);
font-size: 12px;
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.table-amazon {
color: var(--color-ink);
}
.comparison-table th:last-child,
.comparison-table td:last-child {
width: 230px;
}
html:not(.qtk-js) .comparison-tabs {
display: none;
}
html:not(.qtk-js) .table-action {
display: none;
}
html:not(.qtk-js) .selector-step[hidden] {
display: block;
}
@media (max-width: 760px) {
.table-quote,
.table-amazon {
min-height: 44px;
margin: 4px 14px 4px 0;
}
}
.qtrq-captcha {
margin: 0 0 20px;
}
.section-heading--wide > .eyebrow,
.included-cards article > span,
.support-panel > .eyebrow {
color: #c81712;
}
.setup-copy > .eyebrow {
color: #ff7a74;
}
.support-panel > .button {
color: #ffffff;
}