/* Canvas case study — typography + color brand identity */

@import url('https://cdn.jsdelivr.net/npm/@fontsource/metropolis@5.0.8/300.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/metropolis@5.0.8/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/metropolis@5.0.8/700.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/metropolis@5.0.8/800.css');

.page-canvas {
  --canvas-red: #db3546;
  --canvas-blue: #0393e3;
  --canvas-merge-bg: #181818;
  --canvas-gray: #e1e5e5;
  --canvas-black: #090909;
  --canvas-white: #ffffff;
  --canvas-color-row-bottom-height: clamp(120px, 14vw, 180px);
  --canvas-type-line: rgba(0, 0, 0, 0.14);
  --canvas-type-muted: rgba(0, 0, 0, 0.45);
  --canvas-type-paper: #ffffff;
  --canvas-logo-surface: #efefef;
  --canvas-homepage-surface: #f5f5f5;
  --canvas-hero-floor: #cecdcc;
  --canvas-phone-surface: #eff0f4;
  --canvas-font-display: 'Metropolis', 'Montserrat', sans-serif;
  --canvas-font-ui: 'Inter', system-ui, sans-serif;
  --canvas-type-gutter: var(--page-inset);
}

.page-canvas .project-role-value {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hero-body-copy-color);
  line-height: 1.75;
}

/* Canvas — narrative story chapters */
.page-canvas .project-gallery > .canvas-story {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.page-case-study .project-gallery .canvas-story__intro {
  --hero-body: 17px;
  --hero-lead: 26px;
  margin: 0;
  padding: clamp(56px, 7vw, 88px) var(--page-inset) clamp(40px, 5vw, 56px);
  text-align: center;
  background: var(--canvas-white);
}

.canvas-story--define .canvas-story__intro {
  padding-bottom: clamp(32px, 4vw, 48px);
}

.canvas-story__intro .project-title {
  grid-column: auto;
  grid-row: auto;
  margin-bottom: var(--hero-lead);
  color: var(--canvas-blue);
}

.canvas-story__intro .project-title-sep {
  font-weight: 300;
}

.canvas-story__intro .project-desc {
  margin-inline: auto;
  margin-bottom: 0;
  max-width: 52ch;
  color: var(--canvas-blue);
}

.canvas-story__outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--story-chapter-pad-top) var(--page-inset) var(--story-chapter-pad-top);
  text-align: center;
  background: var(--canvas-logo-surface);
  box-sizing: border-box;
}

.canvas-story__outro .project-title {
  grid-column: auto;
  grid-row: auto;
  align-self: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: center;
  color: var(--canvas-black);
}

.page-canvas .project-gallery .canvas-type-section {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.canvas-define-copy {
  --hero-body: 17px;
  --hero-lead: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: var(--story-chapter-pad-top) var(--canvas-type-card-inset) var(--story-chapter-pad-bottom);
  text-align: center;
  background: var(--canvas-type-paper);
  box-sizing: border-box;
}

.canvas-define-copy .project-title {
  grid-column: auto;
  grid-row: auto;
  align-self: center;
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--hero-lead);
  text-align: center;
  color: var(--canvas-black);
}

.canvas-define-copy .project-title-sep {
  font-weight: 300;
}

.canvas-define-copy .project-desc {
  margin-inline: auto;
  margin-bottom: 0;
  max-width: 52ch;
  text-align: center;
  color: var(--project-label-color);
}

.canvas-type-section {
  --canvas-type-card-inset: clamp(28px, 4vw, 41px);
  margin: 0;
  padding: 0;
  background: var(--canvas-type-paper);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.canvas-type-section.cs-slide--scroll .cs-reveal,
.canvas-color-section.cs-slide--scroll .cs-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.canvas-type-section.cs-slide--scroll .cs-reveal.is-visible,
.canvas-color-section.cs-slide--scroll .cs-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Typography → color handoff */
.canvas-type-section:has(+ .canvas-color-section) {
  padding-bottom: 0;
}

.canvas-type-section + .canvas-color-section {
  margin-top: 4px;
}

.canvas-type-hero {
  --canvas-type-hero-line: clamp(57px, 9.75vw, 94px);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: clamp(340px, 46vw, 500px);
  padding: clamp(20px, 3vw, 28px) var(--canvas-type-card-inset) clamp(48px, 7vw, 72px);
  background: var(--canvas-black);
  color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

.canvas-type-hero__masthead {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 0 clamp(28px, 4vw, 40px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--canvas-font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.canvas-type-hero__masthead span:last-child {
  text-align: right;
}

.canvas-type-hero__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vw, 28px);
  padding: clamp(36px, 6vw, 56px) 0 0;
}

.canvas-type-hero__window {
  position: relative;
  height: var(--canvas-type-hero-line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 82%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 82%,
    transparent 100%
  );
}

.canvas-type-hero__track {
  will-change: transform;
  transition: transform 0.213s cubic-bezier(0.22, 1, 0.36, 1);
}

.canvas-type-hero__line {
  margin: 0;
  height: var(--canvas-type-hero-line);
  font-family: var(--canvas-font-display);
  font-size: clamp(47px, 8.06vw, 83px);
  font-weight: 800;
  line-height: var(--canvas-type-hero-line);
  letter-spacing: -0.03em;
  color: #fff;
  white-space: nowrap;
  transition:
    opacity 0.213s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.213s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.213s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.28;
  filter: blur(8px);
  transform: scale(0.96);
}

.canvas-type-hero__line.is-active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
  color: #fff;
}

.canvas-type-hero__line.is-near {
  opacity: 0.45;
  filter: blur(4px);
  transform: scale(0.98);
}

.canvas-type-hero.is-playing .canvas-type-hero__line.is-active {
  color: #fff;
}

.canvas-type-hero.is-playing .canvas-type-hero__line.is-active .canvas-type-hero__accent {
  color: var(--canvas-blue);
}

.canvas-type-hero__sub {
  margin: 0;
  max-width: 42ch;
  font-family: var(--canvas-font-ui);
  font-size: clamp(13px, 1.35vw, 15px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.52);
}

.canvas-type-section .canvas-type-sheet {
  padding-top: clamp(28px, 4vw, 40px);
}

.canvas-type-sheet {
  width: 100%;
  max-width: none;
  margin: 0;
  color: #111;
}

/* Masthead — legacy sheet header (unused; hero replaces) */
.canvas-type-sheet__masthead {
  display: none;
}

.canvas-type-intro__copy {
  margin: 20px 0;
  max-width: 54ch;
  font-family: var(--canvas-font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--canvas-type-muted);
}

.canvas-type-intro__footer {
  margin: 20px 0;
  max-width: 54ch;
  font-family: var(--canvas-font-ui);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--canvas-type-muted);
}

