/* ================================================
   Tutorial Page — Modern Wolf Pottery
   ================================================ */

/* ── Hero ────────────────────────────────────── */

/* "Studio" treatment, matching the shrinkage calculator: a charcoal band with
   a clay-texture overlay that runs to the very top behind the fixed nav. */

.tutorial-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(72px + var(--space-2xl));
  padding-bottom: var(--space-xl);
  text-align: center;
  background: var(--color-charcoal);
}

.tutorial-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/clay-texture.jpg') center / cover;
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.tutorial-hero__content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.tutorial-hero__content .section-label {
  display: block;
  color: var(--color-terracotta-light); /* terracotta is too dark on charcoal */
  margin-bottom: var(--space-xs);
}

.tutorial-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400;
  color: var(--color-warm-white);
  line-height: 1;
  margin: 0 0 var(--space-sm);
}

.tutorial-hero__title em {
  font-style: italic;
  color: var(--color-terracotta-light);
}

.tutorial-hero__product {
  font-size: 1rem;
  color: var(--color-light-gray);
  font-weight: 300;
  max-width: 500px;
  margin: 0 auto;
}

.tutorial-hero__product a {
  color: var(--color-terracotta-light);
  text-decoration: none;
  transition: color 0.2s;
}

.tutorial-hero__product a:hover {
  color: var(--color-terracotta);
}

/* ── Gate (locked) ───────────────────────────── */

.tutorial-gate {
  display: flex;
  justify-content: center;
  padding: var(--space-2xl) var(--space-md);
}

.tutorial-gate__inner {
  max-width: 520px;
  text-align: center;
}

.tutorial-gate__icon {
  color: var(--color-terracotta);
  margin-bottom: var(--space-sm);
}

.tutorial-gate__inner h2 {
  font-family: 'VolumeTC-Rustic', cursive;
  font-size: 1.6rem;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-sm);
}

.tutorial-gate__inner p {
  color: var(--color-warm-gray);
  line-height: 1.7;
  margin: 0 0 var(--space-sm);
}

.tutorial-gate__note {
  font-size: 0.875rem;
}

.tutorial-gate__note a {
  color: var(--color-terracotta);
  text-decoration: underline;
}

/* Same intro image the unlocked page shows beside the intro copy — surfaced here
   so non-purchasers get a look at the finished piece. */
.tutorial-gate__media {
  margin: var(--space-md) 0 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tutorial-gate__media img {
  width: 100%;
  height: auto;
}

.tutorial-gate__btn {
  margin-top: var(--space-sm);
}

.tutorial-gate__divider {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: var(--space-md) 0;
  color: var(--color-light-gray);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tutorial-gate__divider::before,
.tutorial-gate__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-sand);
}

.tutorial-gate__code-form label {
  display: block;
  font-size: 0.875rem;
  color: var(--color-warm-gray);
  margin-bottom: 0.5em;
}

.tutorial-gate__code-row {
  display: flex;
  gap: 0.5em;
  max-width: 360px;
  margin: 0 auto;
}

.tutorial-gate__code-row input {
  flex: 1;
  padding: 0.6em 1em;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-charcoal);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}

.tutorial-gate__code-row input:focus {
  border-color: var(--color-terracotta);
}

.tutorial-gate__code-row button {
  white-space: nowrap;
}

.tutorial-gate__error {
  color: #c0392b;
  font-size: 0.85rem;
  margin-top: 0.5em;
}

/* ── Content wrapper ─────────────────────────── */

.tutorial-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-2xl);
}

/* ── Intro ───────────────────────────────────── */

.tutorial-intro {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--space-lg);
  padding: var(--space-xl) 0 var(--space-md);
}

/* Featured image sits to the right of the copy: 2/3 text, 1/3 image. */
.tutorial-intro--has-image {
  grid-template-columns: 2fr 1fr;
}

.tutorial-intro__media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tutorial-intro__media img {
  display: block;
  width: 100%;
  height: auto;
}

.tutorial-intro__text {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-warm-gray);
}

.tutorial-intro__text p {
  margin-bottom: 0.75em;
}

.tutorial-intro__text p:last-child {
  margin-bottom: 0;
}

.tutorial-intro__text ul,
.tutorial-intro__text ol {
  padding-left: 1.5rem;
  margin-bottom: 0.75em;
}

.tutorial-intro__text li {
  margin-bottom: 0.25em;
}

