/* Tracksoo website, in the app's Office Hours look: white pages, the
   app's blue, one colour per area (green schedule, teal payments, orange
   progress, purple people) and Selawik, the app's font. Light or dark is the
   visitor's pick from the theme picker, else the device's: the layout puts
   data-theme on <html> before anything draws, and every dark rule keys off it.
   Site classes start with w-; the drawn app screens use the app's own class
   names, kept inside .k so they never touch the site. */

@font-face { font-family: Selawik; font-weight: 400; font-display: swap; src: url("/fonts/Selawik-400.ttf") format("truetype"); }
@font-face { font-family: Selawik; font-weight: 600; font-display: swap; src: url("/fonts/Selawik-600.ttf") format("truetype"); }
@font-face { font-family: Selawik; font-weight: 700; font-display: swap; src: url("/fonts/Selawik-700.ttf") format("truetype"); }

:root {
    color-scheme: light;
    --f: Selawik, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --fd: Selawik, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;

    /* the site */
    --w-bg: #FFFFFF; --w-alt: #F6F6F6; --w-ink: #242424; --w-ink2: #424242; --w-mute: #616161; --w-line: #E5E5E5;
    --w-btn: #0F6CBD; --w-btn-h: #115EA3; --w-link: #0F6CBD; --w-tint: #EBF3FC;
    --w-grid: rgba(0, 0, 0, .055); --w-sel: #107C41; --w-selhd: #DDEBE2; --w-seltx: #0B5A2F;
    --w-band: #0F6CBD;
    --w-oo: #F45A2C; /* the name's orange "oo" */

    /* the drawn app screens (same tokens as the app) */
    --canvas: #F5F5F5; --card: #FFFFFF; --surf: #FFFFFF; --sub: #FAFAFA; --field: #FFFFFF;
    --ink: #242424; --ink2: #424242; --mute: #616161; --faint: #8A8A8A;
    --stroke: #E0E0E0; --stroke2: #D1D1D1; --hair: #F0F0F0;
    --shadow: 0 0 2px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .10);
    --shadow-lg: 0 0 8px rgba(0, 0, 0, .12), 0 14px 28px rgba(0, 0, 0, .18);
    --frame: #1B1B1F; --frame-edge: #35353B;
    --ok: #0E700E; --ok-bg: #F1FAF1; --ok-bd: #9FD89F;
    --warn: #8A5300; --warn-bg: #FFF8E6; --warn-bd: #F4D38A;
    --bad: #B10E1C; --bad-bg: #FDF3F4; --bad-bd: #EEACB2;
    --info: #0F6CBD; --info-bg: #EBF3FC; --info-bd: #B4D6FA;
    --neu: #424242; --neu-bg: #F0F0F0; --neu-bd: #D1D1D1;
    --danger: #C50F1F;
    --x-hd: #F3F3F3; --x-line: #E6E6E6; --x-strong: #BDBDBD;
    --x-good-bg: #C6EFCE; --x-good: #006100; --x-bad-bg: #FFC7CE; --x-bad: #9C0006; --x-sel: #107C41;
    --t-ms: #0F6CBD; --t-mf: #8764B8; --t-kb: #CA5010;
    --m-paid: #038387; --m-conf: #F2C744; --m-late: #D13438;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --w-bg: #1A1A1A; --w-alt: #141414; --w-ink: #F2F2F2; --w-ink2: #D6D6D6; --w-mute: #ADADAD; --w-line: #303030;
    --w-btn: #115EA3; --w-btn-h: #0F6CBD; --w-link: #6CB2F7; --w-tint: #16304A;
    --w-grid: rgba(255, 255, 255, .06); --w-sel: #3AA467; --w-selhd: #27402F; --w-seltx: #9EDDB5;
    --w-band: #0C3E6B;
    --w-oo: #FF7A4D;

    --canvas: #161616; --card: #262626; --surf: #1F1F1F; --sub: #202020; --field: #1C1C1C;
    --ink: #F2F2F2; --ink2: #D6D6D6; --mute: #ADADAD; --faint: #858585;
    --stroke: #383838; --stroke2: #4A4A4A; --hair: #303030;
    --shadow: 0 0 2px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .4);
    --shadow-lg: 0 0 8px rgba(0, 0, 0, .5), 0 14px 28px rgba(0, 0, 0, .6);
    --frame: #0C0C0E; --frame-edge: #44444C;
    --ok: #8FE39C; --ok-bg: #132A16; --ok-bd: #2F6B38;
    --warn: #FFD66B; --warn-bg: #33290D; --warn-bd: #6B5616;
    --bad: #FF9EA7; --bad-bg: #3A1519; --bad-bd: #7A2A32;
    --info: #6CB2F7; --info-bg: #132A42; --info-bd: #24507D;
    --neu: #D6D6D6; --neu-bg: #2E2E2E; --neu-bd: #4A4A4A;
    --danger: #DC3545;
    --x-hd: #242424; --x-line: #333333; --x-strong: #5A5A5A;
    --x-good-bg: #1D4A2A; --x-good: #96E2AC; --x-bad-bg: #56202A; --x-bad: #FFB3BC; --x-sel: #3AA467;
    --t-ms: #479EF5; --t-mf: #B69BE0; --t-kb: #F08A4B;
    --m-paid: #2EB6BA; --m-conf: #E8B931; --m-late: #E0515A;
}