.canvas-type-intro {
  display: grid;
  grid-template-columns: clamp(26px, 4.2vw, 44px) minmax(0, 1fr);
  gap: clamp(5px, 0.9vw, 10px);
  padding: clamp(28px, 4vw, 40px) 0;
}

.canvas-type-intro__label {
  margin: 0;
  padding-top: 4px;
  font-family: var(--canvas-font-ui);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--canvas-type-muted);
}

/* Specimen cards — display + UI stack */
.canvas-type-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.5vw, 28px);
  padding-top: 0;
}

.canvas-type-card {
  border: 1px solid var(--canvas-type-line);
  padding: var(--canvas-type-card-inset);
  min-width: 0;
}

.canvas-type-card--display {
  background: #fff;
}

.canvas-type-card--ui {
  background: var(--canvas-gray);
  border-color: rgba(0, 0, 0, 0.08);
}

.canvas-type-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(16px, 3vw, 28px);
  margin-bottom: clamp(20px, 3vw, 28px);
}

.canvas-type-card__title-block {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
  min-width: 0;
}

.canvas-type-card__role {
  margin: 0;
  font-family: var(--canvas-font-ui);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--canvas-type-muted);
}

.canvas-type-card--display .canvas-type-card__role {
  color: var(--canvas-blue);
}

.canvas-type-card__name {
  margin: 0;
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #111;
}

.canvas-type-card__name-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(6px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--letter-index, 0) * 45ms);
}

.canvas-type-card.cs-reveal.is-visible .canvas-type-card__name-letter {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.canvas-type-card--metropolis .canvas-type-card__name {
  font-family: var(--canvas-font-display);
  font-size: clamp(54px, 8.25vw, 84px);
}

.canvas-type-card--inter .canvas-type-card__name {
  font-family: var(--canvas-font-ui);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: clamp(54px, 8.25vw, 84px);
}

.canvas-type-card__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 2.65vw, 26px);
  align-items: start;
  padding: clamp(18px, 2.65vw, 24px) 0;
  border-top: 1px solid var(--canvas-type-line);
  border-bottom: 1px solid var(--canvas-type-line);
}

.canvas-type-card--ui .canvas-type-card__meta {
  border-color: rgba(0, 0, 0, 0.08);
}

.canvas-type-card__charset {
  margin: 0;
  overflow: hidden;
  font-size: clamp(18px, 2.8vw, 28px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.06em;
  color: rgba(0, 0, 0, 0.22);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-4%);
  transition:
    opacity 0.8s ease 0.2s,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.canvas-type-card.cs-reveal.is-visible .canvas-type-card__charset {
  opacity: 1;
  transform: translateX(0);
}

.canvas-type-card--metropolis .canvas-type-card__charset {
  font-family: var(--canvas-font-display);
  font-size: clamp(23px, 3.64vw, 36px);
}

.canvas-type-card--inter .canvas-type-card__charset {
  font-family: var(--canvas-font-ui);
  font-size: clamp(23px, 3.64vw, 36px);
}

.canvas-type-card__note {
  margin: 0;
  font-family: var(--canvas-font-ui);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--canvas-type-muted);
  text-align: left;
}

.canvas-type-card__foot {
  padding-top: clamp(21px, 2.9vw, 28px);
}

/* Weight carousel — vertical stack */
.canvas-type-weight-stack {
  --canvas-weight-line: clamp(28px, 4vw, 40px);
}

