/* Illustration component. Palette comes from site.css; effects stay local. */
.mobile-illustration {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.mobile-illustration .stop-light {
  stop-color: var(--color-text);
}
.mobile-illustration .stop-blue {
  stop-color: var(--color-secondary);
}
.mobile-illustration .stop-orange {
  stop-color: var(--color-primary);
}
.mobile-illustration .stop-background {
  stop-color: var(--color-background-1);
}
.mobile-illustration .stop-black {
  stop-color: #020609;
}
.mobile-illustration .floor-glow {
  fill: var(--color-secondary);
  opacity: 0.28;
}
.mobile-illustration .device-glow {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 10;
  opacity: 0.55;
}
.mobile-illustration .device-depth,
.mobile-illustration .stand,
.mobile-illustration .chin {
  fill: url(#mobile-depth);
  stroke: url(#mobile-edge);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.mobile-illustration .device-face {
  fill: url(#mobile-glass);
  stroke: url(#mobile-edge);
  stroke-width: 2.5;
}
.mobile-illustration .rim-detail {
  fill: none;
  stroke: var(--color-text);
  stroke-opacity: 0.65;
  stroke-width: 1.4;
}
.mobile-illustration .divider,
.mobile-illustration .home-indicator {
  fill: none;
  stroke: var(--color-text);
  stroke-opacity: 0.25;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.mobile-illustration .browser-dots {
  fill: var(--color-text);
}
.mobile-illustration .picture {
  fill: url(#mobile-image);
  stroke: url(#mobile-orange);
  stroke-width: 1.8;
}
.mobile-illustration .content-bar {
  fill: url(#mobile-content);
  stroke: var(--color-text);
  stroke-width: 0.65;
  stroke-opacity: 0.4;
}
.mobile-illustration .content-tile {
  fill: url(#mobile-image);
  stroke: var(--color-text);
  stroke-opacity: 0.45;
  stroke-width: 1.4;
}
.mobile-illustration .mountain {
  fill: none;
  stroke: url(#mobile-orange);
  stroke-width: 2.3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mobile-illustration .distant {
  opacity: 0.55;
}
.mobile-illustration .sun {
  fill: var(--color-primary);
  fill-opacity: 0.25;
  stroke: url(#mobile-orange);
  stroke-width: 1.8;
}
.mobile-illustration .phone-action {
  fill: var(--color-primary);
  fill-opacity: 0.8;
  stroke: url(#mobile-orange);
  stroke-width: 1.6;
}

/* Shared feature illustration treatments. Effects are component-local. */
.feature-illustration {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.feature-illustration .panel,
.feature-illustration .notice,
.feature-illustration .plus-disc {
  fill: var(--icon-surface);
  stroke: var(--icon-edge);
  stroke-width: 4;
  filter: drop-shadow(0 0 9px rgb(45 145 237 / 38%));
}
.feature-illustration .rule {
  fill: none;
  stroke: var(--color-secondary);
  stroke-opacity: 0.55;
  stroke-width: 2;
}
.feature-illustration .dot {
  fill: var(--color-text);
}
.feature-illustration .bar {
  fill: var(--icon-bar);
  stroke: var(--color-text);
  stroke-opacity: 0.25;
  stroke-width: 1;
}
.feature-illustration .picture,
.feature-illustration .field {
  fill: var(--icon-surface);
  stroke: var(--icon-edge);
  stroke-opacity: 0.6;
  stroke-width: 2;
}
.feature-illustration .orange-line,
.feature-illustration .flow {
  fill: none;
  stroke: var(--icon-orange);
  stroke-width: 4;
  filter: drop-shadow(0 0 5px rgb(240 132 65 / 30%));
  stroke-linejoin: round;
  stroke-linecap: round;
}
.feature-illustration .action {
  fill: var(--icon-orange);
  stroke: var(--color-primary);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 7px rgb(240 132 65 / 30%));
}
.feature-illustration .wire {
  fill: none;
  stroke: var(--color-text);
  stroke-opacity: 0.45;
  stroke-width: 1.5;
}
.feature-illustration .blueprint {
  fill: none;
  stroke: var(--color-text);
  stroke-opacity: 0.13;
  stroke-width: 1;
}
.feature-illustration .sky {
  fill: var(--icon-sky);
}
.feature-illustration .mountain-back {
  fill: #375777;
}
.feature-illustration .mountain-front {
  fill: #172e49;
}
.feature-illustration .mountain-light {
  fill: var(--color-primary);
}
.feature-illustration .mountain-near {
  fill: #0c1c2e;
}
.feature-illustration .seam {
  stroke: var(--color-primary);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px #f08441);
}
.feature-illustration .bubble {
  fill: #081421;
}
.feature-illustration .notification-title {
  fill: var(--color-text);
  font:
    600 24px Arial,
    sans-serif;
}
.feature-illustration .notification-copy {
  fill: var(--color-text);
  opacity: 0.75;
  font:
    22px Arial,
    sans-serif;
}
.feature-illustration .plus {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 4;
  stroke-linecap: round;
}

/* Device bevels and reflections add depth without changing the silhouettes. */
.feature-illustration .device-rim {
  fill: var(--color-secondary);
  fill-opacity: 0.6;
  stroke: var(--icon-edge);
  stroke-width: 3;
}

.feature-illustration .glass-highlight {
  fill: none;
  stroke: var(--icon-edge);
  stroke-width: 1;
  opacity: 0.5;
}

.mobile-illustration .device-face {
  filter: drop-shadow(0 0 6px rgb(45 145 237 / 22%));
}