body.isn {
--i-ink: #0a0a0a;
--i-white: #ffffff;
--i-paper: #f7f7f4;
--i-grey: #f1f1ef;
--i-line: #e2e2de;
--i-muted: #6f706c;
--i-blue: #2463ff;
--i-blue-soft: #eef3ff;
--i-orange: #ff6a13;
--i-orange-soft: #fff1e7;
--i-yellow: #ffc928;
--i-yellow-soft: #fff8d9;
--i-green: #13a866;
--i-green-soft: #eaf8f1;
--i-red: #ff4d4f;
--i-red-soft: #fff0f0;
--i-strip: #e8f0ff;
--i-strip-fg: #4b4b4b;
--i-field-empty: #939dac;
--i-cta-top: #0d6fee;
--i-cta-bottom: #0d69e0;
--i-cta-top-hover: #0e70f1;
--i-cta-bottom-hover: #0c68de;
--i-cta-cast: color-mix(in srgb, var(--i-blue) 20%, transparent);
--i-display: var(--font-display);
--i-body: var(--font-body);
--i-mono: var(--font-mono);
--i-wordmark: var(--font-wordmark);
--i-track-hero: -0.021em;
--i-track-display: -0.021em;
--i-track-h3: -0.014em;
--i-track-body: 0;
--i-track-label: 0.1em;
--i-lead-hero: 0.95;
--i-lead-display: 0.96;
--i-lead-h3: 1.12;
--i-lead-body: 1.55;
--i-hero: clamp(44px, 12.4cqw, 76px);
--i-h2: var(--t-h2);
--i-h3: var(--t-h3);
--i-lead: var(--t-lead);
--i-body-size: var(--t-body);
--i-small: var(--t-small);
--i-micro: var(--t-mono);
--i-field: var(--i-body-size);
--i-shell: 1800px;
--i-gutter: clamp(20px, 5vw, 56px);
--i-y: clamp(64px, 7.4vw, 118px);
--i-bar: 68px;
--i-strip-h: 38px;
--i-chrome: calc(var(--i-strip-h) + var(--i-bar) + 1px);
--i-r: 20px;
--i-r-sm: 12px;
--i-r-lg: 26px;
background: var(--i-white);
color: var(--i-ink);
font-family: var(--i-body);
font-size: var(--i-body-size);
line-height: var(--i-lead-body);
letter-spacing: var(--i-track-body);
-webkit-font-smoothing: antialiased;
}
body.isn [class*='--blue'] {
--a: var(--i-blue);
--a-soft: var(--i-blue-soft);
--card-fg: var(--i-white);
--a-ink: var(--i-blue);
}
body.isn [class*='--orange'] {
--a: var(--i-orange);
--a-soft: var(--i-orange-soft);
--card-fg: var(--i-ink);
--a-ink: color-mix(in srgb, var(--i-orange) 84%, var(--i-ink));
}
body.isn [class*='--yellow'] {
--a: var(--i-yellow);
--a-soft: var(--i-yellow-soft);
--card-fg: var(--i-ink);
--a-ink: color-mix(in srgb, var(--i-orange) 84%, var(--i-ink));
}
body.isn [class*='--green'] {
--a: var(--i-green);
--a-soft: var(--i-green-soft);
--card-fg: var(--i-ink);
--a-ink: var(--i-green);
}
body.isn [class*='--red'] {
--a: var(--i-red);
--a-soft: var(--i-red-soft);
--card-fg: var(--i-ink);
--a-ink: var(--i-red);
}
body.isn [class*='--grey'] {
--a: var(--i-grey);
--a-soft: var(--i-grey);
--card-fg: var(--i-ink);
}
.isn-shell,
body.isn .nav {
width: 100%;
max-width: var(--i-shell);
margin: 0 auto;
padding: 0 var(--i-gutter);
}
.isn-section {
padding: var(--i-y) 0;
}
.isn-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.isn-eyebrow {
margin: 0 0 18px;
font-family: var(--i-mono);
font-size: var(--t-mono);
font-weight: 500;
letter-spacing: var(--i-track-label);
line-height: 1.4;
color: var(--i-muted);
}
body.isn .eyebrow {
text-transform: none;
}
body.isn .learn-filter-label,
body.isn .learn-count,
body.isn .learn-card-topics li,
body.isn .learn-card-foot,
body.isn .learn-crumbs ol,
body.isn .learn-answer-label,
body.isn .learn-meta,
body.isn .learn-rail-title,
body.isn .learn-check-title,
body.isn .learn-table th,
body.isn .learn-table figcaption,
body.isn .learn-callout-title,
body.isn .sup-field label {
text-transform: none;
}
.isn-h,
.isn-hero-h,
.isn-mission-h,
.isn-final-h,
.isn-outcome-h,
.isn-calc-figure {
font-family: var(--i-display);
font-weight: 800;
letter-spacing: var(--i-track-display);
line-height: var(--i-lead-display);
text-wrap: balance;
}
.isn-h {
margin: 0;
font-size: var(--i-h2);
}
.isn-lead {
max-width: 62ch;
margin: 20px 0 0;
font-size: var(--i-lead);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-head {
margin-bottom: clamp(38px, 4.4vw, 66px);
}
.isn-micro {
margin: 0;
font-size: var(--i-micro);
font-weight: 600;
letter-spacing: var(--i-track-body);
color: var(--i-muted);
}
.isn-btn {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 52px;
padding: 0 26px;
border: 1.5px solid transparent;
border-radius: var(--i-r-sm);
font-family: var(--i-body);
font-size: var(--i-small);
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.isn-btn:hover {
transform: translateY(-1px);
}
.isn-btn[disabled],
.isn-btn:disabled {
cursor: not-allowed;
opacity: 0.45;
transform: none;
}
.isn-btn--solid {
background: var(--i-blue);
border-color: var(--i-blue);
color: var(--i-white);
}
.isn-btn--solid:hover {
background: #1b4fd8;
border-color: #1b4fd8;
}
.isn-btn--quiet {
background: var(--i-white);
border-color: var(--i-line);
color: var(--i-ink);
}
.isn-btn--quiet:hover {
border-color: var(--i-ink);
}
.isn-btn--white {
background: var(--i-white);
border-color: var(--i-white);
color: var(--i-blue);
}
.isn-btn--white:hover {
background: var(--i-blue-soft);
border-color: var(--i-blue-soft);
}
.isn-btn--ghost {
background: transparent;
border-color: color-mix(in srgb, var(--i-white) 55%, transparent);
color: var(--i-white);
}
.isn-btn--ghost:hover {
border-color: var(--i-white);
background: color-mix(in srgb, var(--i-white) 12%, transparent);
}
.isn-btn--bar {
min-height: 44px;
padding: 0 18px;
}
.isn-btn--panel {
width: 100%;
justify-content: center;
margin-top: 18px;
}
.isn-btn-arrow {
flex: none;
margin-top: 1px;
transition: transform var(--dur-fast) var(--ease);
}
.isn-btn:hover .isn-btn-arrow {
transform: translateX(3px);
}
.isn-ic {
display: inline-flex;
flex: none;
color: var(--a, var(--i-blue));
--ic-soft: var(--a-soft, var(--i-blue-soft));
}
.isn-ic > svg {
width: 26px;
height: 26px;
}
.isn-ic--lg > svg {
width: 38px;
height: 38px;
}
.isn-ic--xl > svg {
width: 62px;
height: 62px;
}
.isn-ic--hub > svg {
width: 30px;
height: 30px;
}
.isn-on-accent .isn-ic {
color: var(--card-fg);
--ic-soft: color-mix(in srgb, var(--card-fg) 22%, transparent);
}
.isn-visual {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
width: 100%;
height: var(--visual-h, 132px);
padding: var(--visual-pad, 8px);
box-sizing: border-box;
}
.isn-visual-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.isn-visual--drawn .isn-ic > svg {
width: min(72px, 52%);
height: auto;
aspect-ratio: 1;
}
.isn-visual--drawn .isn-ic {
width: 100%;
justify-content: center;
color: var(--a-ink);
}
.isn-utility {
background: var(--i-strip);
}
.isn-utility-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
min-height: var(--i-strip-h);
}
.isn-utility-claims {
display: flex;
align-items: center;
gap: 26px;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.isn-utility-nav {
display: flex;
align-items: center;
gap: 22px;
}
.isn-utility-claim,
.isn-utility-link,
.isn-lang-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--i-body);
font-size: var(--i-micro);
font-weight: 500;
line-height: 1;
letter-spacing: 0;
color: var(--i-strip-fg);
white-space: nowrap;
}
.isn-utility-link {
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
.isn-utility-link:hover,
.isn-utility-link:focus-visible {
color: var(--i-ink);
}
.isn-utility-mark {
flex: none;
}
body.isn .topbar {
position: sticky;
transform: none;
background: var(--i-white);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid var(--i-line);
color: var(--i-ink);
}
body.isn .skip-link {
text-transform: none;
}
body.isn .mf-hero {
padding-top: clamp(64px, 10vh, 132px);
}
body.isn .sup-hero {
padding-top: clamp(56px, 8vh, 104px);
}
@media (max-width: 720px) {
body.isn .mf-hero {
padding-top: 56px;
}
}
body.isn .nav {
gap: 30px;
min-height: var(--i-bar);
border-top: 0;
}
body.isn .nav-end {
gap: 18px;
}
.isn-nav-mobile-join {
display: none;
}
@media (max-width: 1199px) {
body.isn .nav,
body.isn .nav-end {
gap: 8px;
}
body.isn .nav-end > .isn-btn--bar {
display: none;
}
body.isn .isn-nav-mobile-join {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 8px;
border: 1.5px solid currentColor;
border-radius: 4px;
background: var(--i-white);
color: var(--i-ink);
font-family: var(--i-body);
font-size: 13px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
body.isn .isn-nav-mobile-join:hover {
background: var(--i-paper);
}
}
@media (max-width: 480px) {
body.isn .nav .isn-brand {
gap: 6px;
}
body.isn .nav .isn-brand > .isn-mark {
height: clamp(22px, calc(10vw - 11px), 34px);
}
body.isn .nav .isn-brand-name {
font-size: clamp(12.5px, calc(10vw - 22px), 21px);
}
}
@media (max-width: 359px) {
body.isn .nav {
padding-inline: 16px;
gap: 6px;
}
body.isn .nav-end {
gap: 6px;
}
body.isn .isn-nav-mobile-join {
padding-inline: 6px;
font-size: 12px;
}
}
.isn-brand {
display: inline-flex;
align-items: center;
gap: 11px;
margin-right: auto;
color: inherit;
text-decoration: none;
}
.isn-mark {
display: inline-block;
flex: none;
height: 34px;
aspect-ratio: 512 / 464;
background-image: url('../assets/logo-mark-isn.png');
background-image: image-set(
url('../assets/logo-mark-isn.webp') type('image/webp'),
url('../assets/logo-mark-isn.png') type('image/png')
);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.isn-brand-name {
font-family: var(--i-wordmark);
font-size: 21px;
font-weight: 700;
line-height: 0.86;
letter-spacing: -0.025em;
white-space: nowrap;
}
.isn-brand-name > span {
display: block;
}
body.isn .nav-links a {
color: var(--i-muted);
}
body.isn .nav-links a:hover,
body.isn .nav-links a[aria-current='page'] {
color: var(--i-ink);
}
.isn-nav-login {
font-family: var(--i-mono);
font-size: var(--t-mono);
font-weight: 500;
letter-spacing: 0.08em;
color: var(--i-muted);
text-decoration: none;
}
.isn-nav-login:hover {
color: var(--i-ink);
}
body.isn .nav-toggle {
justify-content: center;
flex: none;
width: 40px;
height: 40px;
min-height: 40px;
padding: 0;
gap: 0;
border: 1.5px solid currentColor;
border-radius: 4px;
background: var(--i-white);
color: var(--i-ink);
}
body.isn .nav-toggle-bars {
flex: none;
width: 20px;
height: 2px;
background: currentColor;
}
body.isn .nav-toggle-bars::before,
body.isn .nav-toggle-bars::after {
height: 2px;
}
body.isn .nav-toggle-bars::before {
top: -6px;
}
body.isn .nav-toggle-bars::after {
bottom: -6px;
}
body.isn .nav-toggle[aria-expanded='true'] .nav-toggle-bars {
background: transparent;
}
body.isn .nav-toggle[aria-expanded='true'] .nav-toggle-bars::before {
transform: translateY(6px) rotate(45deg);
}
body.isn .nav-toggle[aria-expanded='true'] .nav-toggle-bars::after {
transform: translateY(-6px) rotate(-45deg);
}
@media (forced-colors: active) {
body.isn .nav-toggle-bars,
body.isn .nav-toggle-bars::before,
body.isn .nav-toggle-bars::after {
color: ButtonText;
forced-color-adjust: none;
}
}
body.isn .nav-panel {
padding: 6px var(--i-gutter) 24px;
background: var(--i-white);
border-top: 1px solid var(--i-line);
}
body.isn .nav-panel a {
color: var(--i-ink);
border-bottom: 1px solid var(--i-line);
}
body.isn .nav-panel .isn-btn {
display: inline-flex;
border-bottom-width: 1.5px;
border-bottom-color: var(--i-blue);
color: var(--i-white);
}
body.isn .nav-panel .isn-btn:hover {
border-bottom-color: #1b4fd8;
}
body.isn .nav-drop-toggle {
color: var(--i-muted);
}
body.isn .nav-drop-toggle:hover,
body.isn .nav-drop[open] > .nav-drop-toggle {
color: var(--i-ink);
}
body.isn .nav-drop-menu {
border-color: var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
}
body.isn .nav-drop-list a {
color: var(--i-ink);
}
body.isn .nav-drop-list a:hover {
background: var(--i-blue-soft);
}
body.isn .nav-drop-all {
border-top-color: var(--i-line);
letter-spacing: var(--i-track-label);
text-transform: none;
color: var(--i-muted);
}
body.isn .nav-drop-all:hover {
color: var(--i-ink);
}
body.isn .nav-links .nav-drop-menu {
max-height: calc(100vh - var(--i-chrome) - 18px);
max-height: calc(100dvh - var(--i-chrome) - 18px);
overflow-y: auto;
overscroll-behavior: contain;
}
.isn-nav-menu--cats,
.isn-nav-menu--branches {
width: 532px;
}
.isn-nav-groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px 8px;
}
body.isn .nav-links .isn-nav-groups {
display: flex;
flex-flow: column wrap;
align-content: flex-start;
max-height: 740px;
}
body.isn .nav-links .isn-nav-group {
flex: none;
width: calc(50% - 4px);
}
body.isn .nav-links .isn-nav-group:nth-child(2) {
order: 1;
}
body.isn .nav-links .isn-nav-group:nth-child(4) {
order: 2;
}
body.isn .nav-links .isn-nav-group:nth-child(5) {
order: 3;
}
.isn-nav-group .nav-drop-list {
grid-template-columns: minmax(0, 1fr);
}
.isn-nav-group .nav-drop-list a,
.isn-nav-branches a {
display: flex;
align-items: center;
gap: 10px;
}
.isn-nav-mark {
display: grid;
place-items: center;
flex: none;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--a-soft);
}
.isn-nav-mark img {
width: 24px;
height: 24px;
object-fit: contain;
}
.isn-nav-mark .isn-ic > svg {
width: 20px;
height: 20px;
}
.isn-nav-group-title {
margin: 0 0 3px;
padding: 0 9px;
font-family: var(--i-mono);
font-size: var(--t-mono-sm);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: var(--i-muted);
}
body.isn .nav-panel .nav-drop-toggle {
color: var(--i-ink);
}
body.isn .nav-panel .isn-nav-groups {
grid-template-columns: minmax(0, 1fr);
gap: 4px;
}
body.isn .nav-panel .isn-nav-group-title {
padding: 12px 0 0;
}
body.isn .nav-links .isn-nav-branches {
grid-template-rows: repeat(8, auto);
grid-auto-flow: column;
}
.isn-nav-soon {
display: block;
padding: 7px 9px;
font-size: 14px;
line-height: 1.4;
white-space: nowrap;
color: var(--i-muted);
}
body.isn .nav-panel .isn-nav-soon {
padding: 12px 0;
border-bottom: 1px solid var(--i-line);
font-size: var(--i-body-size);
font-weight: 500;
white-space: normal;
}
.isn-nav-note {
margin: 10px 9px 0;
font-size: var(--i-micro);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
body.isn .nav-panel .isn-nav-note {
margin: 12px 0 0;
}
.isn-hero {
--hero-pad-t: clamp(14px, 1.9vh, 24px);
--hero-pad-b: clamp(16px, 2.1vh, 26px);
padding: var(--hero-pad-t) 0 var(--hero-pad-b);
}
.isn-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(520px, 47vw, 700px));
grid-template-rows: minmax(0, 1fr) auto;
column-gap: clamp(28px, 3vw, 44px);
row-gap: clamp(14px, 1.8vh, 22px);
align-items: center;
}
.isn-hero-grid:has(> .isn-hero-steps) {
min-height: calc(100vh - var(--i-chrome) - var(--hero-pad-t));
min-height: calc(100svh - var(--i-chrome) - var(--hero-pad-t));
}
.isn-hero-copy {
min-width: 0;
container-type: inline-size;
}
.isn-hero-grid:has(> .isn-hero-steps) .isn-eyebrow {
color: var(--i-blue);
}
.isn-hero-h {
margin: 0;
font-size: var(--i-hero);
font-weight: 800;
letter-spacing: var(--i-track-hero);
line-height: var(--i-lead-hero);
}
.isn-hero-line {
display: block;
}
.isn-h-line {
display: block;
}
.isn-hero-lead {
max-width: 46ch;
margin: clamp(24px, 2.4vw, 34px) 0 0;
font-size: var(--i-lead);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-eyebrow {
margin-bottom: 14px;
font-size: clamp(12px, 1.11vw, 16px);
text-transform: none;
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-h {
font-size: clamp(44px, 11.5cqw, 70px);
}
@media not all and (max-width: 1200px) {
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-h {
width: max(100%, 9.75em);
}
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-lead {
margin-top: clamp(18px, 1.8vw, 26px);
font-size: clamp(16px, 1.2vw, 17.5px);
}
.isn-final-note {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 18px 0 0;
font-size: var(--i-small);
font-weight: 600;
color: var(--i-muted);
}
.isn-hand-arrow {
flex: none;
width: 46px;
height: 32px;
color: var(--i-yellow);
transform: rotate(-8deg) scaleX(-1);
}
.isn-hand-arrow--up {
color: var(--i-blue);
transform: rotate(6deg);
}
.isn-final-note > span {
max-width: 34ch;
padding-top: 6px;
}
.isn-hero-claims {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 24px);
margin: clamp(26px, 2.6vw, 36px) 0 0;
padding: 0;
list-style: none;
}
.isn-hero-claim {
display: grid;
gap: 10px;
font-size: var(--i-small);
font-weight: 700;
line-height: 1.3;
}
.isn-hero-claims--row {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: start;
gap: 18px 32px;
margin: clamp(28px, 2.3vw, 34px) 0 0;
}
.isn-hero-claims--row .isn-hero-claim {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
justify-items: start;
gap: 13px;
white-space: nowrap;
}
.isn-hero-claim .isn-ic {
color: var(--i-ink);
}
.isn-hero-claims--row .isn-claim-img,
.isn-hero-claims--row .isn-ic > svg {
width: 34px;
height: 34px;
}
.isn-claim-img {
width: 38px;
height: 38px;
object-fit: contain;
}
.isn-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: clamp(24px, 2vw, 28px) 0 0;
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-ctas {
gap: 14px;
margin-top: clamp(18px, 1.55vw, 22px);
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-ctas .isn-btn {
min-height: 60px;
padding: 0 28px;
border-radius: 16px;
font-size: 17px;
gap: 14px;
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-ctas .isn-btn-arrow {
width: 17px;
height: 17px;
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-ctas .isn-btn--solid {
border: none;
background-color: #0f71f1;
background-image: none;
box-shadow: 0 3px 12px var(--i-cta-cast);
transition:
box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-ctas .isn-btn--solid:hover {
box-shadow: 0 5px 14px var(--i-cta-cast);
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-ctas .isn-btn--quiet {
border: 2px solid #e0e0e0;
color: #111111;
box-shadow: none;
}
.isn-hero:not(.isn-hero--cat):not(.isn-hero--scan) .isn-hero-ctas .isn-btn--quiet:hover {
border-color: #111111;
}
.isn-hero-steps {
grid-column: 1 / -1;
list-style: none;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto auto;
column-gap: clamp(30px, 3.6vw, 56px);
row-gap: 8px;
margin: 0;
padding: clamp(26px, 3.1vh, 28px) 0 clamp(18px, 2.8vh, 26px);
border-top: 1px solid var(--i-line);
}
.isn-hero-step {
position: relative;
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
}
.isn-hero-step + .isn-hero-step::before {
content: '';
position: absolute;
left: calc(-0.5 * clamp(30px, 3.6vw, 56px));
top: 1px;
bottom: 2px;
width: 1px;
background: var(--i-line);
}
.isn-hero-step-title {
--step-name: clamp(19px, 1.55vw, 23px);
display: flex;
align-items: start;
gap: 12px;
margin: 0;
font-family: var(--i-display);
font-size: var(--step-name);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
color: var(--i-ink);
}
.isn-hero-step-n {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin-top: calc((var(--i-lead-h3) * var(--step-name) - 32px) / 2);
border-radius: 50%;
background: var(--a-soft);
font-size: 15px;
font-weight: 700;
line-height: 1;
color: var(--a-ink);
}
.isn-hero-step-body {
max-width: 30em;
margin: 0;
font-size: clamp(14.5px, 1.1vw, 16px);
line-height: 1.5;
color: var(--i-muted);
}
.isn-cgrid {
--cc-gap: clamp(11px, 2.4vh, 22px);
--cc-block: clamp(410.7px, calc(22.159vw + 121.53px), 442.8px);
container-type: size;
align-self: stretch;
display: grid;
place-items: center end;
min-width: 0;
}
.isn-cgrid-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: var(--cc-gap);
width: min(100cqw, 100cqh, var(--cc-block));
height: min(100cqw, 100cqh, var(--cc-block));
margin: 0;
padding: 0;
list-style: none;
}
.isn-cc {
--cc-pad: clamp(10px, 5.4cqw, 18px);
--cc-vis: clamp(46px, 43cqw, 128px);
--visual-h: var(--cc-vis);
--visual-pad: 0px;
--cc-name: clamp(12px, 5.4cqw, 17px);
--cc-tile: clamp(28px, 17.6cqw, 55px);
--cc-slab-h: calc(var(--cc-tile) * 1.34);
--cc-tgap: clamp(4px, 3.8cqw, 12px);
--cc-lap: calc(var(--cc-tile) * 0.09);
--cc-merge: calc(var(--cc-tgap) + var(--cc-lap));
--cc-slab-w: calc(var(--cc-tile) * 4 - var(--cc-lap) * 3);
--cc-tr: calc(var(--cc-tile) * 0.26);
--cc-r: clamp(14px, 7.7cqw, 24px);
--cc-pr: clamp(10px, 6cqw, 19px);
container-type: inline-size;
display: grid;
min-width: 0;
min-height: 0;
transition: opacity 420ms var(--ease);
}
.isn-cc[data-swap] {
opacity: 0;
}
.isn-cc-body {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: clamp(5px, 3cqw, 12px);
min-height: 0;
padding: var(--cc-pad);
overflow: hidden;
border: 1px solid rgb(0 0 0 / 4%);
border-radius: var(--cc-r);
background: color-mix(in srgb, var(--i-paper) 34%, var(--i-white));
box-shadow:
0 12px 30px rgb(10 10 10 / 6%),
0 3px 8px rgb(10 10 10 / 3%);
}
.isn-cc-top {
display: grid;
justify-items: center;
gap: clamp(3px, 2.2cqw, 8px);
min-width: 0;
}
.isn-cc-name {
font-size: var(--cc-name);
font-weight: 700;
line-height: 1.2;
letter-spacing: var(--i-track-h3);
color: var(--i-ink);
text-align: center;
}
.isn-cc-low {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
align-items: center;
min-height: 0;
}
.isn-cc-crowd {
grid-area: 1 / 1;
display: flex;
align-items: stretch;
justify-content: center;
gap: var(--cc-tgap);
}
.isn-cc-tile {
display: grid;
align-content: center;
justify-items: center;
gap: calc(var(--cc-tile) * 0.03);
width: var(--cc-tile);
height: var(--cc-slab-h);
padding: calc(var(--cc-tile) * 0.08) calc(var(--cc-tile) * 0.05);
border: 1px solid var(--i-line);
border-radius: var(--cc-tr);
background: var(--i-white);
box-shadow: 0 2px 6px rgb(10 10 10 / 6%);
transition:
opacity 300ms var(--ease),
transform 420ms var(--ease),
border-radius 420ms var(--ease),
box-shadow 300ms var(--ease) 260ms,
border-color 300ms var(--ease) 260ms,
background-color 260ms var(--ease) 560ms;
}
.isn-cc-bm {
width: calc(var(--cc-tile) * 0.8);
height: auto;
object-fit: contain;
transition: opacity 300ms var(--ease);
}
.isn-cc-spend {
font-size: clamp(8px, 4.1cqw, 12px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.015em;
color: var(--i-ink);
font-variant-numeric: tabular-nums;
transition: opacity 220ms var(--ease);
}
.isn-cc-tile--more {
background: var(--i-grey);
box-shadow: none;
}
.isn-cc-more {
font-size: clamp(9px, 4.7cqw, 14px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.02em;
color: var(--i-muted);
font-variant-numeric: tabular-nums;
transition: opacity 300ms var(--ease);
}
.isn-cc[data-grow='0'] .isn-cc-tile,
.isn-cc[data-grow='1'] .isn-cc-tile:nth-child(n + 2),
.isn-cc[data-grow='2'] .isn-cc-tile:nth-child(n + 3),
.isn-cc[data-grow='3'] .isn-cc-tile:nth-child(n + 4) {
opacity: 0;
transform: translateY(7px) scale(0.92);
}
.isn-cc[data-state] .isn-cc-tile {
border-color: transparent;
background-color: transparent;
box-shadow: none;
}
.isn-cc[data-state] .isn-cc-tile:nth-child(1) {
transform: translateX(calc(var(--cc-merge) * 1.5));
border-radius: var(--cc-tr) 0 0 var(--cc-tr);
}
.isn-cc[data-state] .isn-cc-tile:nth-child(2) {
transform: translateX(calc(var(--cc-merge) * 0.5));
border-radius: 0;
}
.isn-cc[data-state] .isn-cc-tile:nth-child(3) {
transform: translateX(calc(var(--cc-merge) * -0.5));
border-radius: 0;
}
.isn-cc[data-state] .isn-cc-tile:nth-child(4) {
transform: translateX(calc(var(--cc-merge) * -1.5));
border-radius: 0 var(--cc-tr) var(--cc-tr) 0;
}
.isn-cc[data-state] .isn-cc-spend {
opacity: 0;
}
.isn-cc[data-state] .isn-cc-bm,
.isn-cc[data-state] .isn-cc-more {
opacity: 0;
transition-delay: 240ms;
}
.isn-cc-panel {
grid-area: 1 / 1;
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
width: 100%;
height: 100%;
min-height: 0;
pointer-events: none;
}
.isn-cc-glow {
display: none;
}
.isn-cc[data-state='bundle'] .isn-cc-glow {
animation: isn-cc-unlock 760ms var(--ease) 300ms 1 both;
}
@keyframes isn-cc-unlock {
0% {
opacity: 0;
transform: scale(0.74);
}
42% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.05);
}
}
.isn-cc-plate {
grid-area: 1 / 1;
position: relative;
place-self: center;
width: var(--cc-slab-w);
height: var(--cc-slab-h);
overflow: hidden;
border-radius: var(--cc-tr);
background-color: var(--i-white);
background-image: radial-gradient(120% 96% at 50% 12%, rgb(255 255 255 / 72%), transparent 62%);
box-shadow: none;
opacity: 0;
transition:
opacity 240ms var(--ease) 320ms,
width 400ms var(--ease) 480ms,
height 400ms var(--ease) 480ms,
border-radius 400ms var(--ease) 480ms,
background-color 400ms var(--ease) 480ms,
box-shadow 400ms var(--ease) 480ms;
}
.isn-cc[data-state] .isn-cc-plate {
width: 100%;
height: 100%;
border-radius: var(--cc-pr);
background-color: #f1fbf5;
opacity: 1;
}
.isn-cc[data-state='deal'] .isn-cc-plate {
width: 56%;
height: 46%;
box-shadow: none;
opacity: 0;
transition:
width 420ms var(--ease),
height 420ms var(--ease),
border-radius 420ms var(--ease),
opacity 380ms var(--ease) 60ms,
box-shadow 300ms var(--ease);
}
.isn-cc-plate::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 62%) 50%, transparent 68%);
opacity: 0;
}
.isn-cc[data-state='bundle'] .isn-cc-plate::after {
animation: isn-cc-sweep 760ms var(--ease) 620ms 1 both;
}
@keyframes isn-cc-sweep {
0% {
opacity: 0;
transform: translateX(-64%);
}
28% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(64%);
}
}
.isn-cc-bundle {
grid-area: 1 / 1;
position: relative;
place-self: center;
display: grid;
justify-items: center;
align-content: center;
gap: clamp(1px, 1.1cqw, 4px);
min-width: 0;
padding: 0 calc(var(--cc-pad) * 0.4);
}
.isn-cc-lockup,
.isn-cc-vol,
.isn-cc-cap {
opacity: 0;
transform: translateY(5px);
transition:
opacity 300ms var(--ease),
transform 300ms var(--ease);
}
.isn-cc[data-state='bundle'] :is(.isn-cc-lockup, .isn-cc-vol, .isn-cc-cap) {
opacity: 1;
transform: none;
}
.isn-cc[data-state='bundle'] .isn-cc-vol {
transition-delay: 460ms;
}
.isn-cc[data-state='bundle'] .isn-cc-lockup {
transition-delay: 760ms;
}
.isn-cc[data-state='bundle'] .isn-cc-cap {
transition-delay: 880ms;
}
.isn-cc[data-state='deal'] :is(.isn-cc-lockup, .isn-cc-vol, .isn-cc-cap) {
opacity: 0;
transform: translateY(-6px);
}
.isn-cc-lockup {
display: flex;
align-items: center;
gap: clamp(3px, 1.9cqw, 6px);
max-width: 100%;
}
.isn-cc-lockup .isn-mark {
height: clamp(13px, 7cqw, 22px);
}
.isn-cc-wm {
display: grid;
font-family: var(--i-wordmark);
font-size: clamp(6px, 2.95cqw, 9.5px);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--i-ink);
text-align: left;
white-space: nowrap;
}
@container (max-width: 210px) {
.isn-cc-wm {
display: none;
}
}
.isn-cc-vol {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
}
.isn-cc-vt {
grid-area: 1 / 1;
font-family: var(--i-display);
font-size: clamp(15px, 8.8cqw, 28px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--i-ink);
font-variant-numeric: tabular-nums;
white-space: nowrap;
opacity: 0;
transition: opacity 200ms var(--ease);
}
.isn-cc-vt--total {
font-size: clamp(18px, 11.2cqw, 36px);
}
.isn-cc:not([data-vol]) .isn-cc-vt--total,
.isn-cc[data-vol='1'] .isn-cc-vt:nth-child(1),
.isn-cc[data-vol='2'] .isn-cc-vt:nth-child(2),
.isn-cc[data-vol='3'] .isn-cc-vt:nth-child(3),
.isn-cc[data-vol='4'] .isn-cc-vt:nth-child(4),
.isn-cc[data-vol='5'] .isn-cc-vt:nth-child(5),
.isn-cc[data-vol='6'] .isn-cc-vt:nth-child(6) {
opacity: 1;
}
.isn-cc-cap {
font-size: clamp(7px, 3.7cqw, 11px);
font-weight: 600;
line-height: 1;
letter-spacing: 0.03em;
color: color-mix(in srgb, var(--i-green) 52%, #4a4a46);
}
.isn-cc-deal {
grid-area: 1 / 1;
position: relative;
place-self: center;
display: grid;
justify-items: center;
align-content: center;
gap: clamp(2px, 1.6cqw, 6px);
min-width: 0;
}
.isn-cc-kicker {
font-size: clamp(6.5px, 3.4cqw, 10.5px);
font-weight: 700;
line-height: 1.1;
letter-spacing: var(--i-track-label);
color: color-mix(in srgb, var(--i-green) 66%, #000);
text-align: center;
opacity: 0;
transform: translateY(4px);
transition:
opacity 260ms var(--ease),
transform 260ms var(--ease);
}
.isn-cc-pct {
font-family: var(--i-display);
font-size: clamp(24px, 17cqw, 52px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.035em;
color: color-mix(in srgb, var(--i-green) 88%, #000);
font-variant-numeric: tabular-nums;
opacity: 0;
transform: scale(0.94);
transition:
opacity 300ms var(--ease),
transform 340ms var(--ease);
}
.isn-cc[data-state='deal'] .isn-cc-pct {
opacity: 1;
transform: none;
transition-delay: 300ms;
}
.isn-cc[data-state='deal'] .isn-cc-kicker {
opacity: 1;
transform: none;
transition-delay: 480ms;
}
.isn-cgrid[data-cc-init] .isn-cc-body,
.isn-cgrid[data-cc-init] .isn-cc-body *,
.isn-cgrid[data-cc-init] .isn-cc-body *::after {
transition: none;
animation: none;
}
.isn-cc .isn-visual--drawn .isn-ic {
color: color-mix(in srgb, var(--i-ink) 78%, var(--i-white));
--ic-soft: var(--a-soft);
}
.isn-cc .isn-visual--drawn .isn-ic > svg {
width: calc(var(--visual-h) * 0.64);
height: calc(var(--visual-h) * 0.64);
}
.isn-scan {
padding: clamp(13px, 1.4vw, 16px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
box-shadow:
0 1px 2px rgb(10 10 10 / 5%),
0 20px 44px -26px rgb(10 10 10 / 18%);
}
.isn-section--scan {
background: var(--i-paper);
padding: clamp(64px, 7.4vw, 108px) 0;
}
.isn-scan-grid {
display: grid;
grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
gap: var(--i-gutter);
align-items: start;
}
.isn-scan-pitch .isn-h {
font-size: min(var(--i-h2), 46px);
}
.isn-scan-how {
margin-top: clamp(24px, 2.5vw, 36px);
}
.isn-scan-how-label {
margin: 0 0 12px;
font-family: var(--i-mono);
font-size: var(--t-mono);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: var(--i-muted);
}
.isn-scan-how-steps {
display: grid;
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--i-body-size);
font-weight: 600;
letter-spacing: var(--i-track-body);
color: var(--i-ink);
}
.isn-scan-how-text {
display: grid;
gap: 8px;
}
.isn-scan-how-body {
max-width: 34em;
font-size: clamp(14.5px, 1.1vw, 16px);
font-weight: 400;
line-height: 1.5;
color: var(--i-muted);
}
.isn-scan-how-step {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 16px;
align-items: start;
}
.isn-scan-how-n {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--n-fill, var(--a, var(--i-blue)));
font-size: 24px;
font-weight: 700;
color: var(--i-white);
}
.isn-scan-how-n--orange {
--n-fill: color-mix(in srgb, var(--i-orange) 97%, var(--i-ink));
}
.isn-scan-benefits {
display: grid;
gap: 10px;
margin: clamp(22px, 2.4vw, 30px) 0 0;
padding: 0;
list-style: none;
}
.isn-scan-benefit {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 12px;
align-items: start;
font-size: var(--i-body-size);
font-weight: 600;
letter-spacing: var(--i-track-body);
}
.isn-scan-tick {
display: grid;
margin-top: 3px;
place-items: center;
justify-self: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--i-green-soft);
color: var(--i-green);
}
.isn-scan-foot {
display: flex;
align-items: flex-end;
margin-top: clamp(20px, 2.2vw, 26px);
}
.isn-scan-pitch .isn-scan-note {
margin: -30px calc(var(--i-gutter) * -0.95) 0 auto;
}
.isn-scan-note .isn-hand-arrow--scan {
width: 112px;
height: 78px;
}
.isn-steps-bar {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin: 0 0 clamp(8px, 0.8vw, 10px);
padding: 0;
list-style: none;
font-size: var(--i-micro);
font-weight: 700;
letter-spacing: 0.02em;
color: var(--i-muted);
}
.isn-stepdot {
display: flex;
align-items: center;
gap: 7px;
}
.isn-stepdot > span {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--i-grey);
color: var(--i-muted);
font-size: 11px;
transition:
background-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-stepdot[data-on='true'] {
color: var(--i-ink);
}
.isn-stepdot[data-on='true'] > span {
background: var(--i-blue);
color: var(--i-white);
}
.isn-stepdot[data-done='true'] > span {
background: var(--i-green);
color: var(--i-white);
}
.isn-step {
margin: 0;
padding: 0;
border: 0;
}
.isn-step-title {
display: block;
margin: 0;
padding: 0;
font-family: var(--i-display);
font-size: var(--i-h3);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-step-title--sub {
margin-top: clamp(16px, 1.8vw, 22px);
font-size: var(--i-lead);
}
.isn-step-hint {
max-width: 58ch;
margin: 6px 0 0;
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-chip {
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 4px 10px;
border: 1.5px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease),
background-color var(--dur-fast) var(--ease);
}
.isn-chip:hover {
border-color: var(--i-muted);
}
.isn-chip input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
}
.isn-chip:has(input:checked) {
border-color: var(--i-blue);
background: var(--i-blue-soft);
}
.isn-chip:has(input:focus-visible) {
outline: 2px solid var(--i-ink);
outline-offset: 3px;
}
.isn-chip[hidden] {
display: none;
}
.isn-chip-name {
font-size: var(--i-small);
font-weight: 600;
line-height: 1.2;
}
.isn-chip-mark {
position: relative;
display: grid;
flex: none;
width: 28px;
height: 28px;
place-items: center;
}
.isn-chip-mark > * {
grid-area: 1 / 1;
transition: opacity var(--dur-fast) var(--ease);
}
.isn-chip .isn-ic > svg {
width: 24px;
height: 24px;
}
.isn-chip-img {
width: 28px;
height: 28px;
object-fit: contain;
}
.isn-chip-tick {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--i-blue);
color: var(--i-white);
opacity: 0;
}
.isn-chip input:checked ~ .isn-chip-mark .isn-ic,
.isn-chip input:checked ~ .isn-chip-mark .isn-chip-img {
opacity: 0;
}
.isn-chip input:checked ~ .isn-chip-mark .isn-chip-tick {
opacity: 1;
}
.isn-chip-tick > svg {
width: 14px;
height: 14px;
}
.isn-chips-empty {
margin: 12px 0 0;
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin-top: clamp(14px, 1.4vw, 18px);
}
.isn-field {
display: block;
}
.isn-field--wide {
grid-column: 1 / -1;
}
.isn-field--search {
max-width: 440px;
margin-top: 8px;
}
.isn-field-label {
display: block;
font-size: var(--i-small);
font-weight: 700;
}
.isn-field-opt {
font-weight: 500;
color: var(--i-muted);
}
.isn-field-hint {
display: block;
margin-top: 3px;
font-size: var(--i-micro);
color: var(--i-muted);
}
.isn-input {
display: block;
width: 100%;
min-height: 48px;
margin-top: 6px;
padding: 0 14px;
border: 1.5px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
font-family: var(--i-body);
font-size: var(--i-field);
color: var(--i-ink);
}
select.isn-input {
-webkit-appearance: none;
appearance: none;
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236f706c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 12px 8px;
background-position: right 16px center;
}
@media (forced-colors: active) {
select.isn-input {
-webkit-appearance: auto;
appearance: auto;
background-image: none;
}
}
.isn-input:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 1px;
border-color: var(--i-blue);
}
.isn-input[aria-invalid='true'] {
border-color: var(--i-red);
}
.isn-field-problem {
display: block;
margin-top: 6px;
font-size: var(--i-micro);
font-weight: 600;
color: #d43b3d;
}
.isn-consent {
max-width: 62ch;
margin-top: 12px;
}
.isn-step-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: clamp(14px, 1.5vw, 20px);
}
.isn-step-actions .isn-micro {
margin-right: auto;
}
.isn-step-cta {
display: grid;
gap: 6px;
margin-top: clamp(8px, 0.9vw, 10px);
}
.isn-btn--block {
width: 100%;
min-height: 46px;
justify-content: center;
}
.isn-micro--under {
text-align: center;
}
.isn-outcome {
padding: clamp(14px, 1.6vw, 18px);
border-radius: var(--i-r);
background: var(--i-green-soft);
--a: var(--i-green);
--a-soft: #d5f0e3;
}
.isn-outcome .isn-eyebrow {
margin-bottom: 10px;
color: #0d7a4a;
}
.isn-outcome-h {
margin: 0;
font-size: var(--i-h3);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-outcome-body {
max-width: 62ch;
margin: 10px 0 0;
font-size: var(--i-small);
color: #3f5c4e;
}
.isn-outcome-label {
margin: 14px 0 8px;
font-family: var(--i-mono);
font-size: var(--t-mono);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: #3f5c4e;
}
.isn-outcome-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.isn-outcome-chips li {
padding: 7px 13px;
border-radius: var(--r-pill);
background: var(--i-white);
font-size: var(--i-micro);
font-weight: 700;
}
.isn-scan-report {
margin: 16px 0 0;
font-size: var(--i-small);
font-weight: 600;
}
.isn-scan-report[data-tone='error'] {
color: #d43b3d;
}
.isn-scan-or {
display: flex;
align-items: center;
gap: 16px;
margin: clamp(20px, 2vw, 26px) 0 14px;
font-family: var(--i-mono);
font-size: var(--t-mono);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: var(--i-muted);
}
.isn-scan-or::before,
.isn-scan-or::after {
content: '';
flex: 1;
height: 1px;
background: var(--i-line);
}
.isn-scan-book {
margin: 0;
font-size: var(--i-small);
font-weight: 700;
}
.isn-scan-book a {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--i-blue);
text-decoration: none;
}
.isn-scan-book a:hover {
text-decoration: underline;
}
.isn-scan-done {
display: grid;
justify-items: start;
gap: 16px;
--a: var(--i-green);
--a-soft: var(--i-green-soft);
}
.isn-scan--compact .isn-steps-bar {
display: none;
}
.isn-scan--compact .isn-scan-form:has([data-step='1'][hidden]) .isn-steps-bar {
display: flex;
}
.isn-scan--compact {
padding: clamp(13px, 2.5vw, 36px);
}
.isn-scan-pill {
display: inline-flex;
align-items: center;
margin: 0 0 clamp(10px, 1.67vw, 24px);
padding: 8px 17px;
border-radius: 999px;
background: color-mix(in srgb, var(--i-green) 15%, #fff);
font-family: var(--i-mono);
font-size: clamp(12px, 0.97vw, 14px);
font-weight: 500;
letter-spacing: var(--i-track-label);
line-height: 1.4;
color: color-mix(in srgb, var(--i-green) 60%, #000);
}
.isn-step--compact .isn-step-title {
font-size: clamp(20px, 2.15vw, 31px);
}
.isn-step--compact .isn-step-hint {
font-size: clamp(14px, 1.21vw, 17.5px);
}
.isn-step--compact .isn-field-label {
font-size: clamp(14px, 1.15vw, 16.5px);
}
.isn-step--compact .isn-step-cta {
margin-top: clamp(10px, 2.36vw, 34px);
}
.isn-step--compact .isn-btn--block {
min-height: 60px;
font-size: clamp(14px, 1.32vw, 19px);
gap: 1.06em;
border-color: transparent;
background-color: var(--i-blue);
background-image: linear-gradient(to bottom, var(--i-cta-top), var(--i-cta-bottom));
box-shadow: 0 3px 12px var(--i-cta-cast);
transition:
box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.isn-step--compact .isn-btn--block .isn-btn-arrow {
width: 1.22em;
height: 1.22em;
}
.isn-step--compact .isn-btn--block:hover:not(:disabled) {
transform: translateY(-2px);
background-image: linear-gradient(
to bottom,
var(--i-cta-top-hover),
var(--i-cta-bottom-hover)
);
box-shadow: 0 5px 14px var(--i-cta-cast);
}
.isn-step--compact .isn-btn--block:active:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 1px 6px var(--i-cta-cast);
}
.isn-step--compact .isn-btn--block:focus-visible {
border-radius: var(--i-r-sm);
outline-color: var(--i-ink);
}
.isn-step--compact .isn-micro--under {
font-size: clamp(12px, 1.11vw, 16px);
}
.isn-input--lg {
min-height: 56px;
font-size: var(--i-lead);
}
.isn-field--url {
margin-top: clamp(16px, 2.64vw, 38px);
}
.isn-field--branche {
margin-top: clamp(16px, 2.64vw, 38px);
}
.isn-field--branche .isn-input {
min-height: 56px;
font-size: var(--i-lead);
}
.isn-field--url,
.isn-field--branche {
--i-field-mark-inset: clamp(12px, 1.39vw, 20px);
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.isn-field--url > .isn-field-mark,
.isn-field--url > .isn-input,
.isn-field--branche > .isn-field-mark,
.isn-field--branche > .isn-input {
grid-row: 2;
grid-column: 1;
}
.isn-field-mark {
align-self: start;
z-index: 1;
display: flex;
align-items: center;
height: 56px;
margin-top: 6px;
padding-left: var(--i-field-mark-inset);
pointer-events: none;
}
.isn-field-mark img {
display: block;
width: 24px;
height: 24px;
}
.isn-field--url > .isn-input,
.isn-field--branche > .isn-input {
padding-left: calc(24px + 2 * var(--i-field-mark-inset));
}
.isn-field--url .isn-input::placeholder {
opacity: 1;
color: var(--i-field-empty);
}
.isn-field--branche .isn-input:has(option[value='']:checked) {
color: var(--i-field-empty);
}
.isn-chiprow-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: clamp(12px, 1.4vw, 16px);
}
.isn-chiprow-arrows .isn-rail-arrow {
width: 30px;
height: 30px;
}
.isn-chiprow-arrows .isn-rail-arrow > svg {
width: 13px;
height: 13px;
}
.isn-scan .isn-step {
min-width: 0;
}
.isn-chiprow {
display: flex;
gap: 8px;
margin: clamp(8px, 0.9vw, 10px) 0 0;
padding: 5px 1px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: none;
user-select: none;
}
.isn-chiprow::-webkit-scrollbar {
display: none;
}
.isn-chiprow .isn-chip {
flex: none;
min-height: 54px;
padding: 6px 12px;
}
.isn-chiprow--rows {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
align-items: start;
}
.isn-chiprow--rows .isn-chip {
min-height: 46px;
}
.isn-chiprow .isn-chip-name {
white-space: nowrap;
}
.isn-chiprow[data-dragging] {
cursor: grabbing;
scroll-behavior: auto;
}
.isn-chiprow[data-dragging] .isn-chip {
cursor: grabbing;
}
.isn-hero--scan .isn-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(440px, 40vw, 700px));
grid-template-rows: auto auto;
grid-template-areas:
'copy scan'
'cats scan';
align-items: start;
align-content: center;
row-gap: clamp(22px, 2.4vw, 34px);
min-height: calc(100vh - var(--i-chrome) - var(--hero-pad-t) - var(--hero-pad-b));
min-height: calc(100svh - var(--i-chrome) - var(--hero-pad-t) - var(--hero-pad-b));
}
.isn-hero--scan .isn-hero-copy {
grid-area: copy;
}
.isn-hero--scan .isn-scan {
grid-area: scan;
}
.isn-hero--scan .isn-hero-cats {
grid-area: cats;
}
.isn-hero--scan .isn-hero-copy .isn-eyebrow {
color: var(--i-blue);
font-size: clamp(12px, 1.11vw, 16px);
letter-spacing: var(--i-track-body);
text-transform: none;
}
.isn-hero--scan .isn-scan {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
}
.isn-hero--scan .isn-scan {
border-color: rgb(0 0 0 / 4%);
box-shadow:
0 18px 45px rgb(15 23 42 / 8%),
0 4px 12px rgb(15 23 42 / 4%);
}
.isn-hero--scan .isn-hero-cats {
align-self: end;
}
@media not all and (max-width: 1200px) {
.isn-hero--scan .isn-hero-cats {
max-width: 100%;
}
.isn-hero-rail .cats-viewport {
max-width: calc(3 * 50px + 3 * 16px + 2 * 32px + 42 * 0.496 * clamp(14px, 1.05vw, 15.5px));
}
}
.isn-hero-perks {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: start;
gap: 32px;
margin: clamp(26px, 2.6vw, 36px) 0 0;
padding: 0;
list-style: none;
}
.isn-hero-perk {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
justify-items: start;
column-gap: 16px;
}
.isn-hero-perk .isn-ic,
.isn-hero-claims--row .isn-ic {
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--a-soft);
color: var(--i-ink);
}
.isn-hero-perk .isn-perk-img,
.isn-hero-claims--row .isn-perk-img {
width: 26px;
height: 26px;
object-fit: contain;
}
.isn-hero-perk-title {
font-family: var(--i-display);
font-size: clamp(14px, 1.05vw, 15.5px);
font-weight: 700;
letter-spacing: var(--i-track-h3);
line-height: 1.2;
}
.isn-hero-cats {
--hero-cat-gap: clamp(6px, 0.6vw, 8px);
container-type: inline-size;
}
.isn-hero-rail .cats-viewport {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.isn-hero-rail .cats-viewport::-webkit-scrollbar {
display: none;
}
.isn-hero-rail[data-rail='live'] .cats-viewport {
overflow: hidden;
touch-action: pan-y pinch-zoom;
user-select: none;
}
.isn-hero-cats-track {
display: flex;
gap: var(--hero-cat-gap);
margin: 0;
padding: 0;
list-style: none;
width: max-content;
}
.isn-hero-rail:not([data-rail='live']) .isn-hero-cat[aria-hidden] {
display: none;
}
.isn-hero-cat {
--hero-cat-w: calc((100cqi - 4 * var(--hero-cat-gap)) / 5.4);
--hero-cat-h: calc(var(--hero-cat-w) * 4 / 3);
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
flex: none;
width: var(--hero-cat-w);
min-height: var(--hero-cat-h);
gap: 4px;
padding: clamp(6px, 0.7vw, 10px);
border-radius: var(--i-r-sm);
background: var(--a-soft);
color: var(--i-ink);
text-align: center;
}
@container (max-width: 420px) {
.isn-hero-cat {
--hero-cat-w: calc((100cqi - 2 * var(--hero-cat-gap)) / 3);
}
}
.isn-hero-cat .isn-visual {
--visual-h: calc(var(--hero-cat-h) * 0.55);
--visual-pad: 0;
min-height: 0;
}
.isn-hero-cat-name {
font-family: var(--i-display);
font-size: clamp(11px, 0.87vw, 12.5px);
font-weight: 700;
letter-spacing: var(--i-track-h3);
line-height: 1.18;
}
.isn-hero--scan .isn-hero-h {
font-size: clamp(34px, 8.4cqw, 60px);
}
.isn-hero--cat .isn-hero-h {
font-size: clamp(34px, 8.4cqw, 48px);
}
.isn-hero-note {
display: flex;
align-items: flex-end;
gap: 10px;
margin: clamp(18px, 2vw, 28px) 0 0;
color: var(--i-blue);
}
.isn-hero-note-text {
font-style: italic;
font-size: clamp(17px, 1.5vw, 21px);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
transform: rotate(-2.5deg);
}
.isn-hand-arrow--scan {
width: 84px;
height: 58px;
color: var(--i-blue);
transform: rotate(2deg);
}
.isn-cats {
padding: 0 0 clamp(10px, 1.2vw, 18px);
}
.isn-cats-ask {
margin: clamp(14px, 1.6vw, 20px) auto 0;
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-cats-ask a {
display: inline-flex;
align-items: center;
gap: 7px;
margin-left: 4px;
color: var(--i-ink);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.isn-cats-ask a:hover {
color: var(--i-blue);
}
.isn-rail-arrows {
display: flex;
flex: none;
gap: 8px;
}
.isn-cats .isn-rail-arrows,
.isn-blograil .isn-rail-arrows {
position: absolute;
inset: 0 clamp(9px, 1vw, 18px);
z-index: 2;
align-items: center;
justify-content: space-between;
pointer-events: none;
}
.isn-cats .isn-rail-arrow,
.isn-blograil .isn-rail-arrow {
pointer-events: auto;
box-shadow: 0 2px 10px rgb(10 10 10 / 8%);
}
.isn-rail-arrow {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 1.5px solid var(--i-line);
border-radius: 50%;
background: var(--i-white);
color: var(--i-ink);
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease),
background-color var(--dur-fast) var(--ease);
}
.isn-rail-arrow:hover {
border-color: var(--i-ink);
background: var(--i-grey);
}
.isn-rail-arrow > svg {
width: 15px;
height: 15px;
}
.isn-rail-arrow:disabled {
opacity: 0.35;
cursor: default;
}
.isn-rail-arrow:disabled:hover {
border-color: var(--i-line);
background: var(--i-white);
}
.isn-blograil {
position: relative;
container-type: inline-size;
}
.isn-blograil-viewport {
--blog-pad: max(var(--i-gutter), calc((100% - var(--i-shell)) / 2 + var(--i-gutter)));
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--blog-pad);
padding: 4px var(--blog-pad) 8px;
scrollbar-width: none;
}
.isn-blograil-viewport::-webkit-scrollbar {
display: none;
}
.isn-blograil-track {
--blog-gap: clamp(16px, 1.6vw, 24px);
--blog-w: calc(min(100cqw, var(--i-shell)) - 2 * var(--i-gutter));
--blog-n: 1.2;
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((var(--blog-w) - var(--blog-gap) * (var(--blog-n) - 1)) / var(--blog-n));
gap: var(--blog-gap);
width: max-content;
margin: 0;
padding: 0;
list-style: none;
}
@container (min-width: 600px) {
.isn-blograil-track {
--blog-n: 2.3;
}
}
@container (min-width: 900px) {
.isn-blograil-track {
--blog-n: 3.3;
}
}
@container (min-width: 1120px) {
.isn-blograil-track {
--blog-n: 4;
}
}
@container (min-width: 1360px) {
.isn-blograil-track {
--blog-n: 5;
}
}
.isn-blogcard {
display: flex;
min-width: 0;
scroll-snap-align: start;
}
.isn-blogcard-link {
display: flex;
flex-direction: column;
width: 100%;
color: inherit;
text-decoration: none;
}
.isn-blogcard-link:focus-visible {
outline: 2px solid var(--i-ink);
outline-offset: 4px;
border-radius: var(--i-r-sm);
}
.isn-blogcard-media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--i-r-sm);
background: var(--i-grey);
}
.isn-blogcard-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-fast) var(--ease);
}
.isn-blogcard-link:hover .isn-blogcard-media img {
transform: scale(1.03);
}
.isn-blogcard-cat {
margin-top: 16px;
color: var(--i-muted);
font-size: var(--i-micro);
font-weight: 600;
letter-spacing: 0.02em;
}
.isn-blogcard-title {
display: -webkit-box;
margin: 6px 0 0;
overflow: hidden;
color: var(--i-ink);
font-family: var(--i-display);
font-size: clamp(17px, 1.25vw, 19px);
font-weight: 800;
line-height: 1.25;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.isn-blogcard-link:hover .isn-blogcard-title {
text-decoration: underline;
text-underline-offset: 3px;
}
.isn-blogcard-excerpt {
display: flex;
min-height: 3em;
margin: 8px 0 0;
color: var(--i-muted);
font-size: var(--i-small);
line-height: 1.5;
}
.isn-blogcard-excerpt-text {
display: -webkit-box;
min-width: 0;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.isn-blogcard-excerpt-text::before {
content: '';
float: right;
height: calc(100% - 1.5em);
}
.isn-blogcard-more {
float: right;
clear: both;
margin-left: 0.35em;
color: var(--i-ink);
font-weight: 500;
text-decoration: underline;
text-decoration-color: var(--i-muted);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-color var(--dur-fast) var(--ease);
}
.isn-blogcard-link:hover .isn-blogcard-more {
text-decoration-color: currentcolor;
}
.isn-blogcard-author {
display: flex;
min-width: 0;
margin-top: auto;
padding-top: 18px;
}
.isn-byline {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.isn-byline-photo {
display: block;
flex: none;
width: 44px;
height: 44px;
overflow: hidden;
border-radius: 50%;
background: var(--i-grey);
}
.isn-byline-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.isn-byline .isn-mark {
height: 36px;
}
.isn-byline-text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.isn-byline-by {
color: var(--i-muted);
font-size: 12px;
}
.isn-byline-name {
color: var(--i-ink);
font-size: 15px;
font-weight: 600;
}
.isn-byline-role {
color: var(--i-muted);
font-size: 13px;
}
.isn-byline--compact {
gap: 10px;
}
.isn-byline--compact .isn-byline-photo {
width: 30px;
height: 30px;
}
.isn-byline--compact .isn-mark {
height: 26px;
}
.isn-byline--compact .isn-byline-by {
font-size: 11px;
}
.isn-byline--compact .isn-byline-name {
font-size: 13px;
}
.isn-byline--compact .isn-byline-role {
overflow: hidden;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.learn-body .learn-cta {
margin-top: 28px;
}
.learn-body .learn-cta .isn-btn,
.learn-body .learn-cta .isn-btn:hover,
.learn-body .learn-cta .isn-btn:focus-visible {
border-bottom: 1.5px solid var(--i-blue);
color: var(--i-white);
}
.learn-body .learn-cta .isn-btn:hover {
border-color: #1b4fd8;
}
.isn-rail {
position: relative;
}
.isn-rail .cats-viewport {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
padding: 4px max(var(--i-gutter), calc((100vw - var(--i-shell)) / 2 + var(--i-gutter)));
scroll-snap-type: x proximity;
}
.isn-rail .cats-viewport::-webkit-scrollbar {
display: none;
}
.isn-rail[data-rail='live'] .cats-viewport {
overflow: hidden;
scroll-snap-type: none;
}
.isn-rail .cats-track {
display: flex;
gap: clamp(10px, 1vw, 14px);
margin: 0;
padding: 0;
list-style: none;
width: max-content;
}
.isn-rail:not([data-rail='live']) .isn-cat[aria-hidden] {
display: none;
}
.isn-cat {
flex: none;
width: clamp(180px, 15vw, 220px);
position: relative;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 6px;
padding: clamp(12px, 1.2vw, 16px);
border-radius: var(--i-r);
background: var(--a-soft);
color: var(--i-ink);
scroll-snap-align: start;
}
.isn-cat--grey {
background: var(--i-grey);
border: 1px solid var(--i-line);
color: var(--i-ink);
}
.isn-cat .isn-visual {
--visual-h: clamp(132px, 11vw, 158px);
min-height: 0;
}
.isn-cat-name {
font-family: var(--i-display);
font-size: clamp(15px, 1.3vw, 18px);
font-weight: 700;
letter-spacing: var(--i-track-h3);
line-height: 1.15;
}
.isn-cat-name .isn-nobr {
white-space: nowrap;
}
.isn-flow {
--flow-h: clamp(196px, 18.2vw, 258px);
--flow-hub: calc(var(--flow-h) * 0.76);
--flow-res: calc(var(--flow-h) * 0.68);
--flow-arrow: clamp(32px, 3.4vw, 48px);
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: start;
column-gap: clamp(16px, 2vw, 28px);
max-width: 1180px;
margin-inline: auto;
}
.isn-flow-arrow {
width: var(--flow-arrow);
height: auto;
margin-top: calc(var(--flow-h) / 2 - var(--flow-arrow) * 6 / 44);
color: var(--i-muted);
}
.isn-section--collective .isn-head {
margin-bottom: clamp(40px, 3.6vw, 56px);
}
.isn-flow-step {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(14px, 1.3vw, 20px);
justify-items: center;
margin: 0;
}
.isn-flow-art {
display: grid;
place-items: center;
width: 100%;
height: var(--flow-h);
}
.isn-flow-cluster {
position: relative;
width: min(100%, calc(var(--flow-h) * 1.08));
aspect-ratio: 1.08;
}
.isn-flow-dot {
position: absolute;
left: var(--x);
top: var(--y);
display: grid;
place-items: center;
width: calc(var(--s) * 30%);
aspect-ratio: 1;
border-radius: 50%;
background: var(--i-blue-soft);
transform: translate(-50%, -50%);
}
.isn-flow-dot img {
display: block;
width: 55%;
height: auto;
}
.isn-flow-hub {
display: grid;
place-items: center;
width: var(--flow-hub);
height: var(--flow-hub);
border-radius: 50%;
background: var(--i-yellow-soft);
}
.isn-flow-hub img {
display: block;
width: 50%;
height: auto;
}
.isn-flow-res {
display: grid;
place-items: center;
width: var(--flow-res);
height: var(--flow-res);
border-radius: 50%;
background: var(--i-green-soft);
color: var(--i-green);
}
.isn-flow-doc {
width: auto;
height: 56%;
}
.isn-flow-tick {
stroke: var(--i-green);
}
.isn-flow-cap {
display: grid;
gap: 4px;
text-align: center;
}
.isn-flow-cap-t {
font-size: clamp(14px, 1.1vw, 16px);
font-weight: 700;
line-height: 1.3;
color: var(--i-ink);
}
.isn-flow-cap-s {
font-size: 13px;
font-weight: 500;
line-height: 1.35;
color: var(--i-muted);
}
@media (prefers-reduced-motion: no-preference) {
.isn-flow[data-flow] {
--flow-rise: 6px;
--flow-dot-s: 0.94;
--flow-bub-s: 0.95;
--flow-pulse-s: 1.018;
--flow-dim: 0.5;
--flow-beat: 100ms;
--flow-dot: 300ms;
--flow-pulse: 460ms;
--flow-draw: 260ms;
--flow-head: 110ms;
--flow-bub: 400ms;
--flow-tick-d: 280ms;
--flow-tick-beat: 130ms;
--flow-cap: 320ms;
--flow-t1: 800ms;
--flow-t2: 1200ms;
--flow-t3: 2000ms;
--flow-t4: 2400ms;
}
.isn-flow[data-flow] .isn-flow-arrow > path:first-child {
--flow-len: 38;
}
.isn-flow[data-flow] .isn-flow-arrow > path:last-child {
--flow-len: 14.22;
}
.isn-flow[data-flow] .isn-flow-tick > path {
--flow-len: 11.08;
}
.isn-flow[data-flow='armed'] .isn-flow-dot {
opacity: 0;
transform: translate(-50%, -50%) translateY(var(--flow-rise)) scale(var(--flow-dot-s));
}
.isn-flow[data-flow='armed'] .isn-flow-hub,
.isn-flow[data-flow='armed'] .isn-flow-res {
opacity: 0;
transform: scale(var(--flow-bub-s));
}
.isn-flow[data-flow='armed'] .isn-flow-arrow > path,
.isn-flow[data-flow='armed'] .isn-flow-tick > path {
stroke-dasharray: var(--flow-len);
stroke-dashoffset: var(--flow-len);
}
.isn-flow[data-flow='armed'] .isn-flow-cap {
opacity: var(--flow-dim);
}
.isn-flow[data-flow='run'] .isn-flow-dot,
.isn-flow[data-flow='run'] .isn-flow-hub,
.isn-flow[data-flow='run'] .isn-flow-res,
.isn-flow[data-flow='run'] .isn-flow-arrow > path,
.isn-flow[data-flow='run'] .isn-flow-tick > path,
.isn-flow[data-flow='run'] .isn-flow-cap {
animation-fill-mode: backwards;
animation-iteration-count: 1;
}
.isn-flow[data-flow='run'] .isn-flow-dot {
--n: 0;
animation-name: isn-flow-dot;
animation-duration: var(--flow-dot);
animation-delay: calc(var(--n) * var(--flow-beat));
}
.isn-flow[data-flow='run'] .isn-flow-dot:nth-of-type(2) {
--n: 1;
}
.isn-flow[data-flow='run'] .isn-flow-dot:nth-of-type(3) {
--n: 2;
}
.isn-flow[data-flow='run'] .isn-flow-dot:nth-of-type(4) {
--n: 3;
}
.isn-flow[data-flow='run'] .isn-flow-dot:nth-of-type(5) {
--n: 4;
}
.isn-flow[data-flow='run'] .isn-flow-dot:nth-of-type(6) {
--n: 5;
}
.isn-flow[data-flow='run'] .isn-flow-cluster {
animation-name: isn-flow-settle;
animation-duration: var(--flow-pulse);
animation-delay: calc(5 * var(--flow-beat) + var(--flow-dot));
animation-iteration-count: 1;
}
.isn-flow[data-flow='run'] .isn-flow-arrow:nth-of-type(1) {
--flow-at: var(--flow-t1);
}
.isn-flow[data-flow='run'] .isn-flow-arrow:nth-of-type(2) {
--flow-at: var(--flow-t3);
}
.isn-flow[data-flow='run'] .isn-flow-arrow > path {
animation-name: isn-flow-draw;
}
.isn-flow[data-flow='run'] .isn-flow-arrow > path:first-child {
animation-duration: var(--flow-draw);
animation-delay: var(--flow-at);
}
.isn-flow[data-flow='run'] .isn-flow-arrow > path:last-child {
animation-duration: var(--flow-head);
animation-delay: calc(var(--flow-at) + var(--flow-draw));
}
.isn-flow[data-flow='run'] .isn-flow-hub,
.isn-flow[data-flow='run'] .isn-flow-res {
animation-name: isn-flow-bubble;
animation-duration: var(--flow-bub);
}
.isn-flow[data-flow='run'] .isn-flow-hub {
animation-delay: var(--flow-t2);
}
.isn-flow[data-flow='run'] .isn-flow-res {
animation-delay: var(--flow-t4);
}
.isn-flow[data-flow='run'] .isn-flow-tick > path {
--n: 0;
animation-name: isn-flow-draw;
animation-duration: var(--flow-tick-d);
animation-delay: calc(var(--flow-t4) + var(--flow-bub) + var(--n) * var(--flow-tick-beat));
}
.isn-flow[data-flow='run'] .isn-flow-tick > path:nth-of-type(2) {
--n: 1;
}
.isn-flow[data-flow='run'] .isn-flow-tick > path:nth-of-type(3) {
--n: 2;
}
.isn-flow[data-flow='run'] .isn-flow-cap {
animation-name: isn-flow-label;
animation-duration: var(--flow-cap);
}
.isn-flow[data-flow='run'] .isn-flow-step:nth-of-type(2) .isn-flow-cap {
animation-delay: var(--flow-t2);
}
.isn-flow[data-flow='run'] .isn-flow-step:nth-of-type(3) .isn-flow-cap {
animation-delay: var(--flow-t4);
}
@keyframes isn-flow-dot {
0% {
opacity: 0;
transform: translate(-50%, -50%) translateY(var(--flow-rise)) scale(var(--flow-dot-s));
animation-timing-function: var(--ease);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) translateY(0) scale(1);
}
}
@keyframes isn-flow-settle {
0% {
transform: scale(1);
animation-timing-function: var(--ease-inout);
}
50% {
transform: scale(var(--flow-pulse-s));
animation-timing-function: var(--ease-inout);
}
100% {
transform: scale(1);
}
}
@keyframes isn-flow-draw {
0% {
stroke-dasharray: var(--flow-len);
stroke-dashoffset: var(--flow-len);
animation-timing-function: var(--ease);
}
100% {
stroke-dasharray: var(--flow-len);
stroke-dashoffset: 0;
}
}
@keyframes isn-flow-bubble {
0% {
opacity: 0;
transform: scale(var(--flow-bub-s));
animation-timing-function: var(--ease);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes isn-flow-label {
0% {
opacity: var(--flow-dim);
animation-timing-function: var(--ease);
}
100% {
opacity: 1;
}
}
}
.isn-step-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(16px, 1.8vw, 26px);
margin: 0;
padding: 0;
list-style: none;
counter-reset: none;
--una-cycle: 9s;
--una-turn: 3s;
--una-beat: 136ms;
}
.isn-step-card {
display: grid;
grid-template-rows: auto 1fr;
border: 1px solid var(--i-line);
border-radius: var(--i-r-lg);
background: var(--i-white);
overflow: hidden;
}
.isn-step-art {
position: relative;
height: clamp(178px, 19vw, 238px);
padding: clamp(16px, 1.7vw, 24px);
background: var(--a-soft);
overflow: hidden;
}
.isn-step-art[data-tint='yellow'] {
--a-soft: var(--i-yellow-soft);
}
.isn-step-n {
position: absolute;
top: clamp(12px, 1.4vw, 18px);
right: clamp(14px, 1.6vw, 22px);
font-family: var(--i-display);
font-size: clamp(30px, 3.4vw, 46px);
font-weight: 800;
letter-spacing: var(--i-track-hero);
line-height: 1;
color: color-mix(in srgb, var(--a) 26%, transparent);
}
.isn-art {
position: relative;
height: 100%;
}
.isn-una {
display: block;
width: 100%;
height: 100%;
color: var(--a-ink);
}
.isn-una-plane {
fill: var(--a-soft);
}
.isn-step-cards.is-in .isn-una-write {
animation-duration: var(--una-cycle);
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: backwards;
animation-delay: calc(var(--turn) * var(--una-turn) + var(--n) * var(--una-beat));
}
.isn-step-cards.is-in .isn-una-write {
animation-name: isn-una-write;
}
@keyframes isn-una-write {
0% {
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
opacity: 1;
animation-timing-function: var(--ease);
}
7% {
stroke-dasharray: var(--len);
stroke-dashoffset: 0;
opacity: 1;
}
20% {
stroke-dasharray: var(--len);
stroke-dashoffset: 0;
opacity: 1;
animation-timing-function: var(--ease);
}
26%,
100% {
stroke-dasharray: var(--len);
stroke-dashoffset: 0;
opacity: 0;
}
}
.isn-step-cards {
--zw-cycle: 4.8s;
}
.isn-zw {
display: flex;
flex-direction: column;
justify-content: center;
container-type: inline-size;
}
.isn-zw--categories {
padding-top: 8px;
}
.isn-zw-rows {
display: grid;
justify-items: center;
gap: clamp(7px, 2.6cqi, 10px);
font-size: clamp(12.5px, 3.5cqi, 14px);
}
.isn-zw-row {
display: flex;
gap: clamp(6px, 2.2cqi, 9px);
}
.isn-zw-chip {
--zw-edge: color-mix(in srgb, var(--a) 28%, var(--i-white));
display: inline-flex;
align-items: center;
gap: 0.42em;
padding: 0.44em 0.9em 0.44em 0.6em;
border: 1.5px solid var(--zw-edge);
border-radius: 999px;
background: var(--i-white);
color: var(--i-ink);
font-weight: 600;
line-height: 1.15;
white-space: nowrap;
}
.isn-zw-chip[data-on] {
border-color: var(--a);
background: var(--a);
color: var(--i-white);
}
.isn-zw-mark {
flex: none;
width: 1.1em;
height: 1.1em;
}
.isn-zw-mark circle {
stroke-opacity: 0.32;
}
.isn-zw-tick {
transform-box: fill-box;
transform-origin: center;
}
@container (max-width: 359.98px) {
.isn-zw-chip--extra {
display: none;
}
}
.isn-zw-svg {
display: block;
width: 100%;
height: 100%;
color: var(--a-ink);
}
.isn-zw-svg * {
vector-effect: non-scaling-stroke;
}
.isn-zw-paper {
fill: var(--i-white);
}
.isn-zw-solid {
fill: currentColor;
}
.isn-zw-soft {
stroke: color-mix(in srgb, currentColor 40%, var(--i-white));
}
.isn-zw-knock {
stroke: var(--i-white);
}
.isn-zw-pop {
transform-box: fill-box;
transform-origin: center;
}
.isn-zw-line {
transform-box: fill-box;
transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
.isn-step-cards.is-in .isn-zw-chip[data-on],
.isn-step-cards.is-in .isn-zw-tick,
.isn-step-cards.is-in .isn-zw-line,
.isn-step-cards.is-in .isn-zw-pop {
animation-duration: var(--zw-cycle);
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: backwards;
animation-delay: var(--d);
}
.isn-step-cards.is-in .isn-zw-chip[data-on] {
animation-name: isn-zw-chip;
}
.isn-step-cards.is-in .isn-zw-tick {
animation-name: isn-zw-tick;
}
.isn-step-cards.is-in .isn-zw-line {
animation-name: isn-zw-line;
}
.isn-step-cards.is-in .isn-zw-pop {
animation-name: isn-zw-pop;
}
@keyframes isn-zw-chip {
0% {
border-color: var(--zw-edge);
background-color: var(--i-white);
color: var(--i-ink);
transform: scale(1);
animation-timing-function: var(--ease);
}
3.125% {
transform: scale(1.03);
animation-timing-function: var(--ease);
}
6.25%,
62.5% {
border-color: var(--a);
background-color: var(--a);
color: var(--i-white);
transform: scale(1);
animation-timing-function: var(--ease);
}
72.917%,
100% {
border-color: var(--zw-edge);
background-color: var(--i-white);
color: var(--i-ink);
transform: scale(1);
}
}
@keyframes isn-zw-tick {
0% {
opacity: 0;
transform: scale(0.6);
animation-timing-function: var(--ease);
}
6.25%,
62.5% {
opacity: 1;
transform: scale(1);
animation-timing-function: var(--ease);
}
72.917%,
100% {
opacity: 0;
transform: scale(1);
}
}
@keyframes isn-zw-line {
0% {
opacity: 0;
transform: scaleX(0.3);
animation-timing-function: var(--ease);
}
8.333%,
62.5% {
opacity: 1;
transform: none;
animation-timing-function: var(--ease);
}
72.917%,
100% {
opacity: 0;
transform: none;
}
}
@keyframes isn-zw-pop {
0% {
opacity: 0;
transform: scale(0.8);
animation-timing-function: var(--ease);
}
8.333%,
62.5% {
opacity: 1;
transform: none;
animation-timing-function: var(--ease);
}
72.917%,
100% {
opacity: 0;
transform: none;
}
}
}
.isn-step-body {
padding: clamp(20px, 2.2vw, 30px);
}
.isn-step-h {
margin: 0;
font-family: var(--i-display);
font-size: clamp(21px, 1.9vw, 26px);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-step-copy {
margin: 12px 0 0;
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-section--compare {
background: var(--i-paper);
}
.isn-compare {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1060px;
margin-inline: auto;
}
.isn-section--compare .isn-lead {
max-width: 54ch;
}
.isn-cmp {
padding: clamp(22px, 2.4vw, 34px);
border-radius: var(--i-r-lg);
}
.isn-cmp--alone {
background: var(--i-white);
border: 1px solid var(--i-line);
}
.isn-cmp--together {
background: var(--i-blue-soft);
border: 1.5px solid var(--i-blue);
box-shadow: 0 2px 6px rgb(10 10 10 / 6%);
}
.isn-cmp-h {
margin: 0 0 22px;
font-family: var(--i-display);
font-size: clamp(21px, 1.9vw, 26px);
font-weight: 800;
letter-spacing: var(--i-track-h3);
}
.isn-cmp-rows {
display: grid;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}
.isn-cmp-rows li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: var(--i-body-size);
line-height: 1.4;
}
.isn-cmp--alone .isn-cmp-rows li {
color: var(--i-muted);
}
.isn-cmp--together .isn-cmp-rows li {
font-weight: 600;
}
.isn-cmp-mark {
flex: none;
width: 22px;
height: 22px;
margin-top: 1px;
fill: currentColor;
}
.isn-cmp-glyph {
fill: none;
stroke: var(--i-white);
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.isn-cmp--alone .isn-cmp-mark {
color: #9b9c98;
}
.isn-cmp--together .isn-cmp-mark {
color: var(--i-blue);
}
.isn-compare-foot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1060px;
margin-inline: auto;
}
.isn-compare-note {
grid-column: 2;
gap: 6px;
align-items: center;
margin-top: clamp(20px, 2.2vw, 30px);
}
.isn-compare-note .isn-hero-note-text {
max-width: 11.5em;
}
.isn-benefits {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 3.2vw, 52px) clamp(24px, 2.6vw, 44px);
margin: 0;
padding: 0;
list-style: none;
}
.isn-benefit-h {
margin: 16px 0 0;
font-family: var(--i-display);
font-size: var(--i-h3);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-benefit-copy {
max-width: 34ch;
margin: 8px 0 0;
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-section--advantages .isn-lead {
max-width: 760px;
}
.isn-advantages {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 1.1vw, 18px);
margin: 0;
padding: 0;
list-style: none;
}
.isn-adv {
display: flex;
flex-direction: column;
padding: clamp(26px, 2.8vw, 42px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-paper);
box-shadow: 0 2px 6px rgb(10 10 10 / 6%);
}
.isn-adv-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: clamp(14px, 1.4vw, 22px);
}
.isn-adv-visual {
flex: 0 0 auto;
width: 64px;
}
.isn-adv-visual .isn-visual {
--visual-h: 64px;
--visual-pad: 8px;
min-height: 0;
border-radius: 18px;
background: var(--a-soft);
}
.isn-adv-visual .isn-visual--drawn .isn-ic > svg {
width: 41px;
height: 41px;
}
.isn-adv-title {
margin: 0;
font-family: var(--i-display);
font-size: var(--i-h3);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
overflow-wrap: break-word;
}
.isn-adv-copy {
max-width: 46ch;
margin: clamp(22px, 2.2vw, 32px) 0 0;
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
@media (max-width: 900px) {
.isn-advantages {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.isn-advantages {
grid-template-columns: minmax(0, 1fr);
}
}
.isn-advantages--media > .isn-adv {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
grid-template-columns: minmax(0, 1fr);
row-gap: 0;
}
.isn-advantages--media .isn-adv-title {
flex: 1 1 0;
min-width: 0;
}
.isn-advantages--media .isn-adv-visual {
translate: clamp(8px, 0.7vw, 10px) calc(-1 * clamp(6px, 0.7vw, 10px));
}
@media (min-width: 901px) and (max-width: 1079px) {
.isn-advantages--media {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 359px) {
.isn-advantages--media .isn-adv-top {
gap: 10px;
}
.isn-advantages--media .isn-adv-visual {
width: 48px;
}
.isn-advantages--media .isn-adv-visual .isn-visual {
--visual-h: 48px;
--visual-pad: 6px;
border-radius: 14px;
}
.isn-advantages--media .isn-adv-visual .isn-visual--drawn .isn-ic > svg {
width: 31px;
height: 31px;
}
}
.isn-section--founder {
--i-y: clamp(48px, 5.4vw, 86px);
background: var(--i-paper);
}
.isn-founder {
display: grid;
grid-template-columns: minmax(0, 1fr) 192px;
gap: clamp(26px, 4vw, 64px);
align-items: center;
}
.isn-portrait {
width: 192px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--i-grey);
overflow: hidden;
}
.isn-portrait-img,
.isn-portrait-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.isn-quote {
max-width: 102ch;
margin: 0;
}
.isn-quote-text {
margin: 0;
font-family: var(--i-display);
font-size: clamp(20px, 2.1vw, 30px);
font-weight: 700;
letter-spacing: var(--i-track-h3);
line-height: 1.22;
text-wrap: pretty;
}
.isn-quote-by {
margin-top: clamp(20px, 2vw, 28px);
}
.isn-quote-name {
display: block;
font-size: var(--i-body-size);
font-weight: 800;
}
.isn-quote-role {
display: block;
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-service {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
gap: clamp(14px, 1.6vw, 22px);
margin: 0;
padding: 0;
list-style: none;
}
.isn-svc {
padding: clamp(20px, 2.2vw, 30px);
border-radius: var(--i-r);
background: var(--a-soft);
}
.isn-svc-n {
display: block;
font-family: var(--i-display);
font-size: var(--i-micro);
font-weight: 800;
letter-spacing: var(--i-track-label);
color: var(--a);
}
.isn-svc .isn-ic {
margin-top: 16px;
}
.isn-svc-h {
margin: 14px 0 0;
font-family: var(--i-display);
font-size: var(--i-h3);
font-weight: 800;
letter-spacing: var(--i-track-h3);
}
.isn-svc-copy {
margin: 8px 0 0;
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: #5b5c58;
}
.isn-section--tech {
padding: clamp(48px, 5vw, 76px) 0;
border-top: 1px solid var(--i-line);
border-bottom: 1px solid var(--i-line);
}
.isn-tech .isn-head {
max-width: 760px;
margin-bottom: clamp(24px, 2.4vw, 34px);
}
.isn-tech .isn-h {
font-size: clamp(24px, 2.4vw, 34px);
}
.isn-tech .isn-lead {
font-size: var(--i-small);
}
.isn-caps {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.isn-cap {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 15px 9px 11px;
border: 1px solid var(--i-line);
border-radius: var(--r-pill);
font-size: var(--i-small);
font-weight: 600;
}
.isn-cap .isn-ic > svg {
width: 20px;
height: 20px;
}
.isn-caps-note {
margin: 18px 0 0;
max-width: 78ch;
}
.isn-platform .isn-lead {
max-width: 800px;
}
.isn-platform .isn-head {
margin-bottom: clamp(28px, 2.6vw, 40px);
}
.isn-pf {
--isn-pf-dur: 6000ms;
--isn-pf-pad: clamp(22px, 2.2vw, 34px);
}
.isn-pf-tabs {
position: relative;
display: flex;
flex-wrap: nowrap;
border: 1px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.isn-pf-tabs::-webkit-scrollbar {
display: none;
}
.isn-pf-tab {
position: relative;
flex: 1 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 15px 16px 17px;
border: 0;
background: none;
color: var(--i-muted);
font-family: var(--i-display);
font-size: clamp(14px, 1.05vw, 16px);
font-weight: 600;
letter-spacing: var(--i-track-h3);
line-height: 1.25;
white-space: nowrap;
cursor: pointer;
scroll-snap-align: center;
transition:
background var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-pf-tab + .isn-pf-tab {
border-left: 1px solid var(--i-line);
}
.isn-pf-tab-face {
display: flex;
align-items: center;
gap: 9px;
}
.isn-pf-tab .isn-ic > svg {
width: 19px;
height: 19px;
}
.isn-pf-tab[data-active] {
background: color-mix(in srgb, var(--a-soft) 38%, var(--i-white));
color: var(--i-ink);
}
.isn-pf-tab:focus-visible {
outline-offset: -3px;
border-radius: 0;
}
.isn-pf-panel:focus-visible {
outline-offset: -4px;
border-radius: var(--i-r);
}
.isn-pf-track {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: none;
height: 3px;
background: color-mix(in srgb, var(--a-ink, var(--i-ink)) 14%, var(--i-white));
overflow: hidden;
}
.isn-pf-tab[data-active] .isn-pf-track {
display: block;
}
.isn-pf-fill {
display: block;
height: 100%;
background: var(--a-ink, var(--i-ink));
transform: scaleX(0);
transform-origin: left center;
}
html[data-js='true'] .isn-pf[data-run='true'] .isn-pf-tab[data-active] .isn-pf-fill {
animation: isn-pf-fill var(--isn-pf-dur) linear forwards;
}
html[data-js='true']
.isn-pf[data-run='true'][data-hold='true']
.isn-pf-tab[data-active]
.isn-pf-fill {
animation-play-state: paused;
}
@keyframes isn-pf-fill {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.isn-pf-stage {
margin-top: clamp(10px, 1vw, 14px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
overflow: hidden;
}
.isn-pf-panel + .isn-pf-panel {
border-top: 1px solid var(--i-line);
}
html[data-js='true'] .isn-pf-panel {
display: none;
}
html[data-js='true'] .isn-pf-panel[data-active] {
display: block;
}
.isn-pf-inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(22px, 2.4vw, 36px);
align-items: center;
padding: var(--isn-pf-pad);
}
.isn-pf-copy {
min-width: 0;
}
.isn-pf-gains {
margin: clamp(14px, 1.4vw, 20px) 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 7px;
}
.isn-pf-gains > li {
position: relative;
padding-left: 22px;
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: var(--i-ink);
}
.isn-pf-gains > li::before {
content: '✓';
position: absolute;
top: 0;
left: 0;
color: var(--a-ink, var(--i-ink));
font-size: 0.95em;
font-weight: 700;
}
.isn-pf-lede {
margin: 0;
font-family: var(--i-display);
font-size: var(--i-h3);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-pf-body {
max-width: 54ch;
margin: clamp(18px, 1.8vw, 26px) 0 0;
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: var(--i-ink);
}
.isn-pf-mock {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
padding: clamp(14px, 1.4vw, 20px);
border: 1px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
}
.isn-pf-mock-top {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.isn-pf-cap {
flex: 1 1 auto;
font-family: var(--i-mono);
font-size: var(--i-micro);
letter-spacing: var(--i-track-label);
color: var(--i-muted);
}
.isn-pf-badge {
flex: none;
padding: 4px 10px;
border: 1px solid var(--a-ink, var(--i-ink));
border-radius: var(--r-pill);
background: var(--a-soft);
color: var(--i-ink);
font-size: var(--i-micro);
font-weight: 600;
white-space: nowrap;
}
.isn-pf-badge--warn {
border-color: color-mix(in srgb, var(--i-red) 84%, var(--i-ink));
background: var(--i-red-soft);
}
.isn-pf-bars {
display: grid;
gap: 13px;
}
.isn-pf-brow {
display: grid;
grid-template-columns: 1fr auto;
gap: 5px 12px;
font-size: var(--i-micro);
}
.isn-pf-bamount {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.isn-pf-btrack {
grid-column: 1 / -1;
height: 6px;
border-radius: var(--r-pill);
background: var(--i-grey);
overflow: hidden;
}
.isn-pf-bfill {
display: block;
height: 100%;
border-radius: inherit;
background: var(--i-ink);
}
.isn-pf-tbl-scroll {
max-width: 100%;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: thin;
}
.isn-pf-tbl {
width: 100%;
border-collapse: collapse;
font-size: var(--i-micro);
text-align: left;
}
.isn-pf-tbl th {
padding: 0 10px 9px 0;
border-bottom: 1px solid var(--i-line);
font-family: var(--i-mono);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: var(--i-muted);
}
.isn-pf-tbl td {
padding: 10px 10px 10px 0;
border-bottom: 1px solid var(--i-line);
}
.isn-pf-tbl tr:last-child td {
border-bottom: 0;
}
.isn-pf-tbl th:last-child,
.isn-pf-tbl td:last-child {
padding-right: 0;
}
.isn-pf-num {
font-variant-numeric: tabular-nums;
}
.isn-pf-state {
display: inline-block;
padding: 3px 8px;
border-radius: var(--r-pill);
background: var(--i-grey);
color: var(--i-ink);
font-weight: 600;
white-space: nowrap;
}
.isn-pf-state--accent {
border: 1px solid var(--a-ink, var(--i-ink));
padding: 2px 7px;
background: var(--a-soft);
}
.isn-pf-state--warn {
border: 1px solid color-mix(in srgb, var(--i-red) 84%, var(--i-ink));
padding: 2px 7px;
background: var(--i-red-soft);
}
.isn-pf-items {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.isn-pf-item {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 11px 13px;
border-radius: var(--i-r-sm);
background: var(--i-paper);
}
.isn-pf-item-name {
font-size: var(--i-small);
font-weight: 600;
}
.isn-pf-item-val {
font-size: var(--i-micro);
color: var(--i-muted);
text-align: right;
}
@media (min-width: 1024px) {
html[data-js='true'] .isn-pf-panel[data-active] {
display: flex;
align-items: center;
min-height: 352px;
}
.isn-pf-inner {
flex: 1 1 auto;
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}
}
@keyframes isn-pf-enter {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
html[data-js='true'] .isn-pf-panel[data-active] .isn-pf-inner {
animation: isn-pf-enter var(--dur) var(--ease) both;
}
@media (max-width: 720px) {
html[data-js='true'] .isn-pf[data-run='true'] .isn-pf-tab[data-active] .isn-pf-fill {
animation: none;
transform: scaleX(1);
}
.isn-pf-tbl {
font-size: 11.5px;
}
}
@media (prefers-reduced-motion: reduce) {
html[data-js='true'] .isn-pf[data-run='true'] .isn-pf-tab[data-active] .isn-pf-fill {
animation: none;
transform: scaleX(1);
}
html[data-js='true'] .isn-pf-panel[data-active] .isn-pf-inner {
animation: none;
}
}
.isn-section--mission {
--i-mission-measure: 660px;
--i-mission-veil: calc(var(--i-gutter) + var(--i-mission-measure) + 40px);
--i-mission-fade: 340px;
--i-mission-wash: linear-gradient(
to right,
color-mix(in srgb, var(--i-paper) 97%, transparent) 0,
color-mix(in srgb, var(--i-paper) 95%, transparent) var(--i-mission-veil),
color-mix(in srgb, var(--i-paper) 62%, transparent) calc(var(--i-mission-veil) + var(--i-mission-fade) * 0.26),
color-mix(in srgb, var(--i-paper) 26%, transparent) calc(var(--i-mission-veil) + var(--i-mission-fade) * 0.5),
color-mix(in srgb, var(--i-paper) 8%, transparent) calc(var(--i-mission-veil) + var(--i-mission-fade) * 0.74),
color-mix(in srgb, var(--i-paper) 2%, transparent) calc(var(--i-mission-veil) + var(--i-mission-fade)),
transparent 100%
);
display: flex;
align-items: center;
min-height: 700px;
background-color: var(--i-paper);
background-image: var(--i-mission-wash), url('../assets/photos/isn-mission-1876.webp');
background-image: var(--i-mission-wash),
image-set(
url('../assets/photos/isn-mission-1876.avif') type('image/avif'),
url('../assets/photos/isn-mission-1876.webp') type('image/webp')
);
background-repeat: no-repeat;
background-position: right center;
background-size: cover;
}
.isn-mission-h {
max-width: var(--i-mission-measure, 660px);
margin: 0;
font-size: clamp(30px, 4vw, 52px);
font-weight: 800;
}
.isn-mission-copy {
max-width: var(--i-mission-measure, 660px);
margin: clamp(20px, 2vw, 28px) 0 0;
font-size: var(--i-lead);
line-height: var(--i-lead-body);
color: #4c4d49;
}
.isn-mission .isn-btn {
margin-top: clamp(24px, 2.4vw, 34px);
}
.isn-faq-list {
max-width: 768px;
border-top: 1px solid var(--i-line);
}
.isn-faq-list--wide {
max-width: none;
}
.isn-head--faq {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 32px;
}
.isn-qa {
border-bottom: 1px solid var(--i-line);
}
.isn-qa summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 22px;
padding: 22px 0;
cursor: pointer;
font-family: var(--i-display);
font-size: clamp(17px, 1.5vw, 21px);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
list-style: none;
}
.isn-qa summary::-webkit-details-marker {
display: none;
}
.isn-qa summary:hover {
color: var(--i-blue);
}
.isn-qa-sign {
flex: none;
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-top: 1px;
border-radius: 50%;
background: var(--i-grey);
color: var(--i-ink);
}
.isn-faq-list--wide .isn-qa-sign {
transform: translateY(calc(0.5 * var(--i-lead-h3) * 1em - 15px));
}
.isn-qa-sign > svg {
width: 15px;
height: 15px;
}
.isn-qa[open] .isn-qa-sign {
background: var(--i-blue);
color: var(--i-white);
}
.isn-qa[open] .isn-qa-bar {
opacity: 0;
}
.isn-qa-bar {
transition: opacity var(--dur-fast) var(--ease);
}
.isn-qa > p {
max-width: 68ch;
margin: 0 0 24px;
font-size: var(--i-body-size);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-section--help {
padding-top: 0;
}
.isn-help {
display: grid;
grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
gap: clamp(28px, 3vw, 56px);
padding: clamp(28px, 3.4vw, 52px);
border-radius: var(--i-r-lg);
background: var(--i-grey);
}
.isn-help-h {
margin: 0;
font-size: clamp(26px, 2.9vw, 40px);
font-weight: 800;
letter-spacing: var(--i-track-display);
line-height: 1.12;
}
.isn-help-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: clamp(22px, 2.4vw, 34px);
margin: 0;
padding: 0;
list-style: none;
}
.isn-help-top {
display: flex;
align-items: center;
gap: 10px;
}
.isn-help-mark {
flex: none;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: color-mix(in srgb, var(--a, var(--i-blue)) 22%, var(--i-white));
}
.isn-help-mark .isn-ic > svg {
width: 20px;
height: 20px;
}
.isn-help-mark .isn-ic {
--ic-soft: color-mix(in srgb, var(--a) 44%, transparent);
}
.isn-help-label {
margin: 0;
font-family: var(--i-display);
font-size: clamp(16px, 1.4vw, 18px);
font-weight: 800;
letter-spacing: var(--i-track-h3);
}
.isn-help-copy {
max-width: 30ch;
margin: 12px 0 0;
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-help-action {
display: inline-block;
margin-top: 12px;
font-size: var(--i-small);
font-weight: 800;
color: var(--i-blue);
text-decoration: none;
}
.isn-help-action:hover {
text-decoration: underline;
}
.isn-section--visit {
padding-top: 0;
}
.isn-visit {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: clamp(28px, 3vw, 56px);
}
.isn-visit-h {
margin: 0;
font-size: clamp(26px, 2.9vw, 40px);
font-weight: 800;
letter-spacing: var(--i-track-display);
line-height: 1.12;
}
.isn-visit-lead {
max-width: 54ch;
margin: clamp(16px, 1.6vw, 22px) 0 0;
font-size: var(--i-lead);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-visit-address {
margin: clamp(18px, 1.8vw, 24px) 0 0;
font-size: var(--i-body-size);
font-style: normal;
font-weight: 700;
line-height: var(--i-lead-body);
font-variant-numeric: tabular-nums;
}
.isn-visit-map {
display: inline-block;
margin-top: 12px;
font-size: var(--i-small);
font-weight: 800;
color: var(--i-blue);
text-decoration: none;
}
.isn-visit-map:hover {
text-decoration: underline;
}
.isn-visit-photo {
width: 100%;
max-width: 768px;
justify-self: end;
overflow: hidden;
border-radius: var(--i-r);
}
.isn-visit-photo img {
width: 100%;
}
.isn-section--final {
padding-bottom: clamp(72px, 7.4vw, 118px);
}
.isn-final {
display: grid;
justify-items: center;
padding: clamp(44px, 6vw, 94px) clamp(24px, 4vw, 64px);
border-radius: 24px;
background: var(--i-blue);
color: var(--i-white);
text-align: center;
}
.isn-final-h {
max-width: 22ch;
margin: 0;
font-size: clamp(31px, 4.4vw, 58px);
font-weight: 800;
letter-spacing: var(--i-track-display);
}
.isn-final-lead {
max-width: 48ch;
margin: clamp(16px, 1.8vw, 24px) 0 0;
font-size: var(--i-lead);
line-height: var(--i-lead-body);
color: color-mix(in srgb, var(--i-white) 84%, transparent);
}
.isn-final-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: clamp(26px, 2.8vw, 38px);
}
.isn-final-note {
justify-content: center;
color: color-mix(in srgb, var(--i-white) 80%, transparent);
}
.isn-final-note .isn-hand-arrow {
color: color-mix(in srgb, var(--i-white) 72%, transparent);
}
.isn-foot {
padding: clamp(44px, 4.4vw, 68px) 0 clamp(26px, 2.6vw, 34px);
border-top: 1px solid var(--i-line);
}
.isn-foot-top {
display: grid;
grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(160px, 1fr));
gap: clamp(28px, 3vw, 56px);
}
.isn-foot-brand .isn-mark {
height: 38px;
}
.isn-foot-name {
margin: 14px 0 0;
font-family: var(--i-body);
font-size: 17px;
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.014em;
}
.isn-foot-name > span {
display: block;
}
.isn-foot-descriptor {
max-width: 32ch;
margin: 6px 0 0;
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-foot-title {
margin: 0 0 14px;
font-family: var(--i-mono);
font-size: var(--t-mono);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: var(--i-ink);
}
.isn-foot-group ul {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.isn-foot-group a {
font-size: var(--i-small);
color: var(--i-muted);
text-decoration: none;
}
.isn-foot-group a:hover {
color: var(--i-ink);
}
.isn-foot-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 26px;
margin-top: clamp(34px, 3.4vw, 54px);
padding-top: 20px;
border-top: 1px solid var(--i-line);
font-size: var(--i-micro);
color: var(--i-muted);
}
.isn-foot-bottom p {
margin: 0;
}
.isn-foot-legal {
margin-left: auto;
}
.isn-foot-legal ul {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 6px 10px;
margin: 0;
padding: 0;
list-style: none;
}
.isn-foot-legal li + li::before {
content: '·' / '';
margin-right: 10px;
}
.isn-foot-legal a,
.isn-foot-legal .isn-foot-cookie {
color: var(--i-muted);
text-decoration: underline;
text-decoration-color: var(--i-line);
text-underline-offset: 3px;
}
.isn-foot-legal a:hover,
.isn-foot-legal .isn-foot-cookie:hover {
color: var(--i-ink);
text-decoration-color: currentColor;
}
.isn-intake {
--k-edge: 22px;
--k-launch: 52px;
--k-gap: 12px;
}
.isn-intake-launch {
position: fixed;
right: var(--k-edge);
bottom: var(--k-edge);
z-index: 60;
display: inline-flex;
align-items: center;
gap: 11px;
min-height: var(--k-launch);
padding: 5px 6px 5px 20px;
border-radius: 999px;
background: var(--i-blue);
color: var(--i-white);
text-decoration: none;
box-shadow:
0 12px 32px rgb(10 10 10 / 18%),
0 2px 6px rgb(10 10 10 / 10%);
transition:
background-color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.isn-intake-launch:hover {
background: #1b4fd8;
transform: translateY(-1px);
}
.isn-intake-launch:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 3px;
}
body.isn:has(.nav-drop[open] > .isn-nav-menu--cats) .isn-intake-launch,
body.isn:has(.nav-drop[open] > .isn-nav-menu--branches) .isn-intake-launch {
visibility: hidden;
}
@media (max-width: 900px) {
body.isn.isn-form-in-view .isn-intake-launch {
visibility: hidden;
}
}
body.isn.isn-form-in-view:has(.isn-scan--brcalc) .isn-intake-launch {
visibility: hidden;
}
.isn-intake-launch-label {
font-size: var(--i-small);
font-weight: 700;
letter-spacing: -0.01em;
white-space: nowrap;
}
.isn-intake-face {
display: block;
flex: 0 0 auto;
}
.isn-intake-face img {
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: 50% 22%;
}
.isn-intake-launch .isn-intake-face {
width: 40px;
height: 40px;
}
.isn-intake-launch .isn-intake-face img {
box-shadow: 0 0 0 2px rgb(255 255 255 / 55%);
}
.isn-intake-panel {
position: fixed;
inset: auto var(--k-edge) calc(var(--k-edge) + var(--k-launch) + var(--k-gap)) auto;
margin: 0;
max-width: none;
max-height: none;
padding: 0;
border: 0;
background: transparent;
color: var(--i-ink);
overflow: visible;
}
.isn-intake-panel::backdrop {
background: rgb(10 10 10 / 22%);
}
.isn-intake-panel[open] {
opacity: 1;
transform: translateY(0);
transition:
opacity var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
@starting-style {
.isn-intake-panel[open] {
opacity: 0;
transform: translateY(8px);
}
}
.isn-intake-sheet {
width: min(560px, calc(100vw - 2 * var(--k-edge)));
max-height: min(640px, calc(100dvh - var(--k-edge) * 2 - var(--k-launch) - var(--k-gap) * 2));
overflow-y: auto;
padding: 18px 20px 20px;
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
box-shadow:
0 28px 64px rgb(10 10 10 / 16%),
0 4px 14px rgb(10 10 10 / 6%);
}
.isn-intake-head {
display: flex;
align-items: flex-start;
gap: 13px;
padding-bottom: 15px;
border-bottom: 1px solid var(--i-line);
}
.isn-intake-head .isn-intake-face {
width: 52px;
height: 52px;
}
.isn-intake-who {
min-width: 0;
}
.isn-intake-title {
margin: 0;
font-family: var(--i-display);
font-size: var(--i-lead);
font-weight: 800;
line-height: 1.15;
letter-spacing: var(--i-track-display);
}
.isn-intake-person {
margin: 3px 0 0;
font-size: var(--i-small);
font-weight: 600;
}
.isn-intake-meta {
margin: 2px 0 0;
font-size: var(--i-micro);
color: var(--i-muted);
}
.isn-intake-x {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin: -4px -6px 0 auto;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--i-muted);
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-intake-x:hover {
background: var(--i-grey);
color: var(--i-ink);
}
.isn-intake-x:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 1px;
}
.isn-intake-step {
margin-top: 16px;
}
.isn-intake-step:focus {
outline: none;
}
.isn-intake-h {
margin: 0;
font-family: var(--i-display);
font-size: var(--i-body-size);
font-weight: 700;
letter-spacing: -0.01em;
}
.isn-intake-pickhead {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px 16px;
flex-wrap: wrap;
}
.isn-intake-zone {
margin: 0;
font-size: var(--i-micro);
color: var(--i-muted);
text-align: right;
}
.isn-intake-week {
display: flex;
align-items: flex-start;
gap: 6px;
margin-top: 13px;
}
.isn-intake-grid {
flex: 1 1 auto;
min-width: 0;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(64px, 1fr);
gap: 8px;
max-height: 393px;
overflow: auto;
overscroll-behavior: contain;
}
.isn-intake-col {
display: grid;
align-content: start;
}
.isn-intake-date {
position: sticky;
top: 0;
display: grid;
place-items: center;
min-height: 36px;
margin: 0;
padding-bottom: 8px;
background: var(--i-white);
font-size: var(--i-micro);
font-weight: 700;
letter-spacing: var(--i-track-body);
white-space: nowrap;
color: var(--i-muted);
}
.isn-intake-times {
display: grid;
gap: 6px;
}
.isn-intake-wnav {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--i-muted);
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
opacity var(--dur-fast) var(--ease);
}
.isn-intake-wnav:hover:not(:disabled) {
background: var(--i-grey);
color: var(--i-ink);
}
.isn-intake-wnav:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 1px;
}
.isn-intake-wnav:disabled {
opacity: 0.32;
cursor: default;
}
.isn-intake-slot {
min-height: 42px;
padding: 0 6px;
border: 1.5px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
font-family: var(--i-body);
font-size: var(--i-small);
font-weight: 600;
color: var(--i-ink);
white-space: nowrap;
cursor: pointer;
font-variant-numeric: tabular-nums;
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-intake-slot:hover {
border-color: var(--i-ink);
}
.isn-intake-slot:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 2px;
}
.isn-intake-slot[aria-pressed='true'] {
border-color: var(--i-blue);
background: var(--i-blue);
color: var(--i-white);
}
.isn-intake-slot[aria-pressed='true']:hover {
border-color: #1b4fd8;
background: #1b4fd8;
}
.isn-intake-status {
margin: 12px 0 0;
font-size: var(--i-micro);
color: var(--i-muted);
}
.isn-intake-status[data-tone='error'],
.isn-intake-report[data-tone='error'] {
color: var(--i-red);
font-weight: 600;
}
.isn-intake-chosen {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 14px;
border-radius: var(--i-r-sm);
background: var(--i-blue-soft);
}
.isn-intake-chosen-label {
margin: 0;
font-family: var(--i-mono);
font-size: var(--i-micro);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: var(--i-blue);
}
.isn-intake-chosen-when {
margin: 2px 0 0;
font-size: var(--i-body-size);
font-weight: 700;
letter-spacing: -0.01em;
}
.isn-intake-change {
flex: 0 0 auto;
padding: 0;
border: 0;
background: none;
font-family: var(--i-body);
font-size: var(--i-small);
font-weight: 700;
color: var(--i-blue);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.isn-intake-change:hover {
color: #1b4fd8;
}
.isn-intake-fields {
margin-top: 14px;
}
.isn-intake-consent,
.isn-intake-report {
margin: 12px 0 0;
font-size: var(--i-micro);
color: var(--i-muted);
}
.isn-intake-submit {
width: 100%;
justify-content: center;
margin-top: 14px;
}
.isn-intake-done {
padding-top: 4px;
}
.isn-intake-tick {
display: grid;
place-items: center;
width: 38px;
height: 38px;
margin-bottom: 12px;
border-radius: 50%;
background: var(--i-green-soft);
color: var(--i-green);
}
.isn-intake-done .isn-intake-h {
font-size: var(--i-lead);
font-weight: 800;
letter-spacing: var(--i-track-display);
}
.isn-intake-when {
margin: 8px 0 0;
font-size: var(--i-body-size);
font-weight: 700;
text-wrap: balance;
}
.isn-intake-done-body {
margin: 8px 0 0;
font-size: var(--i-small);
color: var(--i-muted);
max-width: 42ch;
}
.isn-intake-doneclose {
width: 100%;
justify-content: center;
margin-top: 18px;
}
@media (max-width: 640px) {
.isn-intake {
--k-edge: 14px;
}
.isn-intake-panel {
inset: auto 0 0 0;
}
.isn-intake-sheet {
width: 100%;
max-height: 88dvh;
border-width: 1px 0 0;
border-radius: var(--i-r-lg) var(--i-r-lg) 0 0;
padding-bottom: max(20px, env(safe-area-inset-bottom));
}
html:has(.isn-intake-panel[open]) {
overflow: hidden;
}
.isn-intake-slot {
min-height: 46px;
}
.isn-intake-grid {
grid-auto-columns: minmax(54px, 1fr);
gap: 4px;
max-height: 268px;
}
.isn-intake-times {
gap: 4px;
}
}
.isn-section--portal {
display: grid;
align-content: center;
min-height: calc(100vh - var(--i-chrome));
min-height: calc(100svh - var(--i-chrome));
}
.isn-portal {
max-width: 62ch;
}
.isn-portal-title {
display: flex;
align-items: center;
gap: 0.25em;
}
.isn-portal-title .isn-mark {
height: 0.9em;
}
.isn-portal-note {
margin-top: 18px;
}
.isn-final.isn-portal-join {
justify-items: start;
margin-top: clamp(32px, 3.6vw, 48px);
padding: clamp(24px, 2.6vw, 36px);
border-radius: var(--i-r);
text-align: left;
}
.isn-final.isn-portal-join .isn-final-h {
font-size: clamp(22px, 2vw, 28px);
}
.isn-final.isn-portal-join .isn-final-lead {
margin-top: 10px;
}
.isn-final.isn-portal-join .isn-final-actions {
justify-content: flex-start;
margin-top: clamp(20px, 2vw, 26px);
}
.isn-final.isn-portal-join .isn-micro {
margin-top: 14px;
}
.isn-portal-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: clamp(26px, 2.8vw, 38px) 0 18px;
}
.isn-section--call {
padding: clamp(64px, 7.4vw, 108px) 0;
}
.isn-call-after {
max-width: 34em;
margin: clamp(24px, 2.4vw, 34px) 0 0;
font-size: clamp(14.5px, 1.1vw, 16px);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-intake--inline .isn-intake-panel {
position: static;
inset: auto;
}
.isn-intake--inline .isn-intake-sheet {
width: auto;
max-height: none;
overflow-y: visible;
padding: clamp(20px, 1.9vw, 26px);
}
.isn-intake-sub {
margin: 4px 0 0;
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
@media (max-width: 1200px) {
.isn-intake--inline {
max-width: 600px;
}
}
.isn-intake--calendly {
--k-pad: clamp(20px, 1.9vw, 26px);
}
.isn-intake--calendly .isn-intake-sheet {
padding: var(--k-pad) var(--k-pad) 0;
overflow: clip;
}
.isn-calendly {
margin: 0 calc(-1 * var(--k-pad));
}
.isn-calendly-frame {
min-height: 600px;
}
.isn-calendly {
--calendly-trim: 112px;
}
.isn-calendly:not([data-calendly-state='failed']) .isn-calendly-frame {
min-height: calc(600px - var(--calendly-trim));
}
.isn-calendly[data-calendly-step='day']:not([data-calendly-engaged]) .isn-calendly-frame {
margin-bottom: calc(-1 * var(--calendly-trim));
}
.isn-calendly-frame iframe {
display: block;
}
.isn-calendly-frame .calendly-spinner {
display: none;
}
.isn-calendly-fallback {
margin: 0;
padding: 14px var(--k-pad) var(--k-pad);
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-calendly-fallback[hidden] {
display: none;
}
.isn-calendly-fallback strong {
color: var(--i-ink);
font-weight: 600;
}
.isn-calendly-fallback a {
color: var(--i-ink);
text-decoration: underline;
text-decoration-color: var(--i-line);
text-underline-offset: 3px;
}
@media (min-width: 1201px) {
.isn-section--booking {
padding-top: clamp(36px, 3.2vw, 52px);
}
.isn-intake--calendly .isn-intake-sheet {
padding-top: 20px;
}
.isn-intake--calendly .isn-intake-head {
padding-bottom: 12px;
}
}
.isn-hero--cat .isn-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(400px, 34vw, 500px));
}
.isn-scan--calc {
padding: clamp(18px, 2vw, 24px);
}
.isn-scan--calc .isn-fields {
grid-template-columns: minmax(0, 1fr);
}
.isn-field--money {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.isn-field--money > .isn-field-money-prefix,
.isn-field--money > .isn-input {
grid-row: 2;
grid-column: 1;
}
.isn-field-money-prefix {
align-self: start;
z-index: 1;
display: flex;
align-items: center;
height: 48px;
margin-top: 6px;
padding-left: 14px;
font-size: var(--i-field);
color: var(--i-muted);
pointer-events: none;
}
.isn-field--money > .isn-input {
padding-left: 34px;
}
.isn-calc-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 2px 14px;
margin: clamp(14px, 1.5vw, 18px) 0 0;
padding-bottom: clamp(12px, 1.2vw, 14px);
border-bottom: 1px solid var(--i-line);
}
.isn-calc-row-label {
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-calc-row-value {
font-size: var(--i-small);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.isn-outcome--calc {
margin-top: clamp(14px, 1.5vw, 18px);
}
.isn-outcome--calc .isn-outcome-label {
margin-top: 0;
}
.isn-calc-figure {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
margin: 0;
font-size: var(--i-h2);
font-variant-numeric: tabular-nums;
}
.isn-calc-per {
font-family: var(--i-body);
font-size: var(--i-small);
font-weight: 600;
letter-spacing: var(--i-track-body);
color: #3f5c4e;
}
.isn-calc-fine {
margin-top: clamp(12px, 1.2vw, 14px);
}
.isn-calc-actions {
display: grid;
gap: 8px;
margin-top: clamp(14px, 1.5vw, 18px);
}
.isn-calc-more {
margin: 2px 0 0;
text-align: center;
}
.isn-scan--calc .isn-input:has(option[value='']:checked) {
color: var(--i-field-empty);
}
.isn-hero--catpage .isn-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, clamp(440px, 40vw, 700px));
grid-template-rows: auto auto;
grid-template-areas:
'copy card'
'spot card';
align-items: start;
align-content: center;
row-gap: clamp(22px, 1.7vw, 24px);
min-height: calc(100vh - var(--i-chrome) - var(--hero-pad-t) - var(--hero-pad-b));
min-height: calc(100svh - var(--i-chrome) - var(--hero-pad-t) - var(--hero-pad-b));
}
.isn-hero--catpage .isn-hero-copy {
grid-area: copy;
}
.isn-hero--catpage .isn-hero-copy .isn-eyebrow {
color: var(--i-blue);
font-size: clamp(12px, 1.11vw, 16px);
letter-spacing: var(--i-track-body);
text-transform: none;
}
.isn-hero--catpage .isn-hero-h {
font-size: clamp(34px, 8.4cqw, 60px);
}
.isn-hero--catpage .isn-scan--calc {
grid-area: card;
align-self: stretch;
border-color: rgb(0 0 0 / 4%);
box-shadow:
0 18px 45px rgb(15 23 42 / 8%),
0 4px 12px rgb(15 23 42 / 4%);
}
.isn-hero--catpage .isn-cat-spot {
grid-area: spot;
align-self: end;
}
.isn-hero--catpage .isn-scan--calc {
display: grid;
grid-template-areas: 'state';
}
.isn-hero--catpage .isn-calc-form,
.isn-hero--catpage .isn-calc-out {
grid-area: state;
display: flex;
flex-direction: column;
}
.isn-hero--catpage .isn-calc-form[hidden],
.isn-hero--catpage .isn-calc-out[hidden] {
display: flex !important;
visibility: hidden;
}
.isn-hero--catpage .isn-calc-form > .isn-step,
.isn-hero--catpage .isn-calc-out > .isn-step {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
.isn-hero--catpage .isn-step--compact .isn-step-cta,
.isn-hero--catpage .isn-calc-actions {
margin-top: auto;
padding-top: clamp(10px, 1.53vw, 22px);
}
.isn-hero--catpage .isn-step--compact .isn-scan-pill {
align-self: start;
margin-bottom: clamp(10px, 0.98vw, 14px);
}
.isn-hero--catpage .isn-step--compact .isn-calc-actions .isn-btn--quiet {
border-color: var(--i-line);
background-color: var(--i-white);
background-image: none;
box-shadow: none;
}
.isn-hero--catpage .isn-step--compact .isn-calc-actions .isn-btn--quiet:hover:not(:disabled),
.isn-hero--catpage .isn-step--compact .isn-calc-actions .isn-btn--quiet:active:not(:disabled) {
border-color: var(--i-ink);
background-image: none;
box-shadow: none;
}
.isn-hero--catpage .isn-scan--calc {
padding: clamp(18px, 1.53vw, 22px) clamp(18px, 2.5vw, 36px);
}
.isn-hero--catpage .isn-step--compact .isn-field {
margin-top: clamp(16px, 1.53vw, 22px);
}
.isn-hero--catpage .isn-field-money-prefix {
height: 56px;
}
.isn-hero--catpage .isn-step--compact .isn-micro--under {
font-size: var(--i-micro);
}
.isn-hero--catpage [data-calc-saving]:empty::before {
content: '\00a0';
}
.isn-cat-spot {
display: flex;
align-items: center;
gap: clamp(12px, 1.1vw, 16px);
width: fit-content;
max-width: 100%;
padding: clamp(10px, 0.9vw, 14px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
color: var(--i-ink);
}
.isn-cat-spot .isn-visual {
--visual-h: clamp(64px, 5.4vw, 78px);
--visual-pad: clamp(8px, 0.7vw, 10px);
flex: 0 0 auto;
width: clamp(76px, 6.4vw, 92px);
min-height: 0;
border-radius: var(--i-r-sm);
background: var(--a-soft);
}
.isn-cat-spot .isn-visual:has(> .isn-visual-img[src*="/branches/"]) {
--visual-pad: 3px;
}
.isn-cat-spot-text {
display: grid;
gap: 3px;
min-width: 0;
}
.isn-cat-spot-name {
font-family: var(--i-display);
font-size: clamp(15px, 1.3vw, 18px);
font-weight: 700;
letter-spacing: var(--i-track-h3);
line-height: 1.15;
}
.isn-cat-spot-copy {
max-width: 26em;
font-size: clamp(13px, 1.05vw, 14.5px);
line-height: 1.4;
color: var(--i-muted);
}
.isn-benefits--auto {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.isn-benefit-h:first-child {
margin-top: 0;
}
.isn-catgrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(14px, 1.5vw, 22px);
margin: 0;
padding: 0;
list-style: none;
}
.isn-cattile {
position: relative;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 4px;
padding: clamp(12px, 1.1vw, 16px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
color: var(--i-ink);
}
.isn-cattile .isn-visual {
--visual-h: clamp(150px, 12.4vw, 186px);
--visual-pad: clamp(10px, 1vw, 16px);
min-height: 0;
margin-bottom: clamp(10px, 1vw, 14px);
border-radius: var(--i-r-sm);
background: var(--a-soft);
}
.isn-cattile-name {
display: block;
font-family: var(--i-display);
font-size: clamp(15px, 1.3vw, 18px);
font-weight: 700;
letter-spacing: var(--i-track-h3);
line-height: 1.15;
}
.isn-cattile-copy {
display: block;
font-size: clamp(13px, 1.05vw, 14.5px);
line-height: 1.4;
color: var(--i-muted);
}
@media (max-width: 1200px) {
.isn-catgrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.isn-catgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 460px) {
.isn-catgrid {
gap: 10px;
}
.isn-cattile {
padding: 10px;
}
.isn-cattile .isn-visual {
--visual-h: 112px;
margin-bottom: 8px;
}
}
.isn-cat-link {
color: inherit;
text-decoration: none;
}
.isn-cat-link::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--i-r);
}
.isn-cat-link:hover::after {
box-shadow: inset 0 0 0 1.5px #1877f2;
}
.isn-section--catindex .isn-head {
margin-bottom: clamp(24px, 2.6vw, 38px);
}
.isn-catgrid-note {
max-width: 76ch;
margin-top: clamp(18px, 2vw, 26px);
}
.isn-brcalc-rows {
display: grid;
gap: 14px;
margin-top: clamp(14px, 1.4vw, 18px);
}
.isn-brcalc-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 0 10px;
}
.isn-brcalc-problem {
grid-column: 1 / -1;
}
.isn-brcalc-row .isn-field-label {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 8px;
}
.isn-brcalc-for {
font-weight: 500;
color: var(--i-muted);
}
.isn-brcalc-x {
display: grid;
place-items: center;
width: 48px;
height: 48px;
margin-top: 6px;
padding: 0;
border: 0;
border-radius: var(--i-r-sm);
background: none;
font-size: 20px;
line-height: 1;
color: var(--i-muted);
cursor: pointer;
}
.isn-brcalc-x:hover {
background: var(--i-paper);
color: var(--i-red);
}
.isn-brcalc-x:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 1px;
}
.isn-brcalc-none {
margin-top: 10px;
}
.isn-brcalc-add {
margin-top: 12px;
}
.isn-brcalc-add-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: var(--i-small);
font-weight: 700;
color: var(--i-ink);
cursor: pointer;
list-style: none;
}
.isn-brcalc-add-toggle::-webkit-details-marker {
display: none;
}
.isn-brcalc-add-toggle:hover {
color: var(--i-blue);
}
.isn-brcalc-add-toggle:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 2px;
border-radius: var(--r-xs);
}
.isn-brcalc-plus {
display: grid;
place-items: center;
flex: none;
width: 22px;
height: 22px;
border-radius: 7px;
background: var(--i-blue-soft);
font-size: 15px;
line-height: 1;
color: var(--i-blue);
transition: transform var(--dur-fast) var(--ease);
}
.isn-brcalc-add[open] .isn-brcalc-plus {
transform: rotate(45deg);
}
.isn-brcalc-add-panel {
max-height: 266px;
margin-top: 8px;
padding: 10px;
border-radius: var(--i-r-sm);
background: var(--i-paper);
overflow-y: auto;
overscroll-behavior: contain;
}
.isn-brcalc-add-title {
margin: 0 0 6px;
padding: 0 8px;
font-family: var(--i-mono);
font-size: var(--t-mono-sm);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: var(--i-muted);
}
.isn-brcalc-add-list {
display: grid;
}
.isn-brcalc-option {
padding: 10px 8px;
border: 0;
border-radius: var(--r-xs);
background: none;
font-family: var(--i-body);
font-size: var(--i-small);
text-align: left;
color: var(--i-ink);
cursor: pointer;
}
.isn-brcalc-option:hover {
background: var(--i-blue-soft);
}
.isn-brcalc-option:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: -2px;
}
.isn-brcalc-live {
margin-top: clamp(16px, 1.8vw, 22px);
}
.isn-calc-sep {
color: var(--i-muted);
}
.isn-spot {
position: relative;
}
.isn-spot-link {
color: inherit;
text-decoration: none;
}
.isn-spot-link::after {
content: '';
position: absolute;
inset: 0;
}
.isn-spot-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
.isn-brgrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(12px, 1.3vw, 18px);
margin: 0;
padding: 0;
list-style: none;
}
@media (max-width: 1200px) {
.isn-brgrid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.isn-brgrid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 460px) {
.isn-brgrid {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
}
.isn-br {
position: relative;
display: grid;
align-content: start;
gap: 8px;
padding: clamp(14px, 1.2vw, 18px);
border: 1px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
color: var(--i-ink);
box-shadow: 0 2px 6px rgb(10 10 10 / 6%);
transition:
border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease);
}
.isn-br-top {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
.isn-br-top .isn-nav-mark {
width: 40px;
height: 40px;
border-radius: 12px;
}
.isn-br-top .isn-nav-mark img {
width: 32px;
height: 32px;
}
.isn-br-top .isn-nav-mark .isn-ic > svg {
width: 26px;
height: 26px;
}
.isn-br-name {
display: block;
font-family: var(--i-display);
font-size: clamp(15px, 1.15vw, 17px);
font-weight: 700;
letter-spacing: var(--i-track-h3);
line-height: 1.2;
}
.isn-br-link {
color: inherit;
text-decoration: none;
}
.isn-br-link::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--i-r-sm);
}
.isn-br-copy {
display: block;
font-size: clamp(13px, 1.05vw, 14.5px);
line-height: 1.4;
color: var(--i-muted);
}
.isn-br .isn-btn-arrow {
color: var(--i-muted);
transition:
transform var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-br:hover {
border-color: var(--i-blue);
box-shadow: 0 6px 18px -8px rgb(10 10 10 / 14%);
}
.isn-br:hover .isn-br-link {
text-decoration: underline;
text-underline-offset: 3px;
}
.isn-br:hover .isn-btn-arrow {
color: var(--i-blue);
transform: translateX(3px);
}
.isn-section--brindex .isn-head {
margin-bottom: clamp(12px, 1.2vw, 16px);
}
.isn-brindex-claim {
max-width: 62ch;
margin: 0 0 clamp(24px, 2.6vw, 38px);
font-family: var(--i-display);
font-size: clamp(17px, 1.5vw, 21px);
font-weight: 700;
letter-spacing: var(--i-track-h3);
line-height: 1.3;
color: var(--i-ink);
}
.isn-section--brask {
padding-top: 0;
}
.isn-section--brask .isn-head {
margin-bottom: clamp(20px, 2vw, 28px);
}
.isn-brask-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 460px) {
.isn-br {
padding: 12px;
}
}
@media (max-width: 1200px) {
.isn-hero-grid {
grid-template-columns: minmax(0, 1fr);
gap: clamp(24px, 3vw, 34px);
}
.isn-hero-lead {
max-width: 52ch;
}
.isn-scan {
max-width: 600px;
}
.isn-hero-perks,
.isn-hero-cats {
max-width: 600px;
}
.isn-scan-grid {
grid-template-columns: minmax(0, 1fr);
gap: clamp(30px, 4vw, 44px);
}
.isn-scan-pitch {
max-width: 600px;
}
.isn-cgrid {
container-type: normal;
align-self: auto;
max-width: 600px;
}
.isn-cgrid-list {
width: 100%;
height: auto;
aspect-ratio: 1;
}
.isn-hero--scan .isn-hero-grid,
.isn-hero--cat .isn-hero-grid {
grid-template-columns: minmax(0, 1fr);
}
.isn-hero--scan .isn-hero-grid {
grid-template-rows: auto;
grid-template-areas:
'copy'
'scan'
'cats';
}
.isn-hero--scan .isn-scan {
display: block;
align-self: auto;
}
.isn-hero--catpage .isn-hero-grid {
grid-template-rows: auto;
grid-template-areas:
'copy'
'card'
'spot';
}
.isn-hero--scan .isn-hero-h,
.isn-hero--cat .isn-hero-h {
font-size: var(--i-hero);
}
.isn-hero-note:not(.isn-compare-note),
.isn-scan-foot {
display: none;
}
.isn-section--mission {
--i-mission-measure: 560px;
--i-mission-fade: 260px;
min-height: 640px;
background-image: var(--i-mission-wash), url('../assets/photos/isn-mission-1200.webp');
background-image: var(--i-mission-wash),
image-set(
url('../assets/photos/isn-mission-1200.avif') type('image/avif'),
url('../assets/photos/isn-mission-1200.webp') type('image/webp')
);
}
}
@media (max-width: 1080px) {
.isn-founder {
grid-template-columns: minmax(0, 1fr);
}
.isn-utility-claims {
gap: 18px;
}
.isn-utility-nav {
gap: 16px;
}
.isn-help {
grid-template-columns: minmax(0, 1fr);
gap: clamp(22px, 2.6vw, 32px);
}
}
@media (max-width: 1000px) {
.isn-compare,
.isn-compare-foot {
grid-template-columns: minmax(0, 1fr);
}
.isn-compare-note {
grid-column: 1;
}
}
@media (max-width: 900px) {
.isn-utility-nav > .isn-utility-link {
display: none;
}
.isn-benefits {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.isn-section--mission {
min-height: 560px;
}
.isn-visit {
grid-template-columns: minmax(0, 1fr);
}
.isn-visit-photo {
justify-self: start;
}
}
@media (max-width: 720px) {
.isn-hero-steps {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
row-gap: 16px;
padding-top: 24px;
}
.isn-hero-step {
grid-row: auto;
grid-template-rows: none;
row-gap: 5px;
}
.isn-hero-step + .isn-hero-step {
padding-top: 16px;
border-top: 1px solid var(--i-line);
}
.isn-hero-step + .isn-hero-step::before {
display: none;
}
.isn-cc {
--cc-vis: clamp(44px, 38cqw, 116px);
}
.isn-rail-arrow {
width: 34px;
height: 34px;
}
.isn-chiprow-arrows {
display: none;
}
.isn-chip-mark {
width: 24px;
height: 24px;
}
.isn-chip .isn-ic > svg {
width: 22px;
height: 22px;
}
.isn-chip-img {
width: 24px;
height: 24px;
}
.isn-step-actions {
flex-direction: column;
align-items: stretch;
}
.isn-step-actions .isn-btn {
justify-content: center;
}
.isn-step-actions .isn-micro {
order: 2;
margin: 4px 0 0;
text-align: center;
}
.isn-flow {
--flow-h: 176px;
grid-template-columns: minmax(0, 1fr);
row-gap: clamp(16px, 3.4vw, 22px);
}
.isn-flow-arrow {
width: 30px;
height: 30px;
justify-self: center;
margin-top: 0;
rotate: 90deg;
}
.isn-help-list {
grid-template-columns: minmax(0, 1fr);
row-gap: 28px;
}
.isn-help-copy {
max-width: none;
}
.isn-section--mission {
--i-mission-wash: linear-gradient(
to right,
color-mix(in srgb, var(--i-paper) 95%, transparent) 0,
color-mix(in srgb, var(--i-paper) 91%, transparent) 55%,
color-mix(in srgb, var(--i-paper) 86%, transparent) 100%
);
min-height: 0;
background-image: var(--i-mission-wash), url('../assets/photos/isn-mission-640.webp');
background-image: var(--i-mission-wash),
image-set(
url('../assets/photos/isn-mission-640.avif') type('image/avif'),
url('../assets/photos/isn-mission-640.webp') type('image/webp')
);
}
.isn-mission-h,
.isn-mission-copy {
max-width: none;
}
}
@media (max-width: 560px) {
.isn-utility-claim:nth-child(3) {
display: none;
}
.isn-utility-claims {
gap: 14px;
}
}
@media (max-width: 460px) {
.isn-hero-h {
letter-spacing: -0.035em;
}
.isn-hero-claims {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.isn-hero-claim {
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 12px;
}
.isn-hero-claim .isn-ic > svg {
width: 30px;
height: 30px;
}
.isn-hero-perks {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
.isn-hero-claims--row {
gap: 16px 26px;
}
.isn-hero-claims--row .isn-claim-img,
.isn-hero-claims--row .isn-ic > svg {
width: 34px;
height: 34px;
}
.isn-scan {
padding: 18px 16px;
}
.isn-cat {
width: 148px;
}
.isn-cat .isn-visual {
--visual-h: 106px;
}
.isn-benefits {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 359px) {
.isn-utility-claim:nth-child(2) {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.isn-step-cards.is-in .isn-una-write {
animation: none;
}
.isn-chip-mark > * {
transition: none;
}
.isn-cc,
.isn-cc-tile,
.isn-cc-bm,
.isn-cc-more,
.isn-cc-spend,
.isn-cc-glow,
.isn-cc-plate,
.isn-cc-lockup,
.isn-cc-vol,
.isn-cc-vt,
.isn-cc-cap,
.isn-cc-kicker,
.isn-cc-pct {
transition: none;
}
.isn-cc-glow,
.isn-cc-plate::after {
animation: none;
}
.isn-step--compact .isn-btn--block:hover:not(:disabled),
.isn-step--compact .isn-btn--block:active:not(:disabled),
.isn-step--compact .isn-btn--block:hover .isn-btn-arrow {
transform: none;
}
}
.isn-hero--catpage .isn-scan--brflow {
align-self: start;
}
.isn-hero--catpage .isn-brflow-form {
grid-area: state;
display: grid;
min-width: 0;
}
.isn-hero--catpage .isn-brflow-step {
display: flex;
flex-direction: column;
min-width: 0;
}
.isn-hero--catpage .isn-scan--brflow {
padding-top: clamp(13px, 2.5vw, 36px);
}
.isn-hero--catpage .isn-brflow-step .isn-scan-pill {
margin-bottom: clamp(10px, 1.67vw, 24px);
}
.isn-hero--catpage .isn-brflow-step > .isn-step-hint + .isn-field {
margin-top: clamp(16px, 2.64vw, 38px);
}
@media (max-width: 460px) {
.isn-hero--catpage .isn-scan--brflow {
padding-top: 18px;
}
}
.isn-brcalc-live .isn-calc-figure {
font-size: clamp(26px, 3.4vw, 42px);
}
.isn-adv--link {
position: relative;
}
.isn-adv-link {
color: inherit;
text-decoration: none;
}
.isn-adv-link::after {
content: '';
position: absolute;
inset: 0;
border-radius: var(--i-r);
}
.isn-adv--link:hover .isn-adv-link {
text-decoration: underline;
text-underline-offset: 3px;
}
.isn-adv-link:hover::after {
box-shadow: inset 0 0 0 1.5px var(--i-blue);
}
.isn-adv-link:focus-visible {
outline: 2px solid var(--i-ink);
outline-offset: 3px;
}
.isn-section--scanflow {
background: var(--i-paper);
}
.isn-shell--scanflow {
display: grid;
justify-items: center;
}
.isn-scanflow {
width: 100%;
max-width: var(--i-flow-measure, 720px);
}
.isn-scanflow--report {
--i-flow-measure: 980px;
}
.isn-scan--flow {
padding: clamp(20px, 2.4vw, 34px);
}
.isn-h--flow {
font-size: var(--i-h3);
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-scan--flow > .isn-lead {
margin-top: 10px;
}
.isn-scanflow-host {
font-weight: 700;
overflow-wrap: anywhere;
}
.isn-scanflow-meter {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
margin-top: clamp(20px, 2.2vw, 28px);
}
.isn-scanflow-bar {
height: 8px;
overflow: hidden;
border-radius: 999px;
background: var(--i-grey);
}
.isn-scanflow-fill {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--i-blue);
transition: width var(--dur) var(--ease);
}
.isn-scanflow-pct {
margin: 0;
font-family: var(--i-mono);
font-size: var(--i-micro);
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--i-muted);
}
.isn-scanflow-steps {
display: grid;
gap: clamp(14px, 1.6vw, 20px);
margin: clamp(22px, 2.4vw, 30px) 0 0;
padding: 0;
list-style: none;
}
.isn-scanflow-step {
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
align-items: start;
gap: 12px;
}
.isn-scanflow-step-mark {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--i-grey);
color: var(--i-muted);
transition:
background-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-scanflow-step[data-state='active'] .isn-scanflow-step-mark,
.isn-scanflow-step[data-state='completed'] .isn-scanflow-step-mark {
background: var(--i-blue);
color: var(--i-white);
}
.isn-scanflow-step-num {
font-family: var(--i-mono);
font-size: var(--t-mono-sm);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.isn-scanflow-step-tick {
display: none;
}
.isn-scanflow-step[data-state='completed'] .isn-scanflow-step-num {
display: none;
}
.isn-scanflow-step[data-state='completed'] .isn-scanflow-step-tick {
display: block;
}
.isn-scanflow-step-body {
display: grid;
gap: 2px;
}
.isn-scanflow-step-label {
display: block;
font-size: var(--i-small);
font-weight: 700;
}
.isn-scanflow-step[data-state='upcoming'] .isn-scanflow-step-label {
font-weight: 400;
color: var(--i-muted);
}
.isn-scanflow-step-msgs {
display: block;
min-height: 1lh;
font-size: var(--i-micro);
color: var(--i-muted);
}
.isn-step-title--gate {
font-size: var(--i-h3);
}
.isn-scanflow-found {
margin: clamp(10px, 1.1vw, 14px) 0 0;
font-size: var(--i-small);
font-weight: 700;
}
.isn-scanflow-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 10px 0 0;
padding: 0;
list-style: none;
}
.isn-scanflow-chips > li {
padding: 6px 12px;
border-radius: 999px;
background: var(--i-blue-soft);
font-family: var(--i-mono);
font-size: var(--i-micro);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: var(--i-blue);
}
.isn-scanflow-more {
margin: 8px 0 0;
}
.isn-scanflow-gate-form {
margin-top: clamp(16px, 1.8vw, 22px);
}
.isn-scanflow-failed {
margin: 8px 0 0;
}
.isn-scanflow-error {
padding: clamp(20px, 2.4vw, 34px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
}
.isn-scanflow-error-h {
margin: 0;
font-family: var(--i-display);
font-size: var(--i-h3);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-scanflow-error-body {
margin: 8px 0 0;
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-scanflow-error-do {
margin: clamp(14px, 1.6vw, 20px) 0 0;
}
.isn-scanflow-back {
margin: 10px 0 0;
font-size: var(--i-small);
}
.isn-report-metrics {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: clamp(14px, 1.6vw, 20px);
margin-top: clamp(22px, 2.4vw, 30px);
}
.isn-report-primary {
margin-top: 0;
}
.isn-report-side {
padding: clamp(14px, 1.6vw, 18px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
}
.isn-report-side > .isn-calc-row:first-of-type {
margin-top: 0;
}
.isn-report-side > .isn-calc-row:last-of-type {
padding-bottom: 0;
border-bottom: 0;
}
.isn-report-rows {
display: grid;
gap: 10px;
margin: clamp(22px, 2.4vw, 30px) 0 0;
padding: 0;
list-style: none;
}
.isn-report-row {
padding: clamp(14px, 1.6vw, 20px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
transition: border-color var(--dur-fast) var(--ease);
}
.isn-report-row[data-source='entered'] {
border-color: var(--i-blue);
}
.isn-report-row-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 4px 14px;
}
.isn-report-name {
margin: 0;
font-family: var(--i-mono);
font-size: var(--i-micro);
font-weight: 500;
letter-spacing: var(--i-track-label);
}
.isn-report-source {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: var(--i-micro);
color: var(--i-muted);
}
.isn-report-row[data-source='entered'] .isn-report-source {
color: var(--i-blue);
}
.isn-report-tip-open {
display: grid;
place-items: center;
width: 18px;
height: 18px;
padding: 0;
border: 1px solid var(--i-line);
border-radius: 50%;
background: var(--i-white);
font-family: var(--i-mono);
font-size: var(--t-mono-sm);
color: var(--i-muted);
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-report-tip-open:hover {
border-color: var(--i-ink);
color: var(--i-ink);
}
.isn-report-figures {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(10px, 1.2vw, 16px);
margin: clamp(12px, 1.4vw, 16px) 0 0;
}
.isn-report-fig > dt {
margin: 0;
font-size: var(--i-micro);
color: var(--i-muted);
}
.isn-report-fig > dd {
margin: 4px 0 0;
font-size: var(--i-small);
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.isn-report-spend,
.isn-report-saving {
font-size: var(--i-h3);
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-report-per {
font-family: var(--i-body);
font-size: var(--i-micro);
font-weight: 400;
color: var(--i-muted);
}
.isn-report-edit {
margin-top: clamp(12px, 1.4vw, 16px);
}
.isn-btn--tiny {
min-height: 36px;
padding: 0 14px;
font-size: var(--i-micro);
}
.isn-report-field {
max-width: 280px;
margin-top: 10px;
}
.isn-report-tip {
position: relative;
margin-top: clamp(12px, 1.4vw, 16px);
padding: clamp(14px, 1.6vw, 18px);
padding-right: clamp(46px, 3.4vw, 50px);
border: 1px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-paper);
}
.isn-report-tip-h {
margin: 0;
font-size: var(--i-small);
font-weight: 700;
}
.isn-report-tip-body {
margin: 6px 0 0;
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-report-tip-x {
position: absolute;
top: 8px;
right: 8px;
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
font-size: var(--i-small);
color: var(--i-muted);
cursor: pointer;
transition: color var(--dur-fast) var(--ease);
}
.isn-report-tip-x:hover {
color: var(--i-ink);
}
.isn-report-final {
margin-top: clamp(26px, 2.8vw, 38px);
padding: clamp(20px, 2.4vw, 30px);
border-radius: var(--i-r);
background: var(--i-paper);
}
.isn-report-final > .isn-step-hint {
max-width: 62ch;
}
@media (max-width: 900px) {
.isn-report-figures {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.isn-report-metrics {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 460px) {
.isn-report-figures {
grid-template-columns: minmax(0, 1fr);
}
.isn-scanflow-step {
grid-template-columns: 22px minmax(0, 1fr);
gap: 10px;
}
.isn-scanflow-step-mark {
width: 22px;
height: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.isn-scanflow-fill,
.isn-scanflow-step-mark,
.isn-report-row,
.isn-report-tip-open,
.isn-report-tip-x {
transition: none;
}
}
.isn-lang {
z-index: 60;
}
.isn-lang-toggle {
display: flex;
gap: 7px;
list-style: none;
cursor: pointer;
transition: color var(--dur-fast) var(--ease);
}
.isn-lang-toggle::-webkit-details-marker {
display: none;
}
.isn-lang-toggle:hover,
.isn-lang-toggle:focus-visible,
.isn-lang[open] > .isn-lang-toggle {
color: var(--i-ink);
}
.isn-lang-flag {
flex: none;
width: 18px;
height: 18px;
}
.isn-lang .nav-drop-caret {
flex: none;
margin-top: 0;
}
.isn-lang-menu {
--lang-pad: 6px;
position: absolute;
top: calc(100% + 10px);
right: 0;
padding: var(--lang-pad);
border: 1px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
box-shadow:
0 1px 2px rgb(10 10 10 / 5%),
0 20px 44px -26px rgb(10 10 10 / 18%);
}
.isn-lang-list {
margin: 0;
padding: 0;
list-style: none;
}
.isn-lang-opt {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 7px 9px;
border-radius: calc(var(--i-r-sm) - var(--lang-pad));
font-family: var(--i-body);
font-size: var(--i-micro);
font-weight: 500;
line-height: 1;
letter-spacing: 0;
color: var(--i-strip-fg);
text-decoration: none;
white-space: nowrap;
cursor: default;
}
.isn-lang-opt-name {
display: flex;
align-items: center;
gap: 7px;
}
a.isn-lang-opt {
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
a.isn-lang-opt:hover,
a.isn-lang-opt:focus-visible {
background: var(--i-blue-soft);
color: var(--i-ink);
}
.isn-lang-opt[aria-current] {
background: var(--i-blue-soft);
color: var(--i-ink);
}
.isn-lang-opt--soon .isn-lang-flag {
opacity: 0.55;
}
.isn-lang-opt-state {
display: flex;
align-items: center;
color: var(--i-muted);
}
@media (max-width: 970px) {
.isn-lang-name {
display: none;
}
}
.isn-section--join {
--i-join-measure: 1040px;
--i-join-card: 720px;
background: var(--i-paper);
}
.isn-shell--join {
display: grid;
grid-template-columns: minmax(0, 1fr);
justify-items: center;
}
.isn-join {
width: 100%;
max-width: var(--i-join-measure);
}
.isn-joinstep.isn-scan--flow,
.isn-joindone {
max-width: var(--i-join-card);
margin-inline: auto;
}
.isn-joindone {
display: grid;
gap: clamp(16px, 1.8vw, 24px);
}
.isn-joinbar {
display: flex;
margin: 0 0 clamp(22px, 2.4vw, 34px);
padding: 0;
list-style: none;
}
.isn-joinbar-step {
position: relative;
display: grid;
flex: 1 1 0;
justify-items: center;
gap: 9px;
min-width: 0;
text-align: center;
}
.isn-joinbar-step + .isn-joinbar-step::before {
content: '';
position: absolute;
top: 17px;
right: calc(50% + 26px);
left: calc(-50% + 26px);
height: 2px;
border-radius: 1px;
background: var(--i-line);
transition: background-color var(--dur-fast) var(--ease);
}
.isn-joinbar-step[data-state='completed'] + .isn-joinbar-step::before {
background: var(--i-blue);
}
.isn-joinbar-mark {
position: relative;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 2px solid var(--i-line);
border-radius: 50%;
background: var(--i-white);
box-sizing: border-box;
font-family: var(--i-mono);
font-size: var(--i-micro);
font-weight: 700;
color: var(--i-muted);
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
box-shadow var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.isn-joinbar-step[data-state='active'] .isn-joinbar-mark,
.isn-joinbar-step[data-state='completed'] .isn-joinbar-mark {
border-color: var(--i-blue);
background: var(--i-blue);
color: var(--i-white);
}
.isn-joinbar-step[data-state='active'] .isn-joinbar-mark {
box-shadow: 0 0 0 5px var(--i-strip);
transform: scale(1.12);
}
.isn-joinbar-tick {
display: none;
}
.isn-joinbar-step[data-state='completed'] .isn-joinbar-num {
display: none;
}
.isn-joinbar-step[data-state='completed'] .isn-joinbar-tick {
display: block;
}
.isn-joinbar-label {
font-size: var(--i-micro);
font-weight: 700;
line-height: 1.3;
color: var(--i-muted);
text-wrap: balance;
}
.isn-joinbar-step[data-state='active'] .isn-joinbar-label,
.isn-joinbar-step[data-state='completed'] .isn-joinbar-label {
color: var(--i-ink);
}
.isn-joinpicks-block,
.isn-joinrail-block,
.isn-joinspend-block {
margin-top: clamp(24px, 2.8vw, 40px);
}
.isn-joinspend-block {
padding: clamp(16px, 1.8vw, 24px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
}
.isn-joinsub {
margin: 0;
font-size: var(--i-lead);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-joinempty {
margin: 14px 0 0;
padding: 14px 16px;
border: 1.5px dashed var(--i-line);
border-radius: var(--i-r-sm);
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-joinpicks {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 12px;
margin-top: 14px;
}
.isn-joincategories {
display: grid;
gap: 24px;
margin-top: 20px;
}
.isn-joincategory-group {
min-width: 0;
}
.isn-joincategory-title {
margin: 0 0 10px;
font-size: var(--i-small);
line-height: 1.4;
font-weight: 600;
color: var(--i-muted);
}
.isn-joincategory-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.isn-joincard {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
padding-bottom: 12px;
border: 1.5px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.isn-joincard-input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.isn-joincard .isn-visual {
--visual-h: 92px;
--visual-pad: 12px;
}
.isn-joincard-body {
display: grid;
min-width: 0;
align-content: start;
gap: 3px;
padding: 0 12px;
}
.isn-joincard-name {
min-width: 0;
font-size: var(--i-small);
font-weight: 700;
line-height: 1.25;
overflow-wrap: break-word;
}
.isn-joincard-line {
font-size: var(--i-micro);
line-height: 1.4;
color: var(--i-muted);
}
.isn-joincard-tick {
position: absolute;
top: 8px;
right: 8px;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border: 1.5px solid var(--i-line);
border-radius: 50%;
background: var(--i-white);
color: transparent;
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-joincard:hover {
border-color: var(--i-muted);
}
.isn-joincard:has(.isn-joincard-input:checked) {
border-color: var(--i-blue);
background: var(--i-blue-soft);
}
.isn-joincard:has(.isn-joincard-input:checked) .isn-joincard-tick {
border-color: var(--i-blue);
background: var(--i-blue);
color: var(--i-white);
}
.isn-joincard:has(.isn-joincard-input:focus-visible) {
outline: 2px solid var(--i-blue);
outline-offset: 2px;
}
.isn-joincategories .isn-joincard {
min-width: 0;
}
.isn-joincategories .isn-joincard .isn-visual {
--visual-h: 64px;
--visual-pad: 8px;
}
.isn-joincategories .isn-joincard-line {
display: none;
}
.isn-joinspends {
display: grid;
gap: 10px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.isn-joinspend {
display: grid;
grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
align-items: center;
gap: 6px 16px;
padding: 10px 12px;
border: 1.5px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.isn-joinspend-head {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.isn-joinspend-head .isn-visual {
--visual-h: 34px;
--visual-pad: 1px;
flex: none;
width: 34px;
}
.isn-joinspend-name {
font-size: var(--i-small);
font-weight: 700;
line-height: 1.25;
}
.isn-joinspend-body {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
min-width: 0;
}
.isn-joinpills {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(max-content, 1fr);
flex: 1;
gap: 6px;
min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.isn-joinpills::-webkit-scrollbar {
display: none;
}
.isn-joinpill {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 clamp(6px, 0.75vw, 12px);
border: 1.5px solid var(--i-line);
border-radius: 999px;
background: var(--i-white);
font-size: var(--i-micro);
font-weight: 700;
color: var(--i-ink);
white-space: nowrap;
cursor: pointer;
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-joinpill input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.isn-joinpill:hover {
border-color: var(--i-muted);
}
.isn-joinpill:has(input:focus-visible) {
outline: 2px solid var(--i-blue);
outline-offset: 2px;
}
.isn-joinpill--unknown:not(:has(input:checked)) {
border-style: dashed;
color: var(--i-muted);
}
.isn-joinspend[data-join-confirmed='true'] .isn-joinpill:has(input:checked) {
border-color: var(--i-blue);
background: var(--i-blue);
color: var(--i-white);
}
.isn-joinspend:has(.isn-joinpills[aria-invalid='true']) {
border-color: var(--i-red);
background: var(--i-red-soft);
}
.isn-joinpills[aria-invalid='true'] .isn-joinpill:has(input:checked) {
border-color: var(--i-red);
}
.isn-joinspend-state {
display: none;
}
.isn-joinspend-word {
font-family: var(--i-mono);
font-size: var(--i-micro);
letter-spacing: var(--i-track-label);
color: var(--i-muted);
white-space: nowrap;
}
.isn-joinspend-word--done {
color: #0d7a4a;
}
.isn-joinspend-given {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
min-width: 0;
}
.isn-joincard-given {
display: grid;
gap: 2px;
font-size: var(--i-micro);
line-height: 1.4;
}
.isn-joincard-given-value {
font-weight: 700;
color: var(--i-ink);
}
.isn-joinspend-given-value {
font-size: var(--i-small);
font-weight: 700;
color: var(--i-ink);
}
.isn-joincard[data-join-prefill]:has(.isn-joincard-input:checked),
.isn-joincard[data-join-prefill]:has(.isn-joincard-input:checked):hover {
border-color: var(--i-line);
background: var(--i-paper);
}
.isn-joincard[data-join-prefill]:has(.isn-joincard-input:checked) .isn-joincard-tick {
border-color: var(--i-line);
background: var(--i-white);
color: var(--i-muted);
}
.isn-joincard[data-join-prefill] .isn-joinspend-word--done,
.isn-joinspend[data-join-prefill] .isn-joinspend-given .isn-joinspend-word--done {
color: color-mix(in srgb, #0d7a4a 50%, var(--i-muted));
}
.isn-joinspend[data-join-prefill]:not([data-join-editing]) {
background: var(--i-paper);
}
.isn-joinspend[data-join-prefill] .isn-joinspend-given {
flex: 1 1 auto;
}
.isn-joinspend[data-join-prefill] .isn-joinspend-given-value {
font-weight: 500;
color: var(--i-strip-fg);
}
.isn-joinspend-edit {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 30px;
margin-left: auto;
padding: 0 12px;
border: 1px solid var(--i-line);
border-radius: 999px;
background: var(--i-white);
font: inherit;
font-size: var(--i-micro);
font-weight: 600;
color: var(--i-muted);
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-joinspend-edit:hover {
border-color: var(--i-muted);
color: var(--i-strip-fg);
}
.isn-joinspend-edit:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 2px;
}
.isn-joinspend-edit[hidden] {
display: none;
}
.isn-joinfoot {
position: sticky;
bottom: 12px;
z-index: 3;
display: flex;
flex-direction: column-reverse;
gap: 10px;
margin-top: clamp(20px, 2.2vw, 30px);
}
.isn-joinlive {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
align-items: center;
gap: 12px 22px;
padding: clamp(12px, 1.2vw, 16px) clamp(14px, 1.4vw, 20px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
box-shadow:
0 2px 6px rgb(10 10 10 / 5%),
0 10px 30px rgb(10 10 10 / 10%);
}
.isn-joinlive-count {
position: relative;
min-width: 0;
}
.isn-joinlive-selection {
--join-thumb-size: 56px;
--join-thumb-pad: 8px;
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.isn-joinlive-selection[hidden] {
display: none;
}
.isn-joinlive-thumbs {
display: flex;
gap: 8px;
min-width: 0;
max-width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
}
.isn-joinlive-thumbs[hidden] {
display: none;
}
.isn-joinlive-thumbs > li {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
flex: 0 0 var(--join-thumb-size);
width: var(--join-thumb-size);
height: var(--join-thumb-size);
padding: var(--join-thumb-pad);
overflow: hidden;
border: 1px solid var(--i-line);
border-radius: 50%;
background: var(--i-white);
}
.isn-joinlive-thumbs img {
display: block;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.isn-joinlive-more {
flex: 0 0 auto;
width: var(--join-thumb-size);
height: var(--join-thumb-size);
min-width: 44px;
min-height: 44px;
padding: 0;
border: 1px solid var(--i-blue);
border-radius: 50%;
background: var(--i-blue-soft);
font-family: var(--i-body);
font-size: 18px;
font-weight: 700;
color: var(--i-blue);
cursor: pointer;
}
.isn-joinlive-more[hidden] {
display: none;
}
.isn-joinlive-more:hover {
background: var(--i-blue);
color: var(--i-white);
}
.isn-joinlive-more:focus-visible,
.isn-joinselection:focus-visible,
.isn-joinselection-close:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 3px;
}
.isn-joinselection {
display: flex;
flex-direction: column;
gap: 12px;
max-height: min(380px, 45dvh);
}
.isn-joinselection[hidden] {
display: none;
}
.isn-joinselection-header {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.isn-joinselection .isn-joinselection-close {
min-height: 44px;
}
.isn-joinselection-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
min-height: 0;
margin: 0;
padding: 0;
overflow-y: auto;
overscroll-behavior-y: contain;
list-style: none;
}
.isn-joinselection-item {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 8px;
border: 1px solid var(--i-line);
border-radius: 12px;
background: var(--i-white);
}
.isn-joinselection-photo {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
place-items: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
padding: 6px;
overflow: hidden;
border: 1px solid var(--i-line);
border-radius: 50%;
}
.isn-joinselection-photo img {
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.isn-joinselection-name {
font-size: var(--i-small);
line-height: 1.35;
hyphens: auto;
overflow-wrap: break-word;
}
.isn-joinlive-countline {
margin: 0;
font-size: var(--i-small);
font-weight: 700;
}
.isn-joinlive-names {
margin: 3px 0 0;
font-size: var(--i-micro);
line-height: 1.4;
color: var(--i-muted);
}
.isn-joinlive-figure {
display: grid;
gap: 3px;
justify-items: start;
}
.isn-joinlive-label {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
font-family: var(--i-mono);
font-size: var(--i-micro);
letter-spacing: var(--i-track-label);
color: var(--i-muted);
}
.isn-joinlive-amount {
margin: 0;
font-family: var(--i-display);
font-size: var(--i-h3);
font-weight: 800;
letter-spacing: var(--i-track-h3);
line-height: 1.05;
color: #0d7a4a;
font-variant-numeric: tabular-nums;
text-wrap: balance;
}
.isn-joinlive-info {
display: grid;
place-items: center;
width: 22px;
height: 22px;
padding: 0;
border: 1.5px solid var(--i-line);
border-radius: 50%;
background: var(--i-white);
font-family: var(--i-body);
font-size: 11px;
font-weight: 700;
line-height: 1;
color: var(--i-muted);
cursor: pointer;
transition:
border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease);
}
.isn-joinlive-info:hover {
border-color: var(--i-ink);
color: var(--i-ink);
}
.isn-joininfo {
padding: clamp(14px, 1.4vw, 18px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-blue-soft);
}
.isn-joininfo-title {
margin: 0;
font-size: var(--i-small);
font-weight: 700;
}
.isn-joininfo-body {
max-width: 76ch;
margin: 6px 0 0;
font-size: var(--i-micro);
line-height: var(--i-lead-body);
color: var(--i-strip-fg);
}
.isn-joininfo-close,
.isn-joinback-btn {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 34px;
padding: 0;
border: 0;
background: none;
font-family: var(--i-body);
font-size: var(--i-small);
font-weight: 700;
color: var(--i-muted);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color var(--dur-fast) var(--ease);
}
.isn-joininfo-close:hover,
.isn-joinback-btn:hover {
color: var(--i-ink);
}
.isn-joinback {
margin-top: clamp(14px, 1.6vw, 20px);
}
.isn-btn--join {
min-height: 60px;
font-size: clamp(14px, 1.32vw, 19px);
gap: 1.06em;
border-color: transparent;
background-color: var(--i-blue);
background-image: linear-gradient(to bottom, var(--i-cta-top), var(--i-cta-bottom));
box-shadow: 0 3px 12px var(--i-cta-cast);
transition:
box-shadow var(--dur-fast) var(--ease),
transform var(--dur-fast) var(--ease);
}
.isn-btn--join .isn-btn-arrow {
width: 1.22em;
height: 1.22em;
}
.isn-btn--join:hover:not(:disabled) {
transform: translateY(-2px);
background-image: linear-gradient(
to bottom,
var(--i-cta-top-hover),
var(--i-cta-bottom-hover)
);
box-shadow: 0 5px 14px var(--i-cta-cast);
}
.isn-btn--join:active:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 1px 6px var(--i-cta-cast);
}
.isn-btn--join:focus-visible {
border-radius: var(--i-r-sm);
outline-color: var(--i-ink);
}
.isn-btn--join:disabled {
opacity: 0.42;
box-shadow: none;
cursor: not-allowed;
}
.isn-joinstep .isn-step-cta {
grid-template-columns: minmax(0, 1fr);
}
.isn-btn--join {
white-space: normal;
}
.isn-joinchecks {
display: grid;
gap: 12px;
margin-top: clamp(14px, 1.6vw, 20px);
}
.isn-joinstep .isn-joinchecks + .isn-step-cta {
margin-top: clamp(14px, 1.6vw, 20px);
}
.isn-joincheck {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
cursor: pointer;
}
.isn-joincheck input {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
}
.isn-joincheck-box {
display: grid;
place-items: center;
width: 22px;
height: 22px;
margin-top: 1px;
border: 1.5px solid var(--i-line);
border-radius: 7px;
background: var(--i-white);
box-sizing: border-box;
color: var(--i-white);
transition:
background-color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.isn-joincheck-box > svg {
opacity: 0;
transition: opacity var(--dur-fast) var(--ease);
}
.isn-joincheck:has(input:checked) .isn-joincheck-box {
border-color: var(--i-blue);
background: var(--i-blue);
}
.isn-joincheck:has(input:checked) .isn-joincheck-box > svg {
opacity: 1;
}
.isn-joincheck:has(input:focus-visible) .isn-joincheck-box {
outline: 2px solid var(--i-blue);
outline-offset: 2px;
}
.isn-joincheck:has(input[aria-invalid='true']) .isn-joincheck-box {
border-color: var(--i-red);
}
.isn-joincheck-text {
font-size: var(--i-small);
line-height: 1.5;
}
.isn-joincheck-text a,
.isn-joinagreement a {
color: var(--i-ink);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.isn-joincheck-text a:hover,
.isn-joinagreement a:hover {
color: var(--i-blue);
}
.isn-joindone-per {
margin: 4px 0 0;
}
.isn-joindone .isn-step-hint + .isn-joinsub {
margin-top: clamp(24px, 2.8vw, 40px);
}
.isn-joindone .isn-joinflow + .isn-micro {
margin-top: 16px;
}
.isn-joindone-list {
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.isn-joindone-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto;
gap: 4px 16px;
padding: 10px 0;
border-bottom: 1px solid var(--i-line);
font-size: var(--i-small);
}
.isn-joindone-row:last-child {
border-bottom: 0;
}
.isn-joindone-row--head {
padding-bottom: 6px;
font-family: var(--i-mono);
font-size: var(--i-micro);
font-weight: 500;
letter-spacing: var(--i-track-label);
color: var(--i-muted);
}
.isn-joindone-name {
min-width: 0;
font-weight: 700;
}
.isn-joindone-spend {
min-width: 8ch;
color: var(--i-muted);
font-variant-numeric: tabular-nums;
text-align: right;
}
.isn-joindone-saving {
min-width: 11ch;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-align: right;
}
.isn-joindone-row--head .isn-joindone-name,
.isn-joindone-row--head .isn-joindone-saving {
font-weight: 500;
}
.isn-joinflow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 22px);
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.isn-joinflow-step {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px;
}
.isn-joinflow-num {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--i-blue);
font-family: var(--i-mono);
font-size: var(--i-micro);
font-weight: 700;
color: var(--i-white);
}
.isn-joinflow-label {
font-size: var(--i-small);
font-weight: 700;
line-height: 1.35;
}
.isn-joinbody {
max-width: 70ch;
margin: 12px 0 0;
font-size: var(--i-small);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-joindone-exits {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin: clamp(16px, 1.8vw, 24px) 0 0;
}
.isn-joindone-home {
font-size: var(--i-small);
font-weight: 700;
color: var(--i-muted);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--dur-fast) var(--ease);
}
.isn-joindone-home:hover {
color: var(--i-ink);
}
.isn-joinref-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 6px 0 0;
}
.isn-joinref-value {
flex: 1 1 320px;
min-width: 0;
font-weight: 700;
text-overflow: ellipsis;
cursor: text;
}
.isn-joinref-value--code {
flex: 0 0 auto;
width: 9em;
}
.isn-input--code {
font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.isn-input--code::placeholder {
font-weight: 400;
letter-spacing: 0.08em;
text-transform: none;
opacity: 0.55;
}
.isn-joinref-copy {
flex: 0 0 auto;
}
.isn-joinref-copied {
margin: 8px 0 0;
font-weight: 700;
color: var(--i-ink);
}
.isn-joinref-ask {
margin: clamp(12px, 1.2vw, 18px) 0 0;
}
.isn-joinref-reveal {
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: var(--i-small);
font-weight: 700;
color: var(--i-ink);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color var(--dur-fast) var(--ease);
}
.isn-joinref-reveal:hover {
color: var(--i-blue);
}
.isn-joinref-reveal:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 3px;
border-radius: 2px;
}
.isn-joinref-panel {
margin: 10px 0 0;
}
.isn-joinref-applied {
color: var(--i-ink);
font-weight: 700;
}
.isn-supref {
margin: clamp(16px, 1.8vw, 24px) 0 0;
padding: 0 0 0 16px;
border-left: 2px solid var(--i-line);
}
@media (max-width: 900px) {
.isn-joinpicks {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.isn-joinlive {
grid-template-columns: minmax(0, 1fr) auto;
}
.isn-joinlive-cta {
grid-column: 1 / -1;
}
.isn-joinlive-cta .isn-btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 720px) {
.isn-joinstep.isn-scan--flow,
.isn-joindone {
max-width: none;
}
.isn-joinstep .isn-btn--join {
padding-inline: 18px;
gap: 12px;
}
.isn-joinbar {
margin-bottom: 22px;
}
.isn-joinbar-step {
gap: 7px;
}
.isn-joincategory-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.isn-joinspend {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.isn-joinpills {
display: flex;
flex-wrap: nowrap;
padding-bottom: 4px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
.isn-joinpills::-webkit-scrollbar {
display: none;
}
.isn-joinpill {
padding-inline: 12px;
scroll-snap-align: start;
}
.isn-joinlive {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
.isn-joinlive-selection {
--join-thumb-size: 34px;
--join-thumb-pad: 5px;
gap: 6px;
}
.isn-joinlive-thumbs {
gap: 6px;
}
.isn-joinlive-more {
position: relative;
isolation: isolate;
border: 0;
background: transparent;
font-size: 16px;
}
.isn-joinlive-more::before {
content: '';
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
width: var(--join-thumb-size);
height: var(--join-thumb-size);
transform: translate(-50%, -50%);
border: 1px solid var(--i-blue);
border-radius: 50%;
background: var(--i-blue-soft);
}
.isn-joinlive-more:hover {
background: transparent;
}
.isn-joinlive-more:hover::before {
background: var(--i-blue);
}
.isn-joinlive-cta {
grid-column: auto;
}
.isn-joinflow {
grid-template-columns: minmax(0, 1fr);
}
.isn-btn--join {
min-height: 54px;
}
}
@media (max-width: 460px) {
.isn-joinpicks {
grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
}
.isn-joinfoot {
bottom: 8px;
}
.isn-joindone-row {
grid-template-columns: minmax(0, 1fr) auto;
}
.isn-joindone-spend {
grid-column: 1;
grid-row: 2;
min-width: 0;
text-align: left;
}
.isn-joindone-row--head .isn-joindone-spend {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.isn-joinbar-step[data-state='active'] .isn-joinbar-mark {
transform: none;
box-shadow: 0 0 0 6px var(--i-strip);
}
.isn-btn--join:hover:not(:disabled),
.isn-btn--join:active:not(:disabled) {
transform: none;
}
}
.isn-head--contact {
margin-bottom: 0;
}
.isn-section--contact {
background: var(--i-paper);
}
.isn-contact-grid {
display: grid;
grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
gap: var(--i-gutter);
align-items: start;
max-width: 1200px;
margin-inline: auto;
}
.isn-scan--contact {
padding: clamp(20px, 2.6vw, 38px);
}
.isn-contact-form-title {
font-size: var(--i-h3);
letter-spacing: var(--i-track-h3);
line-height: var(--i-lead-h3);
}
.isn-contact-form-sub {
margin: 8px 0 0;
font-size: var(--i-small);
color: var(--i-muted);
}
.isn-contact-fields {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 16px;
column-gap: 12px;
}
.isn-field-req {
margin-left: 2px;
color: var(--i-blue);
}
textarea.isn-input {
padding: 12px 14px;
line-height: var(--i-lead-body);
resize: vertical;
}
.isn-contact-form .isn-input:has(option[value='']:checked) {
color: var(--i-field-empty);
}
.isn-contact-note {
margin: clamp(14px, 1.4vw, 18px) 0 0;
color: var(--i-muted);
}
.isn-contact-form .isn-btn--solid {
margin-top: clamp(16px, 1.6vw, 22px);
}
.isn-contact-status {
margin: 14px 0 0;
font-size: var(--i-small);
font-weight: 600;
color: #d43b3d;
}
.isn-contact-status:empty {
margin: 0;
}
.isn-contact-consent {
margin: clamp(16px, 1.6vw, 20px) 0 0;
color: var(--i-muted);
}
.isn-contact-aside {
display: grid;
gap: clamp(14px, 1.4vw, 18px);
}
.isn-contact-card {
padding: clamp(20px, 2.2vw, 30px);
border: 1px solid var(--i-line);
border-radius: var(--i-r);
background: var(--i-white);
box-shadow: 0 2px 6px rgb(10 10 10 / 6%);
}
.isn-contact-card-eyebrow {
margin-bottom: 12px;
}
.isn-contact-address {
display: grid;
gap: 4px;
font-style: normal;
}
.isn-contact-company {
font-weight: 700;
}
.isn-contact-postal {
color: var(--i-muted);
}
.isn-contact-link {
color: var(--i-blue);
text-decoration: none;
}
.isn-contact-link:hover {
text-decoration: underline;
}
.isn-contact-link:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 2px;
border-radius: 4px;
}
.isn-contact-card-lead {
margin: 0 0 14px;
font-weight: 600;
}
.isn-contact-exits {
display: grid;
gap: 10px;
justify-items: start;
}
.isn-contact-form .isn-btn--solid:focus-visible {
outline-color: var(--i-ink);
}
@media (max-width: 359px) {
.isn-contact-exits .isn-btn {
white-space: normal;
}
}
@media (max-width: 1080px) {
.isn-contact-grid {
grid-template-columns: minmax(0, 600px);
}
}
@media (max-width: 460px) {
.isn-contact-fields {
grid-template-columns: minmax(0, 1fr);
}
}
.isn-head--vragen {
margin-bottom: 0;
}
.isn-section--vragen {
padding-top: 0;
}
.isn-faqcat {
display: grid;
grid-template-columns: minmax(0, 0.66fr) minmax(0, 1.34fr);
gap: clamp(32px, 4vw, 84px);
align-items: start;
}
.isn-faqcat + .isn-faqcat {
margin-top: clamp(56px, 6vw, 96px);
padding-top: clamp(56px, 6vw, 96px);
border-top: 1px solid var(--i-line);
}
.isn-faqcat-head {
position: sticky;
top: calc(var(--i-bar) + 1px + clamp(20px, 3vh, 48px));
}
.isn-faqcat-index {
margin: 0 0 14px;
font-family: var(--i-mono);
font-size: var(--i-micro);
letter-spacing: var(--i-track-label);
color: var(--i-muted);
}
.isn-faqcat-h {
max-width: 14em;
margin: 0;
font-size: var(--i-h3);
line-height: var(--i-lead-h3);
letter-spacing: var(--i-track-h3);
}
.isn-qa-steps {
max-width: 68ch;
margin: 0 0 24px;
padding-left: 22px;
font-size: var(--i-body-size);
line-height: var(--i-lead-body);
color: var(--i-muted);
}
.isn-qa-steps li + li {
margin-top: 6px;
}
.isn-qa a {
color: var(--i-ink);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.isn-qa a:hover {
color: var(--i-blue);
}
.isn-section--vraagask {
padding-top: 0;
}
.isn-vraagask-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
@media (max-width: 900px) {
.isn-faqcat {
grid-template-columns: minmax(0, 1fr);
gap: clamp(22px, 3vw, 32px);
}
.isn-faqcat-head {
position: static;
}
.isn-faqcat-h {
max-width: 20em;
}
}
.isn-sup-card {
scroll-margin-top: calc(var(--i-chrome, 72px) + 16px);
}
.isn-sup-card textarea.isn-input {
padding: 10px 14px;
}
.isn-sup-cats {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.isn-sup-cats > legend {
padding: 0;
}
.isn-sup-vh {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.isn-contact-status[data-state='sending'] {
color: var(--i-muted);
}
.isn-contact-status[data-state='sent'] {
color: var(--i-green);
}
.isn-sup-helper {
margin: 14px 0 0;
color: var(--i-ink);
}
.isn-advantages--four {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1080px) {
.isn-advantages--four {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.isn-advantages--four {
grid-template-columns: minmax(0, 1fr);
}
}
.isn-sup-page > .isn-section:not(.isn-section--call) {
padding: clamp(72px, 8.4vw, 136px) 0;
}
.isn-sup-card .isn-contact-form {
margin-top: 18px;
}
.isn-sup-card .isn-contact-fields {
margin-top: 0;
row-gap: 14px;
column-gap: 14px;
}
.isn-sup-card .isn-input {
min-height: 44px;
margin-top: 6px;
}
.isn-sup-pick {
position: relative;
}
.isn-sup-pick-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
list-style: none;
user-select: none;
}
.isn-sup-pick-toggle::-webkit-details-marker {
display: none;
}
.isn-sup-pick-toggle:hover {
border-color: var(--i-muted);
}
.isn-sup-pick:not([data-chosen]) .isn-sup-pick-sum {
color: var(--i-field-empty);
}
.isn-sup-pick-caret {
flex: none;
color: var(--i-muted);
transition: transform var(--dur-fast) var(--ease);
}
.isn-sup-pick[open] .isn-sup-pick-caret {
transform: rotate(180deg);
}
.isn-sup-pick[open] > .isn-sup-pick-toggle {
border-color: var(--i-blue);
}
.isn-sup-cats[aria-invalid='true'] .isn-sup-pick-toggle {
border-color: var(--i-red);
}
.isn-sup-pick[data-disabled] > .isn-sup-pick-toggle {
pointer-events: none;
opacity: 0.6;
}
.isn-sup-pick-panel {
position: absolute;
top: calc(100% + 6px);
right: 0;
left: 0;
z-index: 6;
padding: 8px;
border: 1px solid var(--i-line);
border-radius: var(--i-r-sm);
background: var(--i-white);
box-shadow: 0 18px 40px -18px rgb(10 10 10 / 24%);
}
.isn-sup-pick-search {
margin: 0 0 6px;
}
.isn-sup-card .isn-sup-pick-search .isn-input {
min-height: 40px;
margin-top: 0;
}
.isn-sup-pick-list {
max-height: 248px;
margin: 0;
padding: 0;
overflow-y: auto;
list-style: none;
overscroll-behavior: contain;
}
.isn-sup-pick-list > li[hidden] {
display: none;
}
.isn-sup-pick-opt {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
font-size: var(--i-small);
cursor: pointer;
}
.isn-sup-pick-opt:hover {
background: var(--i-paper);
}
.isn-sup-pick-opt input {
flex: none;
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--i-blue);
}
.isn-sup-pick-opt input:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 2px;
}
.isn-sup-pick-opt:has(input:checked) {
font-weight: 600;
}
.isn-sup-pick-empty {
padding: 8px 10px;
}
.isn-sup-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.isn-sup-pills[hidden] {
display: none;
}
.isn-sup-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px 3px 10px;
border: 1px solid var(--i-blue);
border-radius: 999px;
background: var(--i-blue-soft);
font: inherit;
font-size: 12.5px;
font-weight: 600;
color: var(--i-ink);
cursor: pointer;
}
.isn-sup-pill::after {
content: '×';
font-size: 14px;
line-height: 1;
color: var(--i-muted);
}
.isn-sup-pill:hover::after {
color: var(--i-ink);
}
.isn-sup-pill:focus-visible {
outline: 2px solid var(--i-blue);
outline-offset: 2px;
}
.isn-sup-pill:disabled {
cursor: default;
opacity: 0.6;
}
.isn-sup-submit {
margin-top: 22px;
}
.isn-sup-submit .isn-btn--solid {
margin-top: 0;
}
.isn-sup-helper {
max-width: 52ch;
margin: 12px 0 0;
color: var(--i-muted);
}
.isn-sup-card .isn-contact-fields {
row-gap: 12px;
}
.isn-sup-card textarea.isn-input {
min-height: 72px;
}
.isn-sup-card .isn-sup-submit {
margin-top: 18px;
}
.isn-sup-card .isn-intake-title {
font-size: clamp(26px, 1.4vw + 12px, 32px);
}
.isn-sup-card .isn-intake-sub {
margin-top: 10px;
}
.isn-sup-other[hidden] {
display: none;
}
.isn-sup-card .isn-sup-submit .isn-btn--solid {
display: flex;
justify-content: center;
width: 100%;
}
.isn-sup-card .isn-sup-helper {
max-width: none;
margin: 14px 0 0;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: var(--i-muted);
}
.isn-sup-page .isn-section--advantages:has(.isn-advantages--four) {
padding-top: clamp(24px, 3vw, 48px);
padding-bottom: clamp(24px, 3vw, 48px);
}
.isn-sup-page .isn-section--advantages:has(.isn-advantages--four) .isn-h {
font-size: min(var(--i-h2), 34px);
}
.isn-advantages--four {
column-gap: clamp(20px, 2.4vw, 36px);
}
.isn-advantages--four .isn-adv {
padding: 18px 0 0;
border: 0;
border-top: 1px solid var(--i-line);
border-radius: 0;
background: none;
box-shadow: none;
}
.isn-advantages--four .isn-adv-title {
font-size: var(--i-body-size);
line-height: var(--i-lead-h3);
}
.isn-advantages--four .isn-ic--lg > svg {
width: 28px;
height: 28px;
}
.isn-advantages--four .isn-adv-copy {
margin-top: 8px;
}
.isn-final--light {
padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
border: 1px solid var(--i-line);
background: var(--i-paper);
color: var(--i-ink);
}
.isn-final--light .isn-final-h {
font-size: clamp(28px, 3.2vw, 44px);
}
.isn-final--light .isn-final-lead {
color: var(--i-muted);
}
.isn-final--light .isn-final-actions {
align-items: center;
gap: 12px 24px;
}
.isn-final-link {
font-size: var(--i-small);
font-weight: 600;
}
@keyframes isn-hero-rise {
from {
transform: translateY(6px);
}
}
html[data-js='true']
:is(.isn-hero, .isn-sup-hero)
:is(.isn-eyebrow, .isn-hero-h, .isn-hero-lead, .isn-h, .isn-lead)[data-reveal] {
opacity: 1;
transform: none;
animation: isn-hero-rise var(--dur) var(--ease) backwards;
}