/**
 * Born Slippy Fit.
 *
 * Enqueued, and !important throughout, because page builders strip inline
 * <style> from shortcode output and their resets load afterwards.
 */

.bfit{
	--ink:#0A0A0A !important;
	--paper:#F7F5F2 !important;
	--line:rgba(10,10,10,.13) !important;
	--soft:rgba(10,10,10,.55) !important;
	--warn:#8A6D1F !important;
	--gutter:clamp(20px,4.5vw,64px) !important;
	--r:10px !important;
	position:relative !important;
	left:50% !important;
	width:100vw !important;
	margin-left:-50vw !important;
	background:var(--paper) !important;
	color:var(--ink) !important;
	min-height:100vh !important;
	min-height:100svh !important;
}
.bfit *,.bfit *::before,.bfit *::after{ box-sizing:border-box !important; }
.bfit .bfit__wrap{ padding:clamp(72px,11vh,130px) var(--gutter) clamp(80px,12vh,140px) !important; max-width:940px !important; margin:0 auto !important; }
.bfit .bfit__wrap--narrow{ max-width:640px !important; }

/* progress, fixed, so it is visible on a long screen */
.bfit .bfit__bar{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; height:2px !important; background:rgba(10,10,10,.08) !important; z-index:80 !important; }
.bfit .bfit__bar-f{ display:block !important; height:100% !important; width:0 !important; background:var(--ink) !important; transition:width .5s cubic-bezier(.22,1,.36,1) !important; }

/* one step at a time */
.bfit .bfit__step{ display:none !important; }
.bfit .bfit__step.is-on{ display:block !important; animation:bfitIn .45s cubic-bezier(.22,1,.36,1) both !important; }
@keyframes bfitIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.bfit .bfit__k{ margin:0 0 14px !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.2em !important; text-transform:uppercase !important; color:var(--soft) !important; }
.bfit .bfit__h{ margin:0 !important; font-size:clamp(30px,4.2vw,54px) !important; font-weight:800 !important; line-height:1 !important; letter-spacing:-.034em !important; }
.bfit .bfit__h2{ margin:0 !important; font-size:clamp(24px,3vw,38px) !important; font-weight:800 !important; line-height:1.04 !important; letter-spacing:-.03em !important; }
.bfit .bfit__lead{ margin:clamp(14px,2vh,22px) 0 0 !important; max-width:56ch !important; font-size:clamp(15px,1.05vw,17px) !important; line-height:1.6 !important; color:var(--soft) !important; }
.bfit .bfit__p{ margin:14px 0 0 !important; max-width:56ch !important; font-size:14.5px !important; line-height:1.65 !important; color:var(--soft) !important; }
.bfit .bfit__p a,.bfit .bfit__lead a{ color:var(--ink) !important; }

/* The recommendation, stated before anything else. */
.bfit .bfit__warn-top{
	margin:clamp(24px,3.5vh,36px) 0 0 !important;
	padding:clamp(18px,2.4vh,24px) !important;
	border:1px solid var(--ink) !important;
	background:var(--ink) !important;
}
.bfit .bfit__warn-top p{
	margin:0 !important;
	max-width:62ch !important;
	font-size:14px !important;
	line-height:1.6 !important;
	color:var(--paper) !important;
}

