:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.arrow-button__arrow {
  inline-size: 1.125rem;
block-size: 1.125rem;
rotate: -45deg;
transition: rotate 0.25s ease, translate 0.25s ease;

.arrow-button:is(:hover, :focus-visible) & {
  rotate: 0deg;
  translate: 2px -2px;
}

@media (prefers-reduced-motion: reduce) {
  .arrow-button:is(:hover, :focus-visible) & {
    rotate: -45deg;
    translate: none;
  }
}
}
.arrow-button__icon {
  position: absolute;
inset-block: 0.375rem;
inset-inline-end: 0.375rem;
inline-size: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: calc(var(--radius-xs) - 3px);
background-color: var(--arrow-button-chip-bg);
color: var(--arrow-button-chip-text);

.arrow-button[data-size="m"] & {
  inline-size: 2.5rem;
}

.arrow-button[data-size="s"] & {
  inset-block: 0.375rem;
  inline-size: 2rem;
}
}
.arrow-button {
  --arrow-button-bg: var(--primary);
--arrow-button-bg-hover: color-mix(in oklch, var(--primary) 86%, var(--white));
--arrow-button-text: var(--text-dark);
--arrow-button-chip-bg: var(--base-dark);
--arrow-button-chip-text: var(--white);
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
min-block-size: 3.5rem;
padding-inline: 1.75rem 4rem;
border-radius: var(--radius-xs);
background-color: var(--arrow-button-bg);
font-size: var(--text-l);
font-weight: 600;
line-height: 1.2;
transition: background-color 0.2s ease, translate 0.2s ease, box-shadow 0.2s ease;

&[data-variant="dark"] {
  --arrow-button-bg: var(--base-dark);
  --arrow-button-bg-hover: var(--neutral-dark);
  --arrow-button-text: var(--white);
  --arrow-button-chip-bg: var(--primary);
  --arrow-button-chip-text: var(--text-dark);
}

&[href],
&[href]:hover,
&[href]:focus-visible {
  color: var(--arrow-button-text);
  text-decoration: none;
}

&:hover,
&:focus-visible {
  background-color: var(--arrow-button-bg-hover);
  translate: 0 -2px;
  box-shadow: 0 14px 28px -14px color-mix(in oklch, var(--arrow-button-bg) 80%, transparent);
}

&:focus-visible {
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  &:hover,
  &:focus-visible {
    translate: none;
  }
}

&[type="submit"],
&[type="button"] {
  border: 0;
  color: var(--arrow-button-text);
  font-family: inherit;
  letter-spacing: normal;
  cursor: pointer;
}

&[data-size="m"] {
  min-block-size: 3.25rem;
  padding-inline: 1.375rem 3.625rem;
  font-size: 0.96875rem;
}

&[data-size="s"] {
  min-block-size: 2.75rem;
  padding-inline: 1rem 3rem;
  font-size: 0.90625rem;
}
}
.arrow-link__arrow {
  flex: none;
inline-size: 1.25rem;
block-size: 1.25rem;
transition: translate 0.2s ease;

.arrow-link:hover & {
  translate: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  .arrow-link:hover & {
    translate: none;
  }
}

.arrow-link[target="_blank"] & {
  inline-size: 1rem;
  block-size: 1rem;
  rotate: -45deg;
}
}
.arrow-link {
  display: inline-flex;
align-items: center;
gap: var(--space-xs);
min-block-size: 2.75rem;
font-size: var(--text-l);
font-weight: 600;

&[href] {
  color: var(--text-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

&[href]:hover {
  color: var(--text-dark);
  text-decoration-color: currentColor;
}

&[data-tone="light"][href],
&[data-tone="light"][href]:hover {
  color: var(--text-light);
}

&:focus-visible {
  outline-offset: 4px;
  border-radius: 0.25rem;
}

&[data-tone="primary"][href],
&[data-tone="primary"][href]:hover {
  color: var(--primary-dark);
}
}
.hero-mockup__icon {
  display: block;
flex: none;
inline-size: 1em;
block-size: 1em;
}
.hero-mockup__status-icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 3.25rem;
block-size: 3.25rem;
border-radius: 50%;
background-color: color-mix(in oklch, var(--success) 14%, transparent);
box-shadow: inset 0 0 0 2px var(--success);
color: var(--success-dark);
font-size: 1.5rem;
}
.hero-mockup__dot {
  flex: none;
inline-size: 0.375rem;
block-size: 0.375rem;
border-radius: 50%;
background-color: var(--success);
}
.hero-mockup__badge {
  display: inline-flex;
align-items: center;
gap: 0.3125rem;
padding: 2px 0.5rem;
border-radius: 999px;
background-color: color-mix(in oklch, var(--success) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--success-semi-dark) 45%, transparent);
font-size: var(--text-xs);
font-weight: 600;
color: var(--success-dark);
}
.hero-mockup__status-title {
  display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.90625rem;
font-weight: 600;
}
.hero-mockup__small {
  font-size: 0.8125rem;
line-height: 1.4;
color: var(--base-semi-light);
}
.hero-mockup__status-text {
  display: flex;
flex-direction: column;
gap: 3px;
}
.hero-mockup__card {
  position: absolute;
z-index: 2;
border-radius: var(--radius-xs);
background-color: var(--white);
box-shadow: var(--hero-mockup-card-shadow);
animation: rise-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;

@media (prefers-reduced-motion: reduce) {
  animation: none;
}
}
.hero-mockup__status {
  inset-block-start: 0;
inset-inline-end: 4%;
display: none;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem 0.75rem 0.75rem;
animation-delay: 0.45s;

@container (width >= 44rem) {
  display: flex;
}
}
.hero-mockup__dot-button {
  inline-size: 0.625rem;
block-size: 0.625rem;
border-radius: 50%;
background-color: var(--accent-semi-light);
}
.hero-mockup__dots {
  display: flex;
gap: 0.375rem;
}
.hero-mockup__url {
  flex: 1;
padding: 0.3125rem 0.75rem;
border-radius: 999px;
background-color: var(--accent-ultra-light);
font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
color: var(--base-semi-light);
}
.hero-mockup__bar {
  display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.75rem 1rem;
border-block-end: 1px solid var(--accent-light);
}
.hero-mockup__shape {
  display: block;
block-size: 0.5rem;
border-radius: 0.25rem;
background-color: var(--accent);

&.hero-mockup__shape--logo {
  inline-size: 5.625rem;
  block-size: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--base-dark);
}

&.hero-mockup__shape--link {
  inline-size: 2.5rem;
}

&.hero-mockup__shape--button {
  inline-size: 3.5rem;
  block-size: 1.125rem;
  border-radius: 0.5625rem;
  background-color: var(--primary);
}

&.hero-mockup__shape--title,
&.hero-mockup__shape--subtitle {
  block-size: 1.375rem;
  border-radius: 0.5rem;
}

&.hero-mockup__shape--title {
  inline-size: 78%;
  background-color: var(--base-dark);
}

&.hero-mockup__shape--subtitle {
  inline-size: 52%;
  background-color: var(--neutral-semi-light);
}

&.hero-mockup__shape--text {
  inline-size: 66%;
  block-size: 0.5625rem;
  margin-block-start: 0.375rem;
  border-radius: 0.3125rem;
}

&.hero-mockup__shape--tile {
  position: absolute;
  inset-inline-start: 0.625rem;
  inset-block-end: 0.75rem;
  inline-size: 70%;
  background-color: var(--base-dark);
}
}
.hero-mockup__nav-links {
  display: flex;
gap: 0.625rem;
}
.hero-mockup__nav {
  display: flex;
align-items: center;
justify-content: space-between;
}
.hero-mockup__lines {
  display: flex;
flex-direction: column;
gap: 0.5rem;
padding-block: 1.125rem 0.375rem;
}
.hero-mockup__tile {
  position: relative;
block-size: 5.25rem;
border-radius: 0.75rem;
background-image: linear-gradient(135deg, color-mix(in oklch, var(--accent) 55%, var(--accent-ultra-light)), var(--accent-ultra-light));

&.hero-mockup__tile--new {
  background-image: none;
  background-color: var(--primary-ultra-light);
  box-shadow: inset 0 0 0 2px var(--primary);
}
}
.hero-mockup__new {
  position: absolute;
inset-inline-start: 0.625rem;
inset-block-start: 0.625rem;
padding: 3px 0.5rem;
border-radius: 999px;
background-color: var(--primary-dark);
color: var(--white);
font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.04em;
}
.hero-mockup__tiles {
  display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.625rem;
}
.hero-mockup__page {
  display: flex;
flex-direction: column;
gap: 0.875rem;
padding: 1.375rem;
}
.hero-mockup__browser {
  inline-size: 88%;
overflow: hidden;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: 0 40px 80px -36px color-mix(in oklch, var(--base-dark) 35%, transparent), inset 0 0 0 1px var(--accent-semi-light);
animation: rise-in 0.8s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;

@media (prefers-reduced-motion: reduce) {
  animation: none;
}
}
.hero-mockup__live {
  display: inline-flex;
align-items: center;
gap: 0.375rem;
font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
color: var(--success-dark);
}
.hero-mockup__stats-title {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--text-dark);
}
.hero-mockup__chart {
  display: block;
inline-size: calc(100% + 0.5rem);
block-size: 4rem;
margin: 0.5rem -0.25rem 0.625rem;

& .mockup-chart__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line 1.6s 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

& .mockup-chart__area {
  opacity: 0;
  animation: fade-in 1s 1.9s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  & .mockup-chart__line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }

  & .mockup-chart__area {
    opacity: 1;
    animation: none;
  }
}
}
.hero-mockup__stat-icon {
  display: flex;
font-size: 0.9375rem;
color: var(--primary-dark);
}
.hero-mockup__delta {
  display: flex;
align-items: center;
gap: 0.25rem;
margin-inline-start: auto;
font-size: 0.78125rem;
font-weight: 600;
color: var(--success-dark);

& .hero-mockup__icon {
  font-size: 0.9375rem;
}
}
.hero-mockup__stat {
  display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--text-dark);
}
.hero-mockup__stats-list {
  display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.hero-mockup__stats {
  inset-inline-start: -9%;
inset-block-start: 54%;
display: none;
inline-size: 13.25rem;
padding: 0.875rem 0.875rem 0.75rem;
animation-delay: 0.65s;

@container (width >= 70rem) {
  display: block;
}
}
.hero-mockup__avatar-icon {
  display: block;
inline-size: 1.375rem;
block-size: 1.375rem;
}
.hero-mockup__avatar {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: 50%;
background-color: var(--base-dark);
}
.hero-mockup__company {
  font-size: 0.9375rem;
font-weight: 600;
}
.hero-mockup__role {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-dark);
}
.hero-mockup__chat-name {
  display: flex;
flex-direction: column;
gap: 1px;
}
.hero-mockup__chat-head {
  display: flex;
align-items: center;
gap: 0.75rem;
padding-block-end: 0.875rem;
border-block-end: 1px solid var(--accent-light);
}
.hero-mockup__message {
  padding: 0.625rem 0.75rem;
font-size: var(--text-s);
animation: message-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;

&.hero-mockup__message--out {
  align-self: flex-end;
  max-inline-size: 85%;
  border-radius: 0.625rem 1rem 0.25rem 1rem;
  background-color: var(--hero-mockup-chat-color);
  color: var(--white);
  line-height: 1.45;
  animation-delay: 1.4s;
}

&.hero-mockup__message--in {
  max-inline-size: 92%;
  border-radius: 0.625rem 1rem 1rem 0.25rem;
  background-color: var(--accent-ultra-light);
  box-shadow: inset 0 0 0 1px var(--accent-semi-light);
  line-height: 1.5;
  color: var(--text-dark);
  animation-delay: 2.3s;
}

@media (prefers-reduced-motion: reduce) {
  animation: none;
}
}
.hero-mockup__sender {
  display: block;
margin-block-end: 3px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--primary-dark);
}
.hero-mockup__action {
  padding: 0.3125rem 0.75rem;
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--accent);
font-size: 0.78125rem;
font-weight: 600;
color: var(--text-dark);

&.hero-mockup__action--primary {
  background-color: var(--success);
  box-shadow: none;
  color: var(--success-ultra-dark);
}
}
.hero-mockup__actions {
  display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-block-start: 0.5rem;
}
.hero-mockup__chat-card {
  display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.375rem;
border-radius: var(--radius-s);
background-color: var(--white);
color: var(--text-dark);
box-shadow: 0 32px 64px -20px rgb(0 0 0 / 0.55), 0 18px 36px -18px color-mix(in oklch, var(--base-dark) 35%, transparent), 0 0 0 1px var(--accent);
}
.hero-mockup__chat {
  position: relative;
z-index: 3;
inline-size: min(20rem, 86%);
margin-block-start: -5rem;
margin-inline-start: auto;
animation: rise-in 0.8s 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;

@container (width >= 44rem) {
  margin-block-start: -7.5rem;
}

@media (prefers-reduced-motion: reduce) {
  animation: none;
}
}
.hero-mockup {
  --hero-mockup-card-shadow: 0 1.875rem 3.75rem -1.5rem rgb(0 0 0 / 0.6), 0 0 0 1px var(--accent);
--hero-mockup-chat-color: #2F6FEB;
position: relative;
inline-size: 100%;
max-inline-size: 38.75rem;
color: var(--text-dark);

@container (width >= 44rem) {
  padding-block-start: 3.5rem;
}
}
.hero__grid {
  position: absolute;
inset: 0;
background-image: linear-gradient(color-mix(in oklch, var(--white) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--white) 7%, transparent) 1px, transparent 1px);
background-size: 56px 56px;
background-position: center top;
mask-image: radial-gradient(ellipse 75% 85% at 72% 30%, black 0%, rgb(0 0 0 / 0.5) 45%, transparent 78%);
pointer-events: none;
}
.hero__eyebrow-mark {
  flex: none;
inline-size: 0.5rem;
block-size: 0.5rem;
margin-inline-start: 0.375rem;
border-radius: 2px;
background-color: var(--primary);
}
.hero__eyebrow {
  display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.25rem 0.875rem 0.25rem 0.25rem;
border-radius: var(--radius-xs);
background-color: color-mix(in oklch, var(--white) 4%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--white) 16%, transparent);
font-family: var(--text-font-family);
font-size: var(--text-s);
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.005em;
color: var(--white);
}
.hero__accent {
  color: var(--primary);
}
.hero__title {
  text-wrap: balance;
}
.hero__heading {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.625rem;
margin: 0;
font-size: clamp(2.375rem, 5.2vw, 4.75rem);
font-weight: 700;
line-height: 1.02;
letter-spacing: -0.04em;
}
.hero__lead {
  max-inline-size: 38.75rem;
font-size: clamp(var(--text-l), 1.6vw, 1.25rem);
line-height: 1.55;
}
.hero__picker-label {
  padding: 0.875rem 1.125rem 0.75rem;
border-block-end: 1px solid var(--neutral-dark);
font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--neutral-light);
}
.hero__pick-svg {
  display: block;
inline-size: 1.375rem;
block-size: 1.375rem;
}
.hero__pick-icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 0.75rem;
background-color: color-mix(in oklch, var(--primary-light) 14%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary-light) 35%, transparent);
color: var(--primary-light);
}
.hero__pick-title {
  font-size: 1.0625rem;
font-weight: 600;
line-height: 1.3;
}
.hero__pick-desc {
  font-size: var(--text-s);
line-height: 1.45;
color: var(--neutral-light);
}
.hero__pick-text {
  flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
min-inline-size: 0;
}
.hero__pick-arrow {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.hero__pick-go {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.25rem;
block-size: 2.25rem;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--base);
color: var(--white);
transition: translate 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;

.hero__pick:hover & {
  translate: 0 3px;
  background-color: var(--primary);
  box-shadow: none;
  color: var(--text-dark);
}

@media (prefers-reduced-motion: reduce) {
  .hero__pick:hover & {
    translate: none;
  }
}
}
.hero__pick {
  position: relative;
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.125rem;
transition: background-color 0.2s ease;

&[href],
&[href]:hover {
  color: var(--white);
  text-decoration: none;
}

&:hover,
&:focus-visible {
  background-color: color-mix(in oklch, var(--white) 6%, transparent);
}

&:focus-visible {
  outline-offset: -3px;
}

& + &::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 1.125rem;
  block-size: 1px;
  background-color: var(--neutral-dark);
}
}
.hero__picker {
  position: relative;
inline-size: 100%;
max-inline-size: 37.5rem;
overflow: hidden;
border-radius: var(--radius-xs);
background-color: color-mix(in oklch, var(--neutral-ultra-dark) 72%, transparent);
backdrop-filter: blur(14px) saturate(120%);
box-shadow: inset 0 0 0 1px var(--neutral-semi-dark), 0 24px 48px -28px rgb(0 0 0 / 0.6);
}
.hero__price-amount {
  font-weight: 600;
color: var(--white);
}
.hero__price-text {
  .hero__price-link:hover & {
  text-decoration: underline;
  text-underline-offset: 3px;
}
}
.hero__price-arrow {
  flex: none;
inline-size: 0.875rem;
block-size: 0.875rem;
}
.hero__price-link {
  display: inline-flex;
align-items: center;
gap: 0.375rem;
transition: color 0.2s ease;

&[href],
&[href]:hover {
  color: inherit;
  text-decoration: none;
}

&[href]:hover {
  color: var(--white);
}

&:focus-visible {
  outline-offset: 3px;
  border-radius: 0.25rem;
}
}
.hero__price {
  font-size: var(--text-s);
color: var(--neutral-light);
}
.hero__actions {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.75rem;
}
.hero__trust-star {
  display: block;
flex: none;
inline-size: 1rem;
block-size: 1rem;
color: var(--hero-star-color);
}
.hero__trust-score {
  color: var(--white);
}
.hero__trust-item {
  display: inline-flex;
align-items: center;
gap: 0.375rem;
line-height: 1.2;

&::before {
  content: "";
  flex: none;
  inline-size: 0.25rem;
  block-size: 0.25rem;
  border-radius: 50%;
  background-color: var(--primary);
}

&.hero__trust-item--rating::before {
  content: none;
}
}
.hero__trust {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem 1.25rem;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--text-s);
color: var(--neutral-ultra-light);
}
.hero__content {
  flex: 1 1 35rem;
min-inline-size: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.625rem;
}
.hero__step-arrow {
  display: block;
inline-size: 1rem;
block-size: 1rem;
color: var(--base-semi-light);
}
.hero__step-icon {
  display: block;
flex: none;
inline-size: 1rem;
block-size: 1rem;
}
.hero__step-link {
  display: inline-flex;
align-items: center;
gap: 0.375rem;
min-block-size: 2.25rem;
padding-inline: 0.75rem;
border-radius: 999px;
background-color: color-mix(in oklch, var(--white) 6%, transparent);
box-shadow: inset 0 0 0 1px var(--neutral-semi-dark);
font-size: 0.84375rem;
font-weight: 600;
white-space: nowrap;
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;

&[href] {
  color: var(--neutral-ultra-light);
  text-decoration: none;
}

&[href]:hover {
  background-color: color-mix(in oklch, var(--white) 14%, transparent);
  color: var(--white);
}

&[data-tone="accent"][href] {
  background-color: var(--primary);
  box-shadow: none;
  color: var(--text-dark);
}

&[data-tone="accent"][href]:hover {
  background-color: color-mix(in oklch, var(--primary) 88%, var(--white));
}

&:focus-visible {
  outline-offset: 3px;
}
}
.hero__step {
  display: inline-flex;
align-items: center;
gap: 0.25rem;
white-space: nowrap;
}
.hero__steps {
  display: none;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.25rem;
margin: 1.75rem 0 0;
padding: 0;
list-style: none;

@container (width >= 44rem) {
  display: flex;
}
}
.hero__steps-note {
  display: none;
margin-block-start: 0.5rem;
font-size: 0.84375rem;
color: var(--neutral-light);

@container (width >= 44rem) {
  display: block;
}
}
.hero__showcase {
  inline-size: 100%;
max-inline-size: 38.75rem;
}
.hero__aside {
  flex: 1 1 23.75rem;
min-inline-size: 0;
display: flex;
justify-content: center;

:has(> &) {
  container-type: inline-size;
}
}
.hero__inner {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xxl) clamp(2.5rem, 6vw, 6rem);
}
.hero__container {
  position: relative;
z-index: 1;
gap: var(--space-xxl);
}
.hero {
  --hero-star-color: #F5B547;
position: relative;
overflow: clip;
/* Ruimte voor de site-header die op de homepage over de hero ligt (logo 52px) */
--hero-header-space: calc(var(--space-xl) + 3.25rem + var(--space-xxl));
padding-block: var(--hero-header-space) var(--section-space-m);

&::before {
  content: "";
  position: absolute;
  inset-block-start: -18%;
  inset-inline-end: -8%;
  inline-size: min(47.5rem, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--primary) 26%, transparent) 0%, color-mix(in oklch, var(--primary) 8%, transparent) 38%, transparent 68%);
  pointer-events: none;
}

