.inclua-island {
  --island-green: #accd88;
  --island-blue: #a9d5d2;
  --island-yellow: #fbcb49;
  --island-orange: #f7a24d;
  --island-pink: #d9abc5;
  --island-ink: var(--color-text-primary);
  --island-muted: var(--color-text-muted);
  background: var(--color-surface-default);
  color: var(--island-ink);
}

.inclua-island__narrow {
  margin-inline: auto;
  width: min(71rem, calc(100% - (var(--layout-gutter) * 2)));
}

.inclua-island-hero {
  background: var(--color-surface-default);
  overflow: hidden;
  padding-block: var(--spacing-16);
}

.inclua-island-hero__inner {
  align-items: center;
  display: grid;
  gap: clamp(var(--spacing-8), 5vw, var(--spacing-16));
  grid-template-columns: minmax(0, 0.88fr) minmax(23rem, 1.12fr);
}

.inclua-island-hero__content {
  display: grid;
  gap: var(--spacing-5);
  position: relative;
  z-index: 1;
}

.inclua-island-hero__eyebrow,
.inclua-island-chapter__eyebrow,
.inclua-island-about__eyebrow,
.inclua-island-contact__eyebrow {
  color: var(--color-action-primary);
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.inclua-island-hero__title {
  color: var(--island-ink);
  font-size: var(--font-size-display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  margin: 0;
  max-width: 9ch;
  text-wrap: balance;
}

.inclua-island-hero__lead {
  color: var(--island-ink);
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
  max-width: 34rem;
  text-wrap: pretty;
}

.inclua-island-hero__text {
  color: var(--island-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin: 0;
  max-width: 38rem;
  text-wrap: pretty;
}

.inclua-island-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
}

.inclua-island__primary-link,
.inclua-island__text-link {
  align-items: center;
  border-radius: var(--radius-control);
  display: inline-flex;
  font-size: var(--font-size-label);
  font-weight: 700;
  justify-content: center;
  min-height: var(--spacing-12);
  padding-inline: var(--spacing-5);
  text-decoration: none;
}

.inclua-island__primary-link {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.inclua-island__text-link {
  border: 1px solid var(--color-control-border);
  color: var(--color-text-primary);
}

.inclua-island__primary-link:is(:hover, :focus-visible),
.inclua-island__text-link:is(:hover, :focus-visible) {
  box-shadow: var(--shadow-action);
  transform: translateY(-1px);
}

.inclua-island-hero__figure {
  display: grid;
  margin: calc(var(--spacing-6) * -1) 0;
  place-items: center;
  position: relative;
}

.inclua-island-hero__figure::before {
  background: var(--color-background-muted);
  border-radius: 50%;
  content: "";
  inline-size: min(34rem, 90%);
  inset: 50% auto auto 50%;
  aspect-ratio: 1;
  position: absolute;
  transform: translate(-50%, -50%);
}

.inclua-island-hero__figure img {
  display: block;
  height: auto;
  max-height: 39rem;
  object-fit: contain;
  position: relative;
  width: min(100%, 37rem);
}

.inclua-island-journey {
  background: var(--color-action-primary);
  color: var(--color-action-primary-text);
}

.inclua-island-journey__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.inclua-island-journey__list li + li {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.inclua-island-journey__list a {
  align-items: center;
  color: inherit;
  display: flex;
  font-size: var(--font-size-label);
  font-weight: 700;
  gap: var(--spacing-3);
  min-height: 5.5rem;
  padding: var(--spacing-4) var(--spacing-5);
  text-decoration: none;
}

.inclua-island-journey__list a:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
}

.inclua-island-journey__list span {
  color: var(--island-yellow);
  font-size: var(--font-size-sm);
}

.inclua-island-chapter {
  scroll-margin-top: var(--spacing-24);
  padding-block: var(--spacing-20);
}

.inclua-island-chapter--materials {
  background: var(--color-background-muted);
}

.inclua-island-chapter--steps {
  background: var(--color-surface-default);
}

.inclua-island-chapter--testimonials {
  background: var(--color-background-muted);
}

.inclua-island-chapter__header {
  align-items: start;
  display: grid;
  gap: var(--spacing-6);
  grid-template-columns: auto minmax(0, 1fr);
  margin-bottom: var(--spacing-12);
  max-width: 61rem;
}

.inclua-island-chapter__number {
  align-items: center;
  background: var(--color-action-accent);
  border-radius: 50%;
  color: var(--color-action-accent-text);
  display: inline-flex;
  font-size: var(--font-size-label);
  font-weight: 800;
  height: var(--spacing-12);
  justify-content: center;
  width: var(--spacing-12);
}

.inclua-island-chapter--materials .inclua-island-chapter__number {
  background: var(--island-orange);
}

.inclua-island-chapter--steps .inclua-island-chapter__number {
  background: var(--island-blue);
}

.inclua-island-chapter--testimonials .inclua-island-chapter__number {
  background: var(--island-pink);
}

.inclua-island-chapter__header > div {
  display: grid;
  gap: var(--spacing-3);
}

.inclua-island-chapter__header h2,
.inclua-island-chapter__header p {
  margin: 0;
}

.inclua-island-chapter__header h2 {
  color: var(--island-ink);
  font-size: var(--font-size-heading-1);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.inclua-island-chapter__header p:not(.inclua-island-chapter__eyebrow) {
  color: var(--island-muted);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  max-width: 48rem;
  text-wrap: pretty;
}

.inclua-island-intro {
  align-items: center;
  display: grid;
  gap: var(--spacing-10);
  grid-template-columns: minmax(0, 1.2fr) minmax(14rem, 0.8fr);
  margin-bottom: var(--spacing-16);
}

.inclua-island-intro__text {
  border-left: var(--spacing-1) solid var(--island-green);
  display: grid;
  gap: var(--spacing-5);
  padding-left: var(--spacing-6);
}

.inclua-island-intro__text p {
  color: var(--island-ink);
  font-size: var(--font-size-lg);
  line-height: 1.65;
  margin: 0;
  text-wrap: pretty;
}

.inclua-island-intro__figure {
  display: flex;
  justify-content: center;
  margin: 0;
}

.inclua-island-intro__figure img {
  display: block;
  height: auto;
  width: min(100%, 19rem);
}

.inclua-island-about {
  align-items: center;
  background: var(--color-action-primary);
  border-radius: var(--radius-xl);
  color: var(--color-action-primary-text);
  display: grid;
  gap: var(--spacing-10);
  grid-template-columns: minmax(0, 0.85fr) minmax(20rem, 1.15fr);
  margin-bottom: var(--spacing-16);
  overflow: hidden;
  padding: var(--spacing-8);
}

.inclua-island-about__text {
  display: grid;
  gap: var(--spacing-4);
}

.inclua-island-about__text h3,
.inclua-island-about__text p {
  margin: 0;
}

.inclua-island-about__text h3 {
  color: inherit;
  font-size: var(--font-size-heading-2);
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

.inclua-island-about__text p:not(.inclua-island-about__eyebrow) {
  color: color-mix(in srgb, currentColor 76%, transparent);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.inclua-island-video {
  aspect-ratio: 16 / 9;
  background: #0f0f0f;
  border-radius: var(--radius-card-compact);
  box-shadow: var(--shadow-control);
  overflow: hidden;
  width: 100%;
}

.inclua-island-video iframe {
  border: 0;
  display: block;
  height: 100%;
  width: 100%;
}

.inclua-island-section-heading {
  display: grid;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
}

.inclua-island-section-heading h3,
.inclua-island-section-heading p {
  margin: 0;
}

.inclua-island-section-heading h3 {
  color: var(--island-ink);
  font-size: var(--font-size-heading-2);
  font-weight: 800;
}

.inclua-island-section-heading p {
  color: var(--island-muted);
  max-width: 48rem;
}

.inclua-island-dimensions__grid {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.inclua-island-dimension {
  align-items: center;
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-top: var(--spacing-1) solid var(--island-yellow);
  border-radius: var(--radius-card-compact);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-height: 13rem;
  padding: var(--spacing-5);
  text-align: center;
  transition:
    transform var(--transition-spring),
    box-shadow var(--transition-spring),
    border-color var(--transition-duration-normal) var(--transition-timing-default);
}

.inclua-island-dimension:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--island-yellow);
}

.inclua-island-dimension:nth-child(2) {
  border-top-color: var(--island-pink);
}

.inclua-island-dimension:nth-child(2):hover {
  border-color: var(--island-pink);
}

.inclua-island-dimension:nth-child(3) {
  border-top-color: var(--island-blue);
}

.inclua-island-dimension:nth-child(3):hover {
  border-color: var(--island-blue);
}

.inclua-island-dimension:nth-child(4) {
  border-top-color: var(--island-orange);
}

.inclua-island-dimension:nth-child(4):hover {
  border-color: var(--island-orange);
}

.inclua-island-dimension:nth-child(5) {
  border-top-color: var(--island-green);
}

.inclua-island-dimension:nth-child(5):hover {
  border-color: var(--island-green);
}

.inclua-island-dimension img {
  height: 5.5rem;
  object-fit: contain;
  width: 5.5rem;
}

.inclua-island-dimension h4 {
  color: var(--island-ink);
  font-size: var(--font-size-label);
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.inclua-island-components__media {
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-action);
  margin: 0;
  overflow: hidden;
  padding: clamp(var(--spacing-4), 4vw, var(--spacing-10));
}

.inclua-island-components__media img {
  display: block;
  height: auto;
  width: 100%;
}

.inclua-island-components__media figcaption {
  border-top: 1px solid var(--color-border-subtle);
  color: var(--island-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-6);
  padding-top: var(--spacing-4);
  text-align: center;
}

.inclua-island-steps__panel {
  border-block: 1px solid var(--color-border-subtle);
}

.inclua-island-step {
  color: var(--island-ink);
}

.inclua-island-step + .inclua-island-step {
  border-top: 1px solid var(--color-border-subtle);
}

.inclua-island-step summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  font-size: var(--font-size-lg);
  font-weight: 700;
  gap: var(--spacing-5);
  grid-template-columns: auto minmax(0, 1fr) auto;
  line-height: 1.4;
  list-style: none;
  padding-block: var(--spacing-6);
}

.inclua-island-step summary::-webkit-details-marker {
  display: none;
}

.inclua-island-step summary::after {
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  content: "";
  height: var(--spacing-2);
  margin-right: var(--spacing-2);
  rotate: 45deg;
  transition: rotate 0.2s ease;
  width: var(--spacing-2);
}

.inclua-island-step[open] summary::after {
  rotate: 225deg;
}

.inclua-island-step summary:focus-visible {
  outline: 2px solid var(--color-action-accent);
  outline-offset: var(--spacing-1);
}

.inclua-island-step__number {
  color: var(--color-action-primary);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
}

.inclua-island-step__content {
  color: var(--island-muted);
  font-size: var(--font-size-body);
  line-height: 1.75;
  max-width: 56rem;
  padding: 0 0 var(--spacing-8) calc(var(--spacing-8) + var(--spacing-5));
}

.inclua-island-step__content ul {
  margin-block: 0;
  padding-left: var(--spacing-5);
}

.inclua-island-step__downloads {
  display: grid;
  gap: var(--spacing-4);
  list-style: none;
  margin-top: var(--spacing-4) !important;
  padding: 0 !important;
}

.inclua-island-step__downloads > li {
  color: var(--island-ink);
  font-weight: 700;
}

.inclua-island-step__downloads > li > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  list-style: none;
  margin-top: var(--spacing-2);
  padding: 0;
}

.inclua-island-step__downloads a {
  background: var(--color-background-muted);
  border-radius: var(--radius-control);
  color: var(--color-text-primary);
  display: inline-flex;
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: var(--spacing-2) var(--spacing-3);
  text-decoration: none;
}

.inclua-island-step__downloads a:is(:hover, :focus-visible) {
  background: var(--color-action-accent);
}

.inclua-island-testimonials__lead {
  align-items: center;
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: minmax(9rem, 16rem) minmax(0, 1fr);
  margin-bottom: var(--spacing-8);
}

.inclua-island-testimonials__art {
  margin: 0;
}

.inclua-island-testimonials__art img {
  display: block;
  height: auto;
  width: 100%;
}

.inclua-island-testimonials__lead p {
  color: var(--island-ink);
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  max-width: 47rem;
  text-wrap: pretty;
}

.inclua-island-testimonials__grid {
  display: grid;
  gap: var(--spacing-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inclua-island-testimonial {
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100%;
  padding: var(--spacing-6);
  transition:
    transform var(--transition-spring),
    box-shadow var(--transition-spring),
    border-color var(--transition-duration-normal) var(--transition-timing-default);
}

.inclua-island-testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-action-accent);
}

.inclua-island-testimonial blockquote {
  flex: 1;
  margin: 0 0 var(--spacing-8);
}

.inclua-island-testimonial blockquote p {
  color: var(--island-ink);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin: 0;
  text-wrap: pretty;
}

.inclua-island-testimonial figcaption {
  color: var(--island-muted);
  display: grid;
  font-size: var(--font-size-sm);
  gap: var(--spacing-1);
}

.inclua-island-testimonial figcaption strong {
  color: var(--island-ink);
}

.inclua-island-contact {
  background: var(--color-background-muted);
  padding-block: var(--spacing-14);
}

.inclua-island-contact__inner {
  align-items: center;
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  display: grid;
  gap: var(--spacing-8);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: var(--spacing-8);
}

.inclua-island-contact__content {
  display: grid;
  gap: var(--spacing-3);
}

.inclua-island-contact__content h2,
.inclua-island-contact__content p {
  margin: 0;
}

.inclua-island-contact__content h2 {
  color: var(--island-ink);
  font-size: var(--font-size-heading-2);
  font-weight: 800;
  max-width: 43rem;
  text-wrap: balance;
}

.inclua-island-contact__content p {
  color: var(--island-muted);
  max-width: 42rem;
}

.inclua-island-contact__email {
  align-items: center;
  background: var(--color-action-primary);
  border-radius: var(--radius-control);
  color: var(--color-action-primary-text);
  display: inline-flex;
  font-size: var(--font-size-label);
  font-weight: 700;
  justify-content: center;
  min-height: var(--spacing-12);
  padding-inline: var(--spacing-5);
  text-decoration: none;
}

.inclua-island-contact__email:is(:hover, :focus-visible) {
  box-shadow: var(--shadow-action);
  transform: translateY(-1px);
}

@media (max-width: 75rem) {
  .inclua-island-dimensions__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .inclua-island-testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 62rem) {
  .inclua-island-hero__inner,
  .inclua-island-intro,
  .inclua-island-about,
  .inclua-island-testimonials__lead,
  .inclua-island-contact__inner {
    grid-template-columns: 1fr;
  }

  .inclua-island-hero__figure {
    order: -1;
  }

  .inclua-island-hero__figure img {
    max-height: 28rem;
  }

  .inclua-island-journey__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inclua-island-journey__list li:nth-child(3) {
    border-left: 0;
  }

  .inclua-island-journey__list li:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
}

@media (max-width: 45rem) {
  .inclua-island-hero {
    padding-block: var(--spacing-10);
  }

  .inclua-island-hero__title {
    font-size: var(--font-size-heading-1);
  }

  .inclua-island-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .inclua-island-journey__list {
    grid-template-columns: 1fr;
  }

  .inclua-island-journey__list li + li,
  .inclua-island-journey__list li:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .inclua-island-journey__list a {
    min-height: 4rem;
  }

  .inclua-island-chapter {
    padding-block: var(--spacing-12);
  }

  .inclua-island-chapter__header {
    gap: var(--spacing-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--spacing-8);
  }

  .inclua-island-chapter__header h2 {
    font-size: var(--font-size-heading-2);
  }

  .inclua-island-intro {
    margin-bottom: var(--spacing-10);
  }

  .inclua-island-intro__text {
    padding-left: var(--spacing-4);
  }

  .inclua-island-intro__text p {
    font-size: var(--font-size-body);
  }

  .inclua-island-about {
    margin-inline: calc(var(--layout-gutter) * -1);
    padding: var(--spacing-6) var(--layout-gutter);
    border-radius: 0;
  }

  .inclua-island-dimensions__grid,
  .inclua-island-testimonials__grid {
    grid-template-columns: 1fr;
  }

  .inclua-island-dimension {
    align-items: center;
    flex-direction: row;
    min-height: 0;
    text-align: left;
  }

  .inclua-island-dimension img {
    height: 4.5rem;
    width: 4.5rem;
  }

  .inclua-island-step summary {
    align-items: start;
    font-size: var(--font-size-body);
    gap: var(--spacing-3);
  }

  .inclua-island-step__content {
    padding-left: 0;
  }

  .inclua-island-contact__inner {
    padding: var(--spacing-6);
  }

  .inclua-island-contact__email {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .inclua-island__primary-link,
  .inclua-island__text-link,
  .inclua-island-contact__email,
  .inclua-island-step summary::after,
  .inclua-island-testimonial,
  .inclua-island-dimension {
    transition: none;
  }
}