/* ==========================================================================
   Origin Pixel — Mobile rebuild of #pain (The Leak) and #engine (Growth Engine)
   Loads AFTER responsive.css.

   Why this file exists
   --------------------
   On desktop both sections are HORIZONTAL metaphors:
     • #pain   — a money pipe running left→right with 4 cracks leaking under it
     • #engine — a conveyor running left→right, money in one end, revenue out
   Stacking those into a plain column throws the whole idea away: you get four
   anonymous quote boxes and five anonymous feature cards.

   So on phones the metaphor is rotated 90° instead of discarded — the pipe
   runs DOWN the screen, each card hangs off it as a node, and the leak is
   sealed by tapping rather than hovering.

   Everything here is scoped to (max-width: 700px). Desktop is untouched.
   ========================================================================== */

@media (max-width: 700px) {

/* ======================================================================
   1. THE LEAK — vertical leaking pipe
   ====================================================================== */

/* The horizontal pipe + its 4 cracks are meaningless once cards stack. */
#pain .pipe { display: none !important; }
#pain .leakwrap::after { display: none !important; }

/* ---- seal progress meter (injected by mobile-sections.js) ---- */
.leak-meter {
  margin: 2px 0 18px;
  padding: 13px 15px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(165deg, rgba(10, 40, 95, .45), rgba(0, 16, 64, .6));
  backdrop-filter: blur(8px);
}
.leak-meter .lm-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.leak-meter .lm-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #FF8A8A;
  transition: color .35s;
}
.leak-meter .lm-count {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px; font-weight: 800;
  color: var(--txt); white-space: nowrap;
}
.leak-meter .lm-track {
  position: relative; height: 8px; border-radius: 8px; overflow: hidden;
  background: rgba(67, 127, 250, .2);
}
.leak-meter .lm-track i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #FF5A5A, #FFB44D);
  box-shadow: 0 0 14px rgba(255, 120, 90, .7);
  transition: width .5s cubic-bezier(.22, .9, .3, 1), background .5s, box-shadow .5s;
}
/* all four sealed -> the whole meter flips to "fixed" */
.leak-meter.done .lm-label { color: var(--green); }
.leak-meter.done .lm-track i {
  background: linear-gradient(90deg, var(--cyan), var(--green));
  box-shadow: 0 0 16px rgba(34, 197, 94, .75);
}

/* ---- the pipe running down the page ---- */
#pain .leaks {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  position: relative;
  margin-top: 0;
}
/* intact pipe behind every card, top to bottom */
#pain .leaks::before {
  content: "";
  position: absolute; z-index: 0;
  left: 19px; top: 10px; bottom: 10px; width: 4px;
  border-radius: 4px;
  background: rgba(67, 127, 250, .26);
}

/* ---- each leak becomes a node hanging off the pipe ---- */
#pain .leak {
  position: relative; z-index: 1;
  padding: 17px 16px 17px 46px !important;
  margin-bottom: 11px;
  border-radius: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s, background .3s, box-shadow .3s, transform .18s;
}
#pain .leak:last-child { margin-bottom: 0; }
/* tap feedback — no sticky :hover lift on touch */
#pain .leak:active { transform: scale(.985); }
#pain .leak:hover { transform: none; }

/* the leaking (red, dashed) segment of pipe for this card */
#pain .leak .conn {
  display: block !important;
  left: 19px; top: 0;
  width: 4px; height: calc(100% + 11px); /* +11px bridges the card gap */
  border-radius: 4px;
  background: repeating-linear-gradient(180deg,
    rgba(255, 107, 107, .95) 0 7px, transparent 7px 12px);
  transition: background .35s;
}
/* the last card has no gap after it — don't leave a stub of pipe hanging */
#pain .leak:last-child .conn { height: 100%; }
/* ---- THE LEAK EFFECT -------------------------------------------------
   Five layers stacked so the card genuinely looks like it's losing money:
     1. the crack throbs under pressure
     2. a burst of spray right at the split
     3. droplets that stretch as they fall and splat at the end
     4. a pool collecting at the bottom
     5. red light bleeding out of the pipe across the card
   All of it is transform/opacity only, so it stays on the GPU.
   -------------------------------------------------------------------- */

/* keep the pipe + drips above the card's bleed glow */
#pain .leak .conn,
#pain .leak .drips { z-index: 2; }
#pain .leak b,
#pain .leak p,
#pain .leak .seal { position: relative; z-index: 2; }