.canvas-type-weight-stack__window {
  height: var(--canvas-weight-line);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 22%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 22%,
    #000 78%,
    transparent 100%
  );
}

.canvas-type-weight-stack__track {
  will-change: transform;
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.canvas-type-weight-stack__line {
  margin: 0;
  height: var(--canvas-weight-line);
  font-size: clamp(22px, 3vw, 32px);
  line-height: var(--canvas-weight-line);
  letter-spacing: -0.02em;
  color: #111;
  transition:
    opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.3;
  filter: blur(5px);
}

.canvas-type-weight-stack__line.is-active {
  opacity: 1;
  filter: blur(0);
}

.canvas-type-weight-stack__line.is-near {
  opacity: 0.5;
  filter: blur(2px);
}

.canvas-type-card--metropolis .canvas-type-weight-stack__line {
  font-family: var(--canvas-font-display);
}

.canvas-type-card--inter .canvas-type-weight-stack__line {
  font-family: var(--canvas-font-ui);
}

.canvas-type-weight-stack__line--light {
  font-weight: 300;
}

.canvas-type-weight-stack__line--regular {
  font-weight: 400;
}

.canvas-type-weight-stack__line--bold {
  font-weight: 700;
}

.canvas-type-card--metropolis .canvas-type-weight-stack__line--bold {
  font-weight: 800;
}

.canvas-type-card__aa {
  margin: 0;
  flex: 0 0 auto;
  font-size: clamp(52px, 8vw, 88px);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: #111;
  opacity: 0.12;
}

.canvas-type-card--metropolis .canvas-type-card__aa {
  font-family: var(--canvas-font-display);
}

.canvas-type-card--inter .canvas-type-card__aa {
  font-family: var(--canvas-font-ui);
  font-weight: 700;
  opacity: 0.16;
}

@media (max-width: 820px) {
  .canvas-type-intro {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .canvas-type-hero__masthead {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .canvas-type-hero__masthead span:last-child {
    text-align: left;
  }
}

@media (max-width: 640px) {
  .canvas-type-card__head {
    flex-direction: row;
    align-items: flex-end;
  }

  .canvas-type-card__aa {
    font-size: clamp(40px, 14vw, 56px);
  }
}

@media (max-width: 991px) {
  .canvas-type-section {
    --canvas-type-card-inset: clamp(20px, 4vw, 32px);
  }

  .canvas-type-hero {
    --canvas-type-hero-line: clamp(44px, 8vw, 72px);
    min-height: clamp(280px, 44vw, 400px);
  }

  .canvas-type-hero__line {
    font-size: clamp(28px, 6.2vw, 60px);
  }

  .canvas-define-copy,
  .canvas-deploy-copy {
    padding-inline: clamp(20px, 5vw, 32px);
  }

  .canvas-logo-reveal {
    aspect-ratio: auto;
    height: auto;
    width: calc(100% + 2 * var(--page-inset));
    margin-inline: calc(-1 * var(--page-inset));
    box-sizing: border-box;
    padding: calc(clamp(20px, 3vw, 28px) + 50px) var(--page-inset);
  }

  .canvas-logo-reveal__frame {
    width: min(100%, 256px);
    height: auto;
    margin-inline: auto;
  }

  .canvas-logo-reveal img {
    width: 100%;
    max-width: min(224px, 41.6vw);
  }
}

@media (max-width: 767px) {
  .canvas-type-section {
    --canvas-type-card-inset: 20px;
  }

  .canvas-type-hero {
    --canvas-type-hero-line: clamp(34px, 9vw, 48px);
    min-height: clamp(220px, 52vw, 300px);
    padding-inline: 20px;
  }

  .canvas-type-hero__line {
    font-size: clamp(20px, 5.5vw, 36px);
    letter-spacing: -0.025em;
  }

  .canvas-define-copy {
    padding-inline: 20px;
  }

  .canvas-deploy-copy {
    padding-inline: 20px;
  }

  .canvas-logo-reveal {
    padding: 66px var(--page-inset) 74px;
  }

  .canvas-logo-reveal__frame {
    width: min(100%, 192px);
  }

  .canvas-logo-reveal img {
    max-width: min(160px, 43.2vw);
  }

  .page-canvas .project-gallery .canvas-homepage-mockup-section {
    gap: clamp(40px, 8vw, 72px);
    padding-bottom: clamp(48px, 10vw, 80px);
    overflow: visible;
  }

  .canvas-macbook {
    --canvas-macbook-scale: 1;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    padding-inline: 0;
    box-sizing: border-box;
  }
}

/* Color spec — guidelines grid */
.canvas-color-section {
  margin: 0;
  padding: 0;
  border-top: none;
  background: #ffffff;
}

.canvas-color-spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  background: #ffffff;
}

.canvas-color-spec__row-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 4px;
  min-height: clamp(220px, 30vw, 340px);
}

.canvas-color-spec__row-bottom-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.canvas-color-spec__row-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-height: var(--canvas-color-row-bottom-height);
}

.canvas-color-spec__row-gradient {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  width: 100%;
  min-height: var(--canvas-color-row-bottom-height);
}