/* what you need */
.bfit .bfit__need{ margin:clamp(26px,4vh,42px) 0 0 !important; padding:clamp(22px,3vh,30px) !important; border:1px solid var(--ink) !important; border-radius:var(--r) !important; background:#fff !important; }
.bfit .bfit__need-k{ margin:0 0 16px !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:var(--soft) !important; }
.bfit .bfit__need-l{ list-style:none !important; margin:0 !important; padding:0 !important; display:grid !important; gap:14px !important; }
.bfit .bfit__need-l li{ position:relative !important; padding-left:20px !important; font-size:14px !important; line-height:1.6 !important; color:var(--soft) !important; }
.bfit .bfit__need-l li::before{ content:"" !important; position:absolute !important; left:0 !important; top:.62em !important; width:5px !important; height:5px !important; border-radius:50% !important; background:var(--ink) !important; }
.bfit .bfit__need-l b{ color:var(--ink) !important; font-weight:700 !important; }
/* The other way of doing this, offered before they start rather than after
   they give up. */
.bfit .bfit__pro{
	margin:16px 0 0 !important;
	padding:clamp(18px,2.4vh,24px) !important;
	border:1px solid var(--line) !important;
	border-left:3px solid var(--ink) !important;
	background:#fff !important;
}
.bfit .bfit__pro-k{
	margin:0 0 10px !important;
	font-size:10px !important;
	font-weight:700 !important;
	letter-spacing:.16em !important;
	text-transform:uppercase !important;
	color:var(--soft) !important;
}
.bfit .bfit__pro-t{
	margin:0 0 10px !important;
	font-size:13.5px !important;
	line-height:1.6 !important;
	color:var(--soft) !important;
}
.bfit .bfit__pro-t:last-child{ margin-bottom:0 !important; }
.bfit .bfit__pro-t a{ color:var(--ink) !important; font-weight:700 !important; }

.bfit .bfit__save-note{ margin:18px 0 0 !important; font-size:12.5px !important; line-height:1.6 !important; color:var(--soft) !important; }

/* ---- the factory diagrams ----
   Shown above the fields, because the number beside each input is the number
   on the drawing, and reading the drawing first is the whole point. */
.bfit .bfit__figs{
	display:grid !important;
	gap:16px !important;
	margin:clamp(24px,3.5vh,36px) 0 0 !important;
}
.bfit .bfit__fig{ margin:0 !important; }
/* Square corners. The site rule is rounded on buttons and cards, square on
   media, and this is a picture in a frame rather than a control. */
.bfit button.bfit__fig-b{
	display:block !important;
	width:100% !important;
	margin:0 !important;
	padding:clamp(12px,1.8vh,18px) !important;
	border:1px solid var(--line) !important;
	border-radius:0 !important;
	background:#fff !important;
	cursor:zoom-in !important;
	-webkit-appearance:none !important;
	appearance:none !important;
	transition:border-color .25s ease !important;
}
.bfit button.bfit__fig-b:hover{ border-color:var(--ink) !important; }
.bfit button.bfit__fig-b:focus-visible{ outline:1px solid var(--ink) !important; outline-offset:3px !important; }
.bfit .bfit__fig-b img{
	display:block !important;
	width:100% !important;
	height:auto !important;
	margin:0 !important;
}
.bfit .bfit__fig-c{
	display:flex !important;
	flex-wrap:wrap !important;
	align-items:baseline !important;
	justify-content:space-between !important;
	gap:6px 14px !important;
	margin:16px 2px 0 !important;
	font-size:11.5px !important;
	line-height:1.5 !important;
	color:var(--soft) !important;
}
.bfit .bfit__fig-c span{
	font-size:9.5px !important;
	font-weight:700 !important;
	letter-spacing:.16em !important;
	text-transform:uppercase !important;
	white-space:nowrap !important;
}

/* full screen, because the numbers are small on a phone */
.bfit .bfit__zoom{
	position:fixed !important;
	inset:0 !important;
	z-index:9500 !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	padding:clamp(12px,3vw,40px) !important;
	background:rgba(10,10,10,.94) !important;
}
.bfit .bfit__zoom[hidden]{ display:none !important; }
.bfit .bfit__zoom-i{
	display:block !important;
	max-width:100% !important;
	max-height:100% !important;
	width:auto !important;
	height:auto !important;
	object-fit:contain !important;
	background:#fff !important;
	border-radius:0 !important;
}
.bfit button.bfit__zoom-x{
	position:absolute !important;
	top:clamp(10px,2vw,22px) !important;
	right:clamp(10px,2vw,22px) !important;
	width:44px !important;
	height:44px !important;
	padding:0 !important;
	border:1px solid rgba(247,245,242,.4) !important;
	border-radius:999px !important;
	background:transparent !important;
	color:#F7F5F2 !important;
	font-family:inherit !important;
	font-size:22px !important;
	line-height:1 !important;
	cursor:pointer !important;
	-webkit-appearance:none !important;
	appearance:none !important;
	transition:background-color .25s ease !important;
}
.bfit button.bfit__zoom-x:hover{ background:rgba(247,245,242,.14) !important; }

/* context fields */
.bfit .bfit__fields{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; margin:clamp(26px,4vh,40px) 0 0 !important; }
.bfit .bfit__field{ display:block !important; margin:0 !important; }
.bfit .bfit__field--wide{ grid-column:1 / -1 !important; }
.bfit .bfit__label{ display:block !important; margin:0 0 8px !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--soft) !important; }
.bfit .bfit__label span{ opacity:.7 !important; }
.bfit .bfit__input{
	width:100% !important; height:auto !important; min-height:52px !important;
	padding:14px 16px !important; border:1px solid var(--line) !important; border-radius:8px !important;
	background:#fff !important; color:var(--ink) !important; font-family:inherit !important;
	font-size:16px !important; line-height:1.3 !important;
	-webkit-appearance:none !important; appearance:none !important; box-shadow:none !important;
	transition:border-color .25s !important;
}
.bfit .bfit__input:focus{ outline:0 !important; border-color:var(--ink) !important; }
.bfit .bfit__area{ min-height:96px !important; resize:vertical !important; }
.bfit .bfit__sel{ position:relative !important; display:block !important; }
.bfit .bfit__sel select{ padding-right:40px !important; cursor:pointer !important; }
.bfit .bfit__sel-c{ position:absolute !important; right:16px !important; top:50% !important; width:8px !important; height:8px !important; margin-top:-6px !important; border-right:1.5px solid var(--soft) !important; border-bottom:1.5px solid var(--soft) !important; transform:rotate(45deg) !important; pointer-events:none !important; }
.bfit .bfit__help{ margin:16px 0 0 !important; font-size:12px !important; line-height:1.55 !important; color:var(--soft) !important; }

