/* The customer layer's surfaces, in the instrument's own grammar: radius 0, hairlines, one teal accent, mono for what
   the machine says. Nothing here introduces a second visual language. */

/* ---------------------------------------------------------------- buttons, shared */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t1); border: 1px solid var(--line); padding: 10px 16px; background: var(--bg1); cursor: pointer; transition: border-color 120ms, color 120ms, background 120ms; }
.btn:hover { color: var(--t0); border-color: var(--t2); }
.btn.pri { color: var(--acc); border-color: var(--acc); background: var(--accw); }
.btn.pri:hover { background: rgba(126,200,185,0.22); }
.btn.bad { color: var(--bad); border-color: rgba(212,107,95,0.5); }
.btn.q { border-color: transparent; background: none; }
.btn[disabled], .btn.busy { opacity: 0.55; pointer-events: none; }
.btn.wide { width: 100%; justify-content: center; }

/* ---------------------------------------------------------------- the plan chip in the top bar */
.plan-chip { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--line); color: var(--t1); margin-left: 12px; white-space: nowrap; }
.plan-chip.pro { color: var(--acc); border-color: var(--accl); }
.plan-chip.free { color: var(--t1); }
.plan-chip.out { color: var(--t2); }
.plan-chip:hover { color: var(--t0); }

/* ---------------------------------------------------------------- auth: one column, centred, the instrument's card */
.auth { min-height: 100dvh; display: grid; place-items: start center; padding: calc(var(--top) + 44px) 24px 80px; }
.auth .card { width: min(440px, 100%); border: 1px solid var(--line); background: var(--bg1); padding: 30px 32px 28px; position: relative; }
.auth .card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--acc), transparent 60%); opacity: 0.7; }
.auth h1 { font-size: 20px; margin: 6px 0 4px; }
.auth .lede { color: var(--t1); margin: 0 0 22px; font-size: 13px; }
.auth label { display: block; margin: 0 0 14px; }
.auth label .k { display: block; margin-bottom: 6px; }
.auth input[type="email"], .auth input[type="password"], .auth input[type="text"], .acct input[type="text"], .acct input[type="password"] { width: 100%; background: var(--bg0); border: 1px solid var(--line); color: var(--t0); padding: 11px 12px; font-family: var(--mono); font-size: 13px; outline: none; }
.auth input:focus, .acct input:focus { border-color: var(--acc); }
.auth .err { border: 1px solid rgba(212,107,95,0.5); color: var(--bad); padding: 10px 12px; font-family: var(--mono); font-size: 11.5px; margin: 0 0 14px; }
.auth .ok { border: 1px solid rgba(111,174,134,0.45); color: var(--ok); padding: 10px 12px; font-family: var(--mono); font-size: 11.5px; margin: 0 0 14px; }
.auth .alt { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line2); color: var(--t2); font-size: 12.5px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth .alt a { color: var(--acc); }
/* the owner's way in: a key in the card's corner, quiet until it is pointed at or focused (customer.js) */
.auth .owner-door { position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2); transition: color 160ms ease-out; }
.auth .owner-door svg { width: 13px; height: 13px; display: block; }
.auth .owner-door:hover, .auth .owner-door:focus-visible { color: var(--acc); }
.auth .bound { margin-top: 26px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t3); text-align: center; }