.canvas-color-spec__row-gradient > span {
  display: block;
  min-height: 100%;
  background: color-mix(
    in srgb,
    var(--canvas-gray) calc(var(--i) * 100% / 15),
    var(--canvas-black)
  );
}

.canvas-color-spec__swatch {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  padding: clamp(14px, 2vw, 22px);
}

.canvas-color-spec__swatch--blue {
  background: var(--canvas-blue);
}

.canvas-color-spec__swatch--red {
  background: var(--canvas-red);
}

.canvas-color-spec__swatch--black {
  background: var(--canvas-black);
}

.canvas-color-spec__swatch--gray {
  background: var(--canvas-gray);
}

.canvas-color-spec__swatch--white {
  background: var(--canvas-white);
}

.canvas-color-spec__meta {
  display: block;
  font-family: var(--canvas-font-ui);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.canvas-color-spec__swatch--dark .canvas-color-spec__meta {
  color: rgba(255, 255, 255, 0.92);
}

.canvas-color-spec__swatch--light .canvas-color-spec__meta {
  color: rgba(0, 0, 0, 0.82);
}

.canvas-color-spec__name {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

@media (max-width: 720px) {
  .canvas-color-spec__row-top {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .canvas-color-spec__row-top .canvas-color-spec__swatch {
    min-height: clamp(160px, 36vw, 220px);
  }

  .canvas-color-spec__row-bottom {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .canvas-color-spec__row-bottom .canvas-color-spec__swatch {
    min-height: clamp(120px, 28vw, 160px);
  }

  .canvas-color-spec__row-gradient {
    min-height: clamp(120px, 28vw, 160px);
  }

  .canvas-color-spec__meta {
    display: block;
  }
}

/* Gallery image — left-to-right scroll reveal (homepage showcase) */
.canvas-gallery-reveal {
  display: block;
  width: 100%;
  overflow: hidden;
}

.canvas-gallery-reveal__frame {
  width: 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: clip-path;
}

.canvas-gallery-reveal.is-visible .canvas-gallery-reveal__frame {
  clip-path: inset(0 0 0 0);
}

.canvas-gallery-reveal img {
  display: block;
  width: 100%;
  height: auto;
}

.canvas-basil-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  align-items: stretch;
}

.canvas-basil-details .canvas-gallery-reveal__frame {
  aspect-ratio: 1024 / 740;
  width: 100%;
}

.canvas-basil-details .canvas-gallery-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Camera frame is left-weighted in source — nudge crop to match LiDAR balance */
.canvas-basil-details__item:first-child .canvas-gallery-reveal img {
  object-position: 36% center;
}

@media (max-width: 720px) {
  .canvas-basil-details {
    grid-template-columns: 1fr;
  }

  .canvas-basil-details .canvas-gallery-reveal__frame {
    aspect-ratio: auto;
  }

  .canvas-basil-details .canvas-gallery-reveal img {
    height: auto;
  }
}

/* Logo — left-to-right scroll reveal */
.canvas-logo-reveal {
  display: block;
  width: 100%;
  aspect-ratio: 2352 / 1110;
  margin: 0;
  overflow: hidden;
  padding: 0;
  background: var(--canvas-logo-surface);
}

.canvas-logo-reveal__frame {
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: clip-path;
}

.canvas-logo-reveal.is-visible .canvas-logo-reveal__frame {
  clip-path: inset(0 0 0 0);
}

.page-canvas .project-gallery .canvas-logo-reveal img {
  object-fit: contain;
  background: transparent;
}

.page-canvas .project-gallery .canvas-homepage-mockup-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--story-chapter-pad-top);
  width: 100%;
  margin: 0;
  padding: var(--story-chapter-pad-top) 0;
  background: var(--canvas-homepage-surface);
}

.canvas-deploy-copy {
  --hero-body: 17px;
  --hero-lead: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 32px);
  text-align: center;
  box-sizing: border-box;
}

.canvas-deploy-copy .project-title {
  grid-column: auto;
  grid-row: auto;
  align-self: center;
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--hero-lead);
  text-align: center;
  color: var(--canvas-black);
}

.canvas-deploy-copy .project-title-sep {
  font-weight: 300;
}

.canvas-deploy-copy .project-desc {
  margin-inline: auto;
  margin-bottom: 0;
  max-width: min(52ch, 100%);
  text-align: center;
  text-wrap: balance;
  color: var(--project-label-color);
}

.page-canvas .canvas-homepage-mockup-section .canvas-phone-section {
  width: 100%;
  padding: 0;
  background: transparent;
}

.canvas-macbook {
  --canvas-macbook-scale: 1.495;
  width: min(calc(56.25% * var(--canvas-macbook-scale)), calc(1024px * var(--canvas-macbook-scale)));
  max-width: 100%;
  /* Pull device up so 150px gap lands at the screen, not the PNG lid */
  margin-top: calc(-141 / 1024 * min(calc(56.25% * var(--canvas-macbook-scale)), calc(1024px * var(--canvas-macbook-scale))));
}

.canvas-macbook__device {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0;
}