&::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, color-mix(in oklch, var(--primary-light) 55%, transparent) 1.5px, transparent 2px);
  background-size: 224px 224px;
  background-position: calc(50% + 28px) 28px;
  mask-image: radial-gradient(ellipse 60% 70% at 72% 30%, black 0%, transparent 75%);
  pointer-events: none;
}
}
.logo__image {
  display: block;
block-size: var(--logo-height, 3.25rem);
inline-size: auto;
}
.logo {
  display: flex;
flex: none;
border-radius: 0.375rem;

&:focus-visible {
  outline-offset: 4px;
}
}
.availability__dot {
  position: relative;
flex: none;
inline-size: 0.4375rem;
block-size: 0.4375rem;
border-radius: 50%;
background-color: var(--success);

&::after {
  content: "";
  position: absolute;
  inset: -0.25rem;
  border-radius: 50%;
  background-color: var(--success);
  opacity: 0.35;
  animation: pulse-ring 2s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  &::after {
    animation: none;
  }
}
}
.availability {
  display: none;
align-self: center;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.25rem;
margin-inline-end: 0.375rem;
font-size: 0.8125rem;
font-weight: 500;
white-space: nowrap;
transition: color 0.2s ease;

&[href] {
  color: var(--neutral-light);
  text-decoration: none;
}

&[href]:hover {
  color: var(--white);
}

&:focus-visible {
  outline-offset: 2px;
}

@container (width >= 53rem) {
  display: inline-flex;
}
}
.site-header__phone {
  display: none;
align-items: center;
min-block-size: 2.75rem;
padding-inline: 1rem;
border-radius: var(--radius-xs);
background-color: color-mix(in oklch, var(--neutral-ultra-dark) 72%, transparent);
backdrop-filter: blur(14px) saturate(120%);
box-shadow: inset 0 0 0 1px var(--neutral-semi-dark);
font-size: 0.9375rem;
font-weight: 600;
white-space: nowrap;
transition: background-color 0.2s ease;

&[href],
&[href]:hover {
  color: var(--white);
  text-decoration: none;
}

&[href]:hover {
  background-color: color-mix(in oklch, var(--neutral-dark) 85%, transparent);
}

&:focus-visible {
  outline-offset: 3px;
}

@container (width >= 37.5rem) {
  display: inline-flex;
}
}
.site-header__cta-label {
  .site-header__cta:has(.site-header__cta-short) & {
  @container (width < 32.5rem) {
    display: none;
  }
}
}
.site-header__cta-short {
  display: none;

@container (width < 32.5rem) {
  display: inline;
}
}
.site-header__cta {
  display: inline-flex;
align-items: center;
min-block-size: 2.75rem;
padding-inline: 1rem;
border-radius: var(--radius-xs);
background-color: var(--primary);
font-size: 0.9375rem;
font-weight: 600;
white-space: nowrap;
transition: background-color 0.2s ease;

&[href],
&[href]:hover {
  color: var(--text-dark);
  text-decoration: none;
}

&[href]:hover {
  background-color: var(--primary-light);
}

&:focus-visible {
  outline-offset: 3px;
}

@container (width < 20rem) {
  padding-inline: 0.75rem;
  font-size: var(--text-s);
}
}
.site-header__actions {
  position: relative;
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
gap: 0.625rem;
}
.site-header__bar {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;

:has(> &) {
  container-type: inline-size;
}
}
.site-header__container {
  position: relative;
margin-inline: auto;
}
.site-header {
  position: relative;
inline-size: 100%;

&[data-variant="in-hero"] {
  position: absolute;
  z-index: 10;
  inset-block-start: 0;
  inset-inline: 0;
  padding-block-start: var(--space-xl);
  padding-inline: var(--gutter);
}

&[data-variant="subpage"] {
  overflow: clip;
  padding-block: clamp(1.25rem, 3vw, 2rem);
  padding-inline: var(--gutter);
  background-color: var(--bg-dark);
  color: var(--text-light);
}

&[data-variant="subpage"]::before {
  content: "";
  position: absolute;
  inset-block-start: -220%;
  inset-inline-end: -6%;
  inline-size: min(38.75rem, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--primary) 22%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
}
.site-footer__backdrop {
  position: absolute;
inset: 0;
pointer-events: none;

&::before,
&::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
}

&::before {
  inset-block-start: -45%;
  inset-inline-end: -10%;
  inline-size: min(45rem, 65vw);
  background-image: radial-gradient(circle, color-mix(in oklch, var(--primary) 12%, transparent) 0%, transparent 65%);
}

&::after {
  inset-block-start: 30%;
  inset-inline-start: 45%;
  inline-size: min(26.25rem, 45vw);
  background-image: radial-gradient(circle, color-mix(in oklch, var(--primary-light) 6%, transparent) 0%, transparent 65%);
}
}
.site-footer__text {
  font-size: 0.9375rem;
line-height: 1.6;
color: var(--neutral-light);

&.site-footer__text--small {
  font-size: var(--text-s);
}
}
.site-footer__brand {
  --logo-height: 2.875rem;
flex: 1 1 17.5rem;
max-inline-size: 23.75rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.site-footer__heading {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-light);
}
.site-footer__link {
  display: inline-flex;
align-items: center;
gap: 0.25rem;
border-radius: 0.25rem;
font-size: 0.9375rem;
line-height: 1.4;
transition: color 0.2s ease, text-decoration-color 0.2s ease;

&[href] {
  color: var(--neutral-ultra-light);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

&[href]:hover {
  color: var(--white);
  text-decoration-color: var(--primary);
}

&:focus-visible {
  outline-offset: 3px;
}
}
.site-footer__item {
  margin: 0;
}
.site-footer__list {
  display: flex;
flex-direction: column;
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__group {
  display: flex;
flex-direction: column;
gap: 0.875rem;
}
.site-footer__icon {
  display: block;
flex: none;
inline-size: 1rem;
block-size: 1rem;
}
.site-footer__nav {
  flex: 2 1 40rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(9.375rem, 100%), 1fr));
gap: 2rem;
}
.site-footer__top {
  display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2.5rem 4rem;
}
.site-footer__legal {
  display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
}
.site-footer__docs {
  display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;

:has(> &) {
  container-type: inline-size;
}

& .site-footer__link {
  font-size: var(--text-s);
}

& .site-footer__link[href] {
  color: var(--neutral-light);
}

& .site-footer__link[href]:hover {
  color: var(--white);
}

@container (width < 41rem) {
  & .site-footer__link {
    padding-block: 0.75rem;
  }
}
}
.site-footer__bottom {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
padding-block-start: 1.5rem;
border-block-start: 1px solid var(--neutral-dark);
font-size: var(--text-s);
color: var(--neutral-light);
}
.site-footer__container {
  position: relative;
z-index: 1;
gap: 3rem;
padding-block: 4rem 2rem;
}
.site-footer {
  position: relative;
overflow: clip;
padding-block: 0;
padding-inline: var(--gutter);
background-color: var(--bg-dark);
color: var(--text-light);

&::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in oklch, var(--white) 3.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--white) 3.5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 55% 70% at 85% 10%, black 0%, transparent 70%);
  pointer-events: none;
}

&::after {
  content: "";
  position: absolute;
  inset-block-end: -55%;
  inset-inline-start: -8%;
  inline-size: min(38.75rem, 60vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--primary) 18%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
}
.eyebrow__number {
  display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 1.875rem;
block-size: 1.5rem;
padding-inline: 0.4375rem;
border-radius: 0.4375rem;
background-color: var(--primary-dark);
color: var(--white);
font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.02em;
}
.eyebrow__mark {
  flex: none;
inline-size: 0.5rem;
block-size: 0.5rem;
margin-inline-start: 0.375rem;
border-radius: 2px;
background-color: var(--primary);
}
.eyebrow {
  align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.25rem 0.875rem 0.25rem 0.25rem;
border-radius: var(--radius-xs);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
font-family: var(--text-font-family);
font-size: var(--text-s);
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.005em;
color: var(--text-dark);

.bg--dark & {
  background-color: color-mix(in oklch, var(--white) 4%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--white) 16%, transparent);
  color: var(--white);
}
}
.section-intro__muted {
  display: block;
color: var(--base-semi-light);

.bg--dark & {
  color: var(--base-light);
}
}
.section-intro__heading {
  max-inline-size: 62.5rem;
margin: 0;
font-size: var(--h2);
line-height: 1.08;
}
.section-intro__intro {
  max-inline-size: 47.5rem;
font-size: var(--text-l);
line-height: 1.6;
color: var(--text-dark-muted);

.bg--dark & {
  color: var(--text-light-muted);
}
}
.section-intro {
  display: flex;
flex-direction: column;
gap: 1rem;
}
.badge {
  align-self: flex-start;
flex: none;
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
border-radius: 999px;
background-color: var(--success);
color: var(--success-ultra-dark);
font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;

&[data-tone="primary"] {
  background-color: var(--primary);
  color: var(--text-dark);
}

&[data-tone="dark"] {
  background-color: var(--base-dark);
  color: var(--white);
}

.bg--dark &[data-tone="dark"] {
  background-color: var(--white);
  color: var(--text-dark);
}
}
.check-list__svg {
  display: block;
inline-size: 100%;
block-size: 100%;

.check-list[data-marker="circle"] & {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.check-list[data-marker="tile"] & {
  inline-size: 0.8125rem;
  block-size: 0.8125rem;
}
}
.check-list__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.125rem;
block-size: 1.125rem;
margin-block-start: 2px;
color: var(--primary-dark);

.bg--dark & {
  color: var(--primary-light);
}

.check-list[data-marker="circle"] & {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background-color: var(--success);
  color: var(--success-ultra-dark);
}

.check-list[data-marker="tile"] & {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin-block-start: 1px;
  border-radius: 0.4375rem;
  background-color: color-mix(in oklch, var(--primary-light) 16%, transparent);
  color: var(--primary-light);
}
}
.check-list__text {
  & strong {
  font-weight: 600;
  color: var(--text-dark);
}

.bg--dark & strong {
  color: var(--white);
}

& a {
  display: inline;
}
}
.check-list__item {
  display: flex;
align-items: flex-start;
gap: 0.625rem;
margin: 0;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.5;
color: var(--text-dark);

.bg--dark & {
  color: var(--neutral-ultra-light);
}
}
.check-list {
  display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;

&[data-layout="inline"] {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.375rem;
}

&[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem 1.25rem;

  @media (width < 35rem) {
    grid-template-columns: minmax(0, 1fr);
  }
}
}
.chip__tick {
  display: block;
inline-size: 0.8125rem;
block-size: 0.8125rem;
opacity: 0;

.chip[aria-pressed="true"] & {
  opacity: 1;
}
}
.chip__box {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.25rem;
block-size: 1.25rem;
border-radius: 0.375rem;
box-shadow: inset 0 0 0 1.5px var(--neutral-light);
color: var(--white);

.chip[aria-pressed="true"] & {
  background-color: var(--primary-dark);
  box-shadow: none;
}
}
.chip__icon {
  display: block;
flex: none;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.chip__count {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
opacity: 0.7;
}
.chip {
  display: inline-flex;
align-items: center;
gap: 0.5rem;
min-block-size: 2.75rem;
padding-inline: 1rem;
border: 0;
border-radius: 999px;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--text-dark);
font: inherit;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.25;
text-align: start;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;

&[data-shape="tile"] {
  border-radius: var(--radius-xs);
}

&[data-indicator="check"] {
  padding-inline-start: 0.75rem;
}

&[aria-pressed="false"]:hover {
  box-shadow: inset 0 0 0 1.5px var(--text-dark);
}

&[aria-pressed="true"]:not([data-indicator="check"]) {
  background-color: var(--base-dark);
  box-shadow: none;
  color: var(--white);
}

&[aria-pressed="true"][data-indicator="check"] {
  box-shadow: inset 0 0 0 1.5px var(--text-dark);
}

&:focus-visible {
  outline-offset: 2px;
}

.bg--dark &[aria-pressed="false"] {
  background-color: color-mix(in oklch, var(--white) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--white) 14%, transparent);
  color: var(--neutral-ultra-light);
}

.bg--dark &[aria-pressed="false"]:hover {
  box-shadow: inset 0 0 0 1.5px var(--white);
  color: var(--white);
}

.bg--dark &[aria-pressed="true"]:not([data-indicator="check"]) {
  background-color: var(--white);
  color: var(--text-dark);
}

/* ACSS button-typografie (button:not([class*=btn--])) overschrijven */
&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.25;
}
}
.rating__score {
  font-family: var(--heading-font-family);
font-size: 2rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
}
.rating__star {
  display: block;
inline-size: 1rem;
block-size: 1rem;
}
.rating__stars {
  display: inline-flex;
gap: 2px;
color: var(--rating-star-color);
}
.rating__arrow {
  display: block;
flex: none;
inline-size: 0.875rem;
block-size: 0.875rem;
}
.rating__label {
  display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: var(--text-s);
color: var(--text-dark-muted);

.bg--dark & {
  color: var(--text-light-muted);
}

.rating:hover & {
  text-decoration: underline;
  text-underline-offset: 3px;
}
}
.rating__body {
  display: flex;
flex-direction: column;
gap: 0.25rem;
}
.rating {
  --rating-star-color: #F5B547;
display: flex;
align-items: center;
gap: 0.875rem;

&[href],
&[href]:hover {
  color: var(--text-dark);
  text-decoration: none;
}

.bg--dark &[href],
.bg--dark &[href]:hover {
  color: var(--white);
}

&:focus-visible {
  outline-offset: 3px;
  border-radius: 0.25rem;
}
}
.price__prefix {
  font-size: 0.8125rem;
font-weight: 500;
line-height: 1;
color: var(--base-semi-light);

.bg--dark & {
  color: var(--neutral-light);
}
}
.price__amount {
  font-family: var(--heading-font-family);
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
color: var(--text-dark);

.price[data-size="m"] & {
  font-size: 2rem;
}

.price[data-size="s"] & {
  font-size: 1.625rem;
  letter-spacing: -0.03em;
}

.bg--dark & {
  color: var(--white);
}
}
.price__unit {
  font-size: 0.9375rem;
color: var(--text-dark-muted);

.bg--dark & {
  color: var(--text-light-muted);
}
}
.price__line {
  display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.5rem;
}
.price__extra {
  font-size: var(--text-s);
font-weight: 500;
line-height: 1.4;
color: var(--text-dark);

.bg--dark & {
  color: var(--white);
}
}
.price__note {
  font-size: 0.84375rem;
line-height: 1.4;
color: var(--base-semi-light);

.bg--dark & {
  color: var(--base-light);
}
}
.price {
  display: flex;
flex-direction: column;
gap: 0.375rem;
}
.styleguide__label {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);

.bg--dark & {
  color: var(--neutral-light);
}
}
.styleguide__items {
  display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-m) var(--space-xl);
}
.styleguide__row {
  display: flex;
flex-direction: column;
gap: var(--space-s);
padding-block-start: var(--space-m);
border-block-start: 1px solid var(--accent-semi-light);

.bg--dark & {
  border-block-start-color: var(--neutral-dark);
}
}
.styleguide__inner {
  gap: var(--space-xl);
}
.problem-card__mark-icon {
  display: block;
inline-size: 0.75rem;
block-size: 0.75rem;
}
.problem-card__mark {
  flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.125rem;
block-size: 1.125rem;
border-radius: 50%;
background-color: var(--primary);
color: var(--white);

.problem-card__label--solution & {
  background-color: var(--success);
  color: var(--success-ultra-dark);
}
}
.problem-card__label {
  display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-dark);

&.problem-card__label--solution {
  color: var(--success-dark);
}
}
.problem-card__problem-text {
  font-size: 1.03125rem;
font-weight: 600;
line-height: 1.35;
color: var(--text-dark);
}
.problem-card__problem {
  display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.25rem 1.5rem;
border-block-end: 1px solid var(--accent-semi-light);
background-color: var(--primary-ultra-light);
}
.problem-card__title {
  margin: 0;
font-size: clamp(1.25rem, 1.7vw, 1.4375rem);
line-height: 1.2;
letter-spacing: -0.02em;
}
.problem-card__text {
  font-size: 0.96875rem;
line-height: 1.55;
color: var(--text-dark-muted);
}
.problem-card__link-label {
  font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;

.problem-card__link:hover & {
  text-decoration: underline;
  text-underline-offset: 3px;
}
}
.problem-card__arrow {
  flex: none;
inline-size: 1rem;
block-size: 1rem;
transition: translate 0.2s ease;

.problem-card__link:hover & {
  translate: 3px 0;
}

@media (prefers-reduced-motion: reduce) {
  .problem-card__link:hover & {
    translate: none;
  }
}
}
.problem-card__link {
  display: inline-flex;
align-items: center;
gap: 0.5rem;
min-block-size: 2.75rem;
margin-block-start: auto;
padding-block-start: 0.75rem;

&[href] {
  color: var(--primary-dark);
  text-decoration: none;
}

&[href]:hover {
  color: var(--text-dark);
}

&:focus-visible {
  outline-offset: 3px;
  border-radius: 0.375rem;
}
}
.problem-card__solution {
  flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.375rem 1.5rem 1.5rem;
}
.problem-card {
  display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--accent-semi-light);
border-radius: var(--radius-s);
background-color: var(--white);
}
.icon-label__svg {
  display: block;
inline-size: 1.375rem;
block-size: 1.375rem;
}
.icon-label__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 0.8125rem;
background-color: color-mix(in oklch, var(--primary) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 30%, transparent);
color: var(--primary-dark);

.bg--dark & {
  background-color: color-mix(in oklch, var(--primary-light) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary-light) 35%, transparent);
  color: var(--primary-light);
}
}
.icon-label__dot {
  margin-inline: 0.3em;
}
.icon-label__text {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);

.bg--dark & {
  color: var(--neutral-light);
}
}
.icon-label {
  display: flex;
align-items: center;
gap: 0.875rem;
}
.service-link__svg {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.service-link__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2rem;
block-size: 2rem;
border-radius: 0.5625rem;
background-color: color-mix(in oklch, var(--service-color) 10%, var(--white));
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--service-color) 33%, transparent);
color: var(--service-color);
}
.service-link__label {
  flex: 1;
min-inline-size: 0;
}
.service-link__arrow {
  display: block;
flex: none;
inline-size: 1rem;
block-size: 1rem;
color: var(--base-semi-light);

.service-link:hover & {
  color: var(--service-color);
}
}
.service-link {
  --service-color: var(--primary);
flex: 1;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: var(--radius-xs);
background-color: color-mix(in oklch, var(--service-color) 4%, var(--white));
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--service-color) 22%, var(--white));
font-size: 0.90625rem;
font-weight: 500;
white-space: nowrap;
transition: box-shadow 0.15s ease, translate 0.15s ease, background-color 0.15s ease;

&[data-color="violet"] { --service-color: #7A5AC8; }
&[data-color="green"] { --service-color: var(--success-dark); }
&[data-color="amber"] { --service-color: #D9962B; }
&[data-color="blue"] { --service-color: #3D74C4; }
&[data-color="gold"] { --service-color: #B07A1E; }

&[href],
&[href]:hover {
  color: var(--text-dark);
  text-decoration: none;
}

&:hover {
  background-color: color-mix(in oklch, var(--service-color) 9%, var(--white));
  box-shadow: inset 0 0 0 1px var(--service-color);
  translate: 0 -1px;
}

&:focus-visible {
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  &:hover {
    translate: none;
  }
}
}
.brand-kit__caption {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.625rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-light);

&.brand-kit__caption--head {
  grid-column: 1 / -1;
}
}
.brand-kit__font {
  font-family: var(--heading-font-family);
font-size: 1.625rem;
font-weight: 700;
line-height: 1;
color: var(--brand-kit-cream);
}
.brand-kit__tile {
  display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.625rem 0.75rem;
border-radius: var(--radius-xs);
background-color: var(--base-dark);
box-shadow: inset 0 0 0 1px var(--neutral-dark);
}
.brand-kit__swatch {
  inline-size: 1.125rem;
block-size: 1.125rem;
border-radius: 50%;
background-color: var(--brand-kit-teal);

&.brand-kit__swatch--accent { background-color: var(--brand-kit-amber); }
&.brand-kit__swatch--cream { background-color: var(--brand-kit-cream); }
&.brand-kit__swatch--ink {
  background-color: var(--base-dark);
  box-shadow: inset 0 0 0 1px var(--base);
}
}
.brand-kit__swatches {
  display: flex;
gap: 0.25rem;
}
.brand-kit__logo {
  display: flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 0.5rem;
background-color: var(--brand-kit-teal);
color: var(--brand-kit-cream);
font-family: var(--heading-font-family);
font-size: 0.6875rem;
font-weight: 700;

&.brand-kit__logo--small {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: 0.3125rem;
  font-size: 0.46875rem;
}
}
.brand-kit__kit {
  display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;

@container (width >= 27rem) {
  display: flex;
  flex-direction: column;
}
}
.brand-kit__arrow-icon {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.brand-kit__arrow {
  display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
rotate: 90deg;

@container (width >= 27rem) {
  rotate: none;
}
}
.brand-kit__bar-dot {
  inline-size: 0.4375rem;
block-size: 0.4375rem;
border-radius: 50%;
background-color: var(--brand-kit-line);
}
.brand-kit__url {
  flex: 1;
overflow: hidden;
margin-inline-start: 0.375rem;
padding: 2px 0.5rem;
border-radius: 999px;
background-color: var(--brand-kit-cream);
font-family: "Label", ui-monospace, monospace;
font-size: 0.59375rem;
color: var(--base-semi-light);
white-space: nowrap;
text-overflow: ellipsis;
}
.brand-kit__bar {
  display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.4375rem 0.625rem;
background-color: var(--brand-kit-sand);
}
.brand-kit__name {
  font-family: var(--heading-font-family);
font-size: 0.625rem;
font-weight: 700;
color: var(--text-dark);
}
.brand-kit__brand {
  display: flex;
align-items: center;
gap: 0.375rem;
}
.brand-kit__link {
  inline-size: 1.375rem;
block-size: 0.25rem;
border-radius: 2px;
background-color: var(--brand-kit-line);
}
.brand-kit__button {
  padding: 3px 0.4375rem;
border-radius: 0.3125rem;
background-color: var(--brand-kit-amber);
color: var(--text-dark);
font-size: 0.53125rem;
font-weight: 700;

&.brand-kit__button--hero {
  align-self: flex-start;
  margin-block-start: 2px;
  padding: 0.25rem 0.5rem;
}
}
.brand-kit__links {
  display: flex;
align-items: center;
gap: 0.375rem;
}
.brand-kit__nav {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
}
.brand-kit__hero-title {
  font-family: var(--heading-font-family);
font-size: 0.875rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--brand-kit-cream);
}
.brand-kit__hero-line {
  inline-size: 85%;
block-size: 0.25rem;
border-radius: 2px;
background-color: color-mix(in oklch, var(--brand-kit-cream) 45%, transparent);

&.brand-kit__hero-line--short {
  inline-size: 60%;
}
}
.brand-kit__hero-text {
  display: flex;
flex-direction: column;
gap: 0.4375rem;
}
.brand-kit__hero-svg {
  position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
}
.brand-kit__hero-image {
  position: relative;
overflow: hidden;
block-size: 4.5rem;
border-radius: 0.5rem;
background-image: linear-gradient(160deg, #F2C67A 0%, var(--brand-kit-amber) 45%, #B8742A 100%);
}
.brand-kit__hero {
  display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
align-items: center;
gap: 0.625rem;
padding: 0.875rem 0.75rem;
background-color: var(--brand-kit-teal);
}
.brand-kit__card-dot {
  inline-size: 0.75rem;
block-size: 0.75rem;
border-radius: 0.25rem;
background-color: var(--brand-kit-teal);

&.brand-kit__card-dot--accent {
  background-color: var(--brand-kit-amber);
}
}
.brand-kit__card-line {
  inline-size: 75%;
block-size: 0.25rem;
border-radius: 2px;
background-color: var(--text-dark);

&.brand-kit__card-line--short {
  inline-size: 55%;
  block-size: 3px;
  background-color: var(--brand-kit-line);
}
}
.brand-kit__card {
  display: flex;
flex-direction: column;
gap: 0.3125rem;
padding: 0.4375rem;
border-radius: 0.375rem;
background-color: var(--white);
}
.brand-kit__cards {
  display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.375rem;
padding: 0.625rem 0.75rem 0.75rem;
}
.brand-kit__site {
  min-inline-size: 0;
overflow: hidden;
border-radius: var(--radius-xs);
background-color: var(--brand-kit-cream);
box-shadow: 0 24px 40px -20px rgb(0 0 0 / 0.7), 0 0 0 1px color-mix(in oklch, var(--white) 8%, transparent);
}
.brand-kit {
  --brand-kit-teal: #256B7B;
--brand-kit-amber: #E9A23B;
--brand-kit-cream: #F4EFE6;
--brand-kit-sand: #E6E0D4;
--brand-kit-line: #CFC8BA;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 0.625rem;
padding: 1rem;
border-radius: var(--radius-s);
background-color: var(--neutral-ultra-dark);
box-shadow: inset 0 0 0 1px var(--neutral-semi-dark);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 27rem) {
  grid-template-columns: 7rem 1.125rem minmax(0, 1fr);
}
}
.ai-chat__avatar-icon {
  display: block;
inline-size: 1.375rem;
block-size: 1.375rem;
}
.ai-chat__avatar {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: 50%;
background-color: var(--base-semi-dark);
box-shadow: inset 0 0 0 1px var(--neutral);
}
.ai-chat__title {
  font-size: 0.9375rem;
font-weight: 600;
}
.ai-chat__role {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-light);
}
.ai-chat__name {
  display: flex;
flex-direction: column;
gap: 1px;
}
.ai-chat__option {
  padding: 3px 0.5625rem;
border-radius: 999px;
font-size: var(--text-xs);
font-weight: 500;
color: var(--neutral-light);

&.ai-chat__option--active {
  background-color: var(--neutral);
  color: var(--white);
  font-weight: 600;
}
}
.ai-chat__switch {
  display: none;
gap: 0.25rem;
margin-inline-start: auto;
padding: 3px;
border-radius: 999px;
background-color: var(--base-semi-dark);
box-shadow: inset 0 0 0 1px var(--neutral-semi-dark);

@container (width >= 22rem) {
  display: inline-flex;
}
}
.ai-chat__head {
  display: flex;
align-items: center;
gap: 0.75rem;
padding-block-end: 0.875rem;
border-block-end: 1px solid var(--neutral-dark);
}
.ai-chat__message {
  padding: 0.625rem 0.75rem;
font-size: var(--text-s);

&.ai-chat__message--out {
  align-self: flex-end;
  max-inline-size: 85%;
  border-radius: 0.625rem 1rem 0.25rem 1rem;
  background-color: var(--ai-chat-blue);
  color: var(--white);
  line-height: 1.45;
}

&.ai-chat__message--in {
  max-inline-size: 92%;
  border-radius: 0.625rem 1rem 1rem 0.25rem;
  background-color: var(--base-semi-dark);
  box-shadow: inset 0 0 0 1px var(--neutral-semi-dark);
  color: var(--neutral-ultra-light);
  line-height: 1.5;
}
}
.ai-chat__sender {
  display: block;
margin-block-end: 3px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--primary-light);
}
.ai-chat__photo {
  flex: none;
display: block;
inline-size: 3.25rem;
block-size: 2.5rem;
border-radius: 0.4375rem;
object-fit: cover;
box-shadow: 0 0 0 1px color-mix(in oklch, var(--white) 18%, transparent);

&.ai-chat__photo--empty {
  background-color: var(--neutral);
}
}
.ai-chat__draft-title {
  font-size: 0.8125rem;
font-weight: 600;
line-height: 1.3;
color: var(--white);
}
.ai-chat__draft-meta {
  font-size: var(--text-xs);
color: var(--neutral-light);
}
.ai-chat__draft-text {
  display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.ai-chat__draft {
  display: flex;
align-items: center;
gap: 0.625rem;
margin-block-start: 0.5rem;
padding: 0.5rem;
border-radius: var(--radius-xs);
background-color: var(--base-dark);
box-shadow: inset 0 0 0 1px var(--neutral-semi-dark);
}
.ai-chat__action {
  padding: 0.3125rem 0.75rem;
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--base);
color: var(--white);
font-size: 0.78125rem;
font-weight: 600;

&.ai-chat__action--primary {
  background-color: var(--success);
  box-shadow: none;
  color: var(--success-ultra-dark);
}
}
.ai-chat__actions {
  display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-block-start: 0.5rem;
}
.ai-chat__status-dot {
  inline-size: 0.4375rem;
block-size: 0.4375rem;
border-radius: 50%;
background-color: var(--success);
}
.ai-chat__status {
  display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4375rem 0.75rem;
border-radius: 999px;
background-color: var(--base-ultra-dark);
box-shadow: inset 0 0 0 1px var(--neutral-dark);
font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.04em;
color: var(--success-light);
}
.ai-chat {
  --ai-chat-blue: #2F6FEB;
display: flex;
flex-direction: column;
gap: 0.625rem;
inline-size: 100%;
max-inline-size: 31.25rem;
padding: 1.25rem;
border-radius: var(--radius-s);
background-color: var(--base-dark);
color: var(--white);
box-shadow: 0 32px 64px -20px rgb(0 0 0 / 0.6), 0 0 0 1px var(--neutral-semi-dark);

:has(> &) {
  container-type: inline-size;
}
}
.logos__plus {
  margin-inline-start: 0.08em;
color: var(--primary);
}
.logos__count {
  font-family: var(--heading-font-family);
font-size: clamp(3.25rem, 5.4vw, 4.75rem);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.05em;
color: var(--text-dark);
}
.logos__lead {
  font-family: var(--heading-font-family);
font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--text-dark);
}
.logos__text {
  max-inline-size: 20rem;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--base-semi-light);
}
.logos__rating {
  margin-block-start: 0.625rem;
padding-block-start: 1.125rem;
border-block-start: 1px solid var(--accent-semi-light);
}
.logos__intro {
  display: flex;
flex-direction: column;
gap: 0.625rem;
}
.logos__image {
  block-size: calc(var(--logo-height, 2.125rem) * 0.72);
inline-size: auto;
max-inline-size: 100%;
object-fit: contain;
/* ACSS auto-radius geldt voor alle img; logo's blijven recht */
border-radius: 0;

@container (width >= 38rem) {
  block-size: var(--logo-height, 2.125rem);
}
}
.logos__name {
  font-size: var(--text-xs);
font-weight: 600;
text-align: center;
color: var(--base-semi-light);
}
.logos__item {
  /* Flex in plaats van vaste kolommen: de laatste rij rekt mee, dus nooit lege vakken */
flex: 1 1 calc((100% - 3px) / 3);
display: flex;
align-items: center;
justify-content: center;
block-size: 4.25rem;
margin: 0;
padding-inline: 0.625rem;
background-color: var(--white);

@container (width >= 38rem) {
  flex-basis: calc((100% - 5px) / 5);
  block-size: 5.75rem;
  padding-inline: 0.875rem;
}
}
.logos__grid {
  display: flex;
flex-wrap: wrap;
gap: 1px;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
border-radius: var(--radius-s);
background-color: var(--accent-semi-light);
box-shadow: 0 0 0 1px var(--accent-semi-light);
}
.logos__inner {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: clamp(1.75rem, 4vw, 4rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 55rem) {
  grid-template-columns: minmax(13.75rem, 18.75rem) minmax(0, 1fr);
}
}
.logos {
  padding-block: var(--section-space-xs);
border-block-end: 1px solid var(--accent-semi-light);
}
.pains__grid {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr));
gap: 1rem;
}
.pains__container {
  gap: 3rem;
}
.pains {
  border-block: 1px solid var(--accent-light);
}
.bento-card__muted {
  color: var(--base-semi-light);

.bento-card--build & {
  display: block;
  color: var(--base-light);
}

.bento-card--manage & {
  color: var(--bento-manage-muted);
}
}
.bento-card__title {
  margin: 0;
font-size: var(--h3);
line-height: 1.15;
letter-spacing: -0.03em;
}
.bento-card__text {
  font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark-muted);

