:root {
      /* Tweak these to perfectly match spiral-lighting.com */
      --card: #eeede2;
      --ink: #0f172a;           /* deep slate */
      --muted: #475569;         /* slate */
      --line: #b19711;          /* light border */
      --primary: #f8d000;       /* cyan */
      --secondary: #b38f00;     /* indigo */
      --glow: rgba(248,208,0,0.18);
      --radius: 16px;
      --shadow: 0 12px 30px rgba(2, 8, 23, 0.08);
      --grad: #dbb006;
    }

    .wrap {
      max-width: 1100px;
      margin: 40px auto 80px;
      padding: 0 20px;
    }

    header {
      text-align: center;
      margin-bottom: 28px;
    }
    header h1 {
      font-size: clamp(28px, 5vw, 44px);
      margin: 0 0 8px 0;
      letter-spacing: 0.3px;
    }
    header p {
      color: var(--muted);
      margin: 0 auto;
      max-width: 720px;
    }

    /* Step cards */
    .timeline {
      position: relative;
      display: grid;
      gap: 12px;
	  margin-top: 150px;
    }

    .step {
      position: relative;
      background: var(--card);
      border: 1px solid var(--line);
      border-left: 6px solid transparent;
      border-radius: var(--radius);
      padding: 22px 22px 20px 22px;
      box-shadow: var(--shadow);
      overflow: hidden;
      isolation: isolate;
    }

    .step::before {
      /* left accent glow */
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(1200px 120px at -60px 10%, rgba(132, 111, 4, 0.21), #0000 60%);
      pointer-events: none;
      z-index: -1;
    }

    .step .badge {
      display: inline-grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: 999px;
      background: var(--grad);
      color: white;
      font-weight: 600;
      font-size: 28px;
      box-shadow: 0 6px 16px rgba(94, 85, 9, 0.35);
      margin-right: 10px;
      flex: none;
}

    .step header {
      display: flex;
      align-items: center;
      gap: 8px;
      text-align: left;
      margin: 0 0 8px 0;
    }

    .step h2 {
      font-size: clamp(18px, 2.8vw, 22px);
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    .step p {
      margin: 6px 0 0 0;
      color: var(--muted);
    }

    /* Simple fallback arrows injected after each step */
    .step:not(:last-of-type)::after {
      content: "▼";
      display: block;
      text-align: center;
      font-size: 72px;
      color: var(--primary);
      margin: 18px auto -6px;
      text-shadow: 0 8px 14px rgba(2,8,23,0.22);
      animation: bounce 1.6s ease-in-out infinite;
      user-select: none;
    }

    /* Image placeholder */
    .placeholder {
      margin-top: 14px;
      border: 1.5px dashed #fde68a;
      border-radius: calc(var(--radius) - 4px);
      background: repeating-linear-gradient(45deg, #fffbeb, #fffbeb 8px, #fef3c7 8px, #fef3c7 16px);
      display: grid;
      place-items: center;
      padding: 18px;
      min-height: 260px;
      color: #a16207;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    .subgrid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 12px;
    }
    @media (min-width: 720px) {
      .subgrid { grid-template-columns: 1fr 1fr; }
    }

    .subcard {
      border: 1px solid var(--line);
      border-radius: calc(var(--radius) - 4px);
      padding: 16px;
      background: #ffffff;
    }

    .subcard h3 {
      margin: 0 0 6px 0;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 0.4px;
    }

    .subcard p { color: var(--muted); margin: 0; }

    /* Arrow connectors between steps */
    .arrow {
      height: 140px; /* space between cards */
      display: grid;
      place-items: center;
    }

    .arrow svg {
      width: 100px;
      height: 100px;
      overflow: visible;
      filter: drop-shadow(0 4px 6px rgba(2,8,23,0.20));
      display: none;
    }

    .arrow::after {
      content: "▼";
      display: inline-block;
      font-size: 88px;
      line-height: 1;
      color: var(--primary);
      text-shadow: 0 8px 14px rgba(2,8,23,0.22);
      animation: bounce 1.4s ease-in-out infinite;
    }

    .arrow::before { display: none; }

    .arrow path {
      fill: none;
      stroke: url(#gradStroke);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-dasharray: 12 14;
      animation: dash 4.5s linear infinite;
      filter: drop-shadow(0 2px 3px rgba(2,8,23,0.18));
    }

    @keyframes dash {
      to { stroke-dashoffset: -180; }
    }

    .arrow .chev {
      transform-origin: center;
      animation: bounce 2s ease-in-out infinite;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(-18px); opacity: 0.98; }
      50% { transform: translateY(28px); opacity: 1; }
    }
      50% { transform: translateY(10px); opacity: 1; }
    }
      50% { transform: translateY(3px); opacity: 1; }
    }

    footer {
      text-align: center;
      margin-top: 36px;
      color: var(--muted);
      font-size: 14px;
    }
      /* Overrides: show a simple external arrow between articles */
    .step:not(:last-of-type)::after { content: none !important; display: none !important; }
    .arrow { height: 120px; display: flex; align-items: center; justify-content: center; }
    .arrow svg { display: none !important; }
    .arrow::before { display: none !important; }
    .arrow::after { content: "▼"; display: inline-block; font-size: 92px; line-height: 1; color: var(--primary); text-shadow: 0 8px 14px rgba(2,8,23,0.22); animation: bounce 1.4s ease-in-out infinite; user-select: none; }
      /* Force external arrows as real elements */
    .arrow::after { content: none !important; }
    .arrow { height: 140px; display: flex; align-items: center; justify-content: center; }
    .down { font-size: 62px; line-height: 1; color: var(--primary); text-shadow: 2px 2px 6px rgba(43, 43, 43, 0.14); animation: bounce 2s ease-in-out infinite; user-select: none; }