.canvas-macbook__frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/*
 * Active display only — inner screen rect, 1024×768 frame:
 * left 184, top 141, size 656×409
 */
.canvas-macbook__screen {
  position: absolute;
  left: calc(184 / 1024 * 100% - 0.3%);
  top: calc(141 / 768 * 100% - 0.35%);
  width: calc(656 / 1024 * 100% + 0.6%);
  height: calc(409 / 768 * 100% + 0.7%);
  z-index: 2;
  overflow: hidden;
  background: var(--canvas-hero-floor);
  container-type: size;
  container-name: canvas-macbook-screen;
  pointer-events: none;
}

.canvas-website-hero {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--canvas-hero-floor);
}

.canvas-website-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 99%;
  transform: scale(1.008);
  transform-origin: center bottom;
}

/* Scroll-triggered entrance — single image, no carousel */
.canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__photo {
  transform: scale(1.07);
  filter: brightness(0.9);
}

.canvas-website-hero.canvas-mac-hero--js.is-active .canvas-website-hero__photo {
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms ease;
}

.canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__nav,
.canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__headline-wrap,
.canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__lede-wrap,
.canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__button-wrap {
  opacity: 0;
  transform: translateY(14.55px);
}

.canvas-website-hero.canvas-mac-hero--js.is-active .canvas-website-hero__nav {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms ease 120ms,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

.canvas-website-hero.canvas-mac-hero--js.is-active .canvas-website-hero__headline-wrap {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms ease 220ms,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
}

.canvas-website-hero.canvas-mac-hero--js.is-active .canvas-website-hero__lede-wrap {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms ease 320ms,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 320ms;
}

.canvas-website-hero.canvas-mac-hero--js.is-active .canvas-website-hero__button-wrap {
  opacity: 1;
  transform: none;
  transition:
    opacity 380ms ease 420ms,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1) 420ms;
}

.canvas-website-hero__nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2.4cqi;
  min-height: 0;
  padding: 1.8cqi 2.4cqi;
  background: transparent;
}

.canvas-website-hero__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: 3cqi;
}

.canvas-website-hero__logo img {
  display: block;
  width: auto;
  height: 3.2cqi;
  object-fit: contain;
}

.canvas-website-hero__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  gap: 1.8cqi;
  min-width: 0;
}

.canvas-website-hero__links span {
  font-family: var(--canvas-font-ui);
  font-size: 1.35cqi;
  font-weight: 500;
  line-height: 1;
  color: rgba(0, 0, 0, 0.72);
  white-space: nowrap;
}

.canvas-website-hero__cta {
  flex: 0 0 auto;
  margin-right: 3cqi;
  padding: 0.85cqi 1.5cqi;
  background: var(--canvas-red);
  color: #fff;
  font-family: var(--canvas-font-ui);
  font-size: 1.2cqi;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.canvas-website-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3cqi;
  text-align: center;
}

.canvas-website-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 2.4cqh;
  margin-top: 55cqh;
}

.canvas-website-hero__headline-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 92%;
}

.canvas-website-hero__headline {
  margin: 0;
  font-family: var(--canvas-font-display);
  font-size: 4.8cqi;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.32);
}

.canvas-website-hero__lede-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 49.14%;
  margin-top: -5px;
  padding: 1cqi 1.6cqi;
  background: rgb(255 255 255 / 0.2);
  box-sizing: border-box;
}

.canvas-website-hero__lede {
  margin: 0;
  font-family: var(--canvas-font-ui);
  font-size: 1.885cqi;
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  color: rgba(0, 0, 0, 0.78);
}

.canvas-website-hero__button-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 5px;
}

.canvas-website-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11cqi;
  padding: 0.9cqi 1.8cqi;
  background: var(--canvas-black);
  color: #fff;
  font-family: var(--canvas-font-ui);
  font-size: 1.25cqi;
  font-weight: 600;
  line-height: 1;
}

