/* ============================================================
   MechaPaint - professional site (index2.html)
   Dark, restrained, technical.
   ============================================================ */

:root {
  --bg:        #0d1017;
  --bg-alt:    #12161f;
  --panel:     #171c27;
  --panel-2:   #1c2230;
  --line:      #2a3242;
  --text:      #e8ecf3;
  --text-mid:  #9aa5b8;
  --text-dim:  #6b7488;
  --accent:    #4f9cf7;
  --accent-2:  #7ee0a3;
  --warn:      #ffcf5c;
  --radius:    12px;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 9px 16px;
  background: #0a0d13;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--text-mid);
}

.topbar strong { color: var(--warn); font-weight: 700; }
.topbar s { opacity: 0.6; }

.topbar-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 4px;
  padding: 1px 8px;
}

.topbar-timer { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); }

/* ---------- nav ---------- */

/* THREE COLUMNS, NOT space-between, AND THAT IS THE WHOLE POINT (2026-09-10).
   The brand goes flush left, the links sit dead center of the PAGE, and the
   buttons go flush right. space-between centers the middle group between its
   two neighbours instead, so the links drifted left or right by half the
   difference in width between the logo and the button row, and every page
   with a different button count centered them somewhere else. 1fr auto 1fr
   makes the two outer columns equal whatever they hold, so the center is the
   center. This means the header must have EXACTLY THREE children: keep the
   buttons inside .nav-actions (see NAV_ACTIONS_WRAPPED in site.py). */
.nav {
  position: sticky;
  top: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px clamp(16px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  background: rgba(13, 16, 23, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 21px;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.3px;
}

.logo span { color: var(--accent); }
/* "Mecha" stays in the body color; only "Paint" takes the accent. Split into
   its own span so mobile.css can slot the logo mark between the two words. */
.logo .logo-pre { color: var(--text); }
.logo-mark { width: 48px; height: 48px; display: block; border-radius: 8px; object-fit: contain; }
.logo .logo-pre        { order: 1; }
.logo .logo-mark       { order: 2; }
.logo span:not(.logo-pre) { order: 3; }

.nav > .logo        { justify-self: start; }
.nav > .nav-links   { justify-self: center; }
.nav > .nav-actions { justify-self: end; }

.nav-links { display: flex; gap: clamp(14px, 2.5vw, 30px); }

.nav-links a {
  color: var(--text-mid);
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap;   /* never let a label break across two lines */
}

.nav-links a:hover { color: var(--text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 24px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

/* Buy. Wears the yellow-green the Download button used to. */
.btn-primary {
  background: #dfff3f;
  color: #0a1208;
  border: 1px solid rgba(223, 255, 63, 0.9);
}

.btn-primary:hover {
  background: #ecff72;
  border-color: #ecff72;
  transform: translateY(-1px);
}

/* Download. Now green. */
.btn-download {
  background: #3ddc84;
  color: #062012;
  border: 1px solid rgba(61, 220, 132, 0.9);
}

.btn-download:hover {
  background: #5ff0a0;
  border-color: #5ff0a0;
  transform: translateY(-1px);
}

/* Discord. Wears the blue the Buy button used to. */
.btn-discord {
  background: var(--accent);
  color: #0a1220;
}

.btn-discord:hover { background: #6cadf9; transform: translateY(-1px); }

/* An icon-only button: square-ish padding, no text metrics to fight. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 12px;
  padding-right: 12px;
}

.btn-icon .discord-mark { display: block; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-outline {
  border: 1px solid var(--line);
  color: var(--text);
  background: transparent;
}

.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-small { padding: 8px 18px; font-size: 14px; }
.btn-wide { width: 100%; padding: 14px 24px; font-size: 16px; }

/* ---------- hero ---------- */

.hero {
  padding: clamp(60px, 9vw, 130px) clamp(16px, 5vw, 64px) clamp(50px, 7vw, 100px);
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(79, 156, 247, 0.13), transparent),
    var(--bg);
}

.hero-inner { max-width: 860px; margin: 0 auto; text-align: center; }

.hero-shot {
  max-width: 1100px;
  margin: clamp(38px, 6vw, 68px) auto 0;
  text-align: center;
}

.hero-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 1919 / 930;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  background: var(--bg-alt);
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.hero-slide.is-active { opacity: 1; }

.hero-caption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-dim);
  transition: opacity 0.4s ease;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--accent);
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1.2px;
}

.hero-sub {
  margin: 24px auto 0;
  max-width: 680px;
  color: var(--text-mid);
  font-size: clamp(15.5px, 1.5vw, 18px);
}

.hero-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero-points {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 28px;
  list-style: none;
  margin-top: 30px;
}

.hero-points li {
  color: var(--text-dim);
  font-size: 13.5px;
  position: relative;
  padding-left: 18px;
}

.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
}