/* ---------------------------------------------------------------- the upgrade block */
.paywall { border: 1px solid var(--line); border-left: 2px solid var(--acc); background: var(--bg1); padding: 18px 20px 16px; margin: 8px 0; position: relative; }
.paywall.compact { padding: 12px 14px; }
.paywall .pw-eyebrow { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.paywall .pw-eyebrow .k { color: var(--acc); }
.paywall .pw-note { color: var(--t3); }
.paywall .pw-title { font-size: 15px; font-weight: 500; margin: 8px 0 4px; }
.paywall.compact .pw-title { font-size: 13.5px; }
.paywall .pw-body { color: var(--t1); font-size: 13px; margin: 0 0 12px; max-width: 70ch; }
.paywall.compact .pw-body { display: none; }
.paywall .pw-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.paywall .pw-actions .mt { margin-left: auto; }

/* ---------------------------------------------------------------- pricing */
.pricing { padding: var(--top) 24px 60px; max-width: 1180px; margin: 0 auto; }
.pricing .head { padding: 40px 0 26px; border-bottom: 1px solid var(--line); }
.pricing h1 { font-size: 26px; letter-spacing: -0.02em; }
.pricing .head p { color: var(--t1); max-width: 68ch; margin: 10px 0 0; }
.pricing .toggle { display: inline-flex; border: 1px solid var(--line); margin-top: 22px; }
.pricing .toggle button { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 16px; color: var(--t2); }
.pricing .toggle button.on { color: var(--t0); background: var(--bg2); }
.pricing .toggle small { color: var(--acc); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.pricing .plans { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; margin-top: 28px; border: 1px solid var(--line); }
.pricing .plan { padding: 26px 28px 28px; background: var(--bg1); position: relative; }
.pricing .plan + .plan { border-left: 1px solid var(--line); }
.pricing .plan.rec { background: var(--bg2); }
.pricing .plan.rec::before { content: ""; position: absolute; left: -1px; top: -1px; right: -1px; height: 2px; background: var(--acc); }
.pricing .plan .name { font-size: 18px; font-weight: 500; }
.pricing .plan .tag { color: var(--t2); font-size: 12.5px; margin-top: 2px; }
.pricing .plan .price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 8px; }
.pricing .plan .price .n { font-family: var(--mono); font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pricing .plan .price .per { color: var(--t2); font-size: 12px; }
.pricing .plan .sub { color: var(--t2); font-family: var(--mono); font-size: 11px; min-height: 16px; }
.pricing .plan .cta { margin: 20px 0 22px; }
.pricing .plan ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.pricing .plan li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 13px; color: var(--t1); }
.pricing .plan li i { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border: 1px solid var(--line); position: relative; }
.pricing .plan li.y { color: var(--t0); }
.pricing .plan li.y i { border-color: var(--acc); }
.pricing .plan li.y i::after { content: ""; position: absolute; inset: 3px; background: var(--acc); }
.pricing .plan li small { color: var(--t3); font-family: var(--mono); font-size: 10.5px; margin-left: auto; white-space: nowrap; }
.pricing .compare { margin-top: 36px; }
.pricing .compare h2 { font-size: 15px; margin-bottom: 12px; }
.pricing table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pricing th, .pricing td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; }
.pricing th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); font-weight: 400; }
.pricing td.c { text-align: center; font-family: var(--mono); color: var(--t2); }
.pricing td.c.y { color: var(--acc); }
.pricing .honest { margin-top: 30px; border: 1px solid var(--line); padding: 16px 18px; color: var(--t1); font-size: 13px; max-width: 80ch; }
.pricing .honest .k { color: var(--watch); display: block; margin-bottom: 6px; }
@media (max-width: 820px) { .pricing .plans { grid-template-columns: minmax(0, 1fr); } .pricing .plan { min-width: 0; padding: 22px 18px 24px; } .pricing .plan li small { white-space: normal; } .pricing .plan + .plan { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------------------------------------------------------------- account */
.acct { padding: var(--top) 24px 60px; max-width: 1100px; margin: 0 auto; }
.acct .head { padding: 36px 0 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.acct h1 { font-size: 22px; }
.acct .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 22px; }
.acct .card { border: 1px solid var(--line); background: var(--bg1); padding: 18px 20px; }
.acct .card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono); color: var(--t2); font-weight: 400; margin-bottom: 12px; display: flex; justify-content: space-between; }
.acct .plan-big { font-family: var(--mono); font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; }
.acct .plan-big.pro { color: var(--acc); }
.acct .row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line2); font-size: 12.5px; }
.acct .row:first-of-type { border-top: 0; }
.acct .row .k { flex: 0 0 auto; }
.acct .row .v { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--t0); }
.acct .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.acct .wl li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line2); }
.acct .wl li a { font-family: var(--mono); color: var(--t0); }
.acct .wl li button { font-family: var(--mono); font-size: 10.5px; color: var(--t3); letter-spacing: 0.06em; text-transform: uppercase; }
.acct .wl li button:hover { color: var(--bad); }
.acct .msg { font-family: var(--mono); font-size: 11.5px; padding: 8px 10px; border: 1px solid var(--line); margin-top: 10px; color: var(--t1); }
.acct .msg.ok { color: var(--ok); border-color: rgba(111,174,134,0.45); } .acct .msg.err { color: var(--bad); border-color: rgba(212,107,95,0.5); }
.acct label { display: block; margin: 10px 0; } .acct label .k { display: block; margin-bottom: 5px; }
.acct .flag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line); color: var(--t1); }
.acct .flag.watch { color: var(--watch); border-color: rgba(207,168,95,0.5); } .acct .flag.ok { color: var(--ok); border-color: rgba(111,174,134,0.45); } .acct .flag.bad { color: var(--bad); border-color: rgba(212,107,95,0.5); }