@media (max-width: 768px) {
  .tutorial-intro--has-image {
    grid-template-columns: 1fr;
  }

  .tutorial-intro__media {
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  .tutorial-hero {
    padding-top: calc(72px + var(--space-xl));
    padding-bottom: var(--space-lg);
  }
}

/* ── Tool band (full-width, below intro text) ── */

.tutorial-tool-band {
  padding: var(--space-md) 0 var(--space-lg);
  border-bottom: 1px solid var(--color-sand);
}

/* ── The template tool leads the page and overlaps up into the hero ─────────
   Same move as the shrinkage calculator: the hero grows an extra 90px of bottom
   padding and the content column is pulled back up over it, so the leading card
   floats across the seam. Scoped to --tool-first, which is only set when there
   *is* a template tool — otherwise the leading band is intro copy, and pulling
   body text up into the charcoal reads as a mistake rather than a layered card. */

.tutorial-page--tool-first .tutorial-hero {
  padding-bottom: calc(var(--space-xl) + 90px);
}

.tutorial-page--tool-first .tutorial-content {
  position: relative;
  z-index: 3;
  margin-top: -90px;
}

/* No top padding, or it eats into the overlap. The band keeps its bottom border —
   that divider sits well below the hero and still separates the tool from the
   intro copy underneath. */
.tutorial-page--tool-first .tutorial-content > .tutorial-tool-band:first-child {
  padding-top: 0;
}

/* Lift it off the hero the way the calculator's .mwp-card does. The band is a
   bare wrapper, so the treatment goes on the card inside it. */
.tutorial-page--tool-first .tutorial-content > .tutorial-tool-band:first-child .mwp-tut-tool {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-warm-white);
  box-shadow:
    0 2px 4px rgba(46, 42, 38, 0.06),
    0 18px 40px -10px rgba(46, 42, 38, 0.22),
    0 48px 80px -32px rgba(46, 42, 38, 0.28);
}

/* Shallower overlap on small screens, same as the calculator. Has to live below
   the rules above, not up with the other 640px styles — it's the same specificity,
   so ordering is the only thing deciding it. */
@media (max-width: 640px) {
  .tutorial-page--tool-first .tutorial-hero {
    padding-bottom: calc(var(--space-lg) + 70px);
  }

  .tutorial-page--tool-first .tutorial-content {
    margin-top: -70px;
  }

  .tutorial-page--tool-first .tutorial-content > .tutorial-tool-band:first-child .mwp-tut-tool {
    border-radius: var(--radius-md);
  }
}

/* ── Template tool ───────────────────────────── */

.mwp-tut-tool {
  background: var(--color-warm-white);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.mwp-tut-tool__head .section-label {
  display: block;
  margin-bottom: 0.35em;
}

.mwp-tut-tool__intro {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-warm-gray);
  margin: 0 0 var(--space-sm);
}

.mwp-tut-tool__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: 0.4em;
}

.mwp-tut-tool__select {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.9rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--color-charcoal);
  margin-bottom: var(--space-sm);
}

.mwp-tut-tool__preview {
  position: relative;
  width: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  margin-bottom: 0.5em;
}

.mwp-tut-tool__img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%; /* stretch SVG to the exact w/h so aspect changes show */
  pointer-events: none;
}

/* Wet = the shape you build, solid and prominent */
.mwp-tut-tool__img--wet {
  z-index: 1;
}

/* Finished = same shape scaled to fired size, faded on top */
.mwp-tut-tool__img--ghost {
  z-index: 2;
  opacity: 0.4;
}

.mwp-tut-tool__legend {
  display: flex;
  gap: var(--space-md);
  font-size: 0.72rem;
  color: var(--color-warm-gray);
  margin-bottom: var(--space-sm);
}

.mwp-tut-tool__swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  vertical-align: middle;
  margin-right: 3px;
}

.mwp-tut-tool__swatch--wet {
  border: 1.5px solid var(--color-charcoal);
  background: #fff;
}

.mwp-tut-tool__swatch--fired {
  border: 1.5px solid var(--color-charcoal);
  background: #fff;
  opacity: 0.4;
}

.mwp-tut-tool__shrink {
  margin-bottom: var(--space-sm);
}

.mwp-tut-tool__shrink input[type="range"] {
  width: 100%;
  accent-color: var(--color-terracotta);
}

/* ── Resizable templates: width/height + aspect lock ── */

.mwp-tut-tool__resize {
  margin-bottom: var(--space-sm);
}

.mwp-tut-tool__dims {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.mwp-tut-tool__dim {
  flex: 1 1 0;
  min-width: 0;
}

.mwp-tut-tool__dim label {
  display: block;
  font-size: 0.72rem;
  color: var(--color-warm-gray);
  margin-bottom: 0.3em;
}

.mwp-tut-tool__dim input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.9rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--color-charcoal);
}

.mwp-tut-tool__lock {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 1px;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--color-warm-gray);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mwp-tut-tool__lock:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.mwp-tut-tool__lock.is-locked {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: #fff;
}

/* Show the closed padlock when locked, the open one when unlocked. */
.mwp-tut-tool__lock .mwp-tut-tool__lock-open { display: none; }
.mwp-tut-tool__lock .mwp-tut-tool__lock-closed { display: block; }
.mwp-tut-tool__lock:not(.is-locked) .mwp-tut-tool__lock-open { display: block; }
.mwp-tut-tool__lock:not(.is-locked) .mwp-tut-tool__lock-closed { display: none; }

.mwp-tut-tool__reset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 1px;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  background: #fff;
  color: var(--color-warm-gray);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mwp-tut-tool__reset:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.mwp-tut-tool__dimnote {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-warm-gray);
  margin: 0.5em 0 0;
  transition: color 0.2s ease;
}

