/* Fairlead page. Same ground and signals as the SYNTRALEX site. A fairlead is the fitting that guides a
   line cleanly to where it is needed; the one bold object here is the score console, which runs the
   product's real rule. Layout: claim left, console right, then quiet bands. */
.fl { --a: var(--ok); --b: var(--signal); --c: var(--wait); --d: var(--dim); }
.fl-top-btn { padding: 9px 16px; }
.fl h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06; font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; max-width: 22ch; }
.fl h3 { font-size: 20px; font-weight: 700; line-height: 1.2; }

.fl-hero { position: relative; padding: 72px 0 96px; overflow: hidden; background: radial-gradient(900px 520px at 78% 30%, #0f2d38 0%, var(--ground) 62%); }
.fl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.fl-hero h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: .98; font-weight: 800; font-stretch: 125%; letter-spacing: -.02em; max-width: 11ch; }
/* The mark: a line led cleanly through a ring. */
/* Sounding rings behind the console. */
@media (prefers-reduced-motion: no-preference) {
  .fl-sound span { animation: fl-ring 7s linear infinite; }
  .fl-sound span:nth-child(2) { animation-delay: -2.33s; }
  .fl-sound span:nth-child(3) { animation-delay: -4.66s; }
}
@keyframes fl-ring { from { transform: scale(.2); opacity: .55; } to { transform: scale(1.05); opacity: 0; } }

.fl-console { background: linear-gradient(180deg, var(--deck-2), var(--deck)); border: 1px solid var(--rule-2); border-radius: 18px; padding: 20px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px 22px; align-items: center; }
.fl-console-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12.5px; letter-spacing: .08em; color: var(--dim); }
.fl-live { display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0; color: var(--mist); }
.fl-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.fl-dial { position: relative; width: 150px; height: 150px; }
.fl-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fl-dial circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.fl-dial-base { stroke: var(--rule); }
.fl-dial-fill { stroke: var(--b); transition: stroke-dasharray .45s cubic-bezier(.6, 0, .2, 1), stroke .3s; filter: drop-shadow(0 0 6px rgb(70 211 230 / .4)); }
.fl-dial-fill[data-g="A"] { stroke: var(--a); } .fl-dial-fill[data-g="C"] { stroke: var(--c); } .fl-dial-fill[data-g="D"] { stroke: var(--d); }
.fl-dial-num { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; }
.fl-dial-num b { font: 800 44px/1 var(--display); font-stretch: 125%; color: var(--b); }
.fl-dial-num b[data-g="A"] { color: var(--a); } .fl-dial-num b[data-g="C"] { color: var(--c); } .fl-dial-num b[data-g="D"] { color: var(--d); }
.fl-dial-num span { font: 600 17px/1 var(--mono); margin-top: 6px; }
.fl-dial-num small { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.fl-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fl-parts li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 46px; gap: 10px; align-items: center; font-size: 13.5px; color: var(--mist); }
.fl-parts i { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.fl-parts b { display: block; height: 100%; border-radius: 3px; background: var(--signal); transition: width .45s cubic-bezier(.6, 0, .2, 1); }
.fl-parts em { font: 500 12.5px var(--mono); font-style: normal; text-align: right; color: var(--dim); }
.fl-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding-top: 16px; border-top: 1px solid var(--rule); }
.fl-fields label, .fl-fields legend { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.fl-fields select { width: 100%; padding: 9px 10px; border-radius: 9px; border: 1px solid var(--rule-2); background: var(--ground); color: var(--text); font: 500 14.5px var(--sans); }
.fl-fields input[type="range"] { width: 100%; accent-color: var(--signal); height: 36px; margin: 0; }
.fl-fields fieldset { grid-column: 1 / -1; border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.fl-fields legend { float: left; margin-right: 4px; padding: 0; }
.fl-fields .fl-check { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--text); min-height: 32px; }
.fl-check input { width: 17px; height: 17px; accent-color: var(--signal); }

.fl-band { padding: 88px 0; border-top: 1px solid var(--rule); }
.fl-sub { margin-top: 14px; color: var(--mist); max-width: 60ch; }
.fl-sources { margin-top: 40px; display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; }
.fl-card { background: var(--deck); border: 1px solid var(--rule); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.fl-card-key { border-color: var(--signal); background: linear-gradient(180deg, rgb(70 211 230 / .08), var(--deck) 60%); }
.fl-card p { color: var(--mist); font-size: 16px; }
.fl-tag { font-size: 12px; letter-spacing: .08em; color: var(--signal) !important; }
.fl-why { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--text) !important; font-weight: 600; font-size: 15px !important; }

.fl-paper { background: var(--paper); color: var(--paper-ink); border-top: 0; }
.fl-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.fl-steps li { counter-increment: s; padding: 22px 22px 6px 0; border-top: 3px solid var(--paper-ink); margin-right: 18px; position: relative; }
.fl-steps li:nth-child(even) { border-top-color: #0a7f8f; }
.fl-steps li::before { content: counter(s); position: absolute; top: -17px; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--paper-ink); color: var(--paper); display: grid; place-items: center; font: 700 14px var(--mono); }
.fl-steps li:nth-child(even)::before { background: #0a7f8f; }
.fl-steps .mono { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .08em; color: var(--paper-dim); }
.fl-steps h3 { margin-top: 4px; }
.fl-steps p { margin-top: 6px; color: var(--paper-dim); font-size: 15.5px; }

.fl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.fl-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.fl-list li { color: var(--mist); padding-left: 18px; border-left: 2px solid var(--rule-2); }
.fl-list b { display: block; color: var(--text); }
.fl-board { background: var(--deck); border: 1px solid var(--rule-2); border-radius: 16px; padding: 10px; display: grid; gap: 6px; }
.fl-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; background: var(--deck-2); border-left: 3px solid var(--rule-2); }
.fl-row.due { border-left-color: #ff7a6b; }
.fl-row b { display: block; font-size: 15px; }
.fl-row small { color: var(--dim); font-size: 13px; }
.fl-row em { font-style: normal; font-size: 12.5px; color: var(--mist); white-space: nowrap; }
.fl-row.due em { color: #ff7a6b; }
.fl-g { font: 600 12.5px var(--mono); padding: 4px 7px; border-radius: 6px; text-align: center; border: 1px solid currentColor; }
.fl-g.a { color: var(--a); } .fl-g.b { color: var(--b); } .fl-g.c { color: var(--c); }
.fl-board-note { font-size: 12px; color: var(--dim); padding: 4px 6px 2px; }

.fl-nots { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.fl-nots h3 { font-size: 18px; padding-top: 14px; border-top: 2px solid var(--wait); }
.fl-nots p { margin-top: 8px; color: var(--mist); font-size: 15.5px; }

.fl-cta { padding: 96px 0 110px; border-top: 1px solid var(--rule); background: radial-gradient(50% 80% at 50% 100%, rgb(70 211 230 / .1), transparent 70%); }
.fl-cta p { margin-top: 14px; color: var(--mist); max-width: 52ch; }

@media (max-width: 980px) {
  .fl-hero { padding: 48px 0 64px; }
  .fl-hero-grid, .fl-split { grid-template-columns: 1fr; gap: 40px; }
  .fl-sources { grid-template-columns: 1fr; }
  .fl-steps { grid-template-columns: 1fr 1fr; gap: 34px 0; }
  .fl-nots { grid-template-columns: 1fr 1fr; }
  .fl-band { padding: 64px 0; }
  .fl-sound { right: 50%; top: 72%; }
}
@media (max-width: 560px) {
  .fl-top-btn, .fl .top-cta .link-quiet:first-child { display: none; }
  .fl-console { grid-template-columns: 1fr; justify-items: center; padding: 16px; }
  .fl-console-head, .fl-parts, .fl-fields { justify-self: stretch; width: 100%; }
  .fl-fields { grid-template-columns: 1fr; }
  .fl-steps, .fl-nots { grid-template-columns: 1fr; }
  .fl-steps li { margin-right: 0; }
  .fl-row { grid-template-columns: 66px minmax(0, 1fr); }
  .fl-row em { grid-column: 2; }
  .fl-parts li { grid-template-columns: 104px minmax(0, 1fr) 44px; }
}

/* ---- Product page structure, shared with the other SYNTRALEX product pages: brand lockup and section
   links in the bar, hero with facts, labelled bands, value by audience with an estimator, trust,
   roadmap. ---- */
.fl-nav { margin-left: 12px; display: flex; gap: 22px; }
.fl-nav a { color: var(--mist); text-decoration: none; font-size: 15px; font-weight: 500; }
.fl-nav a:hover { color: var(--text); }
.fl-eyebrow { margin-bottom: 22px; font-size: 14px; color: var(--dim); }
.fl-eyebrow .mono { color: var(--signal); letter-spacing: .12em; }
.fl-label { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 500 12.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.fl-label::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.fl-paper .fl-label { color: #0a7f8f; }
.fl-alt { background: var(--deck); }
.fl-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.fl-prose { display: grid; gap: 16px; color: var(--mist); max-width: 62ch; }

/* Hero flow: three sources, one ring, one pipeline. */
.fl-hero { padding-bottom: 56px; }
.fl-flow { margin: 0; min-width: 0; display: grid; justify-items: stretch; }
.fl-flow-src { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fl-flow-src span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--deck); font-size: 14px; font-weight: 600; text-align: center; line-height: 1.2; }
.fl-flow-src i { width: 10px; height: 10px; border-radius: 50%; }
.fl-flow i.s1, .fl-flow .ln.s1 { background: var(--signal); stroke: var(--signal); }
.fl-flow i.s2, .fl-flow .ln.s2 { background: var(--wait); stroke: var(--wait); }
.fl-flow i.s3, .fl-flow .ln.s3 { background: var(--ok); stroke: var(--ok); }
.fl-flow svg { display: block; width: 100%; height: 150px; overflow: visible; }
.fl-flow .ln { fill: none; background: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 6 8; stroke-linecap: round; }
.fl-flow .ln.out { stroke: var(--text); }
@media (prefers-reduced-motion: no-preference) { .fl-flow .ln { animation: fl-run 1.6s linear infinite; } }
@keyframes fl-run { to { stroke-dashoffset: -28; } }
.fl-ring { justify-self: center; width: 46px; height: 46px; margin: -52px 0 6px; border-radius: 50%; border: 4px solid var(--signal); background: var(--ground); display: grid; place-items: center; box-shadow: 0 0 0 6px rgb(70 211 230 / .12), 0 0 28px rgb(70 211 230 / .35); position: relative; }
.fl-ring span { width: 10px; height: 10px; border-radius: 50%; background: var(--wait); }
.fl-flow figcaption { margin-top: 8px; font-size: 12px; color: var(--dim); text-align: center; }
.fl-facts { margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.fl-facts div { padding: 22px 20px 0 0; }
.fl-facts dt { font: 800 46px/1 var(--display); font-stretch: 125%; color: var(--signal); }
.fl-facts dd { margin: 8px 0 0; color: var(--mist); font-size: 15px; max-width: 24ch; }

/* Value by audience and the estimator. */
.fl-value { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fl-value article { background: var(--deck); border: 1px solid var(--rule); border-radius: 16px; padding: 24px; scroll-margin-top: 96px; }
.fl-value ul, .fl-road ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; color: var(--mist); font-size: 15.5px; }
.fl-value li, .fl-road li { padding-left: 18px; position: relative; }
.fl-value li::before, .fl-road li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--signal); }
.fl-calc { margin-top: 20px; border: 1px solid var(--rule-2); border-radius: 16px; background: linear-gradient(180deg, var(--deck-2), var(--deck)); padding: 24px; }
.fl-calc-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; }
.fl-cur { display: grid; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--dim); }
.fl-cur select { padding: 8px 10px; border-radius: 9px; border: 1px solid var(--rule-2); background: var(--ground); color: var(--text); font: 500 14.5px var(--sans); }
.fl-calc-body { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: center; }
.fl-sliders { display: grid; gap: 18px; }
.fl-sliders label { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 15px; color: var(--mist); }
.fl-sliders output { font: 600 15px var(--mono); color: var(--text); }
.fl-sliders input { grid-column: 1 / -1; width: 100%; height: 36px; margin: 0; accent-color: var(--signal); }
.fl-result { display: grid; gap: 6px; padding: 22px; border-radius: 14px; background: var(--ground); border: 1px solid var(--rule); }
.fl-result .r-label { font-size: 13.5px; color: var(--dim); }
.fl-result .r-big { font: 800 clamp(34px, 5vw, 54px)/1 var(--display); font-stretch: 125%; color: var(--signal); overflow-wrap: anywhere; }
.fl-result .r-sub { font-size: 14.5px; color: var(--mist); }
.fl-fine { margin-top: 16px; font-size: 13px; color: var(--dim); max-width: 80ch; }

.fl-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fl-kpis span { padding: 12px; border-radius: 10px; background: var(--deck-2); font-size: 12.5px; color: var(--dim); }
.fl-kpis b { display: block; font: 700 22px/1.1 var(--display); font-stretch: 112%; color: var(--text); }
.fl-kpis .due b { color: #ff7a6b; }
.fl-alt .fl-board { background: var(--ground); }

.fl-sec { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.fl-sec h3 { font-size: 18px; padding-top: 14px; border-top: 2px solid var(--wait); }
.fl-sec p { margin-top: 8px; color: var(--mist); font-size: 15.5px; }
.fl-sec a { color: var(--signal); }

.fl-road { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fl-road > div { border: 1px solid var(--rule); border-radius: 16px; padding: 22px; background: var(--ground); }
.fl-road .now { border-color: var(--ok); }
.fl-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule-2); font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); }
.fl-pill.ok { border-color: var(--ok); color: var(--ok); }
.fl-cta-in { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }
.fl-cta .hero-cta { margin-top: 0; }

@media (max-width: 1100px) { .fl-nav { display: none; } }
@media (max-width: 980px) {
  .fl-two { grid-template-columns: 1fr; gap: 24px; }
  .fl-facts { grid-template-columns: 1fr 1fr; }
  .fl-value, .fl-road { grid-template-columns: 1fr; }
  .fl-sec { grid-template-columns: 1fr 1fr; }
  .fl-calc-body { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .fl-sec { grid-template-columns: 1fr; }
  .fl-facts dt { font-size: 36px; }
  .fl-flow-src span { font-size: 12.5px; padding: 10px 4px; }
  .fl-brand b { font-size: 19px; }
  .fl .top-cta .link-quiet:first-child { display: inline; }
  .fl-calc { padding: 16px; }
}

.lede { margin-top: 28px; font-size: 19px; line-height: 1.6; color: var(--mist); max-width: 54ch; }
.hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 26px; font-size: 14.5px; color: var(--dim); max-width: 52ch; }
.fl .foot .fl-mark { transform: scale(.85); }