/* 1. the crack — a glowing bead pulsing with escaping pressure */
#pain .leak .conn::before {
  content: "";
  position: absolute; top: 20px; left: -4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFD9D9, #FF3D3D 65%);
  opacity: 1;
  transition: opacity .3s, transform .3s;
  animation: opCrackPulse 1.5s ease-in-out infinite;
}

/* the drip column, hanging from the crack */
#pain .leak .drips {
  display: block !important;
  left: 19px; top: 30px;
  width: 4px; height: 74px;
  opacity: 1; transition: opacity .35s;
  pointer-events: none;
}

/* 2. pressure spray bursting out of the split */
#pain .leak .drips::before {
  content: "";
  position: absolute; top: -6px; left: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 120, .55), transparent 68%);
  animation: opLeakSpray 1.5s ease-out infinite;
}

/* 4. the pool collecting underneath */
#pain .leak .drips::after {
  content: "";
  position: absolute; bottom: -2px; left: -8px;
  width: 20px; height: 5px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 90, 90, .85), rgba(255, 60, 60, .1) 72%);
  filter: blur(1px);
  animation: opLeakPool 1.5s ease-in-out infinite;
}

/* 3. the droplets themselves — stretch on the way down, splat at the end */
#pain .leak .drips i {
  top: 0 !important;
  left: -3px;
  width: 9px; height: 12px;
  background: radial-gradient(circle at 38% 28%, #FFD2D2, #FF4646 62%);
  box-shadow: 0 0 12px rgba(248, 113, 113, .95);
  animation: opLeakDrop 1.5s cubic-bezier(.45, 0, .75, .35) infinite !important;
}
#pain .leak .drips i:nth-child(2) { left: -1px; animation-delay: .5s !important; }
#pain .leak .drips i:nth-child(3) { left: -5px; animation-delay: 1s !important; }

/* 5. red light bleeding out of the pipe into the card */
#pain .leak::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 13px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(255, 74, 74, .20), rgba(255, 74, 74, .05) 34%, transparent 62%);
  animation: opLeakBleed 2.8s ease-in-out infinite;
  transition: opacity .4s;
}

@keyframes opCrackPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 12px 2px rgba(255, 90, 90, .85); }
  50%      { transform: scale(1.32); box-shadow: 0 0 22px 6px rgba(255, 70, 70, 1); }
}
@keyframes opLeakSpray {
  0%   { transform: scale(.35); opacity: .95; }
  70%  { opacity: .12; }
  100% { transform: scale(2.1); opacity: 0; }
}
@keyframes opLeakDrop {
  0%   { transform: translateY(0)    scale(.55, .6);  opacity: 0; }
  14%  { transform: translateY(6px)  scale(1, 1);     opacity: 1; }
  55%  { transform: translateY(34px) scale(.85, 1.45); opacity: 1; }
  88%  { transform: translateY(62px) scale(.8, 1.5);  opacity: .9; }
  100% { transform: translateY(70px) scale(1.7, .35); opacity: 0; }  /* splat */
}
@keyframes opLeakPool {
  0%, 100% { transform: scaleX(.55); opacity: .3; }
  55%      { transform: scaleX(1.2); opacity: .8; }
}
@keyframes opLeakBleed {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* ---- SEALED state (set by JS on tap) ---- */
#pain .leak.sealed {
  border-color: rgba(62, 139, 255, .55);
  background: rgba(9, 38, 86, .62);
  box-shadow: 0 0 34px rgba(10, 118, 254, .16);
}
#pain .leak.sealed .conn {
  background: linear-gradient(180deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px rgba(62, 139, 255, .7);
}
/* sealing shuts every leak layer off at once */
#pain .leak.sealed .conn::before {
  opacity: 0; transform: scale(.3);
  animation: none;
}
#pain .leak.sealed .drips { opacity: 0; }
#pain .leak.sealed .drips i,
#pain .leak.sealed .drips::before,
#pain .leak.sealed .drips::after { animation-play-state: paused; opacity: 0; }
/* the red bleed drains away */
#pain .leak.sealed::after { opacity: 0; animation: none; }
/* the weld: a cyan tick clamped over the old crack */
#pain .leak.sealed .conn::after {
  content: "\2713";
  position: absolute; top: 16px; left: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cyan); color: #001040;
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 14px rgba(62, 139, 255, .8);
  animation: sealPop .32s cubic-bezier(.3, 1.5, .5, 1);
}
@keyframes sealPop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---- copy inside the card ---- */
#pain .leak b { font-size: 16.5px; line-height: 1.32; margin-bottom: 6px; }
#pain .leak p { font-size: 13.8px; line-height: 1.5; margin-bottom: 12px; }

