/* ==========================================================================
   Concept mockups — miniature, fully scalable layouts inside device frames.
   All internal sizes use em; 1em = 1/80 of the screen width (16px at 1280px).
   ========================================================================== */

.browser {
  background: #FBFAF7; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 0 0 1px rgba(20,18,15,.08), 0 30px 60px -28px rgba(20,18,15,.35), 0 12px 24px -16px rgba(20,18,15,.18);
}
.browser__bar { display: flex; align-items: center; gap: 12px; height: clamp(22px, 2.4vw, 34px); padding: 0 clamp(8px, 1vw, 14px); background: #EFECE6; border-bottom: 1px solid rgba(20,18,15,.07); }
.browser__dots { display: flex; gap: 5px; }
.browser__dots i { width: clamp(5px, .55vw, 9px); aspect-ratio: 1; border-radius: 50%; background: #D3CEC5; }
.browser__url { flex: 1; max-width: 46%; margin: 0 auto; transform: translateX(-20px); text-align: center; font: 500 clamp(7px, .65vw, 11px)/1 var(--font-body); color: #8A847A; background: #F8F6F2; border-radius: 99px; padding: .5em 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser--dark { background: #0F0F10; box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 30px 70px -30px rgba(0,0,0,.7); }
.browser--dark .browser__bar { background: #1A1A1B; border-color: rgba(255,255,255,.05); }
.browser--dark .browser__dots i { background: #3A3A3C; }
.browser--dark .browser__url { background: #232325; color: #8C8C90; }

.screen { container-type: inline-size; aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.m { font-size: 1.25cqw; width: 100%; height: 100%; position: relative; overflow: hidden; line-height: 1.3; font-family: var(--font-body); }
:where(.m, .p) span { display: block; }

.phone {
  background: #111; border-radius: 13.5% / 6.4%; padding: 3.2%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 30px 60px -24px rgba(20,18,15,.45), 0 10px 20px -12px rgba(20,18,15,.25);
}
.phone__screen { container-type: inline-size; aspect-ratio: 9 / 19.5; border-radius: 10.8% / 5%; overflow: hidden; position: relative; }
.phone__screen::before { content: ''; position: absolute; z-index: 5; top: 2.2%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); background: #0B0B0B; border-radius: 99px; }
.p { font-size: calc(100cqw / 22); width: 100%; height: 100%; padding: 4.2em 1.2em 1.2em; position: relative; overflow: hidden; line-height: 1.3; font-family: var(--font-body); display: flex; flex-direction: column; }

/* ---------- Northline Advisory ---------- */
.m-north { background: #0F2A24; color: #EFE8DA; padding: 0 3.5em; display: flex; flex-direction: column; }
.mn-nav { display: flex !important; align-items: center; gap: 2em; height: 5em; border-bottom: 1px solid rgba(239,232,218,.12); }
.mn-logo { font-family: var(--font-serif); font-size: 1.5em; letter-spacing: -.01em; display: flex !important; align-items: baseline; gap: .35em; margin-right: auto; }
.mn-logo em { font-family: var(--font-body); font-style: normal; font-size: .42em; letter-spacing: .25em; text-transform: uppercase; opacity: .7; }
.mn-links { display: flex !important; gap: 2.2em; font-size: .85em; opacity: .8; }
.mn-cta { font-size: .8em; padding: .9em 1.4em; border: 1px solid #C8A96A; color: #E9D3A0; }
.mn-hero { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 3em; align-items: center; }
.mn-eye { font-size: .72em; letter-spacing: .22em; text-transform: uppercase; color: #C8A96A; margin-bottom: 1.6em; }
.mn-h { font-family: var(--font-serif); font-size: 4.1em; line-height: .98; letter-spacing: -.02em; margin-bottom: .45em; }
.mn-h em { color: #E2C98F; }
.mn-p { font-size: 1.05em; line-height: 1.55; opacity: .75; max-width: 28em; margin-bottom: 2.2em; }
.mn-btns { display: flex !important; gap: 1em; font-size: .85em; }
.mn-b1 { background: #EFE8DA; color: #0F2A24; padding: 1em 1.6em; font-weight: 600; }
.mn-b2 { padding: 1em 0; border-bottom: 1px solid rgba(239,232,218,.4); }
.mn-art { position: relative; height: 82%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; align-items: end; }
.mn-art i { display: block; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, #2C5249 0%, #1A3C35 100%); height: 100%; position: relative; overflow: hidden; }
.mn-art i:nth-child(2) { height: 86%; background: linear-gradient(180deg, #C8A96A 0%, #8E7240 100%); }
.mn-art i:nth-child(3) { height: 70%; }
.mn-art i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 1.6em, rgba(255,255,255,.05) 1.6em calc(1.6em + 1px)); }
.mn-art b { position: absolute; width: 5em; height: 5em; border-radius: 50%; background: #EFE8DA; top: 2%; right: 4%; opacity: .92; }
.mn-strip { display: grid !important; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(239,232,218,.12); height: 5.5em; align-items: center; }
.mn-strip span { font-size: .9em; display: flex !important; gap: .9em; align-items: center; }
.mn-strip b { font-size: .75em; color: #C8A96A; font-weight: 500; }

.p-north { background: #0F2A24; color: #EFE8DA; }
.pn-top { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 2.4em; }
.pn-top .mn-logo { font-size: 1.15em; }
.p-burger { display: grid !important; gap: .3em; width: 1.3em; }
.p-burger i { height: 1px; background: currentColor; display: block; }
.p-north .mn-eye { margin-bottom: 1em; font-size: .6em; }
.pn-h { font-family: var(--font-serif); font-size: 2.3em; line-height: 1; letter-spacing: -.02em; margin-bottom: .5em; }
.pn-h em { color: #E2C98F; }
.pn-p { font-size: .85em; opacity: .75; margin-bottom: 1.4em; line-height: 1.5; }
.pn-b { background: #EFE8DA; color: #0F2A24; font-size: .8em; font-weight: 600; padding: 1em; text-align: center; margin-bottom: 1.6em; }
.pn-art { flex: 1; height: auto; }

/* ---------- Rift Roasters ---------- */
.m-rift { background: #F1E7D9; color: #2A1A12; display: flex; flex-direction: column; }
.mr-nav { display: flex !important; align-items: center; gap: 2em; height: 4.6em; padding: 0 3em; }
.mr-logo { font-family: var(--font-display); font-variation-settings: 'wdth' 120; font-weight: 700; letter-spacing: .14em; font-size: 1.05em; margin-right: auto; }
.mr-logo b { color: #B4532A; }
.mr-links { display: flex !important; gap: 2em; font-size: .85em; }
.mr-cart { font-size: .8em; padding: .7em 1.2em; border-radius: 99px; background: #2A1A12; color: #F1E7D9; }
.mr-hero { display: grid !important; grid-template-columns: 1fr 1.1fr; height: 25em; margin: 0 3em; }
.mr-copy { display: flex !important; flex-direction: column; justify-content: center; padding-right: 2em; }
.mr-eye { font-size: .72em; letter-spacing: .2em; text-transform: uppercase; color: #B4532A; margin-bottom: 1.2em; font-weight: 600; }
.mr-h { font-family: var(--font-display); font-variation-settings: 'wdth' 80; font-weight: 700; font-size: 3.6em; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: .6em; }
.mr-btns { display: flex !important; gap: .8em; font-size: .85em; }
.mr-b1 { background: #B4532A; color: #FFF6EC; padding: .95em 1.6em; border-radius: 99px; font-weight: 600; }
.mr-b2 { padding: .95em 1.6em; border-radius: 99px; border: 1px solid rgba(42,26,18,.3); }
.mr-panel { background: #B4532A; border-radius: 1.4em; display: flex !important; align-items: flex-end; justify-content: center; gap: 1.2em; padding-bottom: 2.6em; position: relative; overflow: hidden; }
.mr-panel::before { content: ''; position: absolute; width: 22em; height: 22em; border-radius: 50%; background: #C96A3F; top: -6em; right: -5em; }
.mr-row { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1.4em; padding: 2em 3em; }
.mr-card { font-size: .82em; }
.mr-card b { display: block; font-size: 1.05em; margin-top: .7em; }
.mr-card span { opacity: .65; }
.mr-card em { font-style: normal; font-weight: 600; display: block; margin-top: .3em; color: #B4532A; }
.mr-thumb { height: 7em; border-radius: .8em; position: relative; }
.mr-thumb.t1 { background: #E5D2BC; } .mr-thumb.t2 { background: #2F3B33; } .mr-thumb.t3 { background: #D9B47C; } .mr-thumb.t4 { background: #CDBFAF; }

.bag { position: relative; z-index: 1; width: 7em; height: 10em; border-radius: .5em .5em .9em .9em; background: #EFE3D2; box-shadow: inset -1.2em 0 1.6em -1em rgba(0,0,0,.18), 0 1.2em 2em -1em rgba(0,0,0,.35); }
.bag::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1.1em; border-radius: .5em .5em 0 0; background: repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 .25em, transparent .25em .5em); }
.bag--a { background: #F3EADB; height: 11.5em; }
.bag--b { background: #2F3B33; color: #F1E7D9; }
.bag--c { background: #E7C48C; height: 9em; }
.bag__label { position: absolute; left: .8em; right: .8em; top: 38%; font-size: .55em; line-height: 1.3; text-align: center; padding: .8em .4em; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .9; }
.bag__label b { display: block; font-family: var(--font-display); font-variation-settings: 'wdth' 80; text-transform: uppercase; font-size: 1.8em; letter-spacing: .02em; }
.bag--lg { width: 9em; height: 13em; font-size: 1em; }

.p-rift { background: #F1E7D9; color: #2A1A12; }
.pr-top { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 1em; }
.pr-top .mr-logo { font-size: .8em; }
.pr-cart { width: 1.8em; height: 1.8em; border-radius: 50%; background: #2A1A12; color: #F1E7D9; font-size: .7em; display: grid !important; place-items: center; }
.pr-hero { background: #B4532A; border-radius: 1em; height: 16em; display: flex !important; align-items: flex-end; justify-content: center; padding-bottom: 1.4em; margin-bottom: 1.2em; overflow: hidden; position: relative; }
.pr-hero::before { content: ''; position: absolute; width: 14em; height: 14em; border-radius: 50%; background: #C96A3F; top: -5em; right: -5em; }
.pr-name { font-family: var(--font-display); font-variation-settings: 'wdth' 80; font-weight: 700; text-transform: uppercase; font-size: 1.6em; line-height: 1; }
.pr-notes { font-size: .75em; opacity: .65; margin: .4em 0 1em; }
.pr-opts { display: flex !important; gap: .4em; font-size: .7em; margin-bottom: .6em; }
.pr-opts span { flex: 1; text-align: center; padding: .7em 0; border: 1px solid rgba(42,26,18,.25); border-radius: 99px; }
.pr-opts .on { background: #2A1A12; color: #F1E7D9; border-color: #2A1A12; }
.pr-buy { margin-top: auto; display: flex !important; align-items: center; justify-content: space-between; background: #2A1A12; color: #F1E7D9; border-radius: 99px; padding: .45em .45em .45em 1.2em; font-size: .8em; }
.pr-buy em { font-style: normal; font-weight: 600; }
.pr-buy span { background: #B4532A; border-radius: 99px; padding: .8em 1.3em; font-weight: 600; }

/* ---------- Studio Okoa ---------- */
.m-okoa { background: #F7F6F3; color: #111; padding: 0 3em; display: flex; flex-direction: column; }
.mo-nav { display: flex !important; justify-content: space-between; align-items: center; height: 4.4em; font-size: .9em; font-weight: 600; }
.mo-links { display: flex !important; gap: 2em; font-weight: 400; }
.mo-head { display: flex !important; justify-content: space-between; align-items: flex-end; padding: 2em 0 2.4em; border-bottom: 1px solid #111; }
.mo-h { font-family: var(--font-display); font-variation-settings: 'wdth' 70; font-weight: 500; font-size: 4.6em; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.mo-meta { font-size: .8em; line-height: 1.6; text-align: right; color: #666; }
.mo-grid { flex: 1; display: grid !important; grid-template-columns: 1.4fr 1fr 1fr; gap: 1em; padding: 1.4em 0 2.4em; }
.mo-img { position: relative; overflow: hidden; }
.mo-img em { position: absolute; left: .8em; bottom: .7em; font-style: normal; font-size: .75em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.mo-img.i1 { background:
  linear-gradient(180deg, transparent 62%, #6F7A6E 62% 64%, #3E4A42 64%),
  linear-gradient(90deg, transparent 18%, #2B2B2A 18% 82%, transparent 82%) 0 38% / 100% 26% no-repeat,
  linear-gradient(90deg, transparent 22%, #E8DDC8 22% 40%, #2B2B2A 40% 42%, #E8DDC8 42% 60%, #2B2B2A 60% 62%, #E8DDC8 62% 78%, transparent 78%) 0 46% / 100% 12% no-repeat,
  linear-gradient(180deg, #C8D3D6, #E9E4DA); }
.mo-img.i2 { background:
  linear-gradient(90deg, #B9B2A6 0 12%, transparent 12% 88%, #B9B2A6 88%),
  repeating-linear-gradient(180deg, #D8D1C4 0 8%, #8C8577 8% 9%),
  #D8D1C4; }
.mo-img.i3 { background:
  linear-gradient(160deg, transparent 40%, rgba(0,0,0,.25) 40%),
  repeating-linear-gradient(90deg, #4A4540 0 10%, #6B635A 10% 12%),
  #4A4540; }

/* ---------- Pulse ops dashboard ---------- */
.m-pulse { background: #0F0F10; color: #E8E6E1; display: grid; grid-template-columns: 13em 1fr; }
.mp-side { border-right: 1px solid rgba(255,255,255,.07); padding: 1.6em 1.2em; display: flex !important; flex-direction: column; gap: .2em; font-size: .85em; color: #8E8C88; }
.mp-side .mp-logo { font-family: var(--font-display); font-variation-settings: 'wdth' 112; font-weight: 700; letter-spacing: .16em; color: #FF6A2B; font-size: 1.15em; margin-bottom: 1.6em; }
.mp-logo i { font-style: normal; color: #8E8C88; font-weight: 400; letter-spacing: .05em; margin-left: .4em; font-size: .8em; }
.mp-side > span:not(.mp-logo) { padding: .6em .8em; border-radius: .5em; }
.mp-side .on { background: rgba(255,255,255,.06); color: #fff; }
.mp-main { padding: 1.6em 2em; display: flex !important; flex-direction: column; gap: 1.4em; min-width: 0; }
.mp-top { display: flex !important; justify-content: space-between; align-items: center; font-size: .95em; color: #9C9A95; }
.mp-top b { color: #fff; font-weight: 600; }
.mp-live { display: inline-flex !important; align-items: center; gap: .5em; font-size: .8em; color: #7EE2A8; padding: .4em .9em; border: 1px solid rgba(126,226,168,.3); border-radius: 99px; }
.mp-live::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: #7EE2A8; }
.mp-kpis { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.mp-kpis > span { background: #19191B; border: 1px solid rgba(255,255,255,.06); border-radius: .8em; padding: 1.1em 1.2em; position: relative; overflow: hidden; }
.mp-kpis em { font-style: normal; font-size: .75em; color: #8E8C88; display: block; }
.mp-kpis b { font-size: 2.1em; font-weight: 600; letter-spacing: -.02em; display: block; margin: .15em 0 .1em; }
.mp-kpis b small { font-size: .45em; color: #8E8C88; margin-left: .2em; }
.mp-kpis > span > small { font-size: .7em; color: #6E6C68; display: block; }
.mp-kpis i { position: absolute; left: 0; bottom: 0; height: 2px; width: var(--w); background: linear-gradient(90deg, #FF6A2B, #FFB36B); }
.mp-panels { flex: 1; display: grid !important; grid-template-columns: 1.6fr 1fr; gap: 1em; min-height: 0; }
.mp-chart, .mp-list { background: #19191B; border: 1px solid rgba(255,255,255,.06); border-radius: .8em; padding: 1.2em; display: flex !important; flex-direction: column; min-height: 0; }
.mp-ph { font-size: .8em; color: #9C9A95; margin-bottom: 1em; }
.mp-bars { flex: 1; display: flex !important; align-items: flex-end; gap: .7em; border-bottom: 1px solid rgba(255,255,255,.08); }
.mp-bars i { flex: 1; height: var(--h); background: linear-gradient(180deg, #FF6A2B, rgba(255,106,43,.25)); border-radius: .3em .3em 0 0; }
.mp-axis { display: flex !important; gap: .7em; margin-top: .5em; }
.mp-axis i { flex: 1; text-align: center; font-style: normal; font-size: .65em; color: #6E6C68; }
.mp-list > span:not(.mp-ph) { display: grid !important; grid-template-columns: 1fr auto auto; gap: 1em; align-items: center; padding: .75em 0; border-top: 1px solid rgba(255,255,255,.06); font-size: .8em; }
.mp-list b { font-weight: 500; }
.mp-list em { font-style: normal; font-size: .85em; padding: .25em .7em; border-radius: 99px; }
.mp-list em.ok { color: #7EE2A8; background: rgba(126,226,168,.1); }
.mp-list em.warn { color: #FFB36B; background: rgba(255,179,107,.12); }
.mp-list small { color: #8E8C88; font-size: .9em; min-width: 4.5em; text-align: right; }

/* ---------- Pulse ticket (mobile) ---------- */
.p-pulse { background: radial-gradient(120% 60% at 100% 0%, #3A1A0C 0%, #0F0F10 60%); color: #F2EFEA; }
.pp-top { display: flex !important; justify-content: space-between; font-size: .7em; letter-spacing: .14em; color: #9C9A95; margin-bottom: 1.6em; }
.pp-top span:first-child { color: #FF6A2B; font-weight: 700; }
.pp-eye { font-size: .65em; letter-spacing: .2em; text-transform: uppercase; color: #FFB36B; margin-bottom: .5em; }
.pp-h { font-family: var(--font-display); font-variation-settings: 'wdth' 75; font-weight: 700; text-transform: uppercase; font-size: 2.3em; line-height: .9; letter-spacing: -.01em; }
.pp-date { font-size: .75em; color: #B9B6B0; margin: .8em 0 1.2em; }
.pp-qr { background: #fff; border-radius: .8em; padding: .7em; width: 78%; margin: 0 auto 1.2em; }
.pp-qr .qr { width: 100%; height: auto; }
.pp-holder { display: flex !important; justify-content: space-between; font-size: .75em; padding: .8em 0; border-top: 1px dashed rgba(255,255,255,.2); }
.pp-holder em, .pp-wallet em { font-style: normal; color: #9C9A95; }
.pp-wallet { margin-top: auto; display: grid !important; grid-template-columns: 1fr auto; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: .9em; padding: .8em 1em; font-size: .75em; }
.pp-wallet em { grid-column: 1; }
.pp-wallet b { grid-column: 1; font-size: 1.35em; }
.pp-wallet > span { grid-column: 2; grid-row: 1 / span 2; background: #FF6A2B; color: #120A06; font-weight: 700; border-radius: 99px; padding: .7em 1.1em; }

/* ---------- Fieldbook ---------- */
.m-field { background: #F6F7F5; color: #1C2321; display: grid; grid-template-columns: 11em 1fr 19em; }
.mf-side { background: #1C2321; color: #9AA5A0; padding: 1.6em 1em; display: flex !important; flex-direction: column; gap: .2em; font-size: .85em; }
.mf-logo { color: #fff; font-weight: 700; font-size: 1.15em; margin-bottom: 1.6em; padding-left: .7em; letter-spacing: -.01em; }
.mf-logo::before { content: ''; display: inline-block; width: .7em; height: .7em; background: #4FB286; border-radius: .15em; margin-right: .5em; }
.mf-side > span:not(.mf-logo) { padding: .6em .7em; border-radius: .4em; }
.mf-side .on { background: rgba(255,255,255,.08); color: #fff; }
.mf-main { padding: 1.8em 1.8em; min-width: 0; }
.mf-top { display: flex !important; align-items: center; gap: 1.4em; margin-bottom: 1.4em; }
.mf-h { font-size: 1.5em; font-weight: 700; letter-spacing: -.02em; }
.mf-tabs { display: flex !important; gap: .4em; font-size: .75em; margin-right: auto; }
.mf-tabs span { padding: .45em .9em; border-radius: 99px; background: #E7EAE7; }
.mf-tabs .on { background: #1C2321; color: #fff; }
.mf-new { font-size: .8em; background: #4FB286; color: #fff; padding: .7em 1.1em; border-radius: .4em; font-weight: 600; }
.mf-table { background: #fff; border: 1px solid #E3E6E3; border-radius: .7em; overflow: hidden; }
.mf-row { display: grid !important; grid-template-columns: 1.3fr 1.3fr .8fr .6fr 1.1fr; gap: 1em; padding: 1em 1.2em; border-top: 1px solid #EEF0EE; font-size: .82em; align-items: center; }
.mf-row i { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-row--head { border-top: 0; color: #7A8580; font-size: .72em; text-transform: uppercase; letter-spacing: .08em; background: #FAFBFA; }
.mf-row.is-sel { background: #F0F7F3; box-shadow: inset 3px 0 0 #4FB286; }
.mf-row em { font-style: normal; font-size: .9em; padding: .3em .7em; border-radius: 99px; display: inline-block; }
.s-done { background: #E2F3EA; color: #24744E; } .s-prog { background: #E3ECFA; color: #2D5BA8; }
.s-wait { background: #FCEFD9; color: #95601A; } .s-sched { background: #EEF0EE; color: #59625E; }
.mf-detail { background: #fff; border-left: 1px solid #E3E6E3; padding: 1.8em 1.4em; display: flex !important; flex-direction: column; }
.mf-dh { font-weight: 700; font-size: 1.15em; }
.mf-ds { font-size: .78em; color: #7A8580; margin-bottom: 1.2em; }
.mf-map { height: 11em; border-radius: .6em; position: relative; margin-bottom: 1.4em; background:
  linear-gradient(115deg, transparent 46%, #FFFFFF 46% 49%, transparent 49%),
  linear-gradient(20deg, transparent 58%, #FFFFFF 58% 60.5%, transparent 60.5%),
  repeating-linear-gradient(0deg, transparent 0 1.6em, rgba(28,35,33,.05) 1.6em calc(1.6em + 1px)),
  repeating-linear-gradient(90deg, transparent 0 1.6em, rgba(28,35,33,.05) 1.6em calc(1.6em + 1px)),
  #E6ECE8; }
.pin { position: absolute; width: .9em; height: .9em; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #1C2321; }
.pin.p1 { left: 22%; top: 30%; } .pin.p2 { left: 58%; top: 52%; background: #4FB286; box-shadow: 0 0 0 .4em rgba(79,178,134,.25); } .pin.p3 { left: 76%; top: 22%; }
.mf-steps { display: flex !important; flex-direction: column; gap: .9em; font-size: .78em; color: #9AA5A0; border-left: 1px solid #DDE2DF; padding-left: 1.1em; margin-left: .3em; }
.mf-steps span { position: relative; }
.mf-steps span::before { content: ''; position: absolute; left: -1.45em; top: .35em; width: .6em; height: .6em; border-radius: 50%; background: #DDE2DF; }
.mf-steps .done { color: #1C2321; } .mf-steps .done::before { background: #4FB286; }
.mf-steps .cur { color: #95601A; font-weight: 600; } .mf-steps .cur::before { background: #E9A23B; box-shadow: 0 0 0 .3em rgba(233,162,59,.25); }