/* the measurement cards */
.bfit .bfit__points{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:clamp(14px,1.8vh,20px) !important; margin:clamp(26px,4vh,40px) 0 0 !important; }
.bfit .bfit__point{ padding:clamp(16px,2vh,20px) !important; border:1px solid var(--line) !important; border-radius:var(--r) !important; background:#fff !important; transition:border-color .25s !important; }
.bfit .bfit__point:focus-within{ border-color:var(--ink) !important; }
.bfit .bfit__point.is-key{ border-left:3px solid var(--ink) !important; }
.bfit .bfit__point-h{ display:flex !important; align-items:baseline !important; gap:10px !important; }
.bfit .bfit__n{ flex:none !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.1em !important; color:var(--soft) !important; min-width:18px !important; }
.bfit .bfit__point-l{ display:block !important; margin:0 !important; font-size:14.5px !important; font-weight:800 !important; letter-spacing:-.018em !important; line-height:1.3 !important; }
.bfit .bfit__key{ display:inline-block !important; margin-left:6px !important; padding:2px 7px !important; border-radius:999px !important; background:var(--ink) !important; color:var(--paper) !important; font-size:8.5px !important; font-style:normal !important; font-weight:700 !important; letter-spacing:.14em !important; text-transform:uppercase !important; vertical-align:2px !important; }
.bfit .bfit__point .bfit__help{ margin:16px 0 16px !important; padding-left:28px !important; }
.bfit .bfit__in{ position:relative !important; padding-left:28px !important; }
.bfit .bfit__in .bfit__input{ padding-right:44px !important; }
.bfit .bfit__unit{ position:absolute !important; right:14px !important; top:50% !important; transform:translateY(-50%) !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--soft) !important; pointer-events:none !important; }

/* a doubt, not a refusal */
.bfit .bfit__warn{ margin:16px 0 0 !important; padding:10px 12px !important; border-radius:8px !important; background:rgba(138,109,31,.09) !important; font-size:12px !important; line-height:1.5 !important; color:var(--warn) !important; }
.bfit .bfit__warn[hidden]{ display:none !important; }