.canvas-logo-reveal img {
  display: block;
  width: min(386px, 58vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background: transparent;
  object-fit: contain;
}

.canvas-phone-section {
  padding: clamp(72px, 10vw, 120px) var(--page-inset);
  background: var(--canvas-phone-surface);
}

.canvas-phone {
  --canvas-phone-scale: 1.224;
  --canvas-phone-shell-w: min(calc(295px * var(--canvas-phone-scale)), calc(58.5vw * var(--canvas-phone-scale)));
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}

.canvas-phone__shell {
  position: relative;
  width: fit-content;
  box-sizing: border-box;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.canvas-phone__buttons {
  position: absolute;
  top: 18%;
  right: -3px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  pointer-events: none;
}

.canvas-phone__btn {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f0f0f0 0%, #b8b8b8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 0 0 1px rgba(0, 0, 0, 0.1);
}

.canvas-phone__btn--power {
  height: 28px;
}

.canvas-phone__btn--vol {
  height: 48px;
}

.canvas-phone__face {
  display: flex;
  flex-direction: column;
  width: var(--canvas-phone-shell-w);
  aspect-ratio: 1 / 2;
  background: #f5f5f5;
  border-radius: clamp(22px, 6vw, 32px);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.14),
    0 14px 36px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.canvas-phone__chrome-top {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 9%;
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  container-type: size;
  container-name: canvas-phone-screen;
}

.canvas-phone__island-row {
  position: relative;
  flex: 0 0 calc(47 / 59 * 100%);
}

.canvas-phone__status-stripe {
  flex: 1 1 auto;
}

.canvas-phone__island {
  position: absolute;
  top: calc(14 / 47 * 100%);
  left: 50%;
  z-index: 2;
  width: calc(125 / 393 * 100cqw);
  height: calc(19 / 47 * 100%);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0b0b0b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.canvas-phone__screen {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 4%;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.canvas-phone__bezel-bottom {
  flex: 0 0 9%;
  background: #f5f5f5;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.canvas-phone__viewport {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--canvas-phone-surface);
  container-type: size;
  container-name: canvas-phone-viewport;
  isolation: isolate;
}

.canvas-phone-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqi;
  padding: 2.2cqi 3.4cqi 1.8cqi;
  background: var(--canvas-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 2;
}

.canvas-phone-nav__logo {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

.canvas-phone-nav__logo img {
  display: block;
  width: auto;
  height: calc(16.25px * var(--canvas-phone-scale));
  object-fit: contain;
}

.canvas-phone-nav__menu {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--canvas-black);
  pointer-events: none;
}

.canvas-phone-nav__icon {
  display: block;
  width: calc(18px * var(--canvas-phone-scale));
  height: calc(18px * var(--canvas-phone-scale));
}

.canvas-phone__track {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}

.canvas-phone.is-playing .canvas-phone__track {
  pointer-events: none;
  user-select: none;
}

.canvas-phone.is-playing .canvas-phone-screen {
  pointer-events: none;
  user-select: none;
}

.canvas-phone__gesture {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.canvas-phone__gesture-dot {
  position: absolute;
  left: 84%;
  top: 90%;
  display: block;
  width: calc(34px * var(--canvas-phone-scale));
  height: calc(34px * var(--canvas-phone-scale));
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.1),
    0 10px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -0.5px 0 rgba(255, 255, 255, 0.12);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
  will-change: left, top, transform, opacity;
  transition: opacity 0.233s ease, transform 0.107s ease, box-shadow 0.107s ease, background 0.107s ease;
}

@supports (backdrop-filter: url(#ch-liquid-glass-lens)) {
  .canvas-phone__gesture-dot {
    backdrop-filter: blur(12px) saturate(170%) url(#ch-liquid-glass-lens);
    -webkit-backdrop-filter: blur(12px) saturate(170%) url(#ch-liquid-glass-lens);
  }
}

.canvas-phone__gesture-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 210deg at 50% 50%,
    rgba(255, 255, 255, 0.02) 0deg,
    rgba(255, 255, 255, 0.38) 52deg,
    rgba(255, 255, 255, 0.08) 120deg,
    rgba(255, 255, 255, 0.02) 180deg,
    rgba(255, 255, 255, 0.06) 255deg,
    rgba(255, 255, 255, 0.28) 315deg,
    rgba(255, 255, 255, 0.02) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.canvas-phone__gesture-dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 85% 55% at 50% 10%,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 45%,
    transparent 70%
  );
  pointer-events: none;
}

.canvas-phone.is-playing .canvas-phone__gesture-dot {
  opacity: 1;
}

.canvas-phone__gesture-dot.is-swiping {
  transform: translate(-50%, -50%) scale(0.92);
  background: rgba(255, 255, 255, 0.07);
}

.canvas-phone-screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  backface-visibility: hidden;
  will-change: transform;
}

.canvas-phone-screen.is-dismissing {
  z-index: 10 !important;
}

.canvas-phone-screen--intro {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--canvas-phone-surface);
  overflow: hidden;
}

.canvas-phone-screen__copy {
  flex: 0 0 auto;
  padding: 9% 8% 5%;
  margin-inline: calc(15px * var(--canvas-phone-scale));
  transform: translateY(calc(40px * var(--canvas-phone-scale)));
}

.canvas-phone-screen__copy p {
  margin: 0;
  font-family: var(--canvas-font-ui);
  font-size: clamp(calc(17px * var(--canvas-phone-scale)), 7.3cqw, calc(22px * var(--canvas-phone-scale)));
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  color: rgba(0, 0, 0, 0.88);
}

.canvas-phone-screen__accent {
  color: var(--canvas-blue);
  font-weight: 600;
}

.canvas-phone-screen__media {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.canvas-phone-screen__media img {
  width: 83%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  transform: translateY(calc(-30px * var(--canvas-phone-scale)));
}

/* Screen 2 — technology merge diagram */
.canvas-phone-screen--merge {
  --merge-icon-scale: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7% 6% 6%;
  background: var(--canvas-merge-bg);
  color: #fff;
  text-align: center;
}

.canvas-phone-merge__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
}

.canvas-phone-merge__headline,
.canvas-phone-merge__footer {
  margin: 0;
  font-family: var(--canvas-font-ui);
  font-size: clamp(calc(14px * var(--canvas-phone-scale)), 5.8cqw, calc(18px * var(--canvas-phone-scale)));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.7);
}

.canvas-phone-merge__headline {
  transform: translateY(0);
}

.canvas-phone-merge__cluster {
  position: relative;
  width: min(100%, 92%);
  aspect-ratio: 1;
  margin-top: 5%;
  transform: translateY(calc(35px * var(--canvas-phone-scale)));
  overflow: visible;
}

.canvas-phone-merge__orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  transform: translateY(calc(-30px * var(--canvas-phone-scale)));
}

.canvas-phone-merge__orbit circle {
  fill: none;
  stroke: var(--canvas-blue);
  stroke-width: calc(1.5px * var(--canvas-phone-scale));
  stroke-linecap: round;
  stroke-dasharray: 0 calc(5px * var(--canvas-phone-scale));
  vector-effect: non-scaling-stroke;
}

.canvas-phone-merge__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  width: 34%;
  z-index: 1;
}