.bg--dark & {
  color: var(--text-light-muted);
}
}
.bento-card__price {
  padding-block-start: 1rem;
border-block-start: 1px solid var(--neutral-dark);
}
.bento-card__visual {
  margin-block-start: auto;
padding-block-start: 0.5rem;
}
.bento-card {
  display: flex;
flex-direction: column;
gap: 1.125rem;
overflow: hidden;
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: var(--radius-s);

@container (width >= 56rem) {
  grid-column: 6 / 13;
}

&.bento-card--build {
  @container (width >= 56rem) {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
  }
}

&.bento-card--manage {
  --bento-manage-muted: #8A5A55;
  background-color: color-mix(in oklch, var(--primary) 13%, var(--white));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 28%, var(--white));
}

&.bento-card--grow {
  background-color: var(--white);
  box-shadow: inset 0 0 0 1px var(--accent-semi-light);
}
}
.bento-card__service {
  display: flex;
margin: 0;
}
.bento-card__services {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(12.5rem, 100%), 1fr));
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.bento-card__footer {
  padding-block-start: 1.25rem;
border-block-start: 1px solid var(--accent-light);
}
.ai-card__muted {
  color: var(--base-semi-light);
}
.ai-card__title {
  margin: 0;
font-size: clamp(1.625rem, 2.8vw, 2.5rem);
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--text-dark);
}
.ai-card__text {
  max-inline-size: 35rem;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--text-dark-muted);
}
.ai-card__action {
  padding-block-start: 0.375rem;
}
.ai-card__content {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
min-inline-size: 0;
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: 0.75rem;
background-color: var(--white);
color: var(--text-dark);
}
.ai-card__visual {
  display: flex;
justify-content: center;
min-inline-size: 0;
}
.ai-card {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(23.75rem, 100%), 1fr));
align-items: center;
gap: 1.75rem clamp(1.75rem, 4vw, 4rem);
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: var(--radius-s);
background-color: var(--primary-dark);
scroll-margin-block-start: 1.5rem;

@container (width >= 56rem) {
  grid-column: 1 / -1;
}
}
.bento {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;

:has(> &) {
  container-type: inline-size;
}

@container (width >= 56rem) {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
}
.services__container {
  gap: 3rem;
}
.project-card__image {
  position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: 0;
transition: scale 0.4s ease;

.project-card:hover & {
  scale: 1.04;
}

@media (prefers-reduced-motion: reduce) {
  .project-card:hover & {
    scale: none;
  }
}
}
.project-card__shade {
  position: absolute;
inset: 0;
background-image: linear-gradient(180deg, transparent 55%, color-mix(in oklch, var(--base-dark) 55%, transparent) 100%);
}
.project-card__branch {
  position: absolute;
inset-inline-start: 0.875rem;
inset-block-start: 0.875rem;
padding: 0.3125rem 0.625rem;
border-radius: 999px;
background-color: color-mix(in oklch, var(--base-dark) 72%, transparent);
backdrop-filter: blur(8px);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--white) 14%, transparent);
font-family: "Label", ui-monospace, monospace;
font-size: 0.71875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--white);
}
.project-card__logo-image {
  display: block;
inline-size: auto;
max-inline-size: 100%;
block-size: min(var(--logo-height, 2.125rem), 2.25rem);
object-fit: contain;
border-radius: 0;
}
.project-card__logo {
  position: absolute;
inset-inline-start: 0.875rem;
inset-block-end: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
inline-size: 7rem;
block-size: 3.25rem;
padding-inline: 0.75rem;
border-radius: var(--radius-xs);
background-color: var(--white);
box-shadow: 0 12px 28px -12px rgb(0 0 0 / 0.6);
}
.project-card__media {
  position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
background-color: var(--neutral-dark);
}
.project-card__name {
  font-weight: 600;
color: var(--neutral-ultra-light);
}
.project-card__dot {
  margin-inline: 0.25rem;
color: var(--base-semi-light);
}
.project-card__meta {
  font-size: 0.8125rem;
color: var(--neutral-light);
}
.project-card__title {
  margin: 0;
font-size: clamp(1.125rem, 1.5vw, 1.25rem);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--white);

.project-card:hover & {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
}
.project-card__text {
  font-size: 0.90625rem;
line-height: 1.55;
color: var(--neutral-light);
}
.project-card__tag {
  margin: 0;
padding: 0.25rem 0.625rem;
border-radius: 999px;
background-color: color-mix(in oklch, var(--white) 6%, transparent);
box-shadow: inset 0 0 0 1px var(--neutral-semi-dark);
font-size: 0.78125rem;
font-weight: 500;
color: var(--base-ultra-light);
}
.project-card__tags {
  display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin: 2px 0 0;
padding: 0;
list-style: none;
}
.project-card__arrow {
  display: block;
flex: none;
inline-size: 1rem;
block-size: 1rem;
rotate: -45deg;
transition: translate 0.2s ease;

.project-card:hover & {
  translate: 2px -2px;
}

@media (prefers-reduced-motion: reduce) {
  .project-card:hover & {
    translate: none;
  }
}
}
.project-card__link {
  display: inline-flex;
align-items: center;
gap: 0.5rem;
min-block-size: 2.75rem;
font-size: 0.9375rem;
font-weight: 600;

&[href],
&[href]:hover {
  color: var(--primary-light);
  text-decoration: none;
}

&::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem;
}

&:focus-visible {
  outline: none;
}
}
.project-card__pending {
  display: inline-flex;
align-items: center;
min-block-size: 2.75rem;
font-size: var(--text-s);
color: var(--base-light);
}
.project-card__footer {
  margin-block-start: auto;
padding-block-start: 0.375rem;
}
.project-card__body {
  flex: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.25rem 1.375rem 1.125rem;
}
.project-card {
  position: relative;
display: flex;
flex-direction: column;
overflow: clip;
border-radius: 1rem;
background-color: var(--neutral-ultra-dark);
box-shadow: inset 0 0 0 1px var(--neutral-dark);
color: var(--white);
transition: box-shadow 0.2s ease, translate 0.2s ease;

&[hidden] {
  display: none;
}

&:hover {
  box-shadow: inset 0 0 0 1px var(--base);
  translate: 0 -2px;
}

&:focus-within {
  outline: 3px solid var(--focus-color);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  &:hover {
    translate: none;
  }
}
}
.branch-panel__who {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-light);
}
.branch-panel__title {
  margin: 0;
font-size: clamp(1.75rem, 3.2vw, 2.75rem);
line-height: 1.05;
letter-spacing: -0.035em;
}
.branch-panel__lead {
  max-inline-size: 35rem;
font-size: var(--text-l);
line-height: 1.55;

.branch-panel--other & {
  max-inline-size: 37.5rem;
  color: var(--text-dark-muted);
}
}
.branch-panel__label {
  margin-block-end: -0.5rem;
font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--neutral-light);