/* review */
.bfit .bfit__review{ margin:clamp(24px,3.5vh,36px) 0 0 !important; border-top:1px solid var(--line) !important; }
.bfit .bfit__rgroup{ padding:clamp(18px,2.4vh,24px) 0 !important; border-bottom:1px solid var(--line) !important; }
.bfit .bfit__rgroup-t{ margin:0 0 14px !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:var(--soft) !important; }
.bfit .bfit__rrow{ display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:16px !important; padding:7px 0 !important; font-size:14px !important; }
.bfit .bfit__rrow b{ font-weight:700 !important; }
.bfit .bfit__rrow.is-missing{ color:#B23B33 !important; }
.bfit .bfit__rrow button{
	appearance:none !important; -webkit-appearance:none !important;
	border:0 !important; background:transparent !important; padding:0 !important;
	font:inherit !important; color:var(--soft) !important; cursor:pointer !important;
	text-decoration:underline !important; text-underline-offset:3px !important;
}
.bfit .bfit__rrow button:hover{ color:var(--ink) !important; }

.bfit .bfit__err{ margin:18px 0 0 !important; padding:12px 14px !important; border:1px solid #B23B33 !important; border-radius:8px !important; font-size:13px !important; line-height:1.5 !important; color:#B23B33 !important; }
.bfit .bfit__err[hidden]{ display:none !important; }

/* nav */
.bfit .bfit__nav{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; margin:clamp(30px,4.5vh,50px) 0 0 !important; padding-top:clamp(20px,3vh,30px) !important; border-top:1px solid var(--line) !important; }
.bfit button.bfit__btn,.bfit a.bfit__btn{
	display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px !important;
	min-height:54px !important; padding:16px 30px !important;
	border:1px solid var(--ink) !important; border-radius:999px !important;
	background:var(--ink) !important; background-image:none !important; color:var(--paper) !important;
	font-family:inherit !important; font-size:11px !important; font-weight:700 !important; line-height:1 !important;
	letter-spacing:.2em !important; text-transform:uppercase !important; text-decoration:none !important;
	box-shadow:none !important; cursor:pointer !important; margin-left:auto !important;
	-webkit-appearance:none !important; appearance:none !important;
	transition:background-color .3s,color .3s,opacity .3s !important;
}
.bfit button.bfit__btn:hover,.bfit a.bfit__btn:hover{ background:transparent !important; color:var(--ink) !important; }
.bfit button.bfit__btn[disabled]{ opacity:.5 !important; cursor:default !important; }
.bfit button.bfit__btn *{ pointer-events:none !important; }
.bfit button.bfit__back{
	appearance:none !important; -webkit-appearance:none !important;
	border:0 !important; background:transparent !important; padding:8px 0 !important;
	font-family:inherit !important; font-size:10.5px !important; font-weight:700 !important;
	letter-spacing:.18em !important; text-transform:uppercase !important;
	color:var(--soft) !important; cursor:pointer !important;
	transition:color .25s !important;
}
.bfit button.bfit__back:hover{ color:var(--ink) !important; }

/* saved, quietly */
.bfit .bfit__saved{
	position:fixed !important; right:clamp(16px,3vw,28px) !important; bottom:clamp(16px,3vw,28px) !important;
	z-index:90 !important; margin:0 !important; padding:9px 16px !important;
	border-radius:999px !important; background:var(--ink) !important; color:var(--paper) !important;
	font-size:10px !important; font-weight:700 !important; letter-spacing:.18em !important; text-transform:uppercase !important;
	opacity:0 !important; transform:translateY(6px) !important;
	transition:opacity .3s ease,transform .3s ease !important;
	pointer-events:none !important;
}
.bfit .bfit__saved.is-on{ opacity:1 !important; transform:none !important; }
.bfit .bfit__saved[hidden]{ display:block !important; }

@media (max-width:767px){
	.bfit .bfit__points{ grid-template-columns:1fr !important; gap:16px !important; }
	.bfit .bfit__fields{ grid-template-columns:1fr !important; gap:16px !important; }
	.bfit .bfit__nav{ flex-direction:column-reverse !important; align-items:stretch !important; }
	.bfit button.bfit__btn,.bfit a.bfit__btn{ width:100% !important; margin-left:0 !important; }
	.bfit button.bfit__back{ text-align:center !important; }
}
@media (prefers-reduced-motion:reduce){
	.bfit .bfit__step.is-on{ animation:none !important; }
	.bfit .bfit__bar-f,.bfit .bfit__input,.bfit .bfit__point,.bfit button.bfit__btn,.bfit .bfit__saved{ transition:none !important; }
}