.mwp-tut-tool__dimnote.is-maxed {
  color: #A0593C;
  font-weight: 600;
}

/* Sage tint borrowed from the shrinkage calculator's guidance callout, so the
   build-size readout reads as an answer rather than another neutral panel. */
.mwp-tut-tool__readout {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #414A38;
  background: var(--color-sage-light);
  border-radius: var(--radius-sm, 6px);
  padding: 8px 10px;
  margin-bottom: var(--space-sm);
}

/* Hole sizes for the current template. Built in tutorial-template.js by measuring
   the artwork, so it's absent for silhouettes with nothing to cut out. Matches the
   walls box, which is the other measured-readout panel in this column. */
.mwp-tut-tool__cuts {
  padding: 8px 10px;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-warm-white, #fdfaf7);
}

.mwp-tut-tool__cuts[hidden] {
  display: none;
}

.mwp-tut-tool__cuts-head {
  display: block;
  margin-bottom: 4px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-warm-gray);
}

.mwp-tut-tool__cuts table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-charcoal);
}

.mwp-tut-tool__cuts th {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-warm-gray);
}

.mwp-tut-tool__cuts th,
.mwp-tut-tool__cuts td {
  padding: 4px 6px 4px 0;
  text-align: left;
  vertical-align: baseline;
  border-bottom: 1px solid var(--color-sand);
}

.mwp-tut-tool__cuts tr:last-child td {
  border-bottom: none;
  padding-bottom: 0;
}

/* The wet figure is the one you cut to, so it carries the accent — clay, matching
   the .wet column on the printed sheet. */
.mwp-tut-tool__cuts td strong {
  color: var(--color-clay, #A0593C);
}

/* mm equivalent — secondary to the inch figure it follows, but must not wrap
   away from it, since it's the number matched against a cutter set. */
.mwp-tut-cuts__mm {
  font-weight: 400;
  color: var(--color-warm-gray);
  white-space: nowrap;
}

/* Sits above the walls box (toggled with it in tutorial-template.js) to say what
   these lengths are actually for — building the piece up off its back wall. */
.mwp-tut-tool__walls-label {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-charcoal);
  margin: 0 0 6px;
}

.mwp-tut-tool__walls-label[hidden] {
  display: none;
}

.mwp-tut-tool__walls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-warm-white, #fdfaf7);
}

.mwp-tut-tool__walls[hidden] {
  display: none;
}

.mwp-tut-tool__walls-head {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-warm-gray);
}

.mwp-tut-tool__wall {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-charcoal);
}

.mwp-tut-tool__wall[hidden] {
  display: none;
}

.mwp-tut-tool__wall strong {
  color: var(--color-clay);
}

.mwp-tut-tool__wall--base strong {
  color: var(--color-warm-gray);
}

.mwp-tut-tool__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: 0;
}

.mwp-tut-tool__actions .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.mwp-tut-tool__note {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--color-warm-gray);
  margin: 0.6em 0 0;
}

/* ── Horizontal desktop layout (≥769px) ──────── */

@media (min-width: 769px) {
  .mwp-tut-tool--horizontal {
    display: grid;
    grid-template-columns: minmax(300px, 44%) 1fr;
    grid-template-areas:
      "head     head"
      "visual   controls";
    gap: var(--space-md) var(--space-lg);
    align-items: start;
    padding: var(--space-lg);
  }

  .mwp-tut-tool--horizontal .mwp-tut-tool__head {
    grid-area: head;
    min-width: 0;
  }

  .mwp-tut-tool--horizontal .mwp-tut-tool__intro {
    max-width: 60ch;
  }

  .mwp-tut-tool--horizontal .mwp-tut-tool__visual {
    grid-area: visual;
    min-width: 0;
  }

  .mwp-tut-tool--horizontal .mwp-tut-tool__preview {
    min-height: 360px;
  }

  .mwp-tut-tool--horizontal .mwp-tut-tool__controls {
    grid-area: controls;
    min-width: 0;
  }

  /* Buttons sit side-by-side on desktop */
  .mwp-tut-tool--horizontal .mwp-tut-tool__actions {
    flex-direction: row;
  }

  .mwp-tut-tool--horizontal .mwp-tut-tool__actions .btn {
    flex: 1 1 0;
    width: auto;
  }
}

/* ── Materials ───────────────────────────────── */

.tutorial-materials {
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-sand);
}

.tutorial-section-title {
  font-family: 'VolumeTC-Rustic', cursive;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-sm);
}

/* Tools grid

   Flex with fixed-width tiles rather than the auto-fill grid this originally was.
   Same tile size either way, but auto-fill stretches the last row's tiles to fill
   the track when the tool count doesn't divide evenly, so a tutorial with five
   tools got a different-sized fifth tile than one with six. */

.tutorial-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.tutorial-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  width: 116px;
  text-align: center;
}

.tutorial-tool img {
  position: absolute;
  inset: 16%;
  width: calc(100% - 32%);
  height: calc(100% - 32%);
  object-fit: contain;
}

