.isn-home {
--i-home-section-space: clamp(64px, 7.4vw, 108px);
}
.isn-home main > .isn-section {
padding-block: var(--i-home-section-space);
}
.isn-home .isn-cats {
padding-bottom: var(--i-home-section-space);
}
.isn-home .isn-hero {
--hero-pad-t: clamp(32px, 4.5vw, 72px);
--hero-pad-b: 24px;
}
.isn-home .isn-hero-grid {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
grid-template-rows: auto auto;
column-gap: clamp(32px, 4vw, 72px);
row-gap: clamp(36px, 4vw, 64px);
min-height: 0;
}
.isn-home .isn-hero-copy {
max-width: 780px;
}
.isn-home.isn .isn-hero .isn-eyebrow {
font-size: clamp(12px, 1vw, 15px);
letter-spacing: 0.045em;
}
.isn-home .isn-hero-line:last-child {
color: var(--i-blue);
}
.isn-home.isn .isn-hero .isn-hero-lead {
max-width: 49ch;
margin-top: 24px;
}
.isn-home .isn-hero-claims--row {
gap: 14px 24px;
margin-top: 28px;
}
.isn-home .isn-hero-claims--row .isn-hero-claim {
gap: 10px;
}
.isn-home.isn .isn-hero .isn-hero-ctas {
gap: 12px;
margin-top: 28px;
}
.isn-home.isn .isn-hero .isn-hero-ctas .isn-btn {
min-height: 56px;
padding-inline: 24px;
border-radius: var(--i-r-sm);
font-size: 16px;
}
.isn-home.isn .isn-hero .isn-hero-ctas .isn-btn--solid {
background-color: var(--i-blue);
}
.isn-home.isn .isn-hero .isn-hero-ctas .isn-btn--solid:hover {
background-color: color-mix(in srgb, var(--i-blue) 85%, var(--i-ink));
}
.isn-home.isn .isn-hero .isn-hero-ctas .isn-btn--quiet {
border-width: 1.5px;
border-color: color-mix(in srgb, var(--i-ink) 50%, var(--i-white));
}
.isn-home.isn .isn-hero .isn-hero-ctas .isn-btn--quiet:hover {
border-color: var(--i-ink);
}
.isn-home .isn-cgrid {
--cc-gap: clamp(12px, 1.5vw, 20px);
container-type: inline-size;
align-self: center;
justify-self: end;
width: 100%;
max-width: 520px;
padding: clamp(16px, 2vw, 28px);
border: 1px solid color-mix(in srgb, var(--i-blue) 12%, var(--i-white));
border-radius: 32px;
background: var(--i-blue-soft);
}
.isn-home .isn-cgrid-list {
width: 100%;
height: auto;
aspect-ratio: 1;
}
.isn-home .isn-cc-body {
background: var(--i-white);
box-shadow: 0 4px 12px color-mix(in srgb, var(--i-ink) 4%, transparent);
}
.isn-home .isn-cc-plate {
background-image: none;
box-shadow: none;
}
.isn-home .isn-cc-plate::after {
display: none;
}
.isn-home .isn-hero-steps {
padding-top: 28px;
padding-bottom: 8px;
}
@media (max-width: 1000px) {
.isn-home .isn-hero-grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
column-gap: 28px;
}
.isn-home.isn .isn-hero .isn-hero-h {
font-size: clamp(38px, 10.5cqw, 56px);
line-height: 1;
}
.isn-home .isn-hero-claims--row {
gap: 12px 18px;
}
.isn-home .isn-hero-claim .isn-ic {
width: 38px;
height: 38px;
}
.isn-home .isn-hero-claim .isn-ic > svg {
width: 22px;
height: 22px;
}
}
.isn-home .isn-faq-actions {
display: flex;
justify-content: flex-end;
margin-top: 24px;
}
@media (max-width: 760px) {
.isn-home .isn-hero {
--hero-pad-t: 48px;
}
.isn-home .isn-hero-grid {
grid-template-columns: minmax(0, 1fr);
row-gap: 32px;
}
.isn-home .isn-section--scan .isn-scan-how-step {
grid-template-columns: 48px minmax(0, 1fr);
gap: 14px;
}
.isn-home .isn-section--scan .isn-scan-how-n {
width: 48px;
height: 48px;
font-size: 22px;
}
.isn-home .isn-head > .isn-h,
.isn-home .isn-head > .isn-lead,
.isn-home .isn-scan-pitch > .isn-h,
.isn-home .isn-scan-pitch > .isn-lead {
text-align: center;
}
.isn-home .isn-head > .isn-h,
.isn-home .isn-head > .isn-lead,
.isn-home .isn-scan-pitch > .isn-h,
.isn-home .isn-scan-pitch > .isn-lead {
margin-inline: auto;
}
.isn-home .isn-final {
grid-template-columns: minmax(0, 1fr);
}
.isn-home .isn-final-note {
min-width: 0;
max-width: 100%;
gap: 8px;
}
.isn-home .isn-final-note > span {
min-width: 0;
max-width: 22ch;
}
.isn-home .isn-hero-copy {
text-align: center;
}
.isn-home.isn .isn-hero .isn-eyebrow {
margin-bottom: 24px;
}
.isn-home.isn .isn-hero .isn-hero-h {
font-size: clamp(28px, 10.2cqw, 56px);
line-height: 1.08;
margin-inline: auto;
}
.isn-home.isn .isn-hero .isn-hero-lead {
margin-top: 32px;
margin-inline: auto;
}
.isn-home.isn .isn-hero .isn-hero-ctas {
justify-content: center;
}
.isn-home .isn-cgrid {
justify-self: center;
max-width: 460px;
border-radius: 24px;
}
}
@media (max-width: 480px) {
.isn-home .isn-hero-claims--row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 24px;
}
.isn-home .isn-hero-claims--row .isn-hero-claim {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
align-content: start;
gap: 8px;
font-size: 12px;
white-space: normal;
}
.isn-home.isn .isn-hero .isn-hero-ctas {
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-top: 24px;
}
.isn-home.isn .isn-hero .isn-hero-ctas .isn-btn {
justify-content: center;
min-height: 52px;
padding-inline: 16px;
font-size: 15px;
}
}