/* "Marked-up paper" accents shared by every page: highlighter strokes on key
   phrases, a warm paper wash behind heroes, and a red-pen grade mark.
   Linked by the generated pages; the build inlines it into index.html between
   the MARKS-CSS markers. Draw-on animation is driven by assets/marks.js. */
:root {
  --hl-yellow: #ffe27a;
  --hl-pink: #ffc6d6;
  --hl-mint: #b8efcd;
  --hl-sky: #c7defe;
  --red-pen: #d1453b;
}

/* Highlighter stroke: a slightly slanted band sitting low on the text, with
   soft ends, that wraps cleanly across line breaks. */
.hl {
  --hl: var(--hl-yellow);
  background-image: linear-gradient(100deg, transparent 0.12em, var(--hl) 0.28em, var(--hl) calc(100% - 0.32em), transparent calc(100% - 0.1em));
  background-repeat: no-repeat;
  background-position: 0 78%;
  background-size: 100% 0.6em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.14em;
  margin: 0 -0.08em;
}
.hl-pink { --hl: var(--hl-pink); }
.hl-mint { --hl: var(--hl-mint); }
.hl-sky { --hl: var(--hl-sky); }
/* On dark backgrounds a fill would drown white text, so draw a gold underline stroke. */
.hl-dark { --hl: #e3b04b; background-position: 0 96%; background-size: 100% 0.14em; }

/* With JS, strokes start empty and draw across once the heading scrolls into
   view (marks.js adds .in). Without JS, or with reduced motion, they're just there. */
.marks-js .hl { background-size: 0% 0.6em; transition: background-size 0.9s cubic-bezier(0.65, 0, 0.25, 1) 0.15s; }
.marks-js .hl-dark { background-size: 0% 0.14em; }
.marks-js .hl.in { background-size: 100% 0.6em; }
.marks-js .hl-dark.in { background-size: 100% 0.14em; }

/* Warm paper wash behind hero areas (the homepage hero's original gradient). */
.paper { background: linear-gradient(170deg, #faf9f7 0%, #f0eeeb 50%, #e8e4df 100%); }

/* Red-pen grade, circled, written beside a headline. */
.pen-mark {
  position: relative;
  display: inline-block;
  margin-left: 0.32em;
  font-family: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1;
  color: var(--red-pen);
  transform: rotate(-10deg) translateY(-0.28em);
  letter-spacing: 0;
}
.pen-mark svg { position: absolute; left: -0.42em; top: -0.32em; width: calc(100% + 0.84em); height: calc(100% + 0.62em); overflow: visible; }
.pen-mark path { fill: none; stroke: var(--red-pen); stroke-width: 2.4; stroke-linecap: round; }
.marks-js .pen-mark path { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 0.8s ease-out 1.05s; }
.marks-js .pen-mark.in path { stroke-dashoffset: 0; }

/* Process steps: an icon on a highlighter-tinted tile instead of a bare number,
   a small "Step n" label, and a dashed trail from one step to the next so the
   order still reads at a glance. */
.step-flow { position: relative; }
.step-flow > * { position: relative; }
.step-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #b7791f; margin-bottom: 14px;
  transform: rotate(-4deg);
  box-shadow: 0 6px 14px rgba(26, 35, 50, 0.08);
}
.step-icon i { transform: rotate(4deg); }
.tint-yellow { background: #fff3c4; }
.tint-pink { background: #ffe3eb; }
.tint-mint { background: #dcf7e6; }
.tint-sky { background: #e2edff; }
.step-no { display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #b7791f; margin-bottom: 4px; }
@media (min-width: 861px) {
  .step-flow > *:not(:last-child)::after {
    content: ''; position: absolute; top: 52px; left: 96px; right: -22px;
    border-top: 2px dashed rgba(183, 121, 31, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marks-js .hl, .marks-js .pen-mark path { transition: none; }
}