/* ---------- dark reef intro ---------- */

.reef-intro {
  position: relative;
  width: 95%;
  max-width: none;
  margin: 0 auto;
  overflow: hidden;
  background: #020403;
}

.reef-intro-media {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.reef-intro::after {
  content: "";
  position: absolute;
  inset: 34% 0 0;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  pointer-events: none;
}

.reef-intro-copy {
  position: absolute;
  left: clamp(18px, 4vw, 48px);
  right: clamp(18px, 4vw, 48px);
  bottom: clamp(18px, 4vw, 42px);
  z-index: 1;
  max-width: 880px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(215, 255, 70, 0.22);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.82);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
}

.reef-intro-copy h1,
.reef-intro-copy h2 {
  color: #dfff3f;
  font-size: clamp(20px, 3.15vw, 41px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.9px;
  white-space: nowrap;
}

.reef-intro-copy p {
  margin-top: 16px;
  max-width: 790px;
  color: #c9f86a;
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.62;
}

.human-artists-line {
  width: 100%;
  margin: 0 0 clamp(18px, 3vw, 34px);
  padding: 16px clamp(16px, 5vw, 64px);
  background: #000;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.76vw, 22px);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0;
}

.capabilities-heading {
  max-width: 1180px;
  margin: 0 auto clamp(30px, 5vw, 64px);
  padding: 0 clamp(16px, 5vw, 64px);
  color: var(--text);
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.9px;
  text-align: center;
}

/* ---------- photo painting feature ---------- */

.photo-paint-feature {
  padding: 0 clamp(16px, 5vw, 64px) clamp(46px, 6vw, 84px);
  background: var(--bg);
}

.photo-paint-feature + .photo-paint-feature {
  padding-top: clamp(8px, 2vw, 22px);
}

.photo-paint-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px);
  background: linear-gradient(135deg, rgba(28, 34, 48, 0.95), rgba(18, 22, 31, 0.95));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.photo-paint-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
  cursor: zoom-in;
}

.photo-paint-copy h2 {
  font-size: clamp(28px, 3.7vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.8px;
}

.photo-paint-copy p {
  margin-top: 24px;
  color: var(--text-mid);
  font-size: clamp(16px, 1.6vw, 18px);
  max-width: 620px;
  line-height: 1.68;
}

/* ---------- strip ---------- */

.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}

.strip-item {
  padding: 22px clamp(14px, 2.5vw, 34px);
  border-left: 1px solid var(--line);
}

.strip-item:first-child { border-left: none; }

.strip-item strong { display: block; font-size: 15.5px; margin-bottom: 2px; }
.strip-item span { color: var(--text-dim); font-size: 13.5px; }

/* ---------- sections ---------- */

.section {
  padding: clamp(56px, 8vw, 110px) clamp(16px, 5vw, 64px);
  max-width: 1200px;
  margin: 0 auto;
}

.section-alt {
  max-width: none;
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-alt > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

.section-head { max-width: 760px; margin-bottom: clamp(30px, 4vw, 54px); }

.section-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

.section-head h1,
.section-head h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
}

.section-sub { margin-top: 14px; color: var(--text-mid); font-size: 16.5px; }

/* ---------- pipeline steps ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 26px);
}

.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}

.step-num {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.step h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.step p { color: var(--text-mid); font-size: 14.5px; }

/* ---------- uv grid ---------- */

.uv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
}

.uv-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

.uv-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}

.photo-paint-img.uv-card-img {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.uv-card h4 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; padding: 18px 22px 0; }
.uv-card p { color: var(--text-mid); font-size: 14px; padding: 0 22px 22px; }

.uv-footnote {
  margin-top: 26px;
  color: var(--text-dim);
  font-size: 14px;
  font-style: italic;
  max-width: 760px;
}

/* ---------- rescue ---------- */

.rescue-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2vw, 24px);
}

.rescue-item {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}

.rescue-item h4 {
  font-size: 17.5px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--accent-2);
}

.rescue-item p { color: var(--text-mid); font-size: 14.5px; }

/* ---------- toolset ---------- */

.tool-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}

.tool-col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
}

.tool-col h4 {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.tool-col ul { list-style: none; display: grid; gap: 10px; }

.tool-col li {
  color: var(--text-mid);
  font-size: 13.5px;
  padding-left: 16px;
  position: relative;
}

.tool-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--line);
}

/* ---------- videos (dark restyle of gallery.js classes) ---------- */

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 24px);
}

.video-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #000;
  border-bottom: 1px solid var(--line);
}

.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }
.video-thumb:hover img { opacity: 1; }
.video-thumb iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-live { cursor: default; }

.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(13, 16, 23, 0.75);
  border: 2px solid var(--accent);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}

