/* ============================================================
   Bond — cover letter and reference letter generators.
   The page (form, toolbar) uses the builder's tokens; the sheet
   (.bl-paper) is self-contained so the file writers can lay it out
   again in a frame of its own.
   ============================================================ */

.bl {
	--ink: #1D1D1F;
	--gray: #6E6E73;
	--gray-2: #86868B;
	--hair: #E8E8ED;
	--soft: #F5F5F7;
	--blue: #0071E3;
	--card: 0 1px 2px rgba(0,0,0,.03), 0 8px 24px -8px rgba(0,0,0,.06);
	color: var(--ink);
}

.bl-switch {
	display: inline-flex;
	background: var(--soft);
	border: 1px solid var(--hair);
	border-radius: 100px;
	padding: 4px;
	margin: 0 0 22px;
}
.bl-switch a {
	padding: 8px 16px;
	border-radius: 100px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gray);
	text-decoration: none;
}
.bl-switch a.is-on {
	background: #fff;
	color: var(--ink);
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.bl-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

/* ------------------------------------------------------------- form -- */

.bl-form {
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 18px;
	padding: 22px;
	box-shadow: var(--card);
}
.bl-form fieldset { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.bl-form legend {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gray);
	padding: 0;
	margin-bottom: 9px;
}
.bl-form label { display: block; font-size: 12.5px; font-weight: 600; margin: 9px 0 5px; }
.bl-form label small { font-weight: 500; color: #A1A1A6; font-size: 12px; margin-left: 4px; }
.bl-form input,
.bl-form textarea {
	width: 100%;
	font: inherit;
	font-size: 14.5px;
	border: 1px solid var(--hair);
	border-radius: 11px;
	padding: 10px 13px;
	background: var(--soft);
	color: var(--ink);
	box-sizing: border-box;
}
.bl-form input:focus,
.bl-form textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.bl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.bl-seed {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 11px 14px;
	border-radius: 12px;
	background: #EAF3FF;
	color: #0B4F9E;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 16px;
}
.bl-seed[hidden] { display: none; }
.bl-seed span { font-weight: 500; color: #3E6DA8; font-size: 12.5px; }
.bl-seed button { margin-left: auto; }

.bl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-chip {
	font: inherit;
	font-size: 13px;
	border: 1px solid var(--hair);
	border-radius: 100px;
	padding: 6px 11px;
	background: #fff;
	color: var(--ink);
	cursor: pointer;
}
.bl-chip:hover { border-color: #C9CDD6; }
.bl-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bl-chip-in { margin-top: 8px; }
.bl-hint { font-size: 12px; color: var(--gray-2); margin: 8px 0 0; }

.bl-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.bl-seg button {
	flex: 1 1 0;
	min-width: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--gray);
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 10px;
	padding: 8px 6px;
	cursor: pointer;
}
.bl-seg button.is-on { border-color: var(--blue); color: var(--blue); background: #F2F7FF; }

.bl-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bl-btn {
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	border: 0;
	border-radius: 100px;
	padding: 12px 20px;
	background: var(--blue);
	color: #fff;
	cursor: pointer;
}
.bl-btn:hover { background: #0060C2; }
.bl-btn.is-sec { background: var(--soft); color: var(--ink); border: 1px solid var(--hair); }
.bl-btn.is-sec:hover { background: #ECECF0; }
.bl-link { font: inherit; font-size: 13px; font-weight: 600; background: none; border: 0; padding: 0; color: var(--blue); cursor: pointer; }

/* ------------------------------------------------------ sheet column -- */

.bl-out { position: sticky; top: calc(var(--bond-sticky-top, 76px) + 8px); min-width: 0; }
.bl-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; position: relative; }
.bl-bar-label { font-size: 13px; color: var(--gray); }
.bl-bar-gap { flex: 1; }
.bl-pill {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	border: 1px solid var(--hair);
	background: #fff;
	color: var(--ink);
	border-radius: 100px;
	padding: 7px 13px;
	cursor: pointer;
}
.bl-pill:hover { border-color: #C9CDD6; }
.bl-pill.is-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.bl-pill:disabled { opacity: .6; cursor: default; }

.bl-pop {
	position: absolute;
	right: 0;
	top: 42px;
	z-index: 20;
	width: 260px;
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 14px;
	box-shadow: 0 20px 50px -20px rgba(0,0,0,.3);
	padding: 12px;
}
.bl-pop[hidden] { display: none; }
.bl-pop p { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gray); margin: 2px 0 8px; }
.bl-styles { display: grid; gap: 4px; margin-bottom: 12px; }
.bl-styles button {
	font: inherit;
	font-size: 13.5px;
	text-align: left;
	background: none;
	border: 1px solid transparent;
	border-radius: 9px;
	padding: 8px 10px;
	cursor: pointer;
	color: var(--ink);
}
.bl-styles button:hover { background: var(--soft); }
.bl-styles button.is-on { border-color: var(--blue); background: #F2F7FF; color: #0B4F9E; font-weight: 600; }
.bl-styles button[hidden] { display: none; }
.bl-colors { display: flex; gap: 8px; }
.bl-colors button {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px var(--hair);
	cursor: pointer;
	padding: 0;
}
.bl-colors button.is-on { box-shadow: 0 0 0 2px var(--ink); }

.bl-sheet {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 24px 48px -12px rgba(0,0,0,.12);
	background: #fff;
}
.bl-sheet .bl-paper { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.bl-note-box {
	display: block;
	margin-top: 12px;
	font-size: 12.5px;
	color: var(--gray);
	background: #fff;
	border: 1px solid var(--hair);
	border-radius: 12px;
	padding: 10px 12px;
}
.bl-note-box[hidden] { display: none; }
.bl-err { font-size: 13px; color: #C43D3D; margin: 10px 0 0; }
.bl-err[hidden] { display: none; }

/* ---------------------------------------------------------- the sheet -- */

.bl-paper {
	--bl-accent: #1F3A5F;
	--bl-head: "Libre Baskerville", Georgia, serif;
	--bl-body: "Source Sans 3", Arial, sans-serif;
	--bl-name: #16161A;
	--bl-name-w: 700;
	--bl-name-t: none;
	--bl-name-ls: 0;
	box-sizing: border-box;
	width: 794px;
	min-height: 1123px;
	padding: 76px 80px 72px;
	background: #fff;
	color: #2A2A2E;
	font-family: var(--bl-body);
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
}
.bl-paper * { box-sizing: border-box; }
.bl-paper p { margin: 0 0 12px; }
.bl-name {
	font-family: var(--bl-head);
	font-weight: var(--bl-name-w);
	text-transform: var(--bl-name-t);
	letter-spacing: var(--bl-name-ls);
	font-size: 32px;
	line-height: 1.15;
	color: var(--bl-name);
}
.bl-role { font-size: 14px; font-weight: 600; color: var(--bl-accent); margin-top: 4px; }
.bl-contact { font-size: 12.5px; color: #6B7280; margin-top: 6px; }
/* the rule under the letterhead is the last line's own border, so Word
   receives it as a paragraph border instead of an empty box it drops */
.bl-head > :last-child { padding-bottom: 22px; border-bottom: 1px solid var(--bl-accent); }
.bl-date { color: #6B7280; margin-top: 26px !important; }
.bl-to { margin-bottom: 20px; }
.bl-to p { margin: 0; }
.bl-to b, .bl-sign b { color: #16161A; }
.bl-re { font-weight: 700; color: #16161A; }
.bl-sign { margin-top: 26px; }
.bl-sign p { margin: 0; }
.bl-sign p:first-child { margin-bottom: 4px; }

.bl-p { outline: none; border-radius: 3px; }
.bl-p:hover { background: rgba(0,113,227,.04); }
.bl-p:focus { background: rgba(0,113,227,.06); box-shadow: 0 0 0 2px rgba(0,113,227,.25); }
.bl-paper .is-focus { background: rgba(0,113,227,.09); box-shadow: 0 0 0 2px rgba(0,113,227,.35); border-radius: 3px; }

/* house styles */
.bl-paper[data-style="modern"] { --bl-head: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif; --bl-body: "Inter", Arial, sans-serif; --bl-name-w: 700; --bl-name-ls: -.02em; }
.bl-paper[data-style="modern"] .bl-head { border-left: 6px solid var(--bl-accent); padding-left: 18px; }
.bl-paper[data-style="modern"] .bl-head > :last-child { padding-bottom: 0; border-bottom: 0; }
.bl-paper[data-style="modern"] .bl-date { margin-top: 34px !important; }

.bl-paper[data-style="serif"] { --bl-head: "Playfair Display", Georgia, serif; --bl-body: "Source Serif 4", Georgia, serif; --bl-name-w: 600; }
.bl-paper[data-style="serif"] .bl-head { text-align: center; }


.bl-paper[data-style="band"],
.bl-paper[data-band="1"] { --bl-head: "Montserrat", Arial, sans-serif; --bl-body: "Lato", Arial, sans-serif; }
.bl-paper[data-style="band"] .bl-head,
.bl-paper[data-band="1"] .bl-head {
	background: var(--bl-band, var(--bl-accent));
	margin: -76px -80px 0;
	padding: 56px 80px 30px;
}
.bl-paper[data-style="band"] .bl-name,
.bl-paper[data-style="band"] .bl-role,
.bl-paper[data-style="band"] .bl-contact,
.bl-paper[data-band="1"] .bl-name,
.bl-paper[data-band="1"] .bl-role,
.bl-paper[data-band="1"] .bl-contact { color: var(--bl-band-ink, #fff); }
.bl-paper[data-style="band"] .bl-contact,
.bl-paper[data-band="1"] .bl-contact { opacity: .85; }
.bl-paper[data-style="band"] .bl-head > :last-child,
.bl-paper[data-band="1"] .bl-head > :last-child { padding-bottom: 0; border-bottom: 0; }
.bl-paper[data-style="band"] .bl-date,
.bl-paper[data-band="1"] .bl-date { margin-top: 34px !important; }
.bl-paper[data-style="band"] { --bl-name-t: uppercase; --bl-name-ls: .06em; }
.bl-paper[data-style="band"] .bl-name { font-size: 28px; }

@media (max-width: 900px) {
	.bl-grid { grid-template-columns: 1fr; }
	.bl-out { position: static; }
}
@media (max-width: 520px) {
	.bl-two { grid-template-columns: 1fr; }
	.bl-form { padding: 18px; }
}

/*
 * Every button and switch centres its label on both axes, whatever the
 * theme sets for line-height or padding: the label sits in a flex box
 * instead of on a text baseline.
 */
.bl-switch a,
.bl-chip,
.bl-seg button,
.bl-btn,
.bl-pill,
.bl-styles button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
	text-align: center;
	box-sizing: border-box;
}
.bl-switch a { min-height: 36px; }
.bl-chip { min-height: 32px; }
.bl-seg button { min-height: 38px; }
.bl-btn { min-height: 46px; }
.bl-pill { min-height: 34px; }
.bl-styles button { justify-content: flex-start; text-align: left; min-height: 36px; }
.bl-switch a[hidden], .bl-chip[hidden], .bl-seg button[hidden], .bl-btn[hidden], .bl-pill[hidden] { display: none; }

/* ==========================================================================
   The 2026 look, to match the site: gradient accents, numbered sections,
   soft cards and a gray stage for the sheet. Kept as one block after the
   base rules so it reads as a layer, and wins on order where it ties.
   ========================================================================== */
/* switch */
.bl .bl-switch{background:#fff;border:1px solid #E8E8ED;padding:4px;margin:0 0 22px;box-shadow:0 8px 20px -16px rgba(0,0,0,.3)}
.bl .bl-switch a{display:inline-flex;align-items:center;height:40px;padding:0 18px;font-size:14.5px;color:#1D1D1F;transition:background .2s,color .2s}
.bl .bl-switch a:hover{background:#F5F5F7;color:#0071E3}
.bl .bl-switch a.is-on{background:rgba(0,113,227,.08);color:#0071E3;box-shadow:none}
/* form */
.bl .bl-grid{gap:32px}
.bl .bl-form{border-radius:24px;padding:26px 26px 22px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 30px 60px -40px rgba(15,23,42,.3);counter-reset:blstep}
.bl .bl-form fieldset{counter-increment:blstep;margin:0 0 8px;padding:0 0 18px;border-bottom:1px solid #F0F0F3}
.bl .bl-form fieldset:last-of-type{border-bottom:0;padding-bottom:6px}
.bl .bl-form legend{display:flex;align-items:center;gap:10px;float:left;width:100%;margin:6px 0 6px;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#0071E3}
.bl .bl-form legend::before{content:counter(blstep,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#0071E3,#6D3AED);color:#fff;font-size:11.5px;letter-spacing:0;box-shadow:0 6px 14px -6px rgba(91,58,237,.7)}
.bl .bl-form legend + *{clear:both}
.bl .bl-form label{font-size:13px;margin:12px 0 6px}
.bl .bl-form input,.bl .bl-form textarea{height:46px;border-radius:12px;padding:0 14px;font-size:15px;transition:border-color .2s,box-shadow .2s,background .2s}
.bl .bl-form textarea{height:auto;padding:12px 14px}
.bl .bl-form input:hover{border-color:#D2D2D7}
.bl .bl-form input:focus,.bl .bl-form textarea:focus{border-color:#0071E3;background:#fff;box-shadow:0 0 0 4px rgba(0,113,227,.12)}
.bl .bl-two{gap:12px}
.bl .bl-chips{gap:8px}
.bl .bl-chip{height:36px;padding:0 14px;font-size:13.5px;font-weight:500;transition:transform .2s,border-color .2s,box-shadow .2s,background .2s,color .2s}
.bl .bl-chip:hover{transform:translateY(-2px);border-color:rgba(0,113,227,.3);color:#0071E3;box-shadow:0 10px 20px -14px rgba(0,113,227,.6)}
.bl .bl-chip.is-on{background:linear-gradient(135deg,#0071E3,#5B3AED);border-color:transparent;color:#fff;box-shadow:0 10px 20px -12px rgba(91,58,237,.7)}
.bl .bl-seg{gap:0;padding:4px;border-radius:14px;background:#F5F5F7;flex-wrap:nowrap}
.bl .bl-seg button{height:38px;border:0;border-radius:10px;background:none;font-size:13.5px;color:#6E6E73;transition:background .2s,color .2s,box-shadow .2s}
.bl .bl-seg button:hover{color:#1D1D1F}
.bl .bl-seg button.is-on{background:#fff;color:#0071E3;box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 14px -8px rgba(0,0,0,.25)}
.bl .bl-row{gap:10px;margin-top:14px}
.bl .bl-btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 24px;font-size:15.5px;background:linear-gradient(135deg,#0071E3,#5B3AED);box-shadow:0 14px 28px -14px rgba(91,58,237,.8);transition:transform .2s,box-shadow .2s}
.bl .bl-btn::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l1.6 4.3 4.4 1.7-4.4 1.7L8 13.5l-1.6-4.3L2 7.5l4.4-1.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l1.6 4.3 4.4 1.7-4.4 1.7L8 13.5l-1.6-4.3L2 7.5l4.4-1.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.bl .bl-btn:hover{background:linear-gradient(135deg,#0071E3,#5B3AED);transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(91,58,237,.9)}
.bl .bl-btn.is-sec{background:#fff;color:#1D1D1F;border:1px solid #E8E8ED;box-shadow:0 8px 20px -16px rgba(0,0,0,.3)}
.bl .bl-btn.is-sec::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8a5 5 0 1 1-1.5-3.6M13 2.5v3h-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 8a5 5 0 1 1-1.5-3.6M13 2.5v3h-3' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.bl .bl-btn.is-sec:hover{background:#F5F5F7;color:#0071E3}
.bl .bl-hint{display:flex;align-items:center;gap:7px;margin-top:12px;font-size:12.5px}
.bl .bl-hint::before{content:"";width:14px;height:14px;background:#16A34A;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' rx='2' fill='black'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='3' y='7' width='10' height='7' rx='2' fill='black'/%3E%3Cpath d='M5 7V5a3 3 0 0 1 6 0v2' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
/* output */
.bl .bl-out{background:linear-gradient(180deg,#F5F5F7,#EEEEF1);border-radius:24px;padding:18px 22px 22px}
.bl .bl-bar{gap:6px;margin-bottom:16px}
.bl .bl-bar-label{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 4px;font-size:13px}
.bl .bl-bar-label b{color:#1D1D1F}
.bl .bl-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 12px;font-size:13.5px;border-color:#E8E8ED;box-shadow:0 8px 20px -16px rgba(0,0,0,.3);transition:background .2s,color .2s,border-color .2s}
.bl .bl-pill:hover{background:#fff;border-color:#D2D2D7;color:#0071E3}
.bl .bl-pill.is-dark{background:linear-gradient(135deg,#0071E3,#5B3AED);border-color:transparent;color:#fff;box-shadow:0 12px 24px -12px rgba(91,58,237,.8)}
.bl .bl-pill.is-dark:hover{color:#fff}
.bl #blWord::before,.bl #blPdf::before,.bl #blCopy::before,.bl #blStyleBtn::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.bl #blWord,.bl #blPdf{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v8M4.5 7.5 8 11l3.5-3.5M3 13.5h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.bl #blCopy{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5' y='5' width='8.5' height='9' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M3 10.5V4a2 2 0 0 1 2-2h5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.bl #blStyleBtn{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='5' cy='5' r='2.2' fill='black'/%3E%3Ccircle cx='11' cy='5' r='2.2' fill='black'/%3E%3Ccircle cx='5' cy='11' r='2.2' fill='black'/%3E%3Ccircle cx='11' cy='11' r='2.2' fill='black'/%3E%3C/svg%3E")}
.bl .bl-pop{top:48px;border-radius:18px;padding:14px;box-shadow:0 30px 60px -24px rgba(15,23,42,.35)}
.bl .bl-pop p{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:#0071E3;margin:4px 2px 10px}
.bl .bl-styles button{border-radius:11px;padding:10px 12px}
.bl .bl-styles button.is-on{border-color:transparent;background:rgba(0,113,227,.08);color:#0071E3}
.bl .bl-colors button{width:28px;height:28px}
.bl .bl-colors button.is-on{box-shadow:0 0 0 2px #0071E3}
.bl .bl-sheet{border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 30px 60px -28px rgba(15,23,42,.35)}
.bl .bl-note-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;padding:12px 14px;border:0;border-radius:14px;background:#fff;font-size:13px;line-height:1.5;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.bl .bl-seed{border-radius:14px;background:linear-gradient(135deg,rgba(0,113,227,.08),rgba(124,58,237,.08));color:#0071E3}
@media (max-width:900px){.bl .bl-out{padding:14px}.bl .bl-form{padding:20px 18px}.bl .bl-bar-label{width:100%}.bl .bl-bar-gap{display:none}.bl .bl-pill{flex:1 1 40%}.bl .bl-btn{flex:1 1 100%;justify-content:center}.bl .bl-switch{display:flex}.bl .bl-switch a{flex:1;justify-content:center}}