/* BBB Markets: scroll effects for the Scenario Lab, the marketplace and the
   privacy chapter. Loaded after site.css. */

/* ---------------------------------------------------- lab: demo + gauge -- */
.lab__mode { margin: 0 0 .8rem !important; min-height: 2.4em; font-size: .64rem !important; letter-spacing: .08em !important; color: var(--sc-accent) !important; text-transform: none !important; }
.gauge { --g: .5; position: relative; height: 4px; margin: 1.2rem auto 1.4rem; width: 100%; max-width: 14rem; border-radius: 2px; background: rgba(143, 211, 255, .14); }
.gauge i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--g) * 100%); border-radius: 2px; background: linear-gradient(90deg, rgba(143, 211, 255, .45), var(--sc-accent)); }
.gauge__mid { position: absolute; left: 50%; top: -4px; width: 1px; height: 12px; background: var(--silver); }
.gauge__lo, .gauge__hi { position: absolute; top: 10px; font-family: var(--sc-font-mono); font-size: .58rem; color: var(--muted); }
.gauge__lo { left: 0; } .gauge__hi { right: 0; }

/* -------------------------------------------- marketplace: panning rail -- */
.c-rail { left: 0; right: 0; top: clamp(4.5rem, 12vh, 8rem); bottom: auto; max-width: none; overflow: hidden; padding: 0; }
.rail__tag { margin: 0 var(--sc-gutter) .8rem; }
.rail { --pan: 0; display: flex; gap: 1rem; width: max-content; padding-left: 100vw; transform: translateX(calc(var(--pan) * (-100% + 40vw))); will-change: transform; }
.card { flex: none; width: 15rem; padding: .9rem 1rem; background: rgba(9, 15, 29, .82); border: 1px solid var(--line); border-radius: 6px; }
.card p { margin: 0 0 .5rem; font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--silver); }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0; font-size: .84rem; }
.card dt { color: var(--muted); }
.card dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.card--match { border-color: var(--line-strong); box-shadow: 0 0 0 1px rgba(143, 211, 255, .12) inset; }
.card__match { display: block; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--line); font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--sc-accent); }

/* ------------------------------------------------- privacy: data flow -- */
.c-flow { left: 50%; translate: -50% 0; top: clamp(4.5rem, 11vh, 7.5rem); bottom: auto; width: min(58rem, 92vw); max-width: none; }
.dataflow { display: grid; grid-template-columns: 1fr .5fr 1.25fr .5fr 1.2fr; align-items: center; }
.node { padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 6px; background: rgba(9, 15, 29, .8); }
.node p { margin: 0; font-size: .84rem; color: var(--sc-ink-soft); }
.node .node__k { margin-bottom: .25rem; font-family: var(--sc-font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }
.node--home { padding: 1.1rem 1.2rem; border-color: var(--sc-accent); box-shadow: 0 0 0 4px rgba(143, 211, 255, .07), 0 0 40px -10px rgba(143, 211, 255, .35); }
.node--home .node__k { color: var(--sc-accent); }
.node--home ul { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .2rem; font-size: .84rem; }
.node--home li { padding-left: .9rem; position: relative; }
.node--home li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--sc-accent); }
.node .node__stay { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--line); font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); }
.node-col { display: grid; gap: 1.6rem; }
.wire { width: 100%; height: 20px; overflow: visible; }
.wire--split { height: 11rem; }
.wire path { fill: none; stroke: var(--sc-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.flow__legend { display: flex; justify-content: center; gap: 2rem; margin: .8rem 0 0; font-family: var(--sc-font-mono); font-size: .64rem; letter-spacing: .08em; color: var(--muted); }

@media (max-width: 860px) {
  .c-rail { top: 3.8rem; }
  .card { width: 12rem; }
  .c-flow { top: 3.6rem; width: auto; left: var(--sc-gutter); right: var(--sc-gutter); translate: none; }
  .dataflow { grid-template-columns: 1fr; gap: .3rem; }
  .wire, .wire--split { display: none; }
  .node { padding: .45rem .7rem; }
  .node p { font-size: .72rem; }
  .node--home ul { grid-template-columns: 1fr 1fr; font-size: .72rem; }
  .node-col { gap: .3rem; grid-template-columns: 1fr 1fr; }
  .flow__legend { display: none; }
  .c-privacy .trust li:nth-child(n+3) { display: none; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .c-rail { top: 2.4rem; }
  .rail__tag, .card__match { display: none; }
  .card { width: 11rem; padding: .4rem .6rem; }
  .card dl { font-size: .66rem; }
  .c-flow { top: 2.4rem; }
  .dataflow { grid-template-columns: 1fr .3fr 1.2fr .3fr 1.2fr; }
  .node { padding: .3rem .5rem; }
  .node p { font-size: .62rem; }
  .node--home ul { font-size: .62rem; grid-template-columns: 1fr 1fr; }
  .node .node__stay { display: none; }
  .wire--split { height: 5rem; }
  .node-col { gap: .4rem; }
  .flow__legend, .c-privacy .trust, .c-market .body { display: none; }
}

/* spacing: top-anchored blocks clear the mark; small phones tighten the lab */
@media (max-width: 860px) { .c-rail, .c-flow { top: 4.6rem; } }
@media (max-height: 500px) and (orientation: landscape) { .c-rail, .c-flow { top: 3rem; } }
@media (max-width: 860px) and (max-height: 780px) {
  .lab__mode { min-height: 0; margin-bottom: .4rem !important; }
  .gauge { margin: .6rem auto .9rem; }
  .lab { gap: .6rem; padding: .8rem; }
  .lab__controls { gap: .7rem; }
  .lab__result { padding-top: .6rem; }
}

/* ------------------------------------------------------------- pricing -- */
.c-pricing { width: min(62rem, 92vw); max-width: none; text-align: left; }
.c-pricing > h2 { text-align: center; }
.pricing { display: grid; grid-template-columns: 1fr 1.25fr; gap: 1.5rem; margin-top: 1.6rem; align-items: stretch; }
.price { padding: 1.8rem 2rem; display: flex; flex-direction: column; }
.switch { display: inline-flex; margin-top: 1.1rem; padding: 3px; border: 1px solid var(--line-strong); border-radius: 3px; align-self: flex-start; }
.switch button { font: 500 .7rem/1 var(--sc-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); background: none; border: 0; padding: .55rem .8rem; border-radius: 2px; cursor: pointer; }
.switch button small { font-size: .58rem; letter-spacing: .06em; color: var(--sc-accent); margin-left: .3rem; text-transform: none; }
.switch button[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); }
.switch button[aria-pressed="true"] small { color: var(--sc-accent-ink); }
.price .btn--block { margin-top: auto; }
.price__alt { min-height: 2.8em; }
.included { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.included li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; background: rgba(9, 15, 29, .86); font-size: .9rem; transform: translateX(calc((1 - var(--in, 1)) * 1.2rem)); }
.included li::before { content: ""; flex: none; width: .45rem; height: .25rem; margin-right: .2rem; border-left: 1.5px solid var(--sc-accent); border-bottom: 1.5px solid var(--sc-accent); transform: rotate(-45deg) translateY(-2px); }
.included li span { flex: 1; }
.included a, .included em { flex: none; font: 500 .62rem var(--sc-font-mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--muted); text-decoration: none; }
.included a { color: var(--sc-accent); border-bottom: 1px solid var(--line-strong); padding-bottom: 1px; }
.included a:hover { border-bottom-color: var(--sc-accent); }

/* ---------------------------------------------------------- brand line -- */
.c-brand { text-align: center; top: 50%; bottom: auto; translate: -50% -50%; }
.brandline { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(2.2rem, min(1rem + 4.4vw, 9vh), 5.6rem); letter-spacing: -.035em; line-height: 1.08; transform: translateY(calc((1 - var(--in, 1)) * .4em)); }
.brandline--ice { color: var(--sc-accent); }

/* --------------------------------------------------------------- close -- */
.odo { width: min(34rem, 80vw); margin: 1rem auto 0; }
.odo__bar { height: 3px; background: rgba(143, 211, 255, .14); border-radius: 2px; overflow: hidden; }
.odo__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--sc-accent), #968CFF); transform-origin: 0 50%; transform: scaleX(0); }
.odo__ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; font-family: var(--sc-font-mono); font-size: .64rem; letter-spacing: .06em; color: var(--muted); }
.odo__ends b { color: var(--sc-ink); font-weight: 500; }
.final__cap { margin: .9rem auto 1.6rem; }