.video-play::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--accent);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.video-thumb:hover .video-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: rgba(13, 16, 23, 0.9);
}

.video-body { padding: 14px 16px 16px; }

.video-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 8px;
  margin-bottom: 8px;
}

.video-body h4 { font-size: 15.5px; font-weight: 700; line-height: 1.3; margin-bottom: 6px; }
.video-body p { color: var(--text-mid); font-size: 13.5px; margin-bottom: 8px; }

.video-yt-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.video-yt-link:hover { text-decoration: underline; }

.videos-more { text-align: center; margin-top: 28px; }

.video-empty {
  grid-column: 1 / -1;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 46px 20px;
  color: var(--text-dim);
  font-size: 15px;
}

/* ---------- specs ---------- */

.spec-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}

.spec-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-top: 1px solid var(--line);
}

.spec-row:first-child { border-top: none; }

.spec-row > div { padding: 15px 20px; font-size: 14.5px; }

.spec-row > div:first-child {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  background: var(--bg-alt);
  border-right: 1px solid var(--line);
}

.spec-row > div:last-child { color: var(--text-mid); }

/* ---------- pricing ---------- */

.price-panel {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(26px, 4vw, 50px);
  align-items: center;
}

.price-info h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.6px;
  margin-bottom: 12px;
}

.price-info p { color: var(--text-mid); font-size: 15.5px; }

.price-points { list-style: none; margin-top: 18px; display: grid; gap: 8px; }

.price-points li {
  color: var(--text-mid);
  font-size: 14.5px;
  padding-left: 20px;
  position: relative;
}

.price-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--accent-2);
  border-bottom: 2px solid var(--accent-2);
  transform: rotate(-45deg);
}

.price-buy {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 30px 28px;
  text-align: center;
}

.price-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: 4px;
  display: inline-block;
  padding: 2px 10px;
  margin-bottom: 18px;
}

.price-figures {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}

.price-was {
  font-size: 20px;
  color: var(--text-dim);
  text-decoration: line-through;
}

.price-now {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--text);
  line-height: 1;
}

.price-count {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-dim);
}

.price-count span { font-family: var(--font-mono); color: var(--warn); }

/* ---------- final ---------- */

.final {
  text-align: center;
  padding: clamp(56px, 8vw, 110px) 20px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 70% at 50% 120%, rgba(79, 156, 247, 0.12), transparent),
    var(--bg);
}

.final h2 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.6px;
  max-width: 760px;
  margin: 0 auto 28px;
}

/* ---------- footer ---------- */

.footer {
  text-align: center;
  padding: 30px 16px 40px;
  color: var(--text-dim);
  font-size: 13.5px;
  border-top: 1px solid var(--line);
}

.footer .logo { justify-content: center; display: flex; margin-bottom: 6px; font-size: 17px; }
.footer a { color: var(--text-mid); }

/* ---------- reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.shown { opacity: 1; transform: translateY(0); }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .steps, .uv-grid, .video-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-cols { grid-template-columns: repeat(2, 1fr); }
  .photo-paint-inner { grid-template-columns: 1fr; }
  .photo-paint-img { max-width: 720px; margin: 0 auto; }
  .price-panel { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .strip { grid-template-columns: 1fr; }
  .strip-item { border-left: none; border-top: 1px solid var(--line); }
  .strip-item:first-child { border-top: none; }
}

@media (max-width: 620px) {
  .steps, .uv-grid, .video-grid, .tool-cols, .rescue-grid { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; }
  .spec-row > div:first-child { border-right: none; border-bottom: 1px solid var(--line); }
  .topbar-timer { display: none; }
  .reef-intro {
    width: 100%;
    margin: 0;
  }
  .reef-intro::after { display: none; }
  .reef-intro-copy {
    position: static;
    max-width: none;
    margin: 0;
    padding: 16px;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
  }
  .reef-intro-copy h1,
.reef-intro-copy h2 {
    font-size: clamp(24px, 7.2vw, 34px);
    white-space: normal;
  }
  .reef-intro-copy p {
    font-size: 13.5px;
    line-height: 1.48;
  }
  .human-artists-line {
    margin-bottom: 24px;
    padding: 12px 14px;
    font-size: 13px;
  }
  .capabilities-heading {
    margin-bottom: 28px;
    font-size: clamp(28px, 8vw, 38px);
  }
  .photo-paint-feature {
    padding: 0 14px 42px;
  }
  .photo-paint-inner {
    gap: 20px;
    padding: 14px;
  }
  .photo-paint-img {
    max-width: none;
  }
  .photo-paint-copy h2 {
    font-size: clamp(28px, 9vw, 40px);
  }
  .photo-paint-copy p {
    font-size: 15px;
    line-height: 1.55;
  }
}