/* ---------------------------------------------------------------- onboarding */
.onb { min-height: calc(100dvh - var(--top)); display: grid; place-items: start center; padding: 48px 24px 80px; }
.onb .card { width: min(720px, 100%); border: 1px solid var(--line); background: var(--bg1); padding: 30px 34px 28px; }
.onb .steps { display: flex; gap: 6px; margin-bottom: 20px; }
.onb .steps i { flex: 1; height: 2px; background: var(--line); }
.onb .steps i.on { background: var(--acc); }
.onb h1 { font-size: 21px; margin-bottom: 8px; }
.onb p { color: var(--t1); font-size: 13.5px; max-width: 64ch; }
.onb .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 6px; }
.onb .three div { border: 1px solid var(--line); padding: 12px 14px; font-size: 12.5px; color: var(--t1); }
.onb .three .k { display: block; color: var(--acc); margin-bottom: 6px; }
.onb .sigdemo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 16px 0; }
.onb .sigdemo div { border: 1px solid var(--line); padding: 12px; }
.onb .sigdemo .big { font-family: var(--mono); font-size: 18px; letter-spacing: 0.06em; }
.onb .sigdemo .big.buy { color: var(--acc); } .onb .sigdemo .big.hold { color: var(--t1); } .onb .sigdemo .big.none { color: var(--t2); font-size: 12px; letter-spacing: 0.1em; }
.onb .wlpick { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.onb .wlpick button { font-family: var(--mono); font-size: 11.5px; padding: 8px 12px; border: 1px solid var(--line); color: var(--t1); }
.onb .wlpick button.on { border-color: var(--acc); color: var(--acc); background: var(--accw); }
.onb .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .onb .three, .onb .sigdemo { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- generic list pages (markets, research, strategies, ...) */
.lst { padding: var(--top) 24px 60px; max-width: 1240px; margin: 0 auto; }
.lst .head { padding: 32px 0 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.lst h1 { font-size: 21px; }
.lst .head .sub { color: var(--t1); font-size: 13px; max-width: 72ch; margin-top: 6px; }
.lst .facts { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--t2); letter-spacing: 0.04em; }
.lst .facts b { color: var(--t0); font-weight: 500; }
.lst table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
@media (max-width: 760px) { .tbl { overflow-x: auto; overscroll-behavior-x: contain; } .tbl > table { min-width: 560px; } .lst .tbl th { position: static; } }
.lst th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); text-align: left; padding: 10px 10px 8px; border-bottom: 1px solid var(--line); font-weight: 400; position: sticky; top: var(--top); background: var(--bg0); z-index: 2; }
.lst td { padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; overflow-wrap: anywhere; transition: background-color 120ms ease-out; }
.lst td.mt { min-width: 16rem; }
.lst tr.link { cursor: pointer; } .lst tr.link:hover td { background: var(--hi); }
.lst td.mono, .lst td .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }
.lst td.r { text-align: right; }
.lst .tk { font-family: var(--mono); font-size: 13px; color: var(--t0); }
.lst .nm { color: var(--t2); font-size: 12px; }
.lst .sec { margin-top: 26px; }
.lst .sec > h2 { font-size: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: baseline; }
.lst .sec > h2 .mt { font-weight: 400; }
.lst .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.lst .cards > div { border: 1px solid var(--line); background: var(--bg1); padding: 14px 16px; }
.lst .cards .n { font-family: var(--mono); font-size: 22px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lst .cards .kk { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); margin-top: 4px; }
.lst .cards .d { color: var(--t1); font-size: 12.5px; margin-top: 8px; }
.lst .pager { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.lst .fresh { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.lst .fresh.stale { color: var(--watch); } .lst .fresh.fresh { color: var(--ok); }
.lst .blk { border: 1px solid var(--line); background: var(--bg1); padding: 14px 16px; margin-top: 12px; }
.lst .blk h4 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); font-weight: 400; margin-bottom: 8px; }
.lst .foot { margin-top: 30px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t3); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- the signal state word, wherever it appears large */
.sigword { font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.sigword.buy { color: var(--acc); } .sigword.sell { color: var(--bad); } .sigword.hold { color: var(--t1); }
.sigword.none, .sigword.unavailable, .sigword.unvalidated { color: var(--t2); }

/* ---------------------------------------------------------------- the command center */
.cc { padding: var(--top) 24px 60px; max-width: 1240px; margin: 0 auto; }
.lst .cc { padding: 0; }   /* the readiness block reuses the command center's tiles inside a list page */
.cc .grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin-top: 18px; }
.cc .card { border: 1px solid var(--line); background: var(--bg1); padding: 16px 18px; }
.cc .card h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); font-weight: 400; margin-bottom: 10px; display: flex; justify-content: space-between; }
.cc .card h3 a { color: var(--acc); }
.cc .sigbig { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.cc .sigbig .sigword { font-size: 28px; }
.cc .sigbig .tk { font-family: var(--mono); font-size: 20px; }
.cc .wl li { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--line2); gap: 10px; }
.cc .wl li:first-child { border-top: 0; }
.cc .wl .tk { font-family: var(--mono); }
.cc .wl .st { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.cc .ready { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cc .ready div { border: 1px solid var(--line); padding: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); }
.cc .ready b { display: block; font-size: 13px; letter-spacing: 0.04em; margin-top: 4px; font-weight: 500; }
.cc .ready .y b { color: var(--ok); } .cc .ready .n b { color: var(--bad); }
.cc .grid > *, .lst .cards > *, .cc .ready > * { min-width: 0; }
@media (max-width: 900px) { .cc .grid { grid-template-columns: 1fr; } .cc .ready { grid-template-columns: 1fr 1fr; } }

/* the simple buy score and its placeholder signal (score.js): a chip in the score's own colours, never the validated
   signal's word. Strong is a filled chip, weak a pale one, neutral a plain outline. */
.sc-chip { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid; white-space: nowrap; line-height: 1.3; }
.sc-chip small { font-size: 9px; letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.75; }
.sc-chip.strong-buy { color: #0b1510; background: var(--ok); border-color: var(--ok); }
.sc-chip.weak-buy { color: #a7d2b4; background: rgba(111,174,134,0.10); border-color: rgba(111,174,134,0.40); }
.sc-chip.neutral { color: var(--t1); background: transparent; border-color: var(--line); }
.sc-chip.weak-sell { color: #e3a89f; background: rgba(212,107,95,0.10); border-color: rgba(212,107,95,0.40); }
.sc-chip.strong-sell { color: #170c0b; background: var(--bad); border-color: var(--bad); }
.sc-chip.big { font-size: 17px; padding: 5px 12px; letter-spacing: 0.06em; }
.sc-word.strong-buy { color: var(--ok); } .sc-word.weak-buy { color: #a7d2b4; } .sc-word.neutral { color: var(--t1); } .sc-word.weak-sell { color: #e3a89f; } .sc-word.strong-sell { color: var(--bad); }
.buyscore { border: 1px solid var(--line); background: var(--bg1); padding: 12px 14px 14px; margin-top: 12px; }
.buyscore .bs-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.buyscore .bs-num { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.buyscore .bs-num b { font-family: var(--mono); font-size: 34px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; color: var(--t0); }
.buyscore .bs-num span { font-family: var(--mono); font-size: 10.5px; color: var(--t2); text-transform: uppercase; letter-spacing: 0.06em; }
.buyscore .bs-bar { position: relative; height: 4px; background: var(--bg3); margin: 10px 0 4px; }
.buyscore .bs-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--t1); }
.buyscore .bs-bar u { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--t3); }
.buyscore .bs-factors { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.buyscore .bs-f { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--t0); }
.buyscore .bs-f small { font-family: var(--mono); font-size: 9.5px; color: var(--t3); letter-spacing: 0.04em; margin-left: 4px; }
.buyscore .bs-f b { font-family: var(--mono); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--t1); }
.buyscore .bs-fbar { height: 2px; background: var(--bg3); margin-top: 4px; position: relative; }
.buyscore .bs-fbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc2); }
.buyscore .bs-note { color: var(--t2); font-size: 12px; margin-top: 4px; }
.buyscore .bs-disc { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line2); color: var(--t1); font-size: 12px; line-height: 1.5; }
.buyscore .bs-disc b { color: var(--t0); font-weight: 500; }
.buyscore .bs-valid { margin: 12px 0 0; padding: 8px 10px; border: 1px solid var(--accl); background: var(--accw); color: var(--t0); font-size: 12.5px; }
.buyscore .bs-valid b { font-family: var(--mono); letter-spacing: 0.06em; color: var(--acc); font-weight: 500; }
.buyscore .bs-th { margin-top: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--t3); }
@media (prefers-reduced-motion: no-preference) {
  .buyscore .bs-bar i, .buyscore .bs-fbar i { transform-origin: left center; animation: bs-grow 700ms cubic-bezier(.16,1,.3,1) both; }
  .buyscore .bs-factors li:nth-child(2) .bs-fbar i { animation-delay: 60ms; } .buyscore .bs-factors li:nth-child(3) .bs-fbar i { animation-delay: 120ms; } .buyscore .bs-factors li:nth-child(4) .bs-fbar i { animation-delay: 180ms; }
  @keyframes bs-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}