/* ============================================================
   FibSetups flavor layer — loads AFTER core + landing/feature.
   Turns the ported squeeze system into something fib-native:
   - IBM Plex Mono for numerals, kickers, ratios (matches the app)
   - golden-ratio hero proportions (1 : 1.618)
   - faint retracement-grid watermarks behind heroes (.236–.786,
     mono ratio labels on the right rail)
   - the "fib ruler" strip: a measured baseline with ratio ticks
   - golden-spiral watermark in the dark sections
   - ratio-ring bullets (teal ring, gold center) instead of checks
   - gold (#F4B942 dark / #B07E15 light) as the measurement accent
   ============================================================ */

:root{ --fibmono:'IBM Plex Mono',ui-monospace,Menlo,monospace; --gold:#F4B942; --gold-ink:#B07E15; }

/* ---------- mono numerals + kickers everywhere ---------- */
.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(--fibmono); 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(--fibmono); font-weight:700; letter-spacing:-.02em;
}

/* units + measurement accents go gold (dark gold on paper for contrast) */
.sqlp .stat-n .u,.sqfp .hstat .n .u,.sqlp .rn .u,.sq-stage .sqf-stat .u{ color:var(--gold-ink); }
.sqlp .runner .kick.lt,.sqlp .price .kick.lt{ color:var(--gold); }

/* golden-ratio headline halves: the .m span reads in teal */
.sqlp h1 .m,.sqlp h2 .m,.sqfp h1 .m,.sqfp h2 .m,
.sqlp .feat-copy h3 .m{ color:#0F766E; font-weight:800; }
.sqlp .runner h2 .m,.sqlp .price h2 .m,.sqfp .band h2 .m{ color:var(--gold); }

/* ---------- golden-ratio hero ---------- */
@media(min-width:981px){
  .sqlp .hero-grid{ grid-template-columns:1fr 1.618fr; }
}

/* ---------- retracement-grid watermark (behind heroes) ---------- */
.fib-grid{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.fib-grid i{ position:absolute; left:0; right:0; top:var(--y); height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(15,118,110,.10) 14%,rgba(15,118,110,.10) 86%,transparent 100%); }
.fib-grid i::after{ content:attr(data-r); position:absolute; top:-15px;
  right:max(28px,calc(50% - 614px));
  font:600 10px/1 var(--fibmono); letter-spacing:.1em; color:rgba(15,118,110,.38); }
.fib-grid i[data-r=".618"]{ background:linear-gradient(90deg,transparent 0%,rgba(176,126,21,.16) 14%,rgba(176,126,21,.16) 86%,transparent 100%); }
.fib-grid i[data-r=".618"]::after{ color:rgba(176,126,21,.55); }
@media(max-width:820px){ .fib-grid{ display:none; } }

/* ---------- the fib ruler: measured baseline with ratio ticks ---------- */
.fib-ruler{ background:#fff; border-bottom:1px solid #E9EDEE; position:relative; }
.fib-ruler .fr-in{ position:relative; height:64px; max-width:1280px; margin:0 auto; padding:0 32px; }
.fib-ruler .fr-base{ position:absolute; left:32px; right:32px; top:50%; height:1px; background:#DDE3E4; }
.fib-ruler .fr-t{ position:absolute; top:50%; transform:translate(-50%,-50%); }
.fib-ruler .fr-t i{ display:block; width:1px; height:14px; background:#0F766E; opacity:.45; margin:0 auto; }
.fib-ruler .fr-t span{ display:block; margin-top:7px; font:600 10px/1 var(--fibmono); letter-spacing:.1em; color:#76828D; text-align:center; }
.fib-ruler .fr-t.gold i{ width:7px; height:7px; border-radius:50%; background:var(--gold); border:2px solid #B07E15; opacity:1; margin-top:3px; }
.fib-ruler .fr-t.gold span{ color:#B07E15; font-weight:700; }
.fib-ruler .fr-cap{ position:absolute; right:32px; top:12px; font:600 10px/1 var(--fibmono); letter-spacing:.12em; color:#A4ADB6; text-transform:uppercase; }
@media(max-width:600px){ .fib-ruler .fr-in{ height:52px; } .fib-ruler .fr-cap{ display:none; } }

/* ---------- golden-spiral 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:-4%; top:-12%; width:46%; aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M8 84 A 44 44 0 0 1 52 16 A 30 30 0 0 1 79 47 A 19 19 0 0 1 52 66 A 12 12 0 0 1 65 47 A 7.5 7.5 0 0 1 58 55.5' stroke='white' stroke-opacity='.05' stroke-width='2.6' stroke-linecap='round'/%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; }

/* ---------- ratio-ring bullets (teal ring, gold center) ---------- */
.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%3Ccircle cx='8' cy='8' r='6' stroke='%230F766E' stroke-width='2.4'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%23F4B942'/%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%3Ccircle cx='8' cy='8' r='6' stroke='%232AA69B' stroke-width='2.4'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%23F4B942'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ---------- section numbering reads as ratios ---------- */
.sqlp .feat-step,.sqfp .kick{ letter-spacing:.16em; }

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

/* bento CTA tile: deep teal with a gold spiral hint instead of the squeeze gradient */
.sqlp .bc-cta{ background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Cpath d='M8 84 A 44 44 0 0 1 52 16 A 30 30 0 0 1 79 47 A 19 19 0 0 1 52 66 A 12 12 0 0 1 65 47 A 7.5 7.5 0 0 1 58 55.5' stroke='%23F4B942' stroke-opacity='.14' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 108% -18%/58% auto,
  linear-gradient(135deg,#0B5D57 0%,#0F766E 58%,#128C82 100%); }
.sqlp .bc-cta .bc-cta-btn{ color:#0B5D57; }

/* statband: golden hairline under the band, mono labels */
.sqlp .statband{ border-bottom:1px solid #E9EDEE; }
.sqlp .stat-l,.sqfp .hstat .l{ font-size:12.5px; }