.branch-panel__for & {
  margin-block-end: 0;
}
}
.branch-panel__check-icon {
  display: block;
inline-size: 0.9375rem;
block-size: 0.9375rem;
}
.branch-panel__check {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 0.5rem;
background-color: color-mix(in oklch, var(--success) 16%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--success) 45%, transparent);
color: var(--success-light);
}
.branch-panel__item-title {
  font-size: 0.96875rem;
font-weight: 600;
line-height: 1.35;
}
.branch-panel__item {
  display: flex;
align-items: center;
gap: 0.75rem;
margin: 0;
padding: 1rem;
border-radius: 0.75rem;
background-color: var(--base-semi-dark);
box-shadow: inset 0 0 0 1px var(--neutral-semi-dark);
color: var(--white);
}
.branch-panel__items {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;

@container (width >= 35rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.branch-panel__example {
  margin: 0;
padding: 0.375rem 0.75rem;
border-radius: 999px;
background-color: color-mix(in oklch, var(--white) 7%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--white) 14%, transparent);
font-size: var(--text-s);
font-weight: 500;
color: var(--neutral-ultra-light);
}
.branch-panel__examples {
  display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.branch-panel__for {
  display: flex;
flex-direction: column;
gap: 0.625rem;
}
.branch-panel__ai-title {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: var(--text-m);
font-weight: 600;
color: var(--white);
}
.branch-panel__ai-lead {
  font-weight: 600;
color: var(--primary-light);
}
.branch-panel__ai-example {
  font-size: 0.90625rem;
line-height: 1.5;
color: var(--text-light-muted);
}
.branch-panel__ai-text {
  flex: 1 1 17.5rem;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.branch-panel__link-arrow {
  display: block;
flex: none;
inline-size: 1rem;
block-size: 1rem;
transition: translate 0.2s ease;

.branch-panel__link:hover & {
  translate: 3px 0;
}
}
.branch-panel__link {
  flex: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-block-size: 2.75rem;
font-size: 0.9375rem;

&[href],
&[href]:hover {
  color: var(--primary-light);
  text-decoration: none;
}

&[href]:hover {
  color: var(--white);
}

&:focus-visible {
  outline-offset: 3px;
  border-radius: 0.375rem;
}
}
.branch-panel__ai {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.875rem 1rem;
padding: 1.125rem 1.25rem;
border-radius: 0.75rem;
background-image: linear-gradient(135deg, color-mix(in oklch, var(--primary) 16%, transparent), color-mix(in oklch, var(--primary) 4%, transparent));
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary-light) 40%, transparent);
}
.branch-panel__actions {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.75rem;
margin-block-start: auto;
padding-block-start: 1.25rem;
border-block-start: 1px solid var(--neutral-dark);
}
.branch-panel {
  position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: clamp(1.625rem, 3.4vw, 2.75rem);
border-radius: var(--radius-s);

&[hidden] {
  display: none;
}

&:focus-visible {
  outline-offset: 3px;
}

&.branch-panel--other {
  gap: 1.125rem;
  border: 1.5px dashed color-mix(in oklch, var(--primary) 55%, transparent);
  background-color: color-mix(in oklch, var(--primary) 4%, transparent);
}

& > :not(.branch-panel__icon-wrap, svg) {
  position: relative;
}

& > svg.branch-panel__icon {
  position: absolute;
  inset-block-start: -2.5rem;
  inset-inline-end: -2.5rem;
  inline-size: 13.75rem;
  block-size: 13.75rem;
  color: var(--primary);
  opacity: 0.14;
  pointer-events: none;
}
}
.branch-panel__kicker {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-dark);
}
.branch-panel__accent {
  color: var(--primary-dark);
}
.marquee__chip {
  flex: none;
padding: 0.375rem 0.75rem;
border-radius: 999px;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-semi-light);
font-size: 0.84375rem;
font-weight: 500;
color: var(--text-dark);
white-space: nowrap;
}
.marquee__track {
  display: flex;
gap: 0.5rem;
inline-size: max-content;
animation: marquee 70s linear infinite;

&.marquee__track--reverse {
  animation-direction: reverse;
  animation-duration: 80s;
}

@media (prefers-reduced-motion: reduce) {
  animation: none;
}
}
.marquee {
  display: flex;
flex-direction: column;
gap: 0.5rem;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.branch-panel__cta {
  margin-block-start: 0.375rem;
}
.branch-tab__label {
  flex: 1;
}
.branch-tab {
  flex: none;
display: flex;
align-items: center;
gap: 0.625rem;
min-block-size: 2.75rem;
padding-inline: 0.875rem;
border: 0;
border-radius: var(--radius-xs);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-semi-light);
color: var(--text-dark);
font: inherit;
font-size: var(--text-s);
font-weight: 600;
line-height: 1.25;
text-align: start;
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease;

& svg {
  display: block;
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

@container (width >= 53rem) {
  inline-size: 100%;
  min-block-size: 2.875rem;
  font-size: 0.9375rem;
}

&[aria-selected="false"]:hover {
  box-shadow: inset 0 0 0 1.5px var(--text-dark);
}

&[aria-selected="true"] {
  background-color: var(--primary);
  box-shadow: none;
}

&.branch-tab--other[aria-selected="false"] {
  border: 1.5px dashed color-mix(in oklch, var(--primary) 60%, transparent);
  background-color: transparent;
  box-shadow: none;
}

&.branch-tab--other[aria-selected="false"]:hover {
  box-shadow: inset 0 0 0 1px var(--text-dark);
}

&:focus-visible {
  outline-offset: 2px;
}

/* ACSS button-typografie (button:not([class*=btn--])) overschrijven */
&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.25;
}
}
.branch-picker__tabs {
  display: flex;
flex-wrap: nowrap;
gap: 0.375rem;
overflow-x: auto;
margin-inline-end: calc(var(--gutter) * -1);
padding: 2px var(--gutter) 0.375rem 2px;
scrollbar-width: none;

&::-webkit-scrollbar {
  display: none;
}

@container (width >= 35rem) {
  flex-wrap: wrap;
  overflow: visible;
  margin-inline-end: 0;
  padding: 0;
}

@container (width >= 53rem) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
}
.branch-picker__panels {
  min-inline-size: 0;

.branch-picker:not([data-ready]) & > .branch-panel:not(:first-of-type) {
  display: none;
}
}
.branch-picker {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: 1rem clamp(1.125rem, 2vw, 1.75rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 53rem) {
  grid-template-columns: minmax(13.75rem, 16.25rem) minmax(0, 1fr);
}
}
.branches__container {
  gap: 3rem;
}
.branches {
  border-block: 1px solid var(--accent-light);
}
.filter__name {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--neutral-light);
}
.filter__value {
  overflow: hidden;
font-size: 0.9375rem;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
.filter__text {
  display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.filter__chevron {
  display: block;
flex: none;
inline-size: 1.125rem;
block-size: 1.125rem;
transition: rotate 0.2s ease;

.filter__toggle[aria-expanded="true"] & {
  rotate: 180deg;
}
}
.filter__toggle {
  inline-size: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
min-block-size: 3.75rem;
padding: 0.5rem 1rem;
border: 0;
border-radius: var(--radius-xs);
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--neutral);
color: var(--white);
font: inherit;
text-align: start;
cursor: pointer;
transition: box-shadow 0.2s ease, background-color 0.2s ease;

&[data-active] {
  box-shadow: inset 0 0 0 1.5px var(--white);
}

&[aria-expanded="false"]:hover {
  background-color: color-mix(in oklch, var(--white) 6%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--neutral-semi-light);
}

&:focus-visible {
  outline-offset: 2px;
}

/* ACSS button-typografie (button:not([class*=btn--])) overschrijven */
&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.3;
}
}
.filter__option-label {
  flex: 1;
min-inline-size: 0;
}
.filter__option-count {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
color: var(--neutral-light);
}
.filter__tick {
  display: block;
flex: none;
inline-size: 1rem;
block-size: 1rem;
color: var(--success);
opacity: 0;

.filter__option[aria-pressed="true"] & {
  opacity: 1;
}
}
.filter__option {
  display: flex;
align-items: center;
gap: 0.625rem;
min-block-size: 2.75rem;
padding-inline: 0.75rem;
border: 0;
border-radius: 0.5rem;
background-color: transparent;
color: var(--neutral-ultra-light);
font: inherit;
font-size: 0.9375rem;
font-weight: 500;
text-align: start;
cursor: pointer;

&:hover {
  background-color: color-mix(in oklch, var(--white) 6%, transparent);
  color: var(--white);
}

&[aria-pressed="true"] {
  background-color: color-mix(in oklch, var(--white) 8%, transparent);
  color: var(--white);
  font-weight: 600;
}

&:focus-visible {
  outline-offset: 2px;
}

/* ACSS button-typografie (button:not([class*=btn--])) overschrijven */
&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.3;
}
}
.filter__menu {
  position: absolute;
z-index: 30;
inset-block-start: calc(100% + 0.5rem);
inset-inline: 0;
min-inline-size: 15rem;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0.375rem;
border-radius: 0.75rem;
background-color: var(--neutral-ultra-dark);
box-shadow: inset 0 0 0 1px var(--neutral-semi-dark), 0 24px 48px -16px rgb(0 0 0 / 0.7);

&[hidden] {
  display: none;
}
}
.filter {
  position: relative;
inline-size: 100%;
}
.work__reset {
  align-self: flex-end;
display: inline-flex;
align-items: center;
min-block-size: 2.25rem;
padding: 0;
border: 0;
background: none;
color: var(--white);
font: inherit;
font-size: var(--text-s);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;

&[hidden] {
  display: none;
}

/* ACSS button-typografie (button:not([class*=btn--])) overschrijven */
&[type="button"] {
  letter-spacing: normal;
}
}
.work__filters {
  display: flex;
flex-direction: column;
gap: 0.625rem;
}
.work__head {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: end;
gap: 1.75rem 3.5rem;

:has(> &) {
  container-type: inline-size;
}

@container (width >= 53rem) {
  grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 22.5rem);
}
}
.work__grid {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2.5rem;

@container (width >= 35rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3.5rem clamp(1.25rem, 2.4vw, 2rem);
}

@container (width >= 56rem) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.work__more-icon {
  display: block;
flex: none;
inline-size: 1.125rem;
block-size: 1.125rem;
transition: translate 0.2s ease, rotate 0.2s ease;

.work__more-button:hover & {
  translate: 0 2px;
}

[aria-expanded="true"] > & {
  rotate: 180deg;
}
}
.work__more-button {
  display: inline-flex;
align-items: center;
gap: 0.625rem;
min-block-size: 3.25rem;
padding-inline: 1.5rem;
border: 0;
border-radius: var(--radius-xs);
background-color: var(--primary);
color: var(--text-dark);
font: inherit;
font-size: var(--text-m);
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease;

&:hover {
  background-color: color-mix(in oklch, var(--primary) 86%, var(--white));
}

&:focus-visible {
  outline-offset: 3px;
}

&[hidden] {
  display: none;
}

/* ACSS button-typografie (button:not([class*=btn--])) overschrijven */
&[type="button"] {
  letter-spacing: normal;
}
}
.work__more {
  display: flex;
justify-content: center;

&:has(> [hidden]) {
  display: none;
}
}
.work__empty-text {
  font-size: var(--text-m);
color: var(--text-light-muted);
}
.work__empty-reset {
  min-block-size: 2.75rem;
padding-inline: 1rem;
border: 0;
border-radius: var(--radius-xs);
background-color: var(--white);
color: var(--text-dark);
font: inherit;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;

&:focus-visible {
  outline-offset: 3px;
}

/* ACSS button-typografie (button:not([class*=btn--])) overschrijven */
&[type="button"] {
  letter-spacing: normal;
}
}
.work__empty {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.75rem;
border-radius: var(--radius-s);
box-shadow: inset 0 0 0 1px var(--neutral-dark);

&[hidden] {
  display: none;
}
}
.work__container {
  position: relative;
z-index: 1;
gap: 3rem;
}
.work {
  position: relative;
overflow: clip;

&::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in oklch, var(--white) 2.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--white) 2.5%, transparent) 1px, transparent 1px);
  background-size: 112px 112px;
  background-position: center top;
  mask-image: linear-gradient(180deg, black 0%, transparent 35%);
  pointer-events: none;
}
}
.work__glow {
  position: absolute;
inset: 0;
pointer-events: none;
background-image:
  radial-gradient(circle 360px at 8% 10%, color-mix(in oklch, var(--primary) 13%, transparent) 0%, transparent 65%),
  radial-gradient(circle 410px at 100% 52%, color-mix(in oklch, var(--primary) 9%, transparent) 0%, transparent 65%),
  radial-gradient(circle 380px at 45% 100%, color-mix(in oklch, var(--primary) 8%, transparent) 0%, transparent 65%),
  radial-gradient(circle 210px at 76% 20%, color-mix(in oklch, var(--primary-light) 6%, transparent) 0%, transparent 65%);
}
.link-tile__title {
  font-size: 1.0625rem;
font-weight: 600;
}
.link-tile__desc {
  font-size: 0.90625rem;
line-height: 1.45;
color: var(--base-semi-light);
}
.link-tile__text {
  flex: 1;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.link-tile__arrow {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.link-tile__go {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.25rem;
block-size: 2.25rem;
border-radius: var(--radius-xs);
background-color: var(--primary);
color: var(--text-dark);
transition: translate 0.2s ease;

.link-tile:hover & {
  translate: 3px 0;
}

@media (prefers-reduced-motion: reduce) {
  .link-tile:hover & {
    translate: none;
  }
}
}
.link-tile {
  block-size: 100%;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.125rem 1.25rem;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-semi-light);
transition: box-shadow 0.2s ease;

&[href],
&[href]:hover {
  color: var(--text-dark);
  text-decoration: none;
}

&:hover {
  box-shadow: inset 0 0 0 1.5px var(--text-dark);
}

&:focus-visible {
  outline-offset: 3px;
}
}
.not-found__zero {
  color: var(--primary);
}
.not-found__code {
  font-family: var(--heading-font-family);
font-size: clamp(7rem, 14vw, 13.75rem);
font-weight: 700;
line-height: 0.85;
letter-spacing: -0.07em;
color: var(--text-dark);
}
.not-found__muted {
  color: var(--base-semi-light);
}
.not-found__title {
  margin: 0;
}
.not-found__text {
  max-inline-size: 38.75rem;
font-size: clamp(var(--text-l), 1.6vw, 1.25rem);
line-height: 1.55;
color: var(--text-dark-muted);
}
.not-found__secondary {
  display: inline-flex;
align-items: center;
min-block-size: 3.5rem;
padding-inline: 1.75rem;
border-radius: var(--radius-xs);
box-shadow: inset 0 0 0 1.5px var(--text-dark);
font-size: var(--text-l);
font-weight: 600;
transition: background-color 0.2s ease, color 0.2s ease;

&[href] {
  color: var(--text-dark);
  text-decoration: none;
}

&[href]:hover {
  background-color: var(--text-dark);
  color: var(--white);
}

&:focus-visible {
  outline-offset: 3px;
}
}
.not-found__actions {
  display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.not-found__content {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.not-found__intro {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 5vw, 5rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 53rem) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
}
.not-found__label {
  font-family: "Label", ui-monospace, monospace;
font-size: var(--text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.not-found__tile {
  margin: 0;
}
.not-found__tiles {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;

@container (width >= 35rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (width >= 53rem) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.not-found__nav {
  display: flex;
flex-direction: column;
gap: 1rem;
}
.not-found__container {
  gap: clamp(3rem, 6vw, 5rem);
}
.not-found {
  padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(4rem, 8vw, 7rem);
}
.google-review__avatar {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background-color: var(--google-review-avatar);
color: var(--white);
font-family: var(--heading-font-family);
font-size: var(--text-s);
font-weight: 700;
}
.google-review__name {
  font-size: 0.96875rem;
color: var(--text-dark);
}
.google-review__age {
  font-size: 0.84375rem;
color: var(--base-semi-light);
}
.google-review__who {
  flex: 1;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.google-review__logo {
  display: block;
inline-size: 1rem;
block-size: 1rem;
}
.google-review__badge {
  flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 50%;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
}
.google-review__head {
  display: flex;
align-items: center;
gap: 0.75rem;
}
.google-review__star {
  display: block;
inline-size: 1rem;
block-size: 1rem;
}
.google-review__stars {
  display: inline-flex;
gap: 2px;
color: var(--google-review-star);
}
.google-review__text {
  margin: 0;
font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;

&[data-expanded="true"] {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  overflow: visible;
}
}
.google-review {
  --google-review-avatar: #9A6A12;
--google-review-star: #FBBC05;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
border: 0;
padding: 1.5rem;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-semi-light), 0 22px 44px -30px color-mix(in oklch, var(--base-dark) 28%, transparent);

&[data-tone="blue"] { --google-review-avatar: #2F5E9E; }
&[data-tone="green"] { --google-review-avatar: var(--success-dark); }
&[data-tone="red"] { --google-review-avatar: var(--primary-dark); }
&[data-tone="violet"] { --google-review-avatar: #5E43A8; }
&[data-tone="teal"] { --google-review-avatar: #0B7586; }

&::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  background-image: linear-gradient(180deg, #4285F4 0%, #EA4335 35%, #FBBC05 65%, #34A853 100%);
}
}
.story-card__mark {
  display: block;
block-size: 1.875rem;
font-family: var(--heading-font-family);
font-size: 4rem;
font-weight: 700;
line-height: 0.95;
color: var(--story-color);
}
.story-card__tag {
  align-self: flex-start;
padding: 3px 0.5625rem;
border-radius: 999px;
background-color: color-mix(in oklch, var(--story-color) 9%, var(--white));
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--story-color) 38%, var(--white));
font-family: "Label", ui-monospace, monospace;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
color: var(--story-color);
}
.story-card__title {
  font-family: var(--heading-font-family);
font-size: 1.1875rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--text-dark);
}
.story-card__quote {
  margin: 0;
font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark-muted);
}
.story-card__avatar {
  flex: none;
display: block;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
object-fit: cover;
}
.story-card__name {
  font-size: 0.9375rem;
color: var(--text-dark);
}
.story-card__role {
  font-size: var(--text-s);
color: var(--base-semi-light);
}
.story-card__who {
  flex: 1 1 8.75rem;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.story-card__author {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem 0.75rem;
margin-block-start: auto;
padding-block-start: 1rem;
border-block-start: 1px solid var(--accent-light);
}
.story-card {
  --story-color: #85590C;
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
padding: 1.625rem;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-semi-light), 0 22px 44px -30px color-mix(in oklch, var(--base-dark) 28%, transparent);

&[data-tone="green"] { --story-color: var(--success-dark); }
&[data-tone="blue"] { --story-color: #2F5E9E; }
&[data-tone="red"] { --story-color: var(--primary-dark); }
&[data-tone="violet"] { --story-color: #5E43A8; }
}
.service-item__svg {
  display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
}
.service-item__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: 0.6875rem;
background-color: color-mix(in oklch, var(--service-color) 10%, var(--white));
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--service-color) 33%, transparent);
color: var(--service-color);
}
.service-item__title {
  font-family: var(--heading-font-family);
font-size: 0.96875rem;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--text-dark);
}
.service-item__text {
  font-size: 0.90625rem;
line-height: 1.5;
color: var(--text-dark-muted);
}
.service-item__body {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.service-item {
  --service-color: var(--primary);
display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 1.125rem;
border-radius: var(--radius-s);
background-color: color-mix(in oklch, var(--service-color) 4%, var(--white));
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--service-color) 22%, var(--white));
scroll-margin-block-start: 8.75rem;

&[data-color="violet"] { --service-color: #7A5AC8; }
&[data-color="green"] { --service-color: var(--success-dark); }
&[data-color="amber"] { --service-color: #D9962B; }
&[data-color="blue"] { --service-color: #3D74C4; }
&[data-color="gold"] { --service-color: #B07A1E; }
}
.channel-card__query-icon {
  display: block;
flex: none;
inline-size: 0.875rem;
block-size: 0.875rem;
color: var(--base-semi-light);
}
.channel-card__query {
  display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--accent-semi-light);
font-size: 0.84375rem;
color: var(--text-dark);
}
.channel-card__url {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.6875rem;
color: var(--base-semi-light);
}
.channel-card__result-title {
  --channel-link: #1A0DAB;
font-size: 0.9375rem;
font-weight: 600;
color: var(--channel-link);
}
.channel-card__result-text {
  font-size: 0.78125rem;
line-height: 1.45;
color: var(--text-dark-muted);
}
.channel-card__result {
  display: flex;
flex-direction: column;
gap: 3px;
padding: 4px 4px 0;
}
.channel-card__line {
  inline-size: 38%;
block-size: 0.4375rem;
border-radius: 4px;
background-color: var(--accent-light);

&.channel-card__line--long {
  inline-size: 82%;
  background-color: var(--accent-ultra-light);
}
}
.channel-card__lines {
  display: flex;
flex-direction: column;
gap: 6px;
padding: 0.5rem 4px 2px;
border-block-start: 1px solid var(--accent-ultra-light);
}
.channel-card__search {
  inline-size: 100%;
max-inline-size: 20.625rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 0.875rem;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: 0 1px 2px color-mix(in oklch, var(--base-dark) 6%, transparent), 0 20px 40px -24px color-mix(in oklch, var(--primary-dark) 45%, transparent);
}
.channel-card__map {
  position: absolute;
inset: 0;
display: block;
inline-size: 100%;
block-size: 100%;
}
.channel-card__pin {
  display: block;
inline-size: 2.5rem;
block-size: 3rem;
filter: drop-shadow(0 8px 10px color-mix(in oklch, var(--success-dark) 35%, transparent));
}
.channel-card__business-name {
  font-size: var(--text-s);
font-weight: 600;
color: var(--text-dark);
}
.channel-card__star {
  display: block;
inline-size: 0.6875rem;
block-size: 0.6875rem;
}
.channel-card__stars {
  --channel-star: #E2A33B;
display: inline-flex;
gap: 1px;
color: var(--channel-star);
}
.channel-card__business-meta {
  display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
color: var(--text-dark-muted);
}
.channel-card__business {
  display: flex;
flex-direction: column;
gap: 2px;
padding: 0.625rem 0.875rem;
border-radius: 12px;
background-color: var(--white);
box-shadow: 0 1px 2px color-mix(in oklch, var(--base-dark) 6%, transparent), 0 18px 36px -20px color-mix(in oklch, var(--success-dark) 50%, transparent);
}
.channel-card__place {
  position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.625rem;
}
.channel-card__question {
  align-self: flex-end;
max-inline-size: 82%;
padding: 0.625rem 0.875rem;
border-radius: 16px 16px 4px 16px;
background-color: var(--white);
box-shadow: 0 1px 2px color-mix(in oklch, var(--base-dark) 6%, transparent);
font-size: 0.84375rem;
line-height: 1.45;
color: var(--text-dark);
}
.channel-card__sparkle {
  display: block;
flex: none;
inline-size: 1rem;
block-size: 1rem;
margin-block-start: 2px;
}
.channel-card__answer-name {
  color: var(--white);
}
.channel-card__answer {
  align-self: flex-start;
display: flex;
gap: 0.625rem;
max-inline-size: 94%;
padding: 0.75rem 0.875rem;
border-radius: 16px 16px 16px 4px;
background-color: var(--base-dark);
box-shadow: 0 20px 40px -24px color-mix(in oklch, #7A5AC8 70%, transparent);
font-size: 0.84375rem;
line-height: 1.5;
color: var(--neutral-ultra-light);
}
.channel-card__chat {
  inline-size: 100%;
max-inline-size: 20.625rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.channel-card__visual {
  position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
block-size: 13.75rem;
padding: 1.25rem;
border-block-end: 1px solid var(--accent-semi-light);
background-color: var(--channel-bg);
}
.channel-card__number {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 50%;
background-color: var(--channel-color);
color: var(--white);
font-size: 0.8125rem;
font-weight: 700;
}
.channel-card__title {
  margin: 0;
font-size: 1.1875rem;
letter-spacing: -0.02em;
}
.channel-card__heading {
  display: flex;
align-items: center;
gap: 0.75rem;
}
.channel-card__text {
  font-size: 0.96875rem;
line-height: 1.55;
color: var(--text-dark-muted);
}
.channel-card__body {
  display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 1.375rem 1.5rem 1.625rem;
}
.channel-card {
  --channel-color: var(--primary-dark);
--channel-bg: var(--primary-ultra-light);
min-inline-size: 0;
display: flex;
flex-direction: column;
scroll-margin-block-start: 8.75rem;

&[data-variant="map"] {
  --channel-color: var(--success-dark);
  --channel-bg: #E4F1E8;
}

&[data-variant="ai"] {
  --channel-color: #7A5AC8;
  --channel-bg: #F1EDFA;
}
}
.check-result__kicker {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.71875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.check-result__site {
  font-family: var(--heading-font-family);
font-size: var(--text-m);
font-weight: 600;
letter-spacing: -0.02em;
}
.check-result__titles {
  display: flex;
flex-direction: column;
gap: 2px;
}
.check-result__score-value {
  display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background-color: var(--white);
font-family: "Label", ui-monospace, monospace;
font-size: 0.9375rem;
font-weight: 600;
color: var(--check-result-amber-dark);
}
.check-result__score {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 3.5rem;
block-size: 3.5rem;
border-radius: 50%;
background-image: conic-gradient(var(--check-result-amber) 0 59%, var(--accent-light) 59% 100%);
}
.check-result__head {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.check-result__label {
  font-size: var(--text-s);
font-weight: 500;
}
.check-result__fill {
  display: block;
block-size: 100%;
border-radius: 999px;
background-color: var(--primary);

&.check-result__fill--amber { background-color: var(--check-result-amber); }
&.check-result__fill--green { background-color: var(--success); }
&.check-result__fill--64 { inline-size: 64%; }
&.check-result__fill--38 { inline-size: 38%; }
&.check-result__fill--86 { inline-size: 86%; }
&.check-result__fill--47 { inline-size: 47%; }
}
.check-result__track {
  overflow: hidden;
block-size: 0.5rem;
border-radius: 999px;
background-color: var(--accent-light);
}
.check-result__value {
  justify-self: end;
font-family: "Label", ui-monospace, monospace;
font-size: 0.8125rem;
font-weight: 600;
color: var(--primary-dark);

&.check-result__value--amber { color: var(--check-result-amber-dark); }
&.check-result__value--green { color: var(--success-dark); }
}
.check-result__row {
  display: grid;
grid-template-columns: 6rem minmax(0, 1fr) 2.125rem;
align-items: center;
gap: 0.75rem;
margin: 0;
}
.check-result__rows {
  display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
.check-result__alert-icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.25rem;
block-size: 1.25rem;
border-radius: 50%;
background-color: var(--primary);
color: var(--white);
font-size: 0.75rem;
font-weight: 700;
}
.check-result__alert {
  display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0.75rem;
border-radius: var(--radius-xs);
background-color: var(--primary-ultra-light);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 35%, var(--white));
font-size: var(--text-s);
font-weight: 500;
color: var(--primary-dark);
}
.check-result {
  --check-result-amber: #D9962B;
--check-result-amber-dark: #9A4F06;
position: relative;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.375rem;
border-radius: var(--radius-s);
background-color: var(--white);
color: var(--text-dark);
box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.7);
}
.google-card__logo {
  display: block;
flex: none;
inline-size: 1.5rem;
block-size: 1.5rem;
}
.google-card__name {
  font-size: 0.9375rem;
font-weight: 600;
color: var(--base);
}
.google-card__brand {
  display: flex;
align-items: center;
gap: 0.625rem;
}
.google-card__value {
  font-family: var(--heading-font-family);
font-size: 2.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.04em;
}
.google-card__star {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.google-card__stars {
  --google-card-star: #FBBC05;
display: inline-flex;
gap: 2px;
color: var(--google-card-star);
}
.google-card__label {
  font-size: 0.84375rem;
color: var(--base-semi-light);
}
.google-card__meta {
  display: flex;
flex-direction: column;
gap: 4px;
}
.google-card__score {
  display: flex;
align-items: center;
gap: 0.875rem;
}
.google-card__arrow {
  display: block;
flex: none;
inline-size: 0.875rem;
block-size: 0.875rem;
rotate: -45deg;
}
.google-card__go {
  --google-card-link: #1A73E8;
display: inline-flex;
align-items: center;
gap: 6px;
padding-block-start: 0.75rem;
border-block-start: 1px solid var(--accent-light);
font-size: 0.90625rem;
font-weight: 600;
color: var(--google-card-link);

.google-card:hover & {
  text-decoration: underline;
  text-underline-offset: 3px;
}
}
.google-card {
  --google-card-blue: #4285F4;
--google-card-red: #EA4335;
--google-card-yellow: #FBBC05;
--google-card-green: #34A853;
justify-self: start;
display: flex;
flex-direction: column;
gap: 0.875rem;
padding: 1.25rem 1.375rem;
border: 2px solid transparent;
border-radius: var(--radius-s);
background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(90deg, var(--google-card-blue) 0%, var(--google-card-red) 35%, var(--google-card-yellow) 65%, var(--google-card-green) 100%) border-box;
box-shadow: 0 20px 40px -28px color-mix(in oklch, var(--base-dark) 25%, transparent);
transition: box-shadow 0.2s ease;

&[href],
&[href]:hover {
  color: var(--text-dark);
  text-decoration: none;
}

&:hover {
  box-shadow: 0 24px 44px -24px color-mix(in oklch, var(--google-card-blue) 35%, transparent);
}

&:focus-visible {
  outline-offset: 3px;
}
}
.reviews__head {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 1.75rem 3.5rem;

:has(> &) {
  container-type: inline-size;
}

@container (width >= 53rem) {
  grid-template-columns: minmax(0, 1fr) auto;
}
}
.reviews__google-logo {
  display: block;
inline-size: 1rem;
block-size: 1rem;
}
.reviews__google-badge {
  flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 50%;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
}
.reviews__google-title {
  display: flex;
align-items: center;
gap: 0.625rem;
font-size: var(--text-m);
font-weight: 600;
color: var(--text-dark);
}
.reviews__google-head {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.5rem;
}
.reviews__grid {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;

@container (width >= 37.5rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (width >= 55rem) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.reviews__google {
  display: flex;
flex-direction: column;
gap: 1.25rem;
}
.reviews__stories-muted {
  color: var(--base-semi-light);
}
.reviews__stories-title {
  margin: 0;
font-size: var(--h3);
line-height: 1.15;
letter-spacing: -0.03em;
}
.reviews__stories-intro {
  max-inline-size: 35rem;
font-size: var(--text-m);
line-height: 1.55;
color: var(--text-dark-muted);
}
.reviews__stories-text {
  display: flex;
flex-direction: column;
gap: 6px;
}
.reviews__nav-icon {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;

.reviews__nav-button--prev & {
  rotate: 180deg;
}
}
.reviews__nav-button {
  display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
padding: 0;
border: 0;
border-radius: 999px;
background-color: var(--primary);
color: var(--text-dark);
cursor: pointer;
transition: background-color 0.2s ease;

&:hover {
  background-color: var(--primary-light);
}

&:focus-visible {
  outline-offset: 2px;
}
}
.reviews__nav {
  display: flex;
gap: 0.5rem;
}
.reviews__stories-head {
  display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem 1.5rem;
padding-block-start: 0.5rem;
}
.reviews__cta-star {
  display: block;
inline-size: 1rem;
block-size: 1rem;
}
.reviews__cta-stars {
  --reviews-star: #FBBC05;
display: inline-flex;
gap: 2px;
color: var(--reviews-star);
}
.reviews__cta-title {
  font-family: var(--heading-font-family);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--white);
}
.reviews__cta-text {
  font-size: 0.96875rem;
line-height: 1.6;
}
.reviews__cta {
  position: relative;
overflow: clip;
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.625rem;
border-radius: var(--radius-s);

&::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -30%;
  inline-size: 26.25rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--primary) 22%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

& > * {
  position: relative;
}

& > .arrow-button {
  align-self: flex-start;
}
}
.reviews__track {
  display: flex;
gap: 1rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
margin: 0 calc(var(--gutter) * -1) -1.5rem;
padding: 0.5rem var(--gutter) 3rem;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
mask-image: linear-gradient(to right, black 0, black calc(100% - 3.75rem), transparent 100%);

&::-webkit-scrollbar {
  display: none;
}

& > * {
  flex: 0 0 min(23.75rem, 86%);
  margin: 0;
  scroll-snap-align: start;
}

&:focus-visible {
  outline-offset: -3px;
}

@container (width >= 37.5rem) {
  mask-image: linear-gradient(to right, black 0, black calc(100% - 10rem), rgb(0 0 0 / 0.15) calc(100% - 1.25rem), transparent 100%);
}
}
.reviews__stories {
  display: flex;
flex-direction: column;
gap: 1.25rem;
}
.reviews__container {
  gap: 3rem;
}
.check-form__input {
  inline-size: 100%;
min-inline-size: 0;
min-block-size: 3.125rem;
padding: 0.75rem 0.875rem;
border: 0;
border-radius: 0.5625rem;
background-color: var(--accent-ultra-light);
color: var(--text-dark);
font: inherit;
font-size: 1rem;

&::placeholder {
  color: var(--base-semi-light);
  opacity: 1;
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
}

&[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px var(--check-form-alert);
}
}
.check-form__error {
  padding-inline: 4px;
font-size: var(--text-s);
line-height: 1.4;
color: var(--check-form-alert);

&[hidden] {
  display: none;
}
}
.check-form__field {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.check-form__submit {
  grid-column: 1 / -1;
justify-content: center;
min-block-size: 3.25rem;
padding-inline: 1.375rem 3.625rem;
font-size: 1rem;

& .arrow-button__icon {
  inline-size: 2.5rem;
}
}
.check-form__bar {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 6px;
padding: 0.5rem;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: 0 20px 40px -24px color-mix(in oklch, black 60%, transparent);

@container (width >= 23.75rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.check-form__checkbox {
  flex: none;
inline-size: 1.125rem;
block-size: 1.125rem;
margin: 0;
accent-color: var(--primary);
}
.check-form__call {
  display: inline-flex;
align-items: center;
gap: 0.625rem;
font-size: 0.90625rem;
color: var(--text-light-muted);
cursor: pointer;
}
.check-form__input--phone {
  min-block-size: 2.75rem;
padding-block: 0.625rem;
border-radius: var(--radius-xs);
background-color: var(--white);
}
.check-form__error--light {
  color: var(--check-form-alert-light);
}
.check-form__phone {
  flex: 1 1 12.5rem;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 4px;

&[hidden] {
  display: none;
}
}
.check-form__options {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem 1rem;
}
.check-form {
  --check-form-alert: var(--primary-dark);
--check-form-alert-light: var(--primary-semi-light);
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-block-start: 4px;
container-type: inline-size;
}
.find__lead {
  max-inline-size: 35rem;
font-size: var(--text-l);
line-height: 1.6;
color: var(--text-dark-muted);
}
.find__actions {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.75rem;
}
.find__aside {
  display: flex;
flex-direction: column;
gap: 1.25rem;
}
.find__head {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: end;
gap: 1.25rem clamp(2rem, 5vw, 4.5rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 53rem) {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}
}
.find__channels {
  display: grid;
grid-template-columns: minmax(0, 1fr);

& > * + * {
  border-block-start: 1px solid var(--accent-light);
}

@container (width >= 56.25rem) {
  grid-template-columns: repeat(3, minmax(0, 1fr));

  & > * + * {
    border-block-start: 0;
    border-inline-start: 1px solid var(--accent-light);
  }
}
}
.find__services-muted {
  color: var(--base-semi-light);
}
.find__services-title {
  margin: 0;
font-size: 1.0625rem;
line-height: 1.3;
letter-spacing: -0.02em;
}
.find__services-grid {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;

@container (width >= 35rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (width >= 57.5rem) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.find__services {
  display: flex;
flex-direction: column;
gap: 1rem;
padding: clamp(1.25rem, 2.6vw, 2rem);
border-block-start: 1px solid var(--accent-light);
container-type: inline-size;
}
.find__box {
  overflow: clip;
border: 1px solid var(--accent);
border-radius: 1.25rem;
background-color: var(--white);
box-shadow: 0 1px 2px color-mix(in oklch, var(--base-dark) 4%, transparent), 0 30px 60px -40px color-mix(in oklch, var(--base-dark) 30%, transparent);

:has(> &) {
  container-type: inline-size;
}
}
.website-check__muted {
  color: var(--base-light);
}
.website-check__title {
  margin: 0;
font-size: var(--h3);
line-height: 1.12;
letter-spacing: -0.025em;
color: var(--white);
text-wrap: balance;
}
.website-check__text {
  max-inline-size: 32.5rem;
font-size: var(--text-m);
line-height: 1.6;
color: var(--text-light-muted);
}
.website-check__content {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.125rem;
}
.website-check {
  position: relative;
overflow: clip;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 2rem clamp(2rem, 5vw, 5rem);
margin-block-start: clamp(1rem, 3vw, 2.5rem);
padding: clamp(1.75rem, 4vw, 3.5rem);
border-radius: 1rem;
scroll-margin-block-start: 1.5rem;

&::before {
  content: "";
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: -10%;
  inline-size: min(35rem, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--primary) 22%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

& > * {
  position: relative;
}

@container (width >= 53rem) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
}
.find__container {
  gap: 3rem;
}
.find {
  border-block: 1px solid var(--accent-light);
}
.step-label__number {
  flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 50%;
background-color: var(--primary);
color: var(--text-dark);
font-family: var(--heading-font-family);
font-size: 0.8125rem;
font-weight: 700;

.step-label[data-tone="success"] & {
  background-color: var(--success);
  color: var(--success-ultra-dark);
}
}
.step-label {
  display: flex;
align-items: center;
gap: 0.625rem;
margin: 0;
font-size: 1rem;
font-weight: 600;
color: var(--text-dark);
}
.plan-card__svg {
  display: block;
inline-size: 1.375rem;
block-size: 1.375rem;
}
.plan-card__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 0.8125rem;
background-color: color-mix(in oklch, var(--primary) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 30%, transparent);
color: var(--primary-dark);

.bg--dark & {
  background-color: color-mix(in oklch, var(--primary-light) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary-light) 35%, transparent);
  color: var(--primary-light);
}
}
.plan-card__eyebrow {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);

.bg--dark & {
  color: var(--neutral-light);
}
}
.plan-card__meta {
  display: flex;
align-items: center;
gap: 0.875rem;
}
.plan-card__top {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 0.625rem;
}
.plan-card__muted {
  color: var(--plan-card-muted);
}
.plan-card__title {
  margin: 0;
font-size: clamp(1.375rem, 2.2vw, 1.875rem);
line-height: 1.15;
letter-spacing: -0.03em;

.bg--dark & {
  color: var(--white);
}
}
.plan-card__text {
  font-size: 1rem;
line-height: 1.6;
color: var(--text-dark-muted);

.bg--dark & {
  color: var(--text-light-muted);
}
}
.plan-card {
  --plan-card-ring: var(--accent-light);
--plan-card-muted: var(--base-semi-light);
display: flex;
flex-direction: column;
gap: 1.125rem;
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--plan-card-ring);
color: var(--text-dark);

&[data-tone="accent"] {
  --plan-card-ring: color-mix(in oklch, var(--primary) 28%, transparent);
  --plan-card-muted: #8A5A55;
  background-color: var(--primary-ultra-light);
}

&[data-tone="dark"] {
  --plan-card-ring: color-mix(in oklch, var(--white) 12%, transparent);
  --plan-card-muted: var(--base-light);
  background-color: var(--base-dark);
  box-shadow: none;
  color: var(--white);
}

& > .check-list {
  margin-block-start: auto;
  padding-block-start: 0.875rem;
  border-block-start: 1px solid var(--plan-card-ring);
}
}
.extension-group__svg {
  display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
}
.extension-group__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: 0.6875rem;
background-color: var(--primary);
color: var(--text-dark);
}
.extension-group__title {
  margin: 0;
font-size: 1rem;
line-height: 1.3;
letter-spacing: -0.02em;
}
.extension-group__head {
  display: flex;
align-items: center;
gap: 0.75rem;
}
.extension-group__name {
  font-size: 0.9375rem;
line-height: 1.4;
color: var(--text-dark);
}
.extension-group__price {
  flex: none;
font-family: "Label", ui-monospace, monospace;
font-size: 0.78125rem;
white-space: nowrap;
color: var(--primary-dark);

&[data-custom="true"] {
  color: var(--base-semi-light);
}
}
.extension-group__item {
  display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin: 0;
padding-block: 0.6875rem;
border-block-start: 1px solid var(--accent-light);
}
.extension-group__list {
  display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.extension-group {
  display: flex;
flex-direction: column;
gap: 0.875rem;
padding: 1.375rem;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);
}
.stat__value {
  font-family: var(--heading-font-family);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--success-dark);

.stat[data-tone="line"] & {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-dark);
}
}
.stat__label {
  font-size: 0.84375rem;
line-height: 1.45;
color: var(--text-dark);

.stat[data-tone="line"] & {
  font-size: 0.90625rem;
  color: var(--text-dark-muted);
}
}
.stat {
  display: flex;
flex-direction: column;
gap: 2px;
padding: 0.875rem 1rem;
border-radius: 0.75rem;

&[data-tone="success"] {
  background-color: var(--success-ultra-light);
  box-shadow: inset 0 0 0 1px var(--success-light);
}

&[data-tone="line"] {
  gap: 4px;
  padding: 1.25rem 1.5rem 4px 0;
  border-radius: 0;
  border-block-start: 2px solid var(--base-dark);
}
}
.ai-manager__mark {
  display: block;
inline-size: 1.75rem;
block-size: 1.75rem;
}
.ai-manager__avatar {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: 50%;
background-color: var(--accent-ultra-light);
}
.ai-manager__name {
  font-size: 0.9375rem;
font-weight: 600;
}
.ai-manager__state {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-dark);
}
.ai-manager__who {
  display: flex;
flex-direction: column;
gap: 1px;
}
.ai-manager__head {
  display: flex;
align-items: center;
gap: 0.75rem;
padding-block-end: 0.875rem;
border-block-end: 1px solid var(--accent-light);
}
.ai-manager__question {
  align-self: flex-end;
max-inline-size: 85%;
padding: 0.625rem 0.75rem;
border-radius: 0.625rem 1rem 0.25rem 1rem;
background-color: var(--ai-manager-blue);
color: var(--white);
font-size: 0.875rem;
line-height: 1.45;
}
.ai-manager__sender {
  display: block;
margin-block-end: 3px;
font-size: 0.75rem;
font-weight: 600;
color: var(--primary-dark);
}
.ai-manager__action {
  padding: 0.3125rem 0.75rem;
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--accent);
font-size: 0.78125rem;
font-weight: 600;
}
.ai-manager__action--primary {
  background-color: var(--success);
box-shadow: none;
color: var(--success-ultra-dark);
}
.ai-manager__actions {
  display: flex;
flex-wrap: wrap;
gap: 6px;
margin-block-start: 0.5rem;
}
.ai-manager__answer {
  max-inline-size: 92%;
padding: 0.625rem 0.75rem;
border-radius: 0.625rem 1rem 1rem 0.25rem;
background-color: var(--accent-ultra-light);
font-size: 0.875rem;
line-height: 1.5;
}
.ai-manager__log-dot {
  flex: none;
inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background-color: var(--success);
}
.ai-manager__log {
  display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.4375rem 0.75rem;
border-radius: 999px;
background-color: var(--base-dark);
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.04em;
color: var(--success-light);
}
.ai-manager__label {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.ai-manager__dot {
  flex: none;
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background-color: var(--ai-manager-blue);

&[data-tone="violet"] {
  background-color: var(--ai-manager-violet);
}

&[data-tone="amber"] {
  background-color: var(--ai-manager-amber);
}
}
.ai-manager__task-name {
  font-size: 0.78125rem;
font-weight: 600;
}
.ai-manager__task-desc {
  font-size: 0.78125rem;
line-height: 1.4;
color: var(--text-dark-muted);
}
.ai-manager__task-text {
  flex: 1 1 auto;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.ai-manager__status {
  flex: none;
padding: 2px 0.5rem;
border-radius: 999px;
background-color: var(--success-ultra-light);
font-family: "Label", ui-monospace, monospace;
font-size: 0.65625rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--success-dark);

&[data-tone="check"] {
  background-color: var(--ai-manager-amber-light);
  color: var(--ai-manager-amber-dark);
}
}
.ai-manager__task {
  display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5625rem 0.625rem;
border-radius: 0.625rem;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);
}
.ai-manager__tasks {
  display: flex;
flex-direction: column;
gap: 6px;
padding-block-start: 0.75rem;
border-block-start: 1px solid var(--accent-light);
}
.ai-manager__card {
  inline-size: 100%;
max-inline-size: 27.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.375rem;
border-radius: var(--radius-s);
background-color: var(--white);
color: var(--text-dark);
box-shadow: 0 32px 64px -20px color-mix(in oklch, black 55%, transparent), 0 18px 36px -18px color-mix(in oklch, var(--base-dark) 35%, transparent), 0 0 0 1px var(--accent);
}
.ai-manager {
  --ai-manager-blue: #2F6FEB;
--ai-manager-violet: #9F84E6;
--ai-manager-amber: #D9962B;
--ai-manager-amber-light: #FFF4E5;
--ai-manager-amber-dark: #9A4F06;
display: flex;
justify-content: center;
}
.automated__steps-label {
  margin: 0;
font-size: var(--text-s);
font-weight: 600;
color: var(--text-dark);
}
.automated__step-number {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.71875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-dark);
}
.automated__step-title {
  font-size: 0.9375rem;
font-weight: 600;
color: var(--text-dark);
}
.automated__step-text {
  font-size: 0.84375rem;
line-height: 1.5;
color: var(--text-dark-muted);
}
.automated__step {
  display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0.875rem 1rem;
border-radius: 0.75rem;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);
}
.automated__step-list {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;

@container (width >= 35rem) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.automated__steps {
  display: flex;
flex-direction: column;
gap: 0.625rem;
margin-block-start: 4px;
}
.automated__actions {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.75rem;
}
.automated__content {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.automated__grid {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 2.5rem clamp(2.5rem, 6vw, 6rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 56.25rem) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
}
.offers__plus-icon {
  display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
}
.offers__plus {
  display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: 50%;
background-color: var(--base-dark);
color: var(--white);
}
.addon__svg {
  display: block;
inline-size: 1.5rem;
block-size: 1.5rem;
}
.addon__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 3rem;
block-size: 3rem;
border-radius: 0.75rem;
background-color: var(--primary);
color: var(--text-dark);
}
.addon__title {
  margin: 0;
font-size: 1.5rem;
line-height: 1.2;
letter-spacing: -0.02em;
}
.addon__title-row {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.625rem;
}
.addon__text {
  font-size: 0.96875rem;
line-height: 1.55;
color: var(--text-dark-muted);
}
.addon__body {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;

& > .arrow-button {
  align-self: flex-start;
  margin-block-start: 6px;
  white-space: nowrap;
}
}
.addon__intro {
  flex: 1 1 20rem;
min-inline-size: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.875rem;
}
.addon__price {
  display: flex;
flex-direction: column;
justify-content: center;
padding: 1.25rem 1.375rem;
border-block-start: 1px solid var(--accent-light);

@container (width >= 35rem) {
  border-block-start: 0;
  border-inline-start: 1px solid var(--accent-light);
}
}
.addon__panel {
  flex: 2 1 37.5rem;
min-inline-size: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: clip;
border-radius: 0.75rem;
background-color: var(--accent-ultra-light);
box-shadow: inset 0 0 0 1px var(--accent-light);

& > .check-list[data-layout] {
  align-content: center;
  padding: 1.25rem 1.375rem;
  grid-template-columns: minmax(0, 1fr);
}

@container (width >= 35rem) {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);

  & > .check-list[data-layout] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
}
.addon__automated-icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 0.75rem;
background-color: color-mix(in oklch, var(--primary) 16%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 40%, transparent);
color: var(--primary-light);

& .addon__svg {
  inline-size: 1.375rem;
  block-size: 1.375rem;
}
}
.addon__automated-muted {
  color: var(--base-light);
}
.addon__automated-title {
  margin: 0;
font-family: var(--heading-font-family);
font-size: 1.125rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
color: var(--white);
}
.addon__automated-text {
  max-inline-size: 35rem;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--text-light-muted);
}
.addon__chip {
  display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0.3125rem 0.625rem;
border-radius: 999px;
background-color: color-mix(in oklch, var(--white) 6%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--white) 16%, transparent);
font-size: 0.8125rem;
font-weight: 500;
color: var(--neutral-ultra-light);

&::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background-color: var(--success);
}
}
.addon__chip--more {
  padding-inline: 4px;
background-color: transparent;
box-shadow: none;
color: var(--base-light);

&::before {
  display: none;
}
}
.addon__chips {
  display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 2px 0 0;
padding: 0;
list-style: none;
}
.addon__automated-body {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.addon__automated-main {
  flex: 1 1 26.25rem;
min-inline-size: 0;
display: flex;
align-items: flex-start;
gap: 1rem;
}
.addon__automated {
  flex: 1 1 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.125rem 1.75rem;
margin-block-start: 4px;
padding: clamp(1.25rem, 2.4vw, 1.75rem);
border-radius: 0.75rem;
background-color: var(--base-dark);

& > .arrow-button {
  flex: none;
}
}
.addon {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
padding: clamp(1.375rem, 2.6vw, 1.875rem);
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);
color: var(--text-dark);
container-type: inline-size;
}
.offers__addon {
  display: flex;
flex-direction: column;
gap: 0.875rem;
margin-block-start: 1rem;
}
.offers {
  display: flex;
flex-direction: column;
gap: 1rem;

:has(> &) {
  container-type: inline-size;
}

& > .offers__plus {
  align-self: center;
}

@container (width >= 58.5rem) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 1rem;

  & > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    margin-block-end: 1rem;
  }

  & > :nth-child(4) {
    grid-column: 3 / 5;
    grid-row: 1;
    margin-block-end: 1rem;
  }

  & > .plan-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 2 / span 5;
    row-gap: 0.875rem;
  }

  & > .plan-card > .check-list {
    margin-block-start: 0;
  }

  & > :nth-child(2) {
    grid-column: 1;
  }

  & > :nth-child(5) {
    grid-column: 3;
  }

  & > :nth-child(6) {
    grid-column: 4;
  }

  & > .offers__plus {
    grid-column: 2;
    grid-row: 2 / span 5;
  }

  & > .offers__addon {
    grid-column: 1 / -1;
    grid-row: 7;
  }
}
}
.subsidy__euro {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.25rem;
block-size: 2.25rem;
border-radius: 50%;
background-color: var(--success);
color: var(--success-ultra-dark);
font-family: var(--heading-font-family);
font-size: 1rem;
font-weight: 700;
}
.subsidy__tag {
  flex: none;
padding: 0.1875rem 0.5625rem;
border-radius: 999px;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--success-light);
font-family: "Label", ui-monospace, monospace;
font-size: 0.71875rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--success-dark);
}
.subsidy__question {
  font-weight: 600;
color: var(--text-dark);
}
.subsidy__lead {
  flex: 1 1 20rem;
font-size: 1.03125rem;
line-height: 1.5;
color: var(--text-dark-muted);
}
.subsidy__chevron {
  display: block;
inline-size: 1rem;
block-size: 1rem;
transition: rotate 0.2s ease;

.subsidy[open] & {
  rotate: 180deg;
}
}
.subsidy__more {
  flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.9375rem;
font-weight: 600;
color: var(--text-dark);
transition: color 0.2s ease;

.subsidy__summary:hover & {
  color: var(--primary-dark);
}
}
.subsidy__summary {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem 1rem;
padding: 1.25rem 1.5rem;
background-color: var(--success-ultra-light);
list-style: none;
cursor: pointer;

&::-webkit-details-marker {
  display: none;
}

&::marker {
  content: "";
}

&:focus-visible {
  outline-offset: -3px;
}
}
.subsidy__intro {
  font-size: 0.96875rem;
line-height: 1.6;
color: var(--text-dark-muted);
}
.subsidy__mark-svg {
  display: block;
inline-size: 0.75rem;
block-size: 0.75rem;
}
.subsidy__mark {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.25rem;
block-size: 1.25rem;
margin-block-start: 2px;
border-radius: 50%;
background-color: var(--success);
color: var(--success-ultra-dark);
}
.subsidy__strong {
  font-weight: 600;
color: var(--text-dark);
}
.subsidy__item {
  display: flex;
align-items: flex-start;
gap: 0.625rem;
margin: 0;
font-size: 0.90625rem;
line-height: 1.5;
color: var(--text-dark-muted);
}
.subsidy__mark--no {
  background-color: var(--primary-light);
color: var(--white);
}
.subsidy__list {
  display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.subsidy__terms {
  font-size: 0.84375rem;
line-height: 1.55;
color: var(--base-semi-light);
}
.subsidy__text {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.875rem;
padding-block-start: 1.25rem;
}
.subsidy__links {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 1.375rem;
margin-block-start: 4px;

& .arrow-link {
  font-size: 0.9375rem;
}
}
.subsidy__aside {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
padding-block-start: 1.25rem;
}
.subsidy__body {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(22.5rem, 100%), 1fr));
gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
padding: 4px 1.375rem 1.5rem;
border-block-start: 1px solid var(--accent-light);
}
.subsidy {
  overflow: clip;
border: 1px solid var(--success-light);
border-radius: var(--radius-s);
background-color: var(--white);
scroll-margin-block-start: 1.5rem;
}
.pricing__cta-link {
  &[href],
&[href]:hover {
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
}
.pricing__cta-text {
  margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--base-semi-light);
}
.pricing__cta {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
}
.pricing__container {
  gap: 3rem;
}
.pricing {
  border-block: 1px solid var(--accent-light);
}
.extras__note {
  margin: 0;
font-size: var(--text-s);
color: var(--text-dark-muted);
}
.extras__head {
  display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem 2rem;
}
.extras__grid {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;

:has(> &) {
  container-type: inline-size;
}

@container (width >= 35rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container (width >= 64.375rem) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.extras__custom-svg {
  display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
}
.extras__custom-icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: 0.6875rem;
background-color: var(--primary);
color: var(--text-dark);
}
.extras__custom-title {
  font-size: 1rem;
font-weight: 600;
color: var(--white);
}
.extras__custom-desc {
  font-size: 0.90625rem;
line-height: 1.5;
color: var(--text-light-muted);
}
.extras__custom-text {
  display: flex;
flex-direction: column;
gap: 2px;
}
.extras__custom-main {
  flex: 1 1 26.25rem;
min-inline-size: 0;
display: flex;
align-items: center;
gap: 0.875rem;
}
.extras__custom {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.875rem 2rem;
padding: 1.25rem 1.5rem;
border-radius: var(--radius-s);
background-color: var(--base-dark);
}
.extras__body {
  display: flex;
flex-direction: column;
gap: 1.25rem;
}
.extras__container {
  gap: 2.5rem;
}
.extras {
  scroll-margin-block-start: 1.5rem;
}
.range-field__name {
  color: var(--text-dark-muted);

.bg--dark & {
  color: var(--text-light-muted);
}
}
.range-field__value {
  flex: none;
font-weight: 600;
color: var(--text-dark);

.bg--dark & {
  color: var(--white);
}
}
.range-field__label {
  display: flex;
justify-content: space-between;
gap: 0.75rem;
font-size: 0.9375rem;
}
.range-field__input {
  inline-size: 100%;
block-size: 1.75rem;
margin: 0;
accent-color: var(--primary);
cursor: pointer;

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}
}
.range-field__hint {
  font-size: 0.8125rem;
line-height: 1.45;
color: var(--base-semi-light);

.bg--dark & {
  color: var(--base-light);
}
}
.range-field {
  display: flex;
flex-direction: column;
gap: 0.5rem;
}
.calc-option__title {
  font-size: 0.9375rem;
font-weight: 600;
}
.calc-option__text {
  font-size: 0.8125rem;
color: var(--neutral-light);

.calc-option[aria-pressed="true"] & {
  color: var(--primary-ultra-light);
}
}
.calc-option {
  --calc-option-line: color-mix(in oklch, var(--white) 18%, transparent);
flex: 1 1 9.375rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
min-block-size: 3.5rem;
padding: 0.625rem 0.875rem;
border: 0;
border-radius: var(--radius-xs);
background-color: transparent;
box-shadow: inset 0 0 0 1px var(--calc-option-line);
color: var(--white);
cursor: pointer;
transition: background-color 0.2s ease, box-shadow 0.2s ease;

&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.35;
}