.canvas-phone-merge__node--top {
  top: 0;
  left: 50%;
  transform: translate(-50%, 8%) translateY(calc(-30px * var(--canvas-phone-scale)));
}

.canvas-phone-merge__node--left {
  top: 34%;
  left: 0;
  transform: translate(8%, 0) translateY(calc(-30px * var(--canvas-phone-scale)));
}

.canvas-phone-merge__node--right {
  top: 34%;
  right: 0;
  transform: translate(-8%, 0) translateY(calc(-30px * var(--canvas-phone-scale)));
}

.canvas-phone-merge__node--bottom {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -8%) translateY(calc(-30px * var(--canvas-phone-scale)));
  overflow: visible;
}

.canvas-phone-merge__node--bottom .canvas-phone-merge__connector {
  transform: translateX(-50%) translateY(calc(-7px * var(--canvas-phone-scale)));
}

.canvas-phone-merge__icon-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(
    calc(66px * var(--canvas-phone-scale) * var(--merge-icon-scale)),
    calc(22cqw * var(--merge-icon-scale)),
    calc(85px * var(--canvas-phone-scale) * var(--merge-icon-scale))
  );
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--canvas-merge-bg);
  border: calc(1.5px * var(--canvas-phone-scale)) solid var(--canvas-blue);
  color: var(--canvas-blue);
}

.canvas-phone-merge__icon {
  display: block;
  flex: 0 0 auto;
  width: clamp(
    calc(53px * var(--canvas-phone-scale) * var(--merge-icon-scale)),
    calc(18.2cqw * var(--merge-icon-scale)),
    calc(66px * var(--canvas-phone-scale) * var(--merge-icon-scale))
  );
  height: clamp(
    calc(53px * var(--canvas-phone-scale) * var(--merge-icon-scale)),
    calc(18.2cqw * var(--merge-icon-scale)),
    calc(66px * var(--canvas-phone-scale) * var(--merge-icon-scale))
  );
  fill: none;
  stroke: var(--canvas-blue);
  stroke-width: calc(1.5px * var(--canvas-phone-scale));
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.canvas-phone-merge__icon :is(rect, path, circle, line, polyline, polygon) {
  vector-effect: non-scaling-stroke;
  stroke-width: calc(1.5px * var(--canvas-phone-scale));
}

.canvas-phone-merge__icon--ml {
  object-fit: contain;
  transform: scale(0.85);
}

.canvas-phone-merge__icon--ai {
  transform: scale(1.15);
}

.canvas-phone-merge__icon-text {
  fill: var(--canvas-blue);
  stroke: none;
  font-family: var(--canvas-font-ui);
  font-size: calc(4.6px * var(--canvas-phone-scale) * var(--merge-icon-scale));
  font-weight: 700;
  letter-spacing: 0.02em;
}

.canvas-phone-merge__label {
  font-family: var(--canvas-font-ui);
  font-size: clamp(calc(9px * var(--canvas-phone-scale)), 3.1cqw, calc(11px * var(--canvas-phone-scale)));
  font-weight: 500;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.6);
}

.canvas-phone-merge__cluster .canvas-phone-merge__label {
  position: relative;
  z-index: 2;
  background: var(--canvas-merge-bg);
  padding: 0.15em 0.4em;
}

.canvas-phone-merge__connector {
  --connector-copy-gap: calc(12px * var(--canvas-phone-scale));
  --connector-icon-gap: calc(10px * var(--canvas-phone-scale));
  position: absolute;
  top: calc(100% + var(--connector-copy-gap));
  left: 50%;
  transform: translateX(-50%);
  width: calc(1.5px * var(--canvas-phone-scale));
  height: clamp(calc(32px * var(--canvas-phone-scale)), 8.5cqh, calc(52px * var(--canvas-phone-scale)));
  background: linear-gradient(
    to bottom,
    var(--canvas-blue) 0,
    var(--canvas-blue) calc(100% - var(--connector-icon-gap)),
    transparent calc(100% - var(--connector-icon-gap)),
    transparent 100%
  );
}

.canvas-phone-merge__hero {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  padding: 2% 0 4%;
}

