/* ============================================================
   MacdSetups flavor layer — loads AFTER core + landing/feature.
   Identity: signal green (#1A7F4B, matching the app), with the
   sell-side red (#D63B34) as its structural counterpart — this
   is the only brand in the family where red is part of the
   language, because the product IS the green/red color switch.
   Motifs: the zero line, histogram bars crossing it, and the
   settled/developing switch honesty.
   ============================================================ */

:root{ --mcmono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --sig:#1A7F4B; --sig-deep:#146A3E; --sell:#D63B34; }

/* ---------- mono numerals + kickers ---------- */
.sqlp .kick,.sqfp .kick,
.sqlp .feat-step,.sqfp .pcard .ph,.sqlp .ed-tag,
.sqfp .plan .pname,.sqfp .plan .pchip,.sqlp .plan .name,
.sq-frame-bar .fb-url,
.sqlp .an-axis,.sqlp .run-axis,.sqlp .ed-cap{ font-family:var(--mcmono); font-weight:600; }
.sqlp .stat-n,.sqfp .hstat .n,.sqlp .rn,
.sqlp .plan .amt,.sqfp .plan .amt,
.sq-stage .sqf-stat,.sqlp .ed-num .big{ font-family:var(--mcmono); font-weight:700; letter-spacing:-.02em; }

/* units green; dark-section kickers bright green */
.sqlp .stat-n .u,.sqfp .hstat .n .u,.sqlp .rn .u,.sq-stage .sqf-stat .u{ color:var(--sig); }
.sqlp .runner .kick.lt,.sqlp .price .kick.lt{ color:#7BE0A6; }

/* headline halves in signal green */
.sqlp h1 .m,.sqlp h2 .m,.sqfp h1 .m,.sqfp h2 .m,
.sqlp .feat-copy h3 .m{ color:var(--sig); font-weight:800; }
.sqlp .runner h2 .m,.sqlp .price h2 .m,.sqfp .band h2 .m{ color:#7BE0A6; }

/* ---------- zero-line watermark behind heroes ---------- */
.mc-zero{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.mc-zero .zl{ position:absolute; left:0; right:0; top:58%; height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(16,20,24,.14) 14%,rgba(16,20,24,.14) 86%,transparent 100%); }
.mc-zero .zl::after{ content:"0"; position:absolute; top:-15px;
  right:max(28px,calc(50% - 614px));
  font:700 10px/1 var(--mcmono); letter-spacing:.1em; color:rgba(16,20,24,.35); }
.mc-zero .hb{ position:absolute; bottom:42%; width:7px; border-radius:3px 3px 0 0; background:rgba(26,127,75,.12); }
.mc-zero .hb.dn{ bottom:auto; top:58%; border-radius:0 0 3px 3px; background:rgba(214,59,52,.10); }
@media(max-width:820px){ .mc-zero{ display:none; } }

/* ---------- the zero-line strip: bars crossing from red to green ---------- */
.mc-ruler{ background:#fff; border-bottom:1px solid #E9EDEE; position:relative; }
.mc-ruler .fr-in{ position:relative; height:64px; max-width:1280px; margin:0 auto; padding:0 32px; }
.mc-ruler .fr-base{ position:absolute; left:32px; right:32px; top:50%; height:1px; background:#CFD6D8; }
.mc-ruler .fr-b{ position:absolute; width:6px; border-radius:2.5px; }
.mc-ruler .fr-b.up{ bottom:50%; background:linear-gradient(180deg,#3DC97E,#1FA15B); }
.mc-ruler .fr-b.dn{ top:50%; background:linear-gradient(180deg,#E06A64,#D63B34); }
.mc-ruler .fr-lab{ position:absolute; top:50%; transform:translate(-50%,-50%); }
.mc-ruler .fr-x{ position:absolute; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:#1FA15B; border:2px solid #128A4E; }
.mc-ruler .fr-x::after{ content:"the switch"; position:absolute; top:12px; left:50%; transform:translateX(-50%); font:700 10px/1 var(--mcmono); letter-spacing:.08em; color:#128A4E; white-space:nowrap; }
.mc-ruler .fr-cap{ position:absolute; right:32px; top:12px; font:600 10px/1 var(--mcmono); letter-spacing:.12em; color:#A4ADB6; text-transform:uppercase; }
@media(max-width:600px){ .mc-ruler .fr-in{ height:52px; } .mc-ruler .fr-cap{ display:none; } }

/* ---------- histogram watermark on the dark sections ---------- */
.sqlp .runner,.sqfp .band,.sqlp .price{ position:relative; }
.sqlp .runner::after,.sqfp .band::after,.sqlp .price::after{
  content:""; position:absolute; right:-3%; top:-8%; width:46%; aspect-ratio:1.7;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 100' fill='none'%3E%3Cline x1='6' y1='58' x2='164' y2='58' stroke='white' stroke-opacity='.08' stroke-width='1.6'/%3E%3Cg fill='white' fill-opacity='.05'%3E%3Crect x='14' y='58' width='9' height='26' rx='3'/%3E%3Crect x='30' y='58' width='9' height='18' rx='3'/%3E%3Crect x='46' y='58' width='9' height='10' rx='3'/%3E%3Crect x='62' y='50' width='9' height='8' rx='3'/%3E%3Crect x='78' y='40' width='9' height='18' rx='3'/%3E%3Crect x='94' y='28' width='9' height='30' rx='3'/%3E%3Crect x='110' y='18' width='9' height='40' rx='3'/%3E%3Crect x='126' y='10' width='9' height='48' rx='3'/%3E%3C/g%3E%3Ccircle cx='66.5' cy='58' r='3.2' fill='%233DC97E' fill-opacity='.55'/%3E%3C/svg%3E") no-repeat center/contain;
  pointer-events:none; z-index:0;
}
.sqlp .runner .wrap,.sqfp .band > *,.sqlp .price .price-in{ position:relative; z-index:1; }

/* ---------- switch-tick bullets (green rising segment) ---------- */
.sqfp .list li::before,
.sqlp .plan li::before,.sqfp .plan li::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 11.5 L8 6 L13.5 3.5' stroke='%231A7F4B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='6' r='2' fill='%231A7F4B'/%3E%3C/svg%3E") no-repeat center/contain;
}
.sqlp .plan li::before,.sqfp .plan.feat li::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 11.5 L8 6 L13.5 3.5' stroke='%233DC97E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='6' r='2' fill='%233DC97E'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* frame url pill: mono */
.sq-frame-bar .fb-url{ font-size:10.5px; }

/* bento CTA tile: green gradient with histogram hint */
.sqlp .bc-cta{ background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 100' fill='none'%3E%3Cline x1='6' y1='58' x2='164' y2='58' stroke='white' stroke-opacity='.16' stroke-width='1.6'/%3E%3Cg fill='white' fill-opacity='.12'%3E%3Crect x='78' y='40' width='9' height='18' rx='3'/%3E%3Crect x='94' y='28' width='9' height='30' rx='3'/%3E%3Crect x='110' y='18' width='9' height='40' rx='3'/%3E%3C/g%3E%3C/svg%3E") no-repeat 112% -24%/64% auto,
  linear-gradient(135deg,#146A3E 0%,#1A7F4B 58%,#1FA15B 100%); }
.sqlp .bc-cta .bc-cta-btn{ color:#146A3E; }

.sqlp .statband{ border-bottom:1px solid #E9EDEE; }
.sqlp .stat-l,.sqfp .hstat .l{ font-size:12.5px; }