&[aria-pressed="true"] {
  background-color: var(--primary-dark);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

&[aria-pressed="false"]:hover {
  background-color: color-mix(in oklch, var(--white) 8%, transparent);
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* gewicht: ACSS zet 600 op knoppen */
&[type="button"] {
  font-weight: 400;
}
}
.calc-toggle__tick {
  display: none;
inline-size: 0.875rem;
block-size: 0.875rem;

.calc-toggle[aria-pressed="true"] & {
  display: block;
}
}
.calc-toggle__box {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.375rem;
block-size: 1.375rem;
border-radius: 6px;
box-shadow: inset 0 0 0 1.5px var(--neutral);
color: var(--text-dark);

.calc-toggle[aria-pressed="true"] & {
  background-color: var(--primary);
  box-shadow: none;
}
}
.calc-toggle__svg {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.calc-toggle__icon {
  display: flex;
color: var(--primary-light);

&[data-tone="success"] {
  color: var(--success-light);
}
}
.calc-toggle__title {
  display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
font-weight: 600;
}
.calc-toggle__text {
  font-weight: 400;
font-size: 0.8125rem;
color: var(--neutral-light);
}
.calc-toggle__body {
  flex: 1;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.calc-toggle {
  display: flex;
align-items: center;
gap: 0.75rem;
inline-size: 100%;
min-block-size: 3rem;
padding: 4px 0;
border: 0;
border-radius: var(--radius-xs);
background-color: transparent;
color: var(--white);
cursor: pointer;

&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.35;
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

/* gewicht: ACSS zet 600 op knoppen */
&[type="button"] {
  font-weight: 400;
}
}
.calc-row__op {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.9375rem;
text-align: center;
color: var(--base-light);
}
.calc-row__sub {
  display: block;
font-size: 0.78125rem;
color: var(--base-light);

&:empty {
  display: none;
}
}
.calc-row__label {
  font-size: 0.90625rem;
color: var(--text-light-muted);

.calc-row[data-tone="total"] & {
  font-size: 0.96875rem;
  font-weight: 600;
  color: var(--white);
}
}
.calc-row__value {
  font-family: var(--heading-font-family);
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.03em;
text-align: end;
white-space: nowrap;
color: var(--white);

.calc-row[data-tone="positive"] &,
.calc-row[data-tone="total"] & {
  color: var(--success-light);
}

.calc-row[data-tone="negative"] &,
&[data-negative="true"] {
  color: var(--primary-light);
}

.calc-row[data-tone="total"] & {
  font-size: 1.5rem;
}

.calc-row[data-tone="total"] &[data-negative="true"] {
  color: var(--primary-light);
}
}
.calc-row {
  display: grid;
grid-template-columns: 1.375rem minmax(0, 1fr) auto;
align-items: baseline;
gap: 0.75rem;
padding-block: 0.625rem;

& + & {
  border-block-start: 1px solid color-mix(in oklch, var(--white) 12%, transparent);
}

&[data-tone="total"] {
  padding-block: 0.875rem;
}

&[hidden] {
  display: none;
}
}
.monthly-report__title {
  font-family: var(--heading-font-family);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.monthly-report__site {
  font-size: 0.84375rem;
color: var(--base-semi-light);
}
.monthly-report__titles {
  display: flex;
flex-direction: column;
gap: 2px;
}
.monthly-report__tag {
  padding: 0.1875rem 0.5625rem;
border-radius: 0.4375rem;
background-color: var(--accent-ultra-light);
box-shadow: inset 0 0 0 1px var(--accent-light);
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.monthly-report__head {
  display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 0.75rem;
}
.monthly-report__bar {
  flex: 1;
border-radius: 3px 3px 0 0;
background-color: color-mix(in oklch, var(--success) 38%, var(--white));
}
.monthly-report__bar--current {
  background-color: var(--success);
}
.monthly-report__chart {
  display: flex;
align-items: flex-end;
gap: 5px;
block-size: 4.5rem;
padding-inline: 2px;
border-block-end: 1px solid var(--accent-light);

& > :nth-child(1) {
  block-size: 34%;
}

& > :nth-child(2) {
  block-size: 52%;
}

& > :nth-child(3) {
  block-size: 29%;
}

& > :nth-child(4) {
  block-size: 47%;
}

& > :nth-child(5) {
  block-size: 61%;
}

& > :nth-child(6) {
  block-size: 38%;
}

& > :nth-child(7) {
  block-size: 55%;
}

& > :nth-child(8) {
  block-size: 44%;
}

& > :nth-child(9) {
  block-size: 72%;
}

& > :nth-child(10) {
  block-size: 49%;
}

& > :nth-child(11) {
  block-size: 63%;
}

& > :nth-child(12) {
  block-size: 88%;
}
}
.monthly-report__label {
  font-size: 0.8125rem;
color: var(--base-semi-light);
}
.monthly-report__value {
  font-family: var(--heading-font-family);
font-size: 1.625rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
color: var(--text-dark);
}
.monthly-report__delta {
  font-size: 0.78125rem;
color: var(--success-dark);
}
.monthly-report__tile {
  display: flex;
flex-direction: column;
gap: 4px;
padding: 0.875rem;
border-radius: 0.625rem;
background-color: var(--accent-ultra-light);
box-shadow: inset 0 0 0 1px var(--accent-light);
}
.monthly-report__delta--flat {
  color: var(--base-semi-light);
}
.monthly-report__tiles {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.625rem;
}
.monthly-report__caption {
  font-size: 0.78125rem;
line-height: 1.5;
color: var(--base-semi-light);
}
.monthly-report {
  display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
padding: clamp(1.25rem, 2.4vw, 1.75rem);
border-radius: var(--radius-s);
background-color: var(--white);
color: var(--text-dark);
box-shadow: 0 32px 64px -32px color-mix(in oklch, black 60%, transparent);
}
.compare-panel__eyebrow {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.compare-panel__title {
  font-family: var(--heading-font-family);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text-dark);
}
.compare-panel__titles {
  display: flex;
flex-direction: column;
gap: 2px;
}
.compare-panel__head {
  display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.625rem;
}
.compare-panel__label {
  font-size: 0.875rem;
font-weight: 500;
color: var(--text-dark);
}
.compare-panel__status {
  flex: none;
padding: 0.1875rem 0.5rem;
border-radius: 999px;
background-color: var(--compare-warn-bg);
font-family: "Label", ui-monospace, monospace;
font-size: 0.71875rem;
font-weight: 600;
color: var(--compare-warn);

&[data-tone="bad"] {
  background-color: var(--primary-ultra-light);
  color: var(--primary-dark);
}

&[data-tone="good"] {
  background-color: var(--success-ultra-light);
  color: var(--success-dark);
}
}
.compare-panel__item {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0;
padding: 0.625rem 0.75rem;
border-radius: 0.625rem;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);

.compare-panel[data-tone="success"] & {
  padding-block: 0.5625rem;
}
}
.compare-panel__list {
  display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;

.compare-panel[data-tone="success"] & {
  gap: 6px;
}
}
.compare-panel__note {
  margin: 0;
padding-inline: 4px;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--text-dark-muted);
}
.compare-panel {
  --compare-warn-bg: #FFF4E5;
--compare-warn: #9A4F06;
flex: 1 1 0;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.125rem;
border-radius: 1rem;
background-color: var(--accent-ultra-light);
box-shadow: inset 0 0 0 1px var(--accent-light);

&[data-tone="success"] {
  gap: 0.625rem;
  padding: 1rem;
  background-color: var(--success-ultra-light);
  box-shadow: inset 0 0 0 1px var(--success-light);
}
}
.step__number {
  display: flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 50%;
background-color: var(--step-bg);
box-shadow: inset 0 0 0 1px var(--step-ring);
color: var(--step-color);
font-size: 0.8125rem;
font-weight: 700;
}
.step__check {
  display: block;
inline-size: 0.875rem;
block-size: 0.875rem;
}
.step__title {
  font-size: 0.96875rem;
font-weight: 600;
color: var(--text-dark);
}
.step__approve {
  padding: 2px 0.5rem;
border-radius: 999px;
background-color: var(--primary-ultra-light);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 30%, transparent);
font-family: "Label", ui-monospace, monospace;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: var(--primary-dark);
}
.step__head {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 0.5rem;
min-block-size: 1.75rem;
}
.step__text {
  font-size: 0.90625rem;
line-height: 1.5;
color: var(--text-dark-muted);
}
.step__body {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.step {
  --step-bg: var(--primary-ultra-light);
--step-ring: color-mix(in oklch, var(--primary) 30%, transparent);
--step-color: var(--primary-dark);
display: grid;
grid-template-columns: 1.75rem minmax(0, 1fr);
align-items: start;
gap: 0.75rem;
margin: 0;

&[data-tone="amber"] {
  --step-bg: #FBF3E2;
  --step-ring: #EED9AE;
  --step-color: #85590C;
}

&[data-tone="green"] {
  --step-bg: var(--success-ultra-light);
  --step-ring: var(--success-light);
  --step-color: var(--success-dark);
}
}
.process-phase__date {
  display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
inline-size: 2.25rem;
block-size: 2.25rem;
border-radius: 0.5rem;
background-color: var(--primary-ultra-light);
font-family: "Label", ui-monospace, monospace;
font-size: 0.625rem;
font-weight: 600;
line-height: 1.1;
text-align: center;
color: var(--primary-dark);
}
.process-phase__card-title {
  font-size: 0.8125rem;
font-weight: 600;
color: var(--text-dark);
}
.process-phase__meta {
  font-size: 0.75rem;
color: var(--base-semi-light);
}
.process-phase__event {
  display: flex;
flex-direction: column;
gap: 1px;
}
.process-phase__card {
  background-color: var(--white);
border-radius: 0.75rem;
box-shadow: 0 1px 2px color-mix(in oklch, var(--base-dark) 6%, transparent), 0 16px 32px -20px color-mix(in oklch, var(--base-dark) 35%, transparent);
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.875rem;
}
.process-phase__card--event {
  align-self: flex-start;
flex-direction: row;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 0.75rem;
}
.process-phase__line {
  display: block;
block-size: 7px;
border-radius: 4px;
background-color: var(--neutral-ultra-light);
}
.process-phase__ok-icon {
  display: block;
inline-size: 0.75rem;
block-size: 0.75rem;
}
.process-phase__ok {
  align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 6px;
margin-block-start: 2px;
padding: 4px 0.625rem;
border-radius: 999px;
background-color: var(--success-ultra-light);
box-shadow: inset 0 0 0 1px var(--success-light);
font-size: 0.75rem;
font-weight: 600;
color: var(--success-dark);
}
.process-phase__stack {
  inline-size: 100%;
max-inline-size: 18.75rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.process-phase__dot {
  inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background-color: var(--accent-light);
}
.process-phase__url {
  margin-inline-start: 0.5rem;
font-family: "Label", ui-monospace, monospace;
font-size: 0.65625rem;
color: var(--base-semi-light);
}
.process-phase__bar {
  display: flex;
align-items: center;
gap: 5px;
padding: 0.5rem 0.625rem;
border-block-end: 1px solid var(--neutral-ultra-light);
}
.process-phase__logo {
  inline-size: 2.75rem;
block-size: 8px;
border-radius: 4px;
background-color: var(--base-dark);
}
.process-phase__pill {
  display: block;
inline-size: 1.375rem;
block-size: 7px;
border-radius: 4px;
background-color: var(--neutral-ultra-light);
}
.process-phase__links {
  display: flex;
gap: 5px;
}
.process-phase__nav {
  display: flex;
align-items: center;
justify-content: space-between;
}
.process-phase__line--soft {
  background-color: var(--accent-light);
}
.process-phase__button {
  align-self: flex-start;
margin-block-start: 4px;
inline-size: 3.5rem;
block-size: 0.875rem;
border-radius: 4px;
background-color: var(--primary);
}
.process-phase__hero {
  display: flex;
flex-direction: column;
gap: 6px;
padding: 0.875rem 0.75rem;
border-radius: 0.5rem;
background-color: var(--accent-ultra-light);

& .process-phase__line:not(.process-phase__line--soft) {
  background-color: var(--accent);
}
}
.process-phase__block {
  block-size: 1.875rem;
border-radius: 6px;
background-color: var(--accent-ultra-light);
}
.process-phase__blocks {
  display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.process-phase__page {
  display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
}
.process-phase__status {
  display: flex;
justify-content: flex-end;
padding: 0 0.75rem 0.75rem;
}
.process-phase__browser {
  background-color: var(--white);
border-radius: 0.75rem;
box-shadow: 0 1px 2px color-mix(in oklch, var(--base-dark) 6%, transparent), 0 16px 32px -20px color-mix(in oklch, var(--base-dark) 35%, transparent);
inline-size: 100%;
max-inline-size: 18.75rem;
display: flex;
flex-direction: column;
overflow: clip;
}
.process-phase__live-dot {
  inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background-color: var(--success);
}
.process-phase__live {
  display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.1875rem 0.5625rem;
border-radius: 999px;
background-color: var(--success-ultra-light);
font-family: "Label", ui-monospace, monospace;
font-size: 0.65625rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--success-dark);
}
.process-phase__live-head {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 0.625rem;
}
.process-phase__chart-bar {
  flex: 1;
border-radius: 3px 3px 0 0;
background-color: color-mix(in oklch, var(--success) 35%, var(--white));
}
.process-phase__chart-bar--current {
  background-color: var(--success);
}
.process-phase__chart {
  display: flex;
align-items: flex-end;
gap: 5px;
block-size: 4rem;

& > :nth-child(1) {
  block-size: 30%;
}

& > :nth-child(2) {
  block-size: 42%;
}

& > :nth-child(3) {
  block-size: 38%;
}

& > :nth-child(4) {
  block-size: 55%;
}

& > :nth-child(5) {
  block-size: 50%;
}

& > :nth-child(6) {
  block-size: 68%;
}

& > :nth-child(7) {
  block-size: 86%;
}
}
.process-phase__card--live {
  inline-size: 100%;
max-inline-size: 18.75rem;
gap: 0.75rem;
}
.process-phase__visual {
  display: flex;
align-items: center;
justify-content: center;
block-size: 13.125rem;
padding: 1.25rem;
border-block-end: 1px solid var(--accent-light);
background-color: var(--process-phase-bg);
overflow: clip;
}
.process-phase__phase {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.71875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-dark);
}
.process-phase__title {
  margin: 0;
font-size: 1.1875rem;
letter-spacing: -0.02em;
}
.process-phase__head {
  display: flex;
flex-direction: column;
gap: 4px;
}
.process-phase__steps {
  display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.process-phase__body {
  display: flex;
flex-direction: column;
gap: 1.125rem;
padding: 1.5rem 1.625rem 1.75rem;
}
.process-phase {
  --process-phase-bg: var(--primary-ultra-light);
min-inline-size: 0;
display: flex;
flex-direction: column;

&[data-tone="amber"] {
  --process-phase-bg: #FBF3E2;
}

&[data-tone="green"] {
  --process-phase-bg: #E4F1E8;
}
}
.tool-chip__logo {
  flex: none;
display: block;
inline-size: 1.5rem;
block-size: 1.5rem;
border-radius: 6px;
object-fit: cover;
}
.tool-chip__svg {
  flex: none;
display: block;
inline-size: 1.375rem;
block-size: 1.375rem;
}
.tool-chip__suffix {
  font-weight: 400;
color: var(--text-dark-muted);
}
.tool-chip {
  display: inline-flex;
align-items: center;
gap: 0.5rem;
min-block-size: 2.375rem;
padding-inline: 0.5rem 0.75rem;
border-radius: 0.625rem;
background-color: var(--white);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 30%, var(--white));
font-size: 0.875rem;
font-weight: 600;
color: var(--text-dark);
}
.process-phase__line--90 {
  inline-size: 90%;
}
.process-phase__line--70 {
  inline-size: 70%;
}
.process-phase__line--80 {
  inline-size: 80%;
}
.process-phase__line--50 {
  inline-size: 50%;
}
.calc-card__step {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--neutral-light);
}
.calc-card__options {
  display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.calc-card__note-svg {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.calc-card__note-icon {
  flex: none;
display: flex;
margin-block-start: 2px;
color: var(--primary-light);
}
.calc-card__note {
  display: flex;
align-items: flex-start;
gap: 0.625rem;
margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--text-light-muted);

&[hidden] {
  display: none;
}
}
.calc-card__strong {
  font-weight: 600;
color: var(--white);
}
.calc-card__group {
  display: flex;
flex-direction: column;
gap: 0.625rem;

.calc-card__output > & {
  gap: 0.75rem;
}
}
.calc-card__numbers {
  display: flex;
flex-direction: column;
gap: 1.125rem;
padding-block-start: 1.125rem;
border-block-start: 1px solid var(--calc-line-soft);
}
.calc-card__inputs {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.375rem;
padding: clamp(1.375rem, 3vw, 2.25rem);
}
.calc-card__panel {
  display: flex;
flex-direction: column;
gap: 0.875rem;
padding-block-start: 0.875rem;
border-block-start: 1px solid var(--calc-line-soft);

&[hidden] {
  display: none;
}
}
.calc-card__extra {
  display: flex;
flex-direction: column;
gap: 0.875rem;

& + & {
  padding-block-start: 0.875rem;
  border-block-start: 1px solid var(--calc-line-soft);
}
}
.calc-card__ah-icon {
  display: inline-block;
inline-size: 0.875rem;
block-size: 0.875rem;
margin-inline-start: 4px;
vertical-align: -2px;
rotate: -45deg;
}
.calc-card__ah-link {
  &[href],
&[href]:hover {
  font-weight: 600;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

&[href]:hover {
  color: var(--primary-light);
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
}
.calc-card__ah {
  margin: 0;
padding-block-start: 0.875rem;
border-block-start: 1px solid var(--calc-line-soft);
font-size: 0.84375rem;
line-height: 1.5;
color: var(--neutral-light);
}
.calc-card__extras {
  display: flex;
flex-direction: column;
gap: 0.875rem;
margin-block-start: 4px;
padding: 1rem;
border-radius: 0.75rem;
background-color: var(--base-dark);
box-shadow: inset 0 0 0 1px var(--calc-line-soft);
}
.calc-result__label {
  font-size: 0.875rem;
color: var(--text-light-muted);
}
.calc-result__payback {
  font-family: var(--heading-font-family);
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
font-weight: 600;
letter-spacing: -0.04em;
color: var(--white);

.calc-result[data-good="true"] & {
  color: var(--success-light);
}
}
.calc-result__verdict {
  font-size: 0.9375rem;
line-height: 1.5;
color: var(--neutral-ultra-light);
}
.calc-result__breakeven {
  font-size: 0.875rem;
line-height: 1.5;
color: var(--neutral-light);
}
.calc-result__main {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.calc-result__net-label {
  font-size: 0.90625rem;
color: var(--text-light-muted);
}
.calc-result__net-value {
  font-family: var(--heading-font-family);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.03em;
white-space: nowrap;
color: var(--success-light);

&[data-negative="true"] {
  color: var(--primary-light);
}
}
.calc-result__net {
  display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin-block-start: 6px;
padding-block-start: 0.75rem;
border-block-start: 1px solid color-mix(in oklch, var(--white) 8%, transparent);
}
.calc-result__warning-icon {
  flex: none;
display: block;
inline-size: 1rem;
block-size: 1rem;
margin-block-start: 1px;
}
.calc-result__warning {
  display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-block-start: 6px;
padding: 0.5rem 0.625rem;
border-radius: 0.5rem;
background-color: color-mix(in oklch, var(--white) 5%, transparent);
font-size: 0.8125rem;
line-height: 1.45;
color: var(--text-light-muted);
}
.calc-result {
  display: flex;
flex-direction: column;
gap: 6px;
padding: 1rem 1.125rem;
border-radius: 0.625rem;
background-color: var(--base-dark);
box-shadow: inset 0 0 0 1px var(--calc-line-soft);

&[data-good="true"] {
  background-color: color-mix(in oklch, var(--success) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--success) 40%, transparent);
}
}
.calc-details__chevron {
  display: block;
inline-size: 1rem;
block-size: 1rem;
transition: rotate 0.2s ease;

.calc-details[open] & {
  rotate: 180deg;
}
}
.calc-details__summary {
  display: inline-flex;
align-items: center;
gap: 6px;
min-block-size: 2.5rem;
font-size: 0.90625rem;
font-weight: 600;
color: var(--neutral-ultra-light);
list-style: none;
cursor: pointer;
transition: color 0.2s ease;

&::-webkit-details-marker {
  display: none;
}

&::marker {
  content: "";
}

&:hover {
  color: var(--primary-light);
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}
}
.calc-details__sum {
  display: flex;
flex-direction: column;
margin-block-start: 0.5rem;
padding: 6px 1.125rem;
border-radius: 0.75rem;
background-color: var(--base-dark);
box-shadow: inset 0 0 0 1px var(--calc-line-soft);
}
.calc-card__actions {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 1.5rem;

& .arrow-link {
  font-size: 1rem;
}
}
.calc-card__fine {
  font-size: 0.8125rem;
line-height: 1.5;
color: var(--base-light);
}
.calc-card__cta {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
margin-block-start: auto;
padding-block-start: 4px;
}
.calc-card__output {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.375rem;
padding: clamp(1.375rem, 3vw, 2.25rem);
background-color: var(--calc-surface-deep);
box-shadow: inset 0 0 0 1px var(--calc-line);
}
.calc-card {
  display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: clip;
border-radius: var(--radius-s);
background-color: var(--calc-surface);
box-shadow: inset 0 0 0 1px var(--calc-line);

@container (width >= 53rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.calc-value__eyebrow {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-light);
}
.calc-value__muted {
  color: var(--base-light);
}
.calc-value__title {
  margin: 0;
font-size: clamp(1.5rem, 2.6vw, 2.125rem);
line-height: 1.15;
letter-spacing: -0.03em;
text-wrap: balance;
color: var(--white);
}
.calc-value__lead {
  max-inline-size: 35rem;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--text-light-muted);
}
.calc-value__text {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.125rem;

& > .arrow-link {
  align-self: flex-start;
  font-size: 1rem;
}
}
.calc-value {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 2rem 4rem;
padding-block-start: clamp(2.5rem, 5vw, 4rem);
border-block-start: 1px solid var(--calc-line-soft);
scroll-margin-block-start: 6rem;

@container (width >= 56.25rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.calc__lead {
  max-inline-size: 40rem;
font-size: var(--text-l);
line-height: 1.6;
color: var(--text-light-muted);
}
.calc__disclaimer {
  font-size: 0.875rem;
line-height: 1.55;
color: var(--base-light);
}
.calc__intro {
  display: flex;
flex-direction: column;
gap: 0.75rem;
}
.calc__head {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: end;
gap: 1.25rem clamp(2.5rem, 6vw, 6rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 53rem) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
}
.calc__container {
  gap: 3rem;
}
.calc {
  --calc-surface: #1E2027;
--calc-surface-deep: #191B21;
--calc-line: #3A3D46;
--calc-line-soft: #2E313A;
}
.migration__dot {
  margin-inline: -0.3em;
}
.migration__facts {
  display: flex;
flex-wrap: wrap;
gap: 4px 0.875rem;
margin: 0;
font-family: "Label", ui-monospace, monospace;
font-size: 0.78125rem;
letter-spacing: 0.02em;
color: var(--base-semi-light);
}
.migration__actions {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.75rem;
margin-block-start: 4px;
}
.migration__content {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.25rem;

& > .check-list {
  max-inline-size: 35rem;
}
}
.migration__arrow-icon {
  display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
rotate: 90deg;

@container (width >= 37.5rem) {
  rotate: 0deg;
}
}
.migration__arrow {
  flex: none;
align-self: center;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
background-color: var(--primary);
color: var(--text-dark);
}
.migration__options {
  flex: 1 1 0;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.migration__compare {
  min-inline-size: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.875rem;

@container (width >= 37.5rem) {
  flex-direction: row;
  align-items: flex-start;
}

@container (width >= 65rem) {
  align-items: center;

  & .compare-panel__list {
    gap: 6px;
  }

  & .compare-panel__item {
    padding-block: 0.5rem;
  }
}
}
.migration__grid {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: clamp(2rem, 5vw, 4.5rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 65rem) {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
}
}
.migration__container {
  gap: 2.5rem;
}
.process__card-title {
  font-family: var(--heading-font-family);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.process__mark {
  inline-size: 8px;
block-size: 8px;
border-radius: 2px;
background-color: var(--primary);
}
.process__contact {
  display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-dark-muted);
}
.process__card-head {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1.25rem 1.625rem;
border-block-end: 1px solid var(--accent-light);
}
.process__phases {
  display: grid;
grid-template-columns: minmax(0, 1fr);

& > * + * {
  border-block-start: 1px solid var(--accent-light);
}

@container (width >= 56.25rem) {
  grid-template-columns: repeat(3, minmax(0, 1fr));

  & > * + * {
    border-block-start: 0;
    border-inline-start: 1px solid var(--accent-light);
  }
}
}
.process__card {
  overflow: clip;
border: 1px solid var(--accent);
border-radius: 1.25rem;
background-color: var(--white);
box-shadow: 0 1px 2px color-mix(in oklch, var(--base-dark) 4%, transparent), 0 30px 60px -40px color-mix(in oklch, var(--base-dark) 30%, transparent);

:has(> &) {
  container-type: inline-size;
}
}
.platform__svg {
  display: block;
inline-size: 1.375rem;
block-size: 1.375rem;
}
.platform__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 0.8125rem;
background-color: color-mix(in oklch, var(--primary) 12%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--primary) 30%, transparent);
color: var(--primary-dark);
}
.platform__eyebrow {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--platform-muted);

.platform__tools > & {
  font-size: 0.71875rem;
}
}
.platform__meta {
  display: flex;
align-items: center;
gap: 0.875rem;
}
.platform__muted {
  color: var(--platform-muted);
}
.platform__title {
  margin: 0;
font-size: 1.375rem;
line-height: 1.25;
letter-spacing: -0.02em;
}
.platform__lead {
  font-size: 1rem;
line-height: 1.6;
color: var(--text-dark-muted);
}
.platform__text {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.platform__chips {
  display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.platform__tools {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.platform {
  --platform-ring: color-mix(in oklch, var(--primary) 35%, var(--white));
--platform-muted: #7A4E49;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem);
padding: clamp(1.5rem, 3vw, 2rem);
border-radius: var(--radius-s);
background-color: var(--primary-ultra-light);
box-shadow: inset 0 0 0 1px var(--platform-ring);
scroll-margin-block-start: 1.5rem;

@container (width >= 47.5rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.process__how {
  display: flex;
flex-direction: column;
gap: 1rem;
}
.process__container {
  gap: 3rem;
}
.process {
  border-block: 1px solid var(--accent-light);
}
.contact-button__svg {
  display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
}
.contact-button__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: 0.5rem;
background-color: var(--primary-ultra-light);
color: var(--primary-dark);

&[data-tone="success"] {
  background-color: var(--success-ultra-light);
  color: var(--success-dark);
}
}
.contact-button {
  display: inline-flex;
align-items: center;
gap: 0.625rem;
min-block-size: 3.5rem;
padding-inline: 0.5rem 1.25rem;
border-radius: var(--radius-xs);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
font-size: 1rem;
font-weight: 600;
transition: box-shadow 0.2s ease;

&[href],
&[href]:hover {
  color: var(--text-dark);
  text-decoration: none;
}

&:hover {
  box-shadow: inset 0 0 0 1.5px var(--base-dark);
}

&:focus-visible {
  outline-offset: 3px;
}
}
.portrait__image {
  display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
border-radius: 0;
}
.portrait__dot {
  inline-size: 7px;
block-size: 7px;
border-radius: 50%;
background-color: var(--primary);

&[data-tone="success"] {
  background-color: var(--success);
}
}
.portrait__label {
  position: absolute;
inset-block-start: 0.875rem;
inset-inline-start: 0.875rem;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 0.6875rem;
border-radius: 999px;
background-color: color-mix(in oklch, var(--white) 90%, transparent);
backdrop-filter: blur(6px);
font-size: 0.78125rem;
font-weight: 600;
color: var(--text-dark);
}
.portrait__name {
  font-size: 1.0625rem;
font-weight: 600;
}
.portrait__role {
  font-size: 0.84375rem;
color: color-mix(in oklch, var(--white) 80%, transparent);
}
.portrait__caption {
  position: absolute;
inset-inline: 0;
inset-block-end: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: 3rem 1.125rem 1rem;
background-image: linear-gradient(180deg, transparent 0%, color-mix(in oklch, var(--base-dark) 78%, transparent) 100%);
color: var(--white);
}
.portrait {
  position: relative;
overflow: clip;
margin: 0;
aspect-ratio: 4 / 5;
border-radius: 1rem;
background-color: var(--neutral-light);
box-shadow: 0 30px 60px -36px color-mix(in oklch, var(--base-dark) 45%, transparent);
}
.person-note__image {
  inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: 50%;
object-fit: cover;
object-position: 50% 22%;
box-shadow: 0 0 0 2.5px var(--success);
}
.person-note__avatar {
  flex: none;
display: flex;
}
.person-note__name {
  font-weight: 600;
color: var(--text-dark);

.person-note[data-tone="dark"] & {
  color: var(--white);
}
}
.person-note__link {
  &[href],
&[href]:hover {
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.person-note[data-tone="dark"] &[href] {
  color: var(--white);
}
}
.person-note__wa {
  display: inline-block;
inline-size: 0.9375rem;
block-size: 0.9375rem;
margin-inline-end: 4px;
vertical-align: -2px;
}
.person-note__text {
  font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-dark-muted);

.person-note[data-tone="dark"] & {
  color: var(--neutral-ultra-light);
}
}
.person-note {
  display: flex;
align-items: center;
gap: 0.75rem;
}
.faq-item__svg {
  display: block;
inline-size: 0.875rem;
block-size: 0.875rem;
}
.faq-item__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 50%;
background-color: var(--accent-ultra-light);
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--text-dark);
transition: rotate 0.25s ease, background-color 0.2s ease;

.faq-item[open] & {
  rotate: 45deg;
  background-color: var(--primary);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  transition: none;
}
}
.faq-item__question {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding-block: 0.9375rem;
font-family: var(--heading-font-family);
font-size: 0.96875rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.015em;
list-style: none;
cursor: pointer;
transition: color 0.2s ease;

&::-webkit-details-marker {
  display: none;
}

&::marker {
  content: "";
}

&:hover {
  color: var(--primary-dark);
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
  border-radius: 6px;
}
}
.faq-item__answer {
  max-inline-size: 42.5rem;
padding: 0 2.5rem 1rem 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--text-dark-muted);

& strong {
  font-weight: 600;
  color: var(--text-dark);
}

& a {
  display: inline;
  font-weight: 600;
  white-space: nowrap;
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

& a::after {
  content: "";
  display: inline-block;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  margin-inline-start: 4px;
  vertical-align: -2px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (width < 35rem) {
  padding-inline-end: 0;
}
}
.faq-item {
  padding-inline: 1.25rem;
border-radius: 0.75rem;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);
interpolate-size: allow-keywords;
transition: box-shadow 0.2s ease;

&::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.4s allow-discrete;
}

&[open]::details-content {
  block-size: auto;
}

&:not([open]):hover {
  box-shadow: inset 0 0 0 1px var(--neutral-light);
}

&[open] {
  box-shadow: inset 0 0 0 1px var(--accent), 0 14px 30px -20px color-mix(in oklch, var(--base-dark) 25%, transparent);
}

&[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  &::details-content {
    transition: none;
  }
}

@media (width < 35rem) {
  padding-inline: 1rem;
}
}
.team__mark {
  flex: none;
margin-block-start: 8px;
inline-size: 8px;
block-size: 8px;
border-radius: 2px;
background-color: var(--primary);
}
.team__point-title {
  color: var(--text-dark);
}
.team__point {
  display: flex;
align-items: flex-start;
gap: 0.625rem;
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: var(--text-dark-muted);
}
.team__points {
  display: flex;
flex-direction: column;
gap: 1.125rem;
}
.team__actions {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem;
}
.team__content {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.125rem;
}
.team__pictures {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 1rem;

& > :nth-child(2) {
  margin-block-start: 3rem;
}
}
.team__grid {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: 2.5rem clamp(2.5rem, 6vw, 6rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 56.25rem) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
}
.team__stats {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;

@container (width >= 47.5rem) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 1.5rem;
}
}
.team__container {
  gap: 3rem;
}
.faq__contact {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
margin-block-start: 8px;

& > .person-note {
  padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--accent-light);
}
}
.faq__intro {
  flex: 1 1 20rem;
min-inline-size: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;

& .section-intro__intro {
  max-inline-size: 26.25rem;
}

@media (width >= 60.0625rem) {
  position: sticky;
  inset-block-start: 2rem;
}
}
.faq__count {
  font-weight: 400;
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
opacity: 0.7;
}
.faq__tab {
  display: inline-flex;
align-items: center;
gap: 0.5rem;
min-block-size: 2.75rem;
padding-inline: 1rem;
border: 0;
border-radius: 999px;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--text-dark);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: box-shadow 0.2s ease, background-color 0.2s ease;

&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.3;
}

&[aria-pressed="true"] {
  background-color: var(--base-dark);
  box-shadow: none;
  color: var(--white);
}

&[aria-pressed="false"]:hover {
  box-shadow: inset 0 0 0 1px var(--base-dark);
}

&:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* gewicht: ACSS zet 600 op knoppen */
&[type="button"] {
  font-weight: 600;
}
}
.faq__tabs {
  display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.faq__list {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.faq__main {
  flex: 2 1 35rem;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq__container {
  flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: 2.5rem clamp(3rem, 7vw, 7.5rem);
}
.faq {
  border-block-start: 1px solid var(--accent-light);
}
.mode-option__dot {
  inline-size: 0.625rem;
block-size: 0.625rem;
border-radius: 50%;
background-color: var(--primary);
opacity: 0;

.mode-option[aria-pressed="true"] & {
  opacity: 1;
}
}
.mode-option__radio {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.375rem;
block-size: 1.375rem;
border-radius: 50%;
box-shadow: inset 0 0 0 1.5px var(--neutral-light);

.mode-option[aria-pressed="true"] & {
  box-shadow: inset 0 0 0 2px var(--primary);
}
}
.mode-option__title {
  font-size: 1rem;
font-weight: 600;
}
.mode-option__text {
  font-size: 0.84375rem;
color: var(--base-semi-light);
}
.mode-option__body {
  flex: 1;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mode-option__svg {
  display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
}
.mode-option__icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: var(--radius-xs);
background-color: var(--accent-ultra-light);
color: var(--text-dark);

.mode-option[aria-pressed="true"] & {
  background-color: var(--primary);
}
}
.mode-option {
  display: flex;
align-items: center;
gap: 0.875rem;
min-block-size: 4.5rem;
padding: 0.875rem 1rem;
border: 0;
border-radius: 0.75rem;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--text-dark);
cursor: pointer;
transition: box-shadow 0.2s ease;

&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.3;
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

&[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--primary), 0 14px 28px -18px color-mix(in oklch, var(--primary) 60%, transparent);
}

&[aria-pressed="false"]:hover {
  box-shadow: inset 0 0 0 1.5px var(--base-dark);
}

/* gewicht: ACSS zet 600 op knoppen */
&[type="button"] {
  font-weight: 400;
}
}
.step-heading__number {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2rem;
block-size: 2rem;
border-radius: 50%;
background-color: var(--primary);
color: var(--text-dark);
font-family: var(--heading-font-family);
font-size: 0.875rem;
font-weight: 700;
}
.step-heading__title {
  font-family: var(--heading-font-family);
font-size: 1.1875rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.step-heading__badge {
  padding: 2px 0.5rem;
border-radius: 999px;
background-color: var(--success);
color: var(--success-ultra-dark);
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.step-heading__hint {
  padding: 2px 0.5rem;
border-radius: 999px;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.step-heading {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem 0.75rem;
}
.config-check__tick {
  display: none;
inline-size: 0.75rem;
block-size: 0.75rem;

.config-check[aria-pressed="true"] & {
  display: block;
}
}
.config-check__box {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.125rem;
block-size: 1.125rem;
border-radius: 5px;
background-color: var(--white);
box-shadow: inset 0 0 0 1.5px var(--neutral-light);
color: var(--white);

.config-check[aria-pressed="true"] & {
  background-color: var(--primary);
  box-shadow: none;
}
}
.config-check__title {
  flex: 1;
min-inline-size: 0;
line-height: 1.3;
}
.config-check__price {
  font-weight: 400;
flex: none;
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
color: var(--base-semi-light);

.config-check[aria-pressed="true"] & {
  color: var(--primary-dark);
}
}
.config-check {
  display: flex;
align-items: center;
gap: 0.625rem;
inline-size: 100%;
min-block-size: 2.5rem;
padding: 6px 0.625rem;
border: 0;
border-radius: 0.5rem;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--text-dark);
font-size: 0.90625rem;
font-weight: 500;
cursor: pointer;

&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.3;
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

&[aria-pressed="true"] {
  background-color: var(--primary-ultra-light);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}

/* gewicht: ACSS zet 600 op knoppen */
&[type="button"] {
  font-weight: 500;
}
}
.config-option__title {
  font-size: 1rem;
font-weight: 600;
line-height: 1.3;
}
.config-option__tick {
  display: none;
inline-size: 0.875rem;
block-size: 0.875rem;

.config-option[aria-pressed="true"] & {
  display: block;
}
}
.config-option__mark {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.375rem;
block-size: 1.375rem;
border-radius: 50%;
background-color: var(--white);
box-shadow: inset 0 0 0 1.5px var(--neutral-light);
color: var(--primary-dark);

&[data-multi="true"] {
  border-radius: 6px;
}

.config-option[aria-pressed="true"] & {
  box-shadow: none;
}
}
.config-option__head {
  display: flex;
align-items: center;
justify-content: space-between;
gap: 0.625rem;
inline-size: 100%;
}
.config-option__price {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.04em;
color: var(--primary-dark);

.config-option[aria-pressed="true"] & {
  color: var(--primary-ultra-light);
}
}
.config-option__text {
  font-size: 0.875rem;
line-height: 1.5;
color: var(--base-semi-light);

.config-option[aria-pressed="true"] & {
  color: var(--primary-ultra-light);
}
}
.config-option__badge {
  position: absolute;
inset-block-start: -0.625rem;
inset-inline-end: 0.75rem;
padding: 2px 0.5625rem;
border-radius: 999px;
background-color: var(--base-dark);
color: var(--white);
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.config-option {
  position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 1rem;
border: 0;
border-radius: var(--radius-xs);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--text-dark);
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease;

&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.3;
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

&[aria-pressed="true"] {
  background-color: var(--primary-dark);
  box-shadow: none;
  color: var(--white);
}

&[aria-pressed="false"]:hover {
  box-shadow: inset 0 0 0 1.5px var(--base-dark);
}

/* gewicht: ACSS zet 600 op knoppen */
&[type="button"] {
  font-weight: 400;
}
}
.form-field__label {
  font-size: 0.875rem;
font-weight: 500;
color: var(--text-dark);
}
.form-field__control {
  inline-size: 100%;
min-block-size: 3.25rem;
padding: 0.75rem 0.875rem;
border: 1px solid var(--accent);
border-radius: var(--radius-xs);
background-color: var(--white);
color: var(--text-dark);
font: inherit;
font-size: 1rem;

&::placeholder {
  color: var(--base-light);
  opacity: 1;
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
}

&[aria-invalid="true"] {
  border-color: var(--primary-dark);
}
}
.form-field {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.form-field__required {
  color: var(--primary-dark);
}
.form-field__error {
  font-size: var(--text-s);
line-height: 1.4;
color: var(--primary-dark);

&[hidden] {
  display: none;
}
}
.form-field__optional {
  font-weight: 400;
color: var(--base-semi-light);
}
.form-field__control--area {
  min-block-size: 4.75rem;
resize: vertical;
}
.contact__question {
  margin: 0;
font-family: var(--heading-font-family);
font-size: 1.1875rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.topic-chip__tick {
  display: none;
inline-size: 0.8125rem;
block-size: 0.8125rem;

.topic-chip[aria-pressed="true"] & {
  display: block;
}
}
.topic-chip__box {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.25rem;
block-size: 1.25rem;
border-radius: 6px;
background-color: var(--white);
box-shadow: inset 0 0 0 1.5px var(--neutral-light);
color: var(--white);

.topic-chip[aria-pressed="true"] & {
  background-color: var(--primary);
  box-shadow: none;
}
}
.topic-chip {
  display: inline-flex;
align-items: center;
gap: 0.625rem;
min-block-size: 2.75rem;
padding-inline: 0.75rem 1rem;
border: 0;
border-radius: var(--radius-xs);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
color: var(--text-dark);
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;

&[type="button"] {
  text-align: start;
  letter-spacing: normal;
  line-height: 1.3;
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

&[aria-pressed="true"] {
  box-shadow: inset 0 0 0 2px var(--primary);
}

&[aria-pressed="false"]:hover {
  box-shadow: inset 0 0 0 1.5px var(--base-dark);
}

/* gewicht: ACSS zet 600 op knoppen */
&[type="button"] {
  font-weight: 600;
}
}
.contact__chips {
  display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.contact__topics {
  display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contact__fields {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;

@container (width >= 32.5rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.contact__star {
  color: var(--primary-dark);
}
.contact__required {
  margin: -0.625rem 0 0;
font-size: 0.8125rem;
color: var(--base-semi-light);
}
.contact__submit {
  align-self: flex-start;
}
.contact__assurance-icon {
  flex: none;
display: block;
inline-size: 1rem;
block-size: 1rem;
color: var(--success-dark);
}
.contact__assurance {
  display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 0.90625rem;
font-weight: 500;
color: var(--text-dark-muted);
}
.contact__assurances {
  inline-size: 100%;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.375rem;
margin: 0;
padding: 1rem 0 0;
border-block-start: 1px solid var(--accent-light);
list-style: none;
}
.contact__send {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.875rem 1.5rem;
}
.contact__panel {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.375rem;
margin: 0;
padding: 0;
border: 0;

&[hidden] {
  display: none;
}
}
.config__options {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.625rem;
padding-block-start: 0.625rem;
}
.config__options--3 {
  @container (width >= 32.5rem) {
  grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr));
}
}
.config__link {
  display: inline;
padding: 0;
border: 0;
background: none;
color: var(--text-dark);
font: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;

&[type="button"] {
  letter-spacing: normal;
  line-height: inherit;
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}
}
.config__hint {
  margin: 0;
font-size: 0.875rem;
line-height: 1.5;
color: var(--base-semi-light);
}
.config__step {
  display: flex;
flex-direction: column;
gap: 0.875rem;
}
.config__options--2 {
  @container (width >= 32.5rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.config__term-label {
  font-size: 0.9375rem;
font-weight: 600;
color: var(--text-dark);
}
.config__term-hint {
  font-size: 0.84375rem;
line-height: 1.4;
color: var(--base-semi-light);
}
.config__term-text {
  display: flex;
flex-direction: column;
gap: 2px;
}
.term-option__sub {
  font-size: 0.75rem;
font-weight: 500;

.term-option[data-cfg-value="24"][aria-pressed="true"] & {
  color: var(--success-dark);
}

.term-option[data-cfg-value="12"][aria-pressed="true"] & {
  color: var(--primary-dark);
}
}
.term-option {
  display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
min-inline-size: 7.5rem;
padding: 0.5rem 0.875rem;
border: 0;
border-radius: 7px;
background-color: transparent;
color: var(--base-semi-light);
font-size: 0.90625rem;
font-weight: 600;
cursor: pointer;

&[type="button"] {
  text-align: center;
  letter-spacing: normal;
  line-height: 1.25;
}

&:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

&[aria-pressed="true"] {
  background-color: var(--white);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--base-dark) 12%, transparent), inset 0 0 0 1px var(--accent);
  color: var(--text-dark);
}

/* gewicht: ACSS zet 600 op knoppen */
&[type="button"] {
  font-weight: 600;
}
}
.config__term-options {
  display: inline-flex;
gap: 4px;
padding: 4px;
border-radius: var(--radius-xs);
background-color: var(--accent-ultra-light);
box-shadow: inset 0 0 0 1px var(--accent-light);
}
.config__term {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1rem;
padding: 0.875rem 0.875rem 0.875rem 1.125rem;
border-radius: var(--radius-xs);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
}
.config__hub-svg {
  display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
}
.config__hub-icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border-radius: var(--radius-xs);
background-color: var(--primary-ultra-light);
color: var(--primary-dark);
}
.config__hub-title {
  font-size: 0.9375rem;
font-weight: 600;
}
.config__hub-text {
  font-size: 0.875rem;
line-height: 1.5;
color: var(--text-dark-muted);
}
.config__hub-body {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;

& .arrow-link {
  font-size: 0.9375rem;
}
}
.config__hub {
  display: flex;
align-items: flex-start;
gap: 0.875rem;
padding: 1rem;
border-radius: 0.75rem;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);

&[hidden] {
  display: none;
}
}
.config__ext-title {
  padding: 0 2px 2px;
font-family: "Label", ui-monospace, monospace;
font-size: 0.71875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.config__ext-group {
  display: flex;
flex-direction: column;
gap: 6px;
padding: 0.875rem;
border-radius: 0.75rem;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);
}
.config__ext-groups {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.75rem;

@container (width >= 35rem) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.contact__checkbox {
  flex: none;
inline-size: 1.25rem;
block-size: 1.25rem;
margin: 0;
accent-color: var(--primary);
}
.contact__callback {
  display: inline-flex;
align-items: center;
gap: 0.625rem;
font-size: 0.9375rem;
cursor: pointer;
}
.config__steps {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.config-summary__eyebrow {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-light);
}
.config-summary__label {
  color: var(--neutral-ultra-light);
}
.config-summary__value {
  flex: none;
font-weight: 600;
text-align: end;
color: var(--white);
}
.config-summary__line {
  display: flex;
justify-content: space-between;
gap: 1rem;
margin: 0;
font-size: 0.9375rem;
line-height: 1.45;

&[hidden] {
  display: none;
}
}
.config-summary__lines {
  display: flex;
flex-direction: column;
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}
.config-summary__total-label {
  font-size: 0.8125rem;
color: var(--neutral-light);
}
.config-summary__amount {
  font-family: var(--heading-font-family);
font-size: clamp(1.5rem, 2.4vw, 2rem);
letter-spacing: -0.04em;
color: var(--white);
}
.config-summary__total {
  display: flex;
flex-direction: column;
gap: 4px;
}
.config-summary__totals {
  display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
padding-block-start: 1rem;
border-block-start: 1px solid color-mix(in oklch, var(--white) 12%, transparent);
}
.config-summary__note {
  margin: 0;
font-size: 0.84375rem;
line-height: 1.55;
color: var(--neutral-light);
}
.config-summary {
  display: flex;
flex-direction: column;
gap: 1.125rem;
padding: clamp(1.375rem, 2.6vw, 1.875rem);
border-radius: var(--radius-s);
background-color: var(--base-dark);

@container (width >= 47.5rem) {
  position: sticky;
  inset-block-start: 1.5rem;
}

& .arrow-link {
  font-size: 0.9375rem;
}
}
.config {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: clamp(1.5rem, 3vw, 2.5rem);

@container (width >= 47.5rem) {
  grid-template-columns: minmax(0, 1fr) minmax(18.75rem, 23.75rem);
}
}
.contact__modes {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 0.625rem;
margin-block-end: 1.625rem;
}
.contact-form {
  display: flex;
flex-direction: column;
}
.contact__title {
  margin: 0;
font-size: clamp(1.75rem, 3.4vw, 2.875rem);
line-height: 1.1;
letter-spacing: -0.03em;
text-wrap: balance;
color: var(--white);
}
.contact__lead {
  max-inline-size: 32.5rem;
font-size: 1.0625rem;
line-height: 1.6;
color: var(--text-light-muted);
}
.contact__perk-svg {
  display: block;
inline-size: 0.875rem;
block-size: 0.875rem;
}
.contact__perk-icon {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.625rem;
block-size: 1.625rem;
margin-block-start: 1px;
border-radius: 50%;
background-color: color-mix(in oklch, var(--success) 16%, transparent);
color: var(--success-light);
}
.contact__perk-title {
  font-size: 1rem;
font-weight: 600;
color: var(--white);
}
.contact__perk-text {
  font-size: 0.9375rem;
line-height: 1.5;
color: var(--neutral-light);
}
.contact__perk-body {
  display: flex;
flex-direction: column;
gap: 2px;
}
.contact__perk {
  display: flex;
align-items: flex-start;
gap: 0.75rem;
margin: 0;
}
.contact__perks {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
gap: 0.875rem 1.5rem;
margin: 0;
padding: 0;
list-style: none;

@media (width < 43.75rem) {
  display: none;
}
}
.contact__intro {
  flex: 1 1 100%;
min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 1.125rem;

& > .person-note {
  margin-block-start: 0.75rem;
  padding-block-start: 1.25rem;
  border-block-start: 1px solid color-mix(in oklch, var(--white) 12%, transparent);
}
}
.contact__card {
  container-type: inline-size;
padding: clamp(1.125rem, 3vw, 2.25rem);
border-radius: var(--radius-s);
background-color: var(--accent-ultra-light);

@media (width < 35rem) {
  padding: 1rem;
}
}
.contact__form-wrap {
  flex: 1 1 100%;
min-inline-size: 0;
color: var(--text-dark);
}
.contact__frame {
  position: relative;
overflow: clip;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem 3.5rem;
padding: clamp(1.5rem, 5vw, 3.5rem);
border-radius: var(--radius-s);
background-color: var(--base-dark);

&::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(color-mix(in oklch, var(--white) 3.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklch, var(--white) 3.5%, transparent) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(ellipse 60% 80% at 20% 15%, black 0%, transparent 70%);
  pointer-events: none;
}

&::after {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: -12%;
  inline-size: min(45rem, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: radial-gradient(circle, color-mix(in oklch, var(--primary) 16%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

& > * {
  position: relative;
  z-index: 1;
}

@media (width < 35rem) {
  margin-inline: calc(var(--gutter) * -1);
  padding: 3.5rem 1.25rem;
  border-radius: 0;
}
}
.contact__pssst-icon {
  flex: none;
display: block;
inline-size: 0.875rem;
block-size: 0.875rem;
margin-block-start: 4px;
color: var(--primary-light);
}
.contact__pssst-label {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-light);
}
.contact__pssst-link {
  &[href],
&[href]:hover {
  font-weight: 600;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
}
.contact__pssst {
  flex: 1 1 100%;
display: flex;
align-items: flex-start;
gap: 5px;
margin: 0;
padding-block-start: 1.25rem;
border-block-start: 1px dashed color-mix(in oklch, var(--white) 18%, transparent);
font-size: 0.90625rem;
line-height: 1.55;
color: var(--neutral-light);
}
.config__step--compact {
  & .config__options {
  gap: 0.5rem;
}

& .config-option {
  gap: 2px;
  padding: 0.75rem 0.875rem;
}

& .config-option__text {
  display: none;
}
}
.status-panel__svg {
  display: block;
inline-size: 2.125rem;
block-size: 2.125rem;
}
.status-panel__icon {
  display: flex;
align-items: center;
justify-content: center;
inline-size: 4.5rem;
block-size: 4.5rem;
border-radius: 1.125rem;
background-color: var(--success);
color: var(--text-dark);
}
.status-panel__muted {
  color: var(--base-semi-light);
}
.status-panel__title {
  margin: 0;
font-size: clamp(2.125rem, 4.4vw, 3.75rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.04em;
text-wrap: balance;
}
.status-panel__text {
  max-inline-size: 38.75rem;
font-size: clamp(1.125rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: var(--text-dark-muted);
}
.status-panel__secondary {
  display: inline-flex;
align-items: center;
min-block-size: 3.5rem;
padding-inline: 1.75rem;
border-radius: var(--radius-xs);
box-shadow: inset 0 0 0 1.5px var(--base-dark);
font-size: var(--text-l);
font-weight: 600;
transition: background-color 0.2s ease;

&[href],
&[href]:hover {
  color: var(--text-dark);
  text-decoration: none;
}

&:hover {
  background-color: var(--white);
}

&:focus-visible {
  outline-offset: 3px;
}
}
.status-panel__actions {
  display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.status-panel__intro {
  min-inline-size: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;

& .eyebrow__mark {
  background-color: var(--success);
}
}
.status-panel__label {
  margin: 0;
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--neutral-light);
}
.status-panel__number {
  display: flex;
align-items: center;
justify-content: center;
inline-size: 2.25rem;
block-size: 2.25rem;
border-radius: var(--radius-xs);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--white) 18%, transparent);
font-family: "Label", ui-monospace, monospace;
font-size: 0.875rem;
font-weight: 600;
color: var(--white);

.status-panel__step:first-child & {
  background-color: var(--primary);
  box-shadow: none;
  color: var(--text-dark);
}
}
.status-panel__line {
  flex: 1;
inline-size: 1px;
min-block-size: 1.25rem;
margin-block: 6px;
background-color: color-mix(in oklch, var(--white) 14%, transparent);

.status-panel__step:last-child & {
  display: none;
}
}
.status-panel__marker {
  flex: none;
display: flex;
flex-direction: column;
align-items: center;
}
.status-panel__step-title {
  font-size: 1.0625rem;
font-weight: 600;
color: var(--white);
}
.status-panel__step-text {
  font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-light-muted);
}
.status-panel__step-body {
  display: flex;
flex-direction: column;
gap: 4px;
padding-block: 6px 1.125rem;

.status-panel__step:last-child & {
  padding-block-end: 0;
}
}
.status-panel__step {
  display: flex;
gap: 1rem;
margin: 0;
}
.status-panel__steps {
  display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.status-panel__photo {
  inline-size: 3rem;
block-size: 3rem;
border-radius: 50%;
object-fit: cover;
object-position: 50% 22%;
box-shadow: 0 0 0 2.5px var(--success);
}
.status-panel__avatar {
  flex: none;
display: flex;
}
.status-panel__person-name {
  font-size: 1rem;
font-weight: 600;
color: var(--white);
}
.status-panel__link {
  &[href],
&[href]:hover {
  font-weight: 600;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
}
.status-panel__person-contact {
  font-size: 0.90625rem;
color: var(--text-light-muted);
}
.status-panel__person-text {
  display: flex;
flex-direction: column;
gap: 2px;
}
.status-panel__person {
  display: flex;
align-items: center;
gap: 0.875rem;
padding-block-start: 1.25rem;
border-block-start: 1px solid color-mix(in oklch, var(--white) 12%, transparent);
}
.status-panel__next {
  display: flex;
flex-direction: column;
gap: 1.5rem;
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: var(--radius-s);
background-color: var(--base-dark);
}
.status-panel__grid {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 5vw, 5rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 53.75rem) {
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
}
}
.status-panel__more-label {
  margin: 0;
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.status-panel__tile {
  margin: 0;
}
.status-panel__tiles {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr));
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
.status-panel__more {
  display: flex;
flex-direction: column;
gap: 1rem;
}
.status-panel {
  display: flex;
flex-direction: column;
gap: clamp(3rem, 6vw, 5rem);
}
.status {
  padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(4rem, 8vw, 7rem);
}
.plan__title {
  margin: 0;
font-size: clamp(2.125rem, 4.4vw, 3.75rem);
line-height: 1.05;
letter-spacing: -0.03em;
text-wrap: balance;
}
.plan__lead {
  max-inline-size: 33.75rem;
font-size: var(--text-l);
line-height: 1.6;
color: var(--text-dark-muted);
}
.plan__chip-icon {
  flex: none;
display: block;
inline-size: 1rem;
block-size: 1rem;
color: var(--primary-dark);
}
.plan__chip {
  display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0.5rem 0.875rem;
border-radius: 999px;
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
font-size: 0.9375rem;
font-weight: 500;
}
.plan__chips {
  display: flex;
flex-wrap: wrap;
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}
.plan__label {
  margin: 0;
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.plan__step-number {
  flex: none;
display: flex;
align-items: center;
justify-content: center;
inline-size: 1.75rem;
block-size: 1.75rem;
border-radius: 50%;
background-color: var(--primary);
color: var(--text-dark);
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
font-weight: 600;
}
.plan__step-text {
  padding-block-start: 2px;
font-size: 1rem;
line-height: 1.55;

& strong {
  font-weight: 600;
}
}
.plan__step {
  display: flex;
align-items: flex-start;
gap: 0.875rem;
margin: 0;
}
.plan__steps {
  display: flex;
flex-direction: column;
gap: 0.875rem;
margin: 0;
padding: 0;
list-style: none;
}
.plan__next {
  inline-size: 100%;
max-inline-size: 33.75rem;
display: flex;
flex-direction: column;
gap: 1.125rem;
padding: 1.5rem;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent);
}
.plan__call-link {
  &[href],
&[href]:hover {
  font-weight: 600;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
}
.plan__call-text {
  margin: 0;
font-size: 1rem;
line-height: 1.5;
color: var(--white);
}
.plan__call-note {
  margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-light-muted);
}
.plan__call {
  inline-size: 100%;
max-inline-size: 33.75rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 1.25rem 1.5rem;
border-radius: var(--radius-s);
background-color: var(--base-dark);
}
.plan__intro {
  flex: 1 1 26.25rem;
min-inline-size: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.booking__photo {
  flex: none;
display: block;
inline-size: 3.5rem;
block-size: 3.5rem;
border-radius: var(--radius-s);
object-fit: cover;
object-position: 50% 22%;
box-shadow: 0 0 0 2.5px var(--success);
}
.booking__with {
  font-size: 0.875rem;
color: var(--base-semi-light);
}
.booking__title {
  font-family: var(--heading-font-family);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.booking__who {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.booking__head {
  display: flex;
align-items: center;
gap: 0.875rem;
padding-block-end: 1.25rem;
border-block-end: 1px solid var(--accent-light);
}
.booking__privacy {
  &[href],
&[href]:hover {
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
}
.booking__consent-text {
  margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--text-dark-muted);
}
.booking__note {
  margin: 0;
font-size: 0.875rem;
line-height: 1.55;
color: var(--base-semi-light);
}
.booking__consent {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: clamp(1.25rem, 3vw, 1.75rem);
border-radius: var(--radius-xs);
background-color: var(--accent-ultra-light);
box-shadow: inset 0 0 0 1px var(--accent-light);

&[hidden] {
  display: none;
}
}
.booking__fallback {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.625rem 1.5rem;

& .arrow-link {
  font-size: 1rem;
}
}
.booking__calendar {
  display: flex;
flex-direction: column;
gap: 1.375rem;
}
.booking__tips-label {
  margin: 0;
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.booking__tips-note {
  margin: 0;
font-size: 0.875rem;
line-height: 1.55;
color: var(--base-semi-light);
}
.booking__tips {
  display: flex;
flex-direction: column;
gap: 0.75rem;
padding-block-start: 1.25rem;
border-block-start: 1px solid var(--accent-light);
}
.booking {
  flex: 1 1 35rem;
min-inline-size: 0;
max-inline-size: 45rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: clamp(1.25rem, 3vw, 2rem);
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent), 0 40px 80px -48px color-mix(in oklch, var(--base-dark) 35%, transparent);
}
.plan__container {
  flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: clamp(2.5rem, 5vw, 5rem);
}
.plan {
  padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(4rem, 8vw, 7rem);
}
.booking__frame {
  inline-size: 100%;
block-size: 81.25rem;
border: 0;
border-radius: var(--radius-xs);
box-shadow: inset 0 0 0 1px var(--accent-light);

/* Google zet de agenda op smalle schermen onder elkaar; daarom hoger, op breed weer compact */
:has(> &) {
  container-type: inline-size;
}

@container (width >= 35rem) {
  block-size: 45rem;
}
}
.breadcrumb__link {
  &[href] {
  color: var(--text-dark-muted);
  text-decoration: none;
}

&[href]:hover {
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

&:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 0.25rem;
}
}
.breadcrumb__item {
  margin: 0;
}
.breadcrumb__separator {
  margin: 0;
}
.breadcrumb__current {
  margin: 0;
font-weight: 600;
color: var(--text-dark);
}
.breadcrumb__list {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.875rem;
color: var(--base-semi-light);
}
.document-row__svg {
  display: block;
inline-size: 1.375rem;
block-size: 1.375rem;
}
.document-row__icon {
  display: flex;
align-items: center;
justify-content: center;
inline-size: 100%;
aspect-ratio: 1;
border-radius: var(--radius-s);
background-color: var(--primary-ultra-light);
color: var(--primary-dark);
}
.document-row__link {
  min-inline-size: 0;
overflow-wrap: anywhere;
hyphens: auto;

&[href] {
  color: var(--text-dark);
  text-decoration: none;
}

&::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-s);
}

&:focus-visible {
  outline: none;
}
}
.document-row__title {
  margin: 0;
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.02em;
}
.document-row__text {
  margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-dark-muted);
}
.document-row__meta {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.71875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.document-row__body {
  min-inline-size: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.document-row__pdf-icon {
  display: block;
inline-size: 1rem;
block-size: 1rem;
}
.document-row__pdf {
  display: inline-flex;
align-items: center;
gap: 0.5rem;
min-block-size: 2.75rem;
padding-inline: 0.875rem;
border-radius: var(--radius-xs);
box-shadow: inset 0 0 0 1px var(--accent);
font-size: 0.875rem;
font-weight: 600;

&[href] {
  color: var(--text-dark);
  text-decoration: none;
}

&:hover {
  box-shadow: inset 0 0 0 1.5px var(--base-dark);
}

&:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
}
.document-row__go-icon {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.document-row__go {
  display: none;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border-radius: var(--radius-xs);
background-color: var(--base-dark);
color: var(--white);
transition: background-color 0.2s ease, color 0.2s ease;

.document-row:hover & {
  background-color: var(--primary);
  color: var(--text-dark);
}

@container (width >= 35rem) {
  display: flex;
}
}
.document-row__actions {
  position: relative;
z-index: 1;
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.5rem;

&:empty {
  display: none;
}

@container (width >= 35rem) {
  grid-column: auto;
}
}
.document-row {
  position: relative;
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
align-items: center;
gap: 1.125rem;
padding: 1.25rem 1.375rem;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);
transition: box-shadow 0.2s ease;

&:hover {
  box-shadow: inset 0 0 0 1.5px var(--base-dark);
}

&:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

:has(> &) {
  container-type: inline-size;
}

@container (width >= 35rem) {
  grid-template-columns: 3rem minmax(0, 1fr) auto;
}
}
.pdf-button__icon {
  display: block;
inline-size: 1.125rem;
block-size: 1.125rem;
}
.pdf-button {
  display: inline-flex;
align-items: center;
gap: 0.625rem;
min-block-size: 2.75rem;
padding-inline: 1rem;
border-radius: var(--radius-xs);
box-shadow: inset 0 0 0 1.5px var(--base-dark);
font-size: 0.9375rem;
font-weight: 600;
transition: background-color 0.2s ease, color 0.2s ease;

&[href] {
  color: var(--text-dark);
  text-decoration: none;
}

&[href]:hover {
  background-color: var(--base-dark);
  color: var(--white);
}

&:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
}
.page-head__title {
  max-inline-size: 56.25rem;
margin: 0;
font-size: min(clamp(2.125rem, 4.4vw, 3.75rem), 8.4vw);
hyphens: auto;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.04em;
text-wrap: balance;
}
.page-head__lead {
  max-inline-size: 42.5rem;
margin: 0;
font-size: clamp(1.125rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: var(--text-dark-muted);
}
.page-head__container {
  align-items: flex-start;
gap: 1.125rem;
}
.page-head {
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
border-block-end: 1px solid var(--accent-light);
}
.document-group__title {
  margin: 0;
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.document-group__text {
  margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--text-dark-muted);
}
.document-group__count {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-dark);
}
.document-group__head {
  display: flex;
flex-direction: column;
gap: 0.5rem;
}
.document-group__item {
  margin: 0;
}
.document-group__list {
  display: flex;
flex-direction: column;
gap: 0.625rem;
margin: 0;
padding: 0;
list-style: none;
}
.document-group {
  display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem clamp(2rem, 6vw, 6rem);
padding-block-start: 2rem;
border-block-start: 1px solid var(--accent-light);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 56.25rem) {
  grid-template-columns: minmax(12.5rem, 18.75rem) minmax(0, 1fr);
}
}
.documents__call-title {
  font-size: 1rem;
font-weight: 600;
}
.documents__call-desc {
  font-size: 0.9375rem;
color: var(--text-light-muted);
}
.documents__call-text {
  display: flex;
flex-direction: column;
gap: 2px;
}
.documents__call {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem 2rem;
padding: 1.375rem 1.5rem;
border-radius: var(--radius-s);
background-color: var(--base-dark);
color: var(--white);
}
.documents__container {
  gap: 2.5rem;
}
.documents {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem);
}
.page-head__version {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.page-head__meta {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.5rem;
}
.page-head__intro {
  max-inline-size: 51.25rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.125rem;
}
.legal-summary__label {
  font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--primary-dark);
}
.legal-summary {
  inline-size: 100%;
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-block-start: 0.875rem;
padding: clamp(1.375rem, 2.6vw, 1.875rem);
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent), 0 28px 56px -28px color-mix(in oklch, var(--base-dark) 18%, transparent);

& .check-list[data-layout="grid"] {
  grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr));
  gap: 0.75rem 1.5rem;
}

& .check-list__item {
  font-size: 0.96875rem;
  font-weight: 400;
  line-height: 1.55;
}
}
.legal__toc-label {
  padding-inline: 0.625rem;
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--base-semi-light);
}
.legal__toc-number {
  flex: none;
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
color: var(--primary-dark);
}
.legal__toc-link {
  display: flex;
align-items: baseline;
gap: 0.75rem;
padding: 0.5rem 0.625rem;
border-radius: var(--radius-xs);
font-size: 0.9375rem;
line-height: 1.4;
transition: background-color 0.2s ease, color 0.2s ease;

&[href] {
  color: var(--text-dark);
  text-decoration: none;
}

&[href]:hover {
  background-color: var(--neutral-ultra-light);
  color: var(--primary-dark);
}

&:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
}
.legal__toc-item {
  margin: 0;
}
.legal__toc-list {
  display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.legal__other-svg {
  display: block;
inline-size: 1.25rem;
block-size: 1.25rem;
}
.legal__other-icon {
  display: flex;
color: var(--primary-dark);
}
.legal__other-link {
  display: flex;
align-items: center;
gap: 0.625rem;
padding-block: 0.5rem;
font-size: 0.9375rem;

&[href] {
  color: var(--text-dark);
  text-decoration: none;
}

&[href]:hover {
  color: var(--primary-dark);
}

&:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
}
.legal__other {
  display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.375rem;
margin-block-start: 1.125rem;
padding: 1rem 0.625rem 0;
border-block-start: 1px solid var(--accent-light);

& .legal__toc-label {
  padding-inline: 0;
}

& .arrow-link {
  min-block-size: 2.5rem;
  font-size: 0.9375rem;
}
}
.legal__toc {
  display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 1rem;
border-radius: var(--radius-s);
background-color: var(--neutral-ultra-light);

@container (width >= 56.25rem) {
  position: sticky;
  inset-block-start: 1.5rem;
  padding: 0;
  background-color: transparent;
}
}
.legal__article {
  min-inline-size: 0;
max-inline-size: 51.25rem;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.legal__grid {
  display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
gap: clamp(2rem, 6vw, 6rem);

:has(> &) {
  container-type: inline-size;
}

@container (width >= 56.25rem) {
  grid-template-columns: minmax(13.75rem, 18.75rem) minmax(0, 1fr);
}
}
.legal {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem);
}
.legal__text {
  margin: 0;
font-size: 1.03125rem;
line-height: 1.7;
color: var(--text-dark-muted);
}
.legal__card-name {
  font-weight: 600;
}
.legal__card-link {
  &[href] {
  display: inline;
  font-weight: 600;
  color: var(--text-dark);
}
}
.legal__card {
  display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1.125rem 1.25rem;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);
font-size: 0.96875rem;
line-height: 1.6;
color: var(--text-dark);
}
.legal__number {
  font-family: var(--heading-font-family);
font-size: 0.9375rem;
font-weight: 700;
color: var(--primary-dark);
}
.legal__title {
  margin: 0;
font-size: clamp(1.375rem, 2.2vw, 1.75rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
}
.legal__heading {
  display: flex;
align-items: baseline;
gap: 0.875rem;
}
.legal__section {
  display: flex;
flex-direction: column;
gap: 1rem;
padding-block-start: 2.5rem;
border-block-start: 1px solid var(--accent-light);
scroll-margin-block-start: 1.5rem;

& .check-list__item {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}
}
.legal__head-cell {
  padding: 0.75rem 0.875rem;
text-align: start;
font-family: "Label", ui-monospace, monospace;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: var(--base-semi-light);
}
.legal__cell {
  padding: 0.875rem;
vertical-align: top;
border-block-start: 1px solid var(--accent-light);
font-size: 0.9375rem;
line-height: 1.5;
color: var(--text-dark-muted);

&:first-child {
  font-weight: 600;
  color: var(--text-dark);
}

@container (width < 40rem) {
  padding: 0.25rem 0;
  border: 0;

  &::before {
    content: attr(data-label);
    display: block;
    margin-block-end: 2px;
    font-family: "Label", ui-monospace, monospace;
    font-size: 0.71875rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--base-semi-light);
  }
}
}
.legal__row {
  margin: 0;
}
.legal__table-grid {
  inline-size: 100%;
min-inline-size: 42.5rem;
border-collapse: collapse;

@container (width < 40rem) {
  min-inline-size: 0;
}
}
.legal__table {
  overflow-x: auto;
border-radius: var(--radius-s);
background-color: var(--white);
box-shadow: inset 0 0 0 1px var(--accent-light);

&:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

:has(> &) {
  container-type: inline-size;
}

@container (width < 40rem) {
  overflow: visible;
  background-color: transparent;
  box-shadow: none;

  & table,
  & tbody,
  & tr,
  & td {
    display: block;
    inline-size: auto;
  }

  & thead {
    display: none;
  }

  & tr {
    margin-block-end: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-s);
    background-color: var(--white);
    box-shadow: inset 0 0 0 1px var(--accent-light);
  }
}
}
.legal__link {
  &[href] {
  font-weight: 600;
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

&[href]:hover {
  color: var(--text-dark);
}
}
.legal__call-glow {
  position: absolute;
inset-block-start: -60%;
inset-inline-end: -10%;
inline-size: min(28.75rem, 70vw);
aspect-ratio: 1;
border-radius: 50%;
pointer-events: none;
background: radial-gradient(circle, color-mix(in oklch, var(--primary) 22%, transparent) 0%, transparent 65%);
}
.legal__call-title {
  font-family: var(--heading-font-family);
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.legal__call-desc {
  font-size: 1rem;
line-height: 1.55;
color: var(--text-light-muted);
}
.legal__call-text {
  position: relative;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.legal__call {
  position: relative;
overflow: clip;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.25rem 2rem;
margin-block-start: 1rem;
padding: clamp(1.5rem, 3vw, 2.25rem);
border-radius: var(--radius-s);
background-color: var(--base-dark);
color: var(--white);
}
.google-review__more {
  &[type="button"] {
  align-self: flex-start;
  margin-block-start: calc(0.5rem * -1);
  padding: 0;
  border: 0;
  background: none;
  text-align: start;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

&[type="button"]:hover {
  color: var(--text-dark);
}

&:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

&[hidden] {
  display: none;
}
}