@media (max-width: 860px) {
  .c-pricing { width: auto; }
  .pricing { grid-template-columns: 1fr; gap: .6rem; margin-top: .8rem; }
  .price { padding: 1rem 1.1rem; }
  .price__amount b { font-size: 2.6rem; }
  .price__alt { min-height: 0; font-size: .8rem; }
  .price .btn--block { margin-top: .8rem; }
  .included li { padding: .4rem .7rem; font-size: .76rem; }
  .included a, .included em { display: none; }
  .c-brand { left: var(--sc-gutter); right: var(--sc-gutter); translate: 0 -50%; }
  .odo__ends { font-size: .56rem; }
}
@media (max-width: 860px) and (max-height: 780px) {
  .included li:nth-child(n+6) { display: none; }
  .switch { margin-top: .6rem; }
  .final__cap { margin: .6rem auto .9rem; }
}
@media (max-height: 820px) and (min-width: 861px) {
  .pricing { margin-top: 1rem; }
  .price { padding: 1.2rem 1.4rem; }
  .price__amount b { font-size: 3.4rem; }
  .included li { padding: .5rem .9rem; font-size: .84rem; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .c-pricing > h2 { display: none; }
  .pricing { grid-template-columns: 1fr 1.3fr; margin-top: 0; gap: .8rem; }
  .price { display: flex; padding: .6rem .9rem; }
  .price__amount b { font-size: 2rem; }
  .switch { margin-top: .4rem; } .switch button { padding: .35rem .5rem; font-size: .58rem; }
  .price__alt { font-size: .64rem; min-height: 0; }
  .included li { padding: .22rem .6rem; font-size: .64rem; }
  .included a, .included em { display: none; }
  .c-brand { translate: 0 -50%; left: var(--sc-gutter); right: var(--sc-gutter); }
  .brandline { font-size: 9vh; }
  .odo { margin-top: .3rem; } .final__cap { margin: .3rem auto .4rem; }
}

/* phones: the readout label gives way so the value is never clipped */
@media (max-width: 480px) {
  .ribbon__label { max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ribbon__value { min-width: 0; font-size: .92rem; }
}