/* Area colours: --c bars and buttons, --cf accents, --ct tints, --hd screen headers, --tt app-tile highlight. */
.a-home   { --c: #0F6CBD; --cf: #0F6CBD; --ct: #EBF3FC; --hd: #0F6CBD; --tt: #2E8BE0; }
.a-sched  { --c: #107C41; --cf: #107C41; --ct: #E3F1E8; --hd: #107C41; --tt: #22A566; }
.a-pay    { --c: #038387; --cf: #037377; --ct: #E0F2F2; --hd: #038387; --tt: #14A9AD; }
.a-people { --c: #5B5FC7; --cf: #4F52B2; --ct: #EEEFFC; --hd: #5B5FC7; --tt: #8086F2; }
.a-prog   { --c: #C43E1C; --cf: #C43E1C; --ct: #FCEDE8; --hd: #C43E1C; --tt: #E8703F; }
[data-theme="dark"] .a-home   { --cf: #6CB2F7; --ct: #16304A; --hd: #12334F; }
[data-theme="dark"] .a-sched  { --cf: #5CC98D; --ct: #16301F; --hd: #123824; }
[data-theme="dark"] .a-pay    { --cf: #4FCBCF; --ct: #123435; --hd: #0E3B3C; }
[data-theme="dark"] .a-people { --cf: #A9ACF7; --ct: #26274A; --hd: #2D2E53; }
[data-theme="dark"] .a-prog   { --cf: #F4896A; --ct: #3E2016; --hd: #522317; }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; background: var(--w-bg); color: var(--w-ink); font: 16px/1.55 var(--f); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
.ic { display: inline-block; width: 24px; height: 24px; flex: none; vertical-align: middle; }
.ic svg { width: 100%; height: 100%; }
.w-wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- header ---------- */
.w-head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--w-bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--w-line); }
.w-head .w-wrap { height: 64px; display: flex; align-items: center; gap: 32px; }
.w-word .oo { color: var(--w-oo); }
.w-brand { display: flex; align-items: center; gap: 10px; font: 600 18px var(--fd); color: var(--w-ink); white-space: nowrap; }
.w-nav { display: flex; gap: 26px; font: 15px var(--f); color: var(--w-ink2); }
.w-nav a:hover, .w-signin:hover { color: var(--w-link); }
.w-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.w-lang { display: flex; border: 1px solid var(--stroke2); border-radius: 4px; overflow: hidden; }
.w-lang a { font: 600 12px var(--f); padding: 4px 8px; color: var(--w-mute); }
.w-lang a.on { background: var(--w-tint); color: var(--w-link); }
.w-langpick { position: relative; }
.w-langpick summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 5px; font: 600 12px var(--f); padding: 4px 8px; color: var(--w-mute); border: 1px solid var(--stroke2); border-radius: 4px; }
.w-langpick summary::-webkit-details-marker { display: none; }
.w-langpick summary .ic { width: 15px; height: 15px; }
.w-langpick summary:hover, .w-langpick[open] summary { color: var(--w-ink); }
.w-langpick .list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; display: grid; min-width: 150px; padding: 4px; background: var(--w-bg); border: 1px solid var(--w-line); border-radius: 6px; box-shadow: 0 12px 24px rgba(0, 0, 0, .12); }
.w-langpick.up .list { top: auto; bottom: calc(100% + 6px); }
.w-langpick .list a { padding: 8px 10px; border-radius: 4px; font: 14px var(--f); color: var(--w-ink); }
.w-langpick .list a:hover { background: var(--w-tint); }
.w-langpick .list a.on { font-weight: 600; color: var(--w-link); }
.w-theme button { display: grid; place-items: center; padding: 3px 7px; background: none; border: 0; cursor: pointer; color: var(--w-mute); }
.w-theme button .ic { width: 16px; height: 16px; }
.w-theme button:hover { color: var(--w-ink); }
[data-theme="light"] .w-theme [data-theme-pick="light"], [data-theme="dark"] .w-theme [data-theme-pick="dark"] { background: var(--w-tint); color: var(--w-link); }
.w-menu .w-pickers { display: none; gap: 10px; padding: 14px 4px 2px; }
.w-foot .w-pickers { display: flex; gap: 10px; }
.w-signin { font: 600 15px var(--f); color: var(--w-ink2); background: none; border: 0; cursor: pointer; }
.w-burger { display: none; width: 40px; height: 40px; place-items: center; border-radius: 4px; cursor: pointer; color: var(--w-ink); background: none; border: 0; }
.w-menu { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--w-bg); border-bottom: 1px solid var(--w-line); padding: 6px 16px 18px; box-shadow: 0 12px 24px rgba(0, 0, 0, .08); }
.w-menu.open { display: block; }
.w-menu a:not(.w-btn), .w-menu button.w-signin { display: block; width: 100%; text-align: left; padding: 12px 4px; font: 16px var(--f); color: var(--w-ink); border-bottom: 1px solid var(--w-line); }
.w-menu .w-btn { margin-top: 14px; }

/* ---------- buttons ---------- */
.w-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 4px; font: 600 15px var(--f); background: var(--w-btn); color: #fff; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.w-btn:hover { background: var(--w-btn-h); }
.w-btn:disabled { opacity: .6; cursor: default; }
.w-btn.lg { height: 48px; padding: 0 24px; font-size: 16.5px; }
.w-btn.sec { background: var(--card); color: var(--w-ink); border-color: var(--stroke2); }
.w-btn.sec:hover { background: var(--w-alt); }
.w-btn.danger { background: var(--danger); }
.w-btn.full { width: 100%; }
.w-btn .ic { width: 18px; height: 18px; }
.w-play { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 13px; border-radius: 8px; background: #111; color: #fff; border: 1px solid #4A4A4A; }
.w-play small { display: block; font: 600 9.5px/1 var(--f); letter-spacing: .07em; text-transform: uppercase; opacity: .85; }
.w-play b { display: block; font: 600 17px/1.2 var(--f); }
[data-theme="dark"] .w-play { background: #000; border-color: #5A5A5A; }

/* ---------- home: hero ---------- */
.w-hero { position: relative; padding: 76px 0 84px; overflow: hidden; }
.w-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(90deg, transparent 0 95px, var(--w-grid) 95px 96px), repeating-linear-gradient(180deg, transparent 0 31px, var(--w-grid) 31px 32px);
    -webkit-mask-image: radial-gradient(ellipse 75% 85% at 30% 35%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 75% 85% at 30% 35%, #000 15%, transparent 72%); }
.w-hero > .w-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 48px; align-items: center; }
/* the headline: one line per area, each led by that area's tile from the sections below; they rise in once, then stay */
.w-h1 { font: 600 clamp(30px, 4.6vw, 54px)/1.14 var(--fd); letter-spacing: -.02em; margin: 0 0 24px; display: grid; gap: .12em; }
.w-line { display: flex; align-items: flex-start; gap: .3em; animation: w-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.w-line:nth-child(2) { animation-delay: .12s; }
.w-line:nth-child(3) { animation-delay: .24s; }
.w-line .btile { width: .74em; height: .74em; border-radius: .16em; margin-top: .2em; }
.w-line .btile .ic { width: .46em; height: .46em; }
@keyframes w-rise { from { opacity: 0; transform: translateY(.3em); } }
@media (prefers-reduced-motion: reduce) { .w-line { animation: none; } }
.w-lede { font: 19px/1.55 var(--f); color: var(--w-ink2); max-width: 32em; }
.w-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.w-ticks { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 20px; font: 14.5px var(--f); color: var(--w-mute); list-style: none; }
.w-ticks li { display: inline-flex; align-items: center; gap: 6px; }
.w-ticks .ic { width: 17px; height: 17px; color: var(--w-sel); }

/* phone stage: an area-tinted sheet behind a drawn app screen */
.w-stage { position: relative; display: flex; justify-content: center; padding: 30px 0; }
.w-stage::before { content: ""; position: absolute; inset: 0 7%; border-radius: 24px; background-color: var(--ct);
    background-image: repeating-linear-gradient(90deg, transparent 0 47px, var(--w-grid) 47px 48px), repeating-linear-gradient(180deg, transparent 0 23px, var(--w-grid) 23px 24px); }
.w-ph { position: relative; z-index: 1; zoom: .7; }
.w-hero .w-ph { zoom: .74; }
.w-float { position: absolute; z-index: 3; background: var(--card); color: var(--ink); border-radius: 8px; box-shadow: var(--shadow-lg); }
.w-toast { left: -6px; bottom: 84px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; width: 290px; }
.w-toast b { display: block; font: 600 14px var(--f); }
.w-toast small { display: block; font: 12.5px var(--f); color: var(--mute); }
.w-toast .btn { margin-left: auto; }
.w-chipf { right: -4px; top: 210px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.w-chipf .ic { width: 26px; height: 26px; color: var(--cf); }
.w-chipf b { display: block; font: 600 20px/1.1 var(--fd); }
.w-chipf small { display: block; font: 12px var(--f); color: var(--mute); }
.w-bill { left: -4px; bottom: 46px; width: 236px; padding: 14px; }
.w-bill .amtb { font: 600 26px/1.2 var(--fd); margin-top: 6px; }
.w-bill .qrrow { display: flex; gap: 10px; align-items: center; margin: 10px 0 12px; }
.w-bill .qr { background: #fff; padding: 4px; border-radius: 4px; border: 1px solid var(--stroke); }

/* "made for" strip */
.w-for { border-top: 1px solid var(--w-line); border-bottom: 1px solid var(--w-line); padding: 18px 0; text-align: center; font: 15.5px/1.6 var(--f); color: var(--w-mute); }
.w-for b { color: var(--w-ink); font-weight: 600; }

/* ---------- home: sections ---------- */
.w-sec { padding: 96px 0; }
.w-sec.alt { background: var(--w-alt); }
.w-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.w-feat.flip .w-txt { order: 2; }
.w-kick { display: flex; align-items: center; gap: 12px; font: 600 13px var(--f); letter-spacing: .12em; text-transform: uppercase; color: var(--cf); margin-bottom: 18px; }
.btile { width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden; flex: none;
    background: linear-gradient(150deg, var(--tt) 0%, var(--c) 72%); box-shadow: 0 2px 5px rgba(0, 0, 0, .18); }
.btile::after { content: ""; position: absolute; right: -10px; bottom: -12px; width: 30px; height: 30px; border-radius: 7px; background: rgba(255, 255, 255, .14); transform: rotate(18deg); }
.btile .ic { width: 22px; height: 22px; position: relative; z-index: 1; }
.w-h2 { font: 600 clamp(28px, 3.4vw, 42px)/1.15 var(--fd); letter-spacing: -.015em; margin-bottom: 14px; }
.w-p { font: 17.5px/1.6 var(--f); color: var(--w-ink2); max-width: 33em; }
.w-list { list-style: none; margin-top: 24px; display: grid; gap: 13px; }
.w-list li { display: flex; gap: 12px; font: 16.5px/1.5 var(--f); color: var(--w-ink2); }
.w-list .ic { width: 21px; height: 21px; color: var(--cf); margin-top: 1px; }
.w-callout { margin-top: 28px; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 6px; background: var(--ct); border-left: 4px solid var(--c); font: 16.5px/1.5 var(--f); color: var(--w-ink); max-width: 34em; }
.w-callout .ic { width: 24px; height: 24px; color: var(--cf); }
.w-center { text-align: center; max-width: 740px; margin: 0 auto; }
.w-center .w-p { margin: 0 auto; }

.w-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; list-style: none; }
.w-step { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); padding: 22px 22px 26px; }
.w-step .n { display: inline-grid; place-items: center; width: 36px; height: 28px; margin-bottom: 16px; background: var(--w-selhd); color: var(--w-seltx); border: 2px solid var(--w-sel); font: 600 14px var(--f); }
.w-step h3 { font: 600 20px/1.25 var(--fd); margin-bottom: 6px; }
.w-step p { font: 15.5px/1.55 var(--f); color: var(--w-ink2); }

/* web console drawing */
.w-browser { border-radius: 10px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-lg); border: 1px solid var(--stroke); }
.w-bbar { height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: var(--x-hd); border-bottom: 1px solid var(--stroke); }
.w-bbar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--stroke2); }
.w-url { margin-left: 10px; flex: 1; max-width: 330px; height: 22px; border-radius: 11px; background: var(--card); font: 12px/22px var(--f); color: var(--mute); padding: 0 12px; white-space: nowrap; overflow: hidden; }
.w-con { display: grid; grid-template-columns: 164px minmax(0, 1fr); min-height: 388px; color: var(--ink); }
.w-rail { background: var(--sub); border-right: 1px solid var(--stroke); padding: 12px 8px; }
.w-rail .rt { display: flex; align-items: center; gap: 8px; font: 600 13px var(--f); padding: 2px 8px 14px; }
.w-rail .it { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 4px; font: 13.5px var(--f); color: var(--ink2); }
.w-rail .it .ic { width: 18px; height: 18px; }
.w-rail .it.on { background: var(--ct); color: var(--cf); font-weight: 600; }
.w-main { padding: 18px 20px; min-width: 0; }
.w-main h4 { font: 600 22px/1.2 var(--fd); }
.w-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.w-kpis div { border: 1px solid var(--stroke); border-radius: 6px; padding: 8px 12px; }
.w-kpis small { display: block; font: 12px var(--f); color: var(--mute); }
.w-kpis b { font: 600 19px/1.3 var(--fd); white-space: nowrap; }
.w-xt { width: 100%; border-collapse: collapse; font: 13px var(--f); }
.w-xt th { background: var(--c); color: #fff; font-weight: 600; text-align: left; padding: 0 10px; height: 32px; font-size: 12px; white-space: nowrap; }
.w-xt td { padding: 0 10px; height: 40px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.w-xt tr:nth-child(even) td { background: var(--sub); }
.w-xt .r { text-align: right; }
.w-xt .open { color: var(--bad); font-weight: 600; }
.w-xt tr.tot td { font-weight: 700; border-top: 2px solid var(--x-strong); background: var(--card); }
.w-xt .nm { display: flex; align-items: center; gap: 8px; }

/* ---------- plans (home and the seats page) ---------- */
.w-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; border: 1px solid var(--stroke2); border-radius: 6px; padding: 3px; background: var(--card); gap: 2px; margin-top: 30px; }
.w-seg button { padding: 8px 14px; border-radius: 4px; font: 600 14px var(--f); color: var(--w-ink2); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.w-seg button.on { background: var(--w-btn); color: #fff; }
.w-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; text-align: left; }
.w-plan { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; border-top: 4px solid var(--stroke2); }
.w-plan.free { border-top-color: var(--w-sel); }
.w-plan h3 { font: 600 21px var(--fd); }
.w-plan .who { font: 14.5px/1.45 var(--f); color: var(--w-mute); margin-top: 4px; min-height: 42px; }
.w-plan .pr { margin-top: 16px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.w-plan .pr b { font: 600 42px/1 var(--fd); letter-spacing: -.02em; }
.w-plan .pr span { font: 15px var(--f); color: var(--w-mute); }
.w-plan .tot { font: 13.5px var(--f); color: var(--w-mute); margin-top: 8px; min-height: 21px; }
.w-plan .cnt { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); font: 15px/1.4 var(--f); display: flex; gap: 9px; align-items: flex-start; }
.w-plan .cnt .ic { width: 19px; height: 19px; color: var(--w-sel); }
.w-plan .cnt small { display: block; font: 13px var(--f); color: var(--w-mute); }
.w-plan .acts { margin-top: auto; padding-top: 22px; }
.w-bigger { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; font: 15.5px var(--f); color: var(--w-ink2); text-align: center; }
.w-bigger .ic { width: 20px; height: 20px; color: var(--w-mute); }
.w-bigger a { color: var(--w-link); font-weight: 600; }
.w-fine { font: 13.5px/1.65 var(--f); color: var(--w-mute); margin: 14px auto 0; max-width: 720px; text-align: center; }
.w-notice { display: flex; gap: 10px; align-items: flex-start; justify-content: center; max-width: 640px; margin: 22px auto 0; padding: 12px 16px; border-radius: 6px; background: var(--info-bg); border: 1px solid var(--info-bd); color: var(--w-ink); font: 15px/1.5 var(--f); text-align: left; }
.w-notice .ic { width: 20px; height: 20px; color: var(--info); }

/* questions */
.w-faq { max-width: 780px; margin: 30px auto 0; }
.w-faq details { border-bottom: 1px solid var(--w-line); }
.w-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 2px; font: 600 17.5px/1.4 var(--f); }
.w-faq summary::-webkit-details-marker { display: none; }
.w-faq summary .ic { width: 20px; height: 20px; color: var(--w-mute); transition: transform .2s; }
.w-faq details[open] summary .ic { transform: rotate(45deg); }
.w-faq .ans { padding: 0 2px 20px; font: 16.5px/1.6 var(--f); color: var(--w-ink2); max-width: 40em; }

/* made in Serbia */
.w-about { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; align-items: center; background: var(--card); border-radius: 10px; box-shadow: var(--shadow); padding: 30px 32px; margin-top: 32px; }
.w-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--w-tint); }
.w-photo img { width: 100%; height: 100%; object-fit: cover; }
.w-about h3 { font: 600 22px/1.3 var(--fd); margin-bottom: 6px; }
.w-about p { font: 16.5px/1.6 var(--f); color: var(--w-ink2); }
.w-contact { display: grid; gap: 8px; min-width: 250px; list-style: none; }
.w-contact a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--stroke2); border-radius: 4px; font: 600 14.5px var(--f); }
.w-contact a:hover { background: var(--w-alt); }
.w-contact .ic { width: 19px; height: 19px; color: var(--w-link); }

/* closing band */
.w-band { position: relative; overflow: hidden; background: var(--w-band); color: #fff; padding: 76px 0; text-align: center; }
.w-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent 0 95px, rgba(255, 255, 255, .09) 95px 96px), repeating-linear-gradient(180deg, transparent 0 31px, rgba(255, 255, 255, .09) 31px 32px); }
.w-band .w-wrap { position: relative; }
.w-band h2 { font: 600 clamp(28px, 3.8vw, 46px)/1.15 var(--fd); letter-spacing: -.015em; }
.w-band p { font: 18px var(--f); opacity: .9; margin-top: 8px; }
.w-band .w-btn { background: #fff; color: #0F6CBD; margin-top: 28px; }
.w-band .w-btn:hover { background: #EBF3FC; }

/* footer */
.w-foot { background: var(--w-alt); border-top: 1px solid var(--w-line); padding: 52px 0 28px; font: 14.5px var(--f); color: var(--w-mute); }
.w-foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px; }
.w-foot .w-brand { font-size: 16px; margin-bottom: 10px; }
.w-foot h2 { font: 600 13.5px var(--f); color: var(--w-ink); margin-bottom: 8px; }
.w-foot .cols a { display: block; padding: 4px 0; }
.w-foot .cols a:hover { color: var(--w-link); }
.w-foot .bot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--w-line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

/* ---------- pages with a form or a panel ---------- */
.w-page { padding: 64px 0 90px; }
.w-narrow { max-width: 480px; margin: 0 auto; padding: 0 20px; }
.w-mid { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.w-panel { background: var(--card); border-radius: 10px; box-shadow: var(--shadow); padding: 30px 28px; }
.w-panel h1, .w-page-title { font: 600 30px/1.2 var(--fd); letter-spacing: -.01em; margin-bottom: 6px; }
.w-lead { color: var(--w-mute); font: 16px/1.55 var(--f); }
.w-panel p + p, .w-panel ul + p { margin-top: 12px; }
.w-panel ul { margin: 12px 0 0 20px; color: var(--w-ink2); }
.w-panel li { margin: 4px 0; }
.w-below { margin-top: 18px; text-align: center; color: var(--w-mute); font: 15px var(--f); }
.w-below a, .w-link { color: var(--w-link); font-weight: 600; }
.w-form { margin-top: 18px; }
.w-field { display: block; margin-top: 16px; }
.w-field > span:first-child { display: block; font: 600 13.5px var(--f); color: var(--w-ink2); margin-bottom: 5px; }
.w-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--stroke2); border-bottom-color: var(--mute); border-radius: 4px; background: var(--field); color: var(--w-ink); font: 15.5px var(--f); }
.w-input:focus { outline: none; border-bottom: 2px solid var(--w-btn); }
select.w-input { padding-right: 8px; }
.w-help { display: block; font: 13px/1.4 var(--f); color: var(--w-mute); margin-top: 4px; }
.w-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w-form .w-btn.full { margin-top: 22px; height: 44px; }
.w-error { color: var(--danger); font: 14.5px/1.45 var(--f); margin-top: 12px; }
.w-ok { color: var(--w-ink2); font: 14.5px/1.45 var(--f); margin-top: 12px; }
.w-legal { font: 13px/1.5 var(--f); color: var(--w-mute); margin-top: 12px; }
.w-legal a { color: var(--w-link); }
.w-loading { color: var(--w-mute); padding: 48px 0; text-align: center; }
.w-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.w-way { border: 1px solid var(--stroke); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.w-way h2 { font: 600 18px var(--fd); display: flex; align-items: center; gap: 8px; }
.w-way h2 .ic { width: 22px; height: 22px; color: var(--w-link); }
.w-way p { color: var(--w-ink2); font: 15px/1.5 var(--f); flex: 1; }
.w-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.w-metric { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); padding: 18px; text-align: center; }
.w-metric b { display: block; font: 600 38px/1.1 var(--fd); }
.w-metric small { font: 13px var(--f); color: var(--w-mute); }
.w-subhead { font: 600 22px var(--fd); margin: 40px 0 0; }
.w-toast-msg { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px); background: #292929; color: #fff; padding: 12px 18px; border-radius: 6px; font: 14.5px var(--f); box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: .22s ease; max-width: 90vw; z-index: 60; }
.w-toast-msg.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.w-toast-msg.err { background: var(--danger); }

/* ---------- the drawn app screens (kept inside .k) ---------- */
.k { font-family: var(--f); font-variant-numeric: tabular-nums; }
.k .phone { width: 390px; height: 844px; border-radius: 54px; background: var(--frame); padding: 10px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .45), 0 0 0 2px var(--frame-edge) inset; }
.k .screen { width: 100%; height: 100%; border-radius: 44px; overflow: hidden; position: relative; background: var(--canvas); color: var(--ink); }
.k .ic .a { stroke: var(--cf); }
.k .btn .ic .a, .k .hdr .ic .a, .k .lic .ic .a { stroke: currentColor; }
.k .status { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px 0 32px; font: 600 15px var(--fd); color: #fff; }
.k .status .sig { display: flex; gap: 6px; align-items: center; }
.k .hdr { background: var(--hd); color: #fff; }
.k .tb { height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.k .tb .appn { font: 600 16px var(--f); }
.k .tb .ic { width: 22px; height: 22px; }
.k .tb .wf { width: 20px; height: 20px; }
.k .hint { width: 16px; height: 16px; }
.k .ttl { min-width: 0; }
.k .ttl b { display: block; font: 600 17px/1.2 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k .ttl small { display: block; font: 12px/1.3 var(--f); opacity: .85; white-space: nowrap; }
.k .hbig { font: 600 24px/1.2 var(--fd); padding: 2px 16px 16px; }
.k .sp { flex: 1; }
.k .org { width: 32px; height: 32px; border-radius: 6px; background: #fff; color: var(--hd); display: grid; place-items: center; font: 700 12px var(--f); flex: none; }
.k .bell { position: relative; }
.k .bell b { position: absolute; right: -6px; top: -5px; min-width: 16px; height: 16px; border-radius: 8px; background: #fff; color: var(--hd); font: 700 10px/16px var(--f); text-align: center; padding: 0 4px; }
.k .ib { height: 62px; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 14px; }
.k .ib .mk { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.k .ib .mk .appicon { border-radius: 7px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .45); }
.k .ib .mk i { font: 600 10.5px/1 var(--f); font-style: normal; }
.k .ib .mk i span { color: #FF7A4D; }
.k .ib .who { flex: 1; min-width: 0; }
.k .ib .who b { display: block; font: 600 15.5px/1.3 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k .ib .who small { display: block; font: 12.5px/1.3 var(--f); opacity: .86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k .ib .rb { width: 40px; height: 40px; display: grid; place-items: center; position: relative; flex: none; }
.k .ib .rb .ic { width: 23px; height: 23px; }
.k .ib .rb b { position: absolute; right: 4px; top: 4px; min-width: 16px; height: 16px; border-radius: 8px; background: #fff; color: var(--hd); font: 700 10px/16px var(--f); text-align: center; padding: 0 4px; }
.k .pt { font: 600 21px/1.2 var(--fd); color: var(--ink); padding: 14px 16px 2px; }
.k .qa { height: 50px; display: flex; align-items: center; gap: 2px; padding: 0 8px; background: var(--surf); border-bottom: 1px solid var(--stroke); }
.k .qb { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 4px; font: 13.5px var(--f); color: var(--ink); white-space: nowrap; }
.k .qb .ic { width: 20px; height: 20px; color: var(--ink2); }
.k .tabs { height: 44px; display: flex; align-items: flex-end; gap: 22px; padding: 0 16px; background: var(--surf); border-bottom: 1px solid var(--stroke); }
.k .tabs span { font: 14px var(--f); color: var(--ink2); padding-bottom: 10px; position: relative; white-space: nowrap; }
.k .tabs span.on { font-weight: 600; color: var(--ink); }
.k .tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--cf); }
.k .bd { padding: 16px; }
.k .card { background: var(--card); border-radius: 8px; box-shadow: var(--shadow); }
.k .pad { padding: 14px 16px; }
.k .h2 { font: 600 22px/1.2 var(--fd); color: var(--ink); }
.k .h3 { font: 600 17px/1.25 var(--fd); color: var(--ink); }
.k .cap2 { font: 13px/1.4 var(--f); color: var(--mute); }
.k .small { font: 12px/1.4 var(--f); color: var(--mute); }
.k .sec { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 2px 8px; }
.k .sec:first-child { margin-top: 0; }
.k .sec b { font: 600 15px var(--f); }
.k .sec em { font-style: normal; font: 13px var(--f); color: var(--mute); }
.k .link { font: 600 13px var(--f); color: var(--cf); }
.k .big { font: 600 30px/1.05 var(--fd); letter-spacing: -.01em; }
.k .li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 54px; }
.k .li + .li { border-top: 1px solid var(--hair); }
.k .li .tx { flex: 1; min-width: 0; }
.k .li b { display: block; font: 600 14px/1.3 var(--f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k .li b.n { font-weight: 400; }
.k .li small { display: block; font: 12px/1.35 var(--f); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k .li .rt { text-align: right; font: 600 14px var(--f); white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.k .li.sm { min-height: 44px; padding: 7px 14px; }
.k .lic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ct); color: var(--cf); }
.k .lic .ic { width: 19px; height: 19px; }
.k .chev { width: 18px; height: 18px; color: var(--faint); }
.k .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 12.5px var(--f); flex: none; }
.k .av.s { width: 28px; height: 28px; font-size: 11px; }
.k .av.xs { width: 24px; height: 24px; font-size: 10px; }
.k .av.p0 { background: #F9D9E7; color: #7E1D4C; } .k .av.p1 { background: #E9DDF7; color: #4B1C74; }
.k .av.p2 { background: #D3EFE0; color: #0B5A33; } .k .av.p3 { background: #FDE0D3; color: #7A2E0B; }
.k .av.p4 { background: #DCE7FA; color: #1E3F8A; } .k .av.p5 { background: #FFF1C7; color: #6B4A00; }
.k .av.p6 { background: #D2F0EF; color: #0B5754; } .k .av.p7 { background: #FBDADC; color: #8A1E26; }
[data-theme="dark"] .k .av.p0 { background: #4D2338; color: #F5B8D3; } [data-theme="dark"] .k .av.p1 { background: #3A2A50; color: #D5BFF2; }
[data-theme="dark"] .k .av.p2 { background: #1E4030; color: #A6E3C2; } [data-theme="dark"] .k .av.p3 { background: #4A2A1C; color: #F7C0A6; }
[data-theme="dark"] .k .av.p4 { background: #22335A; color: #B7CCF5; } [data-theme="dark"] .k .av.p5 { background: #45391A; color: #F2D98A; }
[data-theme="dark"] .k .av.p6 { background: #183F3E; color: #A2E0DD; } [data-theme="dark"] .k .av.p7 { background: #4A2226; color: #F5B3B8; }
.k .bdg { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 11px; font: 600 11.5px var(--f); white-space: nowrap; border: 1px solid transparent; }
.k .bdg.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-bd); }
.k .bdg.bad { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-bd); }
.k .bdg.info { background: var(--info-bg); color: var(--info); border-color: var(--info-bd); }
.k .bdg.acc { background: var(--c); color: #fff; }
.k .bdg.out { border-color: var(--stroke2); color: var(--ink2); }
.k .bdg.sq { border-radius: 3px; height: 18px; padding: 0 6px; font-size: 10.5px; }
.k .btn { height: 34px; padding: 0 14px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 13.5px var(--f); white-space: nowrap; background: var(--c); color: #fff; border: 1px solid transparent; }
.k .btn .ic { width: 17px; height: 17px; }
.k .btn.sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.k .btn.full { width: 100%; height: 40px; font-size: 14px; }
.k .ev { border-left: 3px solid var(--k); padding: 2px 0 2px 11px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.k .ev b { display: block; font: 600 14px/1.25 var(--f); }
.k .ev small { display: block; font: 12px/1.3 var(--f); color: var(--mute); }
.k .agr { display: flex; align-items: center; gap: 8px; padding: 8px 14px; }
.k .agr + .agr { border-top: 1px solid var(--hair); }
.k .agr .tm { width: 46px; font: 600 13.5px var(--f); flex: none; }
.k .chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 4px; background: var(--ct); color: var(--cf); font: 600 12.5px var(--f); }
.k .chip .ic { width: 16px; height: 16px; }
.k .evt { padding: 14px 16px 14px 20px; position: relative; overflow: hidden; }
.k .evt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k, var(--c)); }
.k .dtile { width: 44px; flex: none; border-radius: 6px; overflow: hidden; text-align: center; border: 1px solid var(--stroke); background: var(--card); }
.k .dtile i { display: block; font: 600 10px/16px var(--f); font-style: normal; letter-spacing: .06em; background: var(--c); color: #fff; }
.k .dtile b { display: block; font: 600 19px/26px var(--fd); }
.k .xg { display: grid; background: var(--card); position: relative; grid-template-columns: 28px 1fr 50px 50px 62px; }
.k .xg > div { height: 38px; border-right: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); display: flex; align-items: center; font: 13.5px var(--f); min-width: 0; }
.k .xg > .n { background: var(--x-hd); justify-content: center; font-size: 11px; color: var(--faint); }
.k .xg > .H { height: 34px; font-weight: 600; font-size: 12px; color: var(--mute); padding: 0 8px; border-bottom: 1px solid var(--x-strong); white-space: nowrap; }
.k .xg > .c { justify-content: center; }
.k .xg > .nm { padding: 0 8px; gap: 6px; white-space: nowrap; overflow: hidden; }
.k .xg > .dim { color: var(--mute); }
.k .xg > .g { background: var(--x-good-bg); color: var(--x-good); justify-content: center; }
.k .xg > .b { background: var(--x-bad-bg); color: var(--x-bad); justify-content: center; font-weight: 600; }
.k .xg > .tot { font-weight: 700; border-top: 1px solid var(--x-strong); }
.k .xg .tk { width: 14px; height: 14px; }
.k .rsel { position: absolute; border: 2px solid var(--x-sel); pointer-events: none; right: -1px; width: 64px; top: 33px; height: 458px; }
.k .rsel::after { content: ""; position: absolute; right: -5px; bottom: -5px; width: 7px; height: 7px; background: var(--x-sel); border: 1px solid var(--card); }
.k .cbx { width: 18px; height: 18px; border: 1.5px solid var(--mute); border-radius: 3px; flex: none; display: grid; place-items: center; background: var(--field); }
.k .cbx.part { background: var(--c); border-color: var(--c); }
.k .cbx.part::after { content: ""; width: 8px; height: 2px; background: #fff; border-radius: 1px; }
.k .nav { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; background: var(--surf); border-top: 1px solid var(--stroke); display: flex; justify-content: space-around; padding: 9px 8px 0; z-index: 5; }
.k .ni { width: 66px; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 11px var(--f); color: var(--mute); }
.k .ni.on { color: var(--cf); font-weight: 600; }
.k .home-ind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ink); opacity: .9; z-index: 10; }
.k .stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 10px; gap: 2px; }
.k .keys { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font: 12px var(--f); color: var(--mute); }
.k .keys span { display: flex; align-items: center; gap: 5px; }
.k .keys i { width: 9px; height: 9px; border-radius: 2px; display: block; }
.k .amt { display: flex; align-items: center; gap: 8px; font: 600 14px var(--f); white-space: nowrap; }
.k .late { color: var(--bad); }
.k .inrow { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; margin-top: 2px; }
.k .slip { padding: 12px 14px; }
.k .slip .top { display: flex; align-items: baseline; justify-content: space-between; }
.k .slip .top b { font: 600 15px var(--f); }
.k .slip .top span { font: 600 22px var(--fd); }
.k .slip .ln { display: flex; justify-content: space-between; font: 13px var(--f); padding: 6px 0; border-top: 1px solid var(--hair); margin-top: 8px; }
.k .pm { padding: 12px 14px; }
.k .pm .top { display: flex; align-items: center; gap: 8px; }
.k .pm .top b { font: 600 15px var(--f); flex: 1; }
.k .pm .vals { display: flex; align-items: flex-end; gap: 18px; margin-top: 6px; }
.k .pm .v small { display: block; font: 12px var(--f); color: var(--mute); }
.k .pm .v b { font: 600 24px/1.1 var(--fd); }
.k .pm .v b span { font: 600 13px var(--f); color: var(--mute); }
.k .pm svg { margin-left: auto; }
.k .spark path { fill: none; stroke: var(--cf); stroke-width: 2; }
.k .spark circle { fill: var(--cf); }
.k .spark .area { fill: var(--ct); stroke: none; }

/* ---------- narrow screens ---------- */
@media (max-width: 980px) {
    .w-nav, .w-head .w-signin { display: none; }
    .w-burger { display: grid; }
    .w-hero > .w-wrap, .w-feat { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .w-feat.flip .w-txt { order: 0; }
    .w-plans { grid-template-columns: repeat(2, 1fr); }
    .w-steps { grid-template-columns: 1fr; }
    .w-about { grid-template-columns: auto minmax(0, 1fr); }
    .w-about .w-contact { grid-column: 1 / -1; }
    .w-foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .w-wrap { padding: 0 16px; }
    .w-head .w-wrap { gap: 12px; }
    .w-head .w-right > .w-btn, .w-head .w-right > .w-theme { display: none; }
    .w-menu .w-pickers { display: flex; }
    .w-right { gap: 10px; }
    .w-hero { padding: 40px 0 56px; }
    .w-lede { font-size: 17.5px; }
    .w-sec { padding: 64px 0; }
    .w-plans { grid-template-columns: minmax(0, 1fr); }
    .w-ph, .w-hero .w-ph { zoom: .6; }
    .w-stage::before { inset: 0; }
    .w-toast { width: 250px; left: 0; bottom: 60px; }
    .w-chipf { top: 150px; right: 0; }
    .w-bill { width: 210px; left: 0; bottom: 30px; }
    .w-about { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
    .w-con { grid-template-columns: minmax(0, 1fr); }
    .w-rail { display: none; }
    .w-kpis b { font-size: 16px; }
    .w-xt th:nth-child(2), .w-xt td:nth-child(2) { display: none; }
    .w-seg button { padding: 8px 10px; font-size: 13.5px; }
    .w-page { padding: 32px 0 64px; }
    .w-panel { padding: 24px 18px; }
    .w-row2, .w-ways { grid-template-columns: 1fr; }
    .w-metric b { font-size: 30px; }
}