.canvas-phone-merge__hero-ring {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  flex: 0 0 auto;
  width: clamp(
    calc(88px * var(--canvas-phone-scale) * var(--merge-icon-scale)),
    calc(30cqw * var(--merge-icon-scale)),
    calc(112px * var(--canvas-phone-scale) * var(--merge-icon-scale))
  );
  height: clamp(
    calc(88px * var(--canvas-phone-scale) * var(--merge-icon-scale)),
    calc(30cqw * var(--merge-icon-scale)),
    calc(112px * var(--canvas-phone-scale) * var(--merge-icon-scale))
  );
  border-radius: 50%;
  background: transparent;
  border: calc(2px * var(--canvas-phone-scale)) solid var(--canvas-blue);
  color: var(--canvas-blue);
  transform: translateY(calc(6px * var(--canvas-phone-scale)));
}

.canvas-phone-merge__hero-icon {
  display: block;
  flex: 0 0 auto;
  width: clamp(
    calc(68px * var(--canvas-phone-scale) * var(--merge-icon-scale)),
    calc(23cqw * var(--merge-icon-scale)),
    calc(82px * var(--canvas-phone-scale) * var(--merge-icon-scale))
  );
  height: clamp(
    calc(68px * var(--canvas-phone-scale) * var(--merge-icon-scale)),
    calc(23cqw * var(--merge-icon-scale)),
    calc(82px * var(--canvas-phone-scale) * var(--merge-icon-scale))
  );
  object-fit: contain;
  transform: scale(0.7) translateY(calc(-4px * var(--canvas-phone-scale)));
  fill: none;
  stroke: currentColor;
  stroke-width: calc(1.4px * var(--canvas-phone-scale));
  stroke-linecap: round;
  stroke-linejoin: round;
}

.canvas-phone-merge__hero-label {
  margin-top: -0.35em;
  text-align: center;
  transform: translateY(calc(-15px * var(--canvas-phone-scale)));
}

.canvas-phone-merge__wordmark {
  padding: 0.12em 0.45em;
  font-family: var(--canvas-font-display);
  font-size: clamp(calc(9px * var(--canvas-phone-scale)), 3.2cqw, calc(12px * var(--canvas-phone-scale)));
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--canvas-blue);
  background: #fff;
}

.canvas-phone-merge__footer {
  flex: 0 0 auto;
  margin-top: auto;
  transform: translateY(calc(-20px * var(--canvas-phone-scale) + 2px));
}

/* Screen 3 — news feed */
.canvas-phone-screen--news {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--canvas-phone-surface);
  overflow-x: hidden;
  overflow-y: hidden;
}

.canvas-phone-news__feed {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 100%;
  gap: 0;
}

.canvas-phone-news__copy-zone {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  background: var(--canvas-phone-surface);
}

.canvas-phone-news__media {
  position: relative;
}

.canvas-phone-news__tags {
  position: absolute;
  top: 0;
  left: calc(8px * var(--canvas-phone-scale));
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: calc(3px * var(--canvas-phone-scale));
  max-width: calc(100% - calc(16px * var(--canvas-phone-scale)));
}

.canvas-phone-news__tag {
  font-family: var(--canvas-font-ui);
  font-size: clamp(calc(6px * var(--canvas-phone-scale)), 2.1cqw, calc(8px * var(--canvas-phone-scale)));
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--canvas-white);
  padding: calc(3px * var(--canvas-phone-scale)) calc(5px * var(--canvas-phone-scale));
}

.canvas-phone-news__tag--news {
  background: var(--canvas-red);
}

.canvas-phone-news__tag--partners {
  background: var(--canvas-black);
}

.canvas-phone-news__tag--press {
  background: var(--canvas-blue);
}

.canvas-phone-news__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.canvas-phone-news__media--bottom {
  margin-top: auto;
}

.canvas-phone-screen__copy--news {
  width: 100%;
  padding: 0 8%;
  margin-inline: calc(15px * var(--canvas-phone-scale));
  transform: none;
}

.canvas-phone-screen__copy--news p {
  text-align: left;
  font-size: clamp(
    calc(14.45px * var(--canvas-phone-scale)),
    6.2cqw,
    calc(18.7px * var(--canvas-phone-scale))
  );
}

@media (prefers-reduced-motion: reduce) {
  .canvas-gallery-reveal__frame,
  .canvas-logo-reveal__frame {
    clip-path: none;
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-type-section.cs-slide--scroll .cs-reveal,
  .canvas-color-section.cs-slide--scroll .cs-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .canvas-type-hero__track,
  .canvas-type-weight-stack__track {
    transform: none !important;
    transition: none;
  }

  .canvas-type-hero__line,
  .canvas-type-weight-stack__line {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .canvas-type-card__name-letter,
  .canvas-type-card__charset {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__photo {
    transform: scale(1.008);
    filter: none;
  }

  .canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__nav,
  .canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__headline-wrap,
  .canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__lede-wrap,
  .canvas-website-hero.canvas-mac-hero--js:not(.is-active) .canvas-website-hero__button-wrap {
    opacity: 1;
    transform: none;
  }
}