/* the "Seal it →" pill reads as a real button on touch */
#pain .leak .seal {
  opacity: 1;
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 8px 15px;
  font-size: 13px;
  border-style: solid;
  border-color: rgba(62, 139, 255, .38);
  background: rgba(10, 118, 254, .1);
  transition: background .3s, border-color .3s, color .3s;
}
#pain .leak.sealed .seal {
  background: rgba(10, 118, 254, .24);
  border-color: rgba(62, 139, 255, .75);
  color: #fff;
}

/* the hint line under the cards */
#pain .pain-punch { margin-top: 22px; font-size: 15px; line-height: 1.55; }


/* ======================================================================
   2. GROWTH ENGINE — vertical conveyor
   The desktop rail runs left→right. Here it runs top→bottom, each stage
   icon sits ON the rail as a node, and the light packet falls downward.
   These rules must beat the old `display:none !important` mobile rules.
   ====================================================================== */

.opengine { position: relative; margin-top: 4px; }

#engine .openg-flow {
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  position: relative;
}

/* the rail, now vertical */
#engine .openg-rail {
  display: block !important;
  left: 25px; right: auto;
  top: 34px; bottom: 34px;
  width: 4px; height: auto;
  border-radius: 4px;
  background: rgba(67, 127, 250, .22);
  z-index: 0;
}
#engine .openg-rail::before {
  width: 4px !important; height: 0 !important;
  background: linear-gradient(180deg, var(--blue), var(--cyan), var(--green));
  transition: height 1.9s cubic-bezier(.22, .9, .3, 1) .25s;
}
.opengine.on #engine .openg-rail::before { height: 100% !important; }

/* the travelling light packet, now falling */
#engine .openg-packet {
  display: block !important;
  top: 0; left: 2px; width: 4px; height: 34px;
  border-radius: 4px;
  transform: translate(-50%, 0);
  background: linear-gradient(180deg, transparent, var(--sky), #fff);
  box-shadow: 0 0 18px 4px rgba(116, 167, 255, .8);
  animation: opPacketY 3.6s linear infinite;
}

/* MONEY IN / REVENUE OUT become end-caps on the pipe, not floating chips */
#engine .openg-cap {
  display: inline-flex !important;
  grid-column: 1 / -1;
  justify-self: start;
  align-self: center;
  margin: 0 0 0 3px !important;
  padding: 8px 15px;
  font-size: 10.5px;
  z-index: 3;
}
/* the outbound cap reads as revenue, so it goes green */
#engine .openg-cap:last-child {
  color: var(--green);
  border-color: rgba(34, 197, 94, .45);
  text-shadow: 0 0 14px rgba(34, 197, 94, .35);
}

/* each stage: compact card, icon pinned onto the rail */
#engine .openg-stage {
  padding: 15px 15px 15px 62px !important;
  border-radius: 14px;
  min-height: 62px;
  z-index: 2;
}
#engine .openg-stage:hover { transform: none; }

#engine .openg-icon {
  position: absolute;
  left: 3px; top: 15px;
  width: 44px; height: 44px;
  margin: 0 !important;
  border-radius: 13px;
  box-shadow: 0 0 0 5px rgba(0, 16, 64, .92), 0 8px 18px rgba(0, 0, 0, .45);
}
#engine .openg-icon svg { width: 21px; height: 21px; }

#engine .openg-no { font-size: 10.5px; letter-spacing: .18em; }
#engine .openg-stage b { font-size: 17px; margin: 4px 0 5px; }
#engine .openg-desc { font-size: 13.6px; line-height: 1.5; }
#engine .openg-feed {
  display: block !important;
  margin-top: 9px; font-size: 10px;
  color: rgba(116, 167, 255, .6);
}
#engine .openg-ghost {
  font-size: 46px !important;
  opacity: .11 !important;
  top: -6px; right: 2px;
}

} /* end (max-width: 700px) */


/* --------------------------------------------------------------------
   Motion safety — kill the looping drip/packet animations for users who
   ask for reduced motion. State changes still work, they just don't loop.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #pain .leak .drips i,
  #pain .leak .drips::before,
  #pain .leak .drips::after,
  #pain .leak .conn::before,
  #pain .leak::after,
  #engine .openg-packet { animation: none !important; }
  #pain .leak.sealed .conn::after { animation: none !important; }
  .leak-meter .lm-track i { transition: none !important; }
  /* leaks stay legible as a static red state rather than moving */
  #pain .leak .drips i { opacity: .9; }
}