.tutorial-tool__img-wrap,
.tutorial-tool__placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--color-cream);
}

.tutorial-tool__img-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-sand);
}

.tutorial-tool__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-light-gray);
}

.tutorial-tool__placeholder svg {
  width: 40%;
  height: 40%;
}

.tutorial-tool span {
  font-size: 0.75rem;
  color: var(--color-warm-gray);
  line-height: 1.3;
}

/* Enough to hold three per row on a phone. At the full 116px a tutorial with
   eight tools drops to two columns and the checklist eats the whole screen
   before you reach the template tool. Has to sit below the rules above rather
   than with the other 640px styles — same specificity, so order decides. */
@media (max-width: 640px) {
  .tutorial-tool {
    width: 96px;
  }

  .tutorial-tools {
    gap: var(--space-xs);
  }
}

.tutorial-materials__list {
  color: var(--color-warm-gray);
  line-height: 1.8;
}

.tutorial-materials__list p {
  margin-bottom: 0.75em;
}

.tutorial-materials__list p:last-child {
  margin-bottom: 0;
}

.tutorial-materials__list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tutorial-materials__list li {
  position: relative;
  padding-left: 1.4em;
}

.tutorial-materials__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-terracotta);
}

/* ── Progress dots (vertical, right side) ────── */

.tutorial-progress {
  position: fixed;
  right: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.tutorial-progress--visible {
  opacity: 1;
  pointer-events: auto;
}

.tutorial-progress__dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-sand);
  background: var(--color-warm-white);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}

.tutorial-progress__dot:hover {
  border-color: var(--color-terracotta-light);
  transform: scale(1.3);
}

.tutorial-progress__dot.is-done {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
}

.tutorial-progress__dot.is-active {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  transform: scale(1.4);
  box-shadow: 0 0 0 3px rgba(196, 112, 75, 0.2);
}

.tutorial-progress__dot-num {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  font-family: 'VolumeTCSans-RusticSolid', sans-serif;
  font-size: 0.65rem;
  color: var(--color-warm-gray);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.tutorial-progress__dot:hover .tutorial-progress__dot-num,
.tutorial-progress__dot.is-active .tutorial-progress__dot-num {
  opacity: 1;
}

.tutorial-progress__finish {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-terracotta);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  position: relative;
}

.tutorial-progress__finish svg {
  width: 20px;
  height: 20px;
}

.tutorial-progress__finish.is-visible {
  opacity: 1;
  transform: scale(1.4);
  filter: drop-shadow(0 0 4px rgba(196, 112, 75, 0.3));
  pointer-events: auto;
}

.tutorial-progress__finish-label {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  font-family: 'VolumeTCSans-RusticSolid', sans-serif;
  font-size: 0.65rem;
  color: var(--color-warm-gray);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.tutorial-progress__finish:hover .tutorial-progress__finish-label,
.tutorial-progress__finish.is-visible .tutorial-progress__finish-label:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .tutorial-progress {
    display: none;
  }
}

/* ── Step arrows (top-right / bottom-right) ─── */

.tutorial-stepnav {
  position: fixed;
  right: var(--space-md);
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--color-sand);
  border-radius: 50%;
  background: var(--color-warm-white);
  color: var(--color-terracotta);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(46, 42, 38, 0.1);
  transition: opacity 0.3s, background 0.25s, border-color 0.25s, transform 0.25s;
}

/* Cleared below the fixed .nav so the up arrow isn't buried under it. */
.tutorial-stepnav--up {
  top: 96px;
}

.tutorial-stepnav--down {
  bottom: var(--space-md);
}

.tutorial-stepnav svg {
  width: 20px;
  height: 20px;
}

/* Visible only while the steps section is on screen, and only when there is
   somewhere to go — the end arrows fade out rather than moving, so the pair
   never shifts position. */
.tutorial-stepnav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.tutorial-stepnav:hover {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: var(--color-warm-white);
  transform: scale(1.08);
}

.tutorial-stepnav:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 3px;
}

/* ── Steps (full-page slider) ───────────────── */

.tutorial-steps {
  padding-top: 0;
  position: relative;
}

/* No CSS scroll-snap here on purpose. Native snap animates on a fixed, fast,
   UA-defined curve with no way to slow it, and that hard yank at each boundary
   felt jarring. The magnetism is done in JS instead (see single-tutorial.php):
   scrolling stays fully native, and we ease onto the nearest step only once the
   user has come to rest near one. */

.tutorial-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
  /* svh so mobile browser chrome can't push the step past the scrollport. */
  min-height: 100vh;
  min-height: 100svh;
  /* Full-bleed out of .tutorial-content (max-width 1200px + --space-md gutters)
     so the alternating bands run edge to edge, while the grid inside stays on
     the same 1152px content column as the rest of the page. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: var(--space-xl) max(var(--space-md), calc(50vw - 576px));
}

/* Alternating bands, no divider between them — the band change is the seam.

   Deliberately NOT --color-warm-white / --color-cream. Those are the site-wide
   section tokens and are fine for a band you scroll past in a second, but a step
   is min-height:100vh, so here a single band fills the entire screen with nothing
   else in frame to reference it against. At that size --color-cream reads as grey
   rather than as warm off-white. These two are the same relationship, lifted:
   the step delta (5,7,11) is close to the tokens' (7,9,12), so the seam between
   bands still reads, but neither band is dark enough to look like a wash.
   Local to tutorials — don't promote these into the token file. */
.tutorial-step:nth-child(odd) {
  background: #FFFDFC;
}

.tutorial-step:nth-child(even) {
  background: #FAF6F1;
}

.tutorial-step--flip .tutorial-step__media {
  order: 2;
}

.tutorial-step--flip .tutorial-step__body {
  order: 1;
}

/* Media */

.tutorial-step__media {
  position: relative;
  border-radius: var(--radius-lg);
  /* Placeholder colour shown before the lazy video paints its first frame.
     Lifted lighter than --color-cream so it doesn't sit as a grey rectangle in
     the middle of each step. */
  background: #F8F4F0;
  aspect-ratio: 4 / 3;
  max-height: 65vh;
  /* NB: no overflow:hidden — the blob below has to escape this box. The
     rounding moved onto the media children instead. */
}

/* Organic shape peeking out from behind the media. Cycles the same four
   colours the homepage service cards use (terracotta / teal / sage / charcoal).
   The media itself covers the middle of it, so only the edges show — which is
   what makes it read as "tucked behind" rather than a border. */
.tutorial-step__media::before {
  content: '';
  position: absolute;
  z-index: 0;
  opacity: 0.13;
  pointer-events: none;
  background: var(--color-terracotta);
  /* Lopsided radii on both axes are what make it organic rather than an
     ellipse; each variant below gets its own so no two steps repeat. */
  border-radius: 58% 42% 38% 62% / 45% 55% 45% 55%;

  /* Per-variant knobs. --blob-out is how far the shape escapes on the side
     facing AWAY from the text; --blob-in is positive, holding the shape inside
     the media on the side that faces the copy so it can never crowd it. The
     rotations are kept small for the same reason — a big angle swings the inner
     edge back out past --blob-in.

     Keep all four values small. These colours are low-chroma, so at 13% they
     read as grey rather than as a tint — a big shape stops looking like an
     accent and starts looking like haze over the step. It has to stay a sliver. */
  --blob-out: -12%;
  --blob-in: 5%;
  --blob-top: -9%;
  --blob-bottom: -7%;

  top: var(--blob-top);
  bottom: var(--blob-bottom);
  /* Media is the left column by default, so the shape may only grow leftward. */
  left: var(--blob-out);
  right: var(--blob-in);
  transform: rotate(-4deg);
}

/* Flipped steps swap the columns, so the "outward" side swaps with them. */
.tutorial-step--flip .tutorial-step__media::before {
  left: var(--blob-in);
  right: var(--blob-out);
}

.tutorial-step:nth-child(4n + 2) .tutorial-step__media::before {
  background: var(--color-teal);
  border-radius: 41% 59% 63% 37% / 52% 38% 62% 48%;
  --blob-out: -9%;
  --blob-top: -6%;
  --blob-bottom: -11%;
  transform: rotate(5deg);
}

.tutorial-step:nth-child(4n + 3) .tutorial-step__media::before {
  background: var(--color-sage);
  border-radius: 66% 34% 45% 55% / 38% 61% 39% 62%;
  --blob-out: -14%;
  --blob-top: -11%;
  --blob-bottom: -5%;
  transform: rotate(-3deg);
}

.tutorial-step:nth-child(4n + 4) .tutorial-step__media::before {
  background: var(--color-charcoal);
  opacity: 0.07; /* charcoal has no hue to give, so it just reads as grey */
  border-radius: 37% 63% 56% 44% / 59% 45% 55% 41%;
  --blob-out: -10%;
  --blob-top: -5%;
  --blob-bottom: -9%;
  transform: rotate(4deg);
}

/* Two columns still, but the step gutter is max(--space-md, 50vw - 576px), which
   pins to --space-md below 1200px — nowhere near enough room for the outward
   reach. Measured: the widest variant needs ~91px of gutter, which only exists
   above ~1340px. Below that, run the shape off the screen edge and the page's
   overflow-x:hidden slices it into a hard vertical line. So: no side peek at all
   here, just a slightly deeper top/bottom one to compensate. Deliberately only
   slightly — going big vertically turns the shape into a grey haze over the
   whole step, which is exactly what it looked like on the first attempt. */
@media (min-width: 769px) and (max-width: 1359px) {
  /* --blob-out has to be repeated on each variant: media queries add no
     specificity, so the :nth-child rules above would otherwise keep winning. */
  .tutorial-step__media::before {
    --blob-out: 4%;
    --blob-top: -13%;
    --blob-bottom: -11%;
  }

  .tutorial-step:nth-child(4n + 2) .tutorial-step__media::before {
    --blob-out: 4%;
    --blob-top: -9%;
    --blob-bottom: -14%;
  }

  .tutorial-step:nth-child(4n + 3) .tutorial-step__media::before {
    --blob-out: 4%;
    --blob-top: -15%;
    --blob-bottom: -8%;
  }

  .tutorial-step:nth-child(4n + 4) .tutorial-step__media::before {
    --blob-out: 4%;
    --blob-top: -8%;
    --blob-bottom: -12%;
  }
}

/* Sit above the blob, and carry the rounding the parent gave up. */
.tutorial-step__video,
.tutorial-step__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-lg);
}

.tutorial-step__placeholder {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-light-gray);
  border-radius: var(--radius-lg);
}

/* Text */

.tutorial-step__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The media is positioned, so without this the blob would paint over the
     (otherwise unpositioned) text column it leans into. */
  position: relative;
  z-index: 1;
}

.tutorial-step__num {
  display: inline-block;
  font-family: 'VolumeTCSans-RusticSolid', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: 0.4em;
}

.tutorial-step__title {
  font-family: 'VolumeTC-Rustic', cursive;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 500;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-sm);
  line-height: 1.15;
}

.tutorial-step__desc {
  color: var(--color-warm-gray);
  line-height: 1.5;
  font-size: 1.2rem;
}

.tutorial-step__desc p {
  margin: 0 0 var(--space-sm);
}

/* The instructions field uses the full editor, so support the rich formatting
   it exposes — headings, lists, quotes, links. The global reset strips these,
   so they're restored here (mirrors the WooCommerce content styling). */
.tutorial-step__desc h2,
.tutorial-step__desc h3,
.tutorial-step__desc h4 {
  font-family: var(--font-display);
  color: var(--color-charcoal);
  line-height: 1.2;
  margin: var(--space-md) 0 var(--space-xs);
}
.tutorial-step__desc h2 { font-size: 1.6rem; }
.tutorial-step__desc h3 { font-size: 1.35rem; }
.tutorial-step__desc h4 { font-size: 1.15rem; }

.tutorial-step__desc ul,
.tutorial-step__desc ol {
  margin: 0 0 var(--space-sm);
  padding-left: 1.4em;
}
.tutorial-step__desc ul { list-style: disc; }
.tutorial-step__desc ol { list-style: decimal; }
.tutorial-step__desc li { margin-bottom: 0.35em; }
.tutorial-step__desc li:last-child { margin-bottom: 0; }

.tutorial-step__desc a {
  color: var(--color-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tutorial-step__desc a:hover { color: var(--color-clay); }

.tutorial-step__desc blockquote {
  margin: var(--space-sm) 0;
  padding: 0.25rem 0 0.25rem var(--space-sm);
  border-left: 3px solid var(--color-terracotta);
  color: var(--color-charcoal);
  font-style: italic;
}

.tutorial-step__desc strong { font-weight: 600; }

.tutorial-step__desc small { font-size: 0.85em; }

.tutorial-step__desc hr {
  border: 0;
  border-top: 1px solid var(--color-sand);
  margin: var(--space-md) 0;
}

.tutorial-step__desc > *:last-child {
  margin-bottom: 0;
}

/* Pro tip */

.tutorial-step__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-top: var(--space-sm);
  padding: 0.75em 1em;
  /* Inverted against the step banding so the box always has something to sit on.
     Odd steps are --color-warm-white, so the tip goes cream here; the rule below
     swaps it on the even (cream) steps. */
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--color-clay);
  line-height: 1.5;
}

.tutorial-step:nth-child(even) .tutorial-step__tip {
  background: var(--color-warm-white);
}

.tutorial-step__tip svg {
  flex-shrink: 0;
  margin-top: 0.1em;
}

/* Responsive steps */
@media (max-width: 768px) {
  .tutorial-step {
    grid-template-columns: 1fr;
    padding: var(--space-lg) var(--space-md);
  }

  .tutorial-step--flip .tutorial-step__media {
    order: 0;
  }

  .tutorial-step--flip .tutorial-step__body {
    order: 0;
  }

  .tutorial-step__media {
    max-height: 50vh;
  }

  /* Single column, media is full width, and the gutter is only --space-md — so
     there's no room for a side peek without the page's overflow-x:hidden
     shearing it into a hard vertical line at the screen edge. Hold both sides
     inside the media (the rotation still swings a few px out, hence 3% not 0)
     and let the shape read purely above and below. The per-variant vertical
     values carry over from above so the steps still differ. */
  .tutorial-step__media::before,
  .tutorial-step--flip .tutorial-step__media::before {
    left: 3%;
    right: 3%;
  }
}

/* ── Step feedback ───────────────────────────── */

.tutorial-step__feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: var(--space-md);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-light-gray);
  font-family: var(--font-body);
  font-size: 0.75rem;
  transition: color 0.2s;
}

.tutorial-step__feedback-label {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tutorial-step__feedback-btn:hover {
  color: var(--color-terracotta);
}

.tutorial-step__feedback-btn:hover .tutorial-step__feedback-label {
  opacity: 1;
  transform: translateX(0);
}

.tutorial-step__feedback {
  margin-top: 0;
  padding: 0 var(--space-sm);
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease, margin-top 0.35s ease;
}

.tutorial-step__feedback.is-open {
  max-height: 300px;
  opacity: 1;
  padding: var(--space-sm);
  margin-top: var(--space-sm);
}

.tutorial-step__feedback-prompt {
  font-size: 0.85rem;
  color: var(--color-charcoal);
  margin: 0 0 0.6em;
  font-weight: 500;
}

.tutorial-step__feedback-input {
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-charcoal);
  background: #fff;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.tutorial-step__feedback-input:focus {
  border-color: var(--color-terracotta);
}

.tutorial-step__feedback-actions {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 0.6em;
}

.tutorial-step__feedback-send {
  font-size: 0.8rem;
  padding: 0.45em 1.2em;
}

.tutorial-step__feedback-cancel {
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-warm-gray);
  padding: 0;
}

.tutorial-step__feedback-cancel:hover {
  color: var(--color-charcoal);
}

.tutorial-step__feedback-thanks {
  font-size: 0.85rem;
  color: var(--color-sage);
  margin: 0;
}

/* ── Showcase / Reviews ──────────────────────── */

.tutorial-showcase {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) 0 0;
  text-align: center;
}

.tutorial-showcase__header {
  margin-bottom: var(--space-lg);
}

.tutorial-showcase__header .section-label {
  display: block;
  font-size: 3rem;
}

.tutorial-showcase__header .tutorial-section-title {
  margin-top: 0;
}

.tutorial-showcase__subtitle {
  color: var(--color-warm-gray);
  font-size: 0.95rem;
  margin: 0.3em 0 0;
}

/* Review grid */

.tutorial-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.tutorial-showcase__card {
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
}

.tutorial-showcase__photos {
  display: flex;
  gap: 2px;
}

.tutorial-showcase__photos img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.tutorial-showcase__photos a {
  flex: 1;
  min-width: 0;
}

.tutorial-showcase__card-body {
  padding: var(--space-sm);
}

.tutorial-showcase__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.tutorial-showcase__author {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.85rem;
  color: var(--color-charcoal);
}

.tutorial-showcase__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.tutorial-showcase__initial {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-terracotta);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
}

.tutorial-showcase__stars {
  display: flex;
  gap: 1px;
  color: var(--color-terracotta);
}

.tutorial-showcase__text {
  font-size: 0.9rem;
  color: var(--color-warm-gray);
  line-height: 1.6;
}

.tutorial-showcase__text p:last-child {
  margin-bottom: 0;
}

.tutorial-showcase__date {
  font-size: 0.75rem;
  color: var(--color-light-gray);
}

/* Thank you */

.tutorial-showcase__thanks {
  text-align: center;
  padding: var(--space-lg) 0;
  color: var(--color-sage);
}

.tutorial-showcase__thanks p {
  margin: var(--space-xs) 0 0;
  color: var(--color-warm-gray);
}

/* Form */

.tutorial-showcase__form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.tutorial-showcase__rating-field {
  margin-bottom: var(--space-sm);
}

.tutorial-showcase__rating-field label {
  display: block;
  font-size: 0.875rem;
  color: var(--color-charcoal);
  font-weight: 500;
  margin-bottom: 0.3em;
}

.tutorial-showcase__star-input {
  display: flex;
  gap: 4px;
}

.tutorial-showcase__star {
  color: var(--color-sand);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}

.tutorial-showcase__star:hover,
.tutorial-showcase__star.is-active {
  color: var(--color-terracotta);
}

.tutorial-showcase__star svg polygon[fill="currentColor"] {
  color: var(--color-terracotta);
}

.tutorial-showcase__star-input .tutorial-showcase__star {
  color: var(--color-terracotta);
}

.tutorial-showcase__fields-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.tutorial-showcase__fields-row .tutorial-showcase__field {
  flex: 1;
  margin-bottom: 0;
}

.tutorial-showcase__field {
  margin-bottom: var(--space-sm);
}

.tutorial-showcase__field label {
  display: block;
  font-size: 0.875rem;
  color: var(--color-charcoal);
  font-weight: 500;
  margin-bottom: 0.3em;
}

.tutorial-showcase__hint {
  font-weight: 400;
  color: var(--color-light-gray);
}

.tutorial-showcase__field input[type="text"],
.tutorial-showcase__field input[type="email"],
.tutorial-showcase__field textarea {
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-charcoal);
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.tutorial-showcase__field input:focus,
.tutorial-showcase__field textarea:focus {
  border-color: var(--color-terracotta);
}

.tutorial-showcase__field input[type="file"] {
  display: none;
}

.tutorial-showcase__photo-upload {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.tutorial-showcase__photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5em 1em;
  border: 1px dashed var(--color-sand);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-warm-gray);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.tutorial-showcase__photo-btn:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.tutorial-showcase__photo-names {
  font-size: 0.8rem;
  color: var(--color-light-gray);
}

.tutorial-showcase__photo-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.tutorial-showcase__photo-preview img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.tutorial-showcase__photo-preview .mwp-video-name {
  font-size: 0.8rem;
  opacity: 0.7;
  align-self: center;
}

/* Product reviews on tutorial — matches single product style */

.tutorial-showcase__product-reviews {
  margin-top: var(--space-xl);
  text-align: left;
}

.tutorial-showcase__product-reviews .tutorial-section-title {
  text-align: center;
  margin-bottom: var(--space-md);
}

.mwp-tutorial-review {
  padding: var(--space-md) 0;
  border-bottom: 1.5px solid var(--color-sand);
}

.mwp-tutorial-review:last-child {
  border-bottom: none;
}

.mwp-tutorial-review__stars {
  float: left;
  display: flex;
  gap: 1px;
  color: var(--color-terracotta);
  margin-bottom: 0;
}

.mwp-tutorial-review__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-light-gray);
  float: right;
}

.mwp-tutorial-review__meta strong {
  color: var(--color-charcoal);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: normal;
}

.mwp-tutorial-review__meta .mwp-review-initial {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.mwp-tutorial-review__body {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  clear: both;
  padding-top: 0.5rem;
}

.mwp-tutorial-review__text {
  flex: 1;
}

.mwp-tutorial-review__text p {
  font-size: 0.95rem;
  color: var(--color-warm-gray);
  line-height: 1.7;
  margin: 0;
}

.mwp-tutorial-review__photos {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.mwp-tutorial-review__photos img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s;
}

.mwp-tutorial-review__photos img:hover {
  opacity: 0.8;
}

.mwp-tutorial-review__photos .mwp-review-video__thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}

/* ── Footer CTA ──────────────────────────────── */

.tutorial-footer {
  text-align: center;
  padding: var(--space-xl) 0 0;
}

.tutorial-footer p {
  font-size: 1.05rem;
  color: var(--color-warm-gray);
  margin-bottom: var(--space-sm);
}

.tutorial-footer strong {
  color: var(--color-terracotta);
}

/* ── Tutorial link on product page ───────────── */

.mwp-tutorial-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-sm);
  font-family: 'VolumeTCSans-RusticSolid', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--color-terracotta);
  text-decoration: none;
  transition: color 0.2s;
}

.mwp-tutorial-link:hover {
  color: var(--color-clay);
}

/* ── Responsive ──────────────────────────────── */

@media (max-width: 768px) {
  .tutorial-step {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .tutorial-step--flip .tutorial-step__media,
  .tutorial-step--flip .tutorial-step__body {
    order: unset;
  }

  .tutorial-step__media {
    aspect-ratio: 16 / 10;
  }

  .tutorial-step__desc {
    margin-bottom: 12px;
  }

  .tutorial-step__tip {
    margin-bottom: 12px;
  }

  .tutorial-step__feedback-btn {
    margin-top: 20px;
  }

  .tutorial-step__feedback-label {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Wall Plate tutorial: parametric template tool ──────────────────────────
   The Wall Plate tutorial swaps the ACF image-scaler for the NEMA generator
   (see tutorial-wall-plate.php). The generator ships its own self-contained
   styles in wall-plate-template.css; everything here is only about seating it
   inside the tutorial's leading band so it reads as the same card the other
   tutorials get, rather than a widget dropped onto the page. */

.tutorial-tool-band--wallplate .tutorial-wallplate-card {
  background: var(--color-warm-white);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* Same lift as .mwp-tut-tool gets, so the band floats across the hero seam
   identically whichever tool the tutorial uses. */
.tutorial-page--tool-first .tutorial-content > .tutorial-tool-band--wallplate:first-child .tutorial-wallplate-card {
  border: none;
  box-shadow:
    0 2px 4px rgba(46, 42, 38, 0.06),
    0 18px 40px -10px rgba(46, 42, 38, 0.22),
    0 48px 80px -32px rgba(46, 42, 38, 0.28);
}

.tutorial-tool-band--wallplate .mwp-tut-tool__head {
  margin-bottom: var(--space-md);
}

/* The standalone tool page centres the widget in a narrow column; inside the
   tutorial the surrounding container already sets the measure.
   The widget also hardcodes a system font stack so it stays presentable on its
   own page — sat next to the tutorial's DM Sans that mismatch shows, so here it
   inherits. Needs the ID to outrank the widget's own #mwp-wallplate rule; a
   class on its own loses that specificity fight. */
#mwp-wallplate.mwp-wallplate--embedded {
  max-width: none;
  font-family: var(--font-body);
}

/* Form controls don't inherit font-family on their own. */
#mwp-wallplate.mwp-wallplate--embedded select,
#mwp-wallplate.mwp-wallplate--embedded input {
  font-family: inherit;
}

/* The widget's two panels are cards in their own right on the tool page. Nested
   inside the band's card they'd read as boxes-in-a-box, so they give up their
   chrome and keep only the two-column split. */
.mwp-wallplate--embedded .mwp-wp-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

@media (max-width: 640px) {
  .tutorial-tool-band--wallplate .tutorial-